.online{background:#2f6fb8;color:#fff;padding:28px 20px;box-sizing:border-box;overflow-y:auto;font-family:var(--f-display);text-align:center}
.online h1{font:28px/1.1 var(--f-display);margin:12px 0;text-shadow:3px 3px var(--ink)}
.online-choice{font:11px var(--f-pixel);margin:0 0 14px;color:#c6e9ff}
.online-count{display:block;font:38px var(--f-display);color:var(--gold);text-shadow:3px 3px var(--ink);margin-bottom:18px}
.online-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.online-seat{height:88px;background:#194a80;border:3px solid var(--ink);box-shadow:0 4px var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.online-seat.filled{background:#4aa3f5}
.online-seat img{width:100%;height:57px;object-fit:contain;image-rendering:pixelated}
.online-seat b{display:grid;place-items:center;height:57px;font:30px var(--f-display);color:#719ac6}
.online-seat span{font:8px var(--f-pixel);padding:3px 0;color:#fff}
.online-hint{min-height:34px;font:14px/1.5 var(--f-display);margin:26px 0 18px}
.online button{border:3px solid var(--ink);background:var(--blue2);box-shadow:inset 0 -5px var(--blue3),inset 0 3px var(--sky),3px 4px var(--ink);color:#fff;padding:12px;font:14px var(--f-display);cursor:pointer;width:200px;margin:8px auto}
.online-status{font:11px/1.5 var(--f-pixel);overflow-wrap:anywhere;margin:16px 0}
.online [hidden]{display:none!important}
.online-connection{position:absolute;z-index:25;top:54px;left:10px;right:10px;background:var(--ink);color:#fff0b1;text-align:center;padding:6px;font:10px var(--f-pixel);pointer-events:none}