:root{color:#f5f1e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#111318;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(#ffd16614,#0000 40%),#111318;min-width:320px;min-height:100svh;margin:0;overflow:hidden}button{appearance:none;color:#211706;cursor:pointer;background:#ffd166;border:0;border-radius:6px;min-height:44px;padding:0 18px;font:800 15px/1 system-ui,sans-serif;transition:transform .14s,filter .14s}button:hover{filter:brightness(1.06);transform:translateY(-1px)}button:disabled{cursor:default;filter:grayscale(.35)brightness(.8);opacity:.78;transform:none}button:focus-visible{outline-offset:3px;outline:3px solid #ffd16673}#app,#game{width:100vw;height:100svh}#game canvas{display:block}#ui{z-index:5;pointer-events:none;place-items:center;padding:18px;display:grid;position:fixed;inset:0}#ui:empty{display:none}#hud{z-index:4;pointer-events:none;align-items:center;gap:8px;display:flex;position:fixed;top:14px;right:14px}#hud:empty{display:none}.hud-button,.room-code{color:#fff8e6;background:#111318c2;border:1px solid #ffffff29;border-radius:6px;min-height:34px;font-size:13px;font-weight:800}.hud-button{pointer-events:auto;padding:0 12px}.room-code{color:#79e0a3;place-items:center;padding:0 10px;display:inline-grid}#joystick{z-index:4;pointer-events:auto;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;width:50vw;max-width:280px;height:220px;display:none;position:fixed;bottom:0;left:0}#joystick-base{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:radial-gradient(circle,#f5f1e81a,#f5f1e80a 70%);border:1px solid #ffffff38;border-radius:50%;width:140px;height:140px;transition:background .14s;position:absolute;bottom:24px;left:24px}#joystick-base.active{background:radial-gradient(circle,#ffd16638,#ffd1660d 70%);border-color:#ffd1668c}#joystick-knob{pointer-events:none;background:#ffd166eb;border:1px solid #ffffff73;border-radius:50%;width:64px;height:64px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 6px 18px #00000059}.panel{pointer-events:auto;background:#13151ceb;border:1px solid #ffffff24;border-radius:8px;width:min(430px,100%);padding:26px;box-shadow:0 18px 45px #0000005c}.panel h1,.panel h2{color:#fff8e6;letter-spacing:0;margin:6px 0 10px;font-size:clamp(32px,8vw,52px);line-height:1}.panel h2{font-size:clamp(26px,7vw,40px)}.panel p{color:#c7cfda;margin:0 0 20px;font-size:16px;line-height:1.45}.eyebrow{color:#79e0a3;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:800}.eyebrow.offline{color:#ffb84d}.status-pill{letter-spacing:.02em;border-radius:999px;margin:0 0 16px;padding:8px 12px;font-size:13px;font-weight:700;display:inline-block}.offline-pill{color:#ffd29a;background:#ffb84d29;border:1px solid #ffb84d59}.actions{gap:10px;display:grid}.actions button:nth-child(2){color:#07160d;background:#79e0a3}.actions button:nth-child(3){color:#06141a;background:#66d9ff}.toast{z-index:10;color:#211706;background:#ffd166f2;border-radius:6px;padding:12px 16px;font-weight:800;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 14px 34px #00000047}@media (width<=700px){.panel{padding:20px}body.playing #joystick{display:block}#hud{top:10px;right:10px}}