@font-face{font-family:"Press Start 2P";src:url(/fonts/PressStart2P-Regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--bg:#0b0e1a;--panel:#131a2e;--text:#e6edf3;--muted:#8b97a8;--accent-mint:#5be3a0;--accent-amber:#ffd166;--accent-coral:#ff6b8b;--accent-sky:#7fb7ff;--accent:var(--accent-mint);--font-pixel:"Press Start 2P", "Courier New", monospace;--font-body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3{font-family:var(--font-pixel);margin:0;font-weight:400;line-height:1.4}p{margin:0}:focus-visible{outline:2px solid var(--text);outline-offset:2px}.screen{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:32px 16px;display:flex;position:relative}.screen-top-note{color:var(--muted);text-align:center;max-width:480px;font-size:13px}.pixel-button{font-family:var(--font-pixel);color:var(--accent);border:2px solid var(--accent);cursor:pointer;text-transform:uppercase;background:0 0;border-radius:2px;padding:14px 22px;font-size:13px;transition:background 80ms ease-out,color 80ms ease-out}.pixel-button:hover:not(:disabled),.pixel-button:active:not(:disabled){background:var(--accent);color:var(--bg)}.pixel-button:disabled{color:var(--muted);border-color:var(--muted);cursor:not-allowed}.pixel-button--small{padding:10px 14px;font-size:10px}.pixel-button--quiet{color:var(--muted);border-color:var(--panel)}.pixel-button--quiet:hover:not(:disabled),.pixel-button--quiet:active:not(:disabled){background:var(--panel);color:var(--text)}.title-logo{text-align:center;color:var(--text);text-shadow:3px 3px 0 var(--panel), 6px 6px 0 #5be3a040;font-size:clamp(22px,4.5vw,42px)}.title-logo span{color:var(--accent)}.title-actions{flex-direction:column;gap:14px;min-width:320px;display:flex}.title-corner{font-family:var(--font-pixel);color:var(--muted);text-align:right;font-size:11px;position:absolute;top:20px;right:24px}.title-corner strong{color:var(--accent-amber);font-weight:400}.title-footer{align-items:center;gap:12px;display:flex}.title-credit{color:var(--muted);font-size:12px}.tip-dialog{max-width:420px}.tip-dialog-note{color:var(--muted);font-size:13px}.tip-dialog-note strong{color:var(--text);font-weight:400}.title-screen{overflow:hidden}.attract-layer{opacity:.4;pointer-events:none;justify-content:center;align-items:center;animation:1.2s ease-out attract-in;display:flex;position:absolute;inset:0}.attract-canvas{image-rendering:pixelated;aspect-ratio:4/3;width:min(100%,960px)}@keyframes attract-in{0%{opacity:0}to{opacity:.4}}.overlay-dialog{border:2px solid var(--accent);background:var(--panel);color:var(--text);border-radius:2px;width:calc(100vw - 48px);max-width:520px;padding:28px}.overlay-dialog::backdrop{background:#0b0e1acc}.overlay-dialog h2{color:var(--accent);margin-bottom:16px;font-size:14px}.overlay-dialog p{margin-bottom:12px}.overlay-dialog .dialog-actions{justify-content:flex-end;margin-top:16px;display:flex}.play-screen{gap:10px;padding:16px}.play-stage{flex:1;justify-content:center;align-self:stretch;align-items:center;min-height:0;display:flex}.canvas-frame{border:2px solid var(--panel);box-sizing:content-box;position:relative}.game-canvas{image-rendering:pixelated;background:var(--bg);display:block}.scanlines{pointer-events:none;background:repeating-linear-gradient(#e6edf30f 0 1px,#0000 1px 4px);position:absolute;inset:0}.pause-overlay{flex-direction:column;justify-content:center;align-items:center;gap:20px;display:flex;position:absolute;inset:0}.pause-overlay h2{color:var(--text);font-size:18px}.pause-actions{flex-direction:column;align-items:center;gap:12px;display:flex}.key-hint{font-family:var(--font-pixel);color:var(--muted);font-size:9px;transition:opacity .6s ease-out}.key-hint--faded{opacity:0}.gameover-title{color:var(--accent-coral);font-size:clamp(20px,4vw,32px)}.gameover-score{font-family:var(--font-pixel);color:var(--accent-amber);font-size:clamp(22px,4vw,36px)}.gameover-stats{background:var(--panel);border-radius:2px;flex-direction:column;gap:8px;min-width:320px;margin:0;padding:16px 20px;display:flex}.stat-row{justify-content:space-between;align-items:center;gap:24px;display:flex}.stat-row dt{color:var(--muted);font-size:13px}.stat-row dd{align-items:center;gap:8px;margin:0;display:flex}.sprite-thumb{image-rendering:pixelated;width:28px;height:28px}.gameover-actions{flex-direction:column;align-items:center;gap:12px;display:flex}.initials-entry{flex-direction:column;align-items:center;gap:8px;display:flex}.initials-label{font-family:var(--font-pixel);color:var(--accent);font-size:10px}.initials-slots{gap:10px;display:flex}.initials-slot{font-family:var(--font-pixel);color:var(--text);border-bottom:3px solid var(--panel);padding:4px 6px;font-size:22px}.initials-slot--active{color:var(--accent);border-bottom-color:var(--accent)}.initials-help{color:var(--muted);font-size:12px}.initials-saved{font-family:var(--font-pixel);color:var(--accent-mint);font-size:11px}.capture-title{color:var(--text);font-size:16px}.capture-steps{color:var(--muted);text-align:left;flex-direction:column;gap:6px;max-width:440px;margin:0;padding-left:20px;font-size:14px;display:flex}.capture-message{color:var(--muted);font-size:13px}.capture-message--error{color:var(--accent-coral)}.capture-empty{border:2px solid var(--accent-amber);background:var(--panel);border-radius:2px;max-width:440px;padding:14px 18px;font-size:14px}.capture-empty ul{color:var(--muted);margin:8px 0 0;padding-left:20px}.capture-dropzone{border:2px dashed var(--panel);color:var(--muted);text-align:center;border-radius:2px;max-width:440px;padding:18px 24px;font-size:13px}.capture-file-link{color:var(--accent-sky);font:inherit;cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.capture-scan{flex-direction:column;align-items:center;gap:12px;display:flex}.capture-preview{border:2px solid var(--panel);border-radius:2px;max-width:min(480px,90vw);height:auto}.capture-progress{background:var(--panel);border-radius:2px;width:min(480px,90vw);height:8px;overflow:hidden}.capture-progress-fill{background:var(--accent);height:100%;transition:width .2s linear}.capture-found{font-family:var(--font-pixel);color:var(--accent);font-size:11px}.roster-screen{justify-content:flex-start;gap:16px}.roster-topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:min(1080px,100%);display:flex}.roster-title{font-size:14px}.roster-controls{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.sprite-size-picker{gap:4px;display:flex}.sprite-size-option{font-family:var(--font-pixel);color:var(--muted);border:2px solid var(--panel);cursor:pointer;background:0 0;border-radius:2px;padding:6px 8px;font-size:10px;transition:background 80ms ease-out,color 80ms ease-out}.sprite-size-option--active{color:var(--bg);background:var(--accent);border-color:var(--accent)}.roster-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;width:min(1080px,100%);margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.roster-footer{align-items:center;gap:16px;display:flex}.face-card{background:var(--panel);border-radius:2px;flex-direction:column;align-items:center;gap:8px;padding:12px;display:flex}.face-card-visual{justify-content:center;align-items:center;display:flex;position:relative}.face-card-crop{border-radius:2px;animation-name:crop-fade-out;animation-timing-function:ease-out;animation-fill-mode:forwards;position:absolute;inset:0}.face-card-sprite{opacity:0;justify-content:center;align-items:center;animation-name:sprite-fade-in;animation-timing-function:ease-out;animation-fill-mode:forwards;display:flex;position:absolute;inset:0}@keyframes crop-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sprite-fade-in{0%{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.face-card-name{background:var(--bg);width:100%;color:var(--text);text-align:center;border:2px solid #0000;border-radius:2px;padding:6px 8px;font-size:13px}.face-card-name:focus{border-color:var(--accent);outline:none}.face-card-actions{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.face-card-me{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}.face-card-me input{accent-color:var(--accent)}.face-card-remove{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:2px;padding:2px 6px;font-size:18px;line-height:1}.face-card-remove:hover{color:var(--accent-coral)}.toggle{cursor:pointer;color:var(--muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.toggle input{opacity:0;width:1px;height:1px;position:absolute}.toggle-track{border:2px solid var(--muted);border-radius:2px;align-items:center;width:34px;height:18px;padding:1px;transition:border-color 80ms ease-out;display:inline-flex}.toggle-knob{background:var(--muted);width:12px;height:12px;transition:transform 80ms ease-out,background 80ms ease-out}.toggle input:checked+.toggle-track{border-color:var(--accent)}.toggle input:checked+.toggle-track .toggle-knob{background:var(--accent);transform:translate(16px)}.toggle input:focus-visible+.toggle-track{outline:2px solid var(--text);outline-offset:2px}.toast{border:2px solid var(--accent-sky);background:var(--panel);color:var(--text);border-radius:2px;align-items:center;gap:12px;padding:8px 14px;font-size:13px;display:flex}.toast--warn{border-color:var(--accent-amber)}.toast-dismiss{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:16px}.lab{flex-direction:column;align-items:flex-start;gap:12px;min-height:100vh;padding:24px;display:flex}.lab h1{font-size:16px}.lab-status,.lab-summary,.lab-toggle{color:var(--muted);align-items:center;gap:8px;font-size:13px;display:flex}.lab-canvas{border:2px solid var(--panel);max-width:100%}.lab-sprites{flex-wrap:wrap;gap:10px;display:flex}.lab-sprite{color:var(--muted);flex-direction:column;align-items:center;gap:4px;font-size:11px;display:flex}.settings-dialog{max-width:460px}.settings-row{justify-content:space-between;align-items:center;gap:16px;padding:8px 0;display:flex}.settings-row--danger{border-top:1px solid #8b97a840;justify-content:flex-start;margin-top:8px;padding-top:16px}.settings-label{color:var(--muted);font-size:13px}.settings-hint{color:var(--muted);opacity:.7;font-size:11px}.settings-row input[type=range]{accent-color:var(--accent);width:180px}.room-chip{font-family:var(--font-pixel);color:var(--accent);border:2px solid var(--panel);border-radius:2px;align-items:center;gap:8px;padding:8px 12px;font-size:10px;display:inline-flex}.room-leave{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:14px;line-height:1}.room-leave:hover{color:var(--accent-coral)}.room-input{background:var(--bg);border:2px solid var(--panel);color:var(--text);border-radius:2px;width:220px;padding:8px 10px;font-size:14px}.room-input:focus{border-color:var(--accent);outline:none}.room-input--code{font-family:var(--font-pixel);text-transform:uppercase;text-align:center;letter-spacing:4px;width:110px;font-size:14px}.room-join{align-items:center;gap:8px;display:flex}.room-panel{border:2px solid var(--panel);z-index:3;background:#131a2ee0;border-radius:2px;width:230px;padding:10px 12px;position:absolute;top:76px;right:16px}.gameover-screen .room-panel{width:min(320px,100%);position:static}.room-panel-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.room-panel-code{font-family:var(--font-pixel);color:var(--accent);align-items:center;gap:6px;font-size:10px;display:inline-flex}.room-dot{border-radius:50%;width:6px;height:6px;display:inline-block}.room-dot--live{background:var(--accent-mint)}.room-dot--connecting{background:var(--accent-amber)}.room-dot--error{background:var(--accent-coral)}.room-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.room-row{color:var(--text);border-radius:2px;justify-content:space-between;align-items:baseline;gap:8px;padding:2px 4px;font-size:12px;display:flex}.room-row--self{background:#5be3a01f}.room-row--stale{opacity:.45}.room-row-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.room-row-over{color:var(--accent-coral)}.room-row-score{font-family:var(--font-pixel);color:var(--accent-amber);white-space:nowrap;font-size:9px}.room-row-score small{color:var(--muted)}.room-panel-hint{color:var(--muted);margin-top:8px;font-size:11px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.small-screen-note{display:none}@media (max-width:700px){.small-screen-note{background:var(--panel);color:var(--muted);border-bottom:2px solid var(--accent);text-align:center;padding:8px 16px;font-size:13px;display:block}}.error-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:32px;display:flex}.error-screen h1{color:var(--accent-coral);font-size:18px}.error-screen p{color:var(--muted);max-width:420px}.roster-debug-link{color:var(--muted,#9aa);font-size:.85rem;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}