.panel{width:340px;max-width:calc(100vw - 32px);background:#141822eb;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:24px;color:#eef1f6;box-shadow:0 20px 60px #00000080}.screen-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.entry-layout{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:5vw}.preview-pane{position:relative;flex:1 1 auto;height:100%;min-width:0}.panel-pane{flex:0 0 auto;margin-right:6vw}@media (max-width: 760px){.entry-layout{flex-direction:column;justify-content:flex-end;gap:0}.preview-pane{flex:1 1 auto;width:100%}.panel-pane{flex:0 0 auto;margin-right:0;margin-bottom:24px}}.title{margin:0 0 16px;font-size:24px;text-align:center;letter-spacing:.5px}.auth-tabs{display:flex;gap:0;margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.auth-tab{flex:1;padding:9px;border:none;background:#ffffff0a;color:#9aa4b8;font-size:14px;cursor:pointer}.auth-tab.active{background:#ffffff1f;color:#eef1f6;font-weight:600}.auth-tab:disabled{color:#4a5164;cursor:not-allowed}.countdown-text{text-align:center;font-size:15px;color:#f1c40f;margin:4px 0;min-height:20px}.arena-text{text-align:center;font-size:13px;color:#9aa4b8;margin:0 0 12px;min-height:18px}.swatch--pending{background:#ffffff1f!important;border:1px dashed rgba(255,255,255,.2)}.section-title{margin:16px 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:#9aa4b8}.field-label{display:block;font-size:12px;color:#9aa4b8;margin:12px 0 4px}.text-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#10141c;color:#eef1f6;font-size:14px}.code-input{text-align:center;font-size:20px;letter-spacing:.3em}.primary-button,.secondary-button{width:100%;margin-top:14px;padding:12px;border-radius:8px;border:none;font-size:15px;font-weight:600;cursor:pointer}.primary-button{background:#f1c40f;color:#10141c}.primary-button:hover{background:#ffd23f}.secondary-button{background:#ffffff14;color:#eef1f6}.secondary-button:hover{background:#ffffff29}.divider{margin:20px 0 4px;text-align:center;font-size:12px;color:#6b7386;text-transform:uppercase}.status-text{min-height:18px;margin:12px 0 0;font-size:13px;color:#9aa4b8;text-align:center}.room-code-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 4px}.room-code{text-align:center;font-size:32px;font-weight:700;letter-spacing:.3em;color:#f1c40f}.copy-button{flex-shrink:0;padding:4px 10px;border-radius:6px;border:1px solid rgba(241,196,15,.4);background:transparent;color:#f1c40f;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}.copy-button:hover{background:#f1c40f1f}.roster-list{list-style:none;margin:0;padding:0;max-height:160px;overflow-y:auto}.roster-item{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px}.swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0}#game-container{position:absolute;top:0;right:0;bottom:0;left:0}#game-container canvas{touch-action:none}.preview-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.hud{position:absolute;top:12px;left:12px;color:#eef1f6;font-size:13px;background:#00000059;padding:8px 12px;border-radius:8px;pointer-events:none}.connection-status{position:absolute;top:12px;right:12px;color:#eef1f6;font-size:12px;font-family:ui-monospace,SF Mono,Consolas,monospace;background:#00000073;padding:8px 12px;border-radius:8px;pointer-events:none;white-space:pre-line;text-align:right;line-height:1.5}.touch-joystick-base,.touch-attack-button{display:none}@media (pointer: coarse){.touch-joystick-base{display:block;position:absolute;left:32px;bottom:32px;width:120px;height:120px;border-radius:50%;background:#ffffff1f;border:1px solid rgba(255,255,255,.25);touch-action:none}.touch-joystick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin-left:-26px;margin-top:-26px;border-radius:50%;background:#ffffff59;transform:translate(-50%,-50%);pointer-events:none}.touch-attack-button{display:flex;align-items:center;justify-content:center;position:absolute;right:40px;bottom:44px;width:84px;height:84px;border-radius:50%;background:#d4392f59;border:1px solid rgba(255,255,255,.25);color:#eef1f6;font-size:28px;touch-action:none;-webkit-user-select:none;user-select:none}.touch-attack-button.active{background:#d4392f99}}