/* Online lobby, connection banner and notices. Uses the game's own tokens where possible. */
#onlineLobby,#onlineNotice{z-index:60}
.online-dialog{width:min(560px,94vw);max-height:92vh;overflow:auto;text-align:left}
.online-dialog h2{margin:.1em 0 .35em}
.ol-lead{margin:0 0 1em;opacity:.9;line-height:1.45}
.ol-field{display:grid;gap:.35em;margin:0 0 1em}.ol-field span,.ol-grid label span,.ol-grid dt{font-size:.78em;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.online-dialog input,.online-dialog select{font:inherit;color:inherit;background:rgba(0,12,60,.55);border:2px solid rgba(190,225,255,.45);border-radius:6px;padding:.55em .7em;min-height:44px;width:100%;box-sizing:border-box}
.online-dialog input:focus,.online-dialog select:focus,.online-dialog button:focus-visible{outline:3px solid #74e6ff;outline-offset:1px}
.ol-actions{display:flex;gap:.6em;flex-wrap:wrap;margin:1em 0 .4em}.ol-actions.inline{margin:.3em 0 .9em}
.ol-actions button{flex:1 1 auto;min-height:46px}
.ol-actions button:disabled{opacity:.5;cursor:not-allowed}
.ol-or{display:flex;align-items:center;gap:.8em;margin:1.1em 0 .8em;opacity:.7;font-size:.85em;letter-spacing:.12em;text-transform:uppercase}
.ol-or::before,.ol-or::after{content:"";flex:1;height:1px;background:currentColor;opacity:.4}
.ol-join{display:flex;gap:.6em}.ol-join input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:1.15em}.ol-join button{flex:0 0 auto;min-width:120px}
.ol-code{font-size:clamp(46px,9vw,76px);letter-spacing:.22em;line-height:1.05;margin:.05em 0 .15em;user-select:all}
.ol-seats{list-style:none;margin:.5em 0 1em;padding:0;display:grid;gap:.5em}
.ol-seat{display:flex;align-items:center;justify-content:space-between;gap:.8em;padding:.6em .8em;border:2px solid rgba(190,225,255,.28);border-radius:8px;background:rgba(0,12,60,.35)}
.ol-seat.me{border-color:#74e6ff}.ol-seat>div{display:grid;gap:.3em;min-width:0;flex:1}.ol-seat select{max-width:320px}
.ol-chip{padding:.25em .7em;border-radius:99px;font-size:.78em;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;border:2px solid transparent}
.ol-chip.ok{background:#b6ecff;color:#062676}.ol-chip.wait{border-color:rgba(190,225,255,.5)}.ol-chip.down{background:#ffd27a;color:#4a2a00}
.ol-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7em;margin:0 0 .6em}.ol-grid label{display:grid;gap:.3em}
.ol-grid.ro{margin:0 0 .6em}.ol-grid.ro div{padding:.4em .6em;border:1px solid rgba(190,225,255,.25);border-radius:6px}.ol-grid dd{margin:.15em 0 0}.ol-grid dt{margin:0}
.ol-msg{min-height:1.4em;margin:.5em 0 0;font-size:.95em;color:#ffe6a3}
.net-banner{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:70;max-width:min(92vw,640px);padding:.6em 1.1em;border-radius:99px;background:#ffd27a;color:#3b2300;font-size:.95em;letter-spacing:.03em;box-shadow:0 6px 24px #0007;text-align:center;pointer-events:none}
.net-banner[data-tone="ok"]{background:#b6ecff;color:#062676}
@media(max-width:560px){.ol-join{flex-direction:column}.ol-join button{min-width:0}}
@media(prefers-reduced-motion:no-preference){.net-banner{transition:opacity .2s}}
/* King of the table: who is playing, who is next */
.ol-status{margin:.2em 0 .8em;padding:.6em .8em;border-radius:8px;background:rgba(116,230,255,.14);border:1px solid rgba(116,230,255,.4);line-height:1.4;min-height:1.4em}
.ol-table{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.5em;margin:.3em 0 1em}
.ol-vs{align-self:center;opacity:.7;letter-spacing:.14em;text-transform:uppercase;font-size:.8em}
.ol-slot{display:grid;gap:.25em;align-content:center;padding:.7em .8em;border:2px solid rgba(190,225,255,.3);border-radius:8px;background:rgba(0,12,60,.35);min-width:0;overflow-wrap:anywhere}
.ol-slot strong{font-size:1.1em}.ol-slot small{opacity:.8;letter-spacing:.08em;text-transform:uppercase;font-size:.72em}
.ol-slot.king{border-color:#ffd27a;background:rgba(255,210,122,.12)}.ol-slot.me{box-shadow:0 0 0 2px #74e6ff inset}.ol-slot.empty{opacity:.6;border-style:dashed}.ol-slot.down,.ol-queue li.down{opacity:.6}
.ol-slot em,.ol-queue em{font-style:normal;opacity:.7;font-size:.85em}
.ol-sub{font-size:.78em;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin:.2em 0 .4em}
.ol-queue{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:.35em;max-height:30vh;overflow:auto}
.ol-queue li{display:flex;align-items:center;gap:.7em;padding:.4em .7em;border:1px solid rgba(190,225,255,.25);border-radius:6px;background:rgba(0,12,60,.3)}
.ol-queue li.me{border-color:#74e6ff}.ol-queue b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#b6ecff;color:#062676;font-size:.85em}
.ol-queue li span{flex:1;min-width:0;overflow-wrap:anywhere}.ol-queue small{opacity:.75}
.ol-empty{margin:0 0 1em;opacity:.8;line-height:1.45;font-size:.95em}
.room-strip{position:fixed;right:16px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:55;max-width:min(92vw,520px);padding:.5em 1.1em;border-radius:99px;border:2px solid rgba(190,225,255,.55);background:rgba(4,18,80,.82);color:#fff;font:inherit;font-size:.9em;letter-spacing:.04em;cursor:pointer;box-shadow:0 6px 24px #0007;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(6px)}
.room-strip:hover,.room-strip:focus-visible{border-color:#74e6ff;outline:none}
@media(max-width:560px){.ol-table{grid-template-columns:1fr}.ol-vs{justify-self:center}}
/* choose your player */
.ol-field small{text-transform:none;letter-spacing:0;opacity:.7}
.ol-chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:.5em}
.ol-char{display:grid;justify-items:center;gap:.3em;padding:.5em .3em;border:2px solid rgba(190,225,255,.3);border-radius:8px;background:rgba(0,12,60,.35);color:inherit;font:inherit;cursor:pointer;min-height:44px}
.ol-char img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:center top;border:2px solid rgba(190,225,255,.5)}
.ol-char b{font-size:.78em;letter-spacing:.06em;text-transform:uppercase;font-weight:400;text-align:center}
.ol-char:hover{border-color:#b6ecff}.ol-char.sel{border-color:#74e6ff;background:rgba(116,230,255,.2);box-shadow:0 0 0 2px #74e6ff inset}
.ol-char:focus-visible{outline:3px solid #74e6ff;outline-offset:1px}
.score-identity .name .ol-who{font-size:.55em;opacity:.8;letter-spacing:.04em;margin-left:.3em;white-space:nowrap}