/* ============================================================
   WHYTE PYRAMID ACADEMY — SHARED THEME  (Maths Quest + Grammar Quest)
   Colourful, high-energy, ADHD-friendly UI.
   Used by both hubs and every lesson page. All class names and
   animation hooks are kept stable for the game engines.
   ============================================================ */

:root {
  --pink:   #ff3d9a;
  --yellow: #ffd23f;
  --green:  #2bd576;
  --red:    #ff5b6b;
  --blue:   #4b8bff;
  --purple: #9b5cff;
  --orange: #ff9f43;
  --cyan:   #22d3ee;
  --ink:    #241a5e;

  --card: rgba(255, 255, 255, 0.97);
  --card-grad: linear-gradient(180deg, #ffffff 0%, #f6f4ff 100%);
  --line: #eceafc;

  --shadow:      0 18px 40px rgba(35, 20, 80, 0.28);
  --shadow-soft: 0 10px 24px rgba(35, 20, 80, 0.16);
  --shadow-hover:0 26px 54px rgba(35, 20, 80, 0.34);

  --radius: 24px;
  --radius-sm: 16px;
  --font: "Baloo 2", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font);
  color: var(--ink);
  min-height: 100%;
}

body {
  background: linear-gradient(-45deg, #6d28d9, #2563eb, #db2777, #f59e0b, #0ea5e9);
  background-size: 400% 400%;
  animation: bgShift 24s ease infinite;
  overflow-x: hidden;
  position: relative;
}

/* Decorative glowing blobs (site-wide, no markup needed) */
body::before {
  content: "";
  position: fixed; inset: -10% -10% -10% -10%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.30), transparent 70%) 12% 18%/38vmax 38vmax no-repeat,
    radial-gradient(closest-side, rgba(255,210,63,.28),  transparent 70%) 88% 12%/30vmax 30vmax no-repeat,
    radial-gradient(closest-side, rgba(43,213,118,.26),  transparent 70%) 78% 88%/34vmax 34vmax no-repeat,
    radial-gradient(closest-side, rgba(255,61,154,.24),  transparent 70%) 8% 86%/30vmax 30vmax no-repeat;
  filter: blur(6px);
  animation: floatBlobs 26s ease-in-out infinite alternate;
}
/* Faint starry dots */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.6) 1.4px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.35) 1.2px, transparent 1.3px);
  background-size: 46px 46px, 78px 78px;
  background-position: 0 0, 24px 30px;
  opacity: .35;
}

@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes floatBlobs {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-2.5%,0) scale(1.06); }
}

/* Respect reduced-motion but keep the app usable */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  body::before { animation: none; }
}

.wrap { max-width: 920px; margin: 0 auto; padding: 18px 16px 64px; }

/* ---------- Header / HUD ---------- */
.hud {
  position: sticky; top: 10px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, rgba(36,26,94,.62), rgba(36,26,94,.5));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 10px 14px; margin-bottom: 18px;
  color: #fff;
  box-shadow: 0 10px 26px rgba(20,12,55,.28);
}
.hud .chip {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 7px 15px;
  font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: transform .1s ease, background .15s ease;
}
a.chip { text-decoration: none; color: #fff; }
a.chip:hover, .hud .btn.ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.28); }
.hud .chip b { font-size: 17px; color: var(--yellow); }

.streak-fire.on { animation: wiggle 0.5s ease infinite; }
.streak-fire.on b { color: var(--orange); }
@keyframes wiggle { 0%,100% { transform: rotate(-8deg) scale(1.05); } 50% { transform: rotate(8deg) scale(1.2); } }

/* XP bar */
.xpbar {
  flex: 1 1 160px; min-width: 140px; height: 18px;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px; overflow: hidden; position: relative;
}
.xpbar > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--yellow), var(--green), var(--cyan));
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(43,213,118,.7);
  transition: width 0.6s cubic-bezier(.2,.9,.3,1);
  position: relative;
}
.xpbar > i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Cards ---------- */
.card {
  background: var(--card-grad);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px; margin: 0 auto; position: relative;
  animation: popIn 0.5s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes popIn {
  from { transform: translateY(26px) scale(0.95); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

h1, h2, h3 { line-height: 1.14; margin: 0 0 12px; }
h1 { font-size: clamp(28px, 6vw, 46px); letter-spacing: .3px; }
.title-pop {
  color: #fff; text-align: center;
  text-shadow: 0 3px 0 rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.28);
  letter-spacing: .5px;
}
.subtitle { text-align: center; color: #fff; font-weight: 700; opacity: .96; margin-top: -4px; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.muted { color: #6b6b8a; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 800; font-size: 20px; color: #fff;
  padding: 16px 28px; border-radius: 18px;
  background: linear-gradient(160deg, var(--pink), var(--purple));
  box-shadow: 0 7px 0 rgba(0,0,0,.16), 0 14px 26px rgba(35,20,80,.28);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  touch-action: manipulation; overflow: hidden; isolation: isolate;
}
.btn::before {   /* glossy top sheen */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
}
.btn:hover { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(0,0,0,.16), 0 6px 14px rgba(35,20,80,.26); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.btn.big { font-size: 24px; padding: 20px 34px; width: 100%; }
.btn.green { background: linear-gradient(160deg, #34e089, #12b866); }
.btn.blue  { background: linear-gradient(160deg, #5aa8ff, #2f6bff); }
.btn.orange{ background: linear-gradient(160deg, #ffb057, #ff7f2a); }
/* Ghost = secondary button. Dark-on-light by default (readable on white
   cards); white-on-dark only inside the HUD. */
.btn.ghost {
  background: #efeafd; color: var(--ink);
  box-shadow: 0 4px 0 rgba(35,20,80,.10);
  font-size:15px; padding:9px 15px; border: 2px solid #dcd5f6;
}
.btn.ghost::before { display:none; }
.btn.ghost:hover { background:#e6def9; filter:none; }
.btn.ghost:active { box-shadow: 0 1px 0 rgba(35,20,80,.10); }
.hud .btn.ghost {
  background: rgba(255,255,255,.18); color:#fff; border-color: rgba(255,255,255,.28); box-shadow:none;
}
.hud .btn.ghost:hover { background: rgba(255,255,255,.30); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); box-shadow: 0 3px 0 rgba(0,0,0,.14); }

/* Answer option buttons */
.options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 520px){ .options { grid-template-columns: 1fr; } }
.opt {
  border: 3px solid var(--line);
  background: linear-gradient(180deg,#ffffff,#f7f5ff);
  color: var(--ink); border-radius: 18px; padding: 18px;
  font-size: 26px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 14px rgba(35,20,80,.10);
  transition: transform .1s, border-color .15s, box-shadow .15s, background .15s;
  font-family: var(--font);
}
.opt:hover { transform: translateY(-4px) scale(1.02); border-color: var(--blue); box-shadow: 0 14px 26px rgba(75,139,255,.26); }
.opt:active { transform: translateY(0) scale(.99); }
.opt.correct { background: linear-gradient(160deg,#34e089,#12b866); color:#fff; border-color: #0f9d58; box-shadow: 0 0 0 4px rgba(43,213,118,.28); animation: pop 0.4s; }
.opt.wrong   { background: linear-gradient(160deg,#ff6b79,#e23a4b); color:#fff; border-color: #c62537; animation: shake 0.4s; }
@keyframes pop { 50% { transform: scale(1.14); } }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }

/* Big text input for typed answers */
.answer-input {
  width: 100%; font-family: var(--font); font-size: 40px; font-weight: 800;
  text-align: center; padding: 14px; border: 4px dashed var(--blue);
  border-radius: 18px; color: var(--ink); outline: none;
  background: linear-gradient(180deg,#ffffff,#f5f8ff);
  transition: box-shadow .15s, border-color .15s;
}
.answer-input:focus { border-style: solid; box-shadow: 0 0 0 5px rgba(75,139,255,.22); }

/* ---------- Progress dots / stage map (gem badges) ---------- */
.stagemap { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 6px 0 20px; }
.stagemap .node {
  width: 46px; height: 46px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800; color:#fff; font-size:20px;
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.14));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 6px 14px rgba(20,12,55,.24), inset 0 1px 0 rgba(255,255,255,.4);
}
.stagemap .node.done { background: linear-gradient(160deg,#34e089,#12b866); border-color:#0f9d58; box-shadow: 0 6px 16px rgba(43,213,118,.5); }
.stagemap .node.active {
  background: linear-gradient(160deg,#ffe27a,#ffd23f); color: var(--ink);
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 8px 20px rgba(255,210,63,.6);
  animation: nodePulse 1.6s ease-in-out infinite;
}
@keyframes nodePulse { 0%,100%{ transform: translateY(0) scale(1.06);} 50%{ transform: translateY(-3px) scale(1.14);} }
.stagemap .node.clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, filter .15s; }
.stagemap .node.clickable:hover { transform: translateY(-3px) scale(1.14); filter: brightness(1.05); box-shadow: 0 12px 22px rgba(0,0,0,.3); }
.stagemap .node.clickable:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Mascot / speech ---------- */
.mascot { font-size: 64px; text-align:center; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0,0,0,.22)); }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.speech {
  background: var(--card-grad); border-radius: 18px; padding: 15px 20px; position: relative;
  font-weight: 700; text-align:center; margin: 14px auto 0; max-width: 580px;
  box-shadow: var(--shadow-soft); border: 1px solid #efeaff;
}
.speech::after {   /* little tail pointing up to the mascot */
  content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  border: 11px solid transparent; border-top: 0;
  border-bottom-color: #fbf9ff;
  filter: drop-shadow(0 -2px 1px rgba(0,0,0,.05));
}

/* ---------- Column addition grid ---------- */
.colsum { display:inline-block; font-variant-numeric: tabular-nums; }
.colsum table { border-collapse: collapse; margin: 0 auto; }
.colsum td { width: 56px; height: 62px; text-align:center; font-size: 40px; font-weight: 800; }
.colsum .op { font-size: 34px; color: var(--pink); }
.colsum .line td { border-top: 5px solid var(--ink); height: 8px; }
.colsum .ans td { border: 3px dashed var(--purple); border-radius: 10px; background:#faf7ff; }
.carry { color: var(--orange); font-size: 20px; height: 22px; }

/* ---------- Feedback banner ---------- */
.feedback { text-align:center; font-size: 22px; font-weight: 800; margin-top: 16px; min-height: 30px; }
.feedback.good { color: #12a55a; }
.feedback.bad  { color: #e23a4b; }
.feedback.good, .feedback.bad { animation: pop .35s; }

/* ---------- Week hub cards ---------- */
.weekgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 24px; }
.weekcard {
  background: var(--card-grad); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 22px; text-align:center; position: relative; overflow:hidden;
  border: 1px solid rgba(255,255,255,.7);
  animation: popIn .5s both; transition: transform .14s ease, box-shadow .14s ease;
}
.weekcard::before {   /* colored top accent */
  content:""; position:absolute; left:0; right:0; top:0; height:7px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue));
}
.weekcard:not(.locked):hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-hover); }
.weekcard .emoji { font-size: 52px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.16)); }
.weekcard h3 { margin: 8px 0 2px; }
.weekcard .tag { font-size: 13px; font-weight:800; color:#fff; padding:5px 12px; border-radius:999px; display:inline-block; box-shadow: 0 6px 14px rgba(0,0,0,.14); }
.tag.live { background: linear-gradient(160deg,#34e089,#12b866); }
.tag.soon { background: #b0b0c8; }
.weekcard.locked { filter: grayscale(.45); opacity: .85; }
.weekcard .lock { font-size: 30px; }

/* ---------- Brand banner (Whyte Pyramid Academy) ---------- */
.brand {
  display:flex; align-items:center; justify-content:center; gap:12px;
  color:#fff; font-weight:800; letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.32); margin: 4px 0 12px; text-align:center;
}
.brand .pyr { font-size:26px; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); animation: bob 3.4s ease-in-out infinite; }
.brand .nm { font-size: clamp(16px, 3.6vw, 22px); }
.brand small { display:block; font-weight:800; opacity:.92; font-size:11px; letter-spacing:3px; text-transform:uppercase; }

/* ---------- Teaching / worked-example animation ---------- */
.teach-narr {
  background: linear-gradient(135deg, #ffffff, #f0ecff);
  border-left: 8px solid var(--purple);
  border-radius: 14px; padding: 15px 18px; font-size: 19px; font-weight: 700;
  min-height: 30px; margin-bottom: 14px; line-height: 1.35;
  box-shadow: var(--shadow-soft);
  animation: popIn .3s both;
}
.demo-wrap { overflow-x: auto; text-align:center; padding: 8px 0 4px; }
.demo-tbl { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
.demo-tbl td { width: 54px; height: 58px; text-align:center; font-size: 36px; font-weight: 800; color: var(--ink); }
.demo-tbl .op { color: var(--pink); font-size: 30px; }
.demo-tbl .dig.hl { background: linear-gradient(160deg,#ffe27a,#ffd23f); border-radius: 10px; transform: scale(1.12); transition: .2s; box-shadow: 0 4px 10px rgba(255,210,63,.5); }
.demo-tbl .line td { border-top: 5px solid var(--ink); height: 8px; }
.demo-tbl .carry-cell { color: var(--orange); font-size: 20px; height: 26px; font-weight: 800; }
.demo-tbl .ans-cell { color: var(--purple); border-radius: 10px; }
.demo-tbl .ans-cell.hl { background: #f0e8ff; }
.demo-tbl .ans-cell.done { background: linear-gradient(160deg,#34e089,#12b866); color:#fff; }
.reveal { animation: pop 0.4s cubic-bezier(.2,1.4,.4,1); }
.carry-pop { animation: carryDrop 0.5s cubic-bezier(.2,1.4,.4,1); }
/* subtraction exchange visuals */
.demo-tbl .orig.struck { text-decoration: line-through; color: #c3c0d8; }
.demo-tbl .recv { color: var(--orange); font-size: 16px; font-weight: 800; vertical-align: super; }
@keyframes carryDrop { from { transform: translateY(-16px) scale(1.4); opacity:0; } to { transform:none; opacity:1; } }

/* number-line "hops" visual (number bonds) */
.hops { display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap; gap:6px; margin: 18px 0; }
.hops .stone { background:#fff; border:3px solid var(--blue); color:var(--ink); font-weight:800; font-size:24px;
  border-radius:12px; padding:10px 16px; min-width:64px; text-align:center; box-shadow: var(--shadow-soft); }
.hops .stone.target { border-color: var(--green); }
.hops .hop { display:flex; flex-direction:column; align-items:center; color:#fff; font-weight:800; }
.hops .hop .arc { font-size:26px; line-height:1; }
.hops .hop .amt { background: var(--orange); border-radius:999px; padding:2px 10px; font-size:16px; margin-top:2px; }
.faded { opacity: 0; transform: translateY(8px); }
.show-in { opacity: 1; transform: none; transition: all .4s cubic-bezier(.2,1.3,.4,1); }

/* split (partition) boxes for mental strategy */
.split { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin: 16px 0; }
.split .col { background:#fff; border:3px solid var(--line); border-radius:14px; padding:12px 16px; text-align:center; min-width:120px; box-shadow: var(--shadow-soft); }
.split .col b { display:block; font-size:26px; }
.split .col .lbl { font-size:13px; color:#6b6b8a; font-weight:800; text-transform:uppercase; letter-spacing:1px; }
.numhi { background: linear-gradient(160deg,#ffe27a,#ffd23f); border-radius:8px; padding:1px 6px; font-weight:800; }

/* ---------- English: story slides + tappable word chips ---------- */
.story { font-size: 20px; font-weight: 600; line-height: 1.5; }
.sentence { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin: 20px 0; padding: 6px; }
.token {
  font-family: var(--font); font-size: 22px; font-weight: 800; color: var(--ink);
  background: linear-gradient(180deg,#ffffff,#f7f5ff); border:3px solid var(--line); border-radius: 14px; padding: 9px 15px;
  cursor:pointer; box-shadow: 0 5px 12px rgba(35,20,80,.10);
  transition: transform .1s, background .15s, border-color .15s, box-shadow .15s; user-select:none;
}
.token:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 12px 20px rgba(75,139,255,.24); }
.token.sel { background: linear-gradient(160deg,#ffe27a,#ffd23f); border-color: var(--orange); box-shadow: 0 8px 16px rgba(255,159,67,.36); }
.token.correct { background: linear-gradient(160deg,#34e089,#12b866); color:#fff; border-color:#0f9d58; box-shadow: 0 0 0 4px rgba(43,213,118,.26); animation: pop .35s; }
.token.wrong { background: linear-gradient(160deg,#ff6b79,#e23a4b); color:#fff; border-color:#c62537; animation: shake .35s; }
.token.miss { outline: 3px dashed var(--green); outline-offset: 2px; }
.token.punct { background:transparent; border-color:transparent; cursor:default; padding:9px 2px; color:#8a86ad; box-shadow:none; }
.token.punct:hover { transform:none; box-shadow:none; }
.instr { font-size:18px; font-weight:800; text-align:center; color:var(--purple); margin-top:4px; }
.reveal-box {
  background:linear-gradient(135deg,#ffffff,#e7fff2); border-left:8px solid var(--green);
  border-radius:14px; padding:15px 18px; font-size:18px; font-weight:700; margin-top:14px;
  box-shadow: var(--shadow-soft); animation: popIn .3s both;
}
.gem { font-size:70px; text-align:center; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0,0,0,.22)); }
.hl-word { background: linear-gradient(160deg,#ffe27a,#ffd23f); border-radius:8px; padding:2px 8px; font-weight:800; }

/* ---------- Timed assignment countdown (lives inside the HUD) ---------- */
.asg-timer {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(160deg, var(--blue), var(--purple));
  color: #fff; font-weight: 800; font-size: 18px; letter-spacing: .3px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 6px 14px rgba(35,20,80,.32);
}
.asg-timer b { font-variant-numeric: tabular-nums; color: #fff; }
.asg-timer.warn { background: linear-gradient(160deg, #ff6b79, #e23a4b); animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.07);} }

/* small "assignment" button on hub week cards */
.asg-btn { margin-top: 10px; font-size: 13px !important; padding: 8px 12px !important; }

/* ---------- Spelling games (Spelling Zone) ---------- */
.bee { font-size: 68px; text-align:center; animation: beeFly 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(0,0,0,.22)); }
@keyframes beeFly { 0%{ transform: translate(-10px,0) rotate(-4deg);} 50%{ transform: translate(10px,-10px) rotate(4deg);} 100%{ transform: translate(-10px,0) rotate(-4deg);} }

.soundwave { display:flex; gap:5px; align-items:flex-end; justify-content:center; height:38px; margin:6px 0 2px; }
.soundwave span { width:7px; height:12px; border-radius:6px; background: linear-gradient(180deg,var(--yellow),var(--orange)); }
.soundwave.on span { animation: sw 0.9s ease-in-out infinite; }
.soundwave span:nth-child(2){ animation-delay:.1s } .soundwave span:nth-child(3){ animation-delay:.2s }
.soundwave span:nth-child(4){ animation-delay:.3s } .soundwave span:nth-child(5){ animation-delay:.15s }
.soundwave span:nth-child(6){ animation-delay:.25s } .soundwave span:nth-child(7){ animation-delay:.05s }
@keyframes sw { 0%,100%{ height:10px; } 50%{ height:34px; } }

.hintbox {
  background: linear-gradient(135deg,#fff,#eef4ff); border-left:8px solid var(--blue);
  border-radius:14px; padding:14px 18px; font-size:19px; font-weight:700; color:#3a3466;
  margin:14px auto; max-width:560px; box-shadow: var(--shadow-soft);
}
.hintbox .lbl { display:block; font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--blue); margin-bottom:4px; }

.spell-input {
  width:100%; max-width:520px; font-family: var(--font); font-size:34px; font-weight:800;
  text-align:center; letter-spacing:4px; padding:14px; border:4px dashed var(--purple);
  border-radius:16px; color:var(--ink); outline:none; background: linear-gradient(180deg,#fff,#f7f5ff);
  text-transform: lowercase;
}
.spell-input:focus { border-style:solid; box-shadow:0 0 0 5px rgba(155,92,255,.2); }

/* letter tiles (feedback + unscramble build area) */
.tiles { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0; }
.tile {
  width:46px; height:54px; display:flex; align-items:center; justify-content:center;
  font-size:28px; font-weight:800; color:var(--ink); text-transform:uppercase;
  background: linear-gradient(180deg,#fff,#f5f3ff); border:3px solid var(--line); border-radius:12px;
  box-shadow: 0 5px 12px rgba(35,20,80,.12); animation: pop .3s;
}
.tile.good { background: linear-gradient(160deg,#34e089,#12b866); color:#fff; border-color:#0f9d58; }
.tile.bad  { background: linear-gradient(160deg,#ff6b79,#e23a4b); color:#fff; border-color:#c62537; }
.tile.rev  { background: linear-gradient(160deg,#ffe27a,#ffd23f); color:var(--ink); border-color:var(--orange); }
.tile.blank { color: #b9b4dd; border-style: dashed; }

/* clickable letter chips (unscramble) */
.chips { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:14px 0; }
.chip-letter {
  width:52px; height:60px; display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:800; text-transform:uppercase; color:var(--ink); cursor:pointer;
  background: linear-gradient(180deg,#fff,#f2ecff); border:3px solid var(--line); border-radius:14px;
  box-shadow: 0 6px 14px rgba(35,20,80,.12); transition: transform .1s, box-shadow .12s, opacity .12s;
}
.chip-letter:hover { transform: translateY(-3px); box-shadow: 0 12px 20px rgba(155,92,255,.28); border-color:var(--purple); }
.chip-letter.used { opacity:.25; pointer-events:none; transform:scale(.9); }

.game-emoji { font-size: 56px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.16)); }

/* missing-letters blanks */
.blank-input {
  width:46px; height:54px; text-align:center; font-family:var(--font); font-size:28px; font-weight:800;
  text-transform:lowercase; color:var(--ink); border:3px dashed var(--purple); border-radius:12px;
  background:#faf7ff; outline:none;
}
.blank-input:focus { border-style:solid; box-shadow:0 0 0 4px rgba(155,92,255,.2); }
.blank-input.bad  { border-color:var(--red); background:#fff0f1; }
.blank-input.good { border-color:#0f9d58; background:#e9fbf1; color:#0f9d58; }

/* ---------- Confetti canvas ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 999; }

/* ---------- Utility ---------- */
.center { text-align:center; }
.row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; }
.hide { display:none !important; }
.big-num { font-size: clamp(40px, 12vw, 92px); font-weight: 800; text-align:center; color: var(--ink); letter-spacing: 2px; }
.pill-input {
  font-family: var(--font); font-size: 20px; font-weight:700; padding: 13px 18px;
  border-radius: 999px; border: 3px solid var(--blue); outline:none; text-align:center;
  background: linear-gradient(180deg,#ffffff,#f5f8ff); transition: box-shadow .15s;
}
.pill-input:focus { box-shadow: 0 0 0 5px rgba(75,139,255,.22); }
.spin { animation: spin 1s linear infinite; display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.floaty { animation: bob 3s ease-in-out infinite; }