:root{--bg: #17131d;--panel: #211a2b;--panel-2: #2a2138;--border: #3a3145;--text: #ece4d8;--muted: #9a8fae;--accent: #e8a04c;--accent-hover: #f2b366;--teal: #7fc8b4;--error: #d9707a}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{display:flex;height:100vh}#game{flex:1;min-width:0;overflow:hidden}#game canvas{display:block;image-rendering:pixelated}.hidden{display:none!important}kbd{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--panel-2);font-family:ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;font-size:.75em}.chat{display:flex;flex-direction:column;width:320px;border-left:1px solid var(--border);background:var(--panel)}.chat__brand{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);font-family:ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;font-weight:700;letter-spacing:.12em;font-size:.85rem}.chat__brand:before{content:"";width:10px;height:10px;background:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--accent)}.chat__nearby{padding:12px 14px;border-bottom:1px solid var(--border)}.chat__nearby h2{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}.chat__nearby ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;min-height:22px}.chat__nearby li{font-size:.8rem;padding:2px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--teal)}.chat__nearby li.empty{border:none;background:none;color:var(--muted);font-style:italic;padding-left:0}.chat__messages{flex:1;list-style:none;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.chat__messages::-webkit-scrollbar{width:8px}.chat__messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.chat__messages li{font-size:.85rem;line-height:1.4;overflow-wrap:anywhere}.chat__messages .sender{font-weight:600}.chat__messages li.system{color:var(--accent);font-style:italic;font-size:.8rem}.chat__form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.chat__form input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:inherit;font-size:.85rem;transition:border-color .15s}.chat__form input:focus,.join__card input:focus{outline:none;border-color:var(--accent)}.chat__form input::placeholder,.join__card input::placeholder{color:var(--muted)}.chat__form button,.join__card button{padding:9px 16px;border:none;border-radius:8px;background:var(--accent);color:#241a10;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .15s,transform .05s}.chat__form button:hover,.join__card button:hover{background:var(--accent-hover)}.chat__form button:active,.join__card button:active{transform:translateY(1px)}.join{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 90% 70% at 50% 20%,#241c30 0%,var(--bg) 70%);z-index:10}.join__card{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(380px,92vw);padding:36px 32px 28px;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 18px 48px #00000073;text-align:center}.join__avatar{position:relative;width:64px;height:72px;margin-bottom:4px}.join__avatar:before{content:"";position:absolute;top:0;left:0;width:8px;height:8px;background:transparent;box-shadow:16px 0 #4a3628,24px 0 #4a3628,32px 0 #4a3628,40px 0 #4a3628,8px 8px #4a3628,16px 8px #4a3628,24px 8px #4a3628,32px 8px #4a3628,40px 8px #4a3628,48px 8px #4a3628,8px 16px #f2c9a2,16px 16px #f2c9a2,24px 16px #f2c9a2,32px 16px #f2c9a2,40px 16px #f2c9a2,48px 16px #f2c9a2,8px 24px #f2c9a2,16px 24px #2a2233,24px 24px #f2c9a2,32px 24px #f2c9a2,40px 24px #2a2233,48px 24px #f2c9a2,8px 32px #f2c9a2,16px 32px #f2c9a2,24px 32px #f2c9a2,32px 32px #f2c9a2,40px 32px #f2c9a2,48px 32px #f2c9a2,16px 40px #e8a04c,24px 40px #e8a04c,32px 40px #e8a04c,40px 40px #e8a04c,8px 48px #e8a04c,16px 48px #e8a04c,24px 48px #e8a04c,32px 48px #e8a04c,40px 48px #e8a04c,48px 48px #e8a04c,16px 56px #e8a04c,24px 56px #e8a04c,32px 56px #e8a04c,40px 56px #e8a04c,16px 64px #2a2233,40px 64px #2a2233}.join__card h1{font-family:ui-monospace,Cascadia Mono,Segoe UI Mono,monospace;font-size:1.5rem;letter-spacing:.18em;text-transform:lowercase}.join__card h1 span{color:var(--accent)}.join__card p{color:var(--muted);font-size:.9rem}.join__card input{align-self:stretch;padding:11px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:inherit;font-size:1rem;text-align:center;transition:border-color .15s}.join__card button{align-self:stretch;padding:11px 16px;font-size:.95rem}.join__hint{font-size:.78rem!important}.join__hint--touch{display:none}@media (pointer: coarse){.join__hint--keyboard{display:none}.join__hint--touch{display:block}}.join__error{color:var(--error)!important;min-height:1.2em;font-size:.85rem!important;font-style:normal}.voice{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid rgba(242,234,216,.08)}.voice.hidden{display:none}.voice__button{align-self:stretch;padding:9px 14px;font:inherit;font-size:.9rem;color:#17131d;background:#e8b04b;border:none;border-radius:8px;cursor:pointer;transition:filter .12s ease}.voice__button:hover:not(:disabled){filter:brightness(1.08)}.voice__button:disabled{opacity:.6;cursor:wait}.voice__button.is-live{background:#6fbf8f}.voice__status{margin:0;font-size:.78rem;color:#f2ead8a6}.voice__status.error{color:#e07a6a}.joystick{position:fixed;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:110px;height:110px;z-index:15;touch-action:none}.joystick__base{position:relative;width:100%;height:100%;border-radius:50%;background:#211a2b8c;border:2px solid rgba(242,234,216,.25);backdrop-filter:blur(2px)}.joystick__knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--accent);border:2px solid var(--accent-hover);transition:transform .05s linear;will-change:transform}.chat-toggle{display:none;position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:16;width:44px;height:44px;border:1px solid var(--border);border-radius:50%;background:var(--panel);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px #00000059}.chat-backdrop{display:none;position:fixed;inset:0;background:#0006;z-index:17}.chat-backdrop.hidden{display:none!important}@media (max-width: 700px),(max-height: 480px) and (orientation: landscape){#app{position:relative}#game{width:100%}.chat-toggle{display:flex;align-items:center;justify-content:center}.chat{position:fixed;inset:0 0 0 auto;width:min(320px,88vw);z-index:18;transform:translate(100%);transition:transform .22s ease;box-shadow:-8px 0 24px #00000073;padding-bottom:env(safe-area-inset-bottom)}.chat.chat--open{transform:translate(0)}.chat-backdrop:not(.hidden){display:block}.join__card{padding:28px 20px 22px}.join__card input,.join__card button{min-height:44px}.chat__form input{font-size:16px;padding:12px 14px}.chat__form button,.voice__button{min-height:44px}}