@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#142d32;background:#eef2f2;font-synthesis:none;font-size:16px}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{border:1px solid #ccd7d8;border-radius:7px;min-height:44px;background:white;color:inherit}button{padding:10px 16px;cursor:pointer;font-weight:600;transition:background .15s,transform .15s}button:hover{background:#e6eeee}button:disabled{opacity:.5;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #dd724d;outline-offset:3px}header{max-width:1400px;margin:auto;min-height:100px;padding:22px 48px;display:flex;align-items:center;gap:28px;border-bottom:1px solid #d4dddd}.brand{font:800 22px Manrope,sans-serif;letter-spacing:3px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.brandmark{background:#16363b;color:#daff91;font-size:34px;line-height:40px;letter-spacing:0;padding:0 6px;border-radius:7px}.header-note{font-size:14px;color:#6b7d80}header button{margin-left:auto}.quiet{border-color:transparent;background:transparent}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:58px;max-width:1320px;margin:auto;padding:42px 48px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:#648084}.gameheading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 26px}h1{font:700 clamp(24px,2.4vw,34px)/1.25 Manrope,sans-serif;letter-spacing:-1.2px;margin:0}.badge{font-size:12px;border:1px solid #bfcccc;border-radius:20px;padding:7px 10px;white-space:nowrap}.players{display:flex;gap:12px;margin-bottom:24px}.player{flex:1;border:1px solid #d2dcdc;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:9px;background:#f7f9f9}.player.active{background:#fff;border-color:#20484d;box-shadow:0 3px 0 #20484d}.player strong,.player span{display:block}.player span{font-size:13px;color:#687d80;margin-top:3px}.player small{margin-left:auto;color:#829294;font-size:12px}.stone{display:inline-block;border-radius:50%;width:28px;height:28px;flex-shrink:0}.white{background:radial-gradient(circle at 35% 25%,#fff,#f4f4eb 65%,#bbc6bf);border:1px solid #b9c5be;box-shadow:0 2px 3px #0002}.black{background:radial-gradient(circle at 35% 25%,#4b5b5d,#18272b 70%);border:1px solid #102227;box-shadow:0 2px 3px #0004}.boardwrap{background:#183b40;border-radius:14px;padding:14px 22px 24px;box-shadow:0 9px 0 #102d32,0 16px 26px #12363b18;max-width:660px;margin:0 auto}.columns{display:grid;grid-template-columns:repeat(var(--x),1fr);text-align:center;color:#a8c1c4;font-size:12px;margin-bottom:10px}.board{display:grid;grid-template-columns:repeat(var(--x),1fr);gap:clamp(3px,.8vw,8px)}.cell{aspect-ratio:1;min-height:0;padding:0;border-radius:5px;border:1px solid #507076;background:#2b5055;display:flex;align-items:center;justify-content:center;position:relative;touch-action:manipulation}.cell:hover:not(:disabled){background:#497177}.cell:disabled{opacity:1;cursor:default}.cell .stone{width:76%;height:76%}.cell.winning{background:#9abc64;border-color:#d9ff99}.cell.last .stone:after{content:'';display:block;width:12%;height:12%;border-radius:50%;background:#c47950;margin:44% auto}.cell .fall{animation:drop .32s ease-in}@keyframes drop{from{transform:translateY(var(--fall));opacity:.4}to{transform:translateY(0);opacity:1}}.statusline{display:flex;justify-content:space-between;gap:12px;margin-top:30px;align-items:start}#status{font-weight:700;font-size:18px}.statusline p{color:#60777a;font-size:14px;margin:5px 0}#moveCount{font-size:13px;color:#627b7f;white-space:nowrap;padding-top:4px}.gameactions{display:flex;gap:10px;margin-top:16px}.panel{background:#fff;padding:24px;border:1px solid #dbe3e3;border-radius:12px;margin-bottom:20px}.sectionheading{display:flex;align-items:center;justify-content:space-between;gap:8px}h2{font:800 18px Manrope,sans-serif;margin:0}.sectionheading>span{font-size:10px;letter-spacing:1px;color:#6e8588}.presets{display:flex;gap:6px;margin:20px 0}.presets button{font-size:12px;padding:7px 8px;flex:1}.presets button.selected{background:#e7efd9;border-color:#9cad83}.dimensions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.dimensions label{font-weight:600;font-size:14px}.dimensions label span{display:block;font-size:10px;letter-spacing:1px;color:#7c8b8c;font-weight:400;margin:4px 0 8px}select{width:100%;padding:8px 10px;background:#f6f8f8;font-size:14px}.gravity{display:flex;align-items:center;justify-content:space-between;margin:22px 0}.gravity strong{font-size:14px}.gravity small{display:block;color:#6a8083;font-size:12px;margin-top:4px}.gravity input{width:36px;height:22px;accent-color:#244e51}.divider{border-top:1px solid #e4eaea;margin-bottom:20px}.side-label{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:15px}.side-label .stone{width:18px;height:18px}.side-label select{flex-basis:100%}.full{width:100%;display:flex;align-items:center;justify-content:space-between}.primary{background:#21484d;color:#fff;border-color:#21484d}.primary:hover{background:#316268}.secondary{background:#e5f3ca;border-color:#c8d9ab}.secondary:hover{background:#d6eaae}.caption{font-size:12px;color:#617a7e;line-height:1.55;margin-bottom:0}.training>p{font-size:14px;line-height:1.55;color:#62797c}.memory-stat{display:flex;gap:14px;align-items:center;margin:22px 0}.memory-stat strong{font:700 40px Manrope,sans-serif;letter-spacing:-2px}.memory-stat span{font-size:14px;line-height:1.5}.memory-stat small{font-size:12px;color:#688185}.train-label{font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.train-label select{width:150px}.clear-row{display:flex;flex-wrap:wrap;gap:0;margin-top:12px}.textbutton{padding:5px 0;min-height:36px;border:0;background:none;font-size:12px;color:#617b7e;text-decoration:underline;margin-right:14px}progress{width:100%;margin-top:15px;accent-color:#254f53}.result{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:#e5f3ca;padding:16px;margin-top:20px;border-radius:8px}.result strong{font-size:20px}footer{max-width:1224px;margin:10px auto 30px;border-top:1px solid #d4dddd;padding:22px 0;display:flex;justify-content:space-between;gap:16px;color:#6c8184;font-size:11px;letter-spacing:1.1px}dialog{border:1px solid #cbd7d7;border-radius:14px;max-width:480px;width:calc(100% - 32px);padding:28px;color:#183b40}dialog::backdrop{background:#0d252a99}dialog p{line-height:1.65;white-space:pre-line}.dialogactions{display:flex;justify-content:flex-end;gap:10px}[hidden]{display:none!important}@media(max-width:1000px){main{gap:26px;padding:30px 24px;grid-template-columns:minmax(0,1fr) 310px}.panel{padding:18px}.gameheading{display:block}.badge{display:inline-block;margin-top:10px}header{padding:22px 24px}footer{margin:10px 24px 20px}.boardwrap{padding:12px 12px 18px}}@media(max-width:740px){header{min-height:78px;padding:16px 20px}.header-note{display:none}.brand{font-size:18px}main{display:block;padding:26px 18px}.gameheading{display:flex;flex-wrap:wrap}.gameheading .badge{margin:0}.game{margin-bottom:34px}.players{gap:10px}.player{padding:12px}.player small{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{margin:0}.boardwrap{max-width:540px}footer{font-size:10px}}@media(max-width:570px){aside{display:block}.panel{margin-bottom:18px}h1{font-size:26px}.gameheading{gap:10px}.brand{letter-spacing:2px}.boardwrap{padding:12px 9px 15px}footer{display:block}footer span{display:block;margin:8px 0}.cell{border-radius:3px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.scoreboard{display:flex;align-items:center;gap:20px;margin:0 0 24px;border-top:1px solid #cbd8d9;border-bottom:1px solid #cbd8d9;padding:14px 0;flex-wrap:wrap}.scoreboard>div{margin-right:auto}.scoreboard small{display:block;font-size:12px;color:#627b7f;margin-top:5px}.scoreboard>span{font-size:14px;white-space:nowrap}.scoreboard strong{font:800 26px Manrope,sans-serif;margin-left:8px}.scoreboard button{margin:0}.result p{flex-basis:100%;margin:0;font-size:14px;line-height:1.5}.result strong{flex-basis:100%}header #sound{margin-left:auto}header #help{margin-left:0}@media(max-width:570px){header{gap:8px;flex-wrap:wrap}header .brand{margin-right:auto}header button{font-size:12px;padding:8px}.scoreboard{gap:16px}.scoreboard>div{flex-basis:100%}}

.support-entry{max-width:1224px;margin:0 auto;padding:0 24px}#supportDialog{max-width:560px;max-height:90vh;overflow:auto}#supportClose{float:right}#supportDialog h2{padding-top:12px}#supportDialog select{margin:10px 0 14px}#supportStatus{font-size:14px}#checkout-form{min-height:0}

.dimensions{align-items:end}.dimensions select{display:block;margin-top:8px}.bot-description{flex-basis:100%;font-size:14px;line-height:1.4;color:#617a7e}.player span{font-size:14px}

#configBadge{font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.5;white-space:normal;border:0;border-radius:0;padding:0}#trainingStatus:empty{display:none}

.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}.scoreboard>span:first-child{text-align:left}.scoreboard>span:nth-child(3){text-align:right}.scoreboard>span,.scoreboard strong{font:800 26px/1.35 Manrope,sans-serif;white-space:normal;overflow-wrap:anywhere}.scoreboard strong{margin-left:8px}.speed-label{display:flex;justify-content:space-between;align-items:center;margin:18px 0 4px;font-size:14px;font-weight:600}#trainingSpeed{width:100%;accent-color:#21484d;cursor:pointer;min-height:32px}.speed-limits{display:flex;justify-content:space-between;font-size:14px;color:#617a7e;margin:0 0 16px}

.scoreboard>span:first-child,.scoreboard>span:nth-child(3){display:flex;align-items:center;gap:24px;min-width:0;flex-wrap:wrap}.scoreboard>span:nth-child(3){justify-content:flex-end}.scoreboard strong{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:5px 12px;margin:0;border:2px solid #9eb5b8;border-radius:8px;background:#fff;font-variant-numeric:tabular-nums;flex-shrink:0}

.boardwrap{width:100%;max-width:none}.players{margin-bottom:18px}.player{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 18px}.player-colour{display:flex;align-items:center;gap:10px;min-width:0}.player-colour strong{font-size:16px}.player #whiteLabel,.player #blackLabel{font:800 26px/1.25 Manrope,sans-serif;color:#142d32;margin:0;overflow-wrap:anywhere}.player-score{display:flex;align-items:center;gap:24px}.player .player-score span{font-size:16px;margin:0}.player-score strong{font:800 26px/1.35 Manrope,sans-serif;min-width:52px;text-align:center;padding:3px 12px;border:2px solid #9eb5b8;border-radius:8px;background:#fff;font-variant-numeric:tabular-nums}#blackCard{align-items:flex-end;text-align:right}#setup{margin-top:18px}.gameactions:has(button[hidden]){margin-top:0}

/* Keep the play area within the viewport; controls can scroll independently. */
.player-colour{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:8px!important;width:auto!important}.player-colour .piece-colour{order:1;display:flex!important;align-items:center}.player-colour select{order:2;width:auto!important;max-width:12rem}.player-colour #whiteLabel,.player-colour #blackLabel{display:none!important}.player-colour small{display:none!important}.player-score .games-played{display:none!important}
html,body{height:100%;width:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column}header{width:100%;min-height:64px;padding:12px 24px;flex:0 0 auto}main{width:100%;max-width:1400px;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;padding:16px 24px 12px;overflow:hidden}.game{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;margin:0}.gameheading{margin:0 0 12px}.gameheading .badge{margin:0}.players{margin-bottom:12px}.boardstage{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.boardwrap{flex:none;max-width:100%;margin:0;padding:10px 12px 16px;box-shadow:0 6px 0 #102d32}.columns{height:18px;line-height:18px;margin-bottom:8px}.board{gap:6px}.cell{min-width:0}.statusline{margin-top:10px}.statusline p{margin-bottom:0}.result{margin-top:8px;padding:10px;gap:4px}.result strong{font-size:18px}.gameactions{margin-top:8px}aside{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain}.panel{padding:18px;margin-bottom:12px}footer{flex:0 0 auto;width:calc(100% - 48px);margin:0 auto;padding:8px 0;font-size:10px}.support-entry{flex:0 0 auto;width:100%;padding:0 24px}.training-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #dbe3e3;font-size:14px}.training-results span{text-align:center}.training-results strong{display:block;font:800 22px Manrope,sans-serif;margin-top:4px}
@media(max-width:740px){header{min-height:54px;padding:8px 14px;gap:8px}main{padding:10px 14px;gap:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(120px,30%)}aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.panel{padding:12px;margin:0}footer{display:none}.gameheading{margin-bottom:8px}#configBadge{font-size:18px}.player{padding:8px 12px;gap:4px}.player #whiteLabel,.player #blackLabel{font-size:20px}.player-score strong{font-size:20px;min-width:42px;padding:1px 8px}.player-colour .stone{width:18px;height:18px}.players{margin-bottom:8px}.statusline p{display:none}.statusline{margin-top:6px}#status{font-size:16px}.result p{display:none}.support-entry{padding:0 14px}.training-results{gap:3px;font-size:12px}}
@media(max-width:480px){aside{grid-template-columns:1fr}.brand{font-size:16px}.player-score{gap:14px}}
@media(max-height:650px) and (min-width:741px){header{min-height:48px;padding:6px 20px}main{padding-top:8px;gap:20px}.player{padding:8px 14px;gap:3px}.player #whiteLabel,.player #blackLabel{font-size:22px}.player-score strong{font-size:22px;padding:1px 8px}.gameheading{margin-bottom:6px}footer{display:none}.result p{display:none}.statusline p{display:none}}
.player{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:6px;text-align:left}
.player-colour{grid-column:1;grid-row:1;justify-self:start;white-space:nowrap}
.player #whiteLabel,.player #blackLabel{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.player-score{grid-column:2;grid-row:2;justify-self:end}
#blackCard{align-items:center;text-align:left}
.memory-stat{display:block;margin:16px 0}
.memory-count{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}
.memory-stat .memory-count strong{font-size:clamp(19px,2vw,28px);letter-spacing:-1px;overflow-wrap:anywhere}
.memory-divider{font:700 22px Manrope,sans-serif;color:#829294}
.memory-stat>span{display:block;margin-top:3px}
.player{grid-template-columns:auto minmax(0,1fr) auto;column-gap:7px;row-gap:3px}
.player-score{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px}
.player .player-score span{white-space:nowrap}
dialog{max-height:calc(100dvh - 32px);overflow:auto}
@container (max-width:270px){.player #whiteLabel,.player #blackLabel{font-size:18px}.player-colour strong,.player .player-score span{font-size:14px}}
.player{container-type:inline-size}
.speed-bar{position:relative;height:40px;--speed-percent:0%}
.speed-track{position:absolute;left:9px;right:9px;top:15px;height:10px;border-radius:6px;background:#759497}
.speed-fill{height:100%;width:var(--speed-percent);border-radius:6px;background:#21484d}
.speed-marks{position:absolute;inset:0}
.speed-marks i{position:absolute;top:50%;width:1px;height:15px;background:#e5f3ca;transform:translate(-50%,-50%);pointer-events:none}
.speed-marks i.major{width:3px;height:21px;background:#e8f7ce}
#trainingSpeed{position:absolute;inset:0;margin:0;width:100%;height:40px;min-height:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;accent-color:unset}
#trainingSpeed::-webkit-slider-runnable-track{height:10px;background:transparent}
#trainingSpeed::-moz-range-track{height:10px;background:transparent}
#trainingSpeed::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:24px;margin-top:-7px;border:2px solid #173a3f;border-radius:7px;background:#e5f3ca;box-shadow:0 1px 3px #12363b66}
#trainingSpeed::-moz-range-thumb{width:18px;height:24px;border:2px solid #173a3f;border-radius:7px;background:#e5f3ca;box-shadow:0 1px 3px #12363b66}
footer{align-items:center}footer #supportButton{min-height:36px;padding:6px 13px;font-size:13px;letter-spacing:0;text-transform:none}
@media(max-width:740px){footer{display:flex;width:calc(100% - 28px);padding:6px 0}footer #saveStatus{display:none}}

.memory-stat .bot-games-summary{font-size:16px;line-height:1.6;margin:0 0 4px;overflow-wrap:anywhere}.memory-stat .bot-games-summary strong{font:700 18px Manrope,sans-serif;letter-spacing:0}


[hidden]{display:none!important}.account-nav{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.account-nav button{font-size:.875rem;padding:.45rem .65rem}.account-nav span{font-weight:700;overflow-wrap:anywhere;max-width:12rem}header{flex-wrap:wrap;gap:.6rem}#authDialog{width:min(94vw,440px)}#authDialog label{display:grid;gap:.45rem;margin:1rem 0}#authDialog input{box-sizing:border-box;width:100%;padding:.75rem;border:1px solid #a6b8bb;border-radius:7px;font:inherit}#authDialog small{font-size:.875rem;line-height:1.4;font-weight:400}#authMessage{white-space:pre-line}#scoresDialog{width:min(95vw,850px)}.scores-scroll{overflow:auto}#scoresDialog table{border-collapse:collapse;width:100%;font-size:.875rem}#scoresDialog th,#scoresDialog td{text-align:left;padding:.65rem;border-bottom:1px solid #ccd6d8}.account-feedback{font-size:.875rem;padding:.4rem 1rem;min-height:1.7rem}.bot-total{font-size:.9rem}.bot-total strong{font-variant-numeric:tabular-nums}#botPersistence{font-size:.875rem}@media(max-width:650px){.account-nav{order:4;width:100%}.header-note{display:none}}

.player-score{flex-wrap:wrap}.player-score small{display:block!important;flex-basis:100%;text-align:right;font-size:12px;font-weight:600;color:#587176}.player-score .rating-up{color:#23733d;background:#e7f5d7}.player-score .rating-down{color:#a64232;background:#fff0eb}.player-score strong{font-variant-numeric:tabular-nums}

.credit-balance{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin:12px 0}.credit-balance strong{font-size:26px;font-variant-numeric:tabular-nums}.training-count-control{display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0}.training-count-control>label{font-weight:700}.training-stepper{display:flex;flex-direction:column;align-items:stretch;width:100px;gap:3px}.training-stepper button{min-height:44px;padding:5px}.training-stepper input{width:100%;height:50px;text-align:center;font-size:24px;font-weight:700;border:1px solid #ccd7d8;border-radius:7px;background:#fff;color:#142d32;appearance:textfield;-moz-appearance:textfield}.training-stepper input::-webkit-inner-spin-button,.training-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.player-score .games-played{flex-basis:100%;text-align:right;font-size:14px;white-space:nowrap;color:#587176}.games-played b{font-variant-numeric:tabular-nums;color:#142d32;margin-left:8px}

.player{grid-template-columns:minmax(0,1fr) auto}.player-colour{grid-column:1/-1;flex-wrap:wrap;white-space:normal}.player-score{grid-column:2;grid-row:2;max-width:100%;justify-content:flex-end}.player-colour #whiteLabel,.player-colour #blackLabel{min-width:0;white-space:normal}
@media(min-width:1000px){.player-colour{grid-column:1;grid-row:1}.player-colour #whiteLabel,.player-colour #blackLabel{flex-basis:100%;text-align:left;font-size:22px}.player-score{grid-column:2;grid-row:1;width:150px}.player{padding:12px 16px}}

.training .sectionheading{margin-bottom:0}.training .credit-balance{margin-top:0}.player-score{display:grid;grid-template-columns:auto auto auto;width:auto;column-gap:7px;row-gap:5px}.player-score>span{grid-column:1;grid-row:1}.player-score>strong{grid-column:2;grid-row:1}.player-score>small{grid-column:3;grid-row:1;white-space:nowrap;font-size:14px}.player-score>.games-played{grid-column:1/-1;grid-row:2}@media(max-width:480px){.player-score{column-gap:4px}.player .player-score>span{font-size:13px}.player-score>strong{padding:1px 5px}.player-score>small{font-size:13px}}

.result p.training-nudge{display:block}

#formatPickerLabel{display:grid;gap:8px;margin-bottom:12px;font-weight:700}#formatPicker{width:100%;min-width:0;font-size:14px}#ruleEditor{border:1px solid #ccd7d8;border-radius:8px;padding:12px;margin:12px 0}#ruleEditor h3{margin-top:0}#formatStatus:empty{display:none}

/* Names and side selection stay with their board cards. */
.player-colour{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.player-colour select{max-width:100%;width:100%;font-size:18px;font-weight:700;margin:0}
.piece-colour{display:flex;align-items:center;gap:8px}
.player-colour [hidden]{display:none!important}
.player-score{grid-template-columns:minmax(0,1fr) auto auto}
.player .player-score>span{white-space:normal}
#creditPurchaseStatus:empty,#unlockAvailability:empty,#formatStatus:empty{display:none}
.training-stepper button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
@media(min-width:1000px){.player-score{width:170px}.player-colour{width:100%}}
@media(max-width:480px){.player-colour select{font-size:15px}.player-score{max-width:100%;width:100%}}

.gameheading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.gameheading form{margin:0}.gameheading #gameButton{margin:0}

.player .piece-colour{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0}

.credits-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.credits-heading>strong{font-size:24px;font-variant-numeric:tabular-nums}
header .account-nav{margin-left:auto;justify-content:flex-end}header .account-nav button{margin-left:0;border:1px solid #ccd7d8;background:white;min-height:44px}header #logoutAccount{order:10}
.gameheading{align-items:center}.gameheading #configBadge{font-size:clamp(24px,2.5vw,32px);line-height:1.2;white-space:normal;margin:0;padding:0}.gameheading #gameButton{align-self:center}
@media(max-width:650px){header .account-nav{justify-content:flex-end}.gameheading #configBadge{font-size:24px}}

.gameheading #setup{margin:0;display:flex;align-items:center}


.player-score{grid-template-columns:auto auto;justify-content:end;column-gap:7px}.player-score>span{justify-self:end}.player-score>strong{justify-self:end}
.memory-stat>#memoryConfig{display:block;font-size:17px;line-height:1.4;margin-bottom:10px;color:#142d32}
.training-count-control>label{text-align:center}.training-stepper{display:grid;grid-template-columns:minmax(0,1fr) 100px minmax(0,1fr);grid-template-rows:44px 50px 44px;width:100%;column-gap:10px;align-items:center}
#trainingUp{grid-column:2;grid-row:1}#trainingCount{grid-column:2;grid-row:2}#trainingDown{grid-column:2;grid-row:3}.training-games-unit{grid-column:3;grid-row:2;justify-self:start}.training-count-control>.caption{text-align:center}

.memory-stat>#memoryConfig{letter-spacing:normal;word-spacing:normal;white-space:normal}

.gameheading #formatPickerLabel{flex:1;min-width:0;max-width:100%;margin:0}
.gameheading #formatPicker{width:100%;font-size:clamp(20px,2.3vw,30px);font-weight:700;line-height:1.25;margin:0;padding:7px 32px 7px 10px;background-color:transparent;border-color:#bdcecf;text-overflow:ellipsis}
.gameheading #formatPicker:disabled{opacity:1;color:#425b60;cursor:default}
.boardwrap{position:relative}.boardwrap.gravity-on:before,.boardwrap.gravity-on:after{content:'';position:absolute;top:20%;height:60%;width:18px;background:#234e54;opacity:.13;pointer-events:none;clip-path:polygon(36% 0,64% 0,64% 86%,100% 86%,50% 100%,0 86%,36% 86%)}
.boardwrap.gravity-on:before{left:-25px}.boardwrap.gravity-on:after{right:-25px}
@media(max-width:480px){.gameheading #formatPicker{font-size:18px}.gameheading #formatPickerLabel{flex-basis:100%}}

.players .player{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.players .player-colour{min-width:0;flex:1}.players .player-colour select{min-width:0;max-width:100%;flex:1}.players .player-score{width:auto;flex:none;display:flex;align-items:center;gap:6px}.players #blackCard{align-items:center;text-align:left}.players .games-played{display:none!important}@media(max-width:600px){.players{flex-direction:column}.players .player{width:100%}}
#gameName{width:100%;margin:8px 0 14px}#gameName[readonly]{background:#edf2f2}
.playing-for{font-size:18px;font-weight:600}.players .player-score strong{border:0;background:transparent;box-shadow:none;padding:0;min-width:0}.players .player-score>span{font-size:24px}
.gameheading{justify-content:space-between}.playing-sentence{display:flex;align-items:center;gap:.28em;flex:1;min-width:0;font-size:26px;font-weight:700;font-family:inherit;line-height:1.25}.playing-sentence .playing-for,.gameheading .playing-sentence #configBadge,.gameheading .playing-sentence #formatPicker{font:inherit;line-height:inherit}.playing-sentence .playing-for{white-space:nowrap}.gameheading .playing-sentence #formatPickerLabel{flex:0 1 auto;min-width:0}.gameheading .playing-sentence #formatPicker{width:auto;max-width:100%;padding:0 24px 0 0;border-color:transparent}.players .player-score>span{font-size:32px}.gameheading #gameButton{font-size:20px;padding:14px 24px;min-height:54px;animation:startPulse 2s ease-in-out infinite}.gameheading #gameButton:disabled{animation:none}@keyframes startPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}#unlockChoices button{margin-bottom:10px}@media(max-width:600px){.playing-sentence{font-size:21px;flex-wrap:wrap}}
.gameheading #gameButton{background:#4cae38;border-color:#398a29;color:#fff;font-size:22px;animation-duration:1.2s}.gameheading #gameButton:hover{background:#419a30}
.credits-heading{display:flex;justify-content:center;align-items:center;gap:12px}.credits-heading h2{margin:0}.playing-sentence{flex:0 1 auto;justify-content:center}.gameheading{justify-content:center;gap:16px}.gameheading .playing-sentence #formatPicker{padding:0 0 0 22px;background-image:none;appearance:none;text-align:left}.gameheading #formatPickerLabel{position:relative}.gameheading #formatPickerLabel:before{content:"▾";position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-size:20px}.boardwrap.gravity-on:before,.boardwrap.gravity-on:after{opacity:.3;width:20px}.boardwrap.gravity-up:before,.boardwrap.gravity-up:after{transform:rotate(180deg)}#showLargeNumbers{margin-right:8px}

#moveCountdown{text-align:center;font-size:1.3rem;font-weight:700;color:#923b20;}

.gameheading{flex-wrap:nowrap;align-items:center;gap:12px}.gameheading .playing-sentence{flex:0 1 auto;flex-wrap:nowrap;min-width:0}.gameheading .playing-sentence #formatPicker{padding:0 26px 0 0;field-sizing:content;max-width:100%}.gameheading #formatPickerLabel:before{left:auto;right:3px}.gameheading #formatPickerLabel{flex:0 1 auto;min-width:0}.gameheading #setup{flex:0 0 auto;align-self:center}.gameheading #gameButton{white-space:nowrap}.gameheading #configBadge{white-space:nowrap}#ruleEditor h3{margin:0 0 12px}#ruleEditor h4{margin:0 0 12px}#gravity{width:7.4ch;min-width:7.4ch;flex:0 0 auto;padding:7px 20px 7px 6px}.cell .stone.fall{position:relative;z-index:2;animation:drop .32s ease-in;opacity:1}@keyframes drop{from{transform:translateY(var(--fall));opacity:1}to{transform:translateY(0);opacity:1}}@media(max-width:700px){.playing-sentence{font-size:clamp(14px,3.3vw,21px)}.gameheading #gameButton{font-size:clamp(14px,3vw,20px);padding:10px 12px;min-height:44px}.gameheading{gap:8px}}

.stone.cross{position:relative;background:none;border:0;box-shadow:none}.cell .stone.cross{width:88%;height:88%}.stone.cross:before,.stone.cross:after,.cell.last .stone.cross:after{content:'';position:absolute;display:block;top:42%;left:1%;width:98%;height:17%;margin:0;border-radius:0;background:#f9faf3;box-shadow:none;clip-path:polygon(0 28%,4% 14%,7% 20%,10% 8%,25% 13%,42% 4%,63% 10%,81% 0,94% 12%,100% 25%,97% 40%,100% 54%,95% 62%,98% 79%,91% 90%,75% 86%,58% 100%,38% 91%,20% 96%,7% 83%,0 72%,3% 57%)}.stone.cross:before{transform:rotate(43deg)}.stone.cross:after,.cell.last .stone.cross:after{transform:rotate(-47deg);height:16%;clip-path:polygon(0 17%,8% 9%,19% 15%,38% 0,57% 11%,77% 4%,92% 16%,100% 9%,96% 31%,100% 49%,95% 62%,99% 87%,90% 94%,76% 88%,56% 100%,35% 90%,15% 98%,4% 84%,0 63%,4% 44%)}.piece-colour .stone.cross:before,.piece-colour .stone.cross:after{background:#254b51}

.game{container-type:inline-size}.gameheading .playing-sentence{font-size:clamp(14px,3.2cqw,26px)}.gameheading #gameButton{font-size:clamp(14px,2.7cqw,22px);padding:12px clamp(10px,2.4cqw,24px)}

.gameheading{flex-wrap:wrap}.gameheading .playing-sentence{flex:0 0 auto;flex-wrap:wrap;max-width:100%}.gameheading .playing-sentence .playing-for{flex:0 0 auto}.gameheading .playing-sentence #formatPickerLabel{flex:0 0 auto;max-width:none}.gameheading .playing-sentence #formatPicker{flex-shrink:0;max-width:none;field-sizing:fixed;text-overflow:clip;padding-right:34px}#gravity{width:5.5rem;min-width:5.5rem;padding:7px 22px 7px 8px}.board{position:relative}.board>.piece-in-flight{position:absolute!important;z-index:5;pointer-events:none;min-width:0;min-height:0}.result{position:relative}.win-dancer{width:58px;height:76px;flex:0 0 58px;color:#244b50}.win-dancer svg{width:100%;height:100%;overflow:visible}.win-dancer .dance-body{animation:danceBounce .4s ease-in-out infinite}.win-dancer .dance-arm{transform-box:view-box;transform-origin:32px 28px;animation:danceArms .4s ease-in-out infinite alternate}.win-dancer .dance-leg{transform-box:view-box;transform-origin:32px 43px;animation:danceLegs .4s ease-in-out infinite alternate}.win-dancer .dance-right{animation-delay:-.4s}.result:has(.win-dancer:not([hidden])) strong,.result:has(.win-dancer:not([hidden])) p{flex-basis:calc(100% - 70px)}@keyframes danceBounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}@keyframes danceArms{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}@keyframes danceLegs{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}.page-footer{display:none}main{padding-bottom:6px}.account-feedback:has(#accountStatus:empty):has(#retryAccountSave[hidden]){display:none}

#playOnline{animation:startPulse 1.2s ease-in-out infinite}#playOnline:disabled{animation:none}

.board>.piece-in-flight{animation:drop .32s ease-in both}

.win-dancer:not(.dancing) .dance-body,.win-dancer:not(.dancing) .dance-arm,.win-dancer:not(.dancing) .dance-leg{animation:none;transform:none}
.result p.training-nudge{font-size:18px;font-weight:800}
.result.training-complete{margin-top:2px}
.game:has(.result.training-complete:not([hidden])) .boardstage{align-items:flex-end}
#unlockHeading{margin-bottom:16px}#unlockChoices{display:grid;gap:12px}#unlockChoices button{margin-bottom:0}
#dialogText h2{font-size:18px;font-weight:800;margin:18px 0 10px}

/* Keep the board in a stable slot before, during and after a game. */
.game{grid-template-rows:auto auto minmax(0,1fr) 156px}.players{min-height:64px}.boardstage{align-items:flex-end}.board-feedback{height:156px;min-height:0;padding-top:8px;overflow:auto}.board-feedback .statusline{margin-top:0}.board-feedback .result{margin-top:4px}.board-feedback .statusline:has(#status:empty):has(#hint:empty){display:none}.board-feedback .gameactions{margin-top:4px}.players .player-score>span{font-size:38px}#playOnline{background:#4cae38;border-color:#398a29;color:#fff}#playOnline:hover{background:#419a30}@media(max-width:740px){.game{grid-template-rows:auto auto minmax(0,1fr) 156px}}

/* Stable heading tracks prevent button-label changes from moving the board. */
.game{grid-template-rows:72px 76px minmax(0,1fr) 156px}.gameheading{height:72px;min-height:72px;margin:0;align-content:center}.players{height:76px;min-height:76px;margin-bottom:12px}.gameheading #setup{width:220px;flex:0 0 220px}.gameheading #gameButton,#playOnline{width:220px;height:54px;min-height:54px;font-size:22px;padding:12px 16px;box-sizing:border-box}#onlinePanel{height:72px;min-height:72px;display:flex;align-items:center;justify-content:center;padding:0;margin-bottom:12px;background:transparent;border:0;box-shadow:none;position:relative}#onlineStatus:empty{display:none}#onlineStatus:not(:empty){position:absolute;top:62px;left:0;right:0;z-index:1;padding:8px;background:#eef2f2}.boardstage{align-items:flex-start}.game:has(.result.training-complete:not([hidden])) .boardstage{align-items:flex-start}.credit-coin{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;border:2px solid #c98b12;background:linear-gradient(135deg,#fff0a8,#edb631 55%,#d69512);color:#f9d467;box-shadow:inset 0 0 0 2px #f5d579;font-size:15px;flex:0 0 23px}@media(max-width:740px){.game{grid-template-rows:104px 76px minmax(0,1fr) 156px}.gameheading{height:104px;min-height:104px}.gameheading #setup{width:180px;flex-basis:180px}.gameheading #gameButton,#playOnline{width:180px;height:54px;font-size:18px}}

.result{height:132px;min-height:132px;background:#fff;display:grid;grid-template-columns:70px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;overflow:auto}.result .win-dancer{grid-column:1;grid-row:1/span 2}.result strong{grid-column:2;grid-row:1}.result p{grid-column:2;grid-row:2;margin:0}.result.black-win{grid-template-columns:minmax(0,1fr) 70px}.result.black-win .win-dancer{grid-column:2}.result.black-win strong,.result.black-win p{grid-column:1}.unlock-actions{display:flex;align-items:stretch;gap:8px;margin-top:10px}.unlock-actions #saveFormat{flex:1;min-width:0}.unlock-actions #cancelGameUnlock{flex:0 0 auto;margin:0}#formatsPanel:has(#ruleEditor[hidden]) #saveFormat{display:none}#unlockHeading,#ruleEditor h3{text-align:center}#buyCredits{background:#e5f3ca;border:1px solid #cbdbaa;color:#254b51}#buyCredits:hover{background:#d9edb6}

@media(min-width:741px){#onlinePanel{height:72px;min-height:72px;align-items:flex-start;padding-top:9px}#onlineStatus:not(:empty){top:70px;margin:0;padding:8px 0;background:transparent;z-index:auto}}

#accountName{font-size:18px}
header .account-nav{flex:1;min-width:0}header .account-nav #accountName{flex:1;max-width:none;text-align:center;white-space:nowrap;padding:0 .5rem}
.players .player-colour .human-skill{flex:1;min-width:max-content;text-align:center;margin-left:0}

.free-credit-label{color:#c62828}

[hidden]{display:none!important}.online-search{max-width:1000px;margin:24px auto;padding:24px}.online-search-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.online-games{width:100%;border-collapse:collapse;table-layout:fixed;background:#fff}.online-games th,.online-games td{padding:14px 10px;border-bottom:1px solid #ccd7d8;text-align:center;overflow-wrap:anywhere}.online-games th:first-child,.online-games td:first-child{text-align:left;width:40%}.online-games th{font-size:14px}.online-games button{padding:8px 12px;min-width:54px}.online-games button[aria-pressed="true"]{background:#16363b;color:#daff91}.online-search-heading h1{font-size:26px}@media(max-width:550px){.online-search{padding:16px 8px;margin:10px auto}.online-search-heading{align-items:flex-start}.online-search-heading h1{font-size:22px}.online-games th,.online-games td{padding:12px 5px}.online-games th:first-child,.online-games td:first-child{width:36%}.online-games th{font-size:14px}.online-games td{font-size:16px}}

/* Keep the same header position whether the board or search table is visible. */
header{margin:0 auto}
.online-search{width:100%;flex:1;min-height:0;overflow:auto;margin:0 auto;padding:8px 24px 16px}
.online-search-heading{margin-bottom:10px}
#buyCredits{justify-content:center;gap:.3em;flex-wrap:wrap}
.free-credit-label{font-size:1.12em;font-weight:800}
@media(max-width:550px){.online-search{margin:0 auto;padding:8px 8px 16px}}

.credit-total{display:inline-flex;align-items:center;gap:6px}.reward-gain,.player small.reward-gain{font-size:18px;font-weight:800;color:#327016;margin:0 0 0 5px;white-space:nowrap}.player-score .reward-gain{display:inline-block}
.players .player-score small.reward-gain{display:inline-block!important;flex-basis:auto;text-align:left;font-size:18px;font-weight:800;color:#327016}
.players .player-score small[hidden]{display:none!important}
.players .player-score:has(.reward-gain:not([hidden])){flex-wrap:nowrap}

.result.has-skill-increase{grid-template-rows:1fr auto auto}.skill-level-notice{grid-column:1/-1;grid-row:3;margin:4px 0 0;font-size:16px;font-weight:700;line-height:1.3;text-align:center;color:#327016}

/* Skill achievements stay prominent after the brief fanfare. */
.result .skill-level-notice{font-size:clamp(22px,3vw,30px);font-weight:900;line-height:1.15;color:#22540d;margin:4px 0 0}.skill-level-flash{animation:skillLevelFlash .8s ease-in-out 3}@keyframes skillLevelFlash{0%,100%{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){.skill-level-flash{animation:none}}
.result.draw-result strong,.result.draw-result #resultQuip{font:800 clamp(22px,3vw,30px)/1.2 Manrope,sans-serif}
/* Occupied squares retain their board colour under the pointer. */
.cell:disabled:hover:not(.winning),.cell.last:not(.winning):hover{background:#2b5055}

.large-number-list{padding-left:1.5em;margin:12px 0}.large-number-list li{display:list-item;margin:6px 0;line-height:1.4}

/* Phones reserve the viewport for play; secondary controls scroll separately. */
@media(max-width:600px){
 header{min-height:0;padding:6px 10px;gap:4px;flex-wrap:nowrap;align-items:center}
 header .brand{font-size:16px;letter-spacing:1px;gap:5px;white-space:nowrap;margin:0}
 .brandmark{font-size:24px;line-height:30px;padding:0 4px}
 header .account-nav{order:initial;width:auto;min-width:0;flex:1;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin-left:8px;gap:5px}
 header .account-nav button{flex:none;font-size:14px;padding:6px 8px;min-height:36px;white-space:nowrap}
 #accountName{font-size:14px;flex:none}
 main#playScreen{padding:6px 10px;gap:6px;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 48px 48px}
 .game{grid-template-rows:44px 88px minmax(0,1fr) 88px;min-height:0;margin:0}
 .gameheading{height:44px;min-height:44px;flex-wrap:nowrap;gap:6px}
 .gameheading .playing-sentence{flex:1;min-width:0;flex-wrap:nowrap;font-size:16px}
 .playing-sentence .playing-for{display:none}
 .gameheading .playing-sentence #configBadge{font-size:16px}
 .gameheading .playing-sentence #formatPickerLabel{flex:1;min-width:0;max-width:100%}
 .gameheading .playing-sentence #formatPicker{max-width:100%;font-size:16px;padding-left:0}
 .gameheading #setup{width:132px;flex:0 0 132px;margin:0}
 .gameheading #gameButton,#playOnline{width:132px;height:38px;min-height:38px;font-size:16px;padding:6px;animation:none}
 .players{height:88px;min-height:88px;margin:0;gap:4px;flex-direction:column}
 .players .player{height:42px;min-height:42px;padding:3px 8px;gap:5px;flex:none}
 .players .player-colour select{font-size:16px;min-height:34px;padding:4px 6px}
 .players .player-score strong{font-size:20px}
 .players .player-score>span{font-size:24px}
 .boardstage{align-items:center}
 .boardwrap{padding:6px 8px 10px;border-radius:10px}
 .columns{height:14px;line-height:14px;margin-bottom:4px}
 .board{gap:3px}
 .board-feedback{height:88px;padding-top:4px}
 .result{height:76px;min-height:76px;padding:4px 8px;grid-template-columns:44px minmax(0,1fr)}
 .result p{display:block}
 .result strong,.result.draw-result strong,.result.draw-result #resultQuip{font-size:18px;line-height:1.15}
 .result.black-win{grid-template-columns:minmax(0,1fr) 44px}
 .win-dancer{width:38px;height:54px}
 .result .skill-level-notice{font-size:20px}
 aside{display:flex;gap:8px;overflow:auto;align-items:flex-start;height:48px;min-height:0}
 aside .panel{flex:0 0 280px;margin:0;padding:8px}
 #onlinePanel{flex-basis:140px;height:44px;min-height:44px;padding:0;margin:0}
 #onlineStatus:not(:empty){position:static;font-size:14px}
 #guestPanel{flex-basis:100%;padding:4px 8px;font-size:14px}
 #guestPanel p{margin:0}
 .account-feedback{font-size:12px;padding:2px 10px;min-height:0;max-height:30px;overflow:auto}
}
@media(max-width:600px) and (max-height:550px){
 .game{grid-template-rows:40px 44px minmax(0,1fr) 56px}
 .players{height:44px;min-height:44px;flex-direction:row}
 .players .player{width:50%}
 .players .player-score{display:none}
 .board-feedback{height:56px}.result{height:50px;min-height:50px}
}
#mobilePlayOnline,#mobileControls{display:none}
@media(max-width:600px){
 main#playScreen{position:relative}
 #mobilePlayOnline,#mobileControls{display:block;min-height:42px;padding:6px;font-size:16px;background:#4cae38;border-color:#398a29;color:#fff}
 #mobilePlayOnline{grid-row:2}
 #mobileControls{grid-row:3}
 #mobilePlayOnline:hover,#mobileControls:hover{background:#419a30}
 main#playScreen>aside{display:none}
 .mobile-controls-open main#playScreen>aside{display:block;position:absolute;z-index:20;inset:0 0 54px;background:#eef2f2;height:auto;padding:10px;overflow:auto}
 .mobile-controls-open aside .panel{width:100%;margin-bottom:10px}
 .mobile-controls-open #onlinePanel{display:none}
}
#mobileControlsBack{display:none}
@media(max-width:600px){.mobile-controls-open #mobileControlsBack{display:block;position:sticky;top:0;z-index:21;width:100%;margin-bottom:10px;background:#fff;min-height:44px;font-size:16px}}
/* Let Android browsers own the page's top-edge gesture for normal pull-to-refresh. */
@media(max-width:600px){html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto}body{height:auto;min-height:100dvh}}
#mobileTrainingControls{display:none}
@media(max-width:600px){
 .mobile-training #mobileTrainingControls:not([hidden]){display:grid;grid-template-columns:1fr 130px;gap:2px 10px;align-items:center}
 #mobileTrainingControls label{grid-column:1;font-size:14px;font-weight:700;display:flex;justify-content:space-between}
 #mobileTrainingSpeed{grid-column:1;width:100%;margin:0;min-height:30px;accent-color:#327016}
 #mobileTrainingStop{grid-column:2;grid-row:1/span 2;min-height:44px;font-size:16px;padding:6px}
 .mobile-training #gameStatus,.mobile-training #mobilePlayOnline,.mobile-training #mobileControls{display:none}
 .mobile-training main#playScreen{grid-template-rows:minmax(0,1fr)}
 .mobile-training .game{grid-template-rows:44px 88px minmax(0,1fr) 64px}
 .mobile-training .board-feedback{height:64px}
}

/* Anchor results to the board, independently of status and reward updates. */
.board-feedback{position:relative;transform:translateY(calc(-1 * var(--feedback-lift,0px)));overflow:visible}
.board-feedback .result{position:absolute;top:8px;left:0;right:0;margin:0}
.result #humanSkillNotice{grid-column:1/-1;grid-row:3;font-size:14px;font-weight:700;text-align:center}
.result:has(#humanSkillNotice:not([hidden])){grid-template-rows:1fr 1fr auto}
#aiLevelDialog{padding:0;max-width:440px;border:3px solid #b9d879;box-shadow:0 16px 60px #102d3255}
#aiLevelDialog::backdrop{background:#102d3277;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
#aiLevelDismiss{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:20px;background:#f4faec;border:0;border-radius:10px}
#aiLevelDismiss img{width:100%;max-width:280px;border-radius:18px}
#aiLevelTitle{font-size:clamp(26px,5vw,36px);font-weight:900;line-height:1.15}
#aiLevelDismiss span{font-size:16px;color:#456646}
@media(max-width:600px){.board-feedback .result{top:4px}#aiLevelDismiss{gap:12px;padding:16px}#aiLevelDismiss img{max-width:230px}.result #humanSkillNotice{font-size:12px}}

#aiLevelDialog,#aiLevelDismiss,#aiLevelDismiss:hover{background:#fff}
.result #humanSkillNotice{font-size:clamp(18px,2.4vw,26px);font-weight:900;color:#287017;line-height:1.15}
.result #humanSkillNotice.skill-decrease{color:#a63c2b}
#leagueDialog{max-width:780px;width:calc(100% - 24px);padding:20px;background:#fff}
.league-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#leagueFormat{font-weight:700;margin:12px 0}
#leagueMessage:empty{display:none}
.league-scroll{max-height:calc(100dvh - 190px);overflow:auto}
.league-table{width:100%;border-collapse:collapse;font-size:16px}
.league-table th{position:sticky;top:0;background:#edf3f3;z-index:1;text-align:left}
.league-table th,.league-table td{padding:9px 12px;border-bottom:1px solid #d8e1e1}
.league-table td:first-child,.league-table td:nth-child(3),.league-table td:nth-child(4){font-variant-numeric:tabular-nums}
.league-table .league-self{background:#e5f3ca;font-weight:800}
.league-table .league-gap td{text-align:center;height:32px;padding:0;color:#627b7f}
@media(max-width:600px){#leagueDialog{padding:12px}.league-table{font-size:14px}.league-table th,.league-table td{padding:7px 5px}.league-table td:nth-child(2){overflow-wrap:anywhere;max-width:140px}.league-heading h2{font-size:20px}.result #humanSkillNotice{font-size:16px}}

.player-ai-image{order:3;width:46px;height:46px;object-fit:contain;background:white;border-radius:7px;flex:none}
.training-ai-image{width:112px;height:72px;object-fit:contain;background:#fff;border-radius:6px;cursor:pointer}
.ratings-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
#ratingsAIImage{width:100px;height:100px;object-fit:contain;background:#fff}
@media(max-width:600px){.player-ai-image{width:32px;height:32px}.training-ai-image{width:64px;height:64px}#ratingsAIImage{width:72px;height:72px}}

.ai-win-image{object-fit:contain;background:#fff;width:100%;height:110px;border-radius:8px}
.result:has(.ai-win-image:not([hidden])){grid-template-columns:120px minmax(0,1fr)}
.result.black-win:has(.ai-win-image:not([hidden])){grid-template-columns:minmax(0,1fr) 120px}
@media(max-width:600px){.ai-win-image{height:64px}.result:has(.ai-win-image:not([hidden])){grid-template-columns:64px minmax(0,1fr)}.result.black-win:has(.ai-win-image:not([hidden])){grid-template-columns:minmax(0,1fr) 64px}}

.player-colour .human-skill{order:3;flex:0 0 auto;white-space:nowrap;font-size:15px;font-weight:700;margin-left:2px}
.players .player-colour select{text-overflow:ellipsis;overflow:hidden}
@media(max-width:600px){.player-colour .human-skill{font-size:14px}.players .player-colour{gap:5px!important}.players .player-score{gap:4px}}

/* Reserve space for Skill and keep the trophy symbol tight to its total. */
.players .player-score{gap:2px;column-gap:2px;flex-wrap:nowrap}
.players .player-score>span{line-height:1;margin:0}
.players .player-score>strong,.players .player-colour .human-skill{font:800 22px/1.35 Manrope,sans-serif;font-variant-numeric:tabular-nums}
.players .player-colour select{flex:0 1 14ch;width:14ch!important;max-width:14ch!important}
@media(max-width:600px){.players .player-score>strong,.players .player-colour .human-skill{font-size:20px}.players .player-colour select{flex-basis:14ch}.players .player-score{gap:1px}}
/* Plain-weight totals, with the trophy tucked beside its number. */
.players .player-score>strong,.players .player-colour .human-skill{font-weight:400}
.players .player-score>span{transform:translateX(3px);margin-right:-2px}

.result #resultText,.result #humanSkillNotice,.result #humanSkillNotice.skill-decrease{font:900 clamp(18px,2.4vw,26px)/1.15 Manrope,sans-serif;color:#000;text-align:left;margin:0}
.result:has(#humanSkillNotice:not([hidden])){grid-template-rows:auto auto minmax(0,1fr);align-content:start;row-gap:6px;padding-top:12px}
.result #humanSkillNotice{grid-column:2;grid-row:2;align-self:start}
.result.black-win #humanSkillNotice{grid-column:1}
.result:has(#humanSkillNotice:not([hidden])) #resultQuip{grid-row:3;align-self:start}
.result:has(#humanSkillNotice:not([hidden])) .win-dancer{align-self:start}
@media(max-width:600px){.result #resultText,.result #humanSkillNotice,.result #humanSkillNotice.skill-decrease{font-size:18px}.result:has(#humanSkillNotice:not([hidden])){padding-top:5px;row-gap:3px}}

/* The text stays centred on the board; portraits sit immediately beside it. */
.result,.result.black-win,.result:has(#humanSkillNotice:not([hidden])),.result:has(.ai-win-image:not([hidden])),.result.black-win:has(.ai-win-image:not([hidden])){display:flex;align-items:flex-start;justify-content:center;padding:12px 8px;gap:0}
.result-copy{position:relative;width:max-content;max-width:calc(100% - 184px);margin:0 auto;text-align:center}
.result #resultText,.result #humanSkillNotice,.result #humanSkillNotice.skill-decrease,.result #resultQuip{display:block;text-align:center;margin:0}
.result #humanSkillNotice{margin-top:6px}
.result #resultQuip:empty{display:none}
.result #resultQuip:not(:empty){margin-top:6px}
.result .win-dancer{position:absolute;left:-88px;right:auto;top:0;width:80px;height:100px;margin:0;object-fit:contain;align-self:start}
.result.black-win .win-dancer{left:auto;right:-88px}
.human-win-image img{width:100%;height:100%;object-fit:contain;display:block;border-radius:8px;background:white}
.human-win-image.dancing img{animation:humanVictoryJig .4s ease-in-out 5;transform-origin:center bottom;filter:drop-shadow(0 0 5px #25aaf188)}
@keyframes humanVictoryJig{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,-5px) rotate(-6deg)}50%{transform:translate(0,-8px) rotate(0)}75%{transform:translate(4px,-5px) rotate(6deg)}}
@media(max-width:600px){.result,.result.black-win,.result:has(#humanSkillNotice:not([hidden])){padding-top:5px}.result-copy{max-width:calc(100% - 96px)}.result .win-dancer{width:42px;height:62px;left:-47px}.result.black-win .win-dancer{right:-47px;left:auto}.result #humanSkillNotice{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.human-win-image.dancing img{animation:none;filter:none}}
#trainingPanel #train,#trainingPanel #stop{width:fit-content;max-width:100%;margin-inline:auto;justify-content:center;text-align:center}
#trainingPanel #stop,#mobileTrainingStop{background:#e5f3ca;border-color:#c8d9ab}
#trainingPanel #stop:hover,#mobileTrainingStop:hover{background:#d6eaae}
#mobileTrainingStop{text-align:center;justify-content:center}

#formatsPanel #unlockGame{width:fit-content;max-width:100%;margin-inline:auto;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2px}

#adminDialog{width:min(680px,calc(100vw - 24px));max-height:85dvh;overflow:auto}#adminSummary{font-size:18px;font-weight:700}.admin-table-scroll{overflow:auto;max-height:50dvh}#adminCounters td:first-child{overflow-wrap:anywhere}

#welcomeDialog{background:#fff;border:0;border-radius:20px;max-width:760px;width:min(760px,calc(100vw - 32px));padding:0;max-height:85dvh;overflow:auto}#welcomeDialog::backdrop{background:#142d3370;backdrop-filter:blur(6px)}#welcomeDismiss{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:24px;background:white;border:0;color:#193238}#welcomeDismiss img{display:block;width:100%;max-width:100%;height:auto;border-radius:12px}#welcomeTitle{font-size:28px}#welcomeDismiss .welcome-credits{font-size:24px;font-weight:800;line-height:1.35;color:#126a47}

.result{overflow:hidden}.result-copy{font-size:18px;line-height:1.15;overflow-wrap:anywhere}.result #resultText,.result #humanSkillNotice,.result #humanSkillNotice.skill-decrease,.result #resultQuip{font-size:inherit;line-height:inherit}.result #humanSkillNotice,.result #resultQuip:not(:empty){margin-top:3px}
@media(max-width:600px){.result-copy{font-size:14px;line-height:1.1}}
#forgotPassword,.recovery-link{display:block;margin-top:.5rem}

/* Compact, prominent headings for the credits and AI panels. */
.credits-panel{padding-top:10px}
.credits-heading h2,.training .sectionheading h2{font-size:22px}
.credits-heading .credit-total strong{font-size:28px}
.credits-heading .credit-coin{width:27px;height:27px;flex-basis:27px;font-size:17px}
.training .sectionheading{justify-content:center;gap:14px}
.training .memory-stat>#memoryConfig{font-size:20px;text-align:center}
@media(min-width:1001px){main#playScreen{grid-template-columns:minmax(0,1fr) 320px}}
@media(min-width:741px) and (max-width:1000px){main#playScreen{grid-template-columns:minmax(0,1fr) 300px}}
#dialog .dialogactions{flex-wrap:wrap}#dialog:has(#showLargeNumbers:not([hidden])){width:min(48rem,calc(100% - 2rem));max-height:85dvh;overflow:auto}#dialogText p{font-size:1rem;line-height:1.65}
#warGamesDialog{width:min(56rem,calc(100% - 1.5rem));max-width:none;padding:0;border:0;border-radius:16px;background:#102d32;box-shadow:0 22px 90px #000c;overflow:hidden}#warGamesDialog::backdrop{background:#07171bee}#warGamesDismiss{width:100%;min-height:clamp(18rem,55dvh,34rem);border:0;border-radius:16px;background-image:linear-gradient(180deg,#06191f33,#06191f1a 34%,#06191f70 68%,#06191fcc),linear-gradient(90deg,#06191f66,#06191f0d 26%,#06191f0d 74%,#06191f66),url('./mushroom-cloud.webp');background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;font:800 clamp(2.4rem,9vw,6rem)/1.05 Manrope,sans-serif;letter-spacing:-.04em;text-transform:uppercase;text-shadow:0 3px 4px #000,0 0 18px #000,0 0 36px #000;padding:2rem;cursor:pointer;transition:filter .15s ease,transform .15s ease}#warGamesDismiss:hover{filter:brightness(1.08)}#warGamesDismiss:active{transform:scale(.995)}#warGamesDismiss:focus-visible{outline:4px solid #d8f3a0;outline-offset:-8px}@media(max-width:600px){#warGamesDialog{width:calc(100% - 1rem)}#warGamesDismiss{min-height:clamp(16rem,48dvh,26rem);padding:1.25rem}}
/* Centre identity and rating in the space between their neighbouring controls. */
header .account-nav #accountName{flex:1;max-width:none;text-align:center}
.players .player-colour .human-skill{flex:1;min-width:max-content;text-align:center;margin-left:0}

/* Give the controls and board the same breathing room as the right-hand cards. */
.game{row-gap:12px}
.gameheading,.players{margin:0}

/* Original Four In A Row board. */
.boardwrap{
 background:#183b40;
 border:0;
 box-shadow:0 9px 0 #102d32,0 16px 26px #12363b18;
}
.columns{color:#a8c1c4;text-shadow:none;margin-bottom:10px}
.cell{
 border:1px solid #507076;
 background:#2b5055;
 box-shadow:none;
}
.cell:hover:not(:disabled){background:#497177}
.cell:disabled:hover:not(.winning),.cell.last:not(.winning):hover{background:#2b5055}
.cell.winning{background:#9abc64;border-color:#e5ffad;box-shadow:inset 0 2px 6px #45651f88,0 0 0 1px #d9ff99}
.boardwrap.gravity-on:before,.boardwrap.gravity-on:after{background:#183b40}
@media(max-width:740px){.game{row-gap:8px}}

/* Keep the active-turn information prominent and uncluttered. */
#status,#moveCount{font-size:22px;color:#142d32;font-weight:700;line-height:1.25}
#moveCount{padding-top:0}
.statusline p{display:none}

/* Centre confirmation copy and actions, while leaving the large-number guide unchanged. */
#dialog:has(#showLargeNumbers[hidden]) #dialogTitle,
#dialog:has(#showLargeNumbers[hidden]) #dialogText{text-align:center}
#dialog:has(#showLargeNumbers[hidden]) .dialogactions{justify-content:center;margin-top:20px}
#dialog:has(#showLargeNumbers[hidden]) .dialogactions button{justify-content:center;text-align:center}

/* Result messages must remain readable even when several result lines are present. */
.result-copy{font-size:22px;line-height:1.2}
@media(max-width:600px){#status,#moveCount{font-size:18px}.result-copy{font-size:18px}}

/* One consistent action palette across the game. */
:root{--action-green:#4cae38;--action-green-dark:#398a29;--button-pale:#c3df91;--button-pale-hover:#b3d477;--button-border:#94b967;--logout-bg:#efb6b6;--logout-hover:#e99f9f;--logout-border:#d77f7f}
button:not([data-format-key]):not(.cell):not(#gameButton):not(#playOnline):not(#mobilePlayOnline):not(#logoutAccount):not(#warGamesDismiss):not(#welcomeDismiss):not(#aiLevelDismiss):not(#scoresClose):not(#leagueBack){background:var(--button-pale);border-color:var(--button-border);color:#193238}
button:not([data-format-key]):not(.cell):not(#gameButton):not(#playOnline):not(#mobilePlayOnline):not(#logoutAccount):not(#warGamesDismiss):not(#welcomeDismiss):not(#aiLevelDismiss):not(#scoresClose):not(#leagueBack):hover{background:var(--button-pale-hover)}
#gameButton,#playOnline,#mobilePlayOnline{background:var(--action-green);border-color:var(--action-green-dark);color:#fff;justify-content:center;text-align:center;animation:startPulse 2s ease-in-out infinite}
#gameButton:hover,#playOnline:hover,#mobilePlayOnline:hover{background:#429d31}
#gameButton:disabled,#playOnline:disabled,#mobilePlayOnline:disabled{animation:none}
#logoutAccount{background:var(--logout-bg);border-color:var(--logout-border);color:#762d2d}
#logoutAccount:hover{background:var(--logout-hover)}
#trainingPanel #stop,#mobileTrainingStop{background:var(--button-pale);border-color:var(--button-border)}
#trainingPanel #stop:hover,#mobileTrainingStop:hover{background:var(--button-pale-hover)}

/* Refine board controls and the AI-versus-AI in-game status. */
#ruleEditor .gravity{justify-content:center;gap:12px}
#ruleEditor .gravity strong{font-size:16px}
.columns{display:none}
.boardwrap.gravity-on:before,.boardwrap.gravity-on:after{width:40px}
.boardwrap.gravity-on:before{left:-45px}
.boardwrap.gravity-on:after{right:-45px}
.statusline.ai-versus-ai{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) auto;align-items:center;gap:16px}
.ai-versus-ai-status{display:block;width:100%;max-height:120px;object-fit:cover;border-radius:9px}
@media(max-width:600px){.statusline.ai-versus-ai{grid-template-columns:110px minmax(0,1fr) auto;gap:8px}.ai-versus-ai-status{max-height:72px}}

/* Keep the online search choices compact and the remaining guidance prominent. */
.online-games{width:min(100%,760px);margin-inline:auto}
.online-games th:first-child,.online-games td:first-child{width:34%}
.online-games th:nth-child(2),.online-games td:nth-child(2){width:26%}
.online-games th:nth-child(3),.online-games td:nth-child(3){width:22%}
.online-games th:nth-child(4),.online-games td:nth-child(4){width:18%}
#onlineSearchStatus:empty{display:none}
.online-first-seek{width:min(100%,760px);margin:18px auto 0;font-size:18px;font-weight:700;text-align:center}
@media(max-width:550px){.online-games{width:100%}.online-games th:first-child,.online-games td:first-child{width:34%}.online-first-seek{font-size:17px}}


#gravity{width:7rem;min-width:7rem}.boardwrap.gravity-left:before,.boardwrap.gravity-left:after,.boardwrap.gravity-right:before,.boardwrap.gravity-right:after{left:20%;right:auto;top:auto;width:60%;height:30px;transform:none;clip-path:polygon(0 50%,14% 0,14% 36%,100% 36%,100% 64%,14% 64%,14% 100%)}.boardwrap.gravity-left:before,.boardwrap.gravity-right:before{top:-38px}.boardwrap.gravity-left:after,.boardwrap.gravity-right:after{bottom:-38px}.boardwrap.gravity-right:before,.boardwrap.gravity-right:after{transform:rotate(180deg)}.cell.landing-preview{outline:3px solid #daff91;outline-offset:-3px}@keyframes drop{from{transform:translate(var(--fall-x,0px),var(--fall));opacity:1}to{transform:translate(0,0);opacity:1}}

/* Keep the board centred in the available screen width, independently of long format labels. */
.game{grid-template-columns:minmax(0,1fr)}
.boardstage{width:100%;max-width:100%;justify-content:center}
.boardstage .boardwrap{flex:0 0 auto;margin-left:auto;margin-right:auto}
@media(max-width:600px){.gameheading .playing-sentence #formatPickerLabel{overflow:hidden}.gameheading .playing-sentence #formatPicker{width:100%!important;max-width:100%;text-overflow:ellipsis}.gameheading .playing-sentence #configBadge{min-width:0;overflow:hidden;text-overflow:ellipsis}}

.rank-thumbnail{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none}.rank-cell{min-width:100px}.rank-cell img{display:block;margin:0 auto 5px}.rank-cell span{display:block;text-align:center;font-weight:700}#promotionDialog{padding:0;border:2px solid var(--line,#ced8da);border-radius:20px;width:min(620px,92vw);max-height:90dvh;overflow:auto}#promotionDialog::backdrop{background:#102326c9}#promotionDismiss{display:block;position:relative;width:100%;padding:0;border:0;background:#193338;color:white;border-radius:0;cursor:pointer}#promotionImage{display:block;width:100%;max-height:calc(90dvh - 160px);object-fit:contain}#promotionTitle{display:block;position:static;padding:18px 22px 10px;background:#193338;font-size:clamp(20px,4vw,28px);line-height:1.3;text-align:center;text-shadow:none}#promotionDismiss>span{display:block;padding:10px;text-align:center}#promotionDismiss:focus-visible{outline:4px solid #b9d88d;outline-offset:-5px}

.player-colour .player-rank-image{order:3;width:46px;height:46px;object-fit:contain;background:white;border-radius:7px;flex:0 0 auto}
@media(max-width:600px){.player-colour .player-rank-image{width:32px;height:32px}}

.player-rank-image,.player-ai-image,#humanRankWinImage,#aiWinImage{cursor:pointer}
.player-rank-image:focus-visible,.player-ai-image:focus-visible,#humanRankWinImage:focus-visible,#aiWinImage:focus-visible{outline:3px solid #74a945;outline-offset:3px}
#portraitDialog{padding:0;border:2px solid #ced8da;border-radius:18px;width:min(740px,94vw);max-height:92dvh;overflow:auto}#portraitDialog::backdrop{background:#102326c9}#portraitDismiss{display:block;width:100%;padding:0;border:0;border-radius:0;background:#193338;color:white;cursor:pointer}#portraitLargeImage{display:block;width:100%;max-height:82dvh;object-fit:contain;background:#fff}#portraitDismiss span{display:block;padding:12px;text-align:center}#portraitDismiss:focus-visible{outline:3px solid #b9d88d;outline-offset:-4px}

#portraitCaption{font-size:24px;font-weight:700}.rank-thumbnail{cursor:pointer}#portraitLargeImage[hidden],#portraitCaption[hidden]{display:none!important}

.statusline.training-status{display:flex;justify-content:center;align-items:center;text-align:center;gap:16px}.training-status .ai-versus-ai-status{width:120px;height:90px;max-height:90px;object-fit:contain}.training-status #moveCount{display:none}.result.training-complete,.result.training-complete.black-win{align-items:center;justify-content:center;gap:16px}.result.training-complete .result-copy{width:auto;max-width:calc(100% - 140px);margin:0}.result.training-complete #trainingResultImage{width:120px;height:90px;object-fit:contain;border-radius:9px;flex:none}#scoresClose{margin-left:auto;flex:none;white-space:nowrap}.ratings-heading h2{margin:0}.ratings-heading{margin-bottom:16px}#ratingsAIImage{width:60px;height:60px}@media(max-width:600px){.ratings-heading{gap:8px;flex-wrap:wrap}#scoresClose{font-size:14px;padding:8px 10px}.ratings-heading h2{font-size:22px}.training-status .ai-versus-ai-status,.result.training-complete #trainingResultImage{width:90px;height:72px}.result.training-complete .result-copy{max-width:calc(100% - 110px)}}

#scoresDialog th{text-align:center}#scoresDialog td:nth-child(n+2){text-align:center}

#warGamesDismiss:disabled{opacity:1;cursor:wait}

.gameheading{justify-content:space-between;gap:24px}.gameheading .playing-sentence{justify-content:flex-start;flex:1 1 auto;min-width:0;max-width:100%}.gameheading #formatPickerLabel{min-width:0;max-width:100%;flex:1}.gameheading #formatPickerLabel:before{content:none}.gameheading #formatPickerButton{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 0;border:0;background:transparent;font:inherit;font-weight:800;text-align:left}.gameheading #formatPickerText{min-width:0;overflow:hidden;text-overflow:ellipsis}.gameheading .format-chevron{flex:none;font-size:22px;margin-right:8px}#formatChoiceDialog{width:min(720px,94vw);max-width:720px;max-height:88dvh;padding:24px;border-radius:16px;overflow:hidden}#formatChoiceDialog::backdrop{background:#102326aa}.format-choice-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.format-choice-heading h2{margin:0;font-size:26px}.format-choice-heading button{flex:none}.format-choice-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-height:62dvh;overflow:auto;padding:4px 8px 8px 4px;overscroll-behavior:contain}.format-choice{min-height:76px;padding:16px;text-align:center;line-height:1.4;overflow-wrap:anywhere;background:#e5f3ca;border:2px solid #b7c994;border-radius:12px;font-size:18px}.format-choice.selected{border-color:#386620;background:#cce7aa;box-shadow:inset 0 0 0 1px #386620}@media(max-width:600px){.gameheading{gap:18px}.gameheading #formatPickerButton{gap:8px}.gameheading .format-chevron{margin-right:0}#formatChoiceDialog{padding:16px}.format-choice-heading{gap:10px;align-items:flex-start}.format-choice-heading h2{font-size:22px}.format-choice-heading button{font-size:14px;padding:8px}.format-choice-buttons{grid-template-columns:1fr;gap:14px}.format-choice{min-height:64px;font-size:17px}}
#formatChoiceDialog[open]{display:flex;flex-direction:column}.format-choice-heading{flex:none}.format-choice-buttons{min-height:0;flex:1 1 auto}
.rotate-gravity-icon{display:inline-block;width:1.32em;height:1.32em;margin-left:.32em;vertical-align:-.28em;object-fit:contain;flex:none}.gameheading #formatPickerText{display:inline-flex;align-items:center}.format-choice .rotate-gravity-icon{width:1.45em;height:1.45em;margin-left:.4em;vertical-align:middle}
.gravity .rotate-gravity-icon{width:1.55em;height:1.55em;margin-left:.45em;vertical-align:middle}
#gravityPickerButton{display:inline-flex;align-items:center;justify-content:center;min-width:7rem;padding:7px 12px;background:#f7faf8;border:1px solid #c9d5d7;color:var(--ink);box-shadow:none}#gravityPickerButton .rotate-gravity-icon{width:1.45em;height:1.45em}.gravity-choice-dialog{width:min(360px,88vw)}.gravity-choice-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.gravity-choice-buttons{display:grid;gap:10px;margin-top:14px}.gravity-choice-buttons button{display:flex;align-items:center;justify-content:center;min-height:52px;font-size:18px}.gravity-choice-buttons button[aria-pressed="true"]{outline:3px solid #477f52}.gravity-choice-buttons .rotate-gravity-icon{width:1.55em;height:1.55em;margin-left:.5em}

/* Pale stone-grid treatment: clearer separation and a subtle raised-square bevel. */
.board{gap:6px;padding:4px;border-radius:8px;background:#a7bbb3}
.cell{
 background:linear-gradient(135deg,#587d77 0%,#4b706b 55%,#426762 100%);
 border-top:2px solid #365b58;
 border-right:2px solid #365b58;
 border-bottom:1px solid #829a92;
 border-left:1px solid #829a92;
 box-shadow:inset 1px -1px 2px #d3e0da24;
}
.cell:hover:not(:disabled){background:linear-gradient(135deg,#668b84,#527772)}
.cell:disabled:hover:not(.winning),.cell.last:not(.winning):hover{background:linear-gradient(135deg,#587d77 0%,#4b706b 55%,#426762 100%)}
@media(max-width:600px){.board.three-by-three{gap:9px;padding:6px}}
/* Matching format/local/online boxes share one row above the board. */
.gameheading{display:grid;grid-template-columns:minmax(0,1.18fr) repeat(2,minmax(0,1fr));grid-template-rows:1fr;gap:12px;height:72px;min-height:72px;align-items:center;align-content:center}
.gameheading .playing-sentence{width:100%;min-width:0;justify-content:center;font-size:22px;text-align:center}
.gameheading .playing-sentence #formatPickerLabel{flex:1;width:100%;max-width:100%;overflow:visible}
.gameheading #formatPickerButton,.gameheading #configBadge{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:54px;min-height:54px;padding:6px 10px;border:1px solid var(--button-border);border-radius:7px;background:var(--button-pale);font-size:22px;font-weight:800;line-height:1.2;text-align:center;white-space:normal}
.gameheading #formatPickerText{overflow:visible;text-overflow:clip;overflow-wrap:anywhere;min-width:0}
.gameheading .format-chevron{margin:0;font-size:18px}
.gameheading #setup{width:100%;margin:0;min-width:0}
.gameheading #gameButton,.gameheading #playOnline{width:100%;height:54px;min-height:54px;margin:0;font-size:22px;padding:6px 10px;line-height:1.2;white-space:normal;animation:none}
.gameheading #onlinePanel{display:flex;align-items:center;justify-content:center;width:100%;height:54px;min-height:54px;margin:0;padding:0;background:transparent;border:0;overflow:visible}
.gameheading #onlineStatus:not(:empty){position:absolute;top:54px;left:0;right:0;font-size:14px;z-index:1}
.game{grid-template-rows:72px 76px minmax(0,1fr) 156px}
#mobilePlayOnline{display:none!important}
@media(max-width:740px){.gameheading{gap:8px}.gameheading .playing-sentence{font-size:18px}.gameheading #formatPickerButton,.gameheading #configBadge,.gameheading #gameButton,.gameheading #playOnline{font-size:18px}.gameheading #setup{width:100%}}
@media(min-width:741px) and (max-width:1100px){.gameheading #gameButton{height:66px;min-height:66px}}
@media(max-width:600px){
 .gameheading{height:62px;min-height:62px;gap:6px}
 .gameheading .playing-sentence #configBadge,.gameheading #formatPickerButton,.gameheading #gameButton,.gameheading #playOnline{font-size:clamp(14px,3.8vw,18px);height:54px;min-height:54px;padding:5px}
 .gameheading .playing-sentence #configBadge{overflow:visible;text-overflow:clip}
 .gameheading #setup,.gameheading #gameButton{width:100%}
 .game{grid-template-rows:62px 88px minmax(0,1fr) 88px}
 main#playScreen{grid-template-rows:minmax(0,1fr) 48px}
 #mobileControls{grid-row:2}
 .mobile-training .game{grid-template-rows:62px 88px minmax(0,1fr) 64px}
}
@media(max-width:600px) and (max-height:550px){.game{grid-template-rows:62px 44px minmax(0,1fr) 56px}}
.online-turn-clock{display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;margin:0 0 4px}
.online-turn-dial{--turn-angle:0deg;--turn-colour:#3c9b38;position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--turn-colour) var(--turn-angle),#d5dfe0 0);color:#193238}
.online-turn-dial:before{content:'';position:absolute;inset:6px;border-radius:50%;background:#eef2f2}
.online-turn-dial>span{position:relative;font-size:20px;font-weight:800;line-height:1}
.online-turn-dial[data-phase=amber]{--turn-colour:#db950e}.online-turn-dial[data-phase=red]{--turn-colour:#d63632}
.online-turn-copy{text-align:left;font-size:16px;font-weight:700;line-height:1.25}.online-turn-copy #moveCountdown{margin:3px 0 0;font-size:16px;text-align:left}
.board-feedback:has(#onlineTurnClock:not([hidden])) #gameStatus{justify-content:center;text-align:center;position:relative}
.board-feedback:has(#onlineTurnClock:not([hidden])) #moveCount{position:absolute;right:0;top:0}

.result .rematch-button{flex:1 0 100%;width:100%;min-height:52px;margin-top:4px;background:#63ad47;border:2px solid #3f7d2d;color:#fff;font-size:20px;font-weight:800;box-shadow:0 0 0 0 #63ad4770;animation:rematch-pulse 1.35s ease-in-out infinite}
.result .rematch-button:hover{background:#569d3d}.result .rematch-button:disabled{opacity:1;background:#74a966;cursor:wait}
@keyframes rematch-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #63ad4755}50%{transform:scale(1.025);box-shadow:0 0 0 8px #63ad4700}}

/* Keep the game dropdown affordance clear and aligned to the right edge. */
.gameheading #formatPickerButton{position:relative;padding-left:32px;padding-right:32px}
.gameheading #formatPickerButton .format-chevron{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:0;height:0;margin:0;font-size:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid currentColor}

.ai-level-thumbnail{width:44px;height:44px;object-fit:cover;vertical-align:middle;border-radius:7px;cursor:pointer}

#grandmasterSecretDialog{width:min(620px,94vw);padding:0;border:0;border-radius:16px;max-height:92dvh;overflow:auto}#grandmasterSecretDialog::backdrop{background:#102326bb;backdrop-filter:blur(5px)}#grandmasterSecretDismiss{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:20px;border:0;background:#fff}#grandmasterSecretImage{display:block;width:100%;max-height:65dvh;object-fit:contain;border-radius:10px}#grandmasterSecretQuestion{font-size:clamp(22px,4vw,30px);line-height:1.25}#grandmasterSecretDismiss>span{font-size:14px;color:#60777a}

.admin-logins{width:100%;table-layout:fixed}.admin-logins th,.admin-logins td{padding:10px 6px;text-align:left;font-size:14px;overflow-wrap:anywhere}.admin-logins th:first-child{width:28%}

/* Group the turn message and move count around the centre of the panel. */
.board-feedback .statusline:not(.training-status):not(.ai-versus-ai){justify-content:center;align-items:center;column-gap:clamp(28px,8vw,96px)}
.board-feedback:has(#onlineTurnClock:not([hidden])) #moveCount{right:clamp(16px,10%,72px)}

/* Emphasise the player whose turn is next, without moving the board layout. */
.players .player{position:relative;transform:scale(1);outline:3px solid transparent;outline-offset:-1px;transition:transform 160ms ease,outline-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}
.players .player.active{z-index:1;transform:scale(1.025);outline-color:#20484d;background:#fff;box-shadow:0 3px 0 #20484d,0 4px 10px #20484d26}
.players .player .player-rank-image,.players .player .player-ai-image{transform:scale(1);transition:transform 160ms ease}
.players .player.active .player-rank-image,.players .player.active .player-ai-image{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.players .player,.players .player .player-rank-image,.players .player .player-ai-image{transition:none}}

/* Keep game choices and board settings within one simple panel. */
#ruleEditor{border:0;border-radius:0;padding:0;margin:12px 0}

/* A faint magician's lair stays behind every screen and panel. */
body{isolation:isolate;background:transparent}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#eef2f2b8,#eef2f2b8),url('./magicians-lair.webp') center center/cover no-repeat}
.panel{background:#ffffffed}
.mobile-controls-open main#playScreen>aside{background:#eef2f2e8}

/* Centre victory copy vertically and give the player's portrait more room. */
.board-feedback #result:not(.training-complete){align-items:center}
#result:has(#winDancer:not([hidden])) .result-copy{max-width:calc(100% - 208px)}
#result .human-win-image{top:50%;transform:translateY(-50%);width:92px;height:112px;left:-104px;right:auto}
#result .ai-win-image{top:50%;transform:translateY(-50%)}
#result.black-win .human-win-image{left:auto;right:-104px}
@media(max-width:600px){
 #result:has(#winDancer:not([hidden])) .result-copy{max-width:calc(100% - 112px)}
 #result .human-win-image{width:48px;height:64px;left:-56px}
 #result.black-win .human-win-image{left:auto;right:-56px}
}

/* Small desktop windows must retain usable board space rather than clip it. */
@media(min-width:601px) and (max-width:1000px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 body{height:auto;min-height:100dvh}
 main#playScreen{flex:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;overflow:visible;align-content:start}
 main#playScreen>.game{height:max(600px,calc(100dvh - 150px));grid-template-rows:72px 76px minmax(240px,1fr) 156px}
 main#playScreen>aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto;overflow:visible;align-items:start}
 .gameheading #gameButton{height:54px;min-height:54px}
}
@media(min-width:1001px) and (max-height:750px){
 html,body{overflow-y:auto}
 main#playScreen{min-height:608px;overflow:visible}
 main#playScreen>.game{grid-template-rows:72px 76px minmax(240px,1fr) 156px}
}

@media(max-width:600px) and (max-height:550px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 body{min-height:100dvh}
 main#playScreen{flex:none;min-height:480px}
 main#playScreen>.game{grid-template-rows:62px 44px minmax(180px,1fr) 56px}
}

/* Let desktop navigation use the remaining header width on the first row. */
@media(min-width:1101px){
 header{flex-wrap:nowrap}
 header .brand{flex:none}
 header .account-nav{width:auto;flex:1 1 0;min-width:0}
}

/* Keep the grid and its frame in the same fitted geometry during window resizing. */
.board{grid-template-columns:repeat(var(--x),minmax(0,1fr))}
.board>.cell{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:auto}

/* Paired artwork meets at the centre before revealing a new game. */
.game-intro{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(#100c09b8,#100c09b8),url('./magicians-lair.webp') center/cover no-repeat;outline:none}
.game-intro-stage{position:relative;flex:none;width:min(100vw,177.777778dvh);aspect-ratio:16/9}
.game-intro-half{position:absolute;top:0;width:50%;height:100%;overflow:hidden;transition:transform 1.6s cubic-bezier(.22,.61,.36,1);will-change:transform}
.intro-left{left:0;transform:translateX(-100vw)}
.intro-right{right:0;transform:translateX(100vw)}
.intro-enter .game-intro-half{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.game-intro-half{transition:none}}

/* Both moving halves crop the very same complete image at its midpoint. */
.game-intro-art{position:absolute;top:0;width:200%;max-width:none;height:100%;object-fit:fill}
.intro-left .game-intro-art{left:0}
.intro-right .game-intro-art{right:0}

#portraitDialog[data-training-portrait="true"]{width:min(960px,94vw);max-width:960px}

.format-choice{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow-wrap:normal}




/* Centre turn artwork and wording on the same axis as the board. */
#gameStatus{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
#gameStatus .turn-status{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;min-width:0}
#gameStatus .turn-status>div{text-align:center;min-width:0}
#gameStatus #aiVersusAIImage{margin:0;flex:none}
#gameStatus #moveCount{position:static;padding-top:0}
.board-feedback:has(#onlineTurnClock:not([hidden])) #gameStatus #moveCount{position:static}

/* Horizontal gravity arrows need space inside the board stage, above and below. */
.boardstage:has(.boardwrap.gravity-left),.boardstage:has(.boardwrap.gravity-right),.boardstage.rotating-gravity{padding-top:44px;padding-bottom:44px}
/* Tablets can scroll the controls instead of squeezing the playing board. */
@media(pointer:coarse) and (min-width:601px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 body{min-height:100dvh}
 main#playScreen{flex:none;overflow:visible;align-items:start}
 main#playScreen>.game{height:auto;grid-template-rows:72px 76px auto 156px;align-content:start}
 .game .boardstage{height:clamp(360px,calc(100dvh - 230px),850px);min-height:0;align-items:center}
 main#playScreen>aside{max-height:none;overflow:visible}
}

/* Portrait tablets keep the board directly below the players and upper arrow. */
@media(pointer:coarse) and (min-width:601px) and (orientation:portrait){
 .game .boardstage{align-items:flex-start}
}

/* Long gravity names remain inside the design panel on small screens. */
#ruleEditor .gravity{flex-wrap:wrap}#gravityPickerButton{max-width:100%;min-width:0}#gravityPickerButton span{min-width:0}

/* Give More Games a larger, evenly centred invitation to design another game. */
#formatsPanel #unlockGame{display:flex;font-size:20px;line-height:1.2;min-height:66px;padding:15px 24px;margin-block:0}
#formatsPanel:has(#unlockGame:not([hidden])){padding-block:16px}
#formatsPanel:has(#ruleEditor[hidden]):has(#unlockGame:not([hidden])){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
#formatsPanel:has(#ruleEditor[hidden]) .unlock-actions{margin-top:0}
#formatsPanel #unlockAvailability:empty,#formatsPanel #formatStatus:empty{display:none}

/* Let phone boards use their width rather than the leftover viewport height. */
@media(max-width:600px){
 html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
 body{min-height:100dvh}
 main#playScreen{flex:none;overflow:visible;grid-template-rows:auto 48px}
 main#playScreen>.game, .mobile-training main#playScreen>.game{height:auto;grid-template-rows:62px 88px auto 88px;align-content:start}
 .game .boardstage{align-items:center;overflow:visible}
 .boardwrap.gravity-on:before,.boardwrap.gravity-on:after{width:24px}
 .boardwrap.gravity-on:before{left:-28px}
 .boardwrap.gravity-on:after{right:-28px}
 .boardwrap.gravity-left:before,.boardwrap.gravity-left:after,.boardwrap.gravity-right:before,.boardwrap.gravity-right:after{left:20%;width:60%;height:30px}
}

/* Compact game labels stay beside their gravity icon. */
.gameheading #formatPickerText{white-space:nowrap;overflow-wrap:normal}
@media(max-width:600px){
 .game-in-progress main#playScreen{grid-template-rows:auto}
 .game-in-progress #mobileControls{display:none}
}

/* Player portraits can fill a board-sized area without the generic dialog cap. */
#portraitDialog{width:min(960px,96vw);max-width:960px;max-height:94dvh}
#portraitLargeImage{max-height:calc(94dvh - 104px);object-fit:contain}

.gravity-spinner{position:absolute;top:calc(100% + 12px);left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:12px;min-height:44px;font-size:1.25rem;color:#183b40}.gravity-spinner[hidden]{display:none}.gravity-spinner img{width:44px;height:44px;object-fit:contain}.boardwrap.gravity-spinning:before,.boardwrap.gravity-spinning:after{visibility:hidden}

/* Anchor gravity directly beneath the board, outside its frame. */
.boardstage:has(.gravity-spinner:not([hidden])){overflow:visible}

/* Make the guest login invitation two size steps larger. */
#guestPanel p{font-size:calc(1em + 4px);font-weight:700;line-height:1.4}

/* Seek state remains clear even after tapping or hovering. */
.online-games button[aria-pressed="false"],.online-games button[aria-pressed="false"]:hover{background:#f2bdc5;border-color:#cf8b97;color:#542630}
.online-games button[aria-pressed="true"],.online-games button[aria-pressed="true"]:hover{background:#c4df92;border-color:#96b568;color:#142d32}

/* One visible trophy per award, with room below the result copy for the silent stack. */
.reward-trophy-space{flex:1 0 100%;width:100%;margin:12px 0 4px;pointer-events:none}
.reward-trophy-space[hidden]{display:none}
.reward-trophy-layer{position:fixed;inset:0;z-index:1000;pointer-events:none}
.reward-flying-trophy{position:absolute;display:block;width:54px;height:54px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px #0003)}

#result:has(.reward-trophy-space:not([hidden])){display:flex;flex-wrap:wrap;height:auto;min-height:132px;overflow:visible}
.reward-flying-coin{border-radius:50%;border:4px solid #c98b12;background:linear-gradient(135deg,#fff0a8,#edb631 55%,#d69512);box-shadow:inset 0 0 0 4px #f5d579}
.reward-flying-coin:after{content:'';position:absolute;inset:28%;border-radius:50%;background:#f9d467}

/* Wins and draws sit directly on the lair background, with no result card. */
#result.background-result,
#result.background-result:has(.reward-trophy-space:not([hidden])){
 background:transparent;border:0;box-shadow:none;border-radius:0;display:flex;flex-wrap:wrap;
 justify-content:center;height:auto;min-height:0;padding:12px 4px;overflow:visible;
}
#result.background-result .result-copy,
#result.background-result:has(#winDancer:not([hidden])) .result-copy{
 width:100%;max-width:100%;text-align:center;color:#142d32;
 text-shadow:0 1px 3px #fff,0 0 8px #ffffffb0;
}
#result.background-result #winDancer{display:none}

/* Local play needs only the fixed format and the resign action. */
body.local-game-in-progress .gameheading{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
body.local-game-in-progress .gameheading #onlinePanel{display:none}
body.local-game-in-progress .gameheading #setup{grid-column:2}
body.local-game-in-progress .gameheading #formatPickerButton .format-chevron{display:none}
body.local-game-in-progress .gameheading #formatPickerButton{padding-left:10px;padding-right:10px}

#promotionTitle{background:var(--button-pale,#c8df93);color:#142d32;padding:18px 22px;text-align:center}

#onlineSearchScreen:not(.show-lobby-counts) .online-games th:nth-child(2),
#onlineSearchScreen:not(.show-lobby-counts) .online-games th:nth-child(3),
#onlineSearchScreen:not(.show-lobby-counts) .online-games td:nth-child(2),
#onlineSearchScreen:not(.show-lobby-counts) .online-games td:nth-child(3){display:none}

/* Align the online heading and return control to the table. */
.online-search-heading{width:min(100%,760px);margin-inline:auto;position:relative;justify-content:center;min-height:44px}
.online-search-heading h1{margin:0;text-align:center;line-height:1.25}
#onlineSearchClose{position:absolute;right:0;top:0}
.online-games th:first-child,.online-games th:last-child{font-size:17px}
.online-games td:first-child{font-size:18px}
@media(max-width:650px){.online-search-heading{display:grid;grid-template-columns:1fr;gap:12px}.online-search-heading h1{grid-row:1}#onlineSearchClose{position:static;justify-self:end;grid-row:2}}

/* Desktop gravity clearance and a compact AI victory announcement. */
@media(min-width:741px){
 .boardwrap.gravity-left:after,.boardwrap.gravity-right:after{bottom:-48px}
 .boardstage:has(.boardwrap.gravity-left),.boardstage:has(.boardwrap.gravity-right),.boardstage.rotating-gravity{padding-bottom:54px;overflow:visible}
 .board-feedback #result.background-result:has(#aiWinImage:not([hidden])){top:-14px}
 #result.background-result:has(#aiWinImage:not([hidden])) .result-copy{width:max-content;max-width:calc(100% - 220px)}
 #result.background-result #aiWinImage{width:100px;height:125px;left:-110px;right:auto;background:transparent}
 #result.background-result.black-win #aiWinImage{left:auto;right:-110px}
}

/* Preserve transparent AI artwork in thumbnails, results and expanded portraits. */
.player-ai-image,.training-ai-image,#aiWinImage{background:transparent}
#portraitDialog[data-ai-portrait="true"],#portraitDialog[data-ai-portrait="true"] #portraitDismiss,#portraitDialog[data-ai-portrait="true"] #portraitDismiss:hover,#portraitDialog[data-ai-portrait="true"] #portraitLargeImage{background:transparent}

/* Expanded AI cutouts reveal the unchanged game screen behind them. */
#portraitDialog[data-ai-portrait="true"]{background:transparent;border:0;border-radius:0;box-shadow:none;outline:none}
#portraitDialog[data-ai-portrait="true"]::backdrop{background:transparent;backdrop-filter:none}
#portraitDialog[data-ai-portrait="true"] #portraitDismiss,
#portraitDialog[data-ai-portrait="true"] #portraitDismiss:hover,
#portraitDialog[data-ai-portrait="true"] #portraitDismiss:focus-visible{background:transparent!important;border:0;box-shadow:none;outline:none}
#portraitDialog[data-ai-portrait="true"] #portraitLargeImage{background:transparent}
#portraitDialog[data-ai-portrait="true"] #portraitCaption{color:#142d32;text-shadow:0 1px 3px white,0 0 8px white}
#portraitDialog[data-ai-portrait="true"] #portraitDismiss:focus-visible #portraitCaption:not([hidden]){text-decoration:underline;text-underline-offset:4px}

.reward-mobile-coin{position:fixed;width:28px;height:28px;z-index:999;pointer-events:none}

#leagueDialog .league-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin:0 16px 16px}
#leagueTitle{grid-column:2;font-size:30px;text-align:center;margin:0;line-height:1.2}
#leagueBack{grid-column:3;justify-self:end}
#leagueFormat{text-align:center}
#leagueFormatSelect{display:block;max-width:100%;width:max-content;margin:0 auto 18px;font-size:18px;font-weight:700;padding:10px 36px 10px 14px}
#leagueFormatSelect[hidden]{display:none}
@media(max-width:600px){#leagueDialog .league-heading{grid-template-columns:1fr;margin:0 8px 14px;gap:12px}#leagueDialog #leagueTitle{grid-column:1;font-size:28px}#leagueBack{grid-column:1;justify-self:end}}

.league-trophy-total{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.league-trophy-icon{font-size:26px;line-height:1}

#leagueFormatSelect{position:relative;padding:0;width:max-content;max-width:100%}
#leagueFormatSelect summary{display:flex;align-items:center;justify-content:center;gap:12px;list-style:none;cursor:pointer;background:#c5df91;border:1px solid #a5bf70;border-radius:7px;padding:10px 14px}
#leagueFormatSelect summary::-webkit-details-marker{display:none}
#leagueFormatLabel,#leagueFormatOptions button{display:flex;align-items:center;justify-content:center;gap:8px}
#leagueFormatSelect .rotate-gravity-icon{width:24px;height:24px;flex-shrink:0}
#leagueFormatOptions{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);z-index:3;min-width:100%;width:max-content;max-width:calc(100vw - 72px);max-height: min(360px,50dvh);overflow:auto;padding:8px;background:white;border:1px solid #b3c7ca;border-radius:8px;box-shadow:0 5px 18px #142d3233}
#leagueFormatOptions button{width:100%;margin:0 0 5px;padding:10px 14px;font-size:17px;white-space:nowrap}
#leagueFormatOptions button:last-child{margin-bottom:0}
#leagueFormatOptions button[aria-pressed="true"]{outline:2px solid #395e46;outline-offset:-3px}

#trophyRoadLink{text-align:center;margin:12px 0}#trophyRoadLink a{display:inline-block;padding:8px 14px;border-radius:7px;background:#c5df91;color:#20383e;font-weight:700;text-decoration:none}
#trophyRoadCelebration{box-sizing:border-box;position:fixed;inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:12px;background:#173b33;color:#fff;overflow:hidden;text-align:center}
#trophyRoadCelebration[open]{display:flex;flex-direction:column;align-items:center}
#trophyRoadCelebration header{width:100%;display:flex;align-items:center;justify-content:center;position:relative;min-height:48px}#trophyRoadCelebration h1{margin:0;font-size:clamp(22px,4vw,36px)}
.road-credit-total{position:absolute;right:8px;font-weight:bold;font-size:clamp(16px,2.5vw,24px)}
.road-celebration-scene{position:relative;flex:none;height:min(calc(100dvh - 160px),calc((100vw - 24px)*1.5));aspect-ratio:2/3;max-width:100%;margin:8px auto}.road-celebration-scene img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.road-stop{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;background:#fff2c8;color:#473119;border:2px solid #c79636;border-radius:10px;padding:5px 8px;font-weight:bold;font-size:clamp(10px,2.6vw,18px)}.stop-start{left:20%;top:70%}.stop-current{left:71%;top:60%}.stop-next{left:28%;top:38%}.stop-future{left:67%;top:29%}
#trophyRoadCelebration footer{min-height:70px;font-size:clamp(15px,2.8vw,20px)}.road-continue{margin:8px 0;cursor:pointer}.road-flying-coin{position:fixed;font-size:32px;z-index:2;pointer-events:none}
@media(max-width:480px){#trophyRoadCelebration header{justify-content:flex-start}.road-credit-total{right:0}}

@media(min-width:741px){
 .gameheading #guestPanel{grid-column:3;align-self:center;width:100%;min-height:54px;margin:0;padding:6px 10px;display:flex;align-items:center;justify-content:center}
 .gameheading #guestPanel p{margin:0;font-size:16px;line-height:1.25;text-align:center}
 body.local-game-in-progress .gameheading #guestPanel{display:none}
}

#trophyRoadCelebration footer{box-sizing:border-box;width:100%;margin:0;padding:12px 0;display:flex;justify-content:center;align-items:center;text-align:center;letter-spacing:normal;border:0;flex:none}
#trophyRoadCelebration .road-bonus{display:block;width:100%;text-align:center}

header .account-nav #sound,header .account-nav #help{margin-left:0}
header .account-nav #leagueTable:disabled,header .account-nav #trophiesTable:disabled{background:#e0e3e3;border-color:#bdc4c4;color:#707a7c;opacity:.7;cursor:default}

@media(min-width:741px){header:has(#loginAccount:not([hidden])) .account-nav{justify-content:flex-start;margin-left:12px}header:has(#loginAccount:not([hidden])) .header-note{flex:none;margin-right:0}}

.admin-insights-section{margin-top:28px;padding-top:20px;border-top:1px solid #cedad9}
.admin-insights-section h3{font-size:22px}.admin-insights-section h4{font-size:18px;margin:24px 0 10px}
#adminExcludeUsers{display:block;box-sizing:border-box;width:100%;margin:8px 0 12px;padding:10px;border:1px solid #c8d5d4;border-radius:6px}
#adminInsights table{width:100%;border-collapse:collapse}#adminInsights th,#adminInsights td{padding:9px 12px;text-align:left;vertical-align:middle}
#adminInsights th{background:#eaf0e3}#adminInsights tbody tr:nth-child(even){background:#f4f7f6}
#adminInsights .admin-table-scroll{max-width:100%;overflow-x:auto}

.design-workshop-image{display:block;width:100%;height:auto;border-radius:10px;margin:0 0 16px;}

/* Random design has no chosen direction yet. */
.boardwrap.random-design-preview:before,.boardwrap.random-design-preview:after{display:none!important}
.design-gravity-gyroscope{display:block;width:100px;height:100px;object-fit:contain;background:transparent;margin:8px auto 16px}
.boardstage.random-design-preview{padding-top:12px;padding-bottom:12px;overflow:visible}
.gravity-spinner .gravity-gyroscope-icon{width:52px;height:52px;background:transparent}

/* Reserve room for the format and its icons on narrow phones. */
@media(max-width:600px){
 .gameheading{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,.75fr);gap:6px}
 .gameheading #formatPickerButton{padding:5px 6px;gap:5px;justify-content:center;font-size:clamp(12px,3.4vw,16px)}
 .gameheading #formatPickerText{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .gameheading #formatPickerButton .format-chevron{position:static;transform:none;flex:0 0 auto;border-left-width:5px;border-right-width:5px;border-top-width:7px}
 .gameheading #formatPickerText .rotate-gravity-icon{width:1.15em;height:1.15em;margin-left:4px}
 .gameheading #configBadge{font-size:clamp(12px,3.4vw,16px);padding:5px 6px}
 .gameheading #gameButton,.gameheading #playOnline{font-size:clamp(13px,3.6vw,16px);padding:5px 4px;min-width:0}
 .gameheading #playOnline .online-label-break{display:block}
}

/* Keep one return button in the mobile credits/training screen. */
@media(max-width:600px){
 .mobile-controls-open #mobileControls{display:none}
 .mobile-controls-open main#playScreen>aside{bottom:0}
 .mobile-controls-open #creditsPanel #buyCredits{display:block;width:max-content;max-width:100%;margin-inline:auto;padding:10px 18px;font-size:18px;line-height:1.25}
}

/* Matching mobile purchase and game-design actions. */
@media(max-width:600px){
 .mobile-controls-open #creditsPanel #buyCredits,
 .mobile-controls-open #formatsPanel #unlockGame{display:flex;align-items:center;justify-content:center;width:170px;max-width:100%;height:54px;min-height:54px;margin-inline:auto;padding:10px 16px;font-size:16px;line-height:1.2;text-align:center}
}

/* Keep mobile AI victories close to the lower gravity indicator. */
@media(max-width:600px){
 .board-feedback #result.background-result:has(#aiWinImage:not([hidden])){top:-24px;padding-top:4px}
}

/* Four-direction rotation is shown only while designing a board. */
.design-rotation-arrows{display:none;position:absolute;inset:0;pointer-events:none}
.boardwrap.design-rotate .design-rotation-arrows,.boardwrap.design-anticlockwise .design-rotation-arrows{display:block}
.boardwrap.design-rotate:before,.boardwrap.design-rotate:after,.boardwrap.design-anticlockwise:before,.boardwrap.design-anticlockwise:after{display:none}
.design-rotation-arrows i{position:absolute;display:block;background:#183b40;opacity:.3}
.design-rotation-arrows .rotation-top,.design-rotation-arrows .rotation-bottom{left:20%;width:60%;height:30px;clip-path:polygon(0 50%,14% 0,14% 36%,100% 36%,100% 64%,14% 64%,14% 100%)}
.design-rotation-arrows .rotation-top{top:-38px;transform:rotate(180deg)}
.design-rotation-arrows .rotation-bottom{bottom:-48px}
.design-rotation-arrows .rotation-left,.design-rotation-arrows .rotation-right{top:20%;height:60%;width:40px;clip-path:polygon(36% 0,64% 0,64% 86%,100% 86%,50% 100%,0 86%,36% 86%)}
.design-rotation-arrows .rotation-left{left:-45px;transform:rotate(180deg)}
.design-rotation-arrows .rotation-right{right:-45px}
.design-anticlockwise .rotation-top,.design-anticlockwise .rotation-left{transform:none}
.design-anticlockwise .rotation-bottom,.design-anticlockwise .rotation-right{transform:rotate(180deg)}
@media(max-width:600px){.design-rotation-arrows .rotation-left,.design-rotation-arrows .rotation-right{width:24px}.design-rotation-arrows .rotation-left{left:-28px}.design-rotation-arrows .rotation-right{right:-28px}}

/* Use the space above phone boards while keeping the lower arrow clear. */
@media(max-width:600px){
 .game .boardstage{align-items:flex-start}
 .game .boardstage:has(.boardwrap.gravity-left),.game .boardstage:has(.boardwrap.gravity-right),.game .boardstage.rotating-gravity{padding-top:26px;padding-bottom:54px}
 .boardwrap.gravity-left:before,.boardwrap.gravity-right:before{top:-32px}
 .boardwrap.gravity-left:after,.boardwrap.gravity-right:after{bottom:-48px}
 .design-rotation-arrows .rotation-top{top:-32px}
}

/* The mobile controls page must not reveal a previous game underneath. */
@media(max-width:600px){
 .mobile-controls-open main#playScreen>aside{background:#eef2f2}
 .mobile-controls-open:not(:has(#ruleEditor:not([hidden]))) main#playScreen{grid-template-rows:auto}
 .mobile-controls-open:not(:has(#ruleEditor:not([hidden]))) main#playScreen>.game{display:none}
 .mobile-controls-open:not(:has(#ruleEditor:not([hidden]))) main#playScreen>aside{position:relative;inset:auto;min-height:calc(100dvh - 64px);overflow:visible}
}

/* Keep the random-gravity indicator beneath the lower board arrow. */
.gravity-spinner{top:calc(100% + 60px)}
.game .boardstage:has(.gravity-spinner:not([hidden])){padding-bottom:124px;overflow:visible}

#designWorkshopOpen{display:block;width:100%;padding:0;border:0;border-radius:10px;background:transparent;margin:0 0 16px;cursor:zoom-in}
#designWorkshopOpen .design-workshop-image{margin:0}
#designWorkshopDialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#102d32}
#designWorkshopDialog::backdrop{background:#102d32}
#designWorkshopClose,#designWorkshopClose:hover{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:zoom-out}
#designWorkshopClose img{display:block;width:100%;height:100%;object-fit:contain}

.road-error{position:absolute;bottom:12px;left:12px;right:12px;margin:0;padding:10px;background:#173b33;color:white;border-radius:6px}

/* After welcome, let the signed-in navigation occupy the header. */
body:not(:has(#welcomeDialog[open]))>header:has(#accountName:not([hidden])) .brand,
body:not(:has(#welcomeDialog[open]))>header:has(#accountName:not([hidden])) .header-note{display:none}
body:not(:has(#welcomeDialog[open]))>header:has(#accountName:not([hidden])){justify-content:center}
body:not(:has(#welcomeDialog[open]))>header:has(#accountName:not([hidden])) .account-nav{width:100%;margin-inline:0;justify-content:safe center}
body:not(:has(#welcomeDialog[open]))>header:has(#accountName:not([hidden])) .account-nav #accountName{flex:none}

/* Give active local and online games the space occupied by account navigation. */
body.game-in-progress>header{display:none}

/* Live rankings written onto the single sheet of the parchment scroll. */
#scoresDialog.spellbook-dialog,#leagueDialog.spellbook-dialog{
 width:min(880px,98vw,82dvh);max-width:880px;height:min(1100px,94dvh);max-height:94dvh;
 padding:clamp(52px,8vh,88px) clamp(30px,7vw,92px) clamp(52px,8vh,88px);
 border:0;border-radius:12px;background:transparent url('./ratings-scroll.webp') center/100% 100% no-repeat;
 color:#392719;overflow:hidden;box-shadow:0 20px 65px #0007;
}
#scoresDialog.spellbook-dialog[open],#leagueDialog.spellbook-dialog[open]{display:flex;flex-direction:column}
.spellbook-dialog::backdrop{background:#101c20b3;backdrop-filter:blur(3px)}
#scoresDialog.spellbook-dialog .ratings-heading,#leagueDialog.spellbook-dialog .league-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:0 0 14px;flex:none}
.spellbook-dialog #scoresTitle,.spellbook-dialog #leagueTitle{font-family:Georgia,serif;font-size:clamp(28px,3.5vw,40px);color:#50341c;text-align:center;flex:1;margin:0}
.spellbook-dialog #scoresClose,.spellbook-dialog #leagueBack{margin:0;font-size:16px;justify-self:auto}
.spellbook-dialog #ratingsAIImage{object-fit:contain;width:72px;height:72px}
.spellbook-dialog #scoresMessage,.spellbook-dialog #leagueMessage{margin:0 0 10px;color:#50341c}
.spellbook-dialog #scoresMessage:empty,.spellbook-dialog #leagueMessage:empty{display:none}
.spellbook-dialog #trophyRoadLink{text-align:center;margin:0 0 12px}
.spellbook-dialog #trophyRoadLink a{color:#50341c;font-weight:700}
#scoresDialog.spellbook-dialog .scores-scroll,#leagueDialog.spellbook-dialog .league-scroll{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-color:#967343 #efdcad}
#scoresDialog.spellbook-dialog table,#leagueDialog.spellbook-dialog table{width:100%;color:#392719;background:transparent;font-size:20px}
#scoresDialog.spellbook-dialog th,#leagueDialog.spellbook-dialog th{position:sticky;top:0;background:#efdcad;z-index:1;font-family:Georgia,serif;color:#50341c;border-bottom:2px solid #9d794a}
#scoresDialog.spellbook-dialog td,#leagueDialog.spellbook-dialog td{border-bottom:1px solid #92704666;padding:10px 8px;background:transparent}
#leagueDialog.spellbook-dialog .league-self{background:#e5ca8170}
#scoresDialog.spellbook-dialog .ai-level-thumbnail{width:84px;height:84px;object-fit:contain;background:transparent}
#scoresDialog.spellbook-dialog .rank-thumbnail{width:84px;height:84px}
#leagueDialog.spellbook-dialog .league-trophy-icon{font-size:34px}
.spellbook-dialog #trophyRoadLink,.spellbook-dialog #scoresMessage,.spellbook-dialog #leagueMessage{font-size:18px}
@media(max-width:600px){
 #scoresDialog.spellbook-dialog,#leagueDialog.spellbook-dialog{width:99vw;height:92dvh;padding:48px 7vw 55px}
 #scoresDialog.spellbook-dialog .ratings-heading,#leagueDialog.spellbook-dialog .league-heading{gap:8px;margin-bottom:12px}
 .spellbook-dialog #scoresClose,.spellbook-dialog #leagueBack{min-height:36px;padding:6px 10px}
 #scoresDialog.spellbook-dialog table,#leagueDialog.spellbook-dialog table{font-size:14px;table-layout:auto}
 #scoresDialog.spellbook-dialog th,#leagueDialog.spellbook-dialog th{padding:8px 3px;white-space:normal}
 #scoresDialog.spellbook-dialog td,#leagueDialog.spellbook-dialog td{padding:8px 3px;overflow-wrap:anywhere}
 #scoresDialog.spellbook-dialog .rank-cell{min-width:0}
 #scoresDialog.spellbook-dialog .rank-thumbnail,#scoresDialog.spellbook-dialog .ai-level-thumbnail{width:56px;height:62px;object-fit:contain}
 .spellbook-dialog #ratingsAIImage{width:54px;height:54px}
}

/* Keep scroll content within the undecorated parchment. */
#scoresDialog.spellbook-dialog,#leagueDialog.spellbook-dialog{
 --scroll-width:min(880px,98vw,82dvh);width:var(--scroll-width);
 padding:clamp(76px,9dvh,104px) calc(var(--scroll-width) * .14) clamp(90px,11dvh,130px);
}
#scoresDialog.spellbook-dialog .ratings-heading,#leagueDialog.spellbook-dialog .league-heading{
 display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;margin-bottom:14px;
}
.spellbook-dialog #scoresTitle,.spellbook-dialog #leagueTitle{width:100%;text-align:center}
.spellbook-dialog #scoresClose,.spellbook-dialog #leagueBack{
 justify-self:end;background:transparent;border:0;box-shadow:none;color:#50341c;padding:8px 6px;margin:0;min-height:40px;
}
.spellbook-dialog #scoresClose:hover,.spellbook-dialog #leagueBack:hover{background:#b38b3920}
.spellbook-dialog #ratingsAIImage{display:none!important}
.spellbook-dialog #trophyRoadLink a{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;padding:2px 8px}
.spellbook-dialog #trophyRoadLink img{width:56px;height:44px;object-fit:cover;border-radius:4px}
#scoresDialog.spellbook-dialog table,#leagueDialog.spellbook-dialog table{table-layout:fixed;min-width:0}
#scoresDialog.spellbook-dialog th,#leagueDialog.spellbook-dialog th{white-space:normal;overflow-wrap:anywhere;padding:10px 5px}
#scoresDialog.spellbook-dialog td,#leagueDialog.spellbook-dialog td{overflow-wrap:anywhere;padding:12px 5px}
#scoresDialog.spellbook-dialog th:first-child,#scoresDialog.spellbook-dialog td:first-child,
#leagueDialog.spellbook-dialog th:first-child,#leagueDialog.spellbook-dialog td:first-child{text-align:center}
#leagueDialog.spellbook-dialog th:first-child{width:23%}
#leagueDialog.spellbook-dialog th:nth-child(2){width:44%}
#scoresDialog.spellbook-dialog .rank-cell{min-width:0}
@media(max-width:600px){
 #scoresDialog.spellbook-dialog,#leagueDialog.spellbook-dialog{--scroll-width:99vw;padding:64px calc(var(--scroll-width) * .13) 76px}
 #scoresDialog.spellbook-dialog th,#leagueDialog.spellbook-dialog th,
 #scoresDialog.spellbook-dialog td,#leagueDialog.spellbook-dialog td{padding:9px 3px}
 #scoresDialog.spellbook-dialog .rank-thumbnail,#scoresDialog.spellbook-dialog .ai-level-thumbnail{max-width:100%;height:62px}
 .spellbook-dialog #scoresTitle,.spellbook-dialog #leagueTitle{font-size:28px}
}

/* Scroll headings and return links occupy centred rows, not league grid tracks. */
#scoresDialog.spellbook-dialog #scoresTitle,#leagueDialog.spellbook-dialog #leagueTitle{grid-column:1;grid-row:1;justify-self:center;text-align:center;width:100%}
#scoresDialog.spellbook-dialog #scoresClose,#leagueDialog.spellbook-dialog #leagueBack{
 grid-column:1;grid-row:2;justify-self:center;margin:0;background:transparent;border:0;box-shadow:none;
}
#scoresDialog.spellbook-dialog #scoresClose:hover,#leagueDialog.spellbook-dialog #leagueBack:hover,
#scoresDialog.spellbook-dialog #scoresClose:focus,#leagueDialog.spellbook-dialog #leagueBack:focus{background:transparent}

/* Parchment game selector on the League Table scroll. */
#leagueDialog.spellbook-dialog #leagueFormatSelect summary,
#leagueDialog.spellbook-dialog #leagueFormatOptions{background:#efdcad;border-color:#a7834b;color:#50341c}
#leagueDialog.spellbook-dialog #leagueFormatOptions button{background:#efdcad!important;border-color:#a7834b;color:#50341c}
#leagueDialog.spellbook-dialog #leagueFormatOptions button:hover,
#leagueDialog.spellbook-dialog #leagueFormatOptions button[aria-pressed="true"]{background:#e4ca8c!important;outline-color:#967343}

/* Larger return text on all rating and leaderboard scrolls. */
#scoresDialog.spellbook-dialog #scoresClose,#leagueDialog.spellbook-dialog #leagueBack{font-size:18px}

/* Clear player cards and larger portraits and trophy emblems. */
.players .player,.players .player.active{background:transparent}
.players .player .player-rank-image,.players .player .player-ai-image{width:57.5px;height:57.5px}
.players #playerRatingLabel,.players #botRatingLabel{font-size:47.5px}
@media(max-width:740px){.players #playerRatingLabel,.players #botRatingLabel{font-size:30px}}
@media(max-width:600px){.players .player .player-rank-image,.players .player .player-ai-image{width:40px;height:40px}}

/* Portraits belong to the custom player controls and their choice menus. */
.players .player-colour>.player-rank-image,.players .player-colour>.player-ai-image{display:none!important}
.players .player-picker-trigger{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:3px 8px;min-height:58px;background:#f6f8f8!important;color:#193238}
.players .player-picker-trigger img{width:57.5px;height:57.5px;object-fit:contain;border-radius:6px;flex:none}
.players .player-picker-trigger span{font-size:18px;font-weight:700;margin:0;color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.players .player-picker-trigger .player-picker-chevron{margin-left:auto;flex:none}
.player-picker-dialog{width:min(440px,94vw);max-height:88dvh;padding:20px;background:#f7eed8;overflow:auto;text-align:center}
.player-picker-dialog h2{font-size:24px;margin:0 0 10px}
.player-picker-options{display:grid;gap:8px;margin-top:14px}
.player-picker-options .player-picker-option{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:#f6f8f8!important;font-size:20px}
.player-picker-option img{width:64px;height:64px;object-fit:contain;border-radius:6px}
.player-picker-option[aria-pressed="true"]{outline:3px solid #789948;outline-offset:-3px}
@media(max-width:600px){.players .player-picker-trigger{min-height:44px}.players .player-picker-trigger img{width:40px;height:40px}.players .player-picker-trigger span{font-size:16px}}

/* Compact transparent player choices, with colour markers first. */
.players .player{flex:0 1 auto;width:auto;border-color:transparent;box-shadow:none;justify-content:flex-start}
.players .player-colour{flex:0 1 auto}
.players .player-picker-trigger{order:2;flex:0 1 auto;width:calc(var(--name-width,12) * 1ch + 94px);max-width:100%;background:transparent!important;border-color:transparent}
.players .player-colour .piece-colour{order:0;flex:none}
.players .piece-colour .stone{width:35px;height:35px}
.players .player-score{display:none!important}
.player-picker-dialog{width:max-content;max-width:94vw;min-width:min(280px,94vw)}
.player-picker-options .player-picker-option{background:transparent!important}
.player-picker-dialog .player-picker-close{background:transparent!important;border:0;box-shadow:none}
#trophiesTable #menuTrophyTotal{display:inline-flex;align-items:center;gap:4px;max-width:none;white-space:nowrap}
#trophiesTable #menuTrophyIcon{font-size:24px;line-height:1}
#trophiesTable #menuTrophyCount{font:inherit}
@media(max-width:600px){.players .player-picker-trigger{width:calc(var(--name-width,12) * 1ch + 76px)}.players .piece-colour .stone{width:30px;height:30px}}

/* Keep the selectors within the actual board edges, without intrinsic containment collapse. */
.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;margin-inline:auto;gap:12px;align-items:center}
.players .player{container-type:normal;min-width:0;max-width:100%;width:auto;padding:0;border:0;gap:0}
.players #whiteCard{justify-self:start}
.players #blackCard{justify-self:end}
.players .player-colour{min-width:0;max-width:100%;flex:0 1 auto}
.players .player-picker-trigger{min-width:0;max-width:100%;flex:0 1 auto}
.players .player-picker-trigger span:not(.player-picker-chevron){min-width:0;flex:1 1 auto}
@media(max-width:600px){
 .players{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,42px);gap:4px}
 .players .player{width:auto;max-width:100%}
}
@media(max-width:600px) and (max-height:550px){
 .players{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:42px;gap:8px}
}

.player-picker-dialog h2{display:flex;align-items:center;justify-content:center;gap:10px}
.player-picker-dialog h2 .stone{display:inline-block;width:32px;height:32px;flex:0 0 32px}

.players{width:100%}
body:not(.player-layout-ready) .players{visibility:hidden}

/* Keep the wooden frame wholly outside the playable grid. Equal border-image
   width and outset make the inner edge meet, but never cover, the board edge. */
.board:after{--board-frame-width:clamp(7px,1.6vmin,13px);content:'';position:absolute;inset:0;box-sizing:border-box;border:var(--board-frame-width) solid transparent;border-image:url('./magician-wood-board-frame.png') 99 / var(--board-frame-width) / var(--board-frame-width) stretch;pointer-events:none;z-index:7}
.boardwrap{background:transparent;border-radius:0;box-shadow:none}

/* Compact, side-by-side player selectors on phones. */
@media(max-width:600px){
 main#playScreen>.game,.mobile-training main#playScreen>.game{grid-template-rows:62px 44px auto 88px}
 .players{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:44px;height:44px;min-height:44px;gap:6px}
 .players .player{height:44px;min-height:44px;max-width:100%}
 .players .player-colour{gap:3px!important;min-width:0;max-width:100%}
 .players .piece-colour .stone{width:24px;height:24px}
 .players .player-picker-trigger{width:auto;min-width:0;max-width:100%;gap:3px;padding:2px 3px;min-height:44px}
 .players .player-picker-trigger img{width:30px;height:34px}
 .players .player-picker-trigger span{font-size:14px;line-height:1.15;text-align:left}
 .players .player-picker-trigger span:not(.player-picker-chevron){flex:0 1 auto;white-space:normal;overflow-wrap:anywhere}
 .players .player-picker-trigger .player-picker-chevron{margin-left:0;font-size:12px}
}

/* Explain the selected format before play and give the spinner room below its arrows. */
.board-setup-hint{position:absolute;top:calc(100% + 60px);left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;color:#183b40;font-size:22px;min-height:44px}
.board-setup-hint img{width:52px;height:52px;object-fit:contain}
.game .boardstage:has(.board-setup-hint:not([hidden])){padding-bottom:124px;overflow:visible}
.gravity-spinner .gravity-gyroscope-icon{width:104px;height:104px}
.game .boardstage:has(.gravity-spinner:not([hidden])){padding-bottom:176px}

/* Keep AI play and its victory announcement below the board. */
#gameStatus.ai-versus-ai{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
#gameStatus.ai-versus-ai .turn-status{flex-direction:column;align-items:center}
#gameStatus.ai-versus-ai #aiVersusAIImage{width:220px;max-width:100%;object-fit:contain;margin-inline:auto}
.board-feedback:has(#gameStatus.ai-versus-ai) .gameactions{justify-content:center}
.board-feedback:has(#gameStatus.ai-versus-ai) #pause{margin-inline:auto}
.board-feedback #result.background-result:has(#aiWinImage:not([hidden])){top:16px;min-height:125px;padding-top:12px;padding-bottom:12px}
@media(max-width:600px){#gameStatus.ai-versus-ai #aiVersusAIImage{width:110px}.board-feedback #result.background-result:has(#aiWinImage:not([hidden])){top:16px}}

/* Match the design heading and the three main sidebar actions. */
#gameControls #unlockHeading,#gameControls #ruleEditor h3{font-size:22px}
#gameControls #creditsPanel #buyCredits,
#gameControls #trainingPanel #train,
#gameControls #formatsPanel #unlockGame{font-size:20px;line-height:1.2}

/* Centre each player control over its half of the fitted board. */
.players{column-gap:0;align-items:center}
.players #whiteCard,.players #blackCard{justify-self:center;align-self:center;align-items:center}

/* Anchor the winning AI's head below the result's top edge. */
.board-feedback #result.background-result:has(#aiWinImage:not([hidden])){top:28px}
#result.background-result #aiWinImage{top:0;transform:none}

/* Preserve the Novice portrait's transparent cutout. */
#portraitDialog[data-transparent-portrait="true"],
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss,
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss:hover,
#portraitDialog[data-transparent-portrait="true"] #portraitLargeImage{background:transparent;border:0;box-shadow:none}
#portraitDialog[data-transparent-portrait="true"] #portraitCaption{color:#142d32;text-shadow:0 1px 3px white,0 0 8px white}
img[src$="rank-novice.webp"]{background:transparent!important}

/* Keep every player cutout transparent, including hover and focus states. */
#portraitDialog[data-transparent-portrait="true"],
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss,
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss:hover,
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss:focus-visible,
#portraitDialog[data-transparent-portrait="true"] #portraitLargeImage{background:transparent!important;border:0;box-shadow:none;outline:none}
#portraitDialog[data-transparent-portrait="true"]::backdrop{background:transparent;backdrop-filter:none}
#portraitDialog[data-transparent-portrait="true"] #portraitDismiss:focus-visible #portraitCaption{text-decoration:underline;text-underline-offset:4px}
img[src*="rank-"]{background:transparent!important}

/* Keep the primary account navigation in its reading order. */
header .account-nav #logoutAccount{order:0}

/* Give the two sidebar actions identical dimensions. */
#gameControls #trainingPanel #train,
#gameControls #formatsPanel #unlockGame{display:flex;align-items:center;justify-content:center;width:170px;max-width:100%;height:auto;min-height:44px;padding:10px 16px;margin-inline:auto;box-sizing:border-box}

/* A clear login invitation and centred account dialog. */
#guestPanel{background:transparent;padding:0}
.gameheading #guestPanel{padding:0;background:transparent}
#guestLogin{width:100%;min-height:54px;font-size:16px;line-height:1.25;background:var(--button-pale);border-color:var(--button-border);text-align:center}
#authDialog{text-align:center}
#authDialog label{text-align:center}
#authDialog input{text-align:center}
#authDialog .auth-primary-actions,#authDialog .auth-recovery-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0}
#authDialog .auth-primary-actions button{flex:0 1 auto;width:auto}
#authDialog #authClose{display:block;float:none;position:static;margin:16px auto 0}
#authDialog #authCompleteClose,#authDialog #authBackToLogin{margin-inline:auto}

/* Finished results reserve their own space so they cannot cover the mobile controls. */
@media(max-width:600px){
 main#playScreen>.game:has(#result:not([hidden])){grid-template-rows:62px 44px auto auto}
 .game:has(#result:not([hidden])) .board-feedback{height:auto;min-height:88px;transform:none}
 .board-feedback #result.background-result{position:relative;top:auto!important;left:auto;right:auto;min-height:0;padding:10px 4px;margin:0}
 .board-feedback #result.background-result:has(#aiWinImage:not([hidden])){min-height:110px}
 #resultQuip:empty{display:none}
 #mobileControls{position:relative;z-index:3;touch-action:manipulation}
}

/* Google and password sign-in options, followed by one centred action per row. */
#authDialog #googleSignin{display:flex;justify-content:center;align-items:center;width:100%}
#authDialog #authAlternative{text-align:center;margin:18px 0;font-weight:600}
#authDialog #usernameField,#authDialog #passwordField{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:12px}
#authDialog #usernameField>span,#authDialog #passwordField>span{text-align:left}
#authDialog #passwordRequirements{grid-column:1/-1}
#authDialog .auth-primary-actions,#authDialog .auth-recovery-actions{flex-direction:column;align-items:center}
#authDialog #authSubmit,#authDialog #createAccount,#authDialog #forgotPassword,#authDialog #forgotUsername{min-width:170px;max-width:100%;margin:0}

/* Guest results and account invitations stay below the entire board. */
.board-feedback:has(#result.guest-result:not([hidden])){transform:none;height:auto;min-height:156px;padding-top:20px}
.board-feedback #result.guest-result{position:relative;top:auto!important;left:auto;right:auto;margin:0;padding:12px 4px}
#guestResultInvitation{flex:1 0 100%;width:100%;text-align:center;font-size:18px;line-height:1.5;margin:12px 0 0}
#guestResultInvitation .guest-result-link{display:inline;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent!important;color:#244b28;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* Enlarge Google sign-in while retaining its own artwork and click target. */
#authDialog{max-height:92dvh;overflow:auto}
#authDialog #googleSignin>div{zoom:1.5;max-width:100%}
/* Reserve room below credential fields for browser password-manager prompts. */
#authDialog #usernameField,#authDialog #passwordField{margin-bottom:84px}

/* Choose a sign-in method before showing password and recovery fields. */
#authDialog #googleSignin{margin:26px 0 22px}
#authDialog #continueEmail{display:block;margin:12px auto;min-width:220px;max-width:100%}
#authDialog #authClose{margin-top:24px}

/* Compact credentials with quiet recovery and guest links. */
#authDialog #usernameField{margin:24px 0 8px}
#authDialog #passwordField{margin:8px 0}
#authDialog .auth-primary-actions{margin:10px 0 16px}
#authDialog .auth-recovery-actions{gap:6px;margin:16px 0 0}
#authDialog #forgotPassword,#authDialog #forgotUsername,#authDialog #authClose,#authDialog #authCompleteClose{background:transparent!important;border:0;box-shadow:none;border-radius:0;min-width:0;min-height:32px;padding:4px 8px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
#authDialog #authClose{margin:12px auto 0}

/* Continue as Guest stays a plain link in every login state. */
#authDialog #authClose,#authDialog #authClose:hover,#authDialog #authClose:focus-visible{background:none!important;border:0!important;box-shadow:none!important;color:#244b28;text-decoration:underline;text-underline-offset:3px}

/* Quiet links for choosing email, signing in, or creating an account. */
#authDialog #continueEmail,#authDialog #authSubmit,#authDialog #createAccount{background:none!important;border:0!important;box-shadow:none!important;border-radius:0;color:#244b28;min-width:0;min-height:32px;padding:4px 8px;text-decoration:underline;text-underline-offset:3px}

/* Guest play has a descriptive heading and a quiet resign action below the board. */
body.guest-player .gameheading #formatPickerButton,body.guest-player .gameheading #configBadge{background:white!important;border-color:transparent;box-shadow:none}
body.guest-game-active .gameheading{grid-template-columns:minmax(0,1fr)}
body.guest-game-active .gameheading>.playing-sentence,body.guest-game-active .gameheading>#setup{display:none}
#guestGameHeading{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 16px;width:100%;min-height:54px;padding:8px 12px;background:white;color:#193238;border-radius:7px;font-size:20px;text-align:center}
#guestGameHeading span{font-size:18px}
body.guest-game-active .board-feedback{transform:none}
body.guest-game-active .gameactions{display:flex;justify-content:center;margin-top:12px}
#guestResign{background:var(--button-pale,#c8df93)!important;border:1px solid var(--button-border,#9cba70);color:#193238;font-size:20px;min-height:44px;min-width:170px;padding:10px 16px}

/* Turn prompts, resign controls and final copy share a compact area below the board. */
body.guest-game-active .board-feedback{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;align-items:center;gap:8px 18px;padding-top:0}
body.guest-game-active #gameStatus{flex:0 1 auto;margin:0}
body.guest-game-active .gameactions{flex:0 0 auto;margin:0}
#result #aiWinImage{display:none!important}
.board-feedback #result.background-result,.board-feedback #result.background-result:has(#aiWinImage:not([hidden])){position:relative;top:auto!important;left:auto;right:auto;min-height:0;padding:4px 4px 0;margin:0}
#result.background-result .result-copy,#result.background-result:has(#aiWinImage:not([hidden])) .result-copy{width:100%;max-width:100%}
.board-feedback:has(#result.guest-result:not([hidden])){padding-top:0;min-height:110px}
#guestResultInvitation{margin-top:6px}

/* Use the same magnifying cursors for all expandable portraits. */
img[role="button"][aria-haspopup="dialog"],img[role="button"][aria-haspopup="dialog"]:hover{cursor:zoom-in}
#portraitDialog #portraitDismiss,#portraitDialog #portraitDismiss:hover,#portraitDialog #portraitLargeImage,#portraitDialog #portraitCaption{cursor:zoom-out}

/* Clicking the gyroscope skips only the animation, never the chosen direction. */
#gravitySpinnerSkip,#gravitySpinnerSkip:hover{display:inline-flex;align-items:center;justify-content:center;background:transparent!important;border:0;padding:0;min-height:0;box-shadow:none;cursor:pointer}
#gravitySpinnerSkip img{display:block}