:root{--bg-0: #1a1d18;--bg-1: #232720;--bg-2: #2d322a;--bg-3: #3a4035;--panel: #1f231d;--border: rgba(220, 240, 200, .08);--border-strong: rgba(220, 240, 200, .18);--text-0: #e8efd9;--text-1: #b8c39e;--text-2: #76806a;--screen-bg: #0a1410;--screen-glow: #9bbc0f;--accent: #c8e375;--accent-yellow: #ffd96b;--accent-warm: #d9a85e;--accent-green: #84c66f;--accent-red: #e07a6e;--shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7);--shadow-md: 0 6px 18px -6px rgba(0, 0, 0, .55);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--transition: .16s cubic-bezier(.4, 0, .2, 1);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Pretendard,system-ui,sans-serif;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%}body{background:radial-gradient(ellipse at 30% 0%,rgba(155,188,15,.04),transparent 55%),radial-gradient(ellipse at bottom,rgba(217,168,94,.03),transparent 60%),var(--bg-0);color:var(--text-0);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app-shell{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:1fr 360px;grid-template-rows:auto 1fr;grid-template-areas:"topbar topbar" "stage  chat";overflow:hidden}.topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--panel);border-bottom:1px solid var(--border);min-height:48px;flex-wrap:wrap}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600}.topbar-divider{width:1px;height:14px;background:var(--border-strong)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-2)}.status-dot.status-live{background:var(--accent-green);box-shadow:0 0 10px #84c66f8c;animation:pulse 2.4s ease-in-out infinite}.status-dot.status-connecting{background:var(--accent-yellow);animation:pulse 1.2s ease-in-out infinite}.status-dot.status-offline,.status-dot.status-no-rom{background:var(--accent-red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.status-text{letter-spacing:.08em;text-transform:uppercase;font-size:10px;color:var(--text-1);font-weight:700}.player-count{color:var(--text-0);font-variant-numeric:tabular-nums;font-weight:700}.player-count small{font-weight:500;color:var(--text-2);margin-left:3px;font-size:10px}.cartridge-name{color:var(--text-2);font-weight:500;font-size:11px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.host-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-2);color:var(--text-1);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.host-pill-icon{font-size:12px}.host-pill-you{background:linear-gradient(135deg,#ffd96b33,#ffd96b0d);border-color:#ffd96b8c;color:var(--accent-yellow);box-shadow:0 0 14px #ffd96b33}.host-pill-vacant{color:var(--text-2);border-style:dashed}.take-control-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(200,227,117,.45);background:linear-gradient(180deg,#c8e3752e,#c8e3750f);color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background var(--transition),transform var(--transition)}.take-control-button:hover{background:linear-gradient(180deg,#c8e3754d,#c8e3751f)}.take-control-button:active{transform:scale(.97)}.stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;overflow:auto;min-width:0}.screen-wrap{position:relative;width:min(720px,calc(100vw - 428px));aspect-ratio:160 / 144;border-radius:var(--radius-lg);background:var(--screen-bg);border:2px solid var(--border-strong);box-shadow:var(--shadow-lg),0 0 0 1px #0006 inset,0 0 80px -20px #9bbc0f26;overflow:hidden;transition:border-color var(--transition),box-shadow var(--transition)}.screen-wrap-host{border-color:var(--accent-yellow);box-shadow:var(--shadow-lg),0 0 0 1px #0006 inset,0 0 0 4px #ffd96b2e,0 0 60px -10px #ffd96b80}.host-strip{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(720px,calc(100vw - 428px));padding:12px 16px;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--radius-md);transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}.host-strip-left{display:flex;align-items:center;gap:12px;min-width:0}.host-strip-icon{font-size:22px;filter:drop-shadow(0 0 6px rgba(0,0,0,.4));flex-shrink:0}.host-strip-text{display:flex;flex-direction:column;gap:1px;min-width:0}.host-strip-tag{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}.host-strip-name{font-size:15px;font-weight:700;color:var(--text-0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}.host-strip-you{background:linear-gradient(135deg,#ffd96b33,#ffd96b0d);border-color:#ffd96b8c;box-shadow:0 0 22px #ffd96b2e}.host-strip-you .host-strip-tag,.host-strip-you .host-strip-name{color:var(--accent-yellow)}.host-strip-vacant{border-style:dashed;opacity:.92}.host-strip-vacant .host-strip-name{color:var(--text-2);font-weight:600}.take-control-large{font-size:12px;padding:9px 18px}.audio-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text-0);font-size:16px;width:36px;height:32px;border-radius:999px;cursor:pointer;display:grid;place-items:center;transition:background var(--transition)}.audio-toggle:hover{background:var(--bg-3)}.game-screen{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;background:var(--screen-bg)}.screen-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:16px;font-weight:800;letter-spacing:.32em;color:var(--text-2);background:#000000d9;pointer-events:none}.touch-controls{display:none;grid-template-columns:auto 1fr auto;align-items:center;width:100%;max-width:480px;gap:20px;padding:14px 18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg)}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:3px}.dpad-center{background:var(--bg-3);border-radius:4px}.face-buttons{display:flex;gap:16px;justify-self:end;align-items:center;transform:rotate(-12deg)}.menu-buttons{display:none;gap:14px}.control-button,.round-button,.pill-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--bg-3),var(--bg-2));color:var(--text-0);font-weight:800;font-size:16px;cursor:pointer;display:grid;place-items:center;-webkit-user-select:none;user-select:none;touch-action:none;transition:transform var(--transition),filter var(--transition);box-shadow:0 3px #00000080,inset 0 1px #ffffff0d}.control-button{width:52px;height:52px;border-radius:10px}.round-button{width:64px;height:64px;border-radius:50%;font-size:20px;background:linear-gradient(180deg,#4a3340,#382230);border-color:#d9a85e66;color:var(--accent-warm)}.round-button:nth-child(2){background:linear-gradient(180deg,#3d4a32,#2a3522);border-color:#c8e37566;color:var(--accent)}.pill-button{min-width:70px;height:30px;font-size:10px;letter-spacing:.14em;border-radius:999px;padding:0 12px;color:var(--text-1)}.control-button:active,.round-button:active,.pill-button:active,.is-pressed{transform:translateY(2px);box-shadow:0 1px #00000080,inset 0 1px #ffffff0a;filter:brightness(1.25)}.chat-toggle{display:none;position:fixed;right:14px;bottom:14px;z-index:20;align-items:center;gap:8px;padding:11px 15px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-2);color:var(--text-0);font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-md)}.chat-toggle-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent-red);color:#fff;font-size:10px;font-weight:800}.chat-panel{grid-area:chat;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--border);min-height:0}.chat-panel-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-1)}.chat-nickname{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;flex:1;min-width:0;text-align:left;padding:4px 6px;border-radius:var(--radius-sm);transition:background var(--transition)}.chat-nickname:hover{background:var(--bg-2)}.chat-nickname-label{font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--text-2)}.chat-nickname-name{font-size:13px;font-weight:700;color:var(--text-0);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-meta{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--text-2);text-transform:uppercase}.chat-collapse{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--text-2);cursor:pointer;font-size:16px;width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;transition:background var(--transition),color var(--transition)}.chat-collapse:hover{background:var(--bg-2);color:var(--text-0)}.chat-scroll{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--bg-3) transparent}.chat-scroll::-webkit-scrollbar{width:6px}.chat-scroll::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:999px}.chat-empty{margin:auto;color:var(--text-2);font-size:13px;font-style:italic}.chat-message{display:flex;flex-direction:column;gap:3px;padding:8px 11px;background:var(--bg-2);border-radius:var(--radius-md);max-width:90%;align-self:flex-start;border:1px solid transparent}.chat-message-mine{align-self:flex-end;background:linear-gradient(135deg,#c8e37526,#c8e3750d);border-color:#c8e37547}.chat-message-meta{display:flex;align-items:center;gap:6px;font-size:10px}.chat-message-name{font-weight:700;color:var(--text-1)}.chat-message-time{color:var(--text-2)}.chat-message-text{font-size:13px;line-height:1.4;color:var(--text-0);word-break:break-word}.chat-error{margin:0 14px 6px;padding:7px 11px;background:#e07a6e1f;border:1px solid rgba(224,122,110,.4);border-radius:var(--radius-sm);color:var(--accent-red);font-size:12px}.chat-input-form{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--border);background:var(--bg-1)}.chat-input{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text-0);border-radius:var(--radius-sm);padding:9px 11px;font-size:13px;outline:none;transition:border-color var(--transition),background var(--transition)}.chat-input:focus{border-color:var(--accent);background:var(--bg-3)}.chat-input::placeholder{color:var(--text-2)}.chat-send{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(200,227,117,.45);background:linear-gradient(180deg,#c8e37533,#c8e3750f);color:var(--accent);font-weight:800;font-size:12px;letter-spacing:.04em;padding:0 14px;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition),opacity var(--transition)}.chat-send:disabled{opacity:.35;cursor:not-allowed}.chat-send:not(:disabled):hover{background:linear-gradient(180deg,#c8e3754d,#c8e3751a)}@media (max-width: 900px){.app-shell{grid-template-columns:1fr;grid-template-areas:"topbar" "stage"}.topbar{padding:9px 14px}.stage{padding:14px 10px 90px;gap:12px}.screen-wrap,.host-strip{width:100%;max-width:540px}.touch-controls,.menu-buttons{display:grid}.menu-buttons{display:flex}.chat-toggle{display:inline-flex}.chat-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);z-index:30;transform:translate(100%);transition:transform var(--transition);box-shadow:var(--shadow-lg)}.chat-panel.chat-panel-open{transform:translate(0)}}@media (max-width: 480px){.topbar{padding:8px 12px;gap:8px;font-size:11px}.topbar-left,.topbar-right{gap:8px}.cartridge-name{max-width:80px;font-size:10px}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}.control-button{width:46px;height:46px;font-size:14px}.round-button{width:56px;height:56px;font-size:18px}.chat-panel{width:100vw}}@media (min-width: 901px){.chat-collapse{display:none}}@media (min-width: 1280px){.app-shell{grid-template-columns:1fr 400px}.screen-wrap{width:min(820px,calc(100vw - 468px))}}