/* ══════════════════════════════════════════════════════════════════
   Spelling Drop — Night Arcade
   Deep indigo ground so glowing tiles read clearly and the screen is
   kind at 8pm, which is when homework actually happens. The falling
   tile is the signature element, so it gets the weight and everything
   else stays quiet.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1026;            /* night ground */
  --ink-2:#141B3D;          /* raised surface */
  --ink-3:#1E2854;          /* borders, tracks */
  --star:rgba(255,255,255,.55);

  --tile:#FFB020;           /* the letter tile */
  --tile-2:#FF8A3D;
  --tile-ink:#3A2405;

  --good:#41D69A;
  --near:#7FB3FF;
  --miss:#FF9E9E;

  --text:#EEF1FF;
  --muted:#98A2CE;

  --r:16px;
  --tile-size:clamp(44px, 12vw, 68px);
  --font: system-ui, -apple-system, "Segoe UI Rounded", "SF Pro Rounded",
          "Nunito", "Segoe UI", Roboto, sans-serif;
  --letter-spacing:0em;
}

/* The "easier to read" switch. Wider tracking and taller lines are the
   cheapest, best-evidenced help for letter confusion — b/d/p/q. */
body.dys{ --letter-spacing:.06em; }
body.dys .tile, body.dys .answer, body.dys .verdict b{ letter-spacing:.12em; }
body.dys{ line-height:1.75; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text);
  letter-spacing:var(--letter-spacing);
  background:
    radial-gradient(1100px 600px at 12% -10%, #1B2557 0%, transparent 60%),
    radial-gradient(900px 500px at 92% 8%, #22194A 0%, transparent 55%),
    var(--ink);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* faint starfield, painted not animated */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 70% 18%, var(--star), transparent),
    radial-gradient(1.6px 1.6px at 40% 70%, var(--star), transparent),
    radial-gradient(1.1px 1.1px at 85% 60%, var(--star), transparent),
    radial-gradient(1.3px 1.3px at 12% 82%, var(--star), transparent),
    radial-gradient(1px 1px at 58% 44%, var(--star), transparent);
}

/* ── screens ─────────────────────────────────────────────────── */
.screen{position:fixed; inset:0; display:none; overflow:auto; z-index:1}
.screen.on{display:block}
#s-play.on{display:flex; flex-direction:column; overflow:hidden;
           height:100vh; height:100dvh}
.wrap{max-width:620px; margin:0 auto; padding:28px 20px 40px; min-height:100%}

/* ── home ────────────────────────────────────────────────────── */
.logo{
  margin:8px 0 2px; font-size:clamp(34px,9vw,52px); font-weight:800;
  letter-spacing:-.02em; line-height:1;
}
.logo span{
  background:linear-gradient(180deg,var(--tile),var(--tile-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tag{margin:0 0 22px; color:var(--muted); font-size:15px; line-height:1.6}

.who{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.who button{
  border:1px solid var(--ink-3); background:var(--ink-2); color:var(--text);
  border-radius:999px; padding:7px 15px; font:inherit; font-weight:700;
  font-size:14px; cursor:pointer;
}
.who button.on{background:var(--tile); border-color:var(--tile); color:var(--tile-ink)}
.who button.add{border-style:dashed; color:var(--muted); font-weight:600}

.decks{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.deck{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--ink-2); border:1px solid var(--ink-3); color:var(--text);
  border-radius:var(--r); padding:15px 16px; font:inherit; cursor:pointer;
}
.deck:hover{border-color:#33407A}
.deck-main{flex:1; min-width:0}
.deck-name{font-weight:800; font-size:17px}
.deck-meta{color:var(--muted); font-size:13px; margin-top:3px}
.deck-go{
  flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--tile),var(--tile-2)); color:var(--tile-ink);
  font-size:19px; font-weight:900;
}
.deck-edit{
  flex:none; background:none; border:0; color:var(--muted); font:inherit;
  font-size:13px; cursor:pointer; padding:8px; text-decoration:underline;
}
.dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); margin-right:6px}
.empty{color:var(--muted); font-size:14.5px; line-height:1.7; padding:18px 2px}

.foot{color:#6B76A8; font-size:12.5px; margin-top:26px}

/* ── forms ───────────────────────────────────────────────────── */
.lbl{display:block; font-size:13.5px; font-weight:700; color:var(--muted);
     margin:18px 0 7px; text-transform:none}
.fld{
  width:100%; background:var(--ink-2); border:1px solid var(--ink-3);
  color:var(--text); border-radius:12px; padding:13px 14px; font:inherit;
  font-size:16px; /* 16px stops iOS zooming on focus */
}
.fld:focus{outline:2px solid var(--tile); outline-offset:1px; border-color:transparent}
.ta{resize:vertical; line-height:1.9; font-size:16px}
.fld.sm{padding:9px 11px; font-size:14.5px; width:auto; min-width:170px}

.tips{margin:14px 0 0; background:var(--ink-2); border:1px solid var(--ink-3);
      border-radius:12px; padding:0 14px}
.tips summary{cursor:pointer; padding:12px 0; font-weight:700; font-size:14px; color:var(--muted)}
.tips p{margin:0 0 12px; font-size:13.5px; line-height:1.7; color:var(--muted)}
.tips code{background:var(--ink-3); padding:1px 6px; border-radius:5px; color:var(--text)}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  border:0; border-radius:12px; padding:13px 20px; font:inherit; font-weight:800;
  font-size:15.5px; cursor:pointer; min-height:48px;
  background:linear-gradient(180deg,var(--tile),var(--tile-2)); color:var(--tile-ink);
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--ink-2); color:var(--text); border:1px solid var(--ink-3)}
.btn.danger{color:var(--miss); border-color:#4A2740}
.btn.wide{width:100%; margin-top:6px}
.btn.round{width:52px; height:52px; min-height:0; border-radius:50%; padding:0; font-size:21px}
.btn.round.soft{background:var(--ink-2); border:1px solid var(--ink-3)}
.btn.go{min-width:96px}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.back{
  background:none; border:0; color:var(--muted); font:inherit; font-size:15px;
  cursor:pointer; padding:8px 0; margin-bottom:6px;
}
.back.tight{padding:8px 4px}
.note{color:var(--muted); font-size:13.5px; margin-top:12px; min-height:20px}
.note.tiny{font-size:12px; line-height:1.6; color:#6B76A8}

/* ── the game ────────────────────────────────────────────────── */
.hud{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:max(10px, env(safe-area-inset-top)) 14px 10px; flex:none;
}
.hud-mid{display:flex; gap:8px}
.pill{
  background:var(--ink-2); border:1px solid var(--ink-3); color:var(--muted);
  border-radius:999px; padding:6px 13px; font-size:13.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pill.score{color:var(--tile); font-size:15px}
.pill.streak{color:var(--tile)}

/* Play area sits in the TOP half on purpose: on a phone the on-screen
   keyboard eats the bottom, and tiles hidden behind it are useless. */
/* Fills the space above the answer row. On a phone, dvh shrinks when the
   keyboard opens, so the input and the tiles both stay visible instead of
   the row being pushed underneath it. */
.stage{
  position:relative; flex:1 1 auto; min-height:150px;
  overflow:hidden; margin:0 10px; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  border:1px solid var(--ink-3);
}
.floor{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, transparent, #3A4790, transparent);
}

.tile{
  position:absolute; top:0; width:var(--tile-size); height:var(--tile-size);
  display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(180deg,var(--tile),var(--tile-2));
  color:var(--tile-ink); font-weight:900; font-size:calc(var(--tile-size) * .52);
  box-shadow:0 6px 0 rgba(0,0,0,.28), 0 12px 26px rgba(255,150,30,.22);
  will-change:transform;
}
.tile.landed{filter:saturate(.5) brightness(.72)}
.tile.win{
  background:linear-gradient(180deg,#6BF0BC,var(--good)); color:#04321F;
  box-shadow:0 6px 0 rgba(0,0,0,.28), 0 12px 30px rgba(65,214,154,.35);
}
/* The same "here it is" row after a miss, in a colour that is clearly not
   a celebration but is not a telling-off either. */
.tile.win.sad{
  background:linear-gradient(180deg,#8FA0D8,#6C7BB5); color:#131B36;
  box-shadow:0 6px 0 rgba(0,0,0,.28), 0 12px 26px rgba(120,140,220,.22);
}

/* ── slots: the word being built on the floor ─────────────────────
   Empty until a letter is typed into it, so the row reads as "this many
   letters, this many still to find" without ever showing the answer. */
.slots{
  position:absolute; left:0; right:0; display:flex; justify-content:center;
  padding:0 8px; pointer-events:none;
}
.slot{
  display:grid; place-items:center; flex:none;
  border:2px dashed var(--ink-3); background:rgba(255,255,255,.02);
  color:var(--text); font-weight:900; transition:all .18s;
}
.slot.has{
  border-style:solid; border-color:transparent; color:var(--tile-ink);
  background:linear-gradient(180deg,var(--tile),var(--tile-2));
  box-shadow:0 3px 0 rgba(0,0,0,.25);
}
/* Only reachable if a letter is somehow accepted that the word lacks —
   the input refuses those, so this is a safety net, not a normal state. */
.slot.bad{
  border-style:solid; border-color:var(--miss); color:var(--miss);
  background:rgba(255,158,158,.08);
}
.tile.used{pointer-events:none}

/* A tile with no letter on it. The child supplies the letter; the tile only
   says "one is coming, and it is this one's turn". Showing the letter would
   make pressing that key an act of copying rather than spelling. */
.tile.blank{
  background:linear-gradient(180deg,#5A6BB8,#3E4C93);
  box-shadow:0 6px 0 rgba(0,0,0,.3), 0 12px 26px rgba(90,110,200,.25);
}
.tile.blank::after{
  content:""; width:36%; height:36%; border-radius:50%;
  background:rgba(255,255,255,.22);
}
/* What a missed letter leaves behind: it lands, reveals itself, and lies
   there for the rest of the word. */
.tile.mark{
  background:linear-gradient(180deg,#4A3350,#3A2740); color:var(--miss);
  box-shadow:0 4px 0 rgba(0,0,0,.3); opacity:.92;
}
.slot.active{
  border-color:var(--tile); border-style:solid;
  box-shadow:0 0 0 3px rgba(255,176,32,.16);
}
.slot.missed{
  border-style:solid; border-color:#5A3A50; color:var(--miss);
  background:rgba(255,158,158,.07);
}

/* countdown ring, used instead of falling when motion is reduced */
.ring{position:absolute; top:12px; right:12px; width:44px; height:44px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.r-bg{fill:none; stroke:var(--ink-3); stroke-width:4}
.r-fg{fill:none; stroke:var(--tile); stroke-width:4; stroke-linecap:round;
      stroke-dasharray:119.4; stroke-dashoffset:0}

.deck-lower{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 14px max(14px, env(safe-area-inset-bottom));
}
.say{display:flex; gap:8px; flex:none}
.answer{
  flex:1; min-width:0; background:var(--ink-2); border:2px solid var(--ink-3);
  color:var(--muted); border-radius:14px; padding:14px 16px; font:inherit;
  font-weight:700; font-size:clamp(15px,4vw,18px); text-align:center;
  letter-spacing:.18em;
}
/* No slots to read from, so this is the answer display. */
.answer.solo{
  color:var(--text); font-weight:800; letter-spacing:.06em;
  font-size:clamp(20px,5.5vw,26px);
}
.answer:focus{outline:none; border-color:var(--tile)}
.answer.shake{animation:shake .34s}
@keyframes shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  45%{transform:translateX(6px)} 70%{transform:translateX(-3px)}
}

/* ── verdict banner ──────────────────────────────────────────── */
.verdict{
  position:fixed; left:0; right:0; z-index:5; text-align:center;
  bottom:calc(88px + env(safe-area-inset-bottom));
  padding:16px 20px 12px;
  background:linear-gradient(180deg, rgba(11,16,38,0), rgba(11,16,38,.92) 35%, rgba(11,16,38,.92));
}
.verdict h3{margin:0 0 6px; font-size:19px; font-weight:800}
.verdict .word{
  font-size:clamp(30px,8vw,44px); font-weight:900; letter-spacing:.06em;
  margin:6px 0 4px;
}
.verdict p{margin:6px auto 0; max-width:34ch; color:var(--muted);
           font-size:14.5px; line-height:1.65}
.verdict.good h3{color:var(--good)} .verdict.good .word{color:var(--good)}
.verdict.near h3{color:var(--near)} .verdict.near .word{color:var(--near)}
.verdict.miss h3{color:var(--miss)} .verdict.miss .word{color:#FFD9D9}
.verdict .hint b{color:var(--tile)}

/* ── summary ─────────────────────────────────────────────────── */
.done-h{font-size:clamp(26px,7vw,36px); margin:14px 0 4px}
.done-sub{color:var(--muted); margin:0 0 22px; font-size:15px; line-height:1.6}
.mastery{margin-bottom:22px}
.m-big{display:flex; align-items:baseline; gap:10px}
.m-big b{font-size:44px; font-weight:900; color:var(--tile); line-height:1}
.m-big span{color:var(--muted); font-size:15px}
.m-bar{height:10px; background:var(--ink-2); border:1px solid var(--ink-3);
       border-radius:99px; overflow:hidden; margin-top:12px}
.m-bar div{height:100%; width:0; border-radius:99px;
           background:linear-gradient(90deg,var(--tile),var(--good)); transition:width .8s ease}

.wordlist{list-style:none; margin:0 0 22px; padding:0; display:flex;
          flex-direction:column; gap:7px}
.wordlist li{
  display:flex; align-items:center; gap:11px; background:var(--ink-2);
  border:1px solid var(--ink-3); border-radius:11px; padding:11px 14px; font-size:15.5px;
}
.wordlist b{font-weight:800; flex:1; min-width:0}
.boxes{display:flex; gap:3px; flex:none}
.boxes i{width:9px; height:9px; border-radius:2px; background:var(--ink-3)}
.boxes i.f{background:var(--tile)}
.boxes i.m{background:var(--good)}

.parent{
  background:var(--ink-2); border:1px solid var(--ink-3);
  border-left:3px solid var(--tile); border-radius:12px; padding:15px 16px;
  font-size:14.5px; line-height:1.7; color:var(--text);
}
.parent b{color:var(--tile)}

/* ── settings ────────────────────────────────────────────────── */
.cog{
  position:fixed; right:12px; bottom:12px; z-index:6; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--ink-3); background:var(--ink-2);
  color:var(--muted); font-size:19px; cursor:pointer;
}
#s-play.on ~ .cog{display:none}
.sheet{position:fixed; inset:0; z-index:20; background:rgba(6,9,22,.72);
       display:grid; place-items:end center}
/* `display:grid` above out-specifies the browser's own [hidden] rule, so the
   sheet would sit open on every load. Restate it. */
.sheet[hidden]{display:none}
.sheet-in{
  width:100%; max-width:520px; background:var(--ink-2);
  border:1px solid var(--ink-3); border-radius:22px 22px 0 0;
  padding:22px 20px max(22px, env(safe-area-inset-bottom)); max-height:88vh; overflow:auto;
}
.sheet-in h3{margin:0 0 16px; font-size:19px}
.set{display:flex; align-items:center; justify-content:space-between; gap:14px;
     padding:11px 0; border-bottom:1px solid var(--ink-3); font-size:15px}
.set.row-set{justify-content:flex-start; gap:11px}
.set input[type=checkbox]{width:22px; height:22px; accent-color:var(--tile)}
.set input[type=range]{accent-color:var(--tile); max-width:180px}

/* ── celebration ─────────────────────────────────────────────── */
.spark{position:fixed; width:9px; height:9px; border-radius:2px; z-index:30;
       pointer-events:none; will-change:transform,opacity}

/* Reduced motion: the fall is replaced by a fade plus the countdown ring,
   so the time limit is still visible without anything moving. */
@media (prefers-reduced-motion:reduce){
  .tile{transition:opacity .4s !important; transform:none !important}
  .answer.shake{animation:none}
  .spark{display:none}
}

@media (max-height:640px){
  .btn.round{width:46px; height:46px; font-size:18px}
  .stage{min-height:110px}
}