:root{--bg: #07080c;--ink: #f4efe6;--muted: #9a9286;--accent: #e2b87a;--accent-2: #8fa4c8;--glass: rgba(10, 12, 18, .62);--glass-2: rgba(16, 18, 26, .78);--line: rgba(244, 239, 230, .12);--danger: #e07a6a;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--font-display: "Fraunces", serif;--font-ui: "Outfit", sans-serif;--radius: 18px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font-ui);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}input,textarea{user-select:text;-webkit-user-select:text;font-size:16px}#scene{position:fixed;inset:0;width:100%;height:100%;height:100dvh;display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none;z-index:2}#ui>*{pointer-events:auto}#ui .vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(0,0,0,.38) 100%)}#ui [data-for]{display:none}#ui[data-screen=home] [data-for=home],#ui[data-screen=join] [data-for=join],#ui[data-screen=waiting] [data-for=waiting],#ui[data-screen=cpu] [data-for=cpu]{display:block}#ui[data-screen=play] [data-for=play].hud-top,#ui[data-screen=play] [data-for=play].hud-bottom{display:flex}#ui[data-screen=play] [data-for=play].moves-pane{display:block}#ui[data-screen=play] [data-for=play].moves-pane[hidden]{display:none}#ui[data-screen=play] [data-for=play].banner:not([hidden]){display:flex}.home-panel,.sheet{position:absolute;left:max(24px,env(safe-area-inset-left));top:50%;transform:translateY(-50%);width:min(420px,calc(100vw - 48px));padding:28px 28px 24px;background:var(--glass);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.eyebrow{margin:0 0 8px;letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--accent);font-weight:500}h1{font-family:var(--font-display);font-weight:500;font-size:clamp(42px,7vw,64px);margin:0 0 10px;letter-spacing:-.03em}h2{font-family:var(--font-display);font-weight:500;margin:8px 0 10px}.lede,.muted{color:var(--muted);line-height:1.5;font-weight:300}.lede{margin:0 0 22px;font-size:16px}.actions{display:grid;gap:10px}.actions [data-resume-meta]{margin:-2px 0 4px}.btn{appearance:none;border:1px solid var(--line);background:#f4efe60a;color:var(--ink);font:500 15px/1 var(--font-ui);padding:12px 16px;border-radius:12px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.btn:hover{background:#f4efe61a;border-color:#f4efe638}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--ink);color:#16120e;border-color:transparent}.btn.primary:hover{background:#fff}.btn.slim{padding:8px 10px;font-size:13px}.btn.danger{color:var(--danger)}.text-btn{background:none;border:0;color:var(--muted);font:500 13px var(--font-ui);cursor:pointer;padding:0;margin-bottom:8px}.row{display:flex;gap:10px;flex-wrap:wrap}.row.compact{gap:8px;justify-content:flex-end}.code-display{font-family:var(--font-display);font-size:48px;letter-spacing:.28em;margin:12px 0 8px;color:var(--ink)}.code-input{display:flex;gap:10px;margin:16px 0 18px}.code-cell{width:64px;height:72px;text-align:center;font-family:var(--font-display);font-size:32px;background:#00000047;border:1px solid var(--line);border-radius:14px;color:var(--ink);text-transform:uppercase}.code-cell:focus{outline:1px solid var(--accent)}fieldset{border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:10px 12px 12px}legend{color:var(--muted);font-size:12px;padding:0 6px}label{display:block;margin:6px 0;font-size:14px}#ui>.hud-top,#ui>.hud-bottom{position:absolute;display:none;align-items:center;gap:10px;pointer-events:none}#ui>.hud-top>*,#ui>.hud-bottom>*{pointer-events:auto}.hud-top{top:max(14px,env(safe-area-inset-top));left:16px;right:16px;justify-content:space-between}.hud-bottom{left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(560px,calc(100% - 24px));justify-content:space-between;align-items:flex-end;padding:10px 12px;background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(16px)}.hud-top .icon-btn,.hud-title{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px)}.hud-title{padding:8px 14px;border-radius:14px}.hud-title{display:flex;align-items:center;gap:10px}.hud-title strong{font-family:var(--font-display);font-weight:500;font-size:20px}.code-chip{font-size:12px;letter-spacing:.18em;padding:4px 8px;border:1px solid var(--line);border-radius:999px;color:var(--accent)}.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.turn-block{min-width:140px}.sm{font-size:12px}.caps{min-height:36px}.cap-row{min-height:18px;letter-spacing:.04em}.glyph{font-size:16px}.glyph.w{color:#f4efe6}.glyph.b{color:#9aa3b5}.moves-pane{display:none;position:absolute;top:78px;right:16px;width:180px;max-height:calc(100vh - 220px);overflow:auto;padding:12px;background:var(--glass);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(16px);pointer-events:auto}.moves-head{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.ply{display:grid;grid-template-columns:24px 1fr 1fr;gap:6px;font-size:13px;padding:3px 0}.ply .n{color:var(--muted)}.toast,.banner{position:absolute;left:50%;top:86px;transform:translate(-50%);background:var(--glass-2);border:1px solid var(--line);padding:10px 14px;border-radius:12px;backdrop-filter:blur(16px);font-size:14px}.banner{display:flex;gap:8px;align-items:center}.modal{position:absolute;inset:0;display:grid;place-items:center;background:#00000059}.modal[hidden],.banner[hidden],.toast[hidden]{display:none!important}.card{background:var(--glass-2);border:1px solid var(--line);border-radius:20px;padding:22px;min-width:min(320px,90vw);box-shadow:var(--shadow);text-align:center}.promo-row{display:flex;gap:10px;justify-content:center;margin-top:12px}.promo-row button{width:56px;height:56px;font-size:28px;border-radius:14px;border:1px solid var(--line);background:#f4efe60f;color:var(--ink);cursor:pointer}.settings{position:absolute;top:0;right:0;height:100%;width:min(340px,100vw);background:var(--glass-2);border-left:1px solid var(--line);padding:22px;padding-bottom:max(22px,env(safe-area-inset-bottom));transform:translate(110%);transition:transform .25s ease;pointer-events:auto;backdrop-filter:blur(22px);overflow:auto}.settings.open{transform:none}.settings-head{display:flex;justify-content:space-between;align-items:center}.switch,.field{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0;font-size:14px}.field select,.field input{background:#12141c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;font:16px var(--font-ui);max-width:58%}@media(pointer:coarse){.icon-btn{width:44px;height:44px}.btn{min-height:44px}}@media(max-width:640px){.home-panel,.sheet{left:50%;top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(440px,calc(100vw - 24px));max-height:min(72dvh,560px);overflow:auto}.moves-pane{display:none!important}.hud-bottom{flex-wrap:wrap}h1{font-size:40px}}@media(max-height:500px)and (orientation:landscape){.home-panel,.sheet{left:max(12px,env(safe-area-inset-left));top:50%;bottom:auto;transform:translateY(-50%);width:min(340px,46vw);max-height:calc(100dvh - 20px);overflow:auto;padding:18px 18px 16px}h1{font-size:32px}.hud-bottom{width:min(640px,calc(100% - 24px))}.moves-pane{display:none!important}}@media(min-width:768px)and (pointer:coarse){.home-panel,.sheet{width:min(420px,42vw)}.hud-bottom{width:min(640px,calc(100% - 40px))}}body.is-native .hud-top{top:max(10px,env(safe-area-inset-top))}body.is-native .hud-bottom{bottom:max(12px,env(safe-area-inset-bottom))}body.is-ios .settings{padding-top:max(22px,env(safe-area-inset-top))}