/* Two-player rooms use the existing native frame, accents and controls. */
.online-lobby .online-header{flex:0 0 104px;min-width:0}
.online-lobby .online-error{margin:0 23px 12px;flex:0 0 auto}.online-lobby .online-error:empty{display:none}
.online-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:24px;padding:0 23px;min-height:0;flex:1;overflow:hidden}
.online-lobby .panel{background:#101014 url('./assets/art/grain.png');border:1px solid #39313e;min-width:0}
.online-lobby .panel-heading{padding:0;min-height:46px;height:auto;flex:0 0 auto;border:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.online-lobby .panel-heading h2{background:var(--accent);color:#120f0b;font:900 24px/1.15 var(--display);text-transform:uppercase;letter-spacing:1.8px;padding:10px 22px;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);white-space:nowrap}
.online-lobby .panel-heading>span{padding:0 20px 0 0;font:10px ui-monospace,monospace;letter-spacing:1.5px;color:var(--muted)}
.online-lobby .button{clip-path:polygon(8px 0,calc(100% - 5px) 0,100% 7px,calc(100% - 8px) 100%,0 100%);min-height:42px;font-size:20px;--outline:var(--accent)}
.online-setup{min-height:0;overflow:auto;scrollbar-width:thin}.online-setup-fields{padding:20px;display:grid;gap:16px}.online-setup .field{gap:6px}.online-setup select{width:100%;min-width:0;max-width:100%;font-size:13px;min-height:42px;padding:9px 10px}.online-setup .field label{font-size:11px}
.online-setup .state-panel{padding:18px 12px;margin:0}.online-setup .state-panel h2{font-size:25px}.online-setup .state-panel p{font-size:12px}
.online-help{font-size:12px;line-height:1.6;color:var(--muted)}
.online-own-deck{position:relative;text-align:center;padding:220px 3px 8px;min-width:0}
.online-own-deck .native-deck-case{top:0;left:50%;transform:translateX(-50%) scale(.9);transform-origin:top center}
.online-own-deck h3{font:900 25px/1.1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}.online-own-deck>p{font:10px ui-monospace,monospace;color:var(--muted);margin-top:9px}
.online-main{display:flex;flex-direction:column;gap:20px;min-width:0;min-height:0;overflow:auto;scrollbar-width:thin;padding-right:3px}
.online-room-region[data-mode=join]{display:grid;grid-template-columns:1fr 1fr;gap:20px;flex:0 0 auto}
.online-create,.online-join{padding:0 0 20px}.online-create>p,.online-join>p{margin:20px 22px 12px;color:var(--soft);font-size:13px;line-height:1.6}.online-create>.checkbox{margin:0 22px 14px;font-size:12px}.online-create>.button{width:calc(100% - 44px);margin:0 22px}
.online-join-form{margin:22px;display:flex;gap:12px;flex-wrap:wrap}.online-join-form>input{width:100%;min-width:0;height:46px;background:#0b090e;border:1px solid #50413f;color:var(--text);font:700 24px var(--display);letter-spacing:3px;padding:8px 13px;text-transform:uppercase}.online-join-form>.button{width:100%}
.online-public-region{flex:1;min-height:0}.online-public-rooms{min-height:100%;display:flex;flex-direction:column}.online-public-rooms>.state-panel{margin:0 auto;padding:30px 22px;border:0;background:none}.online-public-rooms .state-panel h2{font-size:30px}.online-public-rooms .state-panel p{font-size:13px;max-width:460px}.online-unavailable{padding:28px 22px;color:var(--soft);font-size:13px}
.online-room-list{display:grid;gap:0;padding:4px 22px 14px;overflow:auto;scrollbar-width:thin}.online-room-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid #39313e;min-width:0}.online-room-row:last-child{border-bottom:0}.online-room-row>div{min-width:0}.online-room-row h3{font-size:27px;text-transform:uppercase;overflow-wrap:anywhere}.online-room-row p{font:10px ui-monospace,monospace;color:var(--muted);margin-top:8px}.online-room-row>.button{min-width:110px;flex-shrink:0}
.online-current-room{padding-bottom:22px}.online-code-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;border-bottom:1px solid #39313e}.online-code-row>div{min-width:0}.online-code-row small{display:block;font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--muted);margin-bottom:10px}.online-room-code{display:block;font:700 clamp(28px,3vw,48px)/1 var(--display);letter-spacing:5px;color:var(--accent);user-select:all;overflow-wrap:anywhere}.online-code-row>.button{flex-shrink:0}
.online-seats{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 28px 10px}.online-seat{min-width:0;border:1px solid #4a3e36;padding:22px;background:#0d0b11}.online-seat.is-self{border-color:var(--accent)}.online-seat.is-empty{border-style:dashed;border-color:#3e3745;background:#0d0b1166}.online-seat>small{display:block;font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--muted);margin-bottom:15px}.online-seat h3{font-size:32px;text-transform:uppercase;overflow-wrap:anywhere}.online-seat>p{color:var(--muted);font-size:12px;line-height:1.55;margin-top:12px}.online-seat .online-seat-deck{color:var(--soft);min-height:38px}.online-ready-tag{display:inline-block;font:700 20px var(--display);letter-spacing:1px;color:#9b8e9f;border:1px solid #49404c;background:#141016;padding:5px 14px;margin-top:22px}.online-ready-tag.is-ready{border-color:#547455;color:#a8d6a3;background:#19241a}
.online-room-hint{font-size:12px;line-height:1.6;color:var(--soft);margin:12px 28px 20px;min-height:20px}.online-room-actions{display:flex;gap:15px;flex-wrap:wrap;margin:0 28px}.online-room-actions>.button{flex:1;min-width:130px}
.online-connection{flex:0 0 auto;font:9px ui-monospace,monospace;color:var(--muted);padding:10px 24px 8px;min-height:28px;letter-spacing:.5px}
@media(min-width:851px) and (max-height:720px){.online-layout{gap:18px;grid-template-columns:minmax(250px,300px) minmax(0,1fr)}.online-setup-fields{gap:10px;padding:14px 18px}.online-setup .field{gap:4px}.online-setup select{min-height:36px;padding:6px 9px}.online-own-deck{padding-top:112px;padding-bottom:0}.online-own-deck .native-deck-case{transform:translateX(-50%) scale(.49)}.online-own-deck h3{font-size:21px}.online-own-deck>p{font-size:9px;margin-top:5px}.online-setup-fields>.button{min-height:36px;font-size:17px}.online-room-region[data-mode=join]{gap:14px}.online-main{gap:14px}.online-create>p,.online-join>p{margin:14px 18px 8px;font-size:12px}.online-create>.checkbox{margin:0 18px 8px;min-height:30px;font-size:10px}.online-create>.button{margin:0 18px;width:calc(100% - 36px)}.online-create,.online-join{padding-bottom:14px}.online-join-form{margin:14px 18px;gap:10px}.online-join-form>input{height:40px}.online-lobby .panel-heading h2{font-size:21px;padding:10px 18px}.online-code-row{padding:15px 22px}.online-seats{padding:16px 22px 4px;gap:15px}.online-seat{padding:16px}.online-seat h3{font-size:27px}.online-seat>small{margin-bottom:10px}.online-seat>p{margin-top:8px}.online-ready-tag{margin-top:12px}.online-room-hint{margin:12px 22px 15px}.online-room-actions{margin:0 22px}.online-public-rooms>.state-panel{padding:22px 18px}}
@media(max-width:1150px){.online-layout{grid-template-columns:280px minmax(0,1fr);gap:18px}.online-room-region[data-mode=join]{grid-template-columns:1fr}.online-lobby .screen-actions>.button{width:130px;font-size:19px}.online-seats{gap:12px;padding-left:18px;padding-right:18px}.online-seat{padding:16px}.online-seat h3{font-size:26px}.online-code-row{padding-left:18px;padding-right:18px}.online-room-hint{margin-left:18px;margin-right:18px}.online-room-actions{margin-left:18px;margin-right:18px}}
@media(max-width:850px){.online-lobby .online-header{flex-basis:130px}.online-lobby .screen-header{height:130px;flex-wrap:wrap;padding:14px 16px;gap:7px 12px}.online-lobby .screen-title{flex-basis:calc(100% - 70px)}.online-lobby .screen-title h1{font-size:34px}.online-lobby .screen-subtitle{font-size:9px;letter-spacing:1.3px}.online-lobby .screen-actions{flex:1 0 100%;margin:0;padding-left:68px;gap:10px}.online-lobby .screen-actions>.button{flex:1;width:auto;min-height:36px;height:36px;font-size:18px}.online-layout{display:flex;flex-direction:column;overflow:auto;padding:0 16px;gap:16px}.online-setup{flex:0 0 auto;overflow:visible}.online-setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}.online-setup-fields>.field:nth-child(3){grid-column:1/-1}.online-setup-fields>.online-help,.online-setup-fields>.state-panel{grid-column:1/-1}.online-deck-preview{display:none}.online-setup-fields>.button{grid-column:1/-1}.online-main{overflow:visible;flex:0 0 auto;min-height:300px}.online-public-region{min-height:200px}.online-room-region[data-mode=join]{grid-template-columns:1fr 1fr}.online-lobby .panel-heading h2{font-size:21px;padding:10px 16px}.online-room-actions>.button{min-width:100px}.online-lobby .online-error{margin:0 16px 10px}.online-connection{padding-left:16px;padding-right:16px;font-size:8px}.online-room-row h3{font-size:25px}}
@media(max-width:560px){.online-lobby .online-header{flex-basis:125px}.online-lobby .screen-header{height:125px;padding:12px}.online-lobby .screen-title h1{font-size:30px}.online-lobby .screen-subtitle{font-size:8px;letter-spacing:1px}.online-lobby .screen-header>.native-back{width:44px;height:44px;min-height:44px;flex-basis:44px}.online-lobby .screen-title{flex-basis:calc(100% - 60px)}.online-lobby .screen-actions{padding-left:0}.online-layout{padding:0 12px}.online-room-region[data-mode=join]{grid-template-columns:1fr}.online-lobby .panel-heading h2{font-size:22px}.online-seats{grid-template-columns:1fr;padding:16px}.online-seat{padding:17px}.online-seat>small{margin-bottom:9px}.online-seat h3{font-size:27px}.online-seat>p{margin-top:8px}.online-ready-tag{margin-top:12px}.online-code-row{padding:18px 16px;gap:12px}.online-room-code{font-size:32px;letter-spacing:3px}.online-code-row>.button{font-size:15px;padding:7px 10px;min-height:36px}.online-room-hint{margin-left:16px;margin-right:16px}.online-room-actions{margin:0 16px;gap:10px}.online-room-actions>.button{font-size:18px;min-width:110px}.online-lobby .online-error{margin-left:12px;margin-right:12px}.online-create>p,.online-join>p{margin:16px}.online-create>.checkbox{margin-left:16px;margin-right:16px}.online-create>.button{margin:0 16px;width:calc(100% - 32px)}.online-join-form{margin:16px}.online-room-row{gap:12px}.online-room-row>.button{min-width:76px;font-size:18px}.online-room-row p{font-size:9px}.online-connection{font-size:8px;line-height:1.5}}
