:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#f9e9c8}*{box-sizing:border-box}body{margin:0}button,select{font:inherit;min-height:44px;border:1px solid #a98b57;border-radius:12px;padding:10px 18px;background:#163d43;color:#fff3d2;cursor:pointer}button:hover,button:focus-visible{background:#2d5961;outline:2px solid #ffe2a0}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}main{max-width:560px;margin:0 auto;padding:12px 18px 40px}main .poster{display:block;width:100%;height:auto;border:2px solid #b7985e;border-radius:20px}main button{width:100%;margin:6px 0}main #start{background:#e6bf73;color:#162e34;font-weight:bold}main p,details{line-height:1.6}#battle{position:fixed;inset:0;margin-inline:auto;width:min(100%,920px);height:100dvh;background:#071c23;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto 56px;overflow:hidden}#battle nav{min-height:52px;display:flex;gap:12px;align-items:center;padding:0 12px}#status{flex:1;text-align:center;min-width:0;overflow-wrap:anywhere}#arena{min-height:0;min-width:0;position:relative;outline-offset:-3px}#arena:focus-visible{outline:2px solid #ffe2a0}#controls{display:flex;justify-content:center;gap:8px;padding:6px 12px}#saved{margin:0;text-align:center;font-size:12px;min-height:18px}#result{max-width:600px;margin:15vh auto;padding:24px;text-align:center}#result button{margin:8px}dialog{max-width:min(92vw,500px);border:1px solid #d4b775;border-radius:18px;padding:24px;background:#13353c;color:#fff2d1}dialog::backdrop{background:#001018c9}dialog button{margin:4px}#promoteChoices{display:grid;grid-template-columns:1fr 1fr}.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.reserve{background:#061720}
#stages{max-width:920px;margin:auto;padding:12px 18px 56px}#stageList{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 4px 20px}#stageList button{flex:0 0 210px;min-height:150px;white-space:normal;scroll-snap-align:center}#stageList button[data-cleared="true"]{border-color:#8bd4b0}#stageList button:disabled{opacity:.55}#status{max-height:100px;overflow:auto}
html:has(#battle:not([hidden])),body:has(#battle:not([hidden])){overflow:hidden;overscroll-behavior:none}
body:has(#battle:not([hidden]))>
@media(orientation:landscape) and (max-height:500px){
 #battle{grid-template-columns:minmax(0,1fr) clamp(180px,25%,230px);grid-template-rows:minmax(0,1fr) auto 20px 56px}
 #battle nav{grid-column:2;grid-row:1;min-height:0;flex-direction:column;padding:8px;gap:10px;overflow:auto}
 #status{flex:0 0 auto;font-size:14px;max-height:none;width:100%}
 #arena{grid-column:1;grid-row:1 / 4}
 #controls{grid-column:2;grid-row:2;flex-wrap:wrap;gap:6px;padding:6px}
 #controls button{font-size:13px;padding:8px 10px}
 #saved{grid-column:2;grid-row:3;font-size:10px}
 .reserve{grid-column:1 / -1;grid-row:4}
}

#keyboard{position:absolute;inset:auto 8px 5px;width:auto;height:auto;max-height:3em;padding:4px 8px;clip-path:none;background:#071c23e8;border-radius:8px;font-size:12px;line-height:1.4;overflow:auto;pointer-events:none}
/* Permanent physical top-left Battle return; text length/RTL cannot move it. */

#battle #back>span{color:inherit;pointer-events:none}
#battle nav{height:64px;min-height:64px;padding-inline:72px}
@media(orientation:landscape) and (max-height:500px){#battle nav{height:auto;min-height:0;padding:8px}}
#stageList .stage-card{position:relative;display:flex;flex-direction:column;align-items:stretch;flex-basis:236px;padding:0;overflow:hidden;text-align:start;background:linear-gradient(145deg,#21464a,#0b252e);border:1px solid #967747;box-shadow:0 8px 20px #0005;min-height:330px}
#stageList .stage-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#081c24}
.stage-number{position:absolute;inset:8px auto auto 8px;display:grid;place-items:center;min-width:30px;min-height:30px;border-radius:50%;background:#102c32e8;border:1px solid #d8bb78;color:#ffe9b5;font-size:15px}
.stage-goal{padding:14px 14px 8px;font-size:15px;line-height:1.45;flex:1}.stage-clear{padding:4px 14px 14px;color:#9ee7bb;font-size:12px}#stageList .stage-card:disabled{opacity:.72;box-shadow:none}#stageList .stage-card[data-cleared="true"]{border-color:#8bd4b0}
@media(orientation:landscape) and (max-height:500px){#stages{padding-top:0}#stages h2{margin:4px 0;font-size:18px}#stageList{padding-bottom:10px}#stageList .stage-card{flex-basis:190px;min-height:220px}#stageList .stage-card img{height:130px;object-fit:contain}.stage-goal{padding:8px;font-size:12px}.stage-clear{padding:4px 8px 8px}}
#stages{position:fixed;inset:0;width:min(100%,920px);height:100dvh;padding:0 18px;margin:auto;display:grid;grid-template-rows:52px minmax(0,1fr) 50px 56px;background:#071c23;z-index:2;overflow:hidden}
#stageTitle{margin:0;align-self:center;font-size:22px}#stageList{min-height:0;align-items:center;padding:8px 4px;overflow-y:hidden}#stageList .stage-card{height:min(100%,430px);min-height:0;max-height:100%}#stageList .stage-card img{flex:1 1 180px;min-height:40px;height:0;aspect-ratio:auto;object-fit:contain}#stageList .stage-goal{flex:0 0 auto}#stageBack{justify-self:start;align-self:center}#stageReserve{height:56px;margin-inline:-18px;background:#061720}body:has(#stages:not([hidden]))>html:has(#stages:not([hidden])),body:has(#stages:not([hidden])){overflow:hidden;overscroll-behavior:none}

/* Permanent Main-owned rules reference: ordinary document scrolling, no modal. */

#main{max-width:920px;padding:12px 12px 16px}
#main .poster{max-width:100%;aspect-ratio:1;object-fit:contain}







.piece-reference{display:grid;gap:12px;margin:0}
.piece-reference>div{padding:16px;border:1px solid #ffffff29;border-inline-start:3px solid #bfa36a;border-radius:14px;background:#17243a;min-width:0}
.piece-reference dt{font-weight:750;font-size:18px;color:#f5d895;margin-bottom:8px}
.piece-reference dd{margin:0;overflow-wrap:anywhere}
/* The shared Guide defaults are tuned for light cards; keep Chess text bright on its dark panels. */


#main #challenges{height:52px;min-height:52px;margin:12px 0 0;background:#f5c84c;color:#1f2937;font-size:16px;font-weight:800;line-height:1.2;border-radius:14px;display:grid;place-items:center}
#main #campaignProgress{margin:8px 0 0;height:40px;min-height:40px;max-height:40px;display:flex;align-items:center;gap:4px;font-size:14px;color:#cbd5e1}
#exit{width:58px;height:48px;flex:0 0 58px;display:grid;grid-template-columns:16px 28px;gap:4px;align-items:center;justify-content:center;padding:4px;background:#f8fafc;color:#176a9d;border-radius:14px;text-decoration:none;font-size:22px;line-height:1;overflow:hidden}
#exit img{width:28px;height:28px;object-fit:contain}
#matchModes{display:flex;gap:8px;align-items:center;min-width:0}
#matchModes button{height:44px;font-size:14px;font-weight:600;padding:8px 12px;white-space:nowrap}
#stages{padding:0;grid-template-rows:64px minmax(0,1fr) 52px 56px}
#stages #stageList,#stages #matchModes{margin-inline:12px}
#stages #stageReserve{margin:0}
@media(max-width:699px) and (orientation:portrait){#stages{grid-template-rows:88px minmax(0,1fr) 52px 56px}}
body:has(#main[hidden])>
/* Shared Frame owns document/active-play scroll state. */
@media(min-width:700px){
 #main{padding:12px 16px 16px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:12px 24px;align-items:start}
 #main .poster{grid-column:1;grid-row:1 / span 5;width:420px;height:420px}
 #main p,#main button{grid-column:2;min-width:0;margin:0}

 .piece-reference{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Settlement stays inside the mounted Battle and its single physical reserve. */
#battle.is-result{display:block}
#battle.is-result>.reserve{position:absolute;inset:auto 0 0;height:56px}
#battle #result{position:absolute;inset:0 0 var(--wp-ad-reserve-height, 0px);max-width:none;margin:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto;text-align:start;background:radial-gradient(ellipse at 50% 0,#354b4b,#0c252e 65%);overflow:hidden}
#result .result-content{overflow:auto;min-height:0;padding:20px;overscroll-behavior:contain}
#result .result-heading{border-top:3px solid #c4a765;padding-top:16px;margin-bottom:16px}
#result #outcome{font-size:clamp(24px,3vw,34px);line-height:1.2;margin:0 0 10px;color:#ffe4a4;outline:none}
#result #resultReason{font-size:15px;line-height:1.5;margin:0;color:#d8e6e1;overflow-wrap:anywhere}
#result #resultBoard{display:block;width:100%;height:min(38vh,360px);object-fit:contain;border:1px solid #b99c5b70;border-radius:18px;background:#061920;margin:0 0 16px}
#result #resultStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
#resultStats>div{min-width:0;border:1px solid #a6c1bd38;border-radius:14px;background:#172d36;padding:12px 8px}
#resultStats dt{font-size:12px;line-height:1.4;color:#c9d8d5;overflow-wrap:anywhere}
#resultStats dd{font-size:22px;font-weight:800;line-height:1.3;margin:6px 0 0;color:#fff1cc;overflow-wrap:anywhere;direction:ltr}
#result .result-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px;background:#0b202a;border-top:1px solid #d6bd7738}
#result .result-actions button{min-width:0;width:100%;height:64px;min-height:64px;margin:0;padding:8px;font-size:14px;line-height:1.3;font-weight:750;white-space:normal;border-radius:14px;background:#f8fafc;color:#176a9d;border:1px solid #ffffff29}
#result .result-actions #nextChallenge{background:#f5c84c;color:#1f2937}
#result .result-actions button:disabled{background:#263b43!important;color:#92a5a8!important;opacity:1}
#result[data-outcome="tryAgain"] .result-heading,#result[data-outcome="lose"] .result-heading{border-color:#8ca6a9}
#result:not([hidden]) .result-content{animation:chess-result-in .28s ease-out both}
@keyframes chess-result-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:700px){
 #result .result-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px;align-content:start}
 #result .result-heading{grid-column:2;grid-row:1;margin:0}
 #result #resultBoard{grid-column:1;grid-row:1/3;align-self:start;height:min(65vh,600px);margin:0}
 #result #resultStats{grid-column:2;grid-row:2;align-self:start}
}
@media(orientation:landscape) and (max-height:500px){
 #result .result-content{padding:12px;gap:12px}
 #result #resultBoard{height:100%;max-height:220px}
 #result #outcome{font-size:23px}#result .result-heading{padding-top:8px}
 #result #resultReason{font-size:13px}#resultStats>div{padding:8px 6px}
 #result .result-actions{padding:8px 12px}#result .result-actions button{height:48px;min-height:48px}
}
@media(prefers-reduced-motion:reduce){#result:not([hidden]) .result-content{animation:none}}
#confirmation #confirmNo{background:#f6cd64;color:#102e35;font-weight:700}
#confirmation #confirmNo:focus-visible{outline:3px solid #fff1ba;outline-offset:3px}

/* Owned Chess art stays behind opaque controls; status never relies on dimming. */
#stages{background-color:#17243a;background-image:linear-gradient(#17243aea,#17243ae8),url('../../assets/chess-cover-v1.webp');background-size:cover;background-position:center 38%}
#stages>header,#stages #matchModes{background:#17243aeb}
#stages #stageReserve{background:#17243a}
#stageList .stage-card{background:#102d37f5}
#stageList .stage-card:disabled{opacity:1;filter:none}
#stageList .stage-card[data-state="locked"]{border-color:#748591;box-shadow:0 8px 20px #0005}
#stageList .stage-card[data-state="locked"] img{filter:saturate(.45)}
#stageList .stage-card:disabled:hover{outline:none;background:#102d37f5}
#stageList .stage-number{inset-inline-start:8px;inset-inline-end:auto}
#stageList .stage-state{flex:0 0 auto;align-self:flex-start;margin:0 12px 12px;padding:3px 9px;border-radius:8px;border:1px solid #c6d4d44d;background:#233e48;color:#e4edf0;font-size:12px;line-height:1.4;font-weight:650}
#stageList [data-state="ready"] .stage-state{background:#e2c27b;color:#182e35;border-color:#f9df9c}
#stageList [data-state="cleared"] .stage-state{background:#234d40;color:#bcf0d1;border-color:#74b88c}
#matchModes button{white-space:normal;line-height:1.2;min-width:0}
/* One shared pointer owner; locked cards stay drag surfaces, not native-disabled. */
#stages #stageList{margin-inline:0;padding-inline:calc(50% - 118px);scroll-snap-type:none;scroll-behavior:auto;touch-action:pan-y;scrollbar-width:none;user-select:none}
#stageList::-webkit-scrollbar{display:none}
#stageList .stage-card{flex-shrink:0;scroll-snap-align:none}
#stageList .stage-card[aria-disabled="true"]{cursor:default}
#stageList .stage-card:hover{outline:none}
#stageList .stage-card.centered{border:2px solid #ffe2a0;box-shadow:0 0 0 2px #ffe2a033,0 0 22px #e5b95c70}
#stageList .stage-card:focus-visible{outline:2px solid #f8fafc;outline-offset:3px}
@media(orientation:landscape) and (max-height:500px){#stages #stageList{padding-inline:calc(50% - 95px)}}

/* One responsive logical envelope: 390×480 minimum, separate physical reserve. */
#stages{display:block;inset:auto;margin:0;max-width:none;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
#stageCanvas{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;grid-template-rows:88px minmax(0,1fr) 56px;overflow:hidden}
#stageCanvas{background-image:linear-gradient(#17243aea,#17243ae8),url('../../assets/chess-cover-v1.webp');background-size:cover;background-position:center 38%}
#stageCanvas>.wp-shell-header-layout{width:100%!important;max-width:none!important;height:88px!important;min-height:88px!important;padding:0 12px!important;grid-template-rows:48px 32px!important}
#stageCanvas>.wp-shell-header-layout #stageTitle{grid-column:1/-1!important;grid-row:2!important;font-size:20px!important}
#stageWorkspace{position:relative;min-height:0;overflow:hidden}
#stages #stageList{position:absolute;top:calc(38% - 107px);left:0;width:100%;height:214px;max-height:none;padding:12px calc(50% - 132px);margin:0;gap:12px;align-items:center}
#stageList .stage-card{flex:0 0 264px;width:264px;min-width:264px;height:190px;min-height:190px;max-height:190px;border-width:2px;border-radius:16px}
#stageList .stage-card img{flex:0 0 110px;height:110px;min-height:110px;width:100%;aspect-ratio:1;object-fit:contain;background:#0b252e}
#stageList .stage-card .stage-goal{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 42px;height:42px;padding:4px 12px 2px;font-size:13px;line-height:18px}
#stageList .stage-card .stage-state{font-size:12px;line-height:16px;padding:2px 8px;margin:0 12px 8px}
#stageDescription{position:absolute;top:calc(38% + 107px);inset-inline:12px;height:54px;max-width:680px;margin:0 auto;padding:0 8px;overflow:auto;text-align:center;font-size:13px;line-height:18px;color:#edf2f5;overscroll-behavior:contain}
#stageWorkspace #matchModes{position:absolute;bottom:6px;left:12px;right:12px;height:44px;margin:0;background:transparent}
#stageTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;height:56px;background:#17243af5;border-top:1px solid #cfb27544}
#stageTabs button{height:44px;min-height:44px;min-width:0;padding:4px;font-size:14px;font-weight:750;color:#162b33;background:#efd18a;border-color:#ffe3a2}
#stages #stageReserve{position:absolute;left:0;right:0;bottom:0;height:56px;margin:0}

/* One logical Battle geometry across portrait, landscape and desktop. */
#battle{display:block;inset:auto;margin:0;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
#battleCanvas{position:absolute;left:0;top:0;transform-origin:0 0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr) 56px 24px;overflow:hidden;background:#071c23}
#battle #battleCanvas>.topbar{grid-column:1;grid-row:1;height:64px;min-height:64px;flex-direction:row;padding:0 72px;overflow:hidden}
#battleCanvas #status{font-size:14px;max-height:56px;overflow:auto}
#battleCanvas #arena{grid-column:1;grid-row:2}
#battleCanvas #controls{grid-column:1;grid-row:3;flex-wrap:nowrap;padding:6px 12px;gap:8px}
#battleCanvas #controls button{font-size:14px;padding:8px 12px;height:44px;min-width:0}
#battleCanvas #saved{grid-column:1;grid-row:4;font-size:12px;height:24px;overflow:hidden}
#battle>.reserve{position:absolute;bottom:0;left:0;width:100%;height:56px}
#battle #battleCanvas #result{inset:0}
#battleCanvas #result .result-actions button{height:64px;min-height:64px;font-size:14px}