/* ============================================================
   Shared design system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Caveat:wght@500;700&display=swap');

:root{
  --cream:#FFF7F2;
  --cream-2:#FDEDE6;
  --blush:#F8DAD3;
  --blush-deep:#EFBDB4;
  --rose:#C4626C;
  --rose-dark:#A44C57;
  --gold:#C9944A;
  --ink:#48333A;
  --ink-soft:#7A626A;
  --white:#FFFDFC;
  --shadow:0 2px 4px rgba(164,76,87,.06), 0 8px 24px rgba(164,76,87,.10);
  --shadow-lg:0 4px 8px rgba(164,76,87,.08), 0 20px 48px rgba(164,76,87,.16);
  --radius:20px;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --hand:'Caveat', 'Bradley Hand', cursive;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, var(--blush) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, var(--cream-2) 0%, transparent 70%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:780px;margin:0 auto;padding:16px 20px 24px;}
.wrap-wide{max-width:1180px;}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em;}
h1{font-size:clamp(2rem,7vw,2.9rem);}
h2{font-size:clamp(1.4rem,4.5vw,1.8rem);}
h3{font-size:1.1rem;}
p{margin:0 0 1em;}
a{color:var(--rose);}

.hand{font-family:var(--hand);font-size:1.45em;line-height:1.35;color:var(--rose);}
.muted{color:var(--ink-soft);}
.center{text-align:center;}
.small{font-size:.875rem;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--body);font-size:1rem;font-weight:600;
  padding:14px 26px;border-radius:999px;border:none;
  background:var(--rose);color:var(--white);
  cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--rose-dark);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.btn:active{transform:translateY(0) scale(.98);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.btn-ghost{background:transparent;color:var(--rose);box-shadow:none;border:1.5px solid var(--blush-deep);}
.btn-ghost:hover{background:var(--blush);color:var(--rose-dark);}
.btn-sm{padding:9px 18px;font-size:.875rem;min-height:40px;}
.btn-block{width:100%;}

/* ---------- cards / panels ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  border:1px solid rgba(239,189,180,.35);
}

/* ---------- inputs ---------- */
.input{
  width:100%;font-family:var(--body);font-size:1.05rem;
  padding:15px 18px;border-radius:16px;
  border:1.5px solid var(--blush-deep);
  background:var(--white);color:var(--ink);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{border-color:var(--rose);box-shadow:0 0 0 4px rgba(196,98,108,.13);}
.input::placeholder{color:#C6AEB4;}

/* ---------- site header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;max-width:1180px;margin:0 auto;
}
.topbar a{
  font-size:.875rem;font-weight:600;text-decoration:none;color:var(--rose);
  display:inline-flex;align-items:center;gap:.35em;padding:8px 4px;
}
.progress-pips{display:flex;gap:6px;}
.pip{width:9px;height:9px;border-radius:50%;background:var(--blush-deep);}
.pip.on{background:var(--rose);}

/* ---------- game shell ---------- */
.round-meta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px;
}
.feedback{min-height:24px;font-weight:600;margin-top:10px;}
.feedback.good{color:#4A7C59;}
.feedback.bad{color:var(--rose);}

/* ---------- clue reveal modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(72,51,58,.55);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.overlay.show{opacity:1;pointer-events:auto;}
.clue-card{
  background:var(--white);border-radius:24px;padding:30px 28px;
  max-width:420px;width:100%;text-align:center;
  /* A very long clue scrolls inside this card rather than running off the
     screen, so the page itself never needs a scrollbar. */
  max-height:calc(100svh - 40px);overflow-y:auto;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--blush-deep);
  transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);
}
.overlay.show .clue-card{transform:none;}
.clue-kicker{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.clue-text{font-family:var(--hand);font-size:1.6rem;line-height:1.3;color:var(--ink);margin:14px 0 24px;}

canvas.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;}

/* ---------- misc ---------- */
.hr{height:1px;background:var(--blush-deep);opacity:.5;border:0;margin:18px 0;}
.hidden{display:none !important;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

/* ============================================================
   Laptop. This is where she will actually be playing.
   ============================================================ */
@media(min-width:900px){
  body{font-size:1.0625rem;}
  .card{padding:20px 28px;}
  .btn{padding:13px 28px;}
  .wrap{padding-bottom:24px;}
}