/* Board framing and captured armies. */
.brand-copy{font-family:var(--serif);font-size:28px;letter-spacing:2px;line-height:1}.brand-copy .brand-sub{font:9px var(--sans);letter-spacing:2px;margin-top:8px}.square.selected{box-shadow:inset 0 0 0 3px #9ffff0,inset 0 0 25px #6debd86b;z-index:2}.square.selected>svg{position:relative;z-index:3;filter:drop-shadow(0 0 3px #87ffe8) drop-shadow(0 0 7px #59d7ca88);transform:translateY(-1px) scale(1.04)}.selection-field{position:absolute;inset:5%;z-index:2;border:1px solid #b4fff2;border-radius:50%;background:radial-gradient(ellipse,#7fffe526 10%,#7fffe50d 53%,#8ffff04d 72%,transparent 80%);box-shadow:0 0 10px #89ffe977,inset 0 0 12px #89ffe955;pointer-events:none;animation:selection-energy 2.6s ease-in-out infinite}.selection-field i{position:absolute;inset:9%;border:1px dashed #c5fff3a6;border-radius:50%;transform:rotate(-20deg)}.square.legal{box-shadow:inset 0 0 0 2px #88ead8bb,inset 0 0 28px #68ebd64d}.square.legal:after{width:27%;height:27%;background:#70edd5d9;border:2px solid #d0fff2;box-shadow:0 0 9px #6debd699;z-index:2}.square.capture{box-shadow:inset 0 0 0 3px #f4cd96,inset 0 0 28px #e9a2544d}.square.capture:after{width:86%;height:86%;background:transparent;border:4px solid #ffdb9e;box-shadow:0 0 8px #e9b77566}.piece-drag-ghost:before{content:'';position:absolute;inset:5%;border:2px solid #9ffff0;border-radius:50%;background:radial-gradient(ellipse,#8ffff00a,#8ffff038);box-shadow:0 0 14px #89ffe988;pointer-events:none}.piece-drag-ghost>svg{position:relative;filter:drop-shadow(0 0 5px #8ffff0aa)}.arena-routes{width:100%;margin:15px 0 8px;justify-content:space-between}.arena-routes[aria-pressed=true]{border-color:#8ffff070;background:#8ffff00d;color:#d7fff3}.reduced-motion .selection-field{animation:none}@keyframes selection-energy{0%,100%{opacity:.8}50%{opacity:1}}@media(prefers-reduced-motion:reduce){.selection-field{animation:none}}@media(max-width:850px){.brand-copy{font-size:23px}.brand-copy .brand-sub{font-size:7px;letter-spacing:1.4px}}@media(max-width:650px){.brand-copy{font-size:22px}.brand-copy .brand-sub{font-size:6px}}
.scene-panel{min-height:760px}
@media(min-width:900px){.game-layout.normal-3d:not(.expanded) .scene-top{top:14px;left:auto;right:14px}.game-layout.normal-3d:not(.expanded) .scene-top .world-label{display:none}.game-layout.normal-3d:not(.expanded) .scene-customise{top:14px;left:14px;right:165px;gap:6px}.game-layout.normal-3d:not(.expanded) .piece-switch button{padding:7px 8px;font-size:9px}.game-layout.normal-3d:not(.expanded) .background-button{padding:7px 9px;font-size:9px}.game-layout.normal-3d:not(.expanded) .rack-top{top:55px}.game-layout.normal-3d:not(.expanded) .board-viewport{top:86px}}
.board-viewport{position:absolute;inset:132px 8px 116px;min-width:0;min-height:0;overflow:hidden}
.board-viewport .board-stage{inset:0;height:100%;min-height:0!important}
.board-viewport .flat-board{top:50%;width:var(--flat-size,90%);height:var(--flat-size,auto);max-width:none;max-height:none}
.flat-board[data-zoom=wide]{--board-scale:.93}
.flat-board[data-zoom=close]{--board-scale:2.15}
.scene-panel .scene-customise{top:60px}
.scene-panel .board-view-controls{bottom:47px}
.scene-panel .scene-bottom{bottom:7px}
.captured-rack{position:absolute;z-index:3;left:20px;right:20px;display:flex;align-items:center;gap:10px;height:28px;color:var(--muted)}
.rack-top{top:101px}.rack-bottom{bottom:82px}
.rack-label{font-size:9px;white-space:nowrap;letter-spacing:.2px}
.rack-label b{font-weight:500;color:var(--gold);margin-left:3px}
.rack-pieces{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#d5bc8533 transparent}
.captured-piece{display:inline-flex;align-items:center;justify-content:center;flex:none;width:25px;height:27px;border-radius:4px;background:#dddbc21f}
.captured-piece svg{width:23px;height:25px;filter:drop-shadow(0 1px 2px #0008)}
.rack-empty{font-size:11px;color:#9aaea066}

/* Full screen keeps only the instruction and essential controls. */
.focus-panel{display:none}
.game-layout.expanded{grid-template-columns:minmax(0,1fr) 210px}
.expanded .lesson-panel,.expanded .scene-top,.expanded .scene-customise,.expanded .scene-bottom,.expanded .board-view-controls{display:none!important}
.expanded .focus-panel:not([hidden]){display:flex;flex-direction:column;gap:15px;padding:26px 18px;background:linear-gradient(155deg,var(--panel-hi),var(--panel));border-left:1px solid var(--line);overflow-y:auto;min-height:0}
.expanded .focus-panel .eyebrow{font-size:8px;letter-spacing:1px}
.focus-panel h2{font-size:25px;line-height:1.12}
.focus-panel>p{font-size:12px;color:#d5dfcd;line-height:1.7}
.focus-panel .primary{font-size:11px;margin-top:8px;padding:11px 12px;min-height:43px}
.focus-panel .secondary{width:100%;font-size:11px;line-height:1.45;text-align:left;justify-content:flex-start}
.focus-navigation{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:12px}
.focus-navigation .chapter{margin:0}
.focus-navigation .zoom-switch{display:flex;align-self:flex-start}
.focus-navigation .zoom-switch button{padding:9px 10px;font-size:10px}
.focus-navigation p{font-size:10px;line-height:1.5;color:var(--muted)}
#focus-answers{display:grid;gap:8px}#focus-answers:empty{display:none}
.expanded .board-viewport{inset:44px 5px}
.expanded .rack-top{top:8px}.expanded .rack-bottom{bottom:8px}
.expanded .captured-rack{left:18px;right:18px}
.expanded .scene-panel{height:100%;min-height:0}

/* Named explorers. */
.profile-label{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-dialog{width:min(480px,calc(100vw - 32px));padding:34px;border-color:#d5bc8555;background:linear-gradient(155deg,var(--panel-hi),var(--panel));max-height:90dvh;overflow:auto}
.profile-welcome h2{margin:18px 0 12px;font-size:43px}
.profile-welcome>p{font-size:14px;color:var(--muted);line-height:1.7}
.profile-welcome form{margin-top:24px}
.profile-welcome label{display:block;font-size:13px;margin-bottom:9px}
.profile-welcome input{width:100%;font:18px var(--sans);color:var(--cream);padding:14px;background:var(--panel-low);border:1px solid #d5bc8560;border-radius:6px}
.profile-welcome #profile-error{color:#ffc5ad;font-size:12px;min-height:18px;margin:8px 0;line-height:1.5}
.profile-welcome .muted{font-size:11px;margin-top:20px}
.profile-list{display:grid;gap:10px;margin-top:22px;max-height:280px;overflow:auto}
.explorer-choice{display:flex;align-items:center;text-align:left;gap:12px;padding:12px;background:#d5bc8510;border:1px solid #d5bc8533;border-radius:8px}
.explorer-choice>span:nth-child(2){min-width:0;flex:1;overflow-wrap:anywhere;font-size:16px}
.explorer-choice small{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.explorer-avatar{height:40px;width:40px;display:grid;place-items:center;font:25px var(--serif);background:#d5bc8530;border:1px solid #d5bc8540;border-radius:50%;flex:none}
.profile-menu{display:grid;gap:12px;margin-top:22px}
.profile-menu .secondary{justify-content:space-between}.profile-menu .text-button{justify-content:center}
.profile-select{display:block;width:100%;min-height:58px;padding:14px 16px;font:18px var(--sans);color:var(--cream);background:var(--panel-low);border:1px solid #d5bc8580;border-radius:7px;margin:8px 0 16px;cursor:pointer}.profile-select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#profile-picker{margin-top:28px}#profile-picker>label{font-size:12px;color:var(--gold)}#profile-picker>.secondary{margin-top:18px;width:100%;font-size:12px}#profile-create-back{margin-top:12px}#profile-create-open.first-profile{background:var(--gold);color:var(--panel-low);font-weight:700;min-height:48px}
@media(min-width:651px) and (max-width:1100px){.game-layout.normal-3d:not(.expanded){grid-template-columns:minmax(0,1fr) 230px}}
@media(min-width:651px) and (max-width:850px){.game-layout.normal-3d:not(.expanded){grid-template-columns:minmax(0,1fr) 210px}}
@media(max-width:650px){.game-layout.normal-3d:not(.expanded){margin-inline:-7px;width:calc(100% + 14px)}}
@media(max-width:850px){
 .scene-panel{min-height:710px}.captured-rack{left:12px;right:12px}.board-viewport{left:4px;right:4px}
 .game-layout.expanded{grid-template-columns:minmax(0,1fr) 190px}.expanded .focus-panel:not([hidden]){padding:20px 14px}.focus-panel h2{font-size:23px}
}
@media(max-width:650px){
 .scene-panel{height:590px;min-height:590px}.board-viewport{inset:130px 3px 116px}.rack-label{font-size:8px}
 .captured-piece{width:22px;height:25px}.captured-piece svg{width:21px;height:23px}
 .profile-dialog{padding:25px}.profile-welcome h2{font-size:36px}.profile-welcome>p{font-size:12px}
}
@media(max-width:650px) and (orientation:portrait){
 .game-layout.expanded{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
 .expanded .focus-panel:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:12px 16px;max-height:40dvh;border-top:1px solid var(--line);border-left:0}
 .focus-panel h2{font-size:21px}.focus-panel>p{grid-column:1/-1;font-size:12px;line-height:1.5}.focus-panel>.eyebrow{display:none}
 .focus-panel>.primary{grid-column:2;grid-row:1;margin:0;width:auto;max-width:165px}
 .focus-panel .focus-navigation{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:0;margin:0}
 .focus-navigation .chapter{display:none}.focus-navigation .text-button{margin-left:auto}.focus-navigation .zoom-switch button{padding:7px 10px}
 .focus-navigation p{width:100%}#focus-answers{grid-column:1/-1}#focus-new-game{grid-column:1/-1}
 .expanded .board-viewport{inset:42px 3px}.expanded .captured-rack{left:12px;right:12px}
}
/* Clear controls and board-centred session cards. */
button,select,input{touch-action:manipulation}
button{border-radius:9px;transition:background .16s,border-color .16s,box-shadow .16s}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffd478;outline-offset:3px}
.secondary,.text-button,.flat-toggle,.zoom-switch button,.icon-button{color:#eee7d6}
.secondary,.flat-toggle,.zoom-switch{border-color:#78867a}
.secondary:hover,.flat-toggle:hover,.icon-button:hover{background:#344b42;border-color:#dbbf84}
.primary{min-height:48px;box-shadow:0 3px 12px #0003;border:1px solid #f5d99e}
.icon-button{min-width:44px;min-height:44px}
.fullscreen-button,#focus-exit{min-height:44px;padding:10px 14px!important;border:1px solid #f3ce7c!important;background:#e5bd70!important;color:#172720!important;font-weight:700!important;border-radius:9px;box-shadow:0 2px 14px #0004}
.fullscreen-button svg,#focus-exit svg{width:20px;height:20px}
.scene-tools{flex-wrap:wrap;justify-content:flex-end;gap:8px}
.save-session{min-height:44px;white-space:nowrap;padding:9px 13px;font-size:11px}
.board-card-layer{position:absolute;inset:50px 14px 80px;z-index:12;display:flex;align-items:center;justify-content:center;isolation:isolate;pointer-events:auto;touch-action:pan-y}
.board-card-layer::before{content:"";position:absolute;inset:0;background:#06110c55;border-radius:12px;backdrop-filter:blur(3px);z-index:-1}
.board-card{width:min(100%,460px);max-height:100%;display:flex;flex-direction:column;background:linear-gradient(140deg,#273e34,#101e19);border:1px solid #d9ba79;border-radius:16px;box-shadow:0 22px 80px #000a;color:#f8f1de;overflow:hidden;text-align:left}
.board-card header{padding:22px 25px 8px}.board-card h2{font-family:Georgia,serif;font-size:32px;line-height:1.1;margin:9px 0}.board-card .eyebrow{font-size:10px;color:#e8ca8c;letter-spacing:2px}.card-exit-fullscreen{display:none}.board-expanded .card-exit-fullscreen{display:block;float:right;min-height:44px;background:#e5bd70;color:#172720;border:1px solid #f3ce7c;border-radius:8px;padding:8px 12px;font-size:11px;margin:0 0 6px 10px;font-weight:700}
.board-card-body{padding:0 25px 15px;overflow-y:auto;overscroll-behavior:contain;min-height:0;line-height:1.6;font-size:14px}
.board-card p{margin:10px 0 15px}.board-card .muted,.session-options small{font-size:12px;color:#c2cbbd;line-height:1.5}
.board-card footer{display:flex;flex-direction:column;gap:9px;padding:15px 25px 20px;border-top:1px solid #ffffff20;background:#14261f;flex-shrink:0}
.board-card footer button{width:100%;min-height:48px;margin:0}.board-card label{display:block;font-size:12px;color:#e9d7b0;margin:10px 0 5px}
.board-card select{display:block;width:100%;min-height:46px;border:1px solid #859582;border-radius:8px;background:#0f211a;color:#fff5dd;padding:10px;font:inherit;font-size:13px}
.board-card select:disabled{opacity:.45}.session-options small{display:block;margin-top:10px}.session-resume-row{display:flex;gap:8px;align-items:center}.session-resume-row select{min-width:0}.session-resume-row button{flex-shrink:0;min-height:46px;padding:8px 12px}
.brief-instruction{font-size:18px;line-height:1.65;color:#fff5dd}
.square.legal{background-image:linear-gradient(#7528b944,#7528b944);box-shadow:inset 0 0 0 3px #7528b9,inset 0 0 0 5px #fff9ed}
.square.legal::after{background:#7528b9;border:2px solid #fff9ed;box-shadow:0 1px 3px #1c092d}
.square.legal.capture::after{background:transparent;border:4px solid #993b1d;box-shadow:0 0 0 2px #fff9ed}
.square.landing-square{background-image:linear-gradient(#ffc449bb,#ffc449bb)!important;box-shadow:inset 0 0 0 4px #442b0a,inset 0 0 0 7px #ffd779!important;z-index:3}
.square.landing-square::after{content:"";position:absolute;inset:7px;width:auto;height:auto;transform:none;border:2px solid #fff5b0;background:transparent;box-shadow:none;border-radius:2px;pointer-events:none}
.arena-clock{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.clock-face{border:1px solid #788a78;border-radius:9px;padding:10px;background:#13271f}.clock-face span{display:block;font-size:11px;color:#c5cdbf}.clock-face strong{font-variant-numeric:tabular-nums;font-size:28px;color:#fff2ce}.clock-face.ticking{border-color:#f5cd7f;box-shadow:inset 0 0 0 1px #f5cd7f}.clock-face.clock-low strong{color:#ffbc8e}.arena-clock>small{grid-column:1/-1;color:#c5cdbf;font-size:11px}.compact-clock .clock-face{padding:7px}.compact-clock .clock-face strong{font-size:22px}
.expanded .scene-bottom .save-session{display:none}.focus-panel>.save-session{width:100%;margin:10px 0 0}.focus-panel .compact-clock{margin:8px 0}.expanded .board-card-layer{inset:48px 12px}
@media(pointer:coarse){.secondary,.text-button,.flat-toggle,.zoom-switch button,.nav,.theme-switch button,.piece-switch button{min-height:44px}.path-step{min-height:56px}}
@media(min-width:651px) and (max-width:1100px){.board-card-layer{inset:78px 10px 95px}.board-card{width:min(100%,450px)}.scene-bottom .training-label{max-width:32%}.scene-tools{max-width:68%}.scene-tools .save-session{padding:8px;font-size:10px}.expanded .scene-tools{max-width:100%}}
@media(max-width:650px){.scene-bottom{align-items:flex-end}.scene-bottom .training-label{max-width:105px;font-size:9px}.scene-tools{max-width:235px;gap:5px}.scene-tools .save-session{font-size:10px;padding:7px 9px}.fullscreen-button{padding:9px!important;font-size:10px}.board-card-layer{inset:105px 8px 112px}.board-card header{padding:16px 18px 6px}.board-card h2{font-size:27px}.board-card-body{padding:0 18px 12px;font-size:13px}.board-card footer{padding:12px 18px 16px}.brief-instruction{font-size:16px}.session-resume-row{flex-direction:column;align-items:stretch}.focus-panel>.save-session{grid-column:1;margin:0;font-size:10px;padding:7px}.focus-panel>.compact-clock{grid-column:1/-1}.expanded .board-card-layer{inset:38px 8px}.compact-clock{grid-template-columns:1fr 1fr}.compact-clock .clock-face{padding:4px 8px}.compact-clock .clock-face span{display:inline;margin-right:8px}.compact-clock .clock-face strong{font-size:19px}.compact-clock>small{display:none}}
@media(max-height:540px) and (orientation:landscape){.board-card-layer,.expanded .board-card-layer{inset:8px}.board-card{width:min(100%,570px)}.board-card header{padding:12px 18px 3px}.board-card h2{font-size:25px;margin:5px 0}.board-card-body{padding:0 18px 8px}.board-card footer{padding:8px 18px;flex-direction:row}.board-card footer button{min-height:44px}.session-options{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:6px}.session-options label{margin:0}.session-options small{grid-column:1/-1;margin:0}}
