@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/jost-latin-wght-normal.woff2) format('woff2'); }
        :root {
            /* Width of the game column. Shrinks on short screens so everything fits without scrolling. */
            --w: min(92vw, 460px, calc((100dvh - 84px) / 2.2));
            /* 1u = 1px of the 731px-wide reference mockup, scaled to the current width */
            --u: calc(var(--w) / 731);

            --green: #79b27d;
            --yellow: #f9f175;
            --absent: #d4ddd9;
            --slate: #55605f;
            --on-green: #0f2a0c;     /* dark letters keep contrast on the bright green */
            --on-present: #55605f;
            --key-bg: #dfe3e8;
            --key-target: #6a9f6e;   /* a touch darker than the tile green */
            --dead-bg: #1f2527; --dead-fg: #66706d;

            --bg: #ffffff; --fg: #0b0b0b; --ink: #1b1f1e; --ink-contrast: #ffffff;
            --muted: #8a9692; --muted-2: #7a8682; --hover: #f1f4f3; --hover-2: #f5f7f6;
            --tile-border: #8a9490; --tile-fg: #2c3331; --hint: #b4beba; --key-fg: #1a1f21;
            --card: #ffffff; --card-fg: #555555; --strong: #111111; --strong-2: #333333;
            --line: #cfd6d3; --line-2: #d9dfdc; --close: #999999; --chip: #eef1f0;
            --chip-done-bg: #dcebdc; --chip-done-fg: #2f5f34; --toast-bg: #111111; --toast-fg: #ffffff;
            --check: #3f7a44; --lbl-green: #4a8a50; --lbl-yellow: #9a8f10; --lbl-gray: #7d8a86;
            --stat-muted: #888888; --seg-text: #55605f; --bar: #79b27d; --bar-text: #0f2a0c;
            color-scheme: light;
        }
        /* Dark theme */
        html[data-theme="dark"] {
            --absent: #363e3c; --slate: #aab5b1; --key-bg: #2d3533;
            --dead-bg: #050707; --dead-fg: #454d4b;
            --bg: #121615; --fg: #eef2f0; --ink: #eef2f0; --ink-contrast: #121615;
            --muted: #8e9a96; --muted-2: #98a49f; --hover: #232a28; --hover-2: #262d2b;
            --tile-border: #6d7975; --tile-fg: #eef2f0; --hint: #46504d; --key-fg: #eef2f0;
            --card: #1c2221; --card-fg: #c3ccc8; --strong: #ffffff; --strong-2: #e4e9e7;
            --line: #3a4442; --line-2: #333c3a; --close: #8e9a96; --chip: #2a3230;
            --chip-done-bg: #27432b; --chip-done-fg: #a6d9ab; --toast-bg: #eef2f0; --toast-fg: #111111;
            --check: #8fd194; --lbl-green: #8fd194; --lbl-yellow: #e6dc5a; --lbl-gray: #98a49f;
            --stat-muted: #98a49f; --seg-text: #c3ccc8;
            color-scheme: dark;
        }
        html[data-theme="dark"][data-cb="1"] { --check: #ffb27f; --lbl-green: #ffb27f; --lbl-yellow: #85c0f9; }
        /* Colorblind palette: orange and blue */
        html[data-cb="1"] {
            --green: #f5793a;
            --yellow: #85c0f9;
            --on-green: #2b1204;
            --on-present: #14212e;
            --key-target: #e8651f;
        }

        * { box-sizing: border-box; }

        html, body {
            margin: 0;
            height: 100%;
            background: var(--bg);
        }

        body {
            font-family: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
            user-select: none;
            -webkit-user-select: none;
            color: var(--fg);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        button:focus-visible { outline: 2px solid #1b6fd1; outline-offset: 2px; }

        .app { width: var(--w); }

        /* Small utility buttons */
        .toolbar {
            display: flex;
            justify-content: flex-end;
            gap: 2px;
            height: 28px;
            margin-bottom: calc(var(--u) * 6);
        }
        .icon-btn {
            background: none;
            border: 0;
            padding: 4px;
            border-radius: 999px;
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .icon-btn:hover { background: var(--hover); color: var(--muted-2); }
        .icon-btn.active { color: var(--ink); }
        .icon-btn svg { width: 20px; height: 20px; }

        /* Header: patch left, title right */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        #mini-quilt {
            position: relative;
            width: calc(var(--u) * 260);
            height: calc(var(--u) * 260);
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: calc(var(--u) * 3);
            flex-shrink: 0;
        }
        .q-cell { background: var(--absent); }
        .q-cell.G { background: var(--green); }
        .q-cell.Y { background: var(--yellow); }
        .q-cell.X { background: var(--absent); }

        #quilt-marker {
            --g: calc(var(--u) * 3);
            position: absolute;
            left: calc(var(--g) * -2);
            width: calc(100% + var(--g) * 4);
            top: calc(var(--row, 0) * (100% + var(--g)) / 5 - var(--g));
            height: calc((100% - 4 * var(--g)) / 5 + var(--g) * 2);
            border: calc(var(--u) * 3) solid var(--ink);
            pointer-events: none;
            transition: top 0.25s ease, opacity 0.2s;
        }
        .q-check {
            --g: calc(var(--u) * 3);
            position: absolute;
            left: calc(100% + var(--u) * 10);
            top: calc(var(--r) * (100% + var(--g)) / 5);
            height: calc((100% - 4 * var(--g)) / 5);
            display: flex;
            align-items: center;
            font-size: calc(var(--u) * 30);
            font-weight: 700;
            color: var(--check);
            line-height: 1;
        }
        html[data-cb="1"] .q-check { color: #c2500f; }
        html[data-theme="dark"][data-cb="1"] .q-check { color: #ffb27f; }

        .title-wrap { display: flex; flex-direction: column; align-items: flex-end; }
        h1 {
            margin: 0;
            margin-right: calc(var(--u) * 15);
            font-size: calc(var(--u) * 58);
            font-weight: 500;
            line-height: 1;
            letter-spacing: 0.005em;
            color: var(--fg);
        }
        #mode-badge {
            margin: calc(var(--u) * 22) calc(var(--u) * 15) 0 0;
            font-size: calc(var(--u) * 26);
            font-weight: 600;
            letter-spacing: 0.12em;
            line-height: 1.5;
            text-align: right;
            color: var(--slate);
        }
        #mode-btn {
            font: inherit; letter-spacing: inherit; color: inherit; text-transform: uppercase;
            background: none; border: 0; padding: 0 0 calc(var(--u) * 2); margin: 0;
            cursor: pointer; border-bottom: 1px dotted currentColor;
        }
        #mode-btn:hover { color: var(--fg); }
        #mode-btn .cyc { font-size: 0.85em; margin-left: 0.3em; opacity: .7; }

        /* Board */
        #board {
            margin-top: calc(var(--u) * 70);
            display: grid;
            grid-template-rows: repeat(6, auto);
            gap: calc(var(--u) * 15);
        }
        .row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: calc(var(--u) * 14);
        }

        .tile {
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            border: calc(var(--u) * 4) solid var(--absent);
            color: var(--slate);
            font-size: calc(var(--u) * 118);
            font-weight: 500;
            line-height: 1;
            text-transform: uppercase;
            border-radius: 0;
        }
        .tile.filled { border-color: var(--tile-border); color: var(--tile-fg); }
        .tile.correct { background: var(--green); border-color: var(--absent); color: var(--on-green); }
        .tile.present { background: var(--yellow); border-color: var(--absent); color: var(--on-present); }
        .tile.absent  { background: var(--absent); border-color: var(--absent); color: var(--slate); }
        /* Ghost letter shown by the hint button */
        .tile.hint:empty::after { content: attr(data-hint); color: var(--hint); }

        /* Keyboard */
        #keyboard {
            margin-top: calc(var(--u) * 52);
            display: flex;
            flex-direction: column;
            gap: calc(var(--u) * 14);
        }
        .kb-row {
            display: flex;
            justify-content: center;
            gap: calc(var(--u) * 11);
        }
        .key {
            flex: 1;
            min-width: 0;
            height: calc(var(--u) * 86);
            border: 0;
            padding: 0;
            border-radius: calc(var(--u) * 4);
            background: var(--key-bg);
            color: var(--key-fg);
            font-family: inherit;
            font-weight: 700;
            font-size: calc(var(--u) * 26);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 0 calc(var(--u) * 8) rgba(0, 0, 0, 0.07);
            transition: filter 0.1s;
        }
        .key:active { filter: brightness(0.93); }
        .key.wide { flex: 1.5; font-size: calc(var(--u) * 17); }
        .key { position: relative; }
        .key.target { background: var(--key-target); color: #11200e; }
        /* Normal: letters outside the key word fade as their uses run out, with one dot per use left */
        .key.fade[data-life="2"] { opacity: .8; }
        .key.fade[data-life="1"] { opacity: .58; }
        .key .pips { position: absolute; bottom: calc(var(--u) * 7); left: 0; right: 0; display: flex; justify-content: center; gap: calc(var(--u) * 5); pointer-events: none; }
        .key .pips i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: currentColor; opacity: .75; }
        .key.fade[data-life="2"] .pips i:nth-child(3), .key.fade[data-life="1"] .pips i:nth-child(n+2), .key.fade[data-life="0"] .pips i { opacity: .12; }
        /* Blacked out (Hard, or Normal with no uses left) */
        .key.dead { background: var(--dead-bg); color: var(--dead-fg); opacity: 1; box-shadow: none; cursor: not-allowed; }
        .key.dead .pips { display: none; }
        html[data-cb="1"] .key.target { color: #2b1204; }
        .key svg { width: calc(var(--u) * 36); height: calc(var(--u) * 36); pointer-events: none; }

        .copyright {
            margin-top: calc(var(--u) * 46);
            text-align: center;
            font-size: 11px;
            letter-spacing: 0.02em;
            color: var(--muted);
        }

        /* Toast: floats so it never shifts the layout */
        #toast {
            position: fixed;
            top: 14px;
            left: 0; right: 0;
            display: flex;
            justify-content: center;
            z-index: 80;
            pointer-events: none;
            padding: 0 16px;
        }
        #toast-text {
            display: none;
            background: var(--toast-bg);
            color: var(--toast-fg);
            font-size: 13px;
            font-weight: 600;
            padding: 8px 14px;
            border-radius: 6px;
            box-shadow: 0 6px 18px rgba(0,0,0,.25);
            max-width: 340px;
            text-align: center;
            line-height: 1.35;
        }
        #toast-text.show { display: block; }

        /* Modals */
        .modal {
            position: fixed; inset: 0;
            background: rgba(0,0,0,.5);
            display: flex; align-items: center; justify-content: center;
            padding: 16px; z-index: 50;
        }
        .modal.hidden { display: none; }
        .modal-card {
            background: var(--card); border-radius: 12px; padding: 24px;
            max-width: 380px; width: 100%; max-height: 92vh; overflow-y: auto; position: relative;
            box-shadow: 0 20px 50px rgba(0,0,0,.3);
            font-size: 14px; color: var(--card-fg); line-height: 1.45;
            user-select: text; -webkit-user-select: text;
        }
        .modal-card h2 { margin: 0 0 8px; font-size: 20px; color: var(--strong); }
        .modal-card p { margin: 0 0 10px; }
        .modal-card ul { padding-left: 20px; margin: 10px 0 16px; }
        .modal-card li { margin-bottom: 6px; }
        .modal-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 24px; color: var(--close); cursor: pointer; }
        .primary-btn { width: 100%; padding: 10px; background: #4f8a54; color: #fff; border: 0; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
        .primary-btn:hover { background: #447a49; }

        .secondary-btn { width: 100%; padding: 10px; background: var(--card); color: var(--strong-2); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
        .secondary-btn:hover { background: var(--hover-2); }
        .secondary-btn:disabled { opacity: .45; cursor: default; }
        .welcome-actions { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 12px; }

        /* Settings */
        .seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 6px 0; }
        .seg button { flex: 1; padding: 8px; background: var(--card); border: 0; font: inherit; font-weight: 600; color: var(--seg-text); cursor: pointer; }
        .seg button + button { border-left: 1px solid var(--line); }
        .seg button.on { background: var(--ink); color: var(--ink-contrast); }
        .setting-desc { font-size: 12.5px; color: var(--muted-2); min-height: 36px; margin: 6px 0 14px; }
        .check-row { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--strong-2); cursor: pointer; margin-bottom: 4px; }
        .check-row input { width: 18px; height: 18px; accent-color: var(--ink); }

        /* Win modal */
        #win-plate { position: relative; width: 240px; max-width: 100%; margin: 0 auto 14px; overflow: hidden; border-radius: 14px; animation: kilnIn .7s cubic-bezier(.2,.8,.2,1) both; }
        #win-tile { display: block; width: 100%; height: auto; }
        #win-plate::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
            transform: translateX(-130%); animation: glazeSweep 1.2s .55s ease-out forwards;
        }
        @keyframes kilnIn { 0% { transform: scale(.85) rotate(-2deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
        @keyframes glazeSweep { to { transform: translateX(130%); } }
        #win-stats { display: flex; justify-content: space-around; margin-bottom: 16px; }
        #win-stats div { display: flex; flex-direction: column; align-items: center; }
        #win-stats b { font-size: 22px; color: var(--strong); font-variant-numeric: tabular-nums; }
        #win-stats span { font-size: 11px; color: var(--stat-muted); }

        /* Timer */
        #timer { margin-right: auto; align-self: center; font-size: 15px; font-weight: 600; letter-spacing: .03em;
                 color: var(--muted-2); font-variant-numeric: tabular-nums; padding-left: 2px; }
        #timer.hidden { visibility: hidden; }
        #timer.idle { opacity: .55; }

        /* Welcome splash */
        .splash-patch { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 68px; margin: 0 auto 10px; padding: 4px; border-radius: 6px; background: #b9b2a4; }
        .splash-patch i { aspect-ratio: 1; border-radius: 2px; background: #e4e2da; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
        .splash-patch i.G { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 70%, #fff), var(--green) 55%, color-mix(in srgb, var(--green) 80%, #000)); }
        .splash-patch i.Y { background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 70%, #fff), var(--yellow) 55%, color-mix(in srgb, var(--yellow) 85%, #000)); }
        .splash-hook { font-size: 16px; font-weight: 600; color: var(--strong-2); line-height: 1.35; }

        /* Collection */
        .coll-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 6px; }
        .coll-head b { font-size: 22px; color: var(--strong); font-variant-numeric: tabular-nums; }
        .coll-bar { height: 8px; border-radius: 4px; background: var(--absent); overflow: hidden; margin-bottom: 14px; }
        .coll-bar i { display: block; height: 100%; background: var(--bar); border-radius: 4px; transition: width .4s; }
        #coll-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px 6px; max-height: 52vh; overflow-y: auto; padding: 2px; }
        .mt { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
        .mt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 100%; max-width: 56px; padding: 3px; border-radius: 4px; background: #b9b2a4; }
        .mt-grid i { aspect-ratio: 1; border-radius: 2px; background: #e4e2da; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.18); }
        .mt-grid i.G { background: linear-gradient(135deg, color-mix(in srgb, var(--green) 70%, #fff), var(--green) 55%, color-mix(in srgb, var(--green) 80%, #000)); }
        .mt-grid i.Y { background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 70%, #fff), var(--yellow) 55%, color-mix(in srgb, var(--yellow) 85%, #000)); }
        .mt.locked .mt-grid { background: var(--line); opacity: .7; }
        .mt.locked .mt-grid i { background: transparent; box-shadow: none; }
        .mt.locked .mt-grid i.G, .mt.locked .mt-grid i.Y { background: var(--absent); }
        .mt span { font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--muted-2); overflow-wrap: anywhere; }
        .mt.got span { color: var(--strong-2); font-weight: 600; }
        #win-collect { font-size: 13px; margin: -2px 0 12px; color: var(--strong-2); }
        #win-collect b { color: var(--lbl-green); }
        #prize-plate { border-radius: 10px; overflow: hidden; margin: 8px 0 14px; position: relative; animation: kilnIn .8s cubic-bezier(.2,.8,.2,1) both; }
        #prize-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); transform: translateX(-130%); animation: glazeSweep 1.4s .6s ease-out forwards; }
        #prize-canvas { display: block; width: 100%; height: auto; }

        /* Statistics */
        .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; margin: 12px 0 16px; text-align: center; }
        .stat-grid b { display: block; font-size: 24px; color: var(--strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
        .stat-grid span { font-size: 11px; color: var(--stat-muted); }
        .dist { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; }
        .dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
        .dist-row > span:first-child { width: 20px; text-align: right; color: var(--muted-2); }
        .dist-bar { background: var(--absent); color: var(--strong-2); min-width: 22px; padding: 1px 6px; border-radius: 3px; text-align: right; font-weight: 700; }
        .dist-bar.hi { background: var(--bar); color: var(--bar-text); }
        .stat-foot { font-size: 12.5px; color: var(--muted-2); margin: 0; }
        .link-btn { background: none; border: 0; padding: 8px 0 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted-2); text-decoration: underline; cursor: pointer; width: 100%; }
        .setting-note { font-size: 12.5px; color: var(--muted-2); margin: 2px 0 12px 28px; }

        /* Archive */
        #archive-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; margin-top: 10px; }
        .arch-item {
            display: flex; justify-content: space-between; align-items: center; gap: 10px;
            padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card);
            font: inherit; color: var(--strong-2); cursor: pointer; text-align: left; width: 100%;
        }
        .arch-item:hover { background: var(--hover-2); }
        .arch-item.current { border-color: var(--ink); }
        .arch-item b { font-variant-numeric: tabular-nums; }
        .arch-badges { display: flex; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
        .arch-badges span { padding: 2px 6px; border-radius: 4px; background: var(--chip); color: var(--muted); }
        .arch-badges span.done { background: var(--chip-done-bg); color: var(--chip-done-fg); }

        /* Animations */
        @keyframes popIn {
            0% { transform: scale(0.85); opacity: .6; }
            40% { transform: scale(1.06); }
            100% { transform: scale(1); opacity: 1; }
        }
        .animate-pop { animation: popIn 0.12s ease-in-out forwards; }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }
        .animate-shake { animation: shake 0.3s ease-in-out; }

        @keyframes tileFlip {
            0% { transform: rotateX(0deg); }
            50% { transform: rotateX(90deg); }
            100% { transform: rotateX(0deg); }
        }
        .tile.flip { animation: tileFlip 0.5s ease-in-out; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; }
        }