/* 🎮 Word Drop (worddrop.js): hear a construction number, type its missing digits before it lands.
   Every class starts with wd- so nothing clashes with the rest of the app. The Koala skin uses the app's own tokens
   (theme-bunny.css); the Neon skin (.wd-neon, the default) redefines them on .wd-root.
   Design rule: the play area is dark and plain, never grid-lined. */
.wd-root {
  --wd-hat: #f6bd33; --wd-hat-dk: #e3a414; --wd-slot-next: #fff4d2; --wd-veil: rgba(238, 248, 245, .92);
  --tile-size: 40px; --gap: 4px; --rowh: 48px;
  height: calc(100vh - 92px); min-height: 540px; display: flex; flex-direction: column; gap: 12px;
  color: var(--ink); font-family: "Nunito", "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] .wd-root { --wd-slot-next: #3a3218; --wd-veil: rgba(15, 28, 36, .92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wd-root { --wd-slot-next: #3a3218; --wd-veil: rgba(15, 28, 36, .92); } }
.wd-root button { font: inherit; cursor: pointer; }
.wd-root button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.wd-root [hidden] { display: none !important; }

/* ---------- title ---------- */
.wd-top { display: flex; align-items: center; gap: 12px; }
.wd-top > img { width: 64px; height: 58px; flex: none; }
.wd-top img.happy { animation: wd-hop .45s ease-out; }
.wd-top img.oops { animation: wd-wobble .4s ease-in-out; }
@keyframes wd-hop { 40% { transform: translateY(-7px); } }
@keyframes wd-wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.wd-title { margin: 0; font-weight: 900; font-size: 2.6rem; line-height: 1; letter-spacing: .01em; color: var(--navy); text-transform: uppercase; white-space: nowrap; }
.wd-title::after { display: none; }
.wd-title span { color: var(--accent); }
.wd-top small { display: block; margin-top: 5px; font-size: .85rem; font-weight: 800; color: var(--ink-3); }

/* ---------- sidebar + well ---------- */
.wd-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
.wd-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 2px 2px 4px; }
.wd-score { position: relative; overflow: hidden; border-radius: 20px; padding: 12px 16px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 20px rgba(23, 145, 124, .28); }
.wd-score::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.wd-score .wd-lbl { color: inherit; opacity: .85; }
.wd-score .wd-big { display: block; font-size: 2.6rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wd-score .wd-best { font-size: .8rem; font-weight: 800; opacity: .9; }
.wd-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wd-stat { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 4px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line); }
.wd-stat::before { content: ""; position: absolute; right: -14px; top: -14px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); }
.wd-lbl { position: relative; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); line-height: 1.3; white-space: nowrap; }
.wd-val { position: relative; color: var(--navy); font-weight: 900; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wd-val.hot { color: var(--accent); }
.wd-bump { animation: wd-bump .3s ease-out; }
@keyframes wd-bump { 40% { transform: scale(1.25); } }
.wd-prog { position: relative; width: 70%; height: 5px; margin-top: 3px; border-radius: 99px; background: var(--panel-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.wd-prog i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .3s; }
.wd-combo { position: relative; margin-top: 2px; padding: 0 7px; border-radius: 99px; font-weight: 900; font-size: .7rem; line-height: 1.5; background: var(--wd-hat); color: #3b2a00; }

.wd-listen { display: flex; flex-direction: column; gap: 6px; }
.wd-replay { width: 100%; height: 56px; padding: 0 14px; border-radius: 18px; border: none; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--navy); color: var(--bg); font-weight: 900; font-size: 1.1rem; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.wd-replay svg { width: 26px; height: 26px; flex: none; }
.wd-replay:disabled { opacity: .45; cursor: default; }
.wd-replay:not(:disabled):active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.wd-replay.speaking svg { animation: wd-pulse .6s ease-in-out infinite; }
@keyframes wd-pulse { 50% { transform: scale(1.18); } }
.wd-key { font-size: .7rem; font-weight: 900; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .18); }
.wd-hintline { text-align: center; font-size: .85rem; font-weight: 800; color: var(--ink-2); }
.wd-hintline b { color: var(--accent); }
.wd-last { padding: 7px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-size: .82rem; font-weight: 700; color: var(--ink-2); line-height: 1.3; min-height: 1.3em; }
.wd-last .ok { color: var(--ok); font-weight: 900; }
.wd-last .bad { color: var(--bad); font-weight: 900; }

.wd-powers { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.wd-powers-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 900; font-size: .8rem; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.wd-powers-h span { font-size: .95rem; color: var(--accent); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.wd-buoys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; justify-items: center; }
.wd-buoys svg { width: 28px; height: 28px; transition: opacity .2s, transform .2s; }
.wd-buoys svg.used { opacity: .15; transform: scale(.75); filter: grayscale(1); }
.wd-pw-list { display: flex; flex-direction: column; gap: 6px; }
.wd-pw { height: 40px; padding: 0 10px; border-radius: 13px; min-width: 0; display: flex; align-items: center; gap: 9px; background: var(--panel-2); border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--navy); font-weight: 800; font-size: .88rem; white-space: nowrap; text-align: left; }
.wd-pw .wd-k { flex: none; width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; background: var(--navy); color: var(--bg); font-size: .78rem; font-weight: 900; }
.wd-pw span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wd-pw:disabled { opacity: .4; cursor: default; }
.wd-pw:not(:disabled):active, .wd-pw.hit { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.wd-pw.on { border-color: var(--accent); background: var(--accent-soft); }
.wd-ctrls { display: flex; justify-content: center; gap: 8px; }
.wd-ibtn { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--navy); box-shadow: var(--shadow); }
.wd-ibtn:disabled { opacity: .45; cursor: default; }
.wd-ibtn svg { width: 19px; height: 19px; }
.wd-ibtn.off { opacity: .55; }

/* ---------- well ---------- */
.wd-stage { min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.wd-frame { position: relative; box-sizing: border-box; max-width: 100%; padding: 38px 10px 10px; border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line); }
.wd-frame.hit { animation: wd-frame-hit .3s ease-out; }
@keyframes wd-frame-hit { 30% { box-shadow: 0 0 0 3px var(--bad); } }
.wd-chip { position: absolute; top: 9px; left: 14px; font-size: .7rem; font-weight: 800; padding: 1px 8px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); }
.wd-vi { position: absolute; top: 7px; right: 10px; max-width: 55%; display: flex; align-items: baseline; gap: 6px; padding: 2px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--navy); font-size: .82rem; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-vi small { font-size: .62rem; font-weight: 900; letter-spacing: .08em; color: var(--accent); }
.wd-vi.pop { animation: wd-pop .3s ease-out; }
@keyframes wd-pop { from { transform: scale(.85); } }
.wd-well { position: relative; overflow: hidden; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, #26436f, #152a4b 72%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 40px rgba(0, 0, 0, .25); }
.wd-well.slow { box-shadow: inset 0 0 0 3px #5aa9ff, inset 0 0 40px rgba(90, 169, 255, .25); }
.wd-deadline { position: absolute; left: 0; right: 0; top: var(--rowh); border-top: 2px dashed #ff8a80; opacity: .55; pointer-events: none; }
.wd-deadline span { position: absolute; right: 8px; top: 2px; font-size: .66rem; font-weight: 900; letter-spacing: .06em; color: #ff8a80; }
.wd-well.danger .wd-deadline { opacity: 1; animation: wd-blink .8s steps(2) infinite; }
.wd-falling, .wd-row { position: absolute; left: 0; right: 0; top: 0; height: var(--rowh); display: flex; justify-content: center; align-items: center; }
.wd-falling { z-index: 2; will-change: transform; }
.wd-row { z-index: 1; }
.wd-word { display: flex; gap: var(--gap); align-items: center; }
.wd-sp { width: calc(var(--tile-size) * .3); flex: none; }

/* tiles */
.wd-t { position: relative; box-sizing: border-box; flex: none; width: var(--tile-size); height: var(--tile-size); display: grid; place-items: center; border-radius: calc(var(--tile-size) * .26); font-weight: 900; font-size: calc(var(--tile-size) * .56); line-height: 1; font-variant-numeric: tabular-nums; color: #1f3a68; background: #ffffff; border: 2.5px solid #1f3a68; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.wd-t.let { background: #daf4ee; border-color: #17917c; }
.wd-t.sym { width: calc(var(--tile-size) * .7); background: transparent; border-color: transparent; box-shadow: none; color: #cfe0f5; }
.wd-t.slot { background: rgba(218, 244, 238, .15); border: 2.5px dashed #3fc2aa; box-shadow: none; }
.wd-t.slot.next { border: 3px solid var(--wd-hat-dk); background: #fff4d2; box-shadow: 0 0 0 4px rgba(246, 189, 51, .28); animation: wd-glow 1.1s ease-in-out infinite; }
.wd-t.slot.next::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 17%; height: 3px; border-radius: 2px; background: var(--wd-hat-dk); animation: wd-blink 1s steps(2) infinite; }
.wd-t.ok { color: #fff; background: #1e8f6a; border-color: #1e8f6a; animation: wd-fill .22s ease-out; }
.wd-t.bad { color: #fff; background: #d4483b; border-color: #d4483b; }
.wd-row .wd-t.ok { animation: none; }
.wd-row .wd-t:not(.ok):not(.bad):not(.sym) { color: #9fb4d6; background: #2b4574; border-color: #0f1d38; box-shadow: none; }
.wd-word.wrong .wd-t.slot.next { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 0 0 4px rgba(212, 72, 59, .2); }
.wd-word.wrong .wd-t.slot.next::after { background: var(--bad); }
@keyframes wd-fill { from { transform: scale(1.3); } }
@keyframes wd-glow { 50% { box-shadow: 0 0 0 7px rgba(246, 189, 51, .12); } }
@keyframes wd-blink { 50% { opacity: .15; } }
.wd-shake { animation: wd-shake .32s ease-in-out; }
@keyframes wd-shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.wd-row.land .wd-word { animation: wd-thud .3s ease-out; }
@keyframes wd-thud { 0% { transform: translateY(-8px); } 60% { transform: translateY(2px) scaleY(.94); } 100% { transform: none; } }

/* effects */
.wd-fx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wd-ghost { position: absolute; left: 0; right: 0; height: var(--rowh); display: flex; justify-content: center; align-items: center; animation: wd-vanish .5s ease-out forwards; }
@keyframes wd-vanish { to { opacity: 0; transform: scale(1.15); } }
.wd-ghost.sweep { animation: wd-sweep .6s ease-in forwards; }
@keyframes wd-sweep { to { opacity: 0; transform: translateX(70px); } }
.wd-spark { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: wd-spark .7s ease-out forwards; }
@keyframes wd-spark { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
.wd-popup { position: absolute; left: 0; right: 0; text-align: center; font-weight: 900; font-size: 1.5rem; color: #3fc2aa; animation: wd-rise .9s ease-out forwards; }
.wd-popup small { font-size: .8rem; font-weight: 800; color: #cfe0f5; }
@keyframes wd-rise { to { transform: translateY(-46px); opacity: 0; } }
.wd-toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: max-content; max-width: 86%; box-sizing: border-box; text-align: center; padding: 10px 20px; border-radius: 22px; background: var(--wd-hat); color: #2a1d00; font-weight: 900; font-size: 1.1rem; line-height: 1.2; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); animation: wd-toast 1.6s ease-out forwards; }
.wd-toast small { display: block; font-size: .8rem; font-weight: 700; opacity: .85; }
@keyframes wd-toast { 0% { opacity: 0; transform: translateX(-50%) scale(.9); } 12%, 75% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }

/* overlays (start / countdown / pause / win / lose) */
.wd-ov { position: absolute; inset: 0; z-index: 5; display: flex; overflow: auto; padding: 14px; box-sizing: border-box; background: var(--wd-veil); }
.wd-card { margin: auto; width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.wd-card > img { width: 84px; height: 76px; animation: wd-bob 3.2s ease-in-out infinite; }
@keyframes wd-bob { 50% { transform: translateY(-4px); } }
.wd-card h2 { margin: 0; color: var(--navy); font-weight: 900; font-size: 1.6rem; line-height: 1.1; text-wrap: balance; }
.wd-card h2::before { display: none; }
.wd-card h2 + p { margin: -6px 0 0; color: var(--ink-2); font-weight: 700; font-size: .9rem; }
.wd-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.wd-mode { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px 8px; border-radius: 16px; text-align: center; background: var(--panel); border: 2px solid var(--line); color: var(--ink); }
.wd-mode b { font-weight: 900; font-size: .95rem; color: var(--navy); }
.wd-mode span { font-size: .72rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.wd-mode em { font-style: normal; font-size: .7rem; font-weight: 800; color: var(--ink-3); margin-top: 2px; }
.wd-dots { display: flex; gap: 3px; }
.wd-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wd-dots i.on { background: var(--wd-hat); box-shadow: inset 0 0 0 1.5px var(--wd-hat-dk); }
.wd-mode[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 6px 14px rgba(47, 179, 156, .22); }
.wd-opt { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: .8rem; font-weight: 800; color: var(--ink-2); }
.wd-seg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 3px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.wd-seg button { border: none; background: transparent; color: var(--ink-2); font-weight: 800; font-size: .8rem; padding: 5px 12px; border-radius: 999px; }
.wd-seg button[aria-pressed="true"] { background: var(--navy); color: var(--bg); }
.wd-btn { border: none; border-radius: 999px; padding: 11px 28px; font-weight: 800; font-size: 1rem; color: var(--accent-ink); background: var(--accent); box-shadow: 0 6px 14px rgba(47, 179, 156, .3); display: inline-flex; align-items: center; gap: 8px; }
.wd-btn:hover { filter: brightness(1.05); }
.wd-btn:active { transform: translateY(1px); }
.wd-btn.ghost { background: transparent; color: var(--accent); box-shadow: none; padding: 6px 14px; font-size: .9rem; }
.wd-btn .wd-key { background: rgba(0, 0, 0, .12); }
.wd-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wd-muted { color: var(--ink-3); font-size: .8rem; font-weight: 700; margin: 0; line-height: 1.6; }
.wd-howto { width: 100%; text-align: left; }
.wd-howto summary { cursor: pointer; font-size: .82rem; font-weight: 800; color: var(--accent); text-align: center; list-style: none; }
.wd-howto summary::-webkit-details-marker { display: none; }
.wd-howto[open] summary { margin-bottom: 8px; }
.wd-rules { margin: 0; padding: 10px 14px 10px 30px; text-align: left; display: grid; gap: 4px; font-size: .84rem; font-weight: 600; line-height: 1.35; color: var(--ink); background: var(--panel); border-radius: 16px; border: 1px solid var(--line); }
.wd-rules li::marker { color: var(--accent); }
.wd-kk { display: inline-block; font-size: .72rem; font-weight: 900; padding: 0 6px; border-radius: 6px; color: var(--navy); background: var(--panel-2); border: 1.5px solid var(--line); }
.wd-count { margin: auto; font-weight: 900; font-size: 5.5rem; color: var(--navy); animation: wd-count .6s ease-out; }
.wd-count.go { font-size: 2.8rem; color: var(--accent); }
@keyframes wd-count { from { transform: scale(1.6); opacity: 0; } 40% { opacity: 1; } }
.wd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.wd-new { font-size: .8rem; font-weight: 800; color: #3b2a00; background: var(--wd-hat); border-radius: 999px; padding: 2px 12px; }
.wd-say { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; }
.wd-say img { width: 70px; height: 64px; flex: none; }
.wd-say p { position: relative; margin: 0; flex: 1; padding: 10px 14px; border-radius: 16px; background: var(--panel); border: 2px solid var(--accent); color: var(--navy); font-weight: 900; font-size: 1rem; line-height: 1.3; }
.wd-say p::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: inherit; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.wd-say.lose p, .wd-say.lose p::before { border-color: var(--bad); }
.wd-say.talking img { animation: wd-talk .35s ease-in-out infinite; }
@keyframes wd-talk { 50% { transform: translateY(-3px) rotate(-3deg); } }
.wd-review-h { margin: 2px 0 0; align-self: flex-start; color: var(--navy); font-weight: 900; font-size: 1rem; }
.wd-review { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 6px; text-align: left; }
.wd-review li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 7px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--bad); }
.wd-review li.none { box-shadow: none; }
.wd-review .w { font-weight: 900; font-size: 1rem; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd-review .s { font-size: .85rem; font-weight: 700; color: var(--ink-2); line-height: 1.25; }
.wd-review .c { grid-column: 1 / -1; font-size: .72rem; font-weight: 800; color: var(--accent); }
.wd-review .say { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.wd-review .say svg { width: 15px; height: 15px; }

/* on-screen keypad (touch / narrow) */
.wd-kbd { display: none; flex-direction: column; gap: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.wd-kbd-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wd-kbd button { height: 46px; padding: 0; border-radius: 14px; font-weight: 900; font-size: 1.3rem; color: var(--navy); background: var(--panel); border: 1.5px solid var(--line); box-shadow: 0 3px 0 var(--line); touch-action: manipulation; }
.wd-kbd button.hit { transform: translateY(2px); background: var(--accent-soft); box-shadow: 0 1px 0 var(--line); }
@media (pointer: coarse), (max-width: 640px) { .wd-kbd { display: flex; } }

@media (max-width: 760px) {
  .wd-root { height: calc(100vh - 70px); min-height: 0; gap: 8px; }
  .wd-top > img { width: 40px; height: 36px; }
  .wd-title { font-size: 1.5rem; }
  .wd-top small { font-size: .72rem; margin-top: 2px; }
  .wd-main { display: flex; flex-direction: column; gap: 8px; }
  .wd-side { display: contents; }
  .wd-sb-stats { order: 1; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 6px; }
  .wd-mini { display: contents; }
  .wd-score { padding: 4px 10px; border-radius: 14px; display: flex; flex-direction: column; justify-content: center; }
  .wd-score .wd-big { font-size: 1.4rem; }
  .wd-score .wd-best, .wd-prog { display: none; }
  .wd-stat { padding: 4px 2px; border-radius: 14px; }
  .wd-val { font-size: 1.2rem; }
  .wd-listen { order: 2; flex-direction: row; align-items: center; }
  .wd-replay { width: auto; height: 42px; flex: none; font-size: .95rem; padding: 0 14px; border-radius: 14px; }
  .wd-replay .wd-key, .wd-hintline { display: none; }
  .wd-last { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; }
  .wd-stage { order: 3; flex: 1; min-height: 0; }
  .wd-powers { order: 4; flex-direction: row; align-items: center; padding: 6px; gap: 6px; }
  .wd-powers-h span { font-size: .85rem; }
  .wd-buoys { display: none; }
  .wd-pw-list { flex: 1; flex-direction: row; min-width: 0; }
  .wd-pw { flex: 1; height: 38px; font-size: .78rem; gap: 5px; padding: 0 6px; justify-content: center; }
  .wd-ctrls { order: 5; }
  .wd-frame { padding: 34px 7px 7px; border-radius: 18px; }
}
@media (max-width: 420px) { .wd-pw span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .wd-root *, .wd-root *::before, .wd-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ================= Neon skin (the default; .wd-neon on .wd-root, kept in localStorage ep-drop-skin) =================
   Option D's glow in the app's colours: teal + hard-hat yellow on deep navy. Titles in Orbitron, digits in Exo 2
   (Orbitron draws 0 with a slash, which looks like the Ø diameter sign). Fonts are loaded by games.css. */
.wd-root.wd-neon {
  --bg: #07121c; --panel: #0c1b28; --panel-2: #0a1722; --line: #1c3a4a;
  --ink: #e6f6f4; --ink-2: #9fc3c6; --ink-3: #5f8590; --navy: #e6f6f4;
  --accent: #45e0c4; --accent-2: #2fb39c; --accent-ink: #03201b; --accent-soft: #0f2e33;
  --ok: #5fe3a8; --ok-soft: #0f2e22; --warn: #f6bd33; --warn-soft: #2e2510; --bad: #ff7a6e; --bad-soft: #36161a;
  --shadow: none; --wd-slot-next: #1d1a0e; --wd-veil: rgba(5, 12, 20, .9);
  --glow-t: rgba(69, 224, 196, .5); --glow-y: rgba(246, 189, 51, .6);
  color-scheme: dark; color: var(--ink);
  margin: -32px -40px -60px; padding: 24px 32px 20px; height: 100vh; box-sizing: border-box;
  background: radial-gradient(70% 50% at 85% 0%, rgba(69, 224, 196, .1), transparent 60%), var(--bg);
}
@media (max-width: 760px) { .wd-root.wd-neon { margin: -18px -16px -48px; padding: 12px 16px; height: 100vh; } }
.wd-neon .wd-title { font-family: "Orbitron", "Nunito", sans-serif; font-weight: 800; color: #e6f6f4; text-shadow: 0 0 14px var(--glow-t); letter-spacing: .04em; }
.wd-neon .wd-title span { color: var(--wd-hat); text-shadow: 0 0 14px var(--glow-y); }
.wd-neon .wd-val, .wd-neon .wd-big, .wd-neon .wd-t, .wd-neon .wd-count, .wd-neon .wd-popup, .wd-neon .wd-kbd button, .wd-neon .wd-powers-h span, .wd-neon .wd-review .w { font-family: "Exo 2", "Nunito", sans-serif; font-weight: 800; }
.wd-neon .wd-score { background: rgba(69, 224, 196, .05); color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 0 16px var(--glow-t), inset 0 0 14px rgba(69, 224, 196, .15); }
.wd-neon .wd-score::after, .wd-neon .wd-stat::before { display: none; }
.wd-neon .wd-big { text-shadow: 0 0 12px var(--glow-t); }
.wd-neon .wd-stat { background: rgba(255, 255, 255, .02); border: 1.5px solid rgba(246, 189, 51, .5); box-shadow: 0 0 10px rgba(246, 189, 51, .12); }
.wd-neon .wd-val { color: var(--wd-hat); text-shadow: 0 0 10px var(--glow-y); }
.wd-neon .wd-replay { background: rgba(246, 189, 51, .06); color: var(--wd-hat); border: 2px solid var(--wd-hat); box-shadow: 0 0 16px var(--glow-y), inset 0 0 10px rgba(246, 189, 51, .12); }
.wd-neon .wd-replay .wd-key { background: rgba(246, 189, 51, .15); }
.wd-neon .wd-last, .wd-neon .wd-powers { background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.wd-neon .wd-pw { background: transparent; border: 1.5px solid var(--line); box-shadow: none; color: var(--ink); }
.wd-neon .wd-pw .wd-k { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 8px var(--glow-t); }
.wd-neon .wd-pw.on { border-color: var(--accent); box-shadow: 0 0 12px var(--glow-t); }
.wd-neon .wd-ibtn { background: transparent; border: 1.5px solid var(--line); color: var(--accent); }
.wd-neon .wd-frame { background: #081520; border: 1.5px solid #12303f; box-shadow: 0 0 24px rgba(69, 224, 196, .08); }
.wd-neon .wd-well { background: radial-gradient(ellipse at 50% 0%, #0d2233, #040b12 75%); box-shadow: inset 0 0 0 1.5px #12303f; }
.wd-neon .wd-deadline { border-top: 2px solid var(--bad); box-shadow: 0 0 10px var(--bad); opacity: .85; }
.wd-neon .wd-deadline span { color: var(--bad); text-shadow: 0 0 8px var(--bad); }
.wd-neon .wd-vi { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); box-shadow: 0 0 10px rgba(69, 224, 196, .25); }
.wd-neon .wd-vi small { color: var(--wd-hat); }
.wd-neon .wd-chip { background: transparent; border: 1.5px solid var(--wd-hat); color: var(--wd-hat); }
.wd-neon .wd-t { color: #c9fff4; background: rgba(69, 224, 196, .07); border: 2px solid var(--accent); box-shadow: 0 0 12px rgba(69, 224, 196, .45), inset 0 0 10px rgba(69, 224, 196, .18); text-shadow: 0 0 8px rgba(69, 224, 196, .9); font-size: calc(var(--tile-size) * .6); }
.wd-neon .wd-t.let { color: #ffffff; border-color: #9cc3f5; background: rgba(156, 195, 245, .06); box-shadow: 0 0 10px rgba(156, 195, 245, .4), inset 0 0 8px rgba(156, 195, 245, .15); text-shadow: 0 0 6px rgba(156, 195, 245, .8); }
.wd-neon .wd-t.sym { color: var(--ink-2); background: none; border-color: transparent; box-shadow: none; text-shadow: none; }
.wd-neon .wd-t.slot { background: transparent; border: 2px dashed rgba(246, 189, 51, .55); box-shadow: none; }
.wd-neon .wd-t.slot.next { background: rgba(246, 189, 51, .1); border: 2.5px solid var(--wd-hat); box-shadow: 0 0 18px rgba(246, 189, 51, .75), inset 0 0 10px rgba(246, 189, 51, .3); }
.wd-neon .wd-word.wrong .wd-t.slot.next { border-color: var(--bad); background: rgba(255, 122, 110, .12); box-shadow: 0 0 18px rgba(255, 122, 110, .75); }
.wd-neon .wd-t.ok { color: #d6ffe9; background: rgba(95, 227, 168, .12); border-color: var(--ok); box-shadow: 0 0 14px rgba(95, 227, 168, .6); text-shadow: 0 0 8px var(--ok); }
.wd-neon .wd-t.bad { color: #ffe0dc; background: rgba(255, 122, 110, .14); border-color: var(--bad); box-shadow: 0 0 14px rgba(255, 122, 110, .6); text-shadow: 0 0 8px var(--bad); }
.wd-neon .wd-row .wd-t:not(.ok):not(.bad):not(.sym) { color: #4f7380; background: rgba(255, 255, 255, .02); border-color: #173341; box-shadow: none; text-shadow: none; }
.wd-neon .wd-btn { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 18px var(--glow-t); }
.wd-neon .wd-btn.ghost { background: transparent; color: var(--accent); box-shadow: none; }
.wd-neon .wd-toast { background: rgba(5, 12, 20, .92); color: var(--wd-hat); border: 1.5px solid var(--wd-hat); box-shadow: 0 0 18px var(--glow-y); }
.wd-neon .wd-popup { color: var(--accent); text-shadow: 0 0 10px var(--glow-t); }
.wd-neon .wd-popup small { color: var(--wd-hat); }
.wd-neon .wd-combo { box-shadow: 0 0 10px var(--glow-y); }
.wd-neon .wd-mode { background: transparent; }
.wd-neon .wd-mode[aria-pressed="true"] { border-color: var(--accent); background: rgba(69, 224, 196, .08); box-shadow: 0 0 14px var(--glow-t); }
.wd-neon .wd-kbd button { background: transparent; border: 1.5px solid var(--line); box-shadow: none; color: var(--accent); text-shadow: 0 0 8px var(--glow-t); }
.wd-neon .wd-kbd button.hit { background: rgba(69, 224, 196, .12); }
.wd-neon .wd-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.wd-neon .wd-count { color: var(--accent); text-shadow: 0 0 18px var(--glow-t); }
.wd-neon .wd-count.go { color: var(--wd-hat); text-shadow: 0 0 18px var(--glow-y); }
.wd-neon .wd-rules, .wd-neon .wd-review li, .wd-neon .wd-say p { background: rgba(255, 255, 255, .03); }
.wd-neon .wd-say p { box-shadow: 0 0 12px var(--glow-t); }
.wd-neon .wd-say.lose p { box-shadow: 0 0 12px rgba(255, 122, 110, .5); }
.wd-neon .wd-kk { background: transparent; color: var(--accent); border-color: var(--line); }
/* titles shelf (games.css .kb-tt-*) inside the start card: 2 × 2, compact */
.wd-titles .kb-tt-shelf { margin: 0; }
.wd-titles .kb-tt-head { justify-content: center; }
.wd-titles .kb-tt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wd-titles .kb-tt-item { padding: 4px 8px 4px 4px; }
.wd-titles .kb-tt-item svg { width: 32px; height: 32px; }
.wd-titles .kb-tt-item b { font-size: .8rem; }
.wd-titles .kb-tt-item small { font-size: .66rem; }