:root{
  --bg:#ffffff; --fg:#1a1a1b; --muted:#787c7e; --line:#d3d6da; --line-strong:#878a8c;
  --key:#d3d6da; --key-fg:#1a1a1b; --sheet:#ffffff; --overlay:rgba(255,255,255,.6);
  --correct:#6aaa64; --present:#c9b458; --absent:#787c7e; --tile-fg:#fff;
  --toast-bg:#1a1a1b; --toast-fg:#fff;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
}
body.dark{
  --bg:#121214; --fg:#f2f2f3; --muted:#9a9aa1; --line:#3a3a3c; --line-strong:#5a5a5e;
  --key:#818384; --key-fg:#fff; --sheet:#1c1c1f; --overlay:rgba(0,0,0,.55);
  --correct:#538d4e; --present:#b59f3b; --absent:#3a3a3c;
  --toast-bg:#f2f2f3; --toast-fg:#121214;
}
body.contrast{ --correct:#f5793a; --present:#85c0f9; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overscroll-behavior:none; touch-action:manipulation; -webkit-user-select:none; user-select:none;
  -webkit-text-size-adjust:100%; transition:background .2s,color .2s;
}
button{font:inherit;color:inherit;touch-action:manipulation}
#app{
  height:100vh; height:100dvh; display:flex; flex-direction:column; max-width:520px; margin:0 auto;
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
}
.topbar{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 8px;border-bottom:1px solid var(--line);flex:none}
.side{display:flex;gap:2px;align-items:center;min-width:104px}
.side.right{justify-content:flex-end}
.title{margin:0;font-size:30px;letter-spacing:.12em;font-weight:800;font-family:"Bricolage Grotesque","Avenir Next",-apple-system,sans-serif}
.icon-btn{background:none;border:0;padding:8px;cursor:pointer;display:flex;align-items:center;border-radius:8px}
.icon-btn:active{background:var(--line)}
.icon-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg .fill{fill:currentColor}
#btn-mode span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--line-strong);border-radius:999px;padding:4px 9px}
.subbar{text-align:center;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;padding:6px 0 0;flex:none}

#board-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:6px 10px}
#board{display:grid;grid-template-rows:repeat(7,1fr);gap:5px;flex:none}
.row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.tile{
  display:flex;align-items:center;justify-content:center;border:2px solid var(--line);
  font-weight:800;font-size:clamp(20px,7.2vw,32px);text-transform:uppercase;line-height:1;
  aspect-ratio:1/1;border-radius:4px;color:var(--fg);
}
.tile.filled{border-color:var(--line-strong);animation:pop .1s ease-in-out}
.tile.correct,.tile.present,.tile.absent{color:var(--tile-fg);border-color:transparent}
.tile.correct{background:var(--correct)} .tile.present{background:var(--present)} .tile.absent{background:var(--absent)}
.tile.flip{animation:flip .5s ease-in-out forwards}
.tile.bounce{animation:bounce .5s ease}
.row.shake{animation:shake .5s}
@keyframes pop{0%{transform:scale(.85)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-28px)}50%{transform:translateY(4px)}60%{transform:translateY(-12px)}80%{transform:translateY(2px)}100%{transform:translateY(0)}}

#keyboard{flex:none;padding:4px 6px 8px;display:flex;flex-direction:column;gap:7px}
.krow{display:flex;gap:5px;justify-content:center}
.key{
  flex:1;max-width:44px;height:56px;border:0;border-radius:5px;background:var(--key);color:var(--key-fg);
  font-weight:700;font-size:16px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .05s;padding:0;
}
.key:active{transform:scale(.94)}
.key.wide{flex:1.55;max-width:68px;font-size:12px}
.key.wide svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.krow .spacer{flex:.5;max-width:22px}
.key.correct{background:var(--correct);color:#fff} .key.present{background:var(--present);color:#fff} .key.absent{background:var(--absent);color:#fff}
body:not(.dark) .key.absent{background:#787c7e}

#toasts{position:fixed;top:calc(var(--sat) + 70px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:50}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:12px 16px;border-radius:6px;font-weight:700;font-size:14px;opacity:1;transition:opacity .3s}
.toast.hide{opacity:0}

.modal{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:40;padding:calc(var(--sat) + 12px) 12px calc(var(--sab) + 12px);animation:fade .2s}
.modal[hidden]{display:none}
.sheet{position:relative;background:var(--sheet);color:var(--fg);border-radius:14px;width:100%;max-width:440px;max-height:100%;overflow:auto;padding:22px 20px 20px;box-shadow:0 10px 40px rgba(0,0,0,.35);animation:slide .25s ease-out;-webkit-user-select:text;user-select:text}
@keyframes fade{from{opacity:0}} @keyframes slide{from{transform:translateY(30px);opacity:0}}
.sheet h2{margin:0 0 12px;font-size:20px;text-align:center;letter-spacing:.04em;text-transform:uppercase}
.sheet h3{margin:18px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.05em}
.sheet p,.sheet li{font-size:15px;line-height:1.45}
.sheet ul{padding-left:20px}
.close{position:absolute;top:8px;right:10px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--muted);padding:6px}
.small{font-size:13px;color:var(--muted)}
.ex{display:flex;gap:4px;margin-top:10px}
.ex .t{width:36px;height:36px;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;border-radius:3px}
.ex .t.correct{background:var(--correct);border-color:transparent;color:#fff}
.ex .t.present{background:var(--present);border-color:transparent;color:#fff}
.ex .t.absent{background:var(--absent);border-color:transparent;color:#fff}
.stat-row{display:flex;justify-content:space-around;text-align:center}
.stat-row .num{font-size:34px;font-weight:600}
.lbl{font-size:12px;color:var(--fg)}
#dist .bar-row{display:flex;align-items:center;gap:6px;margin:4px 0;font-size:14px}
#dist .bar{background:var(--absent);color:#fff;padding:2px 8px;text-align:right;font-weight:700;min-width:22px;border-radius:2px}
#dist .bar.hl{background:var(--correct)}
.answer-line{text-align:center;margin:16px 0 4px;font-size:15px}
.answer-line b{letter-spacing:.12em}
.end-actions{display:flex;align-items:center;justify-content:space-around;margin-top:14px;gap:12px}
.countdown{text-align:center}.countdown .num{font-size:28px;font-variant-numeric:tabular-nums}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:800;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--correct);color:#fff}
.btn.secondary{display:block;margin:14px auto 0;background:transparent;border:2px solid var(--line-strong);color:var(--fg)}
.setting{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.setting input{display:none}
.switch{flex:none;width:44px;height:26px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.setting input:checked + .switch{background:var(--correct)}
.setting input:checked + .switch::after{transform:translateX(18px)}
.setting input:disabled + .switch{opacity:.45}
.foot{text-align:center;margin-top:18px}
@media (max-height:640px){.key{height:48px}.topbar{height:46px}}
@media (prefers-reduced-motion:reduce){.tile,.row,.sheet,.modal{animation-duration:.01s!important}}

/* ---- v2 helpers ---- */
#helpers{flex:none;display:flex;gap:6px;justify-content:center;padding:6px 6px 2px;flex-wrap:nowrap}
.hbtn{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px;border-radius:999px;border:1.5px solid var(--line-strong);
  background:transparent;color:var(--fg);font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s,background .2s}
.hbtn:active{transform:scale(.96)}
.hbtn:disabled{opacity:.42;cursor:default;transform:none}
.hbtn.used{border-style:dashed}
.hbtn.answer-yes{opacity:1;border-color:var(--present);border-style:solid;background:color-mix(in srgb,var(--present) 22%,transparent)}
.hbtn.answer-no{opacity:1;border-color:var(--line-strong);border-style:solid;background:color-mix(in srgb,var(--absent) 40%,transparent)}
.hemoji{font-size:17px;line-height:1}
.mini{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:3px;background:var(--correct);color:#fff;font-size:11px;font-weight:800;margin-right:-2px}
.mini.blank{background:transparent;border:2px dashed var(--line-strong)}
.mini.sm{width:13px;height:13px;vertical-align:-2px}
.hbtn.demo{height:30px;padding:0 9px;font-size:12px;vertical-align:middle;margin-right:4px;cursor:default}
.help-helpers p{margin:10px 0}
.tile.blank{border:2px dashed var(--muted);background:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb,var(--muted) 18%,transparent) 6px 8px);animation:pop .1s ease-in-out}
/* v2.1: guessed-absent keys and bomb-eliminated keys share the red strike-through */
.key.elim,.key.absent{background:var(--absent);color:rgba(255,255,255,.85);position:relative;overflow:hidden}
body:not(.dark) .key.elim,body:not(.dark) .key.absent{background:#787c7e;color:rgba(255,255,255,.9)}
.key.elim::after,.key.absent::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;margin-top:-1px;background:#ff5a5f;opacity:.9;
  transform:rotate(-35deg);border-radius:2px;pointer-events:none;box-shadow:0 0 0 .5px rgba(0,0,0,.25)}
.key.boom{animation:boom .45s ease-out}
@keyframes boom{0%{transform:scale(1)}35%{transform:scale(1.3) rotate(-6deg);background:#e5484d}70%{transform:scale(.9)}100%{transform:scale(1)}}
#coach{flex:none;margin:4px 10px 0;background:var(--sheet);border:1.5px solid var(--correct);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.4;
  display:flex;gap:10px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.25);animation:slide .25s ease-out}
#coach[hidden]{display:none}
.small-btn{padding:8px 12px;font-size:13px;background:var(--correct);color:#fff;flex:none}
@media (max-height:700px){.key{height:48px}#helpers{padding-top:4px}.hbtn{height:32px}}

/* ---- v3: Freebie ---- */
#gift-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;height:24px;margin-bottom:5px;flex:none}
#gift-row[hidden]{display:none}
#gift-row .gslot{display:flex;align-items:flex-end;justify-content:center}
#gift-row .gtile{display:flex;align-items:center;justify-content:center;gap:2px;height:22px;padding:0 6px;border-radius:5px;background:var(--correct);color:#fff;
  font-weight:800;font-size:14px;line-height:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--correct) 35%,transparent);animation:pop .3s ease-out}
#gift-row .gtile small{font-size:11px}
#gift-row .garrow{position:relative}
@media (max-width:380px){.hbtn{padding:0 8px;font-size:12px}#helpers{gap:5px}}
.key.giftpop{animation:pop .5s ease-out}

/* ---- v4: 5 compact helpers (icon + tiny caption) ---- */
#helpers{gap:5px;padding:5px 6px 2px}
#helpers .hbtn{flex:1 1 0;max-width:76px;min-width:0;height:44px;padding:2px 2px 3px;border-radius:12px;flex-direction:column;justify-content:center;gap:2px;font-size:10.5px;font-weight:700;letter-spacing:.01em}
#helpers .hico{display:flex;align-items:center;justify-content:center;gap:1px;height:19px;font-size:17px;line-height:1}
#helpers .hico .mini{width:15px;height:15px;font-size:10px;margin-right:0}
#helpers .hlbl{line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#clue-row{display:flex;justify-content:center;height:26px;margin-bottom:5px;flex:none}
#clue-row[hidden]{display:none}
.clue-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--present) 22%,transparent);
  border:1.5px solid var(--present);font-size:13px;font-weight:700;animation:pop .3s ease-out;white-space:nowrap}
.points-row{display:flex;justify-content:space-around;text-align:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.points-row .num{font-size:24px;font-weight:700}
.points-earned{text-align:center;font-size:15px;margin-top:6px}
.points-earned b{font-size:22px;color:var(--correct)}
.points-earned small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.mode-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:transparent;border:2px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;cursor:pointer;color:var(--fg)}
.mode-opt.active{border-color:var(--correct);background:color-mix(in srgb,var(--correct) 14%,transparent)}
.mode-opt b{display:block;font-size:16px}.mode-opt small{color:var(--muted);font-size:13px}
.mo-ico{font-size:26px}
@media (max-height:700px){#helpers .hbtn{height:40px}}

/* ---- v5: Blank space bar, 4 helpers, Yellow Float ---- */
.krow-blank{justify-content:center}
.key.blankbar{flex:none;width:56%;max-width:260px;height:40px;gap:8px;font-size:13px;text-transform:none;letter-spacing:.02em}
.key.blankbar .mini.blank{width:16px;height:16px;margin:0;border-color:currentColor;opacity:.85}
.key.blankbar:disabled{opacity:.5}
#helpers .hbtn{max-width:96px}
#gift-row .gtile.float{background:var(--correct)}
#gift-row .gtile.landed{animation:land .45s ease-out}
@keyframes land{0%{transform:scale(1.35)}60%{transform:scale(.92)}100%{transform:scale(1)}}
.float-ghost{display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;color:#fff;font-weight:800;text-transform:uppercase;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:background .2s;pointer-events:none}
@media (max-height:700px){.key{height:46px}.key.blankbar{height:34px}#keyboard{gap:6px;padding-bottom:6px}}

/* ---- v6: six rows, reclaim vertical space so tiles are as big as possible ---- */
.topbar{height:44px;padding:0 4px}
.icon-btn{padding:6px}
.icon-btn svg{width:24px;height:24px}
.title{font-size:26px}
.subbar{display:flex;align-items:center;justify-content:center;gap:8px;height:22px;padding:2px 8px 0;overflow:hidden;white-space:nowrap;box-sizing:border-box}
.subbar #subbar{flex:none}
#clue-row{display:inline-flex;height:auto;margin:0;min-width:0;flex:0 1 auto}
#clue-row[hidden]{display:none}
#clue-row .clue-chip{height:18px;padding:0 8px;gap:4px;font-size:11.5px;border-width:1px;text-transform:none;letter-spacing:0;color:var(--fg);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:16px;box-sizing:border-box}
#board-wrap{padding:2px 4px}
#board{grid-template-rows:repeat(6,1fr);gap:4px}
#board .row{gap:4px}
#gift-row{gap:4px;height:18px;margin-bottom:3px}
#gift-row .gtile{height:17px;padding:0 5px;font-size:12px;border-radius:4px;box-shadow:none}
#gift-row .gtile small{font-size:9px}
#helpers{padding:3px 6px 2px;gap:5px}
#helpers .hbtn{height:32px;max-width:100px;flex-direction:row;gap:4px;padding:0 4px;border-radius:999px;font-size:11.5px}
#helpers .hico{height:auto;font-size:15px}
#helpers .hico .mini{width:13px;height:13px;font-size:9px}
#keyboard{padding:3px 4px 6px;gap:6px}
.key{height:50px}
.key.blankbar{height:32px}
.legacy7{margin:6px 0 0;color:var(--muted);text-align:center}
@media (max-height:700px){
  .topbar{height:40px}
  .key{height:44px}
  .key.blankbar{height:28px}
  #helpers .hbtn{height:30px}
  #keyboard{gap:6px;padding-bottom:5px}
}
@media (max-height:600px){.key{height:40px}.key.blankbar{height:26px}}
@media (min-height:780px){.key{height:56px}.key.blankbar{height:36px}}
#helpers .hbtn.answer-yes .hico,#helpers .hbtn.answer-no .hico{display:none}

/* ---- v6.1: colorful fun elements ---- */
#h-elim{--h1:#ff4d3d;--h2:#ff9f1c;--hfg:#fff}
#h-dbl{--h1:#7c3aed;--h2:#c06cff;--hfg:#fff}
#h-gift{--h1:#e0218a;--h2:#ff6ec7;--hfg:#fff}
#h-clue{--h1:#f59e0b;--h2:#ffd23f;--hfg:#2b1b00}
#helpers .hbtn{background:linear-gradient(135deg,var(--h1),var(--h2));color:var(--hfg);border:1.5px solid rgba(255,255,255,.28);
  box-shadow:0 0 12px color-mix(in srgb,var(--h1) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 1px rgba(0,0,0,.25)}
#h-clue.hbtn{text-shadow:none}
#helpers .hbtn .mini{background:rgba(255,255,255,.95);color:var(--h1)}
#helpers .hbtn:disabled{opacity:.55;box-shadow:none}
#helpers .hbtn.used{opacity:1;background:color-mix(in srgb,var(--h1) 16%,transparent);color:color-mix(in srgb,var(--h2) 75%,var(--fg));
  border:1.5px dashed color-mix(in srgb,var(--h1) 55%,transparent);box-shadow:none;text-shadow:none}
#helpers .hbtn.used .hico{filter:saturate(.6);opacity:.7}
#helpers .hbtn.answer-yes,#helpers .hbtn.answer-no{opacity:1;border:1.5px solid rgba(255,255,255,.4);background:linear-gradient(135deg,var(--h1),var(--h2));color:#fff}
#helpers .hbtn.answer-no{background:linear-gradient(135deg,color-mix(in srgb,var(--h1) 70%,#333),color-mix(in srgb,var(--h2) 70%,#333))}
#helpers .hbtn.answer-yes{box-shadow:0 0 14px color-mix(in srgb,var(--h2) 70%,transparent)}
#helpers .hbtn.awaiting > *{visibility:hidden}
#helpers .hbtn.settle{animation:settle .45s ease-out}
@keyframes settle{0%{transform:scale(1.18)}55%{transform:scale(.94)}100%{transform:scale(1)}}
body:not(.dark) #helpers .hbtn{box-shadow:0 2px 8px color-mix(in srgb,var(--h1) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
body:not(.dark) #helpers .hbtn.used{color:color-mix(in srgb,var(--h1) 80%,#000)}
body.contrast #helpers .hbtn:not(.used){background:var(--h1);box-shadow:none;border:2px solid var(--fg);text-shadow:none}
body.contrast #h-clue.hbtn:not(.used){background:#ffc21a}
body.contrast #helpers .hbtn.used{border-width:2px}

/* clue chip takes the Clue pill's amber */
#clue-row .clue-chip{background:linear-gradient(135deg,#f59e0b,#ffd23f);border:1px solid rgba(255,255,255,.35);color:#2b1b00;font-weight:800;
  box-shadow:0 0 10px rgba(245,158,11,.45)}
body.contrast #clue-row .clue-chip{background:#ffc21a;box-shadow:none;border:1.5px solid var(--fg)}

/* bonus tiles: still green (= correct) with a colorful ring + shine */
#gift-row .gtile{position:relative;overflow:hidden;border:2px solid transparent;padding:0 5px;box-sizing:border-box;height:18px}
#gift-row .gtile.gift{background:linear-gradient(var(--correct),var(--correct)) padding-box,linear-gradient(135deg,#ff6ec7,#e0218a,#ffd23f) border-box;
  box-shadow:0 0 9px rgba(255,110,199,.6)}
#gift-row .gtile.float{background:linear-gradient(var(--correct),var(--correct)) padding-box,conic-gradient(#ff4d3d,#ffd23f,#4ade80,#38bdf8,#a78bfa,#ff6ec7,#ff4d3d) border-box;
  box-shadow:0 0 9px rgba(124,243,255,.55)}
#gift-row .gtile::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite}
#gift-row .gtile.float::after{animation-delay:1.6s}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
body.contrast #gift-row .gtile::after{display:none}
body.contrast #gift-row .gtile.gift,body.contrast #gift-row .gtile.float{background:var(--correct);border:2px solid var(--fg);box-shadow:none}

/* flying float tile sparkles */
.float-ghost.sparkly{box-shadow:0 0 18px 4px rgba(255,216,77,.75),0 8px 24px rgba(0,0,0,.35)}
.sparkle{position:fixed;z-index:31;pointer-events:none;line-height:1;transform:translate(-50%,-50%);animation:spark .7s ease-out forwards;text-shadow:0 0 6px currentColor}
@keyframes spark{0%{opacity:1;transform:translate(-50%,-50%) scale(.4) rotate(0)}40%{opacity:1;transform:translate(-50%,-80%) scale(1.2) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-140%) scale(.6) rotate(90deg)}}

/* Repeat? result pop */
.repeat-pop{position:fixed;left:0;right:0;top:36%;margin:0 auto;width:max-content;max-width:86vw;z-index:55;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 28px 16px;border-radius:26px;color:#fff;text-align:center;
  background:linear-gradient(135deg,#7c3aed,#c06cff);border:2px solid rgba(255,255,255,.5);
  box-shadow:0 0 40px rgba(192,108,255,.75),0 12px 40px rgba(0,0,0,.45);transform-origin:center}
.repeat-pop.no{background:linear-gradient(135deg,#5b2bb0,#8f55c9)}
.repeat-pop b{font-size:34px;line-height:1;letter-spacing:.01em;text-shadow:0 2px 3px rgba(0,0,0,.3)}
.repeat-pop small{font-size:14px;font-weight:600;opacity:.92}
.repeat-pop .rp-ico{display:flex;gap:4px}
.repeat-pop .mini{width:30px;height:30px;font-size:18px;border-radius:6px;background:#fff;color:#7c3aed;margin:0}
body.contrast .repeat-pop{background:#7c3aed;box-shadow:0 12px 40px rgba(0,0,0,.45)}

/* ---- v6.2: floating banners ---- */
.banner{position:fixed;left:0;right:0;margin:0 auto;width:min(86vw,360px);box-sizing:border-box;z-index:56;border-radius:22px;padding:16px 18px 10px;
  color:#fff;text-align:center;cursor:pointer;border:2px solid rgba(255,255,255,.45);
  box-shadow:0 0 36px var(--bglow,rgba(255,255,255,.3)),0 14px 40px rgba(0,0,0,.45);animation:bannerIn .4s cubic-bezier(.2,1.4,.4,1) both;
  -webkit-user-select:none;user-select:none}
.banner.out{animation:bannerOut .26s ease-in forwards}
.banner.bump{animation:bannerBump .45s ease-out}
@keyframes bannerIn{0%{opacity:0;transform:translateY(16px) scale(.6)}100%{opacity:1;transform:none}}
@keyframes bannerOut{to{opacity:0;transform:translateY(-10px) scale(.92)}}
@keyframes bannerBump{0%{transform:scale(1)}35%{transform:scale(1.08) rotate(-1.5deg)}70%{transform:scale(.98) rotate(1deg)}100%{transform:none}}
.b-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.92;margin-bottom:6px}
.b-text{font-size:21px;font-weight:800;line-height:1.28;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.b-hint,.repeat-pop .b-hint{display:block;font-size:11px;font-weight:600;opacity:.7;margin-top:8px}
.b-tile{width:84px;height:84px;margin:2px auto 10px;border-radius:10px;background:var(--correct);display:flex;align-items:center;justify-content:center;
  font-size:52px;font-weight:800;color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 26px rgba(255,255,255,.55);text-shadow:0 2px 3px rgba(0,0,0,.25)}
.gift-ghost{display:flex;align-items:center;justify-content:center}
.b-elim{background:linear-gradient(135deg,#ff4d3d,#ff9f1c);--bglow:rgba(255,90,40,.7)}
.b-dbl{background:linear-gradient(135deg,#7c3aed,#c06cff);--bglow:rgba(192,108,255,.7)}
.b-gift{background:linear-gradient(135deg,#e0218a,#ff6ec7);--bglow:rgba(255,110,199,.7)}
.b-clue{background:linear-gradient(135deg,#f59e0b,#ffd23f);--bglow:rgba(245,158,11,.7);color:#2b1b00}
.b-clue .b-text{text-shadow:none}
.b-float{background:linear-gradient(135deg,#0ea5e9,#22c55e 55%,#a3e635);--bglow:rgba(124,243,255,.7)}
body.contrast .banner{box-shadow:0 14px 40px rgba(0,0,0,.45);border:3px solid var(--fg)}
body.contrast .b-elim{background:#d9361f}body.contrast .b-dbl{background:#6d28d9}body.contrast .b-gift{background:#be185d}
body.contrast .b-clue{background:#ffc21a}body.contrast .b-float{background:#0369a1}
.repeat-pop{pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){.banner{animation:bannerFade .2s ease-out both}.banner.out{animation:bannerFadeOut .2s forwards}.banner.bump{animation:none}}
@keyframes bannerFade{from{opacity:0}to{opacity:1}}@keyframes bannerFadeOut{to{opacity:0}}
#helpers .hbtn.off{opacity:.5;box-shadow:none}
#helpers .hbtn{-webkit-touch-callout:none}
/* slightly larger strip tiles (tap for a reminder) */
#gift-row{height:22px}
#gift-row .gtile{height:22px;font-size:14px;padding:0 6px;cursor:pointer}
#gift-row .gtile small{font-size:10px}

/* ---- v7: surprises ---- */
.b-gold{background:linear-gradient(135deg,#b8860b,#ffd700 45%,#fff3a3 60%,#f2b705);--bglow:rgba(255,215,0,.8);color:#3a2500}
.b-gold .b-text{text-shadow:none}
.b-myst{background:linear-gradient(135deg,#0f766e,#14b8a6 50%,#a855f7);--bglow:rgba(45,212,191,.75)}
.b-trivia{background:linear-gradient(135deg,#2563eb,#7c3aed 50%,#db2777);--bglow:rgba(124,58,237,.75)}
.b-pick{background:linear-gradient(135deg,#16a34a,#22c55e 50%,#facc15);--bglow:rgba(34,197,94,.75)}
.b-nope{background:linear-gradient(135deg,#475569,#64748b);--bglow:rgba(148,163,184,.5)}
.b-streak{background:linear-gradient(135deg,#ea580c,#f97316 45%,#facc15);--bglow:rgba(249,115,22,.8)}
.b-lucky{background:linear-gradient(135deg,#059669,#10b981 40%,#38bdf8);--bglow:rgba(16,185,129,.8)}
body.contrast .b-gold{background:#ffc21a}body.contrast .b-myst{background:#0f766e}body.contrast .b-trivia{background:#4338ca}
body.contrast .b-pick{background:#15803d}body.contrast .b-nope{background:#334155}body.contrast .b-streak{background:#c2410c}body.contrast .b-lucky{background:#047857}

/* golden tile */
.tile.golden{background:linear-gradient(135deg,#b8860b,#ffd700 40%,#fff6bf 52%,#e6a800) !important;color:#3a2500 !important;border-color:transparent;
  box-shadow:0 0 14px rgba(255,215,0,.75);position:relative;overflow:hidden}
.tile.golden::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);animation:shine 2.6s ease-in-out infinite}
.tile.golden-flip{animation:goldflip 1s ease-out}
@keyframes goldflip{0%{transform:rotateY(0) scale(1)}40%{transform:rotateY(180deg) scale(1.25)}70%{transform:rotateY(360deg) scale(1.1)}100%{transform:rotateY(360deg) scale(1)}}
body.contrast .tile.golden{background:#ffc21a !important;box-shadow:0 0 0 3px var(--fg)}

/* flashy green (bonus letters) */
.flashy{animation:flashy 1s cubic-bezier(.2,.9,.3,1.2)}
@keyframes flashy{0%{transform:scale(.4) rotateY(0);filter:brightness(3);box-shadow:0 0 0 0 rgba(255,255,255,.9)}
  35%{transform:scale(1.6) rotateY(200deg);filter:brightness(2.2);box-shadow:0 0 24px 10px rgba(124,255,138,.9)}
  65%{transform:scale(.92) rotateY(360deg);filter:brightness(1.3)}100%{transform:scale(1) rotateY(360deg);filter:none;box-shadow:0 0 0 0 transparent}}
.key.flashy{animation:keyflash 1s ease-out}
@keyframes keyflash{0%{filter:brightness(3);transform:scale(1.25)}40%{box-shadow:0 0 18px 6px rgba(124,255,138,.9);transform:scale(1.12)}100%{filter:none;transform:none;box-shadow:none}}
.flashy-soft{animation:flashysoft .9s ease-out}
@keyframes flashysoft{0%{filter:brightness(2)}100%{filter:none}}
.burst{position:fixed;z-index:59;pointer-events:none;line-height:1;transform:translate(-50%,-50%);animation:burst .85s ease-out forwards;text-shadow:0 0 6px currentColor}
@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(120deg)}}

/* mystery box button */
#h-myst{--h1:#14b8a6;--h2:#a855f7;--hfg:#fff;flex:0 0 46px;max-width:46px;animation:mystglow 1.4s ease-in-out infinite}
#h-myst[hidden]{display:none}
#h-myst .hlbl{display:none}
#h-myst .hico{font-size:18px}
@keyframes mystglow{0%,100%{box-shadow:0 0 8px rgba(45,212,191,.6);transform:scale(1)}50%{box-shadow:0 0 20px 4px rgba(168,85,247,.85);transform:scale(1.07)}}
#helpers.has-myst .hbtn{font-size:10.5px;gap:3px}
#helpers.has-myst .hico{font-size:13px}
#helpers.has-myst .hico .mini{width:11px;height:11px;font-size:8px}
#helpers .hbtn.banked:not(.used){box-shadow:0 0 0 2px #facc15,0 0 14px rgba(250,204,21,.8)}

/* pop-up cards: trivia + letter pick */
.pop-overlay{position:fixed;inset:0;z-index:57;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.25);animation:fade .2s;pointer-events:none}
.pop-overlay .pop-card{pointer-events:auto}  /* v7.9: helpers + keyboard stay tappable (tapping them dismisses the card) */
.pop-overlay.out{animation:bannerFadeOut .25s forwards}
.pop-card{width:min(92vw,380px);border-radius:24px;padding:16px 16px 12px;color:#fff;text-align:center;border:2px solid rgba(255,255,255,.5);
  box-shadow:0 0 40px rgba(124,58,237,.6),0 18px 50px rgba(0,0,0,.5);animation:bannerIn .4s cubic-bezier(.2,1.4,.4,1) both}
.pc-trivia{background:linear-gradient(150deg,#1d4ed8,#7c3aed 55%,#db2777)}
.pc-pick{background:linear-gradient(150deg,#15803d,#16a34a 50%,#ca8a04);box-shadow:0 0 40px rgba(34,197,94,.55),0 18px 50px rgba(0,0,0,.5)}
.pc-head{font-size:24px;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 3px rgba(0,0,0,.3)}
.pc-cat{display:inline-block;margin:6px 0 2px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.22);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pc-q{font-size:18px;font-weight:800;line-height:1.3;margin:8px 4px 12px}
.pc-opts{display:grid;gap:8px}
.pc-opt{min-height:44px;border-radius:14px;border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:#fff;font-size:15px;font-weight:800;padding:8px 10px;cursor:pointer}
.pc-opt:active{transform:scale(.97)}
.pc-opt.right,.pc-letter.right{background:#22c55e;border-color:#fff;box-shadow:0 0 16px rgba(34,197,94,.9);animation:pop .35s}
.pc-opt.wrong,.pc-letter.wrong{background:#ef4444;border-color:#fff;animation:shake .45s}
.pc-opt:disabled,.pc-letter:disabled{opacity:1;cursor:default}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:12px;font-weight:700;opacity:.95;text-align:left}
.pc-skip{flex:none;border:1.5px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:13px;cursor:pointer}
.pc-slots{display:flex;justify-content:center;gap:5px;margin:0 0 12px}
.pc-slot{width:30px;height:30px;border-radius:6px;border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-weight:900}
.pc-slot.on{background:#facc15;color:#3a2500;border-color:#fff;animation:pop .6s infinite alternate}
.pc-letters{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pc-letter{height:64px;border-radius:12px;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.16);color:#fff;font-size:32px;font-weight:900;cursor:pointer}
body.contrast .pop-card{background:#1e293b;border:3px solid #fff;box-shadow:0 18px 50px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.pop-card{animation:bannerFade .2s both}.pc-slot.on{animation:none}#h-myst{animation:none}.tile.golden::after{display:none}}

/* word fact on the end screen */
.word-fact{margin:10px 2px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--correct) 14%,transparent);border:1.5px solid color-mix(in srgb,var(--correct) 45%,transparent);
  font-size:13.5px;line-height:1.45;text-align:left}
.word-fact[hidden]{display:none}
.word-fact i{color:var(--muted)}

/* tile themes (streak unlocks) */
.tile-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 8px}
.tile-theme{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:12px;border:2px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.tile-theme.active{border-color:var(--correct);background:color-mix(in srgb,var(--correct) 14%,transparent)}
.tile-theme:disabled{opacity:.55;cursor:default}
.tile-theme small{font-size:10.5px;color:var(--muted)}
.tt-demo{display:flex;gap:3px}.tt-demo i{width:18px;height:18px;border-radius:3px;display:block}
.tt-demo .c{background:#538d4e}.tt-demo .p{background:#b59f3b}
.tt-demo.neon .c{background:#00e676;box-shadow:0 0 6px #00e676}.tt-demo.neon .p{background:#ff2bd6;box-shadow:0 0 6px #ff2bd6}
.tt-demo.galaxy .c{background:linear-gradient(135deg,#6d28d9,#2563eb)}.tt-demo.galaxy .p{background:linear-gradient(135deg,#f59e0b,#db2777)}
body.tiles-neon:not(.contrast){--correct:#00c853;--present:#e91e9c}
body.tiles-neon:not(.contrast) .tile.correct{box-shadow:0 0 12px rgba(0,230,118,.75);background:#00c853}
body.tiles-neon:not(.contrast) .tile.present{box-shadow:0 0 12px rgba(255,43,214,.7);background:#e91e9c}
body.tiles-galaxy:not(.contrast){--correct:#5b3fd6;--present:#e0702a}
body.tiles-galaxy:not(.contrast) .tile.correct{background:radial-gradient(circle at 25% 30%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 55% 20%,rgba(255,255,255,.8) 0 .8px,transparent 1.3px),linear-gradient(135deg,#6d28d9,#1d4ed8)}
body.tiles-galaxy:not(.contrast) .tile.present{background:radial-gradient(circle at 30% 70%,rgba(255,255,255,.85) 0 1px,transparent 1.5px),linear-gradient(135deg,#f59e0b,#db2777)}
#helpers.has-myst #h-dbl .hico{display:none}
#helpers.has-myst #h-myst{flex-basis:42px;max-width:42px}

/* ---- v7.2: sympathy hint ---- */
.sym-offer{position:fixed;left:50%;width:min(92vw,380px);z-index:56;transform:translateX(-50%);padding:14px 14px 12px;border-radius:20px;cursor:pointer;text-align:center;color:#fff;
  background:linear-gradient(135deg,#ec4899,#a855f7 55%,#6366f1);border:2px solid rgba(255,255,255,.55);box-shadow:0 0 30px rgba(236,72,153,.55),0 14px 40px rgba(0,0,0,.45);
  animation:symIn .55s cubic-bezier(.2,1.3,.4,1) both}
.sym-offer.out{animation:symOut .3s ease-in forwards}
@keyframes symIn{0%{opacity:0;transform:translate(-50%,-140%) rotate(-4deg)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes symOut{to{opacity:0;transform:translate(-50%,-140%)}}
.sym-face{font-size:34px;line-height:1;animation:symPeek 1.6s ease-in-out infinite}
@keyframes symPeek{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.08)}}
.sym-text{font-size:17px;font-weight:800;line-height:1.3;margin:6px 4px 10px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.sym-btns{display:flex;gap:8px;justify-content:center}
.sym-btns button{min-height:40px;border-radius:999px;font-weight:800;font-size:14px;padding:0 14px;cursor:pointer}
.sym-yes{background:#fff;color:#9d174d;border:0}
.sym-no{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.8)}
.b-sym{background:linear-gradient(135deg,#db2777,#a855f7 55%,#6366f1);--bglow:rgba(236,72,153,.75)}
.b-big{font-family:"Chalkboard SE","Marker Felt","Comic Sans MS","Comic Neue","Bradley Hand",cursive;font-size:40px;font-weight:700;line-height:1.1;margin:6px 0 2px;
  color:#fff7a8;text-shadow:0 3px 0 rgba(0,0,0,.25);display:inline-block;animation:wobble 1.2s ease-in-out infinite;word-break:break-word}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) scale(1.06)}}
body.contrast .sym-offer,body.contrast .b-sym{background:#7e22ce}
@media (prefers-reduced-motion:reduce){.sym-offer{animation:bannerFade .2s both}.sym-offer.out{animation:bannerFadeOut .2s forwards}.sym-face,.b-big{animation:none}}

/* v7.3 streak reward on the end screen */
.reward-note{margin:8px 2px 0;padding:8px 12px;border-radius:12px;font-size:13.5px;font-weight:700;line-height:1.4;background:linear-gradient(135deg,rgba(249,115,22,.22),rgba(250,204,21,.22));border:1.5px solid rgba(249,115,22,.55)}
.reward-note[hidden]{display:none}
/* ===== v7.4 👑 Royal Icelandic Edition: Iceland flag palette (blue field, red cross with white border) ===== */
body.royal:not(.contrast){--correct:#0a5bb8;--present:#dc1e35;--absent:#2a3550;--bg:#0b1a33}
body.royal{background:linear-gradient(180deg,#0b1f45 0%,#0b1a33 60%,#081428 100%) fixed}
body.royal.royal:not(.contrast) .tile.correct{background:linear-gradient(135deg,#1f73d6,#02529c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
body.royal.royal:not(.contrast) .tile.present{background:linear-gradient(135deg,#ef3349,#b5122a);box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
body.royal.royal:not(.contrast) .tile.absent{background:#2a3550;box-shadow:none}
body.royal .tile:not(.correct):not(.present):not(.absent){border-color:rgba(255,255,255,.28)}
body.royal header{border-bottom:3px solid #dc1e35;box-shadow:0 2px 0 #fff}
body.royal #mode-label{color:#fff}
#royal-clue{flex:none;margin:2px auto 4px;max-width:min(94vw,460px);padding:5px 12px;border-radius:12px;text-align:center;
  background:linear-gradient(90deg,#02529c,#0a5bb8);border:2px solid #fff;box-shadow:0 0 0 2px #dc1e35;color:#fff;line-height:1.25}
#royal-clue[hidden]{display:none}
#royal-clue .rc-is{font-weight:800;font-size:13.5px;font-style:italic}
#royal-clue .rc-en{font-size:11.5px;opacity:.88;margin-top:1px}
.king-win{margin:4px auto 10px;text-align:center}
.king-win img{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;border-radius:12px;border:3px solid #fff;box-shadow:0 0 0 3px #dc1e35,0 8px 22px rgba(0,0,0,.4)}
.king-win .kw-txt{margin-top:8px;font-weight:900;font-size:20px;letter-spacing:.02em;color:#ffd23f;text-shadow:0 2px 0 #02529c}

/* v7.7 voice-comment mute toggle */
#btn-sound .snd-off{display:none} #btn-sound.muted .snd-on{display:none} #btn-sound.muted .snd-off{display:inline}
#btn-sound.muted{opacity:.6}

/* v7.9 "Play more" end-screen button + mode choices */
.sheet h3.play-more,.play-more{display:block;width:max-content;max-width:100%;margin:18px auto 0;text-align:center;font-size:19px;font-weight:800;letter-spacing:0;text-transform:none;background:linear-gradient(135deg,#ff8a3d,#ff3d7f);-webkit-background-clip:text;background-clip:text;color:transparent;animation:moreP 1.2s ease-in-out infinite;will-change:transform}
@keyframes moreP{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.more-opts{display:grid;gap:8px;margin:12px auto 0;max-width:340px}
.more-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid var(--line-strong);border-radius:16px;background:var(--bg);color:var(--fg);padding:10px 14px;cursor:pointer;font:inherit}
.more-opt b{display:block;font-size:16px}.more-opt small{display:block;font-size:13px;opacity:.75}
.more-opt .mo-ic{font-size:24px;line-height:1}
.more-opt:active{transform:scale(.98)}
.more-opt[disabled]{opacity:.5;cursor:default}
@media (prefers-reduced-motion:reduce){.sheet h3.play-more,.play-more{animation:none}}

/* v7.9 royal rules banner */
.banner.b-royal{background:linear-gradient(135deg,#02529c,#dc1e35);color:#fff}

/* v8.0 Hexle Royale wordmark: big HEXLE, small crown line under it (fits 390px header) */
.title{display:flex;flex-direction:column;align-items:center;line-height:1}
.title .title-sub{font-size:10px;letter-spacing:.32em;margin-top:2px;color:#ffd63d;font-weight:800;padding-left:.32em}
@media (max-width:340px){.title{font-size:21px;letter-spacing:.06em}.title .title-sub{font-size:8px;letter-spacing:.24em}}