/* Reset & base */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg1: #fff0f5;
  --accent: #ff6fa3;
  --soft: #ffdfe9;
  --muted: #6b7280;
  --card: #ffffff;
}

html,body{height:100%;}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(120deg,#fff8fb 0%, #fffaf0 60%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page card */
.card{
  width: min(96vw, 760px);
  max-width: 760px;
  background: linear-gradient(180deg,#fff,#fff8ff);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(12,20,40,0.12);
  padding: clamp(20px,3vw,36px);
  overflow: hidden;
  position: relative;
}

/* Header */
.card-header { text-align: center; margin-bottom: 16px; }
.title{
  font-family: "Dancing Script", "Poppins", sans-serif;
  font-weight: 600;
  color: #ff2d95;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: 0.2px;
}
.subtitle{
  color: var(--muted);
  margin-top:6px;
  font-size: 0.98rem;
}

/* Jar area */
.jar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:16px;
}

/* Magic button */
.magic-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(90deg,#ff9a9e,#fad0c4);
  color: #fff;
  font-weight:700;
  font-size:1.05rem;
  box-shadow: 0 8px 18px rgba(255,105,180,0.2);
  transform-origin:center;
  transition: transform .16s ease, box-shadow .16s ease;
}
.magic-btn:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(255,105,180,0.18); }
.jar-emoji{ font-size:1.3rem; }

/* small controls */
.controls{ display:flex; gap:10px; align-items:center; }
.micro{
  background: #fff;
  border: 1px solid #f0d9e6;
  padding:8px 10px;
  border-radius:10px;
  font-size:.9rem;
  cursor:pointer;
  color:#2b2b2b;
  box-shadow: 0 6px 14px rgba(10,10,10,0.03);
}
.micro:hover{ transform: translateY(-3px); }

/* message box */
.message{
  width: min(92%, 680px);
  min-height: 64px;
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff8fc, #fff0f5);
  border: 1px solid #fde7f3;
  color: #b02e6f;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 600;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-top: 8px;
}

/* effect nodes (small default styling) */
.effects { position:absolute; inset:0; pointer-events:none; }

/* small emoji elements (created by JS) */
.effect-node{
  position: absolute;
  will-change: transform, opacity;
  pointer-events: none;
  text-align:center;
  font-size: 16px;
  transform: translateY(0);
  opacity: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.08));
}

/* responsive layout tweaks */
@media (max-width:520px){
  .card{ padding:18px; }
  .controls{ flex-wrap:wrap; justify-content:center; }
  .magic-btn{ width:100%; justify-content:center; }
  .message{ font-size: 1rem; padding:10px; min-height:72px; }
}