:root{color:#f8fafc;font-synthesis:none;text-rendering:optimizelegibility;background:#020617;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;min-height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #67e8f973}#app,#game{place-items:center;display:grid}#app{isolation:isolate;position:relative}#game{width:100%;height:100%}#ui-root{z-index:10;pointer-events:none;position:absolute;inset:0}canvas{max-width:100%;max-height:100%;display:block}.title-panel,.chat-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:auto;background:#081226eb;border:1px solid #67e8f93d;box-shadow:0 24px 80px #0206178c}.title-panel{border-radius:24px;width:min(460px,100% - 32px);padding:34px;position:absolute;top:50%;left:50%;transform:translate(-50%,-42%)}.eyebrow{color:#67e8f9;letter-spacing:.16em;margin:0 0 8px;font-family:ui-monospace,monospace;font-size:11px;font-weight:700}.title-heading{color:#f8fafc;margin:0;font-size:clamp(27px,5vw,38px);line-height:1.1}.title-copy{color:#94a3b8;margin:16px 0 26px;line-height:1.65}.title-form{gap:10px;display:grid}.input-label{color:#cbd5e1;gap:8px;font-size:14px;font-weight:700;display:grid}.text-input{color:#f8fafc;background:#0f172a;border:1px solid #334155;border-radius:12px;min-width:0;transition:border-color .14s}.text-input:hover,.text-input:focus{border-color:#22d3ee}.room-input{width:100%;padding:13px 14px}.input-help,.status-text,.error-text{min-height:1.25em;margin:0;font-size:12px;line-height:1.4}.input-help,.status-text{color:#64748b}.status-text{text-align:center;margin-top:14px}.error-text{color:#fca5a5}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:12px;font-weight:800;transition:transform .12s,opacity .12s,background .12s}.primary-button{color:#06202a;background:#67e8f9;padding:12px 18px}.secondary-button{color:#cbd5e1;background:#1e293b;padding:8px 12px}.primary-button:hover:not(:disabled),.secondary-button:hover:not(:disabled){transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.45}.chat-panel{border-radius:18px;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(360px,100% - 32px);height:min(280px,100% - 32px);display:grid;position:absolute;bottom:16px;right:16px;overflow:hidden}.chat-header{border-bottom:1px solid #94a3b81f;justify-content:space-between;align-items:center;gap:12px;padding:14px 14px 10px;display:flex}.chat-heading-group{min-width:0}.chat-heading{color:#f8fafc;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:17px;overflow:hidden}.chat-identity{color:#64748b;margin:2px 0 0;font-size:11px}.chat-status{color:#86efac;background:#0f172ab3;margin:0;padding:7px 14px;font-size:11px}.chat-messages{align-content:start;gap:10px;min-height:0;padding:12px 14px;display:grid;overflow-y:auto}.chat-message{min-width:0}.chat-message-meta{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.chat-sender{color:#67e8f9;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.chat-time{color:#475569;flex:none;font-size:10px}.chat-message-body{color:#cbd5e1;overflow-wrap:anywhere;white-space:pre-wrap;margin:3px 0 0;font-size:13px;line-height:1.45}.chat-form{border-top:1px solid #94a3b81f;padding:10px 12px 12px}.chat-input-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;display:grid}.chat-input{width:100%;padding:9px 11px;font-size:13px}.chat-send{padding:9px 13px;font-size:12px}.chat-error{margin-top:6px}@media (width<=640px){.title-panel{padding:26px 22px;transform:translate(-50%,-46%)}.chat-panel{width:auto;height:min(45%,300px);bottom:16px;left:16px;right:16px}}.chat-panel{top:16px;bottom:auto}.gamepad-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:#081226eb;border:1px solid #67e8f93d;border-radius:22px;width:184px;padding:12px;position:absolute;bottom:16px;left:16px;box-shadow:0 24px 80px #0206178c}.gamepad-heading{color:#67e8f9;letter-spacing:.16em;text-align:center;margin:0 0 8px;font-family:ui-monospace,monospace;font-size:10px;font-weight:800}.gamepad-grid{grid-template-rows:repeat(3,48px);grid-template-columns:repeat(3,48px);justify-content:center;display:grid;position:relative}.gamepad-button{z-index:1;color:#cffafe;cursor:pointer;touch-action:none;background:#1e293bf0;border:1px solid #67e8f947;border-radius:14px;font-size:18px;transition:transform 80ms,color 80ms,background 80ms;box-shadow:inset 0 1px #ffffff14}.gamepad-button:hover,.gamepad-button.is-pressed{color:#06202a;background:#67e8f9}.gamepad-button.is-pressed{transform:scale(.92)}.gamepad-up{grid-area:1/2}.gamepad-left{grid-area:2/1}.gamepad-right{grid-area:2/3}.gamepad-down{grid-area:3/2}.gamepad-center{background:#0f172a;border:1px solid #67e8f933;border-radius:50%;grid-area:2/2;margin:13px}.gamepad-help{color:#64748b;text-align:center;margin:8px 0 0;font-size:9px}@media (width<=640px){.chat-panel{width:min(340px,100% - 32px);height:min(38%,260px);inset:16px 16px auto auto}.gamepad-panel{transform-origin:0 100%;width:160px;padding:8px;bottom:12px;left:12px;transform:scale(.9)}}