/* V683: guest play is the real game layout; only guest-only actions and modals are scoped here. */
[hidden]{display:none!important}
.uc-demo-page{--demo-modal-gap:12px}
.uc-demo-game .game-title{font-size:clamp(18px,2.5vw,25px);color:var(--text)}
.uc-demo-game-top{align-items:center}
.uc-demo-game .game-sidebar{min-width:0}
.uc-demo-game .game-sidebar>.panel,.uc-demo-game .board-card{min-width:0}
.uc-demo-game .game-bottom-tools{margin-top:14px}
.uc-demo-game .game-top-actions{flex-wrap:wrap}
.uc-demo-game .game-top-actions>.btn{min-width:92px}
.uc-demo-page .uc-demo-topbar nav{display:flex;gap:12px;align-items:center}
.uc-demo-page .uc-demo-topbar nav>a:not(.btn){color:var(--muted)}
.uc-demo-page .uc-demo-topbar nav>a:not(.btn):hover{color:var(--text)}
.uc-demo-game .square{touch-action:manipulation}
.uc-demo-game .square[data-playable="false"]{cursor:default}
.uc-demo-game .square[data-playable="true"]:focus-visible{outline:3px solid var(--gold);z-index:6}
.uc-demo-game .square.last-move-from,.uc-demo-game .square.last-move-to{box-shadow:inset 0 0 0 3px rgba(231,198,106,.43)}
.uc-demo-game .square.has-opposite-piece{isolation:isolate}
.uc-demo-game .square .check-label{pointer-events:none}
.uc-demo-game .move-log .move-item{width:100%;min-width:0;text-align:left;cursor:pointer}
.uc-demo-game .move-item:focus-visible{outline:2px solid var(--brand)}
.uc-demo-game .move-item.active{border-color:var(--brand)}
.uc-demo-game .captured-token{border:1px solid transparent;cursor:pointer;color:var(--text)}
.uc-demo-game .captured-token:hover{border-color:var(--brand)}
.uc-demo-game .captured-token .uc-piece-slot{width:27px;height:27px;display:inline-grid;place-items:center}
.uc-demo-game .captured-token .mini-piece-svg{width:100%;height:100%;max-width:100%;max-height:100%}
.uc-demo-game .captured-row{min-width:0}
.uc-demo-game #gameMessage{min-height:42px}
.uc-demo-game .uc-skin-picker{max-width:100%;margin-top:10px}
.uc-demo-game .uc-skin-picker select{width:auto;min-width:140px}
.uc-demo-game .turn-banner{min-height:38px}
.uc-demo-game .replay-panel .replay-controls .icon-btn{min-height:38px}
.uc-demo-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
.uc-demo-modal-shade{position:absolute;inset:0;background:rgba(4,8,7,.74);backdrop-filter:blur(8px)}
.uc-demo-dialog{position:relative;z-index:1;display:grid;gap:12px;width:min(480px,100%);max-height:min(90dvh,770px);overflow:auto;margin:0;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:20px;padding:25px;text-align:left}
.uc-demo-dialog h2{margin:0;font-size:clamp(23px,5vw,29px);line-height:1.2}
.uc-demo-dialog p{margin:0;color:var(--muted);line-height:1.55}
.uc-demo-dialog .ui-modal-icon{margin:0}
.uc-demo-dialog .eyebrow{margin:0;color:var(--muted);font-size:11px;letter-spacing:.15em}
.uc-demo-choices{display:grid;gap:9px;margin:6px 0 0}
.uc-demo-option{display:grid;gap:2px;width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.uc-demo-option b{font-size:16px}.uc-demo-option small{font-size:13px;color:var(--muted)}
.uc-demo-option:hover,.uc-demo-option:focus-visible{border-color:var(--brand);background:var(--panel2);outline:none}
.uc-demo-option:disabled{opacity:.5;cursor:wait}
.uc-demo-modal-actions{display:grid;gap:10px;margin-top:6px;width:100%}
.uc-demo-modal-button{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;width:100%;max-width:100%;white-space:normal;line-height:1.35}
.uc-demo-quiet-link{justify-self:center;display:block;text-align:center;padding:8px 12px;color:var(--muted);font-weight:600}
.uc-demo-quiet-link:hover{color:var(--text)}
.uc-demo-cta-note{border-top:1px solid var(--line);padding-top:14px;margin-top:6px!important}
.uc-demo-page #demoEnd[hidden],.uc-demo-page #demoChoice[hidden]{display:none!important}
.uc-demo-game .game-result-summary{font-size:13px;color:var(--text)}
.uc-demo-page .promotion-modal{z-index:1200}
@media(max-width:1100px){.uc-demo-game .game-sidebar{overflow:visible;max-height:none}}
@media(max-width:700px){
 .uc-demo-page .uc-demo-topbar{gap:8px;padding:10px 12px}
 .uc-demo-page .uc-demo-topbar nav{gap:8px}
 .uc-demo-page .uc-demo-topbar nav>a.uc-demo-lang{display:inline-block!important}
 .uc-demo-page .uc-demo-topbar nav .btn{padding:7px 10px;font-size:12px}
 .uc-demo-page .uc-demo-topbar .brand{font-size:14px;gap:5px}
 .uc-demo-page .uc-demo-topbar .brand span:last-child{display:inline;font-size:13px}
 .uc-demo-game .game-top{flex-wrap:wrap}
 .uc-demo-game .game-title{order:2;flex:1 1 100%;text-align:center}
 .uc-demo-game .game-top-actions{order:3;justify-content:center;width:100%}
 .uc-demo-game .game-top-actions>.btn{min-width:0;flex:1 1 110px}
 .uc-demo-game .game-layout{gap:12px}
 .uc-demo-dialog{padding:20px}
}
@media(max-width:420px){
 .uc-demo-page .uc-demo-topbar nav>a:not(.btn):first-child{display:none}
 .uc-demo-page .uc-demo-topbar .brand .brand-mark{width:29px;height:29px;font-size:19px}
 .uc-demo-game .game-sidebar .clock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .uc-demo-game .game-top-actions>.btn{font-size:12px;padding:9px}
 .uc-demo-modal{padding:10px}
 .uc-demo-dialog{border-radius:16px;padding:18px}
}
/* Main app deliberately turns the mobile nav into a hidden floating menu.
   Guest /play has a persistently visible login/language bar instead; never
   inherit the floating menu positioning, which overlapped the game heading. */
@media(max-width:850px){
 .uc-demo-page .uc-demo-topbar{height:auto;min-height:0;overflow:visible;gap:10px;flex-wrap:wrap}
 .uc-demo-page .uc-demo-topbar nav{display:flex!important;position:static!important;inset:auto!important;transform:none!important;flex:0 1 auto;gap:8px;align-items:center;justify-content:flex-end;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;backdrop-filter:none!important;max-height:none!important;overflow:visible!important;min-width:0}
 .uc-demo-page .uc-demo-topbar nav>a.uc-demo-lang{display:inline-flex!important;align-items:center;justify-content:center;min-height:32px}
 .uc-demo-page .uc-demo-topbar nav .btn{display:inline-flex!important;width:auto;min-width:0;white-space:nowrap}
}
@media(max-width:480px){
 .uc-demo-page .uc-demo-topbar{flex-direction:column;align-items:center;gap:8px}
 .uc-demo-page .uc-demo-topbar .brand{flex:0 0 auto;justify-content:center}
 .uc-demo-page .uc-demo-topbar nav{flex:0 0 auto;justify-content:center;width:100%}
}

/* V684: R52 help panel is the standard in-game panel, including narrow phones. */
.uc-demo-game #gameRulesPanel{min-width:0;scroll-margin-top:14px}
.uc-demo-game #gameRulesPanel .game-rules-grid{min-width:0}
.uc-demo-game #gameRulesPanel .game-rules-grid article{min-width:0;overflow-wrap:anywhere}
.uc-demo-game #rulesToggleBtn{white-space:normal}

/* V692: same shared confirmation surface as /game; responsive without a native browser popup. */
.uc-demo-action-confirm{z-index:1250}
.uc-demo-action-confirm .ui-modal-card{box-sizing:border-box;width:min(460px,100%)}
.uc-demo-action-confirm .ui-modal-actions{flex-wrap:wrap}
.uc-demo-action-confirm .ui-modal-actions>.btn{flex:1 1 130px;min-width:0;min-height:44px;white-space:normal}
@media(max-width:360px){.uc-demo-action-confirm{padding:10px}}

/* V692: the same native-app modal treatment for paused demo recovery. */
.uc-demo-pause-notice{z-index:1260}
.uc-demo-pause-notice .ui-modal-card{box-sizing:border-box;width:min(470px,100%)}
.uc-demo-pause-notice .ui-modal-actions{flex-wrap:wrap}
.uc-demo-pause-notice .ui-modal-actions>.btn{flex:1 1 130px;min-width:0;min-height:44px;white-space:normal}
@media(max-width:360px){.uc-demo-pause-notice{padding:10px}}