/* Cross Link: one task per screen. */
:root{--cl-bg:#12101b;--cl-panel:#201b2e;--cl-border:#3c334f;--cl-muted:#b8adc8;--cl-accent:#ffd21f}
body{margin:0;background:var(--cl-bg)!important;color:#f6f1ff;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;box-shadow:none!important}
body:not(.board-view) .app{display:block!important;width:min(1040px,100%);max-width:1040px;margin:0 auto;padding:24px 28px 36px;box-sizing:border-box}
.cl-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin:0 0 30px;padding:0 0 12px;border-bottom:0}
.cl-brand{width:100%}
.cl-brand img{display:block;width:100%;height:auto;object-fit:contain;max-width:100%;margin:0 auto!important;filter:none!important}
.cl-nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.cl-nav button{padding:11px 20px;min-height:44px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--cl-muted);font:650 15px system-ui;cursor:pointer}
.cl-nav button[aria-current=page]{background:#3b2a55;color:#fff;border-color:#735496}
body:not(.board-view) .panel{display:block!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;min-width:0}
.cl-page[hidden],.legacy-controls,.cl-page .room-locked{display:none!important}
.cl-page h1{margin:0 0 7px;font-size:30px;line-height:1.2;letter-spacing:-.7px;color:#fff;text-align:left}
.page-intro{margin:0 0 24px;color:var(--cl-muted);font-size:15px;line-height:1.6}
body:not(.board-view) .board-wrap{display:none!important}
.cl-page .quick-play{display:flex!important;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px;padding:22px 24px;background:#2c223e;border:1px solid #5a426e;border-radius:16px;box-shadow:none}
.quick-play-eyebrow,.quick-play-players,.quick-play-customise{display:none!important}
.cl-page .quick-play-title{font-size:19px;font-weight:750;color:#fff;line-height:1.4}
.cl-page .quick-play-meta{color:var(--cl-muted);font-size:14px;margin-top:6px}
.cl-page .quick-play-actions{display:block}
.cl-page button.primary,.cl-page #quickPlayBtn{background:var(--cl-accent)!important;color:#201706!important;border:0!important;box-shadow:none!important;border-radius:10px;min-height:46px;padding:12px 24px;font:750 15px system-ui}
.cl-page .setup-collapse{background:var(--cl-panel);border:1px solid var(--cl-border);box-shadow:none;border-radius:16px;overflow:clip;margin:0 0 20px}
.cl-page .setup-summary{padding:19px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;color:#fff;cursor:pointer}
.setup-summary-label{font-size:17px;letter-spacing:0!important;text-transform:none!important}
.setup-summary-hint{font-size:12px;font-weight:400;color:var(--cl-muted);text-align:right}
.cl-page .setup-grid{display:block;padding:0 22px 22px}
.cl-page .setup-left{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px;padding:0;border:0;background:none}
#player1Card,#loggedInNote,.setup-right-title,.setup-subsection>.subsection-title{display:none!important}
.cl-page .setup-right,.cl-page .setup-subsection,.cl-page .player-grid{display:block;background:transparent;padding:0;border:0;box-shadow:none}
.cl-page .active-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cl-page .player-choice-card{margin:0;padding:16px;border:1px solid #4b3c60;border-radius:12px;background:#292136;box-shadow:none;min-width:0}
.cl-page .player-choice-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.cl-page .player-title{min-width:0;display:flex;align-items:center;gap:8px}
.cl-page .player-name-input{background:#17121f!important;border:1px solid #51415f!important;color:#fff!important;min-height:40px;font:650 15px system-ui;width:100%;padding:8px 10px;border-radius:8px;box-sizing:border-box}
.cl-page .player-dot{width:11px;height:11px;flex:none}
.cl-page .bot-toggle{font-size:12px;white-space:nowrap;display:flex;gap:5px;align-items:center;margin:0}
.cl-page .side-tag{font-size:12px;color:var(--cl-muted);margin:0 0 9px}
.cl-page .side-chip-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cl-page .side-chip{min-height:35px;padding:6px 5px;font-size:12px;border-radius:7px;box-shadow:none}
.cl-page .side-chip .chip-dot{width:7px;height:7px}
.cl-page .finish-icons,.cl-page #humanPlayCard{display:none!important}
.cl-page label{letter-spacing:0;text-transform:none;font-weight:550}
.cl-page .control-block{margin:0;min-width:0}
.cl-page .control-block>label{font-size:13px;color:var(--cl-muted);margin-bottom:7px;display:block}
.cl-page select{min-height:44px;border:1px solid #5a486c;border-radius:9px;background:#17121f;color:#fff;font:15px system-ui;padding:9px 12px;width:100%;box-sizing:border-box}
.cl-page .move-hint{font-size:12px;line-height:1.5;color:var(--cl-muted);margin-top:8px;font-weight:400}
.menu-game-actions,.help-more{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.menu-game-actions button,.help-more button,.help-more a,.help-card button{min-height:44px;border-radius:9px;border:1px solid #59446f;background:#2a2139;color:#eee4ff;padding:10px 17px;font:600 14px system-ui;text-decoration:none;box-shadow:none}
.menu-game-actions [hidden]{display:none!important}
.menu-game-actions button:disabled{opacity:.4}
.menu-status #status{background:transparent!important;border:0!important;color:var(--cl-muted);font-size:13px;padding:0;margin:16px 0;font-weight:400}
#view-settings .piece-settings{margin:0 0 20px;background:var(--cl-panel);padding:22px;border:1px solid var(--cl-border);border-radius:16px;text-align:left}
#view-settings .piece-settings>strong{color:#fff;font-size:18px}
#view-settings .piece-style-picker{justify-content:flex-start;margin:18px 0 0}
#view-settings .piece-style-picker select{width:220px;max-width:100%}
#view-settings .piece-style-picker img{width:52px;height:52px}
#view-settings .customise-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 22px 22px}
#view-settings .audio-panel,#view-settings .customise-side{background:transparent;border:0;padding:0;box-shadow:none}
#view-settings .audio-title{font-size:15px;color:#fff;margin-bottom:16px}
#view-settings .audio-volume-label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--cl-muted);margin-bottom:16px}
#view-settings .toggle-card{background:#2c233a;border:1px solid #514160;box-shadow:none;font-size:14px;margin-bottom:18px}
#view-settings .control-block{margin-bottom:18px}
#view-online .dev-room{background:var(--cl-panel);border:1px solid var(--cl-border);padding:24px;margin:0;border-radius:16px}
#view-online .dev-room summary{display:none}
#view-online .dev-room p{color:var(--cl-muted);font-size:14px}
#view-online #devEntry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#view-online .dev-room label{margin:0;font-size:13px;display:flex;flex-direction:column}
#view-online .dev-room input,#view-online .dev-room select{width:100%;max-width:none;background:#17121f;color:white;border:1px solid #5a486c;box-sizing:border-box}
#view-online .dev-room button{margin:0;min-height:46px;color:#fff;background:#46305e;border:1px solid #735694;border-radius:9px}
#devCreate{grid-column:1/-1}#devJoin{align-self:end}#onlineBackToBoard{margin:0 0 20px}
.help-card,.local-stats{padding:22px;background:var(--cl-panel);border:1px solid var(--cl-border);border-radius:14px;margin:0 0 18px}
.help-card h2{font-size:18px;color:#fff;margin:0 0 12px}
.help-card p{font-size:14px;line-height:1.7;color:var(--cl-muted);margin-bottom:18px}
.local-stats summary{cursor:pointer;font-weight:650;font-size:15px}
.local-stats .profile-bar{margin:18px 0 0;padding:14px;background:#292136;box-shadow:none;border:0;flex-wrap:wrap}
.local-stats .game-log{margin:16px 0 0;max-height:360px;overflow:auto}
.cl-footer{font-size:12px;color:#8f819f;text-align:center;margin:30px 0 0;padding-top:20px;border-top:1px solid var(--cl-border)}
#nameSignInBtn,#nameNewAccountBtn,.name-or,.name-fineprint,#streakBadge{display:none!important}
body.board-view .cl-header,body.board-view .cl-footer{display:none!important}
body.board-view .board-view-tools{z-index:11010!important;top:10px!important;left:12px!important;right:12px!important;display:flex!important;justify-content:space-between!important;pointer-events:none}
body.board-view .board-view-tools button{pointer-events:auto;font:650 14px system-ui!important;padding:10px 16px!important;min-height:42px!important;border-radius:10px!important;background:#22172f!important;color:white!important;border:1px solid #87649e!important;box-shadow:none!important}
body.board-view .board-options-panel{z-index:11020!important;position:fixed!important;top:62px!important;right:12px!important;left:auto!important;width:min(350px,calc(100vw - 24px))!important;max-height:calc(100dvh - 80px)!important;overflow:auto!important;box-sizing:border-box;background:#21172e!important;color:#fff!important;border:1px solid #75528e!important;padding:18px!important;border-radius:15px!important;box-shadow:0 16px 60px #0008!important}
body.board-view .board-options-panel.show{display:block!important}
.cl-options-close{float:right;padding:5px 10px!important;min-height:32px!important;background:#3b294e!important;color:#fff!important;border:1px solid #674b7b!important}
.cl-option-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}
.cl-option-actions button{margin:0!important;min-height:40px!important;font-size:13px!important;border-radius:8px!important;background:#3c2b50!important;color:white!important;border:1px solid #69507f!important}
.cl-option-group{border-top:1px solid #54405f;padding:12px 0;margin-top:4px}
.cl-option-group summary{font-size:14px;font-weight:650;cursor:pointer;margin-bottom:10px}
.cl-option-group label{font-size:13px!important;letter-spacing:0!important;text-transform:none!important}
.cl-option-group .board-audio-panel{background:transparent!important;padding:0!important;border:0!important;box-shadow:none!important}
.cl-option-group .board-audio-title{display:none}
.board-view .dev-room{position:static!important;margin-top:12px!important;max-width:none!important;width:auto!important;padding:10px!important;max-height:none!important;background:#2c203b!important;border:1px solid #69507f!important;font-size:12px!important}
.board-view .dev-room[hidden]{display:none!important}
body.board-view #finishBtn{position:fixed;bottom:90px;right:20px;z-index:10020}
#rollToStartOverlay{max-height:calc(100dvh - 160px);overflow:auto;z-index:10000;box-sizing:border-box;animation:none!important;transform:translate(-50%,-50%)!important;border:1px solid #766287;background:#24192f;color:#fff;box-shadow:0 20px 70px #0008;padding:22px;border-radius:18px;min-width:min(360px,calc(100vw - 32px))}
.rts-title{font-size:21px;color:#fff;letter-spacing:0}.rts-sub{font-size:13px;color:#c7b8d4;font-weight:400;opacity:1}
.rts-row{background:#362741;border:1px solid #5c456e;color:white;font-size:14px;padding:10px;border-radius:9px}.rts-row.active{background:#4d355d;box-shadow:none}.rts-row.pending{opacity:.6}
.rts-row.tied,.rts-row.win{color:#17101e}.rts-message{font-size:14px}
.rts-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px;pointer-events:auto}
.rts-actions button{border:1px solid #89699d;border-radius:8px;background:#49315e;color:white;padding:9px 12px;min-height:40px;font:600 13px system-ui;cursor:pointer}
:focus-visible{outline:3px solid #ffd21f!important;outline-offset:3px}
@media(max-width:600px){
 body:not(.board-view) .app{padding:18px 16px 30px}
 .cl-header{gap:16px;margin-bottom:25px;padding-bottom:16px}.cl-nav{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.cl-nav button{font-size:14px;padding:10px 3px}
 .cl-page h1{font-size:26px}.page-intro{font-size:14px;margin-bottom:20px}
 .cl-page .quick-play{padding:18px;align-items:stretch;flex-direction:column;gap:16px}.cl-page #quickPlayBtn{width:100%;min-height:48px}.cl-page .setup-summary{padding:17px}.setup-summary-hint{display:none}
 .cl-page .setup-grid{padding:0 16px 16px}.cl-page .setup-left{grid-template-columns:1fr;gap:14px}.cl-page .active-player-grid{grid-template-columns:1fr}.cl-page .player-choice-card{padding:14px}
 .menu-game-actions{display:grid;grid-template-columns:1fr 1fr}.menu-game-actions button{font-size:12px;padding:10px}
 #view-settings .customise-grid{grid-template-columns:1fr;padding:0 16px 16px;gap:14px}#view-settings .piece-settings{padding:18px}#view-settings .piece-style-picker select{width:calc(100% - 70px)}#view-settings .piece-style-picker>span{width:100%}
 #view-online #devEntry{grid-template-columns:1fr}#devCreate{grid-column:auto}#view-online .dev-room{padding:18px}
 .help-card,.local-stats{padding:18px}.help-more>*{flex:1;text-align:center}
 #rollToStartOverlay{padding:17px}.rts-actions button{font-size:12px;padding:8px 10px}
}
/* Override legacy light-card rules without lowering text contrast. */
.cl-page .control-block{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;color:#eee4ff!important}
.cl-page .player-choice-card{background:#292136!important;border:1px solid #4b3c60!important;color:#eee4ff!important;box-shadow:none!important}
.cl-page .bot-toggle{color:#d7cbe2!important;opacity:1!important}
.cl-page .side-tag,.cl-page .move-hint{color:#b8adc8!important;opacity:1!important}
.cl-page .side-chip:not(.selected){background:#382b46!important;color:#eee4ff!important;border:1px solid #5b446d!important;opacity:1!important}
.cl-page .side-chip.selected{color:#17101e!important;background:var(--chip)!important;border:1px solid var(--chip)!important}
.cl-page .setup-summary-label{text-align:left!important;margin-right:auto;flex:1}
body.board-view .board-view-tools #exitBoardBtn,body.board-view .board-view-tools #boardOptionsBtn{position:static!important;inset:auto!important}
body.board-view .board-wrap{background:radial-gradient(ellipse at top,#342143,#151020 75%)!important}
body.board-view .playbar{background:#241b30!important;border:1px solid #654b77!important;box-shadow:none!important}
.rts-row .rolling,.rts-row .rts-dice{color:inherit!important}
.rts-roll{pointer-events:auto;margin-top:16px}
.rts-roll button{width:100%;min-height:44px;background:#ffd21f;color:#211607;border:0;border-radius:9px;padding:10px 18px;font:750 15px system-ui;cursor:pointer}
.rts-roll button:disabled{background:#493957;color:#c4b5d0;cursor:default}
/* Keep board and dice in one centred group, with a consistent small gap. */
body.board-view .board-wrap,body.board-view:not(.classic-mode) .board-wrap,body.board-view.pawn-status-hidden .board-wrap{
 --board-side:min(calc(100dvh - 100px),calc(100vw - 280px));
 display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:18px!important;padding:72px 24px 24px!important;box-sizing:border-box!important;grid-template-columns:none!important;grid-template-rows:none!important;
}
body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap{--board-side:min(calc(100dvh - 100px),calc(100vw - 480px));padding-left:220px!important}
body.board-view canvas#board,body.board-view:not(.classic-mode):not(.pawn-status-hidden) canvas#board,body.classic-mode.board-view canvas#board,body.board-view.pawn-status-hidden canvas#board{
 width:var(--board-side)!important;height:var(--board-side)!important;max-width:var(--board-side)!important;max-height:var(--board-side)!important;flex:0 0 auto!important;margin:0!important;order:0!important;
}
body.board-view .playbar,body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar{
 position:static!important;inset:auto!important;width:196px!important;max-width:196px!important;flex:0 0 196px!important;display:flex!important;flex-direction:column!important;gap:14px!important;padding:14px!important;margin:0!important;box-sizing:border-box!important;border-radius:16px!important;align-self:center!important;order:1!important;
}
body.board-view .playbar .dice{display:flex!important;gap:10px!important;justify-content:center!important;order:1!important}
body.board-view .playbar .die{width:72px!important;height:72px!important;border-radius:14px!important;font-size:36px!important}
body.board-view .playbar #rollBtn{order:0!important;width:100%!important;min-height:52px!important;font-size:17px!important;border-radius:10px!important}
body.board-view .playbar #skipBtn{order:2!important;width:100%!important;min-height:44px!important;font-size:14px!important}
.game-result-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12050;background:#251a33;color:white;padding:28px;border:1px solid #89669d;border-radius:18px;box-shadow:0 20px 90px #000b;width:min(360px,calc(100vw - 36px));box-sizing:border-box;text-align:center}
.game-result-panel[hidden]{display:none!important}
.game-result-panel h2{font-size:26px;margin:0 0 10px}.game-result-panel p{font-size:15px;color:#cbbbda;margin:0 0 24px}
.game-result-panel button{display:block;width:100%;min-height:46px;margin-top:10px;border-radius:10px;font:700 15px system-ui;padding:10px;border:1px solid #88649e;background:#3b294e;color:white;cursor:pointer}
.game-result-panel button.primary{background:#ffd21f;border:0;color:#211707}
/* One results panel for human and computer wins; local statistics still record. */
#winModal{display:none!important}
@media(max-width:760px){
 body.board-view .board-wrap,body.board-view:not(.classic-mode) .board-wrap,body.board-view.pawn-status-hidden .board-wrap,body.board-view:not(.classic-mode):not(.pawn-status-hidden) .board-wrap{--board-side:min(calc(100vw - 32px),calc(100dvh - 280px));flex-direction:column!important;gap:12px!important;padding:74px 16px 20px!important;overflow:auto!important}
 body.classic-mode.board-view .board-wrap,body.board-view.pawn-status-hidden .board-wrap{--board-side:min(calc(100vw - 32px),calc(100dvh - 220px))}
 body.board-view .expanded-pawn-status{order:-1!important}
 body.board-view .playbar,body.board-view:not(.classic-mode):not(.pawn-status-hidden) .playbar{width:var(--board-side)!important;max-width:var(--board-side)!important;flex:0 0 auto!important;display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:10px!important;padding:10px!important;order:1!important;margin:0!important}
 body.classic-mode.board-view .playbar{grid-template-columns:1fr auto!important}
 body.board-view .playbar .die{width:54px!important;height:54px!important;font-size:28px!important;border-radius:11px!important}
 body.board-view .playbar .dice{gap:7px!important}
 body.board-view .playbar #rollBtn{min-height:52px!important;font-size:14px!important;padding:8px!important}
 body.board-view .playbar #skipBtn{font-size:12px!important;padding:6px!important}
}
@media(min-width:761px){
 body.board-view:not(.classic-mode):not(.pawn-status-hidden) .expanded-pawn-status{position:fixed!important;left:12px!important;right:auto!important;top:95px!important;transform:none!important;width:190px!important;max-width:190px!important;max-height:calc(100dvh - 125px)!important;overflow:auto!important;display:grid!important;grid-template-columns:1fr!important}
}
/* Placement guidance stays with the dice on desktop and phones. */
.placement-hint{margin:0;width:100%;text-align:center;color:#eee4ff;font:600 13px/1.5 system-ui;grid-column:1/-1}
.placement-hint[hidden]{display:none!important}

/* V51: validated previous-room panel, not a blind reconnect button. */
#view-online .saved-room-box{grid-column:1/-1;padding:16px;border:1px solid #b9d6e9;border-radius:16px;background:#f1f8ff;color:#223b5a}
#view-online .saved-room-box[hidden]{display:none!important}
#view-online .saved-room-box p{margin:7px 0 12px;color:#405a76}
#view-online .saved-room-actions{display:flex;gap:10px;flex-wrap:wrap}
#view-online .saved-room-actions button{flex:1 1 170px}

/* V86: focused help screen; standalone history link in navigation. */
#view-help .help-card{text-align:center;}
#view-help .help-card p{max-width:540px;margin:0 auto 18px;}
#view-help .help-card #howBtn{display:block;margin:0 auto;min-width:170px;}
.cl-nav .cl-history-nav{width:auto;margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;text-decoration:none;font:650 14px system-ui;border-radius:10px;box-shadow:none;white-space:nowrap;}

/* V88: plain-language online setup guide */
#view-help .online-help-guide{text-align:left}
#view-help .online-help-guide h2{text-align:center;font-size:21px}
#view-help .online-help-guide h3{font-size:16px;color:#fff;margin:20px 0 8px}
#view-help .online-help-guide ol{padding-left:24px;margin:8px 0 16px;color:#f0e7fa;line-height:1.8;font-size:15px}
#view-help .online-help-guide li{padding-left:4px;margin-bottom:6px}
#view-help .online-help-guide .cl-help-link{display:inline-block;border-radius:10px;background:#f5c84f;color:#201706;padding:11px 19px;text-decoration:none;font-weight:750;margin:0 0 7px}
#view-help .online-help-guide .cl-help-link:focus-visible{outline:3px solid white;outline-offset:3px}
#view-help .online-help-guide .cl-help-note{color:#e1d6eb;margin:14px 0 0;font-size:13px;text-align:left}

/* V95: compact offline start, centred Multiplayer heading, tidy room creation. */
#view-play .cl-offline-actions{display:flex;justify-content:center;margin:4px 0 20px}
#view-play #quickPlayBtn{width:min(360px,100%);max-width:100%;cursor:pointer}
#view-online>h1{text-align:center;margin:0 0 24px}
#view-online .dev-room{margin-bottom:16px}
#view-online #devCode,#view-online #devJoin{display:none!important}
#view-online #devEntry{align-items:end}
#view-online #devCreate{grid-column:1/-1}
@media(max-width:600px){#view-play #quickPlayBtn{width:100%}}

/* V98: Help is a self-contained screen. Readable text on the site's light theme. */
#view-help .help-card{box-sizing:border-box;width:100%;max-width:100%;text-align:center;padding:clamp(18px,3vw,30px);}
#view-help .help-card h2{color:#203857!important;text-align:center;}
#view-help .help-card p{color:#405873!important;max-width:none;width:100%;margin:0 auto;line-height:1.65;font-size:clamp(15px,1.6vw,17px);overflow-wrap:break-word;}
#view-help #howBtn{display:none!important;}
#view-help .online-help-guide{text-align:left;}
#view-help .online-help-guide h3{color:#203857!important;}
#view-help .online-help-guide ol{color:#2d4362!important;opacity:1!important;font-size:clamp(15px,1.6vw,17px);line-height:1.65;padding-left:clamp(22px,4vw,35px);}
#view-help .online-help-guide li{color:#2d4362!important;opacity:1!important;padding:2px 0 3px 3px;}
#view-help .online-help-guide .cl-help-note{color:#405873!important;max-width:none;margin:18px 0 0;text-align:left;}
#view-help .online-help-guide .cl-help-link{color:#241a08!important;}
@media(max-width:600px){#view-help .help-card{padding:18px 16px;}#view-help .online-help-guide ol{padding-left:24px;}}

/* V101 — compact identity inside navigation; offline start inside Players & game. */
.cl-header .cl-login-bar{
 display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;
 width:auto;max-width:min(220px,100%);min-height:43px;min-width:70px;
 padding:8px 15px;margin:0;border:1px solid #b7d9c8;border-radius:13px;
 background:#edf9f3;color:#164d38;box-shadow:none;font:800 15px/1.25 system-ui;
}
.cl-header .cl-login-label{min-width:0;overflow-wrap:anywhere;text-align:center}
.cl-header .cl-login-action{display:none!important}
#view-settings .cl-account-settings{padding:20px 22px;margin-bottom:18px;background:#fff;border:1px solid #d9e4f1;border-radius:16px;box-shadow:0 7px 26px #3c57831a}
#view-settings .cl-account-settings h2{color:#203857;font-size:18px;margin:0 0 14px}
#view-settings .cl-account-settings-link{display:inline-flex;padding:11px 18px;min-height:42px;box-sizing:border-box;align-items:center;justify-content:center;border-radius:10px;background:#e5f3ff;border:1px solid #aed0ea;color:#20436b;text-decoration:none;font-weight:750}
#view-play #setupDetails>.cl-offline-actions{display:flex;justify-content:center;padding:0 22px 22px;margin:0}
#view-play #setupDetails #quickPlayBtn{width:min(360px,100%);max-width:100%}
@media(max-width:600px){
 .cl-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
 .cl-nav button,.cl-nav .cl-account-link{flex:1 1 auto;min-width:64px;padding:10px 8px}
 .cl-header .cl-login-bar{min-width:65px;max-width:160px;flex:1 1 auto;padding:8px 10px;font-size:13px}
 #view-play #setupDetails>.cl-offline-actions{padding:0 16px 16px}
}

/* V102: Hall of Fame appears beneath the main navigation only in Online. */
#view-online .cl-hall-of-fame-link{display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;max-width:100%;margin:0 auto 18px;padding:11px 20px;background:#fff5ce;border:1px solid #d7b75e;border-radius:12px;color:#563e00;font-weight:800;text-decoration:none;box-shadow:0 2px 9px rgba(0,0,0,.08)}
#view-online .cl-hall-of-fame-link:hover{background:#ffeb9e;transform:translateY(-1px)}
#view-online .cl-hall-of-fame-link:focus-visible{outline:3px solid #3169bc;outline-offset:3px}

/* V104: Help page instructions link */
#view-help .cl-instructions-link {
 display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;margin-top:18px;padding:10px 22px;border-radius:10px;
 border:1px solid #ba922a;background:#f5c84f;color:#241a08;
 font:750 15px system-ui;text-decoration:none;
 box-shadow:0 3px 12px rgba(0,0,0,.12);
}
#view-help .cl-instructions-link:hover {background:#ffe08a;}
#view-help .cl-instructions-link:focus-visible {outline:3px solid #4275d0;outline-offset:3px;}

/* V107 — Instructions and Help use the same Crosslink purple/gold design system. */
body #howModal { background: rgba(8, 6, 15, .79); color: #f6f1ff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
body #howModal .modal-card {
  box-sizing:border-box; width:min(900px, calc(100vw - 28px)); max-width:900px;
  max-height:calc(100dvh - 28px); overflow:auto;
  background:var(--cl-panel, #201b2e) !important;
  color:#f6f1ff !important;
  border:1px solid var(--cl-border, #3c334f) !important;
  border-radius:16px; padding:clamp(16px,3vw,28px);
  box-shadow:0 22px 80px rgba(0,0,0,.55);
  font-family:inherit !important;
}
body #howModal .modal-card, body #howModal .modal-card * { font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
body #howModal h2 { color:#fff !important; font-size:clamp(22px,3vw,30px); text-align:center; margin:0 0 20px; }
body #howModal #howText { color:#f6f1ff !important; font-size:15px; line-height:1.65; }
body #howModal #howText p, body #howModal #howText li, body #howModal #howText small { color:#e1d7ed !important; line-height:1.65; }
body #howModal #howText h3 { color:#fff !important; font-size:clamp(17px,2.5vw,21px); margin:0 0 12px; }
body #howModal #howText strong { color:#fff5b4; }
body #howModal .how-section,body #howModal .how-tip,body #howModal .how-callout {
  background:#2c233a !important; border:1px solid #58476c !important;
  border-radius:13px; color:#f6f1ff !important; box-shadow:none !important;
}
body #howModal .how-section { padding:clamp(15px,2.5vw,24px); }
body #howModal .how-callout { padding:15px; margin:12px 0; }
body #howModal .how-tip { padding:14px; }
body #howModal .how-tabs { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:18px 0; }
body #howModal .how-tab { background:#312640 !important; color:#f6f1ff !important;
  border:1px solid #69517f !important; border-radius:10px; min-height:44px;
  padding:9px 14px; font-weight:650; cursor:pointer; box-shadow:none !important; }
body #howModal .how-tab.active, body #howModal .how-tab[aria-selected="true"] {
  color:#211706 !important; background:var(--cl-accent, #ffd21f) !important;
  border-color:var(--cl-accent, #ffd21f) !important; font-weight:800;
}
body #howModal .how-tab:focus-visible, body #howModal #closeHow:focus-visible {
  outline:3px solid #fff; outline-offset:3px;
}
body #howModal .how-small-image,body #howModal .how-hero { background:#17121f !important; border-radius:12px; overflow:hidden; }
body #howModal .how-small-image img,body #howModal .how-hero img { max-width:100%; height:auto; }
body #howModal #closeHow { display:block; margin:18px auto 0; min-height:46px;
  padding:12px 28px; border:0 !important; border-radius:10px;
  background:var(--cl-accent, #ffd21f) !important;
  color:#211706 !important; font-weight:800; box-shadow:none !important; }
/* The Help section must have readable colours against its existing dark panels. */
body #view-help .help-card h2, body #view-help .online-help-guide h3 { color:#fff !important; }
body #view-help .help-card p, body #view-help .online-help-guide ol,
body #view-help .online-help-guide li, body #view-help .online-help-guide .cl-help-note {
  color:#e1d7ed !important; font-family:inherit; }
body #view-help .cl-instructions-link { font-family:inherit; font-weight:750; }
@media(max-width:600px) {
  body #howModal .modal-card { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:16px; }
  body #howModal .how-tab { flex:1 1 128px; padding:9px 8px; font-size:13px; }
}



/* V109: Help uses the existing Crosslink LIGHT page theme, not the game-board palette. */
#view-help .help-card, #view-help .online-help-guide {
 background:#fff!important; color:#203857!important;
 border:1px solid #d9e4f1!important; border-radius:16px!important;
 box-shadow:0 7px 26px #3c57831a!important;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
#view-help .help-card h2, #view-help .online-help-guide h2,
#view-help .online-help-guide h3 {color:#203857!important;opacity:1!important}
#view-help .help-card p, #view-help .online-help-guide p,
#view-help .online-help-guide ol, #view-help .online-help-guide li,
#view-help .online-help-guide .cl-help-note {
 color:#2d4362!important;opacity:1!important;
 font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
#view-help .cl-instructions-link, #view-help .online-help-guide .cl-help-link {
 background:#f5c84f!important;color:#241a08!important;
 border:1px solid #ba922a!important;opacity:1!important;
}
/* No blank site-name footer or separator on any navigation page. */
.cl-footer {display:none!important}

/* V115: player-name menu chip opens account management. */
.cl-header a.cl-login-bar {
  text-decoration:none!important;cursor:pointer;
}
.cl-header a.cl-login-bar:hover { filter:brightness(.97);transform:translateY(-1px); }
.cl-header a.cl-login-bar:focus-visible {outline:3px solid #2772cd;outline-offset:3px;}

/* V197: visible, functional piece picker while a game is in progress. */
body.board-view #boardOptionsPanel .cl-option-group .piece-style-picker{display:flex!important;align-items:center!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:10px!important;margin:12px 0!important;}
body.board-view #boardOptionsPanel #boardPieceStyleChoice{display:block!important;visibility:visible!important;opacity:1!important;min-width:145px!important;flex:1 1 145px!important;max-width:100%!important;min-height:40px!important;color:#211633!important;background:#fff!important;border:1px solid #b7cde4!important;border-radius:9px!important;padding:7px 9px!important;cursor:pointer!important;}
body.board-view #boardOptionsPanel #boardPieceStylePreview{display:block!important;width:40px!important;height:40px!important;object-fit:contain!important;flex:0 0 40px!important;}

/* V220: voluntary public location inline with account-owned player names. */
.cl-player-public-location{opacity:.5;font-size:.9em;font-weight:500;white-space:normal;overflow-wrap:anywhere}

/* V252: in-game Menu is an action inside Options, not a separate board-top button. */
body.board-view #boardOptionsPanel .cl-option-actions #exitBoardBtn {
 display:block!important;visibility:visible!important;position:static!important;
 inset:auto!important;top:auto!important;left:auto!important;right:auto!important;
 transform:none!important;z-index:auto!important;float:none!important;
 width:100%!important;min-width:0!important;min-height:40px!important;
 border-radius:8px!important;padding:10px!important;margin:0!important;
 background:#3c2b50!important;color:white!important;border:1px solid #69507f!important;box-shadow:none!important;
 font-size:13px!important;
}
body.board-view #boardOptionsPanel .cl-option-actions #boardHowBtn {width:100%!important;min-width:0!important}
/* Retired Save/Load/Piece-style controls remain in a hidden legacy container only. */
body.board-view .legacy-controls,body.board-view .legacy-controls * {display:none!important}

/* V259: The non-game page shell is intentionally transparent so the selected
   theme wallpaper can be seen around the cards.  The old global .panel rule
   applied backdrop blur to this transparent shell, creating the unwanted
   frosted/translucent band across the Multiplayer heading.  Disable that
   effect without affecting game-board styling or the theme wallpaper. */
body:not(.board-view) .app > .panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* V264: Online lobby is an opaque card, not a see-through glass area. */
body:not(.board-view) #view-online{background:#fff!important;border:1px solid #d9e4f1!important;border-radius:20px!important;padding:20px 22px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
body:not(.board-view) #view-online>h1{color:#192b48!important;text-shadow:none!important;}
@media(max-width:600px){body:not(.board-view) #view-online{padding:14px 12px!important;border-radius:14px!important;}}

/* V266: no decorative line beneath the main navigation. */
body:not(.board-view) .cl-header{border-bottom:0!important;}

/* V279: Offline must use the same rounded, opaque page surface as Online.
   Scoped out of board-view to preserve the actual game layout. */
body:not(.board-view) #view-play {
  box-sizing:border-box!important;
  background:#fff!important;
  border:1px solid #d9e4f1!important;
  border-radius:20px!important;
  padding:20px 22px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  /* Do not clip game setup dropdowns or popovers. */
}
@media(max-width:600px){
  body:not(.board-view) #view-play {
    padding:14px 12px!important;
    border-radius:14px!important;
  }
}