:root { --ink:#f7efcb; --pink:#ff3cac; --cyan:#36f9f6; --violet:#7727ff; --bg:#090611; }
* { box-sizing:border-box; } body { margin:0; overflow:hidden; background:var(--bg); color:var(--ink); font-family:"Space Mono",monospace; }
#emulator-stage { display:none; width:100%; height:clamp(260px,56vw,440px); min-height:260px; overflow:hidden; position:relative; background:#02030a; }
#emulator-host { width:100%; height:100%; }
#emulator-host iframe,#emulator-host canvas { width:100% !important; height:100% !important; max-width:100%; }
#bios-control { display:none; gap:14px; align-items:center; margin:0 0 12px; flex-wrap:wrap; }
#bios-control label { font:inherit; cursor:pointer; border:1px solid var(--cyan); background:#140e29; color:var(--cyan); padding:11px 14px; box-shadow:4px 4px 0 var(--pink); letter-spacing:.06em; font-size:11px; }
#bios-file { display:none; }
#bios-name { font-size:11px; color:#d4c8df; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hosted-disc-selector { display:flex; gap:10px; flex-wrap:wrap; }
#hosted-disc-selector[hidden] { display:none; }
#hosted-disc-selector button { padding:11px 14px; font-size:10px; }
canvas { display:block; } #hud { position:fixed; z-index:3; inset:0 0 auto; padding:26px 32px; display:flex; justify-content:space-between; pointer-events:none; text-shadow:0 0 12px var(--cyan); font-size:10px; letter-spacing:.12em; }.brand { font-family:"Press Start 2P"; color:var(--cyan); font-size:14px; }.status { color:#c8b7df; }
#crosshair { position:fixed; z-index:3; left:50%; top:50%; color:var(--cyan); font-size:25px; transform:translate(-50%,-50%); text-shadow:0 0 8px var(--cyan); pointer-events:none; opacity:0; }
#prompt { display:none; position:fixed; z-index:4; left:50%; bottom:45px; transform:translateX(-50%); padding:13px 17px; gap:12px; align-items:center; background:#110b23d9; border:1px solid var(--cyan); box-shadow:0 0 20px #36f9f655; font-size:11px; }.active { display:flex !important; }.active b { color:var(--pink); }
#world-prompt{display:none;position:fixed;z-index:5;left:50%;bottom:92px;transform:translateX(-50%);padding:11px 15px;gap:10px;background:#081622e8;border:1px solid var(--pink);box-shadow:0 0 20px #ff3cac55;font-size:10px}#world-prompt.visible{display:flex}#world-prompt b{color:var(--cyan)}#world-announcement{position:fixed;z-index:9;top:88px;left:50%;transform:translateX(-50%) translateY(-12px);max-width:min(600px,85vw);padding:12px 20px;color:#fff4cc;border:1px solid #ff3cac99;background:#0b0718e8;box-shadow:0 0 28px #ff3cac55;text-align:center;font-size:11px;letter-spacing:.09em;opacity:0;pointer-events:none;transition:.3s}#world-announcement.visible{opacity:1;transform:translateX(-50%) translateY(0)}
#social-hud{position:fixed;z-index:7;right:20px;top:64px;display:grid;justify-items:end;gap:5px;font-size:10px;letter-spacing:.08em}#player-list-toggle{padding:9px 11px;box-shadow:2px 2px 0 var(--pink);font-size:10px}#connection-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#7a718b;box-shadow:0 0 8px currentColor}#connection-dot.online{background:#50ff9a}#connection-dot.poor{background:#ffb42e}#network-stats,#performance-stats,#world-status{color:#a99abe;font-size:9px}#performance-stats{color:#ffcf64}#world-status{color:#74e8e5}#player-list{width:min(310px,calc(100vw - 40px));max-height:45vh;overflow:auto;padding:8px;border:1px solid #61438f;background:#090611ed;box-shadow:0 0 24px #7727ff55}.player-row{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;padding:8px;border-bottom:1px solid #29203b}.player-row:last-child{border:0}.player-row img{width:34px;height:34px;object-fit:contain;background:#131020}.player-row strong{display:block;color:var(--ink);font-size:10px}.player-row small{color:#bdaed0;font-size:8px;text-transform:uppercase}.player-row .local-tag{color:var(--cyan);font-size:8px}
#chat-panel{position:fixed;z-index:8;left:20px;bottom:22px;width:min(440px,calc(100vw - 40px));pointer-events:none}#chat-messages{max-height:180px;overflow:auto;padding:10px;opacity:.22;transition:opacity .25s;background:linear-gradient(90deg,#090611c9,transparent);scrollbar-width:thin}#chat-panel.active #chat-messages,#chat-panel:hover #chat-messages{opacity:1}.chat-line{margin:0 0 6px;color:#ddd0e9;font-size:11px;line-height:1.4;text-shadow:0 1px 3px #000}.chat-line b{color:var(--cyan)}.chat-line.system{color:#ff8dce}.chat-line.announcement{color:#fff4cc;border-left:2px solid var(--pink);padding-left:7px}#chat-form{pointer-events:auto;display:flex;border:1px solid var(--cyan);background:#090611f2}#chat-form[hidden]{display:none}#chat-input{flex:1;min-width:0;padding:11px;border:0;outline:0;background:transparent;color:var(--ink);font:11px "Space Mono",monospace}#chat-form button{padding:8px 12px;box-shadow:none;font-size:9px}
#reaction-bar{position:fixed;z-index:7;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:5px;opacity:.18;transition:opacity .2s}#reaction-bar:hover{opacity:1}#reaction-bar button{padding:6px 8px;box-shadow:none;font-size:13px}#reaction-bar button.cooldown{opacity:.35;pointer-events:none}
#player-inspection{position:fixed;z-index:9;right:20px;top:150px;width:250px;padding:18px;border:1px solid var(--cyan);background:#090611ed;box-shadow:0 0 24px #36f9f633}#player-inspection h3{margin:0 0 12px;color:var(--cyan);font-family:"Press Start 2P";font-size:13px}#player-inspection p:not(.eyebrow){margin:7px 0;color:#c9bdd7;font-size:10px}#inspection-close{position:absolute;right:6px;top:5px;border:0;box-shadow:none;padding:5px 8px}#follow-player{margin-top:10px;padding:9px;font-size:9px}
#audio-toggle{position:fixed;z-index:7;right:20px;bottom:20px;padding:7px 9px;box-shadow:none;font-size:8px;opacity:.65}
#mobile-controls{display:none;position:fixed;z-index:8;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}
#mobile-move-zone{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:132px;height:148px;display:grid;place-items:center;align-content:end;gap:5px;pointer-events:auto;touch-action:none}
.mobile-stick-ring{position:relative;width:112px;height:112px;border:2px solid #36f9f688;border-radius:50%;background:radial-gradient(circle,#36f9f61a 0 44%,#080b1cb8 45% 100%);box-shadow:inset 0 0 25px #36f9f622,0 0 20px #36f9f622}
#mobile-move-thumb{position:absolute;left:50%;top:50%;width:46px;height:46px;border:2px solid var(--cyan);border-radius:50%;transform:translate(-50%,-50%);background:#1e2758dd;box-shadow:0 0 16px #36f9f699}
#mobile-move-zone small,#mobile-look-zone span{color:#b9fbff;font:700 8px "Space Mono",monospace;letter-spacing:.12em;text-shadow:0 0 8px #36f9f6}
#mobile-look-zone{position:absolute;right:0;bottom:0;width:min(48vw,390px);height:min(54vh,390px);display:grid;place-items:center;pointer-events:auto;touch-action:none;background:radial-gradient(circle at 65% 65%,#7727ff12,transparent 62%)}
#mobile-look-zone span{opacity:.42;transform:translateY(-78px)}
#mobile-use,#mobile-view{position:absolute;right:max(20px,env(safe-area-inset-right));width:76px;height:58px;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;border-radius:12px;background:#130c2bdd;font-size:10px;box-shadow:3px 3px 0 var(--pink),0 0 18px #36f9f633}
#mobile-use{bottom:max(24px,env(safe-area-inset-bottom));border-color:var(--pink);color:#fff4cc}
#mobile-view{bottom:max(96px,calc(env(safe-area-inset-bottom) + 96px));border-color:var(--cyan);color:var(--cyan)}
body.mobile-input.arcade-started:not(.cabinet-open):not(.emulator-running) #mobile-controls{display:block}
body.mobile-input.arcade-started:not(.cabinet-open):not(.emulator-running) #crosshair{opacity:1!important}
@media (max-width:720px),(hover:none) and (pointer:coarse){body.arcade-started:not(.cabinet-open):not(.emulator-running) #mobile-controls{display:block}body.arcade-started:not(.cabinet-open):not(.emulator-running) #crosshair{opacity:1!important}}
#start-screen { position:fixed; z-index:5; inset:0; display:grid; place-content:center; text-align:center; background:radial-gradient(circle at 50% 57%,#2b0f5960,transparent 43%),linear-gradient(135deg,#090611dd,#150624cc); backdrop-filter:blur(2px); }.eyebrow { margin:0 0 17px; color:var(--pink); font-size:10px; letter-spacing:.2em; } h1,h2 { margin:0; font-family:"Press Start 2P"; line-height:1.36; } h1 { font-size:clamp(32px,6vw,70px); text-shadow:5px 5px 0 var(--violet),0 0 25px var(--pink); } h1 i { color:var(--cyan); font-style:normal; } #start-screen > p:not(.eyebrow) { margin:30px 0; color:#c9bdd7; line-height:1.8; font-size:13px; } button,#rom-control label { font:inherit; cursor:pointer; border:1px solid var(--cyan); background:#140e29; color:var(--cyan); padding:16px 21px; box-shadow:4px 4px 0 var(--pink); letter-spacing:.06em; } button:hover,#rom-control label:hover { background:var(--cyan); color:#100b20; }
#avatar-screen { position:fixed; z-index:12; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 42%,#133f5d77,transparent 46%),linear-gradient(135deg,#090611f5,#16072af2); overflow:auto; } #avatar-screen[hidden] { display:none; }.avatar-panel { width:min(760px,100%); padding:clamp(20px,4vw,38px); border:1px solid #7e55d5; background:linear-gradient(130deg,#170d30,#080612); box-shadow:0 0 60px #a32cff66,inset 0 0 40px #220c4a; }.avatar-panel h2 { color:var(--cyan); font-size:clamp(18px,3vw,29px); margin-bottom:24px; }.avatar-name-label { display:block; color:var(--pink); font-size:11px; letter-spacing:.12em; margin-bottom:9px; }.avatar-panel input,.avatar-panel select { width:100%; border:1px solid var(--cyan); background:#0a0919; color:var(--ink); padding:13px 15px; font:inherit; font-size:14px; outline:none; }.avatar-panel input:focus,.avatar-panel select:focus { box-shadow:0 0 16px #36f9f677; }.avatar-room-label { margin-top:16px; }.avatar-panel select { cursor:pointer; }.avatar-panel option { background:#0a0919; }.room-picker-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }.room-picker-row #room-refresh { min-width:106px; padding:10px; font-size:9px; }.room-picker-row #room-refresh:disabled { cursor:wait; opacity:.55; }.room-id-label { margin-top:12px; }.room-id-label span { color:#8f82a5; font-size:8px; }.avatar-panel #room-help { margin:7px 0 0; color:#8f82a5; font-size:9px; line-height:1.5; }.avatar-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; margin:22px 0; }.avatar-card { min-height:54px; padding:14px 12px; display:grid; place-items:center; color:var(--ink); font-size:11px; text-align:center; box-shadow:3px 3px 0 #3d2671; }.avatar-card.selected { color:var(--cyan); border-color:var(--pink); background:#2b123c; box-shadow:4px 4px 0 var(--cyan),0 0 20px #ff3cac66; }.avatar-card:focus-visible { outline:2px solid #fff4cc; outline-offset:3px; } #avatar-status { min-height:2.5em; color:#c9bdd7; font-size:11px; line-height:1.6; } #avatar-status[data-error="true"] { color:#ff8ac0; } #avatar-confirm:disabled { cursor:wait; opacity:.55; } #placement-cancel { margin-left:10px; border-color:var(--pink); color:var(--pink); }
@media (max-width:560px) { .room-picker-row { grid-template-columns:1fr; }.room-picker-row #room-refresh { width:100%; } #placement-cancel { margin:10px 0 0; width:100%; } }
.wallet-panel { border:1px solid #36f9f655; padding:14px; margin-bottom:18px; background:#05071299; }.wallet-panel #identity-mode { margin:0 0 8px; color:var(--cyan); letter-spacing:.12em; }.wallet-explainer { margin:0 0 12px; color:#a99db9; font-size:9px; line-height:1.6; }.wallet-picker-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:9px; }.wallet-picker-row button { padding:11px 13px; font-size:9px; }.wallet-picker-row select { min-width:0; }.wallet-panel #wallet-address { color:#8af7d1; font-size:9px; margin:10px 0 0; }.wallet-panel[data-authenticated="true"] { border-color:#65ffb1; box-shadow:inset 0 0 20px #22ff8830; }
@media (max-width:560px) { .wallet-picker-row { grid-template-columns:1fr; }.wallet-picker-row button { width:100%; } }
#machine-modal { display:none; position:fixed; z-index:10; inset:0; background:#06030bd9; place-items:center; padding:20px; }.machine-panel { position:relative; width:min(760px,100%); padding:31px; background:linear-gradient(130deg,#170d30,#080612); border:1px solid #7e55d5; box-shadow:0 0 60px #a32cff66, inset 0 0 40px #220c4a; }.machine-panel h2 { color:var(--cyan); font-size:clamp(18px,4vw,30px); margin-bottom:22px; }.close { position:absolute; top:13px; right:13px; border:0; box-shadow:none; padding:7px 12px; color:#fff; font-size:22px; }.screen-wrap { position:relative; border:10px solid #20222f; background:#030407; box-shadow:inset 0 0 40px #000, 0 0 22px #36f9f644; }.screen-wrap canvas { width:100%; height:auto; image-rendering:pixelated; }.scanlines { position:absolute; inset:0; pointer-events:none; opacity:.32; background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 5px); }#rom-control { display:flex; gap:14px; align-items:center; margin:20px 0 12px; flex-wrap:wrap; } #rom-control label { padding:11px 14px; font-size:11px; } #rom-file { display:none; }#rom-name { font-size:11px; color:#d4c8df; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.controls { color:var(--pink); font-size:10px; line-height:1.7; }.legal { color:#867c96; font-size:9px; line-height:1.7; margin:15px 0 0; } code { color:#a5dbff; } @media(max-width:620px){#hud{padding:14px}.status{display:none}.brand{font-size:11px}.machine-panel{padding:22px 18px}.avatar-panel{padding:22px 18px}.avatar-card{min-height:50px}#social-hud{right:8px;top:44px}#chat-panel{left:10px;bottom:160px;width:min(360px,calc(100vw - 20px))}#reaction-bar{display:none}#player-inspection{right:10px;top:125px;width:220px}#audio-toggle{display:none}#prompt{bottom:164px;max-width:calc(100vw - 32px);white-space:nowrap}#world-prompt{bottom:210px}}
@media(max-width:620px) and (orientation:portrait){#mobile-move-zone{width:116px;height:130px}.mobile-stick-ring{width:98px;height:98px}#mobile-look-zone{width:50vw;height:46vh}#mobile-look-zone span{transform:translateY(-62px)}#mobile-use,#mobile-view{width:68px;height:54px}}