:root{
  --bg1:#1b1340; --bg2:#2a1a5e; --ink:#2b2355; --muted:#8c84b8;
  --pink:#ff5fa2; --yellow:#ffd93d; --mint:#4fe3c1; --sky:#5ec8ff; --purple:#a06bff; --orange:#ff9f43; --red:#ff6b6b;
  --radius:22px; --tray:84px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:Fredoka,"SF Pro Rounded",ui-rounded,system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 800px at 20% -10%,#4a2a9a 0%,var(--bg2) 40%,var(--bg1) 100%) fixed;
  color:#fff; overflow-x:hidden; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  padding-bottom:calc(var(--tray) + env(safe-area-inset-bottom));
}
button{font-family:inherit;cursor:pointer;border:0;color:inherit;background:none}
input,textarea{font-family:inherit}
.hidden{display:none !important}

/* ---------- icons (Lucide sprite) ---------- */
.ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-0.22em}
/* prize art: Fluent colour illustrations in /prizes, sized by font-size */
.pz{display:inline-block;width:1em;height:1em;vertical-align:middle;filter:drop-shadow(0 .05em .07em rgba(0,0,0,.35));-webkit-user-drag:none;pointer-events:none}

/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;gap:10px}
.logo{display:flex;align-items:center;gap:8px;font-size:30px;font-weight:700;letter-spacing:.5px}
.logo .word{white-space:nowrap;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.logo .ic{color:var(--yellow);width:30px;height:30px;flex:none}
.toybox-btn{display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 16px;font-size:18px;font-weight:600;transition:transform .15s}
.toybox-btn:active{transform:scale(.95)}
.toybox-btn .count{background:var(--yellow);color:var(--ink);border-radius:999px;min-width:26px;height:26px;display:grid;place-items:center;font-size:14px;padding:0 6px}

main{max-width:860px;margin:0 auto;padding:0 16px 24px}
.screen{animation:fadeIn .35s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1,h2{margin:8px 0 14px;font-weight:700}
h2{font-size:28px;display:flex;align-items:center;gap:10px}
.sub{color:#cdc6f0;font-size:17px;margin:-6px 0 18px}
.account-save{margin-top:18px;padding-top:14px;border-top:2px dashed #e6e2f7;text-align:center}
.account-save h3{margin:0 0 4px;font-size:20px;display:flex;align-items:center;justify-content:center;gap:8px}
.account-save p{font-size:15px;margin:0 0 4px}
.linkbox{width:100%;margin-top:14px;font-size:12px;line-height:1.4;color:var(--muted);background:#f6f4fd;border:2px solid #e6e2f7;border-radius:12px;padding:10px;min-height:70px;resize:none;word-break:break-all;font-family:ui-monospace,Menlo,monospace}

/* phones: the wordmark never wraps; the toy box keeps its icon and count only */
@media (max-width:560px){
  header{padding:10px 12px;gap:8px}
  .logo{font-size:22px;gap:6px;min-width:0}
  .logo .ic{width:22px;height:22px}
  .toybox-btn{padding:6px 10px;font-size:16px;gap:6px}
  .toybox-btn .label{display:none}
  .toybox-btn .count{min-width:24px;height:24px;font-size:13px}
  .iconbtn{width:40px;height:40px}
  main{padding:0 12px 20px}
}
@media (max-width:400px){
  .logo{font-size:19px}
  .logo .ic{width:20px;height:20px}
}
/* ---------- profile chip ---------- */
.profile-btn{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 14px 4px 4px;font-size:17px;font-weight:600;max-width:170px}
.profile-btn:active{transform:scale(.95)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--c,var(--sky));color:#1b1340;display:grid;place-items:center;flex:none}
.avatar .ic{width:20px;height:20px;stroke-width:2.4}
.profile-btn .pname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.profile-btn .pname{display:none}.profile-btn{padding:3px}}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:6px}
.pcard{position:relative;background:#f6f4ff;border:3px solid #e6e2f7;border-radius:20px;padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .15s;color:var(--ink)}
.pcard:active{transform:scale(.95)}
.pcard.on{border-color:var(--c,var(--sky));background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.05),0 6px 0 rgba(0,0,0,.08)}
.pcard .avatar{width:56px;height:56px}.pcard .avatar .ic{width:30px;height:30px}
.pcard .pname{font-weight:700;font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .pmeta{font-size:13px;color:var(--muted)}
.pcard .edit{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #e6e2f7;display:grid;place-items:center;color:var(--muted)}
.pcard .edit .ic{width:14px;height:14px}
.pcard.new{border-style:dashed;background:transparent;color:var(--muted);justify-content:center;min-height:130px;font-weight:600}
.field input{display:block;width:100%;margin-top:6px;font-size:18px;padding:10px 12px;border-radius:12px;border:3px solid #e6e2f7;background:#faf9ff;color:var(--ink);font-family:inherit;outline:none}
.field input:focus{border-color:var(--purple)}
.avatar-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.avatar-grid button{width:46px;height:46px;border-radius:50%;background:#f1eefc;color:var(--ink);display:grid;place-items:center;border:3px solid transparent}
.avatar-grid button .ic{width:24px;height:24px}
.avatar-grid button.on{border-color:var(--ink);background:var(--c,var(--sky))}
.color-row{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.color-row button{width:36px;height:36px;border-radius:50%;background:var(--c);border:3px solid transparent}
.color-row button.on{border-color:var(--ink);transform:scale(1.15)}

/* ---------- grown-ups: cloud save ---------- */
.grownups{margin-top:18px;padding:14px 12px 12px;border-radius:18px;background:#f6f4ff;border:2px solid #e6e2f7;text-align:center}
.grownups.alone{margin-top:6px}
.grownups h3{margin:0 0 6px;font-size:20px;display:flex;align-items:center;justify-content:center;gap:8px}
.grownups p{font-size:15px;margin:0 0 8px;color:#5a4fa0}
.grownups p.small{font-size:13px;color:var(--muted);margin:8px 0 0}
.grownups .field{margin-top:4px}
.grownups .row{margin-top:10px}
.grownups input.code{display:block;width:100%;margin-top:6px;font-size:26px;letter-spacing:6px;text-align:center;font-weight:700;padding:8px 12px;border-radius:12px;border:3px solid #e6e2f7;background:#faf9ff;color:var(--ink);font-family:ui-monospace,Menlo,monospace;outline:none}
.grownups input.code:focus{border-color:var(--purple)}
.grownups .err{color:#d6336c;font-size:14px;font-weight:600;margin:8px 0 0}
.grownups .who{font-weight:700;color:var(--ink)}
.grownups .btn.small{font-size:15px;padding:8px 14px;box-shadow:0 3px 0 rgba(0,0,0,.18)}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--purple);text-decoration:underline;cursor:pointer}
.linkbtn.danger{color:#d6336c;font-size:13px;margin-top:10px;font-weight:500}
.syncdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#bdb7d8;margin-right:6px;vertical-align:middle}
.syncdot.saved{background:#2ecc71}.syncdot.saving{background:#f1c40f;animation:syncpulse 1s infinite}.syncdot.offline{background:#9a94b8}.syncdot.error{background:#e74c3c}
@keyframes syncpulse{50%{opacity:.3}}
.more-save{margin-top:14px;text-align:center}
.more-save summary{cursor:pointer;color:var(--muted);font-weight:600;font-size:15px;list-style:none}
.more-save summary::-webkit-details-marker{display:none}
.more-save summary::before{content:"▸ ";font-size:13px}
.more-save[open] summary::before{content:"▾ "}
.more-save .account-save{margin-top:10px}
/* ---------- game picker ---------- */
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:10px}
.game-card{position:relative;overflow:hidden;text-align:left;border-radius:28px;padding:24px 22px 20px;color:#fff;display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 0 rgba(0,0,0,.25);transition:transform .15s;min-height:220px}
.game-card:active{transform:translateY(4px) scale(.99)}
.game-card.spell{background:linear-gradient(135deg,#5ec8ff,#a06bff 70%,#ff5fa2)}
.game-card.type{background:linear-gradient(135deg,#4fe3c1,#ffd93d 65%,#ff9f43)}
.game-card.type{color:#1f1740}
.game-card::after{content:'';position:absolute;right:-40px;top:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.18)}
.game-card .gicon{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.25);display:grid;place-items:center;margin-bottom:4px}
.game-card .gicon .ic{width:36px;height:36px;stroke-width:2.4}
.game-card .gname{font-size:30px;font-weight:700;line-height:1.05}
.game-card .gtag{font-size:17px;font-weight:600;opacity:.9}
.game-card .gdesc{font-size:15px;opacity:.85;line-height:1.35}
.game-card .go{margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.92);color:var(--ink);padding:8px 14px 8px 18px;border-radius:999px;font-weight:700;font-size:16px}

/* ---------- prize variants (filters over the Fluent art) ---------- */
.pz.v-purple{filter:sepia(1) hue-rotate(228deg) saturate(3.4) brightness(.95) drop-shadow(0 .05em .07em rgba(0,0,0,.35))}
.pz.v-gold{filter:sepia(1) saturate(2.8) hue-rotate(-10deg) brightness(1.06) contrast(1.15) drop-shadow(0 0 .12em rgba(255,215,80,.9)) drop-shadow(0 .05em .07em rgba(0,0,0,.35))}
.pz.v-glow{filter:sepia(1) hue-rotate(58deg) saturate(3) brightness(1.18) drop-shadow(0 0 .1em #c6ff5e) drop-shadow(0 0 .3em rgba(150,255,90,.75))}
.pz.v-rainbow{animation:rainbowShift 2.6s linear infinite}
@keyframes rainbowShift{from{filter:saturate(1.7) hue-rotate(0deg) drop-shadow(0 0 .14em rgba(255,255,255,.7))}to{filter:saturate(1.7) hue-rotate(360deg) drop-shadow(0 0 .14em rgba(255,255,255,.7))}}
.pz.v-glow,.pz.v-rainbow{border-radius:50%}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-size:18px;font-weight:600;color:var(--ink);background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.25);transition:transform .12s, box-shadow .12s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
a.btn{text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--yellow),var(--orange));}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.35);box-shadow:none}
.btn.ghost.dark{color:var(--ink);border-color:#e6e2f7}
.btn.ghost:active{transform:scale(.96)}
.btn.danger{background:var(--red);color:#fff}
.btn:disabled{opacity:.5;pointer-events:none}

/* ---------- home ---------- */
.challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.challenge-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 0 rgba(0,0,0,.2);position:relative;overflow:hidden}
.challenge-card::before{content:'';position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:var(--c,var(--sky));opacity:.25}
.challenge-card .name{font-size:22px;font-weight:700;line-height:1.1}
.challenge-card .meta{color:var(--muted);font-size:15px}
.challenge-card .badges{display:flex;gap:6px;flex-wrap:wrap;font-size:14px}
.badge{display:inline-flex;align-items:center;gap:4px;background:#f1eefc;color:#5a4fa0;padding:3px 10px;border-radius:999px;font-weight:600}
.badge.gold{background:#fff1b8;color:#8a6500}
.challenge-card .actions{display:flex;gap:8px;margin-top:auto}
.challenge-card .actions .btn{padding:10px 16px;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.challenge-card.new{background:rgba(255,255,255,.1);color:#fff;border:3px dashed rgba(255,255,255,.4);box-shadow:none;align-items:center;justify-content:center;min-height:170px;font-size:22px;font-weight:600;cursor:pointer;flex-direction:row;gap:8px}
.challenge-card.new::before{display:none}
.challenge-card .words-preview{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* speedrun: a third button on Type-a-nator cards and a best-time badge */
.challenge-card .actions{flex-wrap:wrap}
.btn.speed{background:linear-gradient(135deg,var(--mint),var(--sky));color:#073b30}
.badge.speed{background:#dff8f1;color:#0c4a2f}
/* ---------- packs (sets of challenges) ---------- */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pack-card{background:#fff;color:var(--ink);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 0 rgba(0,0,0,.2);position:relative;overflow:hidden;cursor:pointer;transition:transform .15s}
.pack-card:active{transform:scale(.98)}
.pack-card::before{content:'';position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:var(--c,var(--sky));opacity:.25}
.pack-card .name{font-size:22px;font-weight:700;line-height:1.1}
.pack-card .meta{color:var(--muted);font-size:15px}
.pack-card .names-preview{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack-card .badges{display:flex;gap:6px;flex-wrap:wrap;font-size:14px}
.pack-card .actions{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}
.pack-card .actions .btn{padding:10px 16px;font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.pack-card.new{background:rgba(255,255,255,.1);color:#fff;border:3px dashed rgba(255,255,255,.4);box-shadow:none;align-items:center;justify-content:center;min-height:170px;font-size:22px;font-weight:600;flex-direction:row;gap:8px}
.pack-card.new::before{display:none}
.editor select{width:100%;border:3px solid #e6e2f7;border-radius:16px;padding:12px 14px;font-size:20px;color:var(--ink);background:#faf9ff;outline:none;font-family:inherit}
.editor select:focus{border-color:var(--purple)}
/* phones: the "New pack" / "New challenge" tiles sit first, so keep them short */
@media (max-width:560px){
  .pack-card.new,.challenge-card.new{min-height:64px;font-size:19px;padding:12px}
}
/* ---------- leaderboards ---------- */
.boards-btn{color:var(--yellow)}
.boards-state{color:#cdc6f0;font-size:17px;margin:10px 0}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.board{background:#fff;color:var(--ink);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.board .name{font-size:22px;font-weight:700;line-height:1.1}
.board .meta{color:var(--muted);font-size:14px;margin-top:2px}
.board .rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.board .row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f6f4ff}
.board .row.you{background:#fff1b8;box-shadow:0 0 0 2px var(--yellow) inset}
.board .row:nth-child(1){background:linear-gradient(90deg,#fff1b8,#f6f4ff)}
.board .rank{width:26px;text-align:center;font-weight:800;color:#8a6500}
.board .row .avatar{width:28px;height:28px}
.board .row .avatar .ic{width:16px;height:16px}
.board .pname{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .time{font-variant-numeric:tabular-nums;font-weight:700;color:#0c4a2f}
.board .small{color:var(--muted);font-size:13px;margin:0}
.board .actions{margin-top:auto;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.board .actions .btn{padding:10px 20px;font-size:17px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.playbar .btn.small{padding:8px 14px;font-size:15px;box-shadow:none;background:rgba(255,255,255,.12);color:#fff;border:2px solid rgba(255,255,255,.3)}
#chestText .note{display:block;font-size:14px;color:#cdc6f0;margin-top:4px}
/* invites */
.dialog .invite-rows{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.dialog .invite-rows .row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f6f4ff}
.dialog .invite-rows .row.you{background:#fff1b8}
.dialog .invite-rows .rank{width:26px;text-align:center;font-weight:800;color:#8a6500}
.dialog .invite-rows .avatar{width:28px;height:28px}.dialog .invite-rows .avatar .ic{width:16px;height:16px}
.dialog .invite-rows .pname{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialog .invite-rows .time{font-variant-numeric:tabular-nums;font-weight:700;color:#0c4a2f}
.dialog .invite-note{font-style:italic;color:#5a4fa0;font-size:16px}
.dialog h2 .avatar{width:34px;height:34px;display:inline-grid;vertical-align:middle;margin-right:4px}
.dialog .field .small{font-weight:500;color:var(--muted);font-size:13px}
.dialog .err{color:#d6336c;font-size:14px;font-weight:600;margin:8px 0 0}
/* challenge of the week: Home, the Type-a-nator pack list and the Leaderboards screen */
.weekly{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start;margin:0 0 22px;padding:22px;border-radius:28px;color:#fff;background:linear-gradient(135deg,#ff5fa2,#a06bff 55%,#5ec8ff);box-shadow:0 10px 0 rgba(0,0,0,.25)}
.weekly::after{content:'';position:absolute;left:-50px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.weekly-info{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.weekly .kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:#5a3d00;padding:4px 12px;border-radius:999px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.weekly .kicker .ic{width:16px;height:16px}
.weekly .wname{font-size:34px;font-weight:700;line-height:1.05;margin-top:2px}
.weekly .wmeta{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600;opacity:.92}
.weekly .wmeta .ic{width:16px;height:16px}
.weekly .pitch{margin:2px 0 0;font-size:16px;opacity:.92;line-height:1.35}
.weekly .champ{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:15px;background:rgba(0,0,0,.16);padding:6px 10px 6px 6px;border-radius:14px;align-self:flex-start}
.weekly .champ .avatar{width:26px;height:26px}.weekly .champ .avatar .ic{width:15px;height:15px}
.weekly .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.weekly .actions .btn{padding:10px 18px;font-size:17px;box-shadow:0 4px 0 rgba(0,0,0,.2)}
.weekly .actions .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.45);box-shadow:none}
.weekly-board{position:relative;z-index:1;background:#fff;color:var(--ink);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 6px 0 rgba(0,0,0,.15)}
.weekly-board .rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.weekly-board .row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#f6f4ff}
.weekly-board .row:first-child{background:linear-gradient(90deg,#fff1b8,#f6f4ff)}
.weekly-board .row.you{background:#fff1b8;box-shadow:0 0 0 2px var(--yellow) inset}
.weekly-board .rank{width:26px;display:grid;place-items:center;font-weight:800;color:#8a6500}
.weekly-board .rank .ic{width:20px;height:20px;color:#e0a800}
.weekly-board .avatar{width:28px;height:28px}.weekly-board .avatar .ic{width:16px;height:16px}
.weekly-board .pname{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weekly-board .time{font-variant-numeric:tabular-nums;font-weight:700;color:#0c4a2f}
.weekly-board .empty{margin:0;padding:18px 10px;text-align:center;font-weight:600;color:#5a4fa0;font-size:16px}
.weekly-board .more,.weekly-board .signin{margin:0;text-align:center;font-size:14px;color:var(--muted)}
.badge.weekly{background:linear-gradient(90deg,#ffe066,#ffd0ea);color:#7a3d00}
.boards-h{margin:6px 0 12px;font-size:20px;color:#cdc6f0}
@media (max-width:720px){
  .weekly{grid-template-columns:1fr;padding:18px;gap:14px}
  .weekly .wname{font-size:28px}
  .weekly .pitch{display:none}
}
/* ---------- editor ---------- */
.editor{background:#fff;color:var(--ink);border-radius:var(--radius);padding:22px;box-shadow:0 8px 0 rgba(0,0,0,.2)}
.editor label{display:block;font-weight:600;margin:12px 0 6px;font-size:16px}
.editor input,.editor textarea{width:100%;border:3px solid #e6e2f7;border-radius:16px;padding:12px 14px;font-size:20px;color:var(--ink);background:#faf9ff;outline:none}
.editor input:focus,.editor textarea:focus{border-color:var(--purple)}
.editor textarea{min-height:220px;resize:vertical;line-height:1.5}
.editor .hint{color:var(--muted);font-size:14px;margin-top:4px}
.editor .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.editor .row .spacer{flex:1}
.wordcount{color:var(--muted);font-weight:600}

/* ---------- play ---------- */
.playbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.playbar .title{font-weight:700;font-size:20px;flex:1;min-width:120px;display:flex;align-items:center;gap:6px}
.iconbtn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);display:grid;place-items:center}
.iconbtn .ic{width:22px;height:22px}
.iconbtn:active{transform:scale(.92)}
.mode-toggle{display:flex;background:rgba(0,0,0,.3);border-radius:999px;padding:4px;border:2px solid rgba(255,255,255,.2)}
.mode-toggle button{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:15px;color:#cfc8f0}
.mode-toggle button.on{background:#fff;color:var(--ink)}

.meter-wrap{display:flex;align-items:center;gap:10px;margin:6px 0 16px}
.meter{flex:1;height:26px;border-radius:14px;background:rgba(0,0,0,.35);overflow:hidden;border:2px solid rgba(255,255,255,.25);position:relative}
.meter .fill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--sky),var(--purple),var(--pink));background-size:300% 100%;animation:shimmer 3s linear infinite;transition:width .7s cubic-bezier(.3,1.4,.5,1);box-shadow:0 0 14px rgba(255,255,255,.5)}
.meter .ticks{position:absolute;inset:0;display:flex}
.meter .tick{flex:1;border-right:2px solid rgba(0,0,0,.25)}
.meter .tick:last-child{border:0}
.meter-star{color:var(--yellow);display:grid;place-items:center;filter:drop-shadow(0 0 6px rgba(255,217,61,.8));transition:transform .3s}
.meter-star .ic{width:30px;height:30px;fill:rgba(255,217,61,.35)}
.meter-star.full .ic{fill:var(--yellow)}
.meter-star.full{animation:wiggle .6s ease-in-out infinite}
@keyframes shimmer{to{background-position:300% 0}}
@keyframes wiggle{0%,100%{transform:rotate(-12deg) scale(1.1)}50%{transform:rotate(12deg) scale(1.25)}}

.stage{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.15);border-radius:var(--radius);padding:18px 14px 14px;text-align:center}
.status{font-size:20px;font-weight:600;min-height:28px;color:#fff;transition:color .2s;display:flex;justify-content:center;align-items:center;gap:6px}
.status.bad{color:#ffb3b3}
.status.good{color:#b5ffe3}
.counter{color:#cdc6f0;font-size:15px;margin-top:4px}
.speak-row{display:flex;justify-content:center;gap:12px;margin:14px 0 6px}
.speak{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--purple));display:grid;place-items:center;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .12s;color:#fff}
.speak .ic{width:36px;height:36px;stroke-width:2.4}
.speak.small{width:58px;height:58px;background:linear-gradient(135deg,var(--mint),#2bb59a);color:#073b30}
.speak.small .ic{width:28px;height:28px}
.speak.hint{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#5a3a00}
.speak:active{transform:translateY(3px) scale(.97)}
.speak.talking{animation:talk .5s ease-in-out infinite}
@keyframes talk{50%{transform:scale(1.08)}}
.speak-label{font-size:13px;color:#cdc6f0;margin-top:4px}
.speak-col{display:flex;flex-direction:column;align-items:center}

.wordbox{margin:12px auto 6px;max-width:100%}
.slots{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 0;perspective:500px}
.slot{width:54px;height:66px;border-radius:14px;background:rgba(255,255,255,.09);border:3px solid rgba(255,255,255,.28);display:grid;place-items:center;font-size:38px;font-weight:700;text-transform:uppercase;position:relative;color:#fff;will-change:transform}
.slot.filled{background:#fff;color:var(--ink);border-color:#fff}
.slot.shown{color:rgba(255,255,255,.5);border-style:dashed}
.slot.cursor::after{content:'';position:absolute;bottom:9px;width:50%;height:4px;border-radius:2px;background:var(--yellow);animation:blink 1s infinite}
.slot.gap{background:transparent;border-color:transparent;width:22px}
.slot.punct{background:transparent;border-color:rgba(255,255,255,.15)}
@keyframes blink{50%{opacity:.2}}
/* per-letter reveal animations — only the letter just typed gets one */
.slot.a-tipl{animation:tipL .22s cubic-bezier(.2,.8,.3,1.4)}
.slot.a-tipr{animation:tipR .22s cubic-bezier(.2,.8,.3,1.4)}
.slot.a-spin{animation:spin360 .4s cubic-bezier(.3,.7,.3,1)}
.slot.a-flip{animation:flipX .42s cubic-bezier(.3,.7,.3,1)}
.slot.a-barrel{animation:barrelY .42s cubic-bezier(.3,.7,.3,1)}
@keyframes tipL{0%{transform:rotate(-20deg) scale(1.12)}100%{transform:none}}
@keyframes tipR{0%{transform:rotate(20deg) scale(1.12)}100%{transform:none}}
@keyframes spin360{0%{transform:rotate(-360deg) scale(1.1)}100%{transform:none}}
@keyframes flipX{0%{transform:rotateX(-360deg)}100%{transform:none}}
@keyframes barrelY{0%{transform:rotateY(360deg)}100%{transform:none}}
.wordbox.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
@media (max-width:480px){.slot{width:42px;height:54px;font-size:30px;border-radius:11px}.slots{gap:7px}}
.wrong-row{min-height:30px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:6px}
/* countdown to the next word; space / tap skips it */
.next-bar{display:flex;flex-direction:column;align-items:center;gap:6px;margin:-22px auto 4px;max-width:320px}
.next-bar .bar{width:100%;height:10px;border-radius:6px;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.25);overflow:hidden}
.next-bar .bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mint),var(--sky),var(--purple));transform-origin:left;box-shadow:0 0 10px rgba(255,255,255,.5)}
.next-bar span{font-size:14px;color:#cdc6f0;animation:tapPulse 1.2s ease-in-out infinite}
@keyframes countdown{to{transform:scaleX(0)}}
.wrong-row span{background:rgba(255,107,107,.25);color:#ffb3b3;border:2px solid rgba(255,107,107,.5);border-radius:10px;padding:2px 10px;font-weight:700;text-transform:uppercase;text-decoration:line-through}
.hud{display:flex;justify-content:space-between;align-items:center;margin:-6px 0 10px;min-height:32px}
.hud .counter{margin:0}
.hearts{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.hearts .hcount{font-weight:700;font-size:18px;color:#ffb3c1;margin-left:2px}
.heart{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center}
.heart .ic{width:30px;height:30px;stroke-width:1.8;transition:fill .35s,stroke .35s}
.heart.alive .ic{fill:#ff4d6d;stroke:#ffb3c1;filter:drop-shadow(0 2px 4px rgba(255,77,109,.5))}
.heart.lost .ic{fill:transparent;stroke:rgba(255,255,255,.28)}
.heart.pop{animation:heartPop .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes heartPop{0%{transform:scale(1)}25%{transform:scale(1.55) rotate(-14deg)}55%{transform:scale(.75) rotate(10deg)}100%{transform:scale(1)}}
.heart.lost.pop .ic{animation:heartFade .7s forwards}
@keyframes heartFade{0%{fill:#ff4d6d;stroke:#ffb3c1}45%{fill:#ff4d6d;stroke:#fff}100%{fill:transparent;stroke:rgba(255,255,255,.28)}}
.hearts.out .heart.lost .ic{stroke:rgba(255,107,107,.45)}
.hearts.inline{display:inline-flex;vertical-align:middle;gap:0}
.hearts.inline .heart{width:24px;height:24px}.hearts.inline .heart .ic{width:22px;height:22px}

/* hidden input that summons the device keyboard; lives inside the word box so iOS scrolls the word into view */
.wordbox{position:relative}
.typer{position:absolute;left:50%;top:50%;width:2px;height:2px;opacity:0;font-size:16px;border:0;padding:0;margin:0;pointer-events:none;caret-color:transparent}


/* ---------- speedrun ---------- */
.hud .timer{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:20px;color:#cdc6f0;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.hud .timer .ic{width:22px;height:22px}
.hud .timer.live{color:#fff;text-shadow:0 0 12px rgba(79,227,193,.9)}
.playbar .speedtag{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--mint),var(--sky));color:#073b30;font-size:13px;font-weight:700}
.playbar .speedtag .ic{width:14px;height:14px}

/* phones: the keyboard covers the lower half, so the meter, hearts and word must fit in the top half */
@media (max-width:560px){
  .playbar{gap:8px;margin-bottom:4px}
  .playbar .title{font-size:18px;min-width:0}
  .meter-wrap{gap:8px;margin:2px 0 8px}
  .meter{height:20px;border-radius:12px}
  .meter-star .ic{width:26px;height:26px}
  .hud{margin:-4px 0 6px;min-height:28px}
  .heart{width:28px;height:28px}
  .heart .ic{width:26px;height:26px}
  .hud .timer{font-size:18px}
  .stage{padding:10px 10px 10px}
  .status{font-size:18px;min-height:24px}
  .counter{font-size:14px}
  .wordbox{margin:6px auto 2px}
  .slots{padding:4px 0}
  .speak-row{margin:8px 0 2px}
  .wrong-row{min-height:26px;margin-top:2px}
  .next-bar{margin:-14px auto 2px}
}
/* ---------- tray ---------- */
#tray{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tray) + env(safe-area-inset-bottom));padding:8px 14px env(safe-area-inset-bottom);background:linear-gradient(180deg,rgba(20,12,50,0),rgba(20,12,50,.95) 30%);display:flex;align-items:center;gap:8px;z-index:40}
#tray .label{font-size:13px;color:#b9b2d8;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:1px;flex:none}
#tray .items{display:flex;align-items:center;gap:8px;overflow-x:auto;flex:1;padding:6px 4px;scrollbar-width:none}
#tray .items::-webkit-scrollbar{display:none}
#tray .toy{flex:none;width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:44px;transition:transform .15s;position:relative}
#tray .toy:active{transform:scale(.92)}
#tray .toy.r3{border-color:#d59bff;box-shadow:0 0 12px rgba(213,155,255,.5)}
#tray .toy.r4{border-color:#ff8ad8;box-shadow:0 0 14px rgba(255,138,216,.6)}
#tray .toy.r5{border-color:var(--yellow);box-shadow:0 0 16px rgba(255,217,61,.6)}
#tray .toy.r6{border-color:transparent;background:linear-gradient(rgba(40,25,80,1),rgba(40,25,80,1)) padding-box,conic-gradient(#ff5fa2,#ffd93d,#4fe3c1,#5ec8ff,#a06bff,#ff5fa2) border-box;box-shadow:0 0 18px rgba(255,255,255,.45)}
#tray .toy.new{animation:land .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1)}}
#tray .empty{color:#8c84b8;font-size:15px}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(10,5,30,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px;animation:fadeIn .3s}
.dialog{background:#fff;color:var(--ink);border-radius:28px;padding:26px 22px;max-width:520px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);max-height:92vh;overflow:auto;position:relative}
.dialog h2{font-size:30px;margin:4px 0 8px;justify-content:center}
.dialog p{color:#5a4fa0;font-size:18px;margin:6px 0 16px}
.dialog .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.field{display:block;text-align:left;font-weight:600;font-size:16px}
.field select{display:block;width:100%;margin-top:6px;font-size:17px;padding:10px 12px;border-radius:12px;border:3px solid #e6e2f7;background:#faf9ff;color:var(--ink);font-family:inherit}
.dialog p.small{font-size:14px;color:var(--muted);margin-bottom:0}
.close-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;background:#f1eefc;color:var(--ink);display:grid;place-items:center}

/* ---------- treasure chest (SVG) ---------- */
#chestOverlay .dialog{max-width:480px;padding:24px 22px 22px}
#chestTitle{padding:0 22px;font-size:29px}
#chestText{min-height:48px;line-height:1.35;margin-bottom:12px}
.chest-scene{width:100%;height:270px;margin:6px auto 14px;position:relative;border-radius:24px;isolation:isolate;overflow:hidden}
.chest-scene.won{background:radial-gradient(ellipse at 50% 36%,#543386 0%,var(--bg2) 58%,var(--bg1) 100%);box-shadow:inset 0 0 0 2px rgba(160,107,255,.15),inset 0 -12px 30px rgba(10,5,30,.3)}
.chest-scene.won:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 55%,rgba(255,217,61,.26),transparent 65%);opacity:0;transition:opacity .5s;pointer-events:none}
.chest-scene.won:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 15% 24%,#fff3b0 0 1px,transparent 2px),radial-gradient(circle at 81% 21%,#c2a0ff 0 1.5px,transparent 2.5px),radial-gradient(circle at 89% 57%,#fff3b0 0 1px,transparent 2px),radial-gradient(circle at 23% 68%,#c2a0ff 0 1px,transparent 2px),radial-gradient(circle at 64% 12%,#fff3b0 0 1px,transparent 2px);opacity:.45}
.chest-scene.opening:before,.chest-scene.revealed:before{opacity:1}
.chest-ground{position:absolute;bottom:22px;left:50%;width:210px;height:18px;margin-left:-105px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.48),rgba(0,0,0,.12) 58%,transparent 72%);opacity:0;pointer-events:none}
.chest-scene.won .chest-ground{opacity:1}
.chest,.chest-ghost{position:absolute;left:50%;bottom:10px;width:240px;height:210px;margin-left:-120px;transform-origin:50% 90%}
.chest > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.chest > .chest-front{z-index:3}
.chest .lid{transform-origin:140px 80px;transform-box:view-box}
.chest .hasp{transform-origin:114px 84px;transform-box:view-box}
.chest .lid-inner,.chest .chest-hinges,.chest .seam{opacity:0}
.chest.releasing .chest-hinges,.chest.open .chest-hinges{opacity:1}
.chest.idle .chest-glint{animation:gemGlint 2.8s ease-in-out infinite}
.chest .seam{filter:drop-shadow(0 0 4px #ffd93d) drop-shadow(0 0 9px #ff9f43)}
@keyframes gemGlint{0%,35%,65%,100%{opacity:.4}50%{opacity:1}}
/* Three inviting bounces, then a pause. The floor shadow stays on the floor. */
.chest.idle{animation:chestIdle 2.8s ease-in-out infinite}
@keyframes chestIdle{
  0%,27%,100%{transform:translateY(0) scale(1,1)}
  2%{transform:translateY(0) scale(1.06,.92)} 6%{transform:translateY(-26px) scale(.97,1.05)} 10%{transform:translateY(0) scale(1.05,.94)}
  14%{transform:translateY(-18px) scale(.98,1.03)} 18%{transform:translateY(0) scale(1.04,.95)}
  21.5%{transform:translateY(-10px) scale(.99,1.02)} 25%{transform:translateY(0) scale(1.02,.97)}
}
.chest-bounce{animation:chestIn .7s cubic-bezier(.3,1.35,.5,1) both}
@keyframes chestIn{0%{opacity:0;transform:translateY(-75px) scale(.8)}60%{opacity:1;transform:translateY(7px) scale(1.06,.94)}82%{transform:translateY(-8px) scale(.99,1.02)}100%{transform:none}}
/* Tap, pressure, held breath, then the latch lets go at 650 ms. */
.chest.charging{animation:chestCharge .65s linear forwards}
.chest.charging .lid{animation:lidRattle .65s linear forwards}
.chest.charging .hasp{animation:haspRattle .65s linear forwards}
.chest.charging .seam{animation:seamCharge .65s ease-in forwards}
@keyframes chestCharge{0%{transform:scale(1)}12%{transform:translateY(5px) scale(1.055,.94)}23%{transform:translateY(-1px) scale(.99,1.02)}32%{transform:translateX(-1px) rotate(-.6deg)}41%{transform:translateX(1.5px) rotate(.7deg)}49%{transform:translateX(-2px) rotate(-.9deg)}56%{transform:translateX(2px) rotate(.9deg)}62%{transform:translateX(-2.5px) rotate(-1.1deg)}68%{transform:translateX(2.5px) rotate(1.1deg)}73%{transform:translateX(-2px) rotate(-.8deg)}78%{transform:translateX(2px) rotate(.8deg)}85%,100%{transform:translateY(1px) scale(1.02,.98)}}
@keyframes lidRattle{0%,20%,31%,46%,59%,70%{transform:none}25%,39%,53%,65%,76%{transform:translateY(-2px) rotate(-.5deg)}43%,57%,68%{transform:translateY(-3px) rotate(.6deg)}85%,100%{transform:translateY(-3px)}}
@keyframes haspRattle{0%,22%,36%,50%,64%,78%{transform:none}29%,43%,57%,71%{transform:rotate(-7deg)}33%,47%,61%,75%{transform:rotate(6deg)}85%,100%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes seamCharge{0%,15%{opacity:0;stroke-width:1}50%{opacity:.5;stroke-width:2}85%,100%{opacity:1;stroke-width:4}}
.chest.releasing{animation:chestRecoil .6s cubic-bezier(.22,.8,.35,1) both}
.chest.releasing .hasp{animation:latchRelease .24s ease-out forwards}
.chest.open .hasp{opacity:0}
.chest.releasing .seam,.chest.open .seam{opacity:1;stroke-width:3}
@keyframes chestRecoil{0%{transform:translateY(1px) scale(1.02,.98)}22%{transform:translateY(9px) scale(1.06,.92)}49%{transform:translateY(-8px) scale(.98,1.03)}75%{transform:translateY(2px) scale(1.015,.985)}100%{transform:none}}
@keyframes latchRelease{0%{opacity:1;transform:translateY(-2px) rotate(-3deg)}55%{opacity:1;transform:translateY(-12px) rotate(-62deg) scaleY(.65)}100%{opacity:0;transform:translateY(-18px) rotate(-85deg) scaleY(.3)}}
.chest .prize{position:absolute;left:50%;top:64px;width:110px;height:110px;display:grid;place-items:center;transform:translate(-50%,30px) scale(.62);opacity:0;font-size:110px;line-height:1;z-index:2;isolation:isolate;pointer-events:none}
/* The soft sunburst shares the toy's center and its entire rise animation. */
.chest .prize:before{content:"";position:absolute;inset:-76px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,235,163,.26),transparent 60%),repeating-conic-gradient(from 0deg,rgba(255,236,174,.3) 0deg 12deg,transparent 17deg 36deg);-webkit-mask-image:radial-gradient(circle,#000 12%,rgba(0,0,0,.65) 34%,transparent 69%);mask-image:radial-gradient(circle,#000 12%,rgba(0,0,0,.65) 34%,transparent 69%);opacity:0;animation:toyRaysSpin 22s linear infinite;transition:opacity .5s}
.chest.open .prize:before{opacity:1}
@keyframes toyRaysSpin{to{transform:rotate(360deg)}}
.chest.open .prize{animation:prizeReveal .7s cubic-bezier(.2,.7,.25,1) both}
.chest.settled .prize{opacity:1;transform:translate(-50%,-98px) scale(1);animation:prizeFloat 5.2s linear infinite}
@keyframes prizeReveal{0%{opacity:1;transform:translate(-50%,30px) scale(.62) rotate(-5deg)}65%{transform:translate(-50%,-108px) scale(1.06) rotate(2deg)}83%{transform:translate(-50%,-94px) scale(.99) rotate(-1deg)}100%{opacity:1;transform:translate(-50%,-98px) scale(1)}}
/* A rotation/counter-rotation pair makes an unbroken orbit; the final angle adds a tiny sway. */
@keyframes prizeFloat{
  0%{transform:translate(-50%,-101px) rotate(0deg) translateY(3px) rotate(0.000deg)}
  6.25%{transform:translate(-50%,-101px) rotate(22.5deg) translateY(3px) rotate(-21.926deg)}
  12.5%{transform:translate(-50%,-101px) rotate(45deg) translateY(3px) rotate(-43.939deg)}
  18.75%{transform:translate(-50%,-101px) rotate(67.5deg) translateY(3px) rotate(-66.114deg)}
  25%{transform:translate(-50%,-101px) rotate(90deg) translateY(3px) rotate(-88.500deg)}
  31.25%{transform:translate(-50%,-101px) rotate(112.5deg) translateY(3px) rotate(-111.114deg)}
  37.5%{transform:translate(-50%,-101px) rotate(135deg) translateY(3px) rotate(-133.939deg)}
  43.75%{transform:translate(-50%,-101px) rotate(157.5deg) translateY(3px) rotate(-156.926deg)}
  50%{transform:translate(-50%,-101px) rotate(180deg) translateY(3px) rotate(-180.000deg)}
  56.25%{transform:translate(-50%,-101px) rotate(202.5deg) translateY(3px) rotate(-203.074deg)}
  62.5%{transform:translate(-50%,-101px) rotate(225deg) translateY(3px) rotate(-226.061deg)}
  68.75%{transform:translate(-50%,-101px) rotate(247.5deg) translateY(3px) rotate(-248.886deg)}
  75%{transform:translate(-50%,-101px) rotate(270deg) translateY(3px) rotate(-271.500deg)}
  81.25%{transform:translate(-50%,-101px) rotate(292.5deg) translateY(3px) rotate(-293.886deg)}
  87.5%{transform:translate(-50%,-101px) rotate(315deg) translateY(3px) rotate(-316.061deg)}
  93.75%{transform:translate(-50%,-101px) rotate(337.5deg) translateY(3px) rotate(-338.074deg)}
  100%{transform:translate(-50%,-101px) rotate(360deg) translateY(3px) rotate(-360.000deg)}
}
.chest-flash{position:absolute;left:50%;top:55%;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#fffbe0 0%,#ffe56b 24%,rgba(255,217,61,0) 70%);transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:3;opacity:0}
.chest-flash.go{animation:chestFlash .48s ease-out forwards}
@keyframes chestFlash{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}22%{opacity:.8}100%{transform:translate(-50%,-50%) scale(7);opacity:0}}
.chest-trigger{position:absolute;inset:12px 18px 6px;border-radius:20px;z-index:6;padding:0;touch-action:manipulation}
.chest-trigger:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;background:rgba(255,217,61,.04)}
.chest-trigger:disabled{cursor:default;pointer-events:none}
.tap-me{display:flex;justify-content:center;align-items:center;gap:6px;color:#5a4fa0;font-weight:600;margin-top:3px;animation:tapPulse 1.8s ease-in-out infinite}
@keyframes tapPulse{50%{color:#8246d6}}
/* Out of hearts: a dotted outline where the chest would have been. */
.chest-ghost{animation:ghostIn .8s ease both}
.chest-ghost svg{width:100%;height:100%;overflow:visible}
.chest-ghost g{animation:ghostDash 1.6s linear infinite}
@keyframes ghostDash{to{stroke-dashoffset:-32}}
@keyframes ghostIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
#chestOverlay.won #rewardInfo{height:132px}
#chestOverlay.won #rewardInfo.hidden{display:block !important;visibility:hidden}
#chestOverlay.won #chestButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:54px;margin-top:10px}
#chestOverlay.won #chestButtons.hidden{display:grid !important;visibility:hidden}
#rewardInfo:not(.hidden){animation:rewardDetails .35s ease both}
#rewardInfo p{font-size:16px;margin:4px 0 0}
@keyframes rewardDetails{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.reward-name{font-size:25px;line-height:1.15;font-weight:700;margin:2px 0 4px;min-height:29px}
.rarity{display:inline-block;padding:4px 14px;border-radius:999px;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px}
.rarity.mythic{background-size:200% 100% !important;animation:shimmer 2.5s linear infinite}
@media (max-width:480px){
  #chestOverlay .dialog{padding:20px 16px 18px}
  #chestTitle{font-size:25px}
  #chestText{font-size:16px;min-height:46px}
  .chest-scene{height:270px}
  .reward-name{font-size:23px}
  #chestOverlay.won #rewardInfo{height:132px}
  #chestButtons .btn{padding:12px 10px;gap:6px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .chest,.chest .lid,.chest .hasp,.chest .lid-inner,.chest .seam,.chest .chest-glint,.chest-ghost,.chest-ghost g,.tap-me,#rewardInfo:not(.hidden){animation:none !important;transition:none !important}
  .chest.charging .seam{opacity:.8;stroke-width:3}
  .chest.releasing .hasp{opacity:0}
  .chest .prize:before,.chest-flash{display:none}
  .chest.open .prize{animation:prizeFade .3s ease both;transform:translate(-50%,-98px) scale(1)}
  .chest.settled .prize{animation:none;opacity:1;transform:translate(-50%,-98px) scale(1)}
  .chest-scene:before{transition:none}
  @keyframes prizeFade{from{opacity:0}to{opacity:1}}
}


/* speedrun time on the chest */
#chestText .time{display:inline-block;font-size:30px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:6px;vertical-align:middle}
/* toy box */
.toygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:10px}
.toygrid .toy{aspect-ratio:1;border-radius:18px;background:#f6f4ff;border:3px solid #e6e2f7;display:grid;place-items:center;font-size:58px;transition:transform .15s;position:relative}
.toygrid .toy:active{transform:scale(.93)}
.toygrid .toy.r2{border-color:#9fe9c3}
.toygrid .toy.r3{border-color:#d59bff;background:#f7efff}
.toygrid .toy.r4{border-color:#ff8ad8;background:#fff0fa;box-shadow:0 0 12px rgba(255,138,216,.45)}
.toygrid .toy.r5{border-color:var(--yellow);background:#fff8dc;box-shadow:0 0 14px rgba(255,217,61,.5)}
.toygrid .toy.r6{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(#ff5fa2,#ffd93d,#4fe3c1,#5ec8ff,#a06bff,#ff5fa2) border-box;box-shadow:0 0 16px rgba(160,107,255,.5)}
.toy-legend{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.toy-legend .rarity{margin:0;font-size:12px;padding:3px 10px}
.toygrid .toy .n{position:absolute;right:6px;top:4px;font-size:12px;font-weight:700;background:var(--ink);color:#fff;border-radius:999px;padding:1px 7px}
.empty-box{color:var(--muted);font-size:18px;padding:30px 10px}

/* lightbox */
.lightbox{background:radial-gradient(circle at 50% 35%,#4b2fa0,#1b1340 70%);color:#fff;border-radius:32px;padding:30px 24px;text-align:center;max-width:420px;width:100%;position:relative;box-shadow:0 0 80px rgba(160,107,255,.5)}
.lightbox .big{font-size:200px;line-height:1;margin:10px 0;display:flex;justify-content:center;animation:floaty 3s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,255,255,.35))}
@keyframes floaty{50%{transform:translateY(-12px) rotate(3deg)}}
.lightbox h2{font-size:32px;margin:6px 0;justify-content:center}
.lightbox p{color:#cdc6f0;font-size:16px}
.lightbox .close-x{background:rgba(255,255,255,.15);color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;z-index:2;transition:transform .12s,background .15s}
.lb-nav .ic{width:26px;height:26px;stroke-width:2.6}
.lb-nav.prev{left:10px}.lb-nav.next{right:10px}
.lb-nav:active{transform:translateY(-50%) scale(.9);background:rgba(255,255,255,.3)}
.lb-nav:disabled{opacity:.25;pointer-events:none}
.lightbox .big.slide-l{animation:slideL .28s cubic-bezier(.2,.8,.3,1.2)}
.lightbox .big.slide-r{animation:slideR .28s cubic-bezier(.2,.8,.3,1.2)}
@keyframes slideL{from{transform:translateX(60px) scale(.6);opacity:0}}
@keyframes slideR{from{transform:translateX(-60px) scale(.6);opacity:0}}
.lb-count{font-size:14px;color:#9f97c8 !important;margin:2px 0 0}

/* canvases */
#fx{position:fixed;left:0;top:0;pointer-events:none;z-index:70}
#victory{position:fixed;left:0;top:0;width:100%;height:100%;z-index:65;display:none}

.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:#fff;color:var(--ink);padding:10px 20px;border-radius:999px;font-weight:600;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.4);animation:fadeIn .25s;display:flex;align-items:center;gap:6px}
.flyer{position:fixed;z-index:80;font-size:96px;pointer-events:none;transition:all .9s cubic-bezier(.5,0,.3,1)}