.sega-cartridge{width:208px;height:143px;transform:rotate(-6deg);filter:drop-shadow(7px 12px 8px #0006);flex-shrink:0}
.sega-cartridge svg{display:block;width:100%;height:100%;overflow:visible}
.screen-empty h2{margin:14px 0 7px}.screen-empty>.primary{margin-top:15px}.screen-empty p{max-width:430px}
.room-panel .section-heading{margin-bottom:14px}.room-seats{display:grid;gap:8px;margin:0 0 14px}.room-seat{display:flex;gap:10px;align-items:center;padding:10px;border:1px dashed #3c4d47;border-radius:7px;background:#111b192e;min-width:0}
.seat-avatar{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#23312e;color:#6f817b}.seat-avatar svg{width:16px;height:16px}
.room-seat.connected{border-style:solid;border-color:#40554b;background:#a7d1b908}.room-seat.connected .seat-avatar{background:#a7d1b917;color:var(--mint)}.room-seat>div{display:grid;gap:4px;min-width:0}.room-seat strong{font-weight:500;font-size:11px;color:#d2ddd7}.room-seat>div>span{font-size:10px;color:var(--muted)}
.room-seat #room-peer{margin:0;font-size:11px;color:var(--muted)}.room-seat.connected #room-peer{color:var(--mint)}
#room-invite-area{margin:0 0 15px}#room-invite-area label{font-size:10px;color:var(--muted)}.invite-row{gap:0;border:1px solid #465b50;border-radius:6px;overflow:hidden;margin-top:7px}.invite-row input{border:0;background:#111c18;border-radius:0;padding:10px;font-size:10px}.invite-row button{border:0;border-left:1px solid #465b50;border-radius:0;flex:0 0 36px;display:grid;place-items:center;background:#263a2e;padding:8px;color:var(--mint)}.invite-row svg{width:16px;height:16px}
.room-cartridge{display:flex;gap:9px;align-items:center;margin:0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.room-cartridge .title-icon{flex:0 0 16px;color:var(--mint)}.room-cartridge #room-game{margin:0;font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:#c1cec7}
.room-panel #room-state{padding:0;background:none;border:0;margin:12px 0;color:var(--muted);font-size:11px;line-height:1.6}.room-panel .room-actions{display:flex;gap:8px;margin:12px 0 0}.room-actions button{flex:1;font-size:11px;padding:9px 8px}.room-actions button:disabled{opacity:.38}.room-technical{border-top:1px solid var(--line);padding-top:10px;margin-top:14px;font-size:9px;color:var(--muted)}.room-technical summary{cursor:pointer}.room-technical .fine-print{font-size:10px;margin:10px 0 5px}.room-technical code{font-size:9px;color:#7f9389}.room-file-hint{font-size:11px;line-height:1.6;margin:12px 0;color:var(--mint)}
.footer-links{display:flex;gap:20px}
@media(max-width:760px){.sega-cartridge{width:175px;height:120px}.screen-empty h2{font-size:18px}.screen-empty p{font-size:11px}.room-seats{grid-template-columns:1fr 1fr}.room-seat{padding:8px;gap:7px}.seat-avatar{flex-basis:24px;width:24px;height:24px}.room-seat strong{font-size:10px}.room-seat>div>span{font-size:9px}}
@media(max-width:480px){.sega-cartridge{width:150px;height:103px}.screen-empty h2{margin-top:9px}.screen-empty>.primary{margin-top:10px}.room-seats{grid-template-columns:1fr 1fr}}

.room-seats{grid-template-columns:1fr 1fr}.room-seat{padding:9px 7px;gap:6px}.seat-avatar{flex-basis:22px;width:22px;height:22px}.seat-avatar svg{width:13px;height:13px}.room-seat strong,.room-seat #room-peer{font-size:10px;line-height:1.45}.room-seat>div>span{font-size:9px;line-height:1.5}

.room-panel #room-state.error{color:#ffb19c}
.room-join-toggle{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;background:transparent;border-color:#40554b;color:var(--mint)}.room-join-toggle svg{width:14px;height:14px}.room-join-form{display:grid;gap:9px;padding-top:12px}.room-join-form label{font-size:11px;color:#d0ddd4}.room-join-form input{width:100%;min-width:0;min-height:44px;border:1px solid #52685b;border-radius:7px;background:#111c18;color:#dce8e0;padding:10px;font:inherit;font-size:13px}.room-join-form p{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}.room-join-form p.error{color:#ffb19c}.room-join-form button{width:100%;min-height:44px;font-size:12px}
.invite-row button.copied{background:#3a6044;color:#d7f3d7}.invite-feedback{margin:7px 0 0;font-size:10px;line-height:1.6;color:var(--mint)}.invite-feedback.error{color:var(--orange)}
#settings{width:min(720px,94vw);max-height:94svh;padding:23px 28px;background:linear-gradient(145deg,#1d2925,#141d1e);overflow:auto}#settings .dialog-heading h2{font-size:23px}#settings .eyebrow{font-size:9px}.mapping-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:20px 0 0}.mapping-toolbar>p{font-size:11px;color:var(--muted);margin:0}.mapping-modes{display:flex;padding:4px;border:1px solid #3d5045;border-radius:9px;background:#111a17;gap:4px}.mapping-modes button{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;padding:8px 11px;background:transparent;border:1px solid transparent;color:var(--muted);border-radius:6px}.mapping-modes svg{width:15px;height:15px}.mapping-modes button[aria-pressed=true]{color:#d3e7d8;border-color:#506d58;background:#293c2e}#mapping-device{margin-top:14px}#mapping-device .device-label{margin-top:0}#mapping-device .fine-print{margin:5px 0 0;font-size:10px}.controller-editor{width:min(100%,570px);margin:5px auto 0}.controller-editor svg{display:block;width:100%;height:auto;max-height:340px;overflow:visible}.md-assignable{cursor:pointer;outline:none}.md-assignable:hover .md-button-ring,.md-assignable:focus-visible .md-button-ring,.md-assignable.selected .md-button-ring{stroke:#ffbf8c;stroke-width:3}.md-assignable:hover .md-direction-hit,.md-assignable:focus-visible .md-direction-hit,.md-assignable.selected .md-direction-hit{fill:#ffb06d23;stroke:#ffc494;stroke-width:1.5}.md-assignable.selected .md-face-button{fill:#6c5646;stroke:#ffd2aa;stroke-width:2}.md-assignable.listening .md-assignment{fill:#fff4d9}.md-assignable.listening .md-button-ring{stroke-dasharray:4 3}.mapping-caption{position:relative;text-align:center;border:1px solid #3e5046;border-radius:9px;background:#101a1780;padding:14px 55px;min-height:78px}.mapping-caption strong{font-size:13px;font-weight:500;color:#dbe5db}.mapping-caption p{font-size:11px;line-height:1.6;color:var(--muted);margin:5px 0 0}#mapping-cancel{font-size:10px;padding:4px 7px;position:absolute;right:9px;top:9px;background:transparent}.controller-editor.capturing+.mapping-caption{border-color:#b48b5e;background:#ffb06d0a}#settings .dialog-footer{align-items:center;margin-top:19px}#settings .dialog-footer button{font-size:11px}#settings .dialog-footer>span{font-size:10px;color:var(--muted);text-align:center}
@media(max-width:540px){#settings{padding:18px;width:95vw}.mapping-toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-top:15px}.mapping-modes button{flex:1}.mapping-toolbar>p{display:none}.mapping-caption{padding:12px 14px;min-height:94px}.mapping-caption:has(#mapping-cancel:not([hidden])){padding-bottom:36px}#mapping-cancel{top:auto;bottom:7px;right:50%;transform:translateX(50%)}#settings .dialog-footer{gap:8px;flex-wrap:wrap}#settings .dialog-footer>span{order:3;width:100%;font-size:9px}.controller-editor svg{max-height:260px}}