:root{--online-bg:#07110d;--online-panel:#101b17;--online-panel-2:#15231d;--online-line:#2a3a32;--online-text:#f3efe3;--online-muted:#9eaaa3;--online-accent:#d5ae61;--online-green:#2e8b66;--online-danger:#ce736b;--online-radius:14px;color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body.online-page{margin:0;min-height:100dvh;background:radial-gradient(circle at 48% 20%,#163124 0,transparent 32%),var(--online-bg);color:var(--online-text)}button,input{font:inherit}button,a{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f2cc7a}.online-header{height:68px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;gap:clamp(18px,3vw,44px);border-bottom:1px solid #24332c;background:#08120ed9;backdrop-filter:blur(14px);position:relative;z-index:4}.brand{display:flex;align-items:center;color:var(--online-text);text-decoration:none;letter-spacing:2px}.brand span{font-size:27px;color:var(--online-accent);margin-right:8px}.brand small{font-size:8px;color:var(--online-muted);margin-left:5px;align-self:flex-end;margin-bottom:14px}.online-header nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}.online-header nav a,.account-link{color:var(--online-muted);text-decoration:none;font-size:13px}.online-header nav a[aria-current]{color:var(--online-text)}.connection-pill{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--online-muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.connection-pill span{width:7px;height:7px;border-radius:50%;background:#a85d56;box-shadow:0 0 0 4px #a85d5622}.connection-pill[data-connection=online] span{background:#56bd88;box-shadow:0 0 0 4px #56bd8822}.connection-pill[data-connection=reconnecting] span{background:var(--online-accent);animation:pulse 1s infinite}.account-link{padding:8px 12px;border:1px solid var(--online-line);border-radius:999px}.online-main{width:min(1480px,94vw);margin:0 auto;padding:24px 0 34px}.workspace-heading p,.section-intro>p,.tournament-card>p,#result-kicker{margin:0;color:var(--online-accent);font-size:10px;letter-spacing:.16em;font-weight:800}.online-layout{display:grid;grid-template-columns:minmax(480px,1fr) minmax(350px,440px);gap:clamp(20px,3vw,42px);align-items:start}.board-column{width:min(100%,calc(100dvh - 188px));justify-self:center}.player-strip{height:60px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;padding:0 4px}.player-avatar{width:36px;height:36px;border-radius:8px;background:#22342b;display:grid;place-items:center;color:var(--online-accent);font-family:Georgia,serif}.player-strip>div:nth-child(2){display:grid}.player-name{font-size:14px}.player-rating{font-size:11px;color:var(--online-muted)}.player-clock{font:700 clamp(22px,2.3vw,31px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;padding:7px 11px;border-radius:7px;background:#d9d2c2;color:#122018;font-variant-numeric:tabular-nums}.player-strip[data-running=true] .player-clock{background:var(--online-accent)}.board-shell{position:relative;aspect-ratio:1;border:8px solid #25352c;border-radius:8px;box-shadow:0 24px 60px #0008,0 0 0 1px #425247;overflow:hidden}.board-shell #online-board,.board-shell .caissa-board{width:100%;height:100%}.board-shell .caissa-board{--caissa-board-light:#e3d9bd;--caissa-board-dark:#557c68;--caissa-board-last-move:rgba(224,177,79,.5);--caissa-board-selected:#e7bb61;--caissa-board-legal:rgba(21,86,61,.72)}.board-curtain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(#0a1711e8,#0a1711f6);padding:25px;transition:opacity .25s}.board-curtain[hidden]{display:none}.curtain-mark{color:var(--online-accent);font-size:62px}.board-curtain strong{font:500 28px Georgia,serif}.board-curtain p{max-width:310px;color:var(--online-muted);font-size:13px}.play-workspace{height:min(730px,calc(100dvh - 150px));min-height:590px;background:linear-gradient(145deg,#13211b,#0d1814);border:1px solid var(--online-line);border-radius:var(--online-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 22px 48px #0005}.workspace-head{flex:none;padding:20px 20px 0}.workspace-heading{display:flex;justify-content:space-between;align-items:center}.workspace-heading h2{margin:3px 0 0;font:500 22px Georgia,serif}.workspace-heading>span{font-size:9px;letter-spacing:.13em;color:#bcd1c5;border:1px solid #385044;border-radius:99px;padding:5px 8px}.workspace-tabs{display:flex;margin-top:18px}.workspace-tabs button{flex:1;border:0;border-bottom:2px solid var(--online-line);background:transparent;color:var(--online-muted);padding:11px 4px;cursor:pointer;font-size:12px}.workspace-tabs button[aria-selected=true]{border-color:var(--online-accent);color:var(--online-text)}.workspace-body{overflow:auto;min-height:0;flex:1}.workspace-body>[role=tabpanel]{padding:21px}.workspace-body>[hidden]{display:none!important}.mode-fieldset{border:0;padding:0;margin:0}.mode-fieldset legend{font-size:11px;color:var(--online-muted);margin-bottom:9px}.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.time-grid button{min-height:68px;display:grid;place-content:center;border:1px solid var(--online-line);border-radius:9px;background:#12211a;color:var(--online-text);cursor:pointer}.time-grid button.selected{border-color:var(--online-accent);background:#29291c;box-shadow:inset 0 0 0 1px var(--online-accent)}.time-grid b{font-size:17px}.time-grid span{font-size:10px;color:var(--online-muted);margin-top:3px}.rated-row{display:flex;justify-content:space-between;align-items:center;margin:19px 0;padding:13px 0;border-block:1px solid var(--online-line)}.rated-row>span{display:grid}.rated-row b{font-size:13px}.rated-row small{color:var(--online-muted);font-size:10px;margin-top:3px}.rated-row input{appearance:none;width:42px;height:24px;border-radius:99px;background:#38443e;position:relative;cursor:pointer}.rated-row input:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#d6ddd8;transition:transform .15s}.rated-row input:checked{background:var(--online-green)}.rated-row input:checked:after{transform:translateX(18px)}button.primary-action{width:100%;min-height:49px;border:1px solid #e2c178;border-radius:8px;background:linear-gradient(#dfbc73,#c89e4f);color:#152019;font-weight:800;cursor:pointer}.primary-action:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}.trust-note{text-align:center;color:var(--online-muted);font-size:10px;margin:15px 0 0}.trust-note span{color:var(--online-green)}#queue-view,#result-view{text-align:center;padding:30px 6px}#queue-view h3,#result-view h3{font:500 25px Georgia,serif;margin:13px 0 5px}#queue-view p,#result-view p{color:var(--online-muted);font-size:12px}#queue-elapsed{display:block;font:600 38px ui-monospace,monospace;margin:17px}.search-orbit{width:92px;height:92px;margin:0 auto;border:1px solid #45624f;border-radius:50%;display:grid;place-items:center;position:relative}.search-orbit:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:var(--online-accent);top:-5px;animation:orbit 1.7s linear infinite;transform-origin:5px 51px}.search-orbit span{font-size:38px}.secondary-action,.game-actions button,.result-actions button,.tournament-card button{min-height:40px;border:1px solid #42564a;border-radius:7px;background:#172720;color:var(--online-text);padding:8px 13px;cursor:pointer}.game-status-line{display:flex;align-items:center;gap:9px;padding-bottom:15px;border-bottom:1px solid var(--online-line);font-size:13px}.game-status-line span{width:8px;height:8px;border-radius:50%;background:var(--online-accent)}.move-list{height:310px;overflow:auto;margin:0;padding:15px 4px;display:grid;grid-template-columns:28px 1fr 1fr;align-content:start;gap:7px 9px;list-style:none;font:13px ui-monospace,monospace}.move-list li{display:contents}.move-list .move-no{color:#728078}.move-list button{border:0;background:transparent;color:#e5e6dc;text-align:left;padding:2px;cursor:pointer}.game-actions,.result-actions{display:flex;gap:8px;border-top:1px solid var(--online-line);padding-top:14px}.game-actions button,.result-actions button{flex:1}.danger-action{border-color:#754641!important;color:#efa39c!important;background:#2e1d1b!important}.result-mark{font-size:45px;color:var(--online-accent)}.rating-change{margin:16px auto;padding:10px;border:1px solid var(--online-line);border-radius:8px;width:max-content}.result-actions{border:0}.section-intro h3,.tournament-card h3{font:500 23px Georgia,serif;margin:4px 0}.section-intro span,.tournament-card p{font-size:11px;color:var(--online-muted)}.empty-state{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--online-muted)}.empty-state>span{font-size:41px;color:#42564b}.empty-state strong{color:var(--online-text);margin-top:9px}.empty-state p{font-size:11px;max-width:250px}.tournament-card{border:1px solid var(--online-line);background:#17251f;border-radius:10px;padding:16px;margin-top:15px}.player-search{font-size:11px;color:var(--online-muted);display:grid;gap:7px;margin-top:19px}.player-search input{border:1px solid var(--online-line);border-radius:7px;background:#0a1510;color:var(--online-text);padding:10px}.workspace-foot{flex:none;height:46px;border-top:1px solid var(--online-line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#718078;font-size:9px}.workspace-foot a{color:#a8b6ae;text-decoration:none}dialog{background:#13211b;color:var(--online-text);border:1px solid var(--online-line);border-radius:12px;box-shadow:0 24px 70px #000b;min-width:min(360px,90vw)}dialog::backdrop{background:#020805c9;backdrop-filter:blur(3px)}dialog form{text-align:center}dialog form>div{display:flex;gap:8px;justify-content:center;margin:18px 0}dialog button{border:1px solid var(--online-line);background:#1a2b23;color:var(--online-text);border-radius:7px;padding:9px 13px;cursor:pointer}#promotion-dialog form>div button{font-size:31px;width:58px}.dialog-cancel{width:100%}#online-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);z-index:10;background:#26382f;border:1px solid #62776b;border-radius:8px;padding:11px 15px;box-shadow:0 10px 30px #0009;font-size:12px}@keyframes pulse{50%{opacity:.35}}@keyframes orbit{to{transform:rotate(360deg)}}
@media(max-width:900px){.online-header nav{display:none}.online-main{width:min(94vw,700px)}.online-layout{grid-template-columns:1fr}.board-column{width:min(100%,650px)}.play-workspace{height:auto;min-height:570px}.move-list{height:250px}}
@media(max-width:520px){.online-header{height:58px;padding:0 13px}.brand small,.connection-pill strong{display:none}.online-main{padding-top:15px}.board-column{width:100%}.player-strip{height:50px}.player-avatar{width:32px;height:32px}.player-clock{font-size:20px}.board-shell{border-width:5px}.online-layout{gap:14px}.play-workspace{min-height:540px}.workspace-body>[role=tabpanel]{padding:17px}.time-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.games-list,.players-list,.challenges-list{display:grid;gap:7px;margin-top:17px}.game-row{display:flex;justify-content:space-between;text-align:left;align-items:center;border:1px solid var(--online-line);border-radius:8px;background:#14231c;color:var(--online-text);padding:11px;cursor:pointer}.game-row strong{font-size:12px}.game-row strong span{color:var(--online-accent);margin:0 4px}.game-row small,.player-row small,.challenge-row small{color:var(--online-muted);font-size:10px}.player-row{display:grid;grid-template-columns:10px 1fr auto auto;gap:9px;align-items:center;border-bottom:1px solid var(--online-line);padding:10px 2px}.player-row strong{font-size:12px}.player-row button,.challenge-row button{border:1px solid var(--online-line);border-radius:6px;background:#192b22;color:var(--online-text);padding:5px 8px;font-size:10px;cursor:pointer}.player-row button:disabled{opacity:.45}.challenge-row{display:flex;align-items:center;gap:6px;border:1px solid #584e34;background:#282719;border-radius:8px;padding:9px}.challenge-row>span{display:grid;margin-right:auto}.presence{width:7px;height:7px;border-radius:50%;background:#77837d}.presence--online,.presence--seeking{background:#56bd88}.presence--playing{background:var(--online-accent)}
.custom-clock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;margin-top:10px}.custom-clock[hidden]{display:none}.custom-clock label{display:grid;grid-template-rows:minmax(14px,auto) 40px;align-items:start;gap:6px;color:var(--online-muted);font-size:10px}.custom-clock label>span{display:flex;align-items:end;min-height:14px;font-size:10px;line-height:1.2}.custom-clock input{min-width:0;width:100%;height:40px;border:1px solid var(--online-line);border-radius:7px;background:#0a1510;color:var(--online-text);padding:9px;line-height:20px;font-variant-numeric:tabular-nums}.lobby-secondary{display:flex;gap:8px;margin-top:9px}.lobby-secondary button{flex:1;border:1px solid var(--online-line);border-radius:7px;background:#172720;color:var(--online-text);padding:8px;font-size:11px;cursor:pointer}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.games-switch{display:grid;grid-template-columns:1fr 1fr;margin-top:17px;border-bottom:1px solid var(--online-line)}.games-switch button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--online-muted);padding:9px;cursor:pointer}.games-switch button[aria-selected=true]{border-color:var(--online-accent);color:var(--online-text)}
.challenge-notice{position:fixed;right:clamp(14px,3vw,34px);top:82px;z-index:8;width:min(360px,calc(100vw - 28px));display:grid;grid-template-columns:1fr auto;gap:5px 14px;padding:15px 16px;border:1px solid #826b3c;border-radius:11px;background:#17251ff5;box-shadow:0 18px 48px #000b;backdrop-filter:blur(12px)}.challenge-notice[hidden]{display:none}.challenge-notice p{grid-column:1/-1;margin:0;color:var(--online-accent);font-size:9px;letter-spacing:.14em;font-weight:800}.challenge-notice strong{font-size:14px}.challenge-notice>span{grid-column:1;color:var(--online-muted);font-size:11px}.challenge-notice>div{grid-column:2;grid-row:2/4;display:flex;align-items:center;gap:6px}.challenge-notice>div[hidden]{display:none}.challenge-notice button{border:1px solid #53685c;border-radius:7px;background:#21372c;color:var(--online-text);min-height:36px;padding:7px 10px;cursor:pointer}.challenge-notice button:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:900px){.challenge-notice{top:auto;bottom:14px}}
@media(max-width:360px){.custom-clock{grid-template-columns:1fr}.challenge-notice{grid-template-columns:1fr}.challenge-notice>div{grid-column:1;grid-row:auto}.challenge-notice button{flex:1}}

/* Shared board/workspace geometry. The player strips, square board and panel
   intentionally participate in one grid row so their outer edges stay aligned. */
.online-main{container-type:inline-size}
.online-layout{
    --online-workspace-width:clamp(360px,28vw,420px);
    --online-layout-gap:clamp(24px,2vw,32px);
    --online-player-strip-height:60px;
    --online-board-size:min(
        calc(100dvh - 246px),
        calc(100cqw - var(--online-workspace-width) - var(--online-layout-gap))
    );
    grid-template-columns:minmax(0,var(--online-board-size)) minmax(0,var(--online-workspace-width));
    gap:var(--online-layout-gap);
    align-items:stretch;
    width:100%;
    justify-content:center;
    margin-inline:auto;
}
.board-column{
    width:var(--online-board-size);
    min-width:0;
    display:grid;
    grid-template-rows:var(--online-player-strip-height) var(--online-board-size) var(--online-player-strip-height);
    justify-self:stretch;
}
.board-shell{
    width:100%;
    height:100%;
}
.play-workspace{
    width:100%;
    height:calc(var(--online-board-size) + var(--online-player-strip-height) + var(--online-player-strip-height));
    min-height:0;
    align-self:stretch;
}
.workspace-body{
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
.move-list{
    height:auto;
    min-height:310px;
    overflow:visible;
}

@media(min-width:901px) and (max-height:760px){
    .online-header{height:58px}
    .online-main{padding-top:14px;padding-bottom:20px}
    .online-layout{--online-board-size:min(
        calc(100dvh - 192px),
        calc(100cqw - var(--online-workspace-width) - var(--online-layout-gap))
    );--online-player-strip-height:50px}
    .board-column{grid-template-rows:var(--online-player-strip-height) var(--online-board-size) var(--online-player-strip-height)}
    .player-strip{height:50px}
    .player-avatar{width:32px;height:32px}
    .player-clock{font-size:21px}
}

@media(max-width:900px){
    .online-layout{
        --online-board-size:min(100cqw,650px);
        display:grid;
        grid-template-columns:minmax(0,1fr);
        width:100%;
        gap:24px;
    }
    .board-column{
        width:var(--online-board-size);
        grid-template-rows:60px auto 60px;
        justify-self:center;
    }
    .play-workspace{
        width:var(--online-board-size);
        height:clamp(540px,calc(100dvh - 88px),680px);
        min-height:0;
        justify-self:center;
    }
    .move-list{min-height:250px}
}

@media(max-width:520px){
    .board-column{
        width:100%;
        grid-template-rows:50px auto 50px;
    }
    .online-layout{gap:14px}
    .play-workspace{
        width:100%;
        height:clamp(500px,calc(100dvh - 72px),640px);
    }
}

/* Compact page identity: the page title shares the persistent navigation bar. */
.online-brand-group{
    display:flex;
    align-items:center;
    gap:12px;
    flex:none;
    min-width:0;
}
.online-header-divider{
    width:1px;
    height:25px;
    background:var(--online-line);
    flex:none;
}
.online-header h1{
    margin:0;
    color:var(--online-text);
    font:500 18px/1.1 Georgia,serif;
    white-space:nowrap;
}
.mobile-navigation{display:none;position:relative}
.mobile-navigation summary{
    padding:7px 8px;
    border:1px solid var(--online-line);
    border-radius:7px;
    color:var(--online-muted);
    cursor:pointer;
    font-size:11px;
    list-style:none;
}
.mobile-navigation summary::-webkit-details-marker{display:none}
.game-mode-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin:17px 0 12px;
    padding:12px 0;
    border-block:1px solid var(--online-line);
}
.game-mode-row>span{display:grid;gap:3px}
.game-mode-row b{font-size:13px}
.game-mode-row small{color:var(--online-muted);font-size:10px}
.game-mode-row label{display:flex;align-items:center;gap:8px;color:var(--online-muted);font-size:11px}
.game-mode-row label[hidden]{display:none}
.game-mode-row input{appearance:none;width:42px;height:24px;border-radius:99px;background:#38443e;position:relative;cursor:pointer}
.game-mode-row input:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#d6ddd8;transition:transform .15s}
.game-mode-row input:checked{background:var(--online-green)}
.game-mode-row input:checked:after{transform:translateX(18px)}
.action-guidance{
    min-height:16px;
    margin:0 0 9px;
    color:var(--online-muted);
    font-size:11px;
    line-height:1.4;
    text-align:center;
}
.workspace-body:has(#game-view:not([hidden])){
    overflow:hidden;
    scrollbar-gutter:auto;
}
#panel-new:has(#game-view:not([hidden])){
    min-height:0;
    padding-bottom:0;
}
#game-view:not([hidden]){
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
}
#game-view .move-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}
.game-action-footer{
    flex:none;
    margin-top:auto;
    min-height:69px;
    padding:14px 0 14px;
    border-top:1px solid var(--online-line);
}
.game-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:0;
    padding:0;
    border:0;
    background:none;
}
.game-actions #offer-draw{grid-column:span 2}
.game-actions:has(#decline-draw:not([hidden])) #offer-draw{grid-column:span 1}
.game-actions button{
    min-width:0;
    min-height:44px;
    font-size:11px;
    line-height:1.2;
    white-space:nowrap;
}
.game-actions[aria-busy=true] button{cursor:wait}
.result-actions--primary{margin-top:18px}
.result-actions--primary button{min-height:47px}
.result-actions--secondary{margin-top:8px;padding-top:0}
.result-actions--secondary button{background:transparent}
.demo-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px;
    padding:10px 12px;
    border:1px solid #735f37;
    border-radius:8px;
    background:#272519;
    color:var(--online-accent);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.demo-banner span{color:#c8c2ad;letter-spacing:normal;text-transform:none}
.tournament-demo-head{display:flex;align-items:start;justify-content:space-between;gap:16px}
.tournament-demo-head p,.tournament-next p{margin:0;color:var(--online-accent);font-size:9px;font-weight:800;letter-spacing:.15em}
.tournament-demo-head h3{margin:4px 0 0;font:500 24px Georgia,serif}
.tournament-demo-head time{display:grid;justify-items:end;gap:3px;color:var(--online-muted);font-size:9px}
.tournament-demo-head time strong{color:var(--online-text);font:700 23px/1 ui-monospace,monospace}
.tournament-standings{width:100%;margin-top:20px;border-collapse:collapse;font-size:12px}
.tournament-standings caption{text-align:left;margin-bottom:8px;color:var(--online-muted);font-size:10px}
.tournament-standings th,.tournament-standings td{padding:9px 8px;border-bottom:1px solid var(--online-line);text-align:left}
.tournament-standings th:first-child,.tournament-standings td:first-child{width:38px;color:var(--online-muted)}
.tournament-standings th:last-child,.tournament-standings td:last-child{text-align:right}
.tournament-standings .is-current-player{background:#293020;color:#fff4d4;box-shadow:inset 3px 0 var(--online-accent)}
.tournament-standings .is-current-player span{color:var(--online-accent);font-size:10px}
.tournament-next{display:grid;gap:7px;margin-top:20px;padding-top:17px;border-top:1px solid var(--online-line)}
.tournament-next>span{color:var(--online-muted);font-size:11px}
.tournament-next button{min-height:44px;margin-top:5px;border:1px solid #e2c178;border-radius:8px;background:linear-gradient(#dfbc73,#c89e4f);color:#152019;font-weight:800;cursor:pointer}

@media(max-width:900px){
    .online-header{gap:18px}
    .online-brand-group{gap:10px}
    .mobile-navigation{display:block;margin-left:auto}
    .online-header .mobile-navigation nav{
        position:absolute;
        top:calc(100% + 10px);
        right:0;
        display:grid;
        min-width:170px;
        gap:0;
        padding:7px;
        border:1px solid var(--online-line);
        border-radius:9px;
        background:#0d1814f7;
        box-shadow:0 16px 38px #0009;
    }
    .online-header .mobile-navigation:not([open]) nav{display:none}
    .online-header .mobile-navigation nav a{padding:10px;border-radius:6px}
    .online-header .mobile-navigation nav a[aria-current]{background:#1a2b23}
}

@media(max-width:520px){
    .online-header{gap:9px}
    .online-brand-group{gap:7px}
    .online-header-divider{height:21px}
    .online-header h1{font-size:15px}
    .account-link{padding:7px 9px;font-size:11px}
    .connection-pill{display:none}
    .tournament-demo-head h3{font-size:21px}
    .tournament-demo-head time strong{font-size:20px}
    .demo-banner{align-items:start;flex-direction:column;gap:3px}
}

@media(max-width:360px){
    .online-header{gap:6px;padding-inline:9px}
    .brand{letter-spacing:1px}
    .online-header h1{font-size:14px}
}

/* Full-screen playing room: navigation becomes a compact side surface so the
   board/workspace pair owns the viewport instead of inheriting a page header. */
body.online-page{position:relative;overflow-x:hidden}
.online-menu-shell{
    position:fixed;
    top:14px;
    left:14px;
    z-index:12;
}
.online-side-menu{position:relative}
.online-side-menu>summary{
    position:relative;
    z-index:2;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid #42564a;
    border-radius:11px;
    background:#0d1814ee;
    color:var(--online-accent);
    box-shadow:0 10px 28px #0008;
    cursor:pointer;
    list-style:none;
    font:500 24px/1 Georgia,serif;
}
.online-side-menu>summary::-webkit-details-marker{display:none}
.online-side-menu[open]>summary{background:#1a2b23;border-color:#826b3c}
.online-side-menu__panel{
    position:absolute;
    top:-6px;
    left:-6px;
    width:min(264px,calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
    overflow:auto;
    display:grid;
    gap:18px;
    padding:68px 18px 18px;
    border:1px solid #42564a;
    border-radius:14px;
    background:#0b1611fa;
    box-shadow:0 24px 70px #000c;
    backdrop-filter:blur(16px);
}
.online-side-menu:not([open]) .online-side-menu__panel{display:none}
.online-side-menu__panel .brand{width:max-content}
.online-side-menu__panel nav{display:grid;gap:4px}
.online-side-menu__panel nav a{
    padding:10px 11px;
    border-radius:7px;
    color:var(--online-muted);
    text-decoration:none;
    font-size:13px;
}
.online-side-menu__panel nav a:hover,
.online-side-menu__panel nav a:focus-visible,
.online-side-menu__panel nav a[aria-current]{background:#1a2b23;color:var(--online-text)}
.online-side-menu__status{
    display:grid;
    gap:12px;
    padding-top:14px;
    border-top:1px solid var(--online-line);
}
.online-side-menu__status .connection-pill{margin:0}
.online-side-menu__status .account-link{width:max-content}

.online-main{
    --online-page-pad-block:clamp(8px,1.67dvh,24px);
    --online-vertical-reserve:calc(120px + clamp(16px,3.34dvh,48px));
    width:min(1540px,calc(100vw - 112px));
    margin-inline:auto;
    padding:var(--online-page-pad-block) 0;
}
.online-layout{
    --online-workspace-width:clamp(360px,28vw,420px);
    --online-layout-gap:clamp(24px,2vw,32px);
    --online-board-size:min(
        calc(100dvh - var(--online-vertical-reserve)),
        calc(100cqw - var(--online-workspace-width) - var(--online-layout-gap))
    );
}
.challenge-notice{top:14px}
#signin-dialog{width:min(390px,calc(100vw - 28px));padding:24px}
#signin-dialog h2{margin:0;font:500 24px/1.15 Georgia,serif}
#signin-dialog p{margin:10px auto 0;max-width:310px;color:var(--online-muted);font-size:13px;line-height:1.5}
#signin-dialog form>div{margin-bottom:0}
#signin-dialog button{min-width:118px}
#signin-dialog .primary-action{width:auto}

@media(min-width:901px) and (max-height:760px){
    .online-main{
        --online-page-pad-block:8px;
        --online-vertical-reserve:116px;
        padding:var(--online-page-pad-block) 0;
    }
    .online-layout{
        --online-board-size:min(
            calc(100dvh - var(--online-vertical-reserve)),
            calc(100cqw - var(--online-workspace-width) - var(--online-layout-gap))
        );
    }
}

@media(max-width:900px){
    .online-menu-shell{position:absolute;top:7px;left:8px}
    .online-side-menu>summary{width:40px;height:40px;border-radius:9px;font-size:21px}
    .online-side-menu__panel{top:-3px;left:-3px;padding-top:60px}
    .online-main{width:min(94vw,700px);padding:52px 0 24px}
    .online-layout{--online-board-size:min(100cqw,650px)}
    .challenge-notice{top:auto}
}

@media(max-width:520px){
    .online-main{width:calc(100vw - 20px);padding-top:52px}
    .online-layout{--online-board-size:100cqw}
}

/* Lobby information architecture: real Online history and presence stay
   visually distinct from capabilities that remain staged for later. */
.workspace-body>[role=tabpanel]{min-height:100%}
#panel-new{height:100%}
#lobby-view{min-height:100%;display:flex;flex-direction:column}
#lobby-view[hidden]{display:none}
#find-game{border-color:#78b94f;background:linear-gradient(#88c957,#66a83f);color:#0d1a11}
.guest-note{margin:9px 0 0;text-align:center;color:#afbbb4;font-size:10px;line-height:1.45}
.guest-note[hidden]{display:none}
.lobby-secondary{display:grid;grid-template-columns:1fr;gap:8px;margin:9px 0 12px}
.lobby-secondary button{width:100%;min-height:39px}
.tournament-cta{display:grid!important;grid-template-columns:auto auto auto;align-items:center;justify-content:center;gap:9px;min-height:49px!important;border-color:#8a6b31!important;background:linear-gradient(135deg,#382817,#302318)!important;color:#f0c76e!important}
.tournament-cta>span{font-size:17px;line-height:1}
.tournament-cta>strong{font-size:13px}
.tournament-cta>small{color:#d9bd82;font-size:9px;letter-spacing:.03em}
.tournament-cta[data-availability=preview]{border-color:#607b64!important;background:linear-gradient(135deg,#1b3025,#17281f)!important}
.lobby-access{flex:none;margin-top:auto;padding:15px 0 2px;border-top:1px solid var(--online-line)}
.lobby-access[hidden]{display:none}
.lobby-access>p:first-child{margin:0 0 9px;color:#afbbb4;font-size:10.5px;line-height:1.4;text-align:center}
.lobby-access__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.lobby-access__actions a,.lobby-access__actions button{min-height:41px;display:grid;place-items:center;border:1px solid #52695c;border-radius:7px;background:#14231c;color:var(--online-text);padding:7px;text-decoration:none;font-size:11px;font-weight:700;cursor:pointer}
.lobby-access__actions a:first-child{border-color:#826b3c;color:#f1d28f}
.lobby-access__actions #play-as-guest{border-color:#5f806c;background:#1a2d24}
.lobby-access__actions #play-as-guest:disabled{opacity:.55;cursor:wait}
.games-subtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--online-line)}
.games-subtabs button{min-width:0;border:0;border-bottom:2px solid transparent;background:transparent;color:#afbbb4;padding:11px 5px 10px;cursor:pointer;font-size:10.5px;line-height:1.25}
.games-subtabs button small{display:block;margin-top:3px;color:#b9a06c;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.games-subtabs button[aria-selected=true]{border-color:var(--online-accent);color:var(--online-text);background:linear-gradient(180deg,transparent,#7d67351a)}
.games-subtabs button[aria-selected=true] small{color:var(--online-accent)}
.games-context{min-height:245px;padding-top:4px}
[data-games-panel][hidden]{display:none!important}
.games-state{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--online-muted)}
.games-state>span{color:#627a6b;font:500 34px/1 Georgia,serif}
.games-state>p{margin:12px 0 4px;color:var(--online-accent);font-size:8px;font-weight:800;letter-spacing:.14em}
.games-state>h3{margin:0;font:500 21px/1.2 Georgia,serif;color:var(--online-text)}
.games-state>small{max-width:270px;margin-top:8px;font-size:10px;line-height:1.5}
.open-games-space{margin-top:12px;padding:13px 2px 0;border-top:1px solid var(--online-line)}
.open-games-space>header{display:flex;align-items:end;justify-content:space-between;gap:12px}
.open-games-space>header p{margin:0;color:var(--online-accent);font-size:8px;font-weight:800;letter-spacing:.14em}
.open-games-space>header h3{margin:3px 0 0;font:500 16px/1.2 Georgia,serif}
.open-games-space>header>small{color:#b9a06c;font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.open-games-space>div>p{margin:9px 0 0;color:var(--online-muted);font-size:10px;line-height:1.45}
.empty-state--compact{min-height:105px}
.empty-state--compact p{margin-bottom:0}
.players-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--online-line)}
.players-heading p{margin:0;color:var(--online-accent);font-size:9px;font-weight:800;letter-spacing:.14em}
.players-heading h3{margin:3px 0 0;font:500 23px Georgia,serif}
.players-heading>strong{color:#79c69f;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.players-heading+.player-search{margin:14px 0 0}
.player-search{color:#afbbb4}
.player-search input{min-height:40px;padding-left:34px;background-color:#0a1510;background-image:linear-gradient(45deg,transparent 47%,#87958d 48%,#87958d 52%,transparent 53%);background-size:8px 8px;background-position:15px 16px;background-repeat:no-repeat}
.player-search+.challenges-list{margin-top:12px}
#players-list.empty-state{min-height:260px}
.players-list{margin-top:10px}
.tournament-demo-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-bottom:1px solid var(--online-line)}
.tournament-demo-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--online-muted);padding:9px;cursor:pointer}
.tournament-demo-tabs button[aria-selected=true]{border-color:var(--online-accent);color:var(--online-text)}
[data-tournament-panel][hidden]{display:none!important}
.tournament-game-row{display:grid;gap:4px;padding:12px 4px;border-bottom:1px solid var(--online-line)}
.tournament-game-row:first-child{margin-top:8px}
.tournament-game-row strong{font-size:12px}
.tournament-game-row span{color:var(--online-muted);font-size:10px}

@media(max-width:390px){
    .games-subtabs button{padding-inline:3px;font-size:9px}
    .lobby-access__actions{grid-template-columns:1fr 1fr}
    .lobby-access__actions #play-as-guest{grid-column:1/-1}
    .tournament-cta{grid-template-columns:auto auto;gap:7px}
    .tournament-cta>small{grid-column:1/-1}
}

@media(min-width:901px) and (max-height:760px){
    #panel-new{padding-block:14px}
    #panel-new .time-grid button{min-height:56px}
    #panel-new .game-mode-row{margin:11px 0 8px;padding:8px 0}
    #panel-new .action-guidance{margin-bottom:7px}
    #panel-new .lobby-secondary{gap:6px;margin-block:7px 8px}
    #panel-new .lobby-secondary button{min-height:35px}
    #panel-new .tournament-cta{min-height:43px!important}
    #panel-new .trust-note{margin-top:9px}
    #panel-new .lobby-access{padding-top:10px}
    #panel-new .lobby-access__actions a,#panel-new .lobby-access__actions button{min-height:36px}
}