/* stage: styling the gallery */
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#101315;color:#ebe2ce;font-family:Arial,sans-serif}
*{box-sizing:border-box}#world{display:block;width:100%;height:100%;touch-action:none}
header{position:absolute;left:4%;top:5%;pointer-events:none}h1{font-family:Georgia,serif;font-size:clamp(32px,5vw,72px);font-weight:400;margin:9px 0;letter-spacing:-2px}h1 i{color:#b99557;font-weight:400}header p{font-size:13px;color:#b2afa6;letter-spacing:.04em}.eyebrow{font-size:10px;letter-spacing:.2em;color:#c5a76b;font-weight:bold}
#mode{position:absolute;right:4%;top:6%;color:#aaa99c;font-size:9px;letter-spacing:.15em}
aside{position:absolute;right:3%;bottom:12%;width:275px;padding:22px;background:linear-gradient(140deg,#171d20f2,#101517e8);border:1px solid #8c75483d;border-radius:3px;box-shadow:0 15px 60px #0006}
h2{font:normal 28px Georgia,serif;margin:10px 0}aside p{font:13px/1.7 Arial,sans-serif;color:#b9b9b1;min-height:64px;margin:10px 0}.tags{font-size:8px;color:#9a927f;letter-spacing:.09em;border-top:1px solid #ffffff14;padding-top:12px}
.selectors{display:flex;gap:10px;margin:18px 0 12px}label{width:50%;font-size:10px;color:#b2ab9b}select{width:100%;margin-top:7px;background:#22292c;border:1px solid #55564c;color:#eee4d2;padding:8px 4px;border-radius:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px}button{border:1px solid #6b6350;background:transparent;color:#dbd6c8;padding:10px;font-size:11px;cursor:pointer;flex:1;white-space:nowrap;border-radius:2px}button.primary{background:#c8ac73;color:#171b1b;border-color:#c8ac73;flex-basis:100%;font-weight:bold}button:hover{filter:brightness(1.2)}button:focus-visible,select:focus-visible{outline:2px solid #ffe5aa;outline-offset:3px}
footer{position:absolute;bottom:3%;left:4%;right:4%;display:flex;justify-content:space-between;gap:20px;color:#aaa99c;font-size:10px;letter-spacing:.04em;pointer-events:none}
@media(max-width:700px){header{top:3%;left:5%}header p{font-size:11px}#mode{display:none}aside{right:4%;left:4%;bottom:7%;width:auto;padding:13px;display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}aside .eyebrow{grid-column:1/-1;font-size:9px}h2{font-size:22px;margin:4px 0}aside p{grid-column:1;font-size:11px;min-height:0;margin:0}.tags{display:none}.selectors{grid-column:2;grid-row:2/4;margin:0;flex-direction:column;gap:6px}label{width:100%}select{padding:5px;margin-top:3px}.actions{grid-column:1/-1;margin-top:8px}.actions button.primary{flex-basis:auto}footer{font-size:9px;bottom:2%;left:5%}footer span:last-child{display:none}}
/* stage: styling local chess controls */
[hidden]{display:none!important}
#viewSwitch{position:absolute;left:4%;top:calc(5% + 138px);display:flex;gap:7px}
#viewSwitch button{background:#172124ed}
body.playing #studyPanel{display:none}
body.playing header h1{font-size:36px;margin:5px 0}
body.playing header p{display:none}
body.playing #viewSwitch{top:calc(5% + 77px)}
#playPanel{display:block;max-height:76%;overflow:auto;width:285px;padding:18px;bottom:9%}
#playPanel h2{font-size:25px}
#playPanel p{min-height:0;margin:7px 0;font-size:12px;line-height:1.5}
#playPanel .actions{gap:6px;margin-top:10px}
#playPanel button{white-space:normal}
#playPanel button:disabled{opacity:.38;cursor:default}
#playPanel .turnBadge{font-size:10px;letter-spacing:.13em;color:#c5a76b}
#playPanel .moveEntry{display:flex;align-items:end;gap:6px;margin:12px 0}
#playPanel .moveEntry label{flex:1;width:auto}
#playPanel input{width:100%;background:#253032;color:#fff;border:1px solid #64716c;padding:8px;margin-top:4px;font:14px monospace}
#playPanel .moveEntry button{flex:0;padding:9px}
#playPanel details{border-top:1px solid #ffffff20;padding-top:10px;margin-top:12px;font-size:12px}
#playPanel summary{cursor:pointer;color:#cdbb95}
#moveList{max-height:125px;overflow:auto;font:12px/1.8 monospace;white-space:pre-wrap}
#playNotice{color:#f0c875!important}
#promotionBox,#confirmBox{padding:12px;background:#30372c;border:1px solid #b6a36c;margin:10px 0}
#rulesResult{font-size:10px;color:#9caeaa;margin-top:10px}
@media(max-width:700px){
 body.playing header{top:12px}body.playing header h1{font-size:26px}
 body.playing header .eyebrow{font-size:8px}
 #viewSwitch{top:110px;left:5%}body.playing #viewSwitch{top:67px}
 #playPanel{left:3%;right:3%;width:auto;bottom:6%;max-height:33%;padding:11px 14px}
 #playPanel h2{font-size:21px;margin:4px 0}
 #playPanel .moveEntry{margin:7px 0}
 #playPanel .actions{margin-top:7px}
 #playPanel button{min-height:36px}
}
/* stage: steadying the selection panel */
#playPanel{height:76%;scrollbar-gutter:stable;overflow-anchor:none;overscroll-behavior:contain}
#playPanel #playNotice{min-height:36px}
#selectionPanel{min-height:142px}
#playPanel #selectionSummary{min-height:36px;color:#baf8d5}
#playPanel #legalDestinations{height:76px;overflow:auto;align-content:flex-start;scrollbar-gutter:stable;margin-top:6px}
#legalDestinations button{flex:1 0 42%;min-height:34px!important;padding:7px}
#squareBoard button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #baffdc}
#squareBoard button:focus-visible{outline-color:#8cffb9}
@media(max-width:700px){#playPanel{height:33%}}