:root{
  --plum:#2a0f33;
  --plum-2:#43164f;
  --rose:#ff5c8a;
  --rose-deep:#e23b6d;
  --cream:#fff5f8;
  --gold:#ffd479;
  --ink:#3a1430;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Segoe UI",-apple-system,system-ui,sans-serif;
  background:radial-gradient(circle at 30% 20%,var(--plum-2),var(--plum) 70%);
  color:var(--cream);
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));
}

/* ---- signature: evenly spaced multilingual YES background ---- */
#yesField{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.yesWord{
  position:absolute;
  font-weight:800;
  color:rgba(255,255,255,0.085);
  white-space:nowrap;
  user-select:none;
  transition:color .5s ease;
  letter-spacing:.5px;
  will-change:transform;
}
body.celebrate .yesWord{ color:rgba(255,212,121,0.22); }

/* ---- the card ---- */
.card{
  position:relative;
  z-index:2;
  width:100%;
  max-width:560px;
  background:linear-gradient(170deg,rgba(255,245,248,0.97),rgba(255,236,242,0.97));
  color:var(--ink);
  border-radius:28px;
  padding:40px 34px 46px;
  box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.25) inset;
  text-align:center;
}
.eyebrow{
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--rose-deep);
  font-weight:700;
  margin-bottom:18px;
}
h1{
  font-size:clamp(28px,6vw,42px);
  line-height:1.15;
  font-weight:800;
  margin-bottom:10px;
}
.sub{
  font-size:16px;
  color:#7a4a63;
  margin-bottom:6px;
  line-height:1.6;
}
.field{
  color:var(--rose-deep);
  font-weight:700;
  border-bottom:2px dashed rgba(226,59,109,.45);
  padding:0 4px;
  outline:none;
  cursor:text;
  border-radius:4px;
  transition:background .2s;
}
.field:focus{ background:rgba(255,212,121,.35); border-bottom-style:solid; }
.hint{
  font-size:12px;
  color:#b08;
  opacity:.6;
  margin-top:16px;
}

/* ---- buttons ---- */
.btnRow{
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  min-height:90px;
}
.btn-yes{
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  color:#fff;
  border:none;
  font-size:clamp(22px,5vw,34px);
  font-weight:800;
  padding:22px 56px;
  border-radius:20px;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(226,59,109,.5);
  transition:transform .15s ease,box-shadow .15s ease;
  letter-spacing:.5px;
}
.btn-yes:hover{ transform:scale(1.06); box-shadow:0 18px 40px rgba(226,59,109,.6); }
.btn-yes:active{ transform:scale(.98); }

.btn-no{
  background:#efe1e8;
  color:#9a7488;
  border:1px solid #e3cdd9;
  font-size:11px;
  padding:5px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s;
}
.btn-no:hover{ transform:scale(.94); }

/* ---- math modal ---- */
.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(20,5,25,.78);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.overlay.open{ display:flex; }
.quiz{
  width:100%;
  max-width:480px;
  background:#fff;
  color:var(--ink);
  border-radius:22px;
  padding:30px 26px 28px;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  animation:pop .25s ease;
}
@keyframes pop{ from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.quiz h2{ font-size:22px; margin-bottom:6px; color:var(--rose-deep); }
.quiz p{ font-size:14px; color:#7a4a63; margin-bottom:18px; }
.equation{
  font-size:clamp(20px,5vw,26px);
  font-weight:700;
  background:#fdeef4;
  border:2px dashed #f3b6cd;
  border-radius:14px;
  padding:18px 12px;
  margin-bottom:18px;
  line-height:1.7;
  word-break:break-word;
}
.equation sup{ font-size:.7em; }
.frac{ display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; margin:0 4px; }
.frac .top{ border-bottom:2px solid var(--ink); padding:0 6px; }
.frac .bot{ padding:0 6px; }
.ans{
  width:100%;
  font-size:20px;
  text-align:center;
  padding:12px;
  border:2px solid #e3cdd9;
  border-radius:12px;
  margin-bottom:14px;
  outline:none;
}
.ans:focus{ border-color:var(--rose); }
.submit{
  background:var(--ink);
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}
.submit:hover{ background:#56204a; }

/* timer */
.timerWrap{ margin-top:18px; }
.timerTop{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  font-weight:700;
  color:#9a7488;
  margin-bottom:6px;
}
.barTrack{ height:14px; background:#f0dde7; border-radius:10px; overflow:hidden; }
.barFill{
  height:100%;
  width:100%;
  background:linear-gradient(90deg,var(--rose),var(--rose-deep));
  border-radius:10px;
  transition:width 1s linear;
}

.feedback{ font-size:13px; min-height:18px; margin-top:10px; color:var(--rose-deep); font-weight:600; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}