:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#071019;color:#eef1f5;font-synthesis:none}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,select{font:inherit}.app-shell{position:relative;width:100%;height:100%;background:#071019}.game-frame{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden}.game-frame canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated}.hud-top{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px 42px;pointer-events:none;background:linear-gradient(180deg,#04080cd1,#04080c00);text-shadow:0 2px 6px #000}.hud-top strong{display:block;letter-spacing:.18em;font-size:12px}.hud-top span{display:block;margin-top:4px;color:#9ba7aa;font-size:10px;letter-spacing:.06em}.status-dot{display:flex;gap:8px;align-items:center;color:#b4bdc0;font-size:11px}.status-dot i{width:6px;height:6px;border-radius:50%;background:#d8a365;box-shadow:0 0 8px #d8a365cc}.join-panel{position:absolute;z-index:30;width:min(400px,calc(100vw - 32px));left:50%;top:50%;transform:translate(-50%,-50%);padding:30px;border:1px solid rgba(202,169,123,.34);background:#080d12f0;box-shadow:0 24px 72px #0000009e,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.eyebrow{margin:0 0 10px;color:#c29a6e;font-size:9px;letter-spacing:.22em}.join-panel h1{margin:0;font-family:Georgia,serif;font-size:32px;font-weight:500}.intro{margin:12px 0 22px;color:#a7b0b3;font-size:12px;line-height:1.7}.join-panel label{display:grid;gap:7px;color:#b6bec0;font-size:10px}input,select{width:100%;padding:10px 11px;border:1px solid #364048;border-radius:2px;outline:none;background:#10171d;color:#f0f2f1}input:focus,select:focus{border-color:#9b7855;box-shadow:0 0 0 2px #9b785524}.appearance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:13px 0 18px}.primary{width:100%;padding:12px;border:1px solid #c19668;border-radius:2px;background:#765238;color:#fff;cursor:pointer;letter-spacing:.08em}.primary:hover{background:#8a6244}.primary:disabled{opacity:.45;cursor:default}.join-panel small{display:block;margin-top:13px;text-align:center;color:#7e898d;font-size:9px}.chat-log{position:absolute;z-index:22;left:18px;bottom:68px;width:min(410px,62vw);display:grid;gap:4px;pointer-events:none}.chat-log p{width:fit-content;max-width:100%;margin:0;padding:6px 9px;border-left:2px solid #a77b52;background:#05090dc2;color:#e8eceb;font-size:11px;text-shadow:0 1px 3px #000}.chat-log strong{margin-right:8px;color:#ddb98d}.chat-box{position:absolute;z-index:25;left:18px;bottom:18px;width:min(400px,calc(100vw - 36px));display:flex;gap:6px}.chat-box input{width:auto;min-width:0;flex:1 1 auto;background:#080d12e6}.chat-box button{min-width:64px;flex:0 0 auto;padding:0 17px;border:1px solid #806144;background:#38291ef0;color:#f2e6d7;cursor:pointer;white-space:nowrap}.controls-hint{position:absolute;z-index:20;right:18px;bottom:18px;display:flex;align-items:center;gap:6px;padding:6px;background:#05090db8;color:#9aa5a8;font-size:9px;letter-spacing:.05em}.controls-hint span{padding:0 5px}.controls-hint button{border:1px solid rgba(154,126,92,.55);background:#31261ddb;color:#e8dac8;padding:5px 8px;cursor:pointer;font-size:9px}.controls-hint button:hover{background:#4d3929f0}@media(max-width:640px){.join-panel{padding:22px}.appearance-grid{grid-template-columns:1fr}.controls-hint{display:none}}