:root { --accent: #0f766e; --on-accent: #ffffff; }
        [data-theme="dark"] { --accent: #5eead4; --on-accent: #06302b; }
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--fg); }

        .wc-main { max-width: 460px; margin: 0 auto; padding: 6px clamp(8px,2vw,14px) 80px; }

        /* HUD */
        .wc-hud { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 3px; gap: 8px; }
        .hud-level { font-size: .72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
        .hud-score-wrap { text-align: center; flex: 1; }
        .hud-goal { font-size: .7rem; color: var(--fg-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
        .hud-timer { text-align: right; white-space: nowrap; }
        .hud-timer-num { font-size: 1.5rem; font-weight: 900; color: var(--fg); line-height: 1; display: block; }
        .hud-timer-num.low { color: var(--tone-crimson-fg); animation: timer-pulse 1s ease infinite; }
        .hud-timer-label { font-size: .7rem; color: var(--fg-muted); display: block; }

        /* ── Frozen state (secret-word reward): clock pauses, a separate frozen
              clock counts down, and the board takes on an icy palette. ── */
        :root { --ice-fg: #38bdf8; --ice-bg: #e0f2fe; --ice-deep: #0ea5e9; }
        .hud-frozen { text-align: right; white-space: nowrap; }
        .hud-frozen[hidden] { display: none; }
        .hud-frozen-num { font-size: 1.5rem; font-weight: 900; color: var(--ice-deep); line-height: 1; display: block; animation: timer-pulse 1s ease infinite; }
        .hud-frozen-label { font-size: .7rem; color: var(--ice-fg); display: block; letter-spacing: .03em; }
        /* While frozen, dim the paused main clock and tint the board icy. */
        body.frozen .hud-timer-num { color: var(--ice-fg); opacity: .5; animation: none; }
        body.frozen .hud-timer-num.low { color: var(--ice-fg); }
        body.frozen .wc-grid {
            background: color-mix(in srgb, var(--ice-deep) 14%, var(--bg-elev));
            border-color: var(--ice-fg);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--ice-fg) 45%, transparent), var(--shadow-md);
            transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        body.frozen .wc-tile.tc-normal { border-color: color-mix(in srgb, var(--ice-fg) 55%, var(--border-strong)); }
        .wc-frozen-banner { color: var(--ice-deep); font-weight: 700; }

        @keyframes timer-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

        .wc-prog-track { height: 5px; background: var(--border); border-radius: 999px; margin: 2px 0 7px; overflow: hidden; }
        .wc-prog-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s cubic-bezier(.4,0,.2,1); min-width: 2px; }

        /* Theme tag */
        .wc-theme-tag { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .92rem; line-height: 1.32; color: var(--fg); padding: 8px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 5px; }
        .wc-theme-tag[hidden] { display: none; }
        .wc-theme-tag strong { color: var(--accent); font-weight: 800; font-size: 1.04em; }
        .wc-theme-tag em { color: var(--fg-muted); font-size: .85em; }
        /* Rare "off-theme today" flag: a distinct amber badge (not grey inline text) so the
           player clearly sees the secret isn't on today's theme. */
        .wc-theme-tag .wc-offtheme { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; font-size: .78em; font-weight: 700; letter-spacing: .02em; background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
        .wc-hint-btn { font-size: .72rem; font-weight: 700; color: var(--fg-muted); cursor: pointer; padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); transition: color .15s, border-color .15s; white-space: nowrap; flex-shrink: 0; }
        .wc-hint-btn:hover { color: var(--accent); border-color: var(--accent); }

        /* Combo strip */
        .wc-combo-strip { text-align: center; font-size: 1.05rem; font-weight: 900; color: var(--accent); min-height: 1.4rem; margin-bottom: 3px; opacity: 0; transition: opacity .3s; }
        .wc-combo-strip.visible { opacity: 1; }

        /* Grid wrapper */
        .wc-grid-wrap { position: relative; touch-action: none; user-select: none; }
        .wc-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 3px;
            padding: 5px;
            max-width: 420px;
            /* On short screens, cap the board by available height so 7 rows + the
               word tray never get pushed off-screen (tiles shrink instead of the
               page scrolling). Tall phones keep the full 420px. svh accounts for
               mobile browser chrome; older browsers fall back to the line above.
               Ratio is COLS/ROWS = 5/7 (columns unchanged, one extra row). */
            max-width: min(420px, calc((100svh - 355px) * 5 / 7));
            margin: 0 auto;
            width: 100%;
            background: var(--bg-elev);
            border: 1px solid var(--border);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
        }

        /* SVG path overlay */
        #pathSvg { position: absolute; inset: 5px; pointer-events: none; z-index: 10; overflow: visible; }

        /* Tiles */
        .wc-tile {
            aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
            border-radius: 8px; font-weight: 900; font-size: clamp(15px,4.3vw,24px);
            cursor: pointer; position: relative; border: 2px solid var(--border);
            transition: transform .1s, border-color .1s, box-shadow .1s;
            will-change: transform; line-height: 1;
        }
        /* Two-letter tiles (the Qu tile) need a slightly smaller glyph to fit. */
        .wc-tile.tile-multi { font-size: clamp(15px,4.2vw,23px); letter-spacing: -.02em; }
        /* Plain tiles are neutral; colour is reserved for special (power-up) tiles. */
        .wc-tile.tc-normal  { background: var(--bg);  color: var(--fg); border-color: var(--border-strong); }
        .wc-tile.tc-bonus   { background: var(--bg);  color: var(--fg); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
        .wc-tile.tp-bomb    { background: var(--tone-crimson-bg); color: var(--tone-crimson-fg); border-color: var(--tone-crimson-fg); box-shadow: 0 0 0 1px var(--tone-crimson-fg); }
        .wc-tile.tp-line    { background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); border-color: var(--tone-cyan-fg); box-shadow: 0 0 0 1px var(--tone-cyan-fg); }
        .wc-tile.tp-lightning { background: var(--tone-gold-bg); color: var(--tone-gold-fg); border-color: var(--tone-gold-fg); box-shadow: 0 0 0 2px var(--tone-gold-fg); animation: lightning-pulse 1.4s ease-in-out infinite; }
        @keyframes lightning-pulse { 0%,100%{box-shadow:0 0 0 2px var(--tone-gold-fg)} 50%{box-shadow:0 0 9px 3px color-mix(in srgb,var(--tone-gold-fg) 70%,#fff)} }
        .wc-tile.tp-wild    { background: var(--tone-violet-bg); color: var(--tone-violet-fg); border-color: var(--tone-violet-fg); box-shadow: 0 0 0 1px var(--tone-violet-fg); }
        .wc-tile.tp-locked  { border-style: dashed; border-width: 3px; border-color: var(--tone-cyan-fg); background: color-mix(in srgb, var(--tone-cyan-bg) 85%, #fff); color: color-mix(in srgb, var(--tone-cyan-fg) 55%, transparent); cursor: default; }
        .wc-tile.tp-locked.ice-cracked { border-style: solid; border-width: 2px; background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone-cyan-fg) 50%, transparent); }
        .wc-tile.tp-stone   { background: var(--border); color: var(--fg-muted); border-color: var(--border-strong); cursor: default; }
        .wc-tile.tp-stone1  { background: var(--bg-elev); color: var(--fg-subtle); border-color: var(--border-strong); cursor: default; }
        .wc-tile.selected   { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent) !important; transform: scale(1.08); z-index: 5; }
        .wc-tile.hint-glow  { animation: hint-glow 2s ease-in-out 1; }
        .tile-icon { font-size: 8px; line-height: 1; position: absolute; bottom: 1px; right: 2px; opacity: .9; }

        /* One slow, steady glow (no rapid repeat, no transform) so revealed hint tiles
           read as "look here", not a jitter. Matches the 2000ms JS removal in useHint(). */
        @keyframes hint-glow { 0%,100%{box-shadow:0 0 0 0 transparent} 30%,70%{box-shadow:0 0 12px 4px var(--accent)} }
        @keyframes tile-remove { 0%{transform:scale(1);opacity:1} 30%{transform:scale(1.2);opacity:1} 100%{transform:scale(0);opacity:0} }
        @keyframes tile-fall-in { from{transform:translateY(-110%) scale(.85);opacity:0} to{transform:translateY(0) scale(1);opacity:1} }
        @keyframes tile-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
        @keyframes score-fly { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-50px) scale(1.3)} }
        .anim-remove { animation: tile-remove .3s ease-in forwards; pointer-events: none; }
        .anim-fall-in { animation: tile-fall-in .28s ease-out; }

        /* ── Bonus effect animations (every effect fires visibly) ── */
        @keyframes fx-line  { 0%{filter:brightness(2.2)} 100%{transform:scaleY(.15) scaleX(1.1);opacity:0} }
        @keyframes fx-burst { 0%{transform:scale(1)} 35%{transform:scale(1.35);filter:brightness(2)} 100%{transform:scale(0);opacity:0} }
        @keyframes fx-zap   { 0%,100%{filter:brightness(1)} 25%{filter:brightness(3)} 50%{filter:brightness(1.6) drop-shadow(0 0 7px var(--tone-gold-fg))} 75%{filter:brightness(3)} }
        .fx-line  { animation: fx-line .34s ease-in forwards; pointer-events: none; z-index: 6; }
        .fx-burst { animation: fx-burst .36s ease-in forwards; pointer-events: none; z-index: 6; }
        .fx-zap   { animation: fx-zap .34s ease forwards; pointer-events: none; z-index: 6; }
        /* Overlay flourishes appended to the grid wrap */
        .fx-beam  { position: absolute; z-index: 14; pointer-events: none; height: 6px; border-radius: 3px;
                    background: linear-gradient(90deg, transparent, color-mix(in srgb,var(--tone-cyan-fg) 85%,#fff), transparent);
                    transform-origin: center; animation: fx-beam-fade .4s ease-out forwards; }
        @keyframes fx-beam-fade { 0%{opacity:0;filter:brightness(2)} 25%{opacity:1} 100%{opacity:0} }
        /* Bomb explosion: flash core + shockwave ring + flung sparks */
        .fx-boom-core, .fx-boom-shock, .fx-spark { position: absolute; z-index: 15; pointer-events: none; }
        .fx-boom-core  { border-radius: 50%; animation: fx-boom-core .5s ease-out forwards;
                         background: radial-gradient(circle, #fff 0%, var(--tone-gold-fg) 42%, var(--tone-crimson-fg) 70%, transparent 74%); }
        @keyframes fx-boom-core { 0%{transform:scale(.25);opacity:1} 55%{opacity:1} 100%{transform:scale(1.25);opacity:0} }
        .fx-boom-shock { border-radius: 50%; border: 3px solid var(--tone-gold-fg); animation: fx-boom-shock .55s ease-out forwards;
                         box-shadow: 0 0 12px 2px color-mix(in srgb,var(--tone-crimson-fg) 70%,#fff); }
        @keyframes fx-boom-shock { 0%{transform:scale(.3);opacity:.95} 100%{transform:scale(1.45);opacity:0} }
        .fx-spark { width: 8px; height: 8px; border-radius: 50%; background: var(--tone-gold-fg);
                    box-shadow: 0 0 6px var(--tone-crimson-fg); animation: fx-spark-fly .52s ease-out forwards; }
        @keyframes fx-spark-fly { 0%{transform:translate(0,0) scale(1.1);opacity:1} 100%{transform:translate(var(--tx),var(--ty)) scale(.2);opacity:0} }

        /* Score popup */
        .score-popup { position: absolute; font-weight: 900; font-size: .95rem; color: var(--accent); pointer-events: none; animation: score-fly .9s ease-out forwards; z-index: 20; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
        .score-popup.themed { color: var(--tone-gold-fg); font-size: 1.1rem; }

        /* Word tray */
        .wc-tray-wrap { margin: 7px 0; }
        .wc-word-tray {
            min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; background: var(--bg-elev); border: 2px solid var(--border);
            border-radius: var(--radius-sm); padding: 8px 10px;
            transition: border-color .15s, background .15s;
        }
        .wc-word-tray.valid { border-color: var(--tone-grass-fg); background: color-mix(in srgb,var(--tone-grass-bg) 40%,var(--bg-elev)); }
        .wc-word-tray.invalid { animation: tile-shake .3s ease; border-color: var(--tone-crimson-fg); }
        .tray-letters { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 34px; align-items: center; }
        .tray-letter {
            width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
            font-weight: 900; font-size: 1rem; background: var(--bg); border: 1px solid var(--border);
            transition: background .1s, border-color .1s, color .1s;
        }
        .tray-letter.tl-valid { background: var(--tone-grass-bg); border-color: var(--tone-grass-fg); color: var(--tone-grass-fg); }
        .tray-letter.tl-wild  { background: var(--tone-violet-bg); border-color: var(--tone-violet-fg); color: var(--tone-violet-fg); }
        .tray-hint { font-size: .72rem; color: var(--fg-subtle); font-weight: 500; }
        .tray-score { font-size: .8rem; font-weight: 800; color: var(--tone-grass-fg); }
        .tray-score.themed { color: var(--tone-gold-fg); }

        /* Toast */
        .wc-toast { position: fixed; bottom: 68px; left: 50%; transform: translateX(-50%); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 14px; box-shadow: var(--shadow-lg); z-index: 60; text-align: center; min-width: 180px; max-width: 320px; pointer-events: none; transition: opacity .25s, transform .25s; }
        .wc-toast.hidden { opacity: 0; transform: translateX(-50%) translateY(8px); pointer-events: none; }
        .toast-word  { display: block; font-size: 1.2rem; font-weight: 900; color: var(--accent); letter-spacing: .06em; }
        .toast-def   { display: block; font-size: .72rem; color: var(--fg-muted); line-height: 1.4; margin: 2px 0 3px; }
        .toast-score { display: block; font-size: .95rem; font-weight: 800; color: var(--fg); }
        .toast-score.themed { color: var(--tone-gold-fg); }

        /* Level-start banner */
        .wc-level-banner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); background: var(--bg-elev); border: 2px solid var(--accent); border-radius: var(--radius-lg); padding: 18px 28px; box-shadow: var(--shadow-lg); z-index: 70; text-align: center; min-width: 240px; max-width: 320px; pointer-events: none; transition: opacity .35s, transform .35s; }
        .wc-level-banner.hidden { opacity: 0; transform: translate(-50%, -50%) scale(.88); }
        .banner-level { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
        .banner-name  { font-size: 1.4rem; font-weight: 900; color: var(--fg); letter-spacing: -.02em; margin-bottom: 6px; }
        .banner-theme { font-size: .9rem; font-weight: 700; color: var(--tone-gold-fg); background: var(--tone-gold-bg); border-radius: var(--radius-sm); padding: 4px 10px; display: inline-block; }
        .banner-desc  { font-size: .78rem; color: var(--fg-muted); margin-top: 6px; line-height: 1.4; }

        /* Modals */
        .wc-modal { max-width: 380px; }
        .wc-modal h2 { margin: 0 0 4px; }
        .wc-modal .level-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 2px; }
        .modal-stars { font-size: 2.2rem; text-align: center; padding: 6px 0 2px; letter-spacing: .15em; }
        .modal-score-big { text-align: center; margin: 4px 0 12px; }
        .modal-score-big:empty { display: none; }
        .modal-stat-row { display: flex; justify-content: space-between; font-size: .82rem; color: var(--fg-muted); padding: 3px 0; border-bottom: 1px solid var(--border); }
        .modal-stat-row:last-of-type { border: none; }
        .modal-stat-row strong { color: var(--fg); }
        .wc-modal .btn { display: block; width: 100%; margin-top: 10px; }  /* shared .btn look + full-width modal layout */
                                .wc-skip-link { display: block; width: 100%; margin-top: 10px; padding: 6px; border: none; background: none; color: var(--fg-muted); font-size: .85rem; font-family: var(--font-sans); text-decoration: underline; cursor: pointer; }
        .wc-skip-link:hover { color: var(--accent); }

        /* Onboarding: tutorial list, goal card, first-time popups */
        .wc-tut-list { margin: 8px 0 4px; padding-left: 20px; font-size: .9rem; color: var(--fg-muted); line-height: 1.5; }
        .wc-tut-list li { margin: 7px 0; }
        .wc-tut-list b { color: var(--fg); }
        .wc-goal-card { text-align: center; }
        .li-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 800; margin-bottom: 10px; }
        .li-goal-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }
        .li-goal { font-size: 1.5rem; font-weight: 900; color: var(--fg); margin: 2px 0 6px; line-height: 1.2; }
        .li-limit { font-size: .9rem; font-weight: 700; color: var(--fg-muted); }
        .li-explain { text-align: left; font-size: .85rem; color: var(--fg-muted); line-height: 1.55; margin: 14px 0 2px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); }
        .li-explain b { color: var(--fg); }

        /* Shop heading */
        .shop-intro { font-size: .78rem; color: var(--fg-muted); margin: 12px 0 2px; font-weight: 600; }
        .shop-intro b { color: var(--fg); }

        /* Help */
        .help-legend { display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; font-size: .82rem; margin: 10px 0 0; align-items: center; }
        .hl-tile { width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; flex-shrink: 0; position: relative; }
        .help-legend p { color: var(--fg-muted); margin: 0; line-height: 1.4; }
        .help-legend p strong { color: var(--fg); }
        .wc-how { font-size: .83rem; color: var(--fg-muted); line-height: 1.55; margin: 8px 0 0; }
        .wc-how b { color: var(--fg); }

        /* Mode toggle (Daily / Random) */
        .wc-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0 2px; }
        .wc-mode-tabs { display: inline-flex; gap: 3px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
        .wc-mode-tab { font-size: .72rem; font-weight: 800; color: var(--fg-muted); background: none; border: none; border-radius: 999px; padding: 4px 12px; cursor: pointer; font-family: var(--font-sans); transition: background .15s, color .15s; }
        .wc-mode-tab.active { background: var(--accent); color: var(--bg); }
        .wc-mode-note { font-size: .68rem; color: var(--fg-subtle); font-weight: 600; text-align: right; }

        /* Leaderboard modal */
        .lb-blurb { font-size: .82rem; color: var(--fg-muted); margin: 0 0 8px; line-height: 1.45; }
        .lb-scope-tabs { display: flex; gap: 6px; margin: 6px 0 8px; }
        .lb-scope-tab { flex: 1; font-size: .8rem; font-weight: 700; color: var(--fg-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; cursor: pointer; font-family: var(--font-sans); transition: background .15s, color .15s, border-color .15s; }
        .lb-scope-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }
        .lb-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; font-size: .85rem; font-weight: 700; color: var(--fg-muted); }
        .lb-nav-btn { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 9px; cursor: pointer; font-size: 1.05rem; color: var(--fg); line-height: 1; }
        .lb-nav-btn:disabled { opacity: .3; cursor: default; }
        .lb-body { min-height: 60px; }
        .lb-list { list-style: none; padding: 0; margin: 0; }
        .lb-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
        .lb-row + .lb-row { border-top: 1px solid var(--border); }
        .lb-row.me { background: color-mix(in srgb, var(--accent) 18%, transparent); }
        .lb-rank { font-size: .75rem; color: var(--fg-subtle); width: 1.5rem; text-align: right; flex-shrink: 0; font-weight: 700; }
        .lb-name { flex: 1; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .lb-stars { letter-spacing: 1px; font-size: .8rem; color: var(--tone-gold-fg); flex-shrink: 0; }
        .lb-score { font-size: .85rem; font-weight: 800; flex-shrink: 0; min-width: 64px; text-align: right; }
        .lb-status { font-size: .82rem; color: var(--fg-muted); text-align: center; padding: 10px 0; }
        .lb-you-note { margin-top: 4px; }
        .lb-you-head { font-size: .82rem; font-weight: 700; margin: 2px 0 6px; color: var(--fg); }
        .lb-join { padding: 4px 0; }
        .lb-join-title { font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
        .lb-join-row { display: flex; gap: 6px; }
        .lb-input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font-size: .9rem; font-family: var(--font-sans); }
        .lb-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
        .lb-join-row .btn { width: auto; margin-top: 0; flex-shrink: 0; }
        .wc-lb-mount { margin: 8px 0 2px; }

        /* Share card preview */
        .share-card-preview { display: flex; justify-content: center; margin: 12px 0 4px; }
        .share-card-preview:empty { display: none; }
        .share-card-img { width: 100%; max-width: 280px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
        .hidden { display: none !important; }

        /* ── Candy-Crush HUD/economy additions ── */
        .hud-left { display: flex; flex-direction: column; gap: 1px; }
        .hud-coin { font-size: .7rem; font-weight: 800; color: var(--tone-gold-fg); white-space: nowrap; }
        .wc-combo-strip.finale { color: var(--tone-gold-fg); font-size: 1.45rem; letter-spacing: .03em; }
        .coin-earned { font-size: 1.15rem; font-weight: 900; color: var(--tone-gold-fg); }

        /* Booster shop */
        .wc-shop { margin: 12px 0 4px; }
        .shop-head { font-size: .82rem; font-weight: 800; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
        .shop-bal { color: var(--tone-gold-fg); }
        .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
        .shop-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-family: var(--font-sans); text-align: left; transition: border-color .12s, background .12s; }
        .shop-item:hover:not(:disabled) { border-color: var(--accent); }
        .shop-item:disabled { opacity: .4; cursor: default; }
        .shop-item.owned { border-color: var(--tone-grass-fg); background: color-mix(in srgb, var(--tone-grass-bg) 40%, var(--bg)); }
        .shop-ic { font-size: 1.05rem; line-height: 1; }
        .shop-nm { font-size: .72rem; font-weight: 700; color: var(--fg); }
        .shop-cost { font-size: .7rem; font-weight: 800; color: var(--fg-muted); }
        .shop-item.owned .shop-cost { color: var(--tone-grass-fg); }
        .shop-note { font-size: .66rem; color: var(--fg-subtle); margin-top: 6px; }

        /* Start / level select */
        .start-coins { text-align: center; font-size: 1.15rem; font-weight: 900; color: var(--tone-gold-fg); margin: 2px 0 10px; }
        .start-levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 6px; }
        .lvl-btn { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; font-family: var(--font-sans); transition: border-color .12s; }
        .lvl-btn:hover:not(.locked) { border-color: var(--accent); }
        .lvl-btn.locked { opacity: .45; cursor: default; }
        .lvl-n { font-size: .95rem; font-weight: 900; color: var(--accent); min-width: 1.2rem; }
        .lvl-name { flex: 1; font-size: .78rem; font-weight: 700; color: var(--fg); text-align: left; line-height: 1.15; }
        .lvl-go { color: var(--accent); font-size: .8rem; }
        .lvl-lock { font-size: .8rem; }

        /* Word Crush chrome overrides — a tighter topbar so the 5x6 board fits every
           iPhone. Kept here (not hand-edited into the vended chrome.css) so chrome
           stays canonical/in-sync; wc.css loads after chrome.css so these win. */
        .topbar { padding: 8px clamp(14px, 3vw, 24px); }
        .topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }
        .icon-button { width: 36px; height: 36px; }

        /* Keep the topbar (brand + 3 action icons) from overflowing on narrow phones */
        @media (max-width: 430px) {
            .topbar { gap: 8px; padding: 12px 12px; }
            .brand-sep, .brand-game { display: none; }
            .brand { min-width: 0; overflow: hidden; }
            .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }

/* Escape hatch on the start / goal cards → back to the arcade home. */
.wc-back-link { display:block; text-align:center; margin-top:14px; color:var(--fg-muted); font-size:.85rem; text-decoration:none; }
.wc-back-link:hover { color:var(--accent); text-decoration:underline; }