:root{color-scheme:dark;--bg: #0b0f1a;--surface: #151b2b;--surface-hi: #1d2438;--line: #2a3345;--text: #e8ecf5;--muted: #8b95ac;--x: #4cc9f0;--o: #f79d5c;--good: #5bd99a;--warn: #f0c14c;--radius: 14px;--tap: 44px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.shell{width:min(100%,30rem);margin:0 auto;padding:1rem 1rem 3rem;display:flex;flex-direction:column;gap:1rem}.shell--centred{min-height:80vh;justify-content:center;align-items:center}.loading{color:var(--muted)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem}.masthead__title{font-size:1.05rem;font-weight:600;margin:0}.wordmark{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:.35rem}.wordmark__dot{width:.4rem;height:.4rem;border-radius:50%;background:var(--x);margin-top:.5rem}.icon-button{min-width:var(--tap);min-height:var(--tap);border:0;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:1.2rem;cursor:pointer}.icon-button:hover{background:var(--surface);color:var(--text)}.icon-button--ghost{pointer-events:none;visibility:hidden}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.65rem}.card--accent{border-color:color-mix(in srgb,var(--x) 40%,var(--line))}.card__title{font-size:1rem;font-weight:600;margin:0}.card__body{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.card__hint{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5}.card__hint--quiet{color:color-mix(in srgb,var(--muted) 70%,var(--bg))}.row{display:flex;gap:.5rem;flex-wrap:wrap}.button{min-height:var(--tap);padding:0 1.1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-hi);color:var(--text);font:inherit;font-weight:550;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.button:hover{border-color:color-mix(in srgb,var(--x) 45%,var(--line))}.button--primary{background:var(--x);border-color:var(--x);color:#06202a}.button--primary:hover{filter:brightness(1.08)}.button--primary .mark{width:1rem;height:1rem}.button--primary .mark path,.button--primary .mark circle{stroke:#06202a}.link{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}.input{flex:1 1 10rem;min-height:var(--tap);padding:0 .85rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--text);font:inherit}:focus-visible{outline:2px solid var(--x);outline-offset:2px}.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.level{min-height:var(--tap);padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--text);font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:.15rem}.level--on{border-color:var(--x);background:color-mix(in srgb,var(--x) 12%,var(--bg))}.level__name{font-weight:600;font-size:.92rem}.level__blurb{color:var(--muted);font-size:.76rem}.board{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}.board__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.cell{aspect-ratio:1;min-width:var(--tap);min-height:var(--tap);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:14%}.cell[aria-disabled=true]{cursor:default}.cell:not([aria-disabled=true]):hover{background:var(--surface-hi);border-color:color-mix(in srgb,var(--x) 35%,var(--line))}.cell--winning{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--surface))}.mark{width:100%;height:100%;overflow:visible}.mark path,.mark circle{fill:none;stroke-width:11;stroke-linecap:round}.mark--x path{stroke:var(--x)}.mark--o circle{stroke:var(--o)}.mark--muted path,.mark--muted circle{stroke:var(--muted)}@media (prefers-reduced-motion: no-preference){.mark path,.mark circle{stroke-dasharray:200;stroke-dashoffset:200;animation:draw .26s ease-out forwards}}@keyframes draw{to{stroke-dashoffset:0}}.status{margin:0;font-weight:600;font-size:1.05rem;display:flex;align-items:baseline}.status--won{color:var(--good)}.status--lost{color:var(--o)}.status--drawn{color:var(--muted)}.ellipsis:after{content:"…";display:inline-block;width:1ch}@media (prefers-reduced-motion: no-preference){.ellipsis:after{animation:blink 1.4s steps(1) infinite}}@keyframes blink{0%,to{opacity:1}50%{opacity:.25}}.actions{display:flex;gap:.5rem}.actions .button{flex:1}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem .4rem;text-align:center;display:flex;flex-direction:column;gap:.1rem}.stat__value{font-size:1.25rem;font-weight:700}.stat__label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.banner{border-radius:var(--radius);padding:.75rem .9rem;font-size:.88rem;line-height:1.5;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0}.banner--warn{background:color-mix(in srgb,var(--warn) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line))}.banner--ok{background:color-mix(in srgb,var(--good) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--good) 40%,var(--line))}.footnote{color:var(--muted);font-size:.78rem;text-align:center;margin:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.opponent{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.rating{margin:0;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--x);line-height:1}.link--quiet{align-self:center;color:var(--muted);font-size:.85rem;text-decoration:none;min-height:var(--tap)}.link--quiet:hover{color:var(--text);text-decoration:underline}.dot{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto;margin-right:1rem}.dot--on{background:var(--good)}.dot--off{background:var(--warn)}.qr-frame{display:grid;place-items:center;padding:.75rem;background:#fff;border-radius:var(--radius)}.qr{display:block;border-radius:4px}.qr--loading{background:color-mix(in srgb,var(--line) 60%,#fff);border-radius:4px}.code{margin:0;text-align:center;font-size:2rem;font-weight:700;letter-spacing:.14em;font-variant-numeric:tabular-nums;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.input--code{text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}.clock{font-variant-numeric:tabular-nums;font-weight:600;color:var(--muted);min-width:3ch;text-align:right}.clock--urgent{color:var(--o)}.opponent-line{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--muted);font-size:.9rem;flex-wrap:wrap}.opponent-line .mark{width:.85rem;height:.85rem}.opponent-line__vs{opacity:.6;margin:0 .25rem}.opponent-line__away{color:var(--warn);font-style:normal;margin-left:.35rem}.button:disabled{opacity:.45;cursor:not-allowed}.recents{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.recents__row{display:flex;align-items:center;gap:.6rem}.recents__name{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0;overflow-wrap:anywhere}.recents__games{color:var(--muted);font-size:.75rem}.recents .dot{margin-right:0}.rematch-note{margin:.75rem 0 0;text-align:center;color:var(--muted);font-size:.9rem}