.app{display:grid;grid-template-columns:1fr 320px;gap:16px;padding:16px;max-width:1200px;margin:0 auto;min-height:100vh;box-sizing:border-box}.game-column,.side-column{display:flex;flex-direction:column;gap:12px}.card{background:var(--bg-card);border-radius:0;padding:14px;border:2px solid var(--border);box-shadow:inset 2px 2px 0 var(--border-hi),inset -2px -2px 0 var(--border-lo)}.card h2{margin:0 0 12px;font-size:14px;color:var(--accent);letter-spacing:1px;text-shadow:2px 2px 0 #000}.canvas-wrap{position:relative;width:100%;display:flex;justify-content:center;background:var(--bg-deep);border-radius:0;border:2px solid var(--border);box-shadow:inset 2px 2px 0 var(--border-hi),inset -2px -2px 0 var(--border-lo),inset 0 0 80px #000;overflow:hidden;aspect-ratio:8 / 5}.canvas-wrap canvas{display:block;max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.canvas-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);z-index:2}.hud{display:flex;flex-direction:column;gap:8px}.hud-row{display:flex;align-items:center;gap:10px}.hp-label{width:60px;font-size:12px;color:var(--text-dim)}.hp-bar{flex:1;height:18px;background:var(--bg-deep);border-radius:0;overflow:hidden;border:2px solid var(--border);box-shadow:inset 1px 1px 0 var(--border-lo);position:relative}.hp-fill{height:100%;transition:width .25s steps(8,end);background-image:repeating-linear-gradient(90deg,transparent 0 7px,rgba(0,0,0,.45) 7px 8px)}.hp-fill.player{background-color:var(--hp-player)}.hp-fill.opponent{background-color:var(--hp-opp)}.hp-value{width:56px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--text)}.stamina-bar{flex:1;height:10px;background:var(--bg-deep);border-radius:0;overflow:hidden;border:2px solid var(--border);box-shadow:inset 1px 1px 0 var(--border-lo)}.stamina-fill{height:100%;transition:width .15s steps(8,end);background-image:repeating-linear-gradient(90deg,transparent 0 5px,rgba(0,0,0,.45) 5px 6px)}.stamina-fill.high{background-color:var(--stam-high)}.stamina-fill.mid{background-color:var(--stam-mid)}.stamina-fill.low{background-color:var(--stam-low);animation:stam-pulse .8s steps(2,end) infinite}@keyframes stam-pulse{0%,to{opacity:1}50%{opacity:.5}}.timer{text-align:center;font-size:22px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:2px;text-shadow:2px 2px 0 #000}.status-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}.led{display:inline-block;width:12px;height:12px;border-radius:0;margin-right:6px;vertical-align:middle;border:1px solid #000}.led.on{background:var(--hp-player);box-shadow:0 0 6px var(--hp-player)}.led.off{background:var(--hp-opp);box-shadow:0 0 6px var(--hp-opp)}.led.wait{background:var(--accent);box-shadow:0 0 6px var(--accent)}.game-status{color:var(--accent);font-size:12px;font-weight:700;background:var(--bg-body);padding:3px 10px;border-radius:0;border:1px solid var(--accent);text-shadow:1px 1px 0 #000}.game-status.active{color:var(--hp-player);border-color:var(--hp-player)}.game-status.paused{color:var(--accent);border-color:var(--accent)}button{background:var(--bg-card);border:none;border-top:2px solid var(--border-hi);border-left:2px solid var(--border-hi);border-right:2px solid var(--border-lo);border-bottom:2px solid var(--border-lo);color:var(--text);padding:10px 16px;border-radius:0;font-size:14px;font-weight:700;cursor:pointer;text-shadow:1px 1px 0 #000}button:hover:not(:disabled){background:#241a14}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}.btn-connect{background:var(--btn-primary);width:100%;color:#fff}.btn-connect:hover:not(:disabled){background:#b07d28}.btn-disconnect{background:var(--btn-danger);width:100%;color:#fff}.btn-disconnect:hover:not(:disabled){background:#962828}.btn-row{display:flex;gap:6px;flex-wrap:wrap}.btn-row button{flex:1 1 auto;min-width:80px}.btn-primary{background:var(--btn-primary);color:#fff}.btn-primary:hover:not(:disabled){background:#b07d28}.btn-warn{background:var(--btn-warn);color:#fff}.btn-warn:hover:not(:disabled){background:#965c1c}.btn-danger{background:var(--btn-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#962828}.keymap{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:13px;margin-bottom:12px}.keymap kbd{background:var(--bg-deep);border:1px solid var(--border);border-bottom-width:2px;border-radius:0;padding:1px 6px;font-family:inherit;color:var(--accent);font-size:12px}.log-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.log-controls h2{margin:0}.log-controls button{padding:4px 10px;font-size:12px;width:auto}.log{background:var(--bg-deep);border-radius:0;padding:10px 12px;height:280px;overflow-y:auto;font-size:12px;line-height:1.6;border:1px solid var(--border);box-shadow:inset 1px 1px 0 var(--border-lo)}.log .time{color:var(--text-dim)}.log .ok{color:var(--hp-player)}.log .err{color:var(--hp-opp)}.log .info{color:var(--text)}.log .warn{color:var(--accent)}.log .fb{color:var(--stam-high)}.training-help{color:var(--text-dim);font-size:12px;line-height:1.5;margin:-4px 0 10px}.training-reading{color:var(--accent);font-family:monospace;font-size:12px;margin-bottom:10px}.training-actions{align-items:center;color:var(--text-dim);display:flex;font-size:12px;gap:8px;margin-top:8px}.training-actions span{margin-right:auto}.training-actions button{font-size:11px;padding:5px 8px}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080404c7;color:var(--text);gap:16px;text-align:center;z-index:3}.overlay h2{font-size:28px;margin:0;text-shadow:2px 2px 0 #000}.overlay .countdown{font-size:80px;font-weight:700;color:var(--accent);text-shadow:3px 3px 0 #000}.calibration-notice{color:#b9d7ff;font-size:16px;line-height:1.6;background:#0f2d50e0;border:1px solid #4b9cff;border-radius:8px;padding:10px 18px}.game-notice{position:absolute;top:24px;left:50%;transform:translate(-50%);z-index:2;color:#ffe8a3;background:#5c330af2;border:1px solid #ffcc55;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:700;white-space:nowrap;box-shadow:0 4px 18px #00000059}.overlay .result-win{color:var(--hp-player)}.overlay .result-lose{color:var(--hp-opp)}.overlay .result-draw{color:var(--accent)}.difficulty-picker{display:flex;gap:8px;margin-top:4px}.btn-difficulty{background:var(--bg-deep);color:var(--text-dim);border:2px solid var(--border);padding:8px 16px;font-size:14px;letter-spacing:1px;cursor:pointer;font-family:inherit;box-shadow:inset 1px 1px 0 var(--border-lo),inset -1px -1px 0 var(--border-hi)}.btn-difficulty:hover{color:var(--text);border-color:var(--border-hi)}.btn-difficulty.selected{background:var(--btn-primary);color:#fff;border-color:var(--accent);box-shadow:inset 1px 1px #c89040,inset -1px -1px #5a3a10}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.btn-mode{background:var(--bg-deep);color:var(--text-dim);border:2px solid var(--border);padding:8px 10px;font-size:13px}.btn-mode.selected{background:var(--btn-primary);color:#fff;border-color:var(--accent)}.room-panel{display:flex;flex-direction:column;gap:10px}.room-code-row{display:grid;grid-template-columns:1fr auto;gap:8px}.room-code-row input{background:var(--bg-deep);color:var(--text);border:2px solid var(--border);padding:8px 10px;font-size:14px;outline:none;box-shadow:inset 1px 1px 0 var(--border-lo)}.room-code-row input:focus{border-color:var(--accent)}.room-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.room-status,.room-state{color:var(--text-dim);font-size:12px;line-height:1.5}.room-state.muted{color:var(--text-dim)}.support-warning{background:#3a1414;color:#faa;padding:6px 10px;border-radius:0;font-size:12px;margin-bottom:8px;border:1px solid var(--hp-opp)}@media (max-width: 900px){.app{grid-template-columns:1fr}}.app-shell{min-height:100vh;display:flex;flex-direction:column;box-sizing:border-box}.topbar{display:flex;align-items:center;gap:20px;padding:10px 18px;background:var(--bg-card);border-bottom:2px solid var(--border);box-shadow:inset 0 -2px 0 var(--border-lo);position:sticky;top:0;z-index:50}.topbar .brand{font-size:16px;font-weight:700;color:var(--accent);text-decoration:none;letter-spacing:1px;text-shadow:2px 2px 0 #000}.topnav{display:flex;gap:4px;flex:1}.topnav a,.topbar-user a{color:var(--text-dim);text-decoration:none;font-size:13px;padding:4px 10px;border:2px solid transparent}.topnav a:hover,.topbar-user a:hover{color:var(--text)}.topnav a.active,.topbar-user a.active{color:var(--accent);border-color:var(--border);background:var(--bg-deep);box-shadow:inset 1px 1px 0 var(--border-lo)}.topbar-user{display:flex;align-items:center;gap:8px}.topbar-username{color:var(--text)}.topbar-dim{color:var(--text-dim);font-size:13px}.btn-link{background:none;border:none;color:var(--text-dim);font-size:13px;cursor:pointer;padding:4px 10px;font-family:inherit}.btn-link:hover{color:var(--text)}.page-container{flex:1;width:100%;box-sizing:border-box}.page{max-width:1200px;margin:0 auto;padding:16px}.page-card{max-width:640px;margin:24px auto}.page-card-narrow{max-width:420px}.page-desc{color:var(--text-dim);font-size:13px;line-height:1.7}.page-hint{color:var(--text-dim);font-size:12px;font-style:italic}.auth-form{display:flex;flex-direction:column;gap:14px;margin-bottom:14px}.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text)}.auth-form input{background:var(--bg-deep);border:2px solid var(--border);box-shadow:inset 2px 2px 0 var(--border-lo);color:var(--text);font-family:inherit;font-size:14px;padding:8px 10px;outline:none}.auth-form input:focus{border-color:var(--border-hi)}.auth-error{color:var(--stam-low);font-size:13px;border:2px solid var(--btn-danger);padding:8px 10px;background:var(--bg-deep)}.auth-form button[type=submit]{font-family:inherit;font-size:14px;padding:10px;cursor:pointer}.auth-form button[type=submit]:disabled{opacity:.6;cursor:wait}.page-hint a{color:var(--accent)}.lobby-quick{display:flex;align-items:center;gap:12px;padding:14px;border:2px dashed var(--border);background:var(--bg-deep);margin-bottom:16px}.lobby-quick button{font-family:inherit;font-size:15px;padding:10px 22px;cursor:pointer}.lobby-room{display:flex;flex-direction:column;gap:10px}.room-code-display{display:flex;align-items:baseline;gap:10px;justify-content:center;margin:6px 0 14px;color:var(--text-dim);font-size:14px}.room-code-big{font-size:34px;letter-spacing:8px;color:var(--accent);text-shadow:2px 2px 0 #000;font-weight:700}.room-members{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.room-member{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-deep);border:2px solid var(--border);font-size:13px;color:var(--text-dim)}.room-member.ready{border-color:var(--hp-player);color:var(--text)}.room-member-name{flex:1;color:var(--text);font-size:14px}.room-code-row input{flex:1;background:var(--bg-deep);border:2px solid var(--border);box-shadow:inset 2px 2px 0 var(--border-lo);color:var(--accent);font-family:inherit;font-size:20px;letter-spacing:4px;padding:8px 10px;outline:none;text-align:center}.room-code-row input:focus{border-color:var(--border-hi)}.queue-status{display:flex;align-items:center;gap:8px;color:var(--accent);font-size:15px;letter-spacing:1px;text-shadow:1px 1px 0 #000;animation:queue-pulse 1.2s ease-in-out infinite}@keyframes queue-pulse{0%,to{opacity:1}50%{opacity:.55}}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.stat-box{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--bg-deep);border:2px solid var(--border);text-align:center}.stat-box.stat-rating{border-color:var(--btn-primary)}.stat-label{font-size:12px;color:var(--text-dim);letter-spacing:1px}.stat-value{font-size:20px;color:var(--text);font-weight:700}.stat-rating .stat-value{color:var(--accent);font-size:26px;text-shadow:2px 2px 0 #000}.match-table{width:100%;border-collapse:collapse;font-size:13px}.match-table th{text-align:left;color:var(--text-dim);font-weight:400;padding:6px 8px;border-bottom:2px solid var(--border);font-size:12px;letter-spacing:1px}.match-table td{padding:8px;border-bottom:1px solid var(--border-lo);color:var(--text)}.match-table tr.row-me{background:#ffb00014}.result-badge{display:inline-block;padding:2px 10px;font-size:12px;border:1px solid}.result-badge.win{color:var(--hp-player);border-color:var(--hp-player)}.result-badge.loss{color:var(--hp-opp);border-color:var(--hp-opp)}.result-badge.draw{color:var(--text-dim);border-color:var(--text-dim)}.delta-plus{color:var(--hp-player)}.delta-minus{color:var(--hp-opp)}.match-time{color:var(--text-dim);font-size:12px}.rank-1{color:var(--accent);font-weight:700}.rank-2,.rank-3{color:var(--stam-high);font-weight:700}.rating-line{color:var(--text-dim);font-size:13px;margin-bottom:14px}.rating-line b{color:var(--accent);font-size:16px;margin-left:4px}.rating-hint a{color:var(--text-dim)}.end-reason{color:var(--text-dim);font-size:13px;font-style:italic;margin:4px 0 0}.match-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:12px 0;padding:10px 14px;background:var(--bg-deep);border:2px solid var(--border);color:var(--text);font-size:13px}.match-stats span:before{content:"�� ";color:var(--accent)}.match-stats span:first-child:before{content:""}@font-face{font-family:Ark Pixel;src:url(/fonts/ark-pixel-12px.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{color-scheme:dark;font-family:Ark Pixel,Cascadia Code,Consolas,monospace;--bg-body: #0a0808;--bg-card: #161010;--bg-deep: #050303;--border: #3a2410;--border-hi: #5a3a1a;--border-lo: #1a0c04;--accent: #ffb000;--text: #d8c8b0;--text-dim: #7a6a58;--hp-player: #3ad060;--hp-opp: #cc3030;--stam-high: #e8c040;--stam-mid: #e88030;--stam-low: #d83030;--btn-primary: #996622;--btn-danger: #7a2020;--btn-warn: #7a4a10}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;background:var(--bg-body);color:var(--text);text-shadow:1px 1px 0 #000;-webkit-font-smoothing:none;font-smooth:never}button{font-family:inherit}