:root{color-scheme:dark;--bg:#0a151e;--panel:#11232e;--line:#2a424d;--white:#eee9df;--muted:#a5b8bf;--cyan:#7ce1d7;--gold:#efbd74}*{box-sizing:border-box}body{margin:0;color:var(--white);background:radial-gradient(ellipse at 25% 0,#18313c,transparent 65%),var(--bg);font:15px/1.6 system-ui,sans-serif}button,input,a{ -webkit-tap-highlight-color:transparent}a{color:var(--cyan);text-decoration:none}a:hover{color:var(--gold)}button{font:600 12px system-ui;color:var(--white);background:#192f3c;border:1px solid #47616d;border-radius:5px;padding:11px 14px;cursor:pointer;min-height:42px}button:hover{background:#274553}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}header{max-width:1160px;margin:auto;padding:19px 24px;display:flex;flex-wrap:wrap;gap:24px;border-bottom:1px solid var(--line);font-size:12px}header a:first-child{margin-right:auto}main{max-width:1160px;margin:auto;padding:0 24px}.masthead{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 0 24px}.eyebrow{font:700 10px/1.5 monospace;letter-spacing:2px;color:var(--cyan);margin:0 0 9px}h1{font:900 clamp(25px,3.4vw,42px)/1.05 system-ui;letter-spacing:-1.5px;margin:0}h1 span{color:var(--gold)}.tagline{font-size:13px;color:var(--muted);margin:8px 0 0}.tools{display:flex;gap:7px;flex-wrap:wrap}.layout{display:grid;grid-template-columns:minmax(0,650px) minmax(240px,1fr);gap:38px;align-items:start}.cabinet{max-width:600px;margin:0 auto;width:100%}.readout{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:8px;background:#061019;padding:12px 15px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0}.readout div{display:flex;flex-direction:column;gap:4px}.readout small{font:9px monospace;color:var(--muted);letter-spacing:1px}.readout strong{font:700 17px monospace;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}.screen{position:relative;border:1px solid #395561;border-radius:0 0 8px 8px;overflow:hidden;background:#07121d;box-shadow:0 0 40px #37a1aa12,0 20px 60px #0006;aspect-ratio:600/820;touch-action:auto}canvas{width:100%;height:100%;display:block;touch-action:none}.screen-label{position:absolute;bottom:3px;left:0;right:0;text-align:center;font:7px monospace;letter-spacing:3px;color:#8ca6b5;pointer-events:none}.overlay{position:absolute;inset:0;background:#04101db0;display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(4px)}.panel{max-height:100%;overflow-y:auto;touch-action:pan-y;background:linear-gradient(145deg,#19313ef5,#0a1925f5);border:1px solid #7ce1d75c;box-shadow:0 18px 60px #0007;max-width:390px;width:100%;padding:30px;border-radius:9px;text-align:center}.panel h2{font-size:clamp(25px,4vw,38px);line-height:1.1;margin:12px 0}.panel>p:not(.eyebrow){color:var(--muted);font-size:14px}.primary{display:block;width:100%;background:var(--gold);color:#0a1720;border-color:var(--gold);font-size:15px;padding:15px;margin:20px 0 14px}.primary:hover{background:#f7d19a}.hint{font-size:11px;color:var(--muted);line-height:1.65}.overload{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px 12px;margin-top:15px;font:10px monospace;color:var(--cyan)}.overload>div{height:8px;background:#1b3440;overflow:hidden;border-radius:8px}.overload i{display:block;background:linear-gradient(90deg,var(--cyan),var(--gold));width:0;height:100%;box-shadow:0 0 12px #7ce1d788}.overload small{grid-column:1/-1;font:11px system-ui;color:var(--muted)}.leila{font-size:13px;color:var(--gold);min-height:42px}.controls{font-size:11px;color:var(--muted)}.board,.field-guide{border:1px solid var(--line);background:#10212ba6;border-radius:8px;padding:22px;margin-bottom:20px}aside h2{font-size:23px;line-height:1.2;margin:12px 0 20px;letter-spacing:-.5px}.community-counts{display:flex;gap:30px}.community-counts div{display:flex;flex-direction:column}.community-counts strong{font:700 28px monospace;color:var(--gold)}.community-counts span{font:9px/2 monospace;color:var(--muted)}ol{list-style:none;padding:0;margin:18px 0}li{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font:13px monospace}li strong{color:var(--cyan)}.field-guide p,.field-guide dd{font-size:13px;color:var(--muted)}dt{font-size:13px}dt b{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;width:25px;height:25px;color:#07121d;margin-right:6px}.wide{background:#7ce1d7}.multi{background:#d5a6ff}.shield{background:#efbd74}dd{margin:5px 0 14px 36px}.field-guide strong{color:var(--gold)}.return{font-size:13px}#score-form{margin-top:20px;text-align:left;border-top:1px solid var(--line);padding-top:15px}#score-form label{font-size:11px;display:block;color:var(--muted);margin-bottom:8px}#score-form>div{display:flex;gap:8px}input{min-width:0;width:80px;padding:9px;font:700 20px monospace;color:var(--gold);background:#07121d;border:1px solid #47616d;border-radius:4px;text-transform:uppercase}#submit-status{font-size:11px;color:var(--cyan)}footer{max-width:1160px;margin:25px auto 0;padding:22px 24px 30px;font-size:11px;color:var(--muted)}@media(min-width:800px){.cabinet{max-width:min(600px,calc((100svh - 210px)*.7317));min-width:340px}.layout{grid-template-columns:minmax(340px,650px) minmax(250px,1fr)}}@media(max-width:799px){main{padding:0 14px}.layout{grid-template-columns:1fr;gap:25px}.masthead{padding:18px 0;gap:12px;flex-wrap:wrap}.tools{width:100%}.tools button{flex:1}.cabinet{max-width:min(600px,calc((100svh - 260px)*.7317));min-width:280px}header{padding:14px;gap:14px;font-size:11px}.readout{padding:10px;gap:6px}.readout strong{font-size:14px}.readout small{font-size:8px}.panel{padding:20px}.panel h2{font-size:27px}.panel>p:not(.eyebrow){font-size:12px}.panel .eyebrow{font-size:8px}.primary{padding:12px;margin:14px 0 10px}.overlay{padding:16px}.leila{min-height:0}aside{max-width:600px;width:100%;margin:auto}.board,.field-guide{padding:20px}h1{font-size:27px}.overload{margin-top:10px}.controls{font-size:10px}.panel #overlay-hint{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* Focus mode uses the available viewport; native fullscreen is an optional enhancement. */
.readout{grid-template-columns:1.2fr 1fr .9fr .9fr 1.1fr}#sound-status:empty{display:none}#sound-status{margin:0 0 8px}.tools{justify-content:flex-end}.focus{height:100dvh;overflow:hidden}.focus>header,.focus>footer,.focus aside,.focus .masthead>div:first-child,.focus .leila{display:none}.focus main{width:100%;max-width:none;height:100%;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-left,0px));display:flex;flex-direction:column}.focus .masthead{padding:5px 0;margin:0;flex:none;justify-content:center;min-height:44px}.focus .tools{width:auto;justify-content:center;flex-wrap:nowrap;gap:6px}.focus .tools button{padding:8px 10px;min-height:36px;font-size:11px}.focus #sound-status{font-size:10px;text-align:center;line-height:1.3;margin:0;min-height:0;flex:none}.focus .layout{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;gap:0}.focus .cabinet{width:min(100%,calc((100dvh - 166px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*.7317));max-width:none;min-width:0;margin:auto}.focus .readout{padding:7px 10px;gap:8px}.focus .readout small{font-size:8px}.focus .readout strong{font-size:15px}.focus .screen{aspect-ratio:600/820;width:100%}.focus .overload{margin-top:6px;gap:4px 8px}.focus .overload small{font-size:10px}.focus .controls{font-size:10px;line-height:1.2;margin:5px 0}.focus .panel{max-height:100%;padding:20px}.focus .panel h2{font-size:30px}.focus .panel .primary{margin:14px 0 10px}.focus .screen{box-shadow:0 0 50px #37a1aa18}@media(max-width:799px){.focus .tools{width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.focus .tools button{padding:7px 3px;font-size:11px}.focus .readout{padding:6px;gap:4px}.focus .readout strong{font-size:13px}.focus .readout small{font-size:7px}}@media(max-height:500px){.focus .cabinet{width:min(100%,calc((100dvh - 136px)*.7317))}.focus .readout{padding:3px 6px}.focus .controls,.focus .overload small{display:none}.focus .panel{padding:12px}.focus .panel h2{font-size:22px}.focus .overlay{padding:8px}.focus #overlay-hint{display:none}}