/* A circuit board, a carved seed tray, and a chess-club table: three separate game worlds. */
body[data-game$="-hex"]{--world-panel:#12343bf5;--world-text:#eff9ec;--world-muted:#b2cbd0;--world-accent:#ffc068;--world-font:'Arial Black',sans-serif;--world-radius:7px}
body[data-game$="-mancala"]{--world-panel:#4b3022f5;--world-text:#ffedcc;--world-muted:#dfc5a4;--world-accent:#ffd08a;--world-font:Georgia,serif;--world-radius:20px}
body[data-game$="-checkers"]{--world-panel:#371f2cf5;--world-text:#f9eddb;--world-muted:#d9bac6;--world-accent:#ebc182;--world-font:Georgia,serif;--world-radius:6px}
body[data-game$="-hex"] .active-game-title{color:#9bf5d8;font-family:'Arial Black',sans-serif;letter-spacing:.12em;text-shadow:2px 2px #175b59}
body[data-game$="-mancala"] .active-game-title{color:#ffe4ac;font-family:Georgia,serif;text-transform:none;font-style:italic;text-shadow:1px 2px #6b4427}
body[data-game$="-checkers"] .active-game-title{color:#f5d8a4;font-family:Georgia,serif;letter-spacing:.08em;text-shadow:2px 2px #733449}
body[data-game$="-hex"] #pDuel{background:repeating-linear-gradient(0deg,#61e4b106 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,#61e4b106 0 1px,transparent 1px 28px),radial-gradient(ellipse at 40% 20%,#1b4a52,#071e25)}
body[data-game$="-mancala"] #pDuel{background:radial-gradient(ellipse at 35% 0,#855b35,#291b15 85%)}
body[data-game$="-checkers"] #pDuel{background:repeating-linear-gradient(115deg,#ffffff03 0 1px,transparent 1px 13px),radial-gradient(ellipse at 50% 0,#653a4b,#1c1119 80%)}
body[data-game$="-hex"] .duel-shell{background:linear-gradient(135deg,#31657433,#153a40ee);border-color:#568c8f;border-radius:7px;box-shadow:inset 0 1px #b5fff922,0 24px 80px #041d20a6}
body[data-game$="-mancala"] .duel-shell{background:linear-gradient(135deg,#d2a76b19,#472d21ed);border-color:#b78d58;border-radius:20px;box-shadow:inset 0 1px #ffe4a42b,0 24px 80px #1d100db3}
body[data-game$="-checkers"] .duel-shell{background:linear-gradient(125deg,#9a5e7026,#371f2ced);border-color:#af8574;border-radius:6px;box-shadow:inset 0 1px #f4d9b72b,0 24px 80px #150c12b3}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-status{color:var(--world-accent);font-size:14px;line-height:1.5}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-main{color:var(--world-text)}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-clock{color:#b6f0dd}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-seats span{border-color:#ffffff38;color:#ffca6f}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-seats span:last-child{color:#9de4d2}
.duel-board.hex{width:min(100%,58vh,570px);aspect-ratio:1.2;display:flex;flex-direction:column;justify-content:center;gap:0;padding:6% 1%;border:0;background:transparent;box-shadow:none;overflow:visible}
.hex-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;width:70%;margin-left:calc(var(--row) * 4.8%);margin-top:-2.4%;flex:0 0 auto}
.hex-row .duel-cell{aspect-ratio:.87;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:0;border-radius:0;background:#41666a;box-shadow:none}
.hex-row .duel-cell::before{position:absolute;inset:2px;width:auto;aspect-ratio:auto;border-radius:0;clip-path:inherit;background:#244b53;box-shadow:inset 0 2px #ffffff16}
.hex-row .duel-cell[data-piece="1"]::before{background:linear-gradient(140deg,#ffe5a0,#ffbd55 70%,#b87524)}
.hex-row .duel-cell[data-piece="2"]::before{background:linear-gradient(140deg,#ceffed,#79e2c5 70%,#318f8c)}
.hex-row .duel-cell[data-legal="true"][data-piece="0"]::before{width:auto;background:#2c5960}
.hex-row .duel-cell:not(:disabled):hover::before{background:#3c7579}
.hex-row .duel-cell:focus-visible{outline:0;background:#fff3d2}
.hex-row .duel-cell:focus-visible::before{inset:5px}
.hex-row .duel-cell[data-last="true"]::after{background:transparent;width:30%;border:2px solid #fff1cf;z-index:1}
.hex-row:first-child .duel-cell,.hex-row:last-child .duel-cell{background:#ffbe62}
.hex-row .duel-cell:first-child,.hex-row .duel-cell:last-child{background:#87e7ce}
.duel-board.mancala{width:100%;aspect-ratio:2.2;grid-template-columns:.7fr 6fr .7fr;grid-template-rows:1fr 1fr;gap:9px;padding:18px 12px;background:repeating-linear-gradient(3deg,#dba66709 0 3px,#00000008 4px 5px),linear-gradient(135deg,#bc8245,#9e6534);border:3px solid #dfb276;border-radius:55px;box-shadow:inset 0 3px #fff0ba44,0 8px 0 #56341e,0 16px 28px #170e1690}
.mancala-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;min-width:0}
.mancala-row:nth-child(2){grid-column:2;grid-row:1}.mancala-row:nth-child(3){grid-column:2;grid-row:2}
.mancala-row .duel-cell,.mancala-store{border-radius:45%;background:radial-gradient(ellipse at 50% 70%,#78532b,#422517);border:1px solid #603a21;box-shadow:inset 0 5px 8px #190c1280,0 1px #e5ba7755;min-width:0}
.mancala-row .duel-cell::before,.mancala-row .duel-cell::after{display:none}
.mancala-row .duel-cell{display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:2px;padding:4px 0;min-height:54px;color:#ffdd95;font:700 15px var(--font-mono)}
.mancala-row .duel-cell[data-owner="2"]{color:#b4f0dc}
.mancala-row .duel-cell[data-legal="true"]{border-color:#ffe1a8;box-shadow:inset 0 5px 8px #190c1280,0 0 0 1px #e6bd75}
.mancala-row .duel-cell[data-last="true"]{outline:2px solid #ffebba;outline-offset:1px}
.mancala-row .duel-cell:not(:disabled):hover{background:radial-gradient(ellipse at 50% 70%,#9c6e37,#54311e)}
.mancala-seeds{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:70%;min-height:17px;align-content:end;justify-items:center}
.mancala-seeds i{display:block;width:5px;height:7px;max-width:100%;border-radius:55%;background:#f3c16b;box-shadow:inset 1px 1px #fff3cb;transform:rotate(-22deg)}
.mancala-seeds i:nth-child(3n){background:#9ae3c6;transform:rotate(35deg)}
.mancala-store{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;grid-row:1 / 3;font:500 10px var(--font-mono);color:#b4f0dc;min-width:0}
.mancala-store:last-child{grid-column:3;color:#ffdd95}.mancala-store strong{font-size:clamp(16px,2vw,24px)}
.duel-board.checkers{grid-template-columns:repeat(8,minmax(0,1fr));gap:0;padding:5px;border:6px solid #bc9767;border-radius:4px;background:#74462e;box-shadow:0 5px #4d2b1e,0 12px 30px #140b1480;width:min(100%,58vh,520px)}
.duel-board.checkers .duel-cell{aspect-ratio:1;border:0;border-radius:0;background:#eed9ae}
.duel-board.checkers .duel-cell[data-dark="true"]{background:#592839}
.duel-board.checkers .duel-cell::before{background:transparent;box-shadow:none;width:78%}
.duel-board.checkers .duel-cell[data-piece="1"]::before,.duel-board.checkers .duel-cell[data-piece="3"]::before{background:radial-gradient(circle at 35% 25%,#fff1bf,#eeb04c 45%,#a56828);border:2px solid #ad7534;box-shadow:inset 0 0 0 3px #ebbc6d,2px 3px 2px #0007}
.duel-board.checkers .duel-cell[data-piece="2"]::before,.duel-board.checkers .duel-cell[data-piece="4"]::before{background:radial-gradient(circle at 35% 25%,#fffbed,#eee2cb 45%,#a9977e);border:2px solid #b8a68c;box-shadow:inset 0 0 0 3px #f7ead2,2px 3px 2px #0007}
.duel-board.checkers .duel-cell:is([data-piece="3"],[data-piece="4"])::after{content:'♛';position:absolute;display:grid;place-items:center;width:auto;aspect-ratio:auto;color:#542e2c;background:transparent;border:0;font:bold clamp(14px,3vw,26px)/1 Georgia;z-index:1}
.duel-board.checkers .duel-cell[data-legal="true"]::before{outline:2px solid #f9e19b;outline-offset:1px}
.duel-board.checkers .duel-cell[data-selected="true"]{box-shadow:inset 0 0 0 3px #fff1c2;background:#8d4853}
.duel-board.checkers .duel-cell[data-destination="true"]::before{width:30%;background:#f3d38e88;border:2px solid #ffdf9b;box-shadow:none}
.duel-board.checkers .duel-cell:focus-visible{outline:3px solid #99f7d1;outline-offset:-3px}
.duel-board.checkers .duel-cell[data-last="true"]{box-shadow:inset 0 0 0 2px #f3d38e}
@media(max-width:760px){.duel-board.hex{width:100%;padding-block:4%;aspect-ratio:1.2}.duel-board.mancala{gap:6px;padding:14px 8px;border-radius:35px;min-height:160px}.mancala-row{gap:4px}.mancala-row .duel-cell{font-size:12px;min-height:56px}.mancala-seeds{gap:1px;width:75%}.mancala-seeds i{width:4px;height:5px}.mancala-store{font-size:8px}.duel-board.checkers{width:100%;border-width:4px;padding:3px}.duel-board.checkers .duel-cell:is([data-piece="3"],[data-piece="4"])::after{font-size:20px}}
@media(forced-colors:active){.hex-row .duel-cell{clip-path:none;border:1px solid ButtonText}.hex-row .duel-cell::before{clip-path:none}.duel-board.checkers .duel-cell[data-dark="true"]{border:1px solid CanvasText}.duel-board.checkers .duel-cell[data-piece="1"]::before,.duel-board.checkers .duel-cell[data-piece="3"]::before{background:Highlight}.mancala-seeds i{background:CanvasText}}
/* Keep intrinsic board ratios and status text inside narrow shell tracks. */
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-shell{min-width:0}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-top{min-width:0}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-status{min-width:0;flex:1;overflow-wrap:anywhere}
body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-clock{flex-shrink:0;white-space:nowrap}
body[data-game^="local-"] #duelClock{display:none}
.duel-board.mancala{min-width:0;max-width:100%;grid-template-columns:minmax(0,.7fr) minmax(0,6fr) minmax(0,.7fr)}
@media(max-width:760px){
 body:is([data-game$="-hex"],[data-game$="-mancala"],[data-game$="-checkers"]) .duel-shell{grid-template-columns:minmax(0,1fr)}
 .duel-board.mancala{aspect-ratio:auto}
 body[data-game$="-hex"] .duel-shell{padding-inline:12px}
 .duel-board.hex{padding-inline:0;max-width:100%;min-width:0}
 .hex-row{gap:1px;margin-left:calc(var(--row) * 5%)}
}