/* Sanctuary composition: a readable board, quiet stone and engraved brass. */
body{background:radial-gradient(ellipse at 5% 60%,#26352c 0,transparent 35%),radial-gradient(ellipse at 95% 15%,#344039 0,transparent 32%),linear-gradient(125deg,#111716,#252722 55%,#101615);color:#eee6d2}
main,:root main{max-width:1440px;max-height:none;height:100dvh;min-height:600px;padding:16px 22px;gap:12px;overflow:auto}
header{background:linear-gradient(90deg,#101b1c,#26302b,#101b1c);border:1px solid #87734e;border-radius:4px;min-height:54px;box-shadow:0 3px 15px #0006}header #status{text-align:center;color:#e8dfc9}header:before{content:'KALETOWO';font:18px Georgia,serif;letter-spacing:.14em;color:#d0b47d;margin-right:auto}header #menu{order:-1;margin-right:16px}header #help{margin-left:auto}
.stage{grid-template-columns:minmax(0,1fr) clamp(155px,18vw,240px);gap:22px;flex:1;min-height:0}.board-area{gap:16px;align-items:center}.board-frame{flex:1;width:auto;align-self:stretch;align-items:center;padding:12px 8px;perspective:none;min-width:0;background:linear-gradient(145deg,#5b584b,#343831 25%,#555246 85%,#242b27);border:6px ridge #716851;border-radius:5px;box-shadow:0 12px 24px #0009,inset 0 0 0 2px #b49c67}
#board{width:100%;max-height:100%;aspect-ratio:9/8;--board-tilt:0deg;transform:none;grid-template-rows:.5fr repeat(7,1fr) .5fr;gap:3px;padding:4px;transform-style:flat;background:#232922;box-shadow:0 0 0 1px #948366}
.cell,.cell:nth-child(even){aspect-ratio:auto;min-height:0;background:radial-gradient(ellipse at 25% 20%,#ffffff12,transparent 70%),linear-gradient(130deg,#9b9683,#777967);border:1px solid #bab199;border-radius:3px;box-shadow:inset 0 1px 0 #e4d7b244,inset 0 -2px 3px #24291f55}.cell:nth-child(even){background:linear-gradient(145deg,#8a8b77,#6c7365)}
.cell .card{transform:none;border-radius:4px;box-shadow:0 2px 4px #0008;overflow:hidden}.cell .card img{object-fit:contain;background:#211e18}.cell .card .placeholder{height:100%}.cell.wall,.cell.wall:nth-child(even){border:2px ridge #c4bea6;box-shadow:0 4px 5px #0009,inset 0 0 0 2px #494d41;border-radius:3px}
.cell.edge-far{border-top:3px solid #d97b6c}.cell.edge-near{border-bottom:3px solid #76bed2}.cell.goal-cell{background:radial-gradient(#94804b,#39382a);border-color:#d1b671}.cell.path,.cell.trail-blue{background:#478b8a;box-shadow:inset 0 0 0 2px #96e8dd,inset 0 0 15px #73ddc077}.cell.trail-red{background:#966b67;box-shadow:inset 0 0 0 2px #efb09d}
#captures-rail{width:94px;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:12px 6px;background:#111b18aa;border:1px solid #6d674c;border-radius:4px}.captures-tray{position:static!important;top:auto!important;height:auto!important;min-height:42%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%;overflow:visible;align-content:start}.captures-tray:before{content:'VOS PERTES';grid-column:1/-1;font:10px Georgia;letter-spacing:.1em;text-align:center;color:#bdab86;padding:0 0 8px}#captures-mine:before{content:'CAPTURES'}.capture-thumb{width:100%}.capture-thumb .card{border-width:2px;filter:saturate(.5);opacity:.8}
#inspector{background:linear-gradient(160deg,#26302a,#111b1d);border:1px solid #8d7952;outline:3px solid #242c25;box-shadow:0 9px 20px #0007;border-radius:4px;padding:16px 12px;gap:12px}#inspector:before{content:'SANCTUAIRE';font:12px Georgia;letter-spacing:.18em;text-align:center;color:#cfb785;border-bottom:1px solid #806d46;padding-bottom:12px}.inspector-card{width:72%;max-width:155px;max-height:none;flex-shrink:0}.inspector-caption{font:14px/1.5 Georgia;color:#e9dcbd}.inspector-desc{font-size:12px;line-height:1.55;color:#c5c9bb}.inspector-hint{color:#bcbba5}.inspector-actions button{background:#303c34;border-color:#9c875a}.inspector-spell-note{color:#d1c6a6}#inspector .small{font-size:10px;color:#929b8d}
.bottom-bar{width:auto;height:126px;min-height:126px;margin-left:110px;margin-right:calc(clamp(155px,18vw,240px) + 22px);background:linear-gradient(#26332c,#14201d);border:2px ridge #8f7e55;border-radius:4px;padding:8px 12px;justify-content:center;gap:20px}.bottom-bar footer{order:2;border:0;background:none;padding:0}.bottom-bar footer button{background:#263932;border-color:#9d885b;color:#eee3c6}.bottom-bar #hand{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border:0;background:none;flex:1}.bottom-bar #hand .spell-slots{display:grid;grid-template-columns:repeat(3,60px);gap:12px;height:90px;flex-shrink:0}.bottom-bar #hand .hand-slot{width:60px;height:90px;aspect-ratio:2/3;border:1px solid #a18b5c;border-radius:4px;background:#17221d}.bottom-bar #hand .empty-slot{opacity:1;background:repeating-linear-gradient(45deg,#19261f,#19261f 5px,#1c2923 5px,#1c2923 6px);border:1px dashed #6e7158}.bottom-bar #hand .empty-slot span{color:#797b5b}.bottom-bar #hand #undo-cast{font-size:10px;padding:2px;margin:2px 0;min-height:0}.bottom-bar:has([data-piece]){height:126px}.bottom-bar #hand:has([data-piece]){display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.bottom-bar #hand [data-piece]{font-size:11px;padding:5px}
@media(max-height:650px) and (min-width:700px){main,:root main{min-height:400px;padding:6px 12px;gap:6px}header{min-height:40px}header:before{font-size:13px}.stage{gap:12px;grid-template-columns:minmax(0,1fr) 155px}.board-frame{padding:3px;border-width:4px}#board{aspect-ratio:auto;height:100%}#captures-rail{width:66px}.board-area{gap:8px}.bottom-bar{margin-left:74px;margin-right:167px;height:100px;min-height:100px;padding:3px 8px}.bottom-bar #hand .spell-slots{height:75px;grid-template-columns:repeat(3,50px)}.bottom-bar #hand .hand-slot{width:50px;height:75px}.inspector-card{max-width:90px}#inspector{padding:8px;gap:6px}.inspector-desc{font-size:11px}.captures-tray:before{font-size:8px}#inspector .small{display:none}}
@media(max-width:699px){main,:root main{min-height:760px;padding:8px;gap:10px}header:before{font-size:11px;letter-spacing:.05em}.stage{grid-template-columns:minmax(0,1fr) 110px;gap:8px}.board-area{gap:4px}.board-frame{padding:2px;border-width:3px}#board{gap:1px;height:100%;aspect-ratio:auto}#captures-rail{width:36px;padding:4px 2px}.captures-tray{grid-template-columns:1fr;gap:3px}.captures-tray:before{font-size:7px;letter-spacing:0;overflow-wrap:anywhere}#inspector{padding:6px;gap:8px}.inspector-card{width:85%;max-width:80px}#inspector:before{font-size:9px}.inspector-caption,.inspector-desc{font-size:10px}#inspector .small{display:none}.bottom-bar{margin-left:40px;margin-right:0;height:120px;min-height:120px;gap:8px;padding:5px}.bottom-bar #hand .spell-slots{grid-template-columns:repeat(3,48px);height:72px;gap:6px}.bottom-bar #hand .hand-slot{width:48px;height:72px}.bottom-bar footer button{font-size:11px;padding:6px}}
.board-frame{flex:0 1 auto;width:min(100%,calc((100dvh - 245px)*1.125));margin:auto;align-self:center;aspect-ratio:9/8}.board-area{justify-content:center}#board{height:100%;aspect-ratio:9/8}.cell .uniform-stats .stat-band{left:3%;width:94%;top:auto;bottom:1%;height:24%}.cell .uniform-stats .placeholder{padding:3px 2px 25%;gap:0}.cell .placeholder strong{font-size:12px}.cell .symbol{font-size:23px}.cell.wall,.cell.wall:nth-child(even){background-size:cover;background-image:url('assets/wall-stone.svg')}
@media(max-height:650px) and (min-width:700px){.board-frame{width:min(100%,calc((100dvh - 165px)*1.125))}.cell .placeholder strong{font-size:9px}.cell .symbol{font-size:16px}}
@media(max-width:699px){.board-frame{width:100%;aspect-ratio:auto;align-self:stretch}.cell .placeholder strong{font-size:7px}.cell .symbol{font-size:14px}}
.bottom-bar #hand:has([data-piece]){display:flex}.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(6,minmax(0,60px));width:100%;justify-content:center;gap:8px}.bottom-bar #hand [data-piece]{width:100%;max-width:60px;height:90px;padding:0}.bottom-bar #hand [data-piece] .card{height:100%;width:100%}.cell.wall,.cell.wall:nth-child(even){background-image:url('assets/wall-grey.svg')}.cell.edge-far:after,.cell.edge-near:after{display:none}
@media(max-height:650px),(max-width:699px){.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(6,minmax(0,45px));gap:5px}.bottom-bar #hand [data-piece]{height:68px}}
/* High-angle view: all nine grid rows, including both goals, share one size. */
.board-frame{aspect-ratio:1;perspective:1200px;perspective-origin:50% 35%;width:min(100%,calc(100dvh - 245px));padding:10px 8px 16px}
#board{aspect-ratio:1;grid-template-rows:repeat(9,minmax(0,1fr));--board-tilt:20deg;transform:rotateX(var(--board-tilt));transform-origin:50% 50%;transform-style:flat;box-shadow:0 7px 0 #34392e,0 9px 0 #95805b,0 18px 22px #0007}
.cell .card{transform:none}
@media(max-height:650px) and (min-width:700px){.board-frame{width:min(100%,calc(100dvh - 165px));padding:5px 5px 10px}}
@media(max-width:699px){.board-frame{width:100%;aspect-ratio:1;align-self:center;padding:4px 3px 9px}#board{height:auto;aspect-ratio:1}}
/* Landscape is the playing format, including short phone viewports. */
@media(orientation:landscape){
 main,:root main{min-height:0;height:100dvh;max-height:100dvh;overflow:hidden}
 .stage{min-height:0}.board-area{min-height:0}
 .board-frame{width:min(100%,calc((100dvh - 235px)*1.25));aspect-ratio:1.25}
 #board{aspect-ratio:auto;height:100%;grid-template-rows:repeat(9,minmax(0,1fr))}
}
@media(orientation:landscape) and (max-height:650px){
 main,:root main{padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));gap:5px}
 header{min-height:34px;padding:2px 6px}header button,#help{width:32px;height:32px;min-height:32px;padding:4px}header:before{font-size:11px}#status{font-size:11px}
 .stage{grid-template-columns:minmax(0,1fr) clamp(115px,19vw,165px);gap:10px}
 .board-area{gap:6px}#captures-rail{width:54px;padding:5px 3px}.captures-tray{gap:2px}.captures-tray:before{font-size:7px;padding-bottom:3px}
 .board-frame{width:min(100%,calc((100dvh - 130px)*1.25));aspect-ratio:1.25;padding:3px 4px 8px;align-self:center}
 #board{height:100%;gap:2px;padding:2px}.cell .card{border-width:2px}.cell .placeholder strong{font-size:8px}.cell .symbol{font-size:14px}
 #inspector{padding:6px;gap:5px}#inspector:before{font-size:10px;padding-bottom:5px}.inspector-card{width:65%;max-width:78px}.inspector-caption{font-size:11px}.inspector-desc{font-size:10px;line-height:1.35}#inspector .small{display:none}
 .bottom-bar,.bottom-bar:has([data-piece]){height:78px;min-height:78px;margin-left:60px;margin-right:calc(clamp(115px,19vw,165px) + 10px);padding:3px 6px;gap:8px}
 .bottom-bar #hand .spell-slots{height:60px;grid-template-columns:repeat(3,40px);gap:8px}.bottom-bar #hand .hand-slot{width:40px;height:60px}.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(6,minmax(0,40px));gap:5px}.bottom-bar #hand [data-piece]{height:60px}
 .bottom-bar footer button{min-height:28px;font-size:10px;padding:4px 7px}.bottom-bar footer{gap:3px}.bottom-bar #hand #undo-cast{font-size:9px;line-height:1;padding:0;margin:1px 0}
}
/* Clearly horizontal playing surface and a centered card inspector. */
.board-frame{width:min(100%,calc((100dvh - 245px)*1.65));aspect-ratio:1.65}
#board{aspect-ratio:auto;height:100%}
#inspector .inspector-card{display:flex;align-items:center;justify-content:center;align-self:center;margin:0 auto;width:72%;max-width:155px;aspect-ratio:2/3}
#inspector .inspector-card>.card,#inspector .inspector-card>.spell-art{display:block;width:100%;max-width:100%;height:100%;margin:0;flex:none}
#inspector .inspector-caption{width:100%;text-align:center}
@media(orientation:landscape) and (max-height:650px){.board-frame{width:min(100%,calc((100dvh - 130px)*1.65));aspect-ratio:1.65}#inspector .inspector-card{width:65%;max-width:78px}}
@media(orientation:portrait){.board-frame{width:100%;aspect-ratio:1.65;align-self:center}}
/* Six captured pieces per side, in two rows of three. */
#captures-rail{width:126px;flex-shrink:0}.captures-tray{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(2,auto);min-height:0;gap:5px}
#captures-theirs:before{content:'PERTES ADVERSES'}#captures-mine:before{content:'VOS PERTES'}
.capture-thumb{width:100%;aspect-ratio:2/3;min-width:0}.capture-empty{border:1px dashed #716e4c66;border-radius:3px;background:#16201b66}
#inspector{position:relative;justify-content:center;padding-top:42px;padding-bottom:42px}#inspector:before{position:absolute;top:14px;left:12px;right:12px}#inspector .small{position:absolute;bottom:10px;left:12px;right:12px;margin:0}
#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}
#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-caption{position:absolute;top:calc(50% + 125px);left:0;padding:0 8px}
.bottom-bar{margin-left:142px}
@media(orientation:landscape) and (max-height:650px){#captures-rail{width:84px}.captures-tray{gap:3px}.captures-tray:before{font-size:7px}#inspector{padding:30px 6px 6px}#inspector:before{top:8px}#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-caption{top:calc(50% + 64px)}.bottom-bar{margin-left:90px}}
/* Reference canvas: 1920 × 1080. Wider displays reveal more background. */
main,:root main{width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);min-height:0;max-width:1920px;max-height:1080px;margin:auto;box-sizing:border-box;container-type:inline-size;padding:1.1cqw;overflow:hidden}
body{min-height:100dvh;align-items:center}
.stage{grid-template-columns:minmax(0,1fr) 170px;gap:18px;align-items:center}
.board-area{height:100%;align-items:center;gap:14px}
.board-frame{width:min(calc(100% - 140px),calc((min(100dvh,56.25vw) - 235px)*1.65));flex:1;max-height:100%;aspect-ratio:1.65;margin:0;align-self:center}
#captures-rail{width:126px;height:auto;max-height:100%;align-self:stretch;background:none;border:0;padding:8px 0;justify-content:space-between}
.captures-tray{padding:7px;background:#14201bd9;border:1px solid #71684e;border-radius:4px}
#inspector{width:170px;height:auto;max-height:100%;padding:7px;align-self:center;overflow-y:auto;gap:8px;justify-content:flex-start}
#inspector:before,#inspector .small{display:none}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{position:static;transform:none;width:100%;max-width:155px;aspect-ratio:2/3;margin:0 auto;flex:none}
#inspector .inspector-caption,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-caption{position:static;padding:0;margin:0;width:100%;font-size:12px}
.inspector-hint{margin:8px 0}
.bottom-bar{margin-left:140px;margin-right:188px}
@media(max-height:650px),(max-width:1000px){
 main,:root main{padding:5px 8px;gap:5px}
 header{min-height:34px;padding:2px 6px}header:before{font-size:11px}header button,#help{height:30px;min-height:30px;width:30px;padding:3px}#status{font-size:11px}
 .stage{grid-template-columns:minmax(0,1fr) 100px;gap:10px}.board-area{gap:8px}
 .board-frame{width:auto;aspect-ratio:1.65;max-height:100%;padding:3px 4px 8px}
 #captures-rail{width:84px;padding:3px 0}.captures-tray{padding:3px;gap:3px}.captures-tray:before{font-size:7px;padding-bottom:3px}
 #inspector{width:100px;padding:5px;gap:5px}#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:100%;max-width:88px}#inspector .inspector-caption{font-size:10px}.inspector-desc{font-size:10px}
 .bottom-bar,.bottom-bar:has([data-piece]){height:76px;min-height:76px;margin-left:92px;margin-right:110px;padding:3px 6px;gap:8px}
 .bottom-bar #hand .spell-slots{height:60px;grid-template-columns:repeat(3,40px);gap:8px}.bottom-bar #hand .hand-slot{width:40px;height:60px}.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(6,minmax(0,40px));gap:5px}.bottom-bar #hand [data-piece]{height:60px}.bottom-bar footer button{min-height:28px;font-size:10px;padding:4px 7px}
}
/* Give the playing grid the available space within the 16:9 composition. */
main,:root main{padding:6px;gap:6px}
header{min-height:42px;padding:3px 7px}
.stage{gap:10px;grid-template-columns:minmax(0,1fr) 158px}
.board-area{gap:8px}.board-frame{height:100%;max-height:100%;width:auto;aspect-ratio:auto;padding:3px 3px 7px;border-width:4px;align-self:stretch}
#board{height:100%;width:100%;gap:2px;padding:2px;--board-tilt:15deg}
#captures-rail{width:114px}#inspector{width:158px}
.bottom-bar,.bottom-bar:has([data-piece]){height:108px;min-height:108px;margin-left:122px;margin-right:168px;padding:4px 8px}
.cell{container-type:size}
#board .cell .badge{font:600 clamp(8px,23cqmin,16px)/1 system-ui;min-width:0;min-height:0;width:auto;height:auto;padding:5cqmin 7cqmin;right:3cqmin;top:3cqmin;border-radius:5cqmin;border-width:1px;max-width:65%;box-sizing:border-box}
#board .cell .terrain{font:600 clamp(12px,46cqmin,32px)/1 system-ui;width:58cqmin;height:58cqmin;max-width:70%;max-height:70%;display:grid;place-items:center;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);padding:2cqmin;border-radius:8cqmin}
#board .cell:has(.card) .terrain{width:30cqmin;height:30cqmin;font-size:24cqmin;left:4cqmin;bottom:4cqmin;top:auto;transform:none}
@media(max-height:650px),(max-width:1000px){main,:root main{padding:3px 5px;gap:4px}header{min-height:32px;padding:1px 5px}.stage{grid-template-columns:minmax(0,1fr) 94px;gap:7px}.board-area{gap:5px}#captures-rail{width:75px}#inspector{width:94px;padding:3px}.board-frame{padding:2px 2px 5px;border-width:3px}.bottom-bar,.bottom-bar:has([data-piece]){height:72px;min-height:72px;margin-left:80px;margin-right:101px;padding:2px 5px}}
/* Seven columns make each miniature larger; keep the two full-size goal cells. */
#board{grid-template-columns:repeat(7,minmax(0,1fr));--board-tilt:24deg}
.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(5,minmax(0,60px))}
@media(max-height:650px),(max-width:1000px){.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(5,minmax(0,40px))}}
/* Fixed 1920 × 1080 composition. Only the entire canvas scales with the screen. */
html,body{width:100%;height:100%;overflow:hidden}body{display:block}
main,:root main{position:absolute;left:50%;top:50%;width:1920px;min-width:1920px;max-width:1920px;height:1080px;min-height:1080px;max-height:1080px;margin:0;padding:10px;gap:8px;container-type:normal;transform:translate(-50%,-50%) scale(var(--game-scale,1));transform-origin:center;display:flex;flex-direction:column;overflow:hidden}
header{height:56px;min-height:56px;padding:4px 12px;flex:none}header:before{font-size:22px;letter-spacing:.12em}header button,#help{width:44px;height:44px;min-height:44px;padding:7px}#status{font-size:18px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px;flex:1;min-height:0;align-items:center}
.board-area{height:100%;min-height:0;gap:12px;align-items:center}
.board-frame{height:100%;width:auto;max-height:100%;min-height:0;flex:1;aspect-ratio:auto;padding:0 3px 5px;border-width:4px;align-self:stretch;perspective:2400px}
#board{height:100%;width:100%;aspect-ratio:auto;gap:3px;padding:2px;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));--board-tilt:24deg}
#captures-rail{width:138px;flex:none;padding:6px 0}.captures-tray{padding:6px;gap:4px;grid-template-columns:repeat(3,minmax(0,1fr))}.captures-tray:before{font-size:11px;padding-bottom:5px}
#inspector{width:200px;height:auto;padding:8px;gap:10px;align-self:center}#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{position:static;transform:none;width:100%;max-width:182px;margin:0 auto;aspect-ratio:2/3}#inspector .inspector-caption,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-caption{position:static;font-size:16px}.inspector-desc{font-size:16px;line-height:1.4}.inspector-hint{font-size:16px}.inspector-actions button{font-size:15px;padding:8px}
.bottom-bar,.bottom-bar:has([data-piece]){height:110px;min-height:110px;flex:none;margin-left:150px;margin-right:214px;padding:4px 10px;gap:14px}
.bottom-bar #hand .spell-slots{height:90px;grid-template-columns:repeat(3,60px);gap:12px}.bottom-bar #hand .hand-slot{height:90px;width:60px}.bottom-bar #hand .spell-slots:has([data-piece]){grid-template-columns:repeat(5,60px);gap:12px}.bottom-bar #hand [data-piece]{height:90px;max-width:60px;width:60px}.bottom-bar footer button{font-size:16px;min-height:36px;padding:6px 12px}.bottom-bar #hand #undo-cast{font-size:12px;line-height:1;margin:1px 0;padding:0}
.cell .placeholder strong{font-size:20px}.cell .symbol{font-size:34px}.cell .card{border-width:4px}
/* Shared miniature size: captures, spells and starting pieces. */
main{--mini-card-width:38px;--mini-card-height:57px}
.captures-tray{grid-template-columns:repeat(3,var(--mini-card-width));justify-content:center}
.capture-thumb{width:var(--mini-card-width);height:var(--mini-card-height);aspect-ratio:2/3}
.capture-thumb .card{width:100%;height:100%;margin:0}
.bottom-bar #hand .spell-slots{grid-template-columns:repeat(3,var(--mini-card-width));height:var(--mini-card-height);gap:12px;justify-content:center}
.bottom-bar #hand .hand-slot,.bottom-bar #hand [data-piece]{width:var(--mini-card-width);max-width:var(--mini-card-width);height:var(--mini-card-height);padding:0}
.bottom-bar #hand .spell-slots:has([data-piece]){display:flex;flex-wrap:nowrap;width:auto;max-width:100%;height:var(--mini-card-height);gap:12px;justify-content:center}
.bottom-bar #hand [data-piece]{flex:0 0 var(--mini-card-width)}
/* Reserve room for the near edge's perspective expansion. */
#board{width:94%;flex:none;margin-inline:auto}
#board{width:92%;}
/* Quieter header, larger shared miniatures and a six-square inspection area. */
header:before{content:none}#status{display:none}header{justify-content:space-between;background:none;border:0;box-shadow:none}header #menu{margin-right:0}header #help{margin-left:auto}
main{--mini-card-width:44px;--mini-card-height:66px}
#captures-rail{width:158px}
.stage{grid-template-columns:minmax(0,1fr) 320px}
#board{width:89%}
.bottom-bar,.bottom-bar:has([data-piece]){height:130px;min-height:130px;margin-left:170px;margin-right:334px}
#inspector{width:320px;padding:8px}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:var(--inspect-width,300px);max-width:100%;height:var(--inspect-height,300px);aspect-ratio:auto}
#inspector .inspector-card>.card,#inspector .inspector-card>.spell-art{width:100%;height:100%;object-fit:contain}
#inspector .inspector-card .card img{object-fit:contain;background:#211e18}
/* Smaller board cells, larger shared hand/capture miniatures. */
main{--mini-card-width:52px;--mini-card-height:78px}
#board{width:85%;height:94%;align-self:center}
#captures-rail{width:182px}
.bottom-bar,.bottom-bar:has([data-piece]){margin-left:194px}
/* Full-width artwork keeps its original portrait proportions. */
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:100%;max-width:100%;height:auto;aspect-ratio:2/3;flex:0 0 auto;display:block;margin:0}
#inspector .inspector-card>.card,#inspector .inspector-card>.spell-art{width:100%;max-width:100%;height:auto;aspect-ratio:2/3;display:block}
#inspector .inspector-card>.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#inspector .inspector-card .placeholder{position:absolute;inset:0}
#inspector .inspector-desc{flex:none;width:100%;margin:0;padding:10px 2px 4px;border-top:1px solid #82734b77;font:16px/1.45 system-ui;color:#ddd7c5;text-align:left}
/* Terracotta playing tiles and neutral concrete obstacles. */
#board .cell:not(.wall):not(.goal-cell){background:radial-gradient(ellipse at 25% 18%,#efbe9326,transparent 70%),linear-gradient(145deg,#b77b58,#965c40);border-color:#d19a72;box-shadow:inset 0 1px 0 #efc39d66,inset 0 -2px 3px #5b302c55}
#board .cell:nth-child(even):not(.wall):not(.goal-cell){background:linear-gradient(145deg,#ad704e,#8e533b)}
#board .cell.wall{background:linear-gradient(145deg,#d2d2cd33,#70736f22),url('assets/wall-grey.svg') center/100% 100% no-repeat #999c98;border:2px ridge #c7c9c4;box-shadow:0 4px 5px #0008,inset 0 0 0 2px #727773;border-radius:3px}
#board .cell.edge-far{border-top-color:#d97b6c}#board .cell.edge-near{border-bottom-color:#76bed2}
#board .cell.path:not(.wall),#board .cell.trail-blue:not(.wall){background:#478b8a;box-shadow:inset 0 0 0 2px #96e8dd,inset 0 0 15px #73ddc077}
#board .cell.trail-red:not(.wall){background:#966b67;box-shadow:inset 0 0 0 2px #efb09d}
/* Illustrated rainforest surrounds the fixed game composition. */
body{background:#101d15 url('assets/jungle-sanctuary.png') center/cover no-repeat fixed}
main,:root main{background:linear-gradient(90deg,#091a101a,#08170d22 50%,#091a1022)}
header{background:linear-gradient(90deg,#102217b3,transparent 40%,transparent 70%,#102217b3)}
.board-frame{background:linear-gradient(135deg,#4c5945cc,#293c29bb 45%,#677050cc);border-color:#697655;box-shadow:0 10px 25px #0009,inset 0 0 0 2px #8a946266}
#board{background:#162819cc;box-shadow:0 6px 0 #2e4029,0 8px 0 #788257,0 14px 22px #0008}
#board .cell.wall,#board .cell.wall:nth-child(even){background:#939b91 url('assets/concrete-blocks.svg') center/100% 100% no-repeat;border:1px solid #b9c1b2;border-radius:2px;padding:0;box-shadow:inset 0 0 0 1px #596653,0 3px 4px #0007}
#board .cell.wall::before,#board .cell.wall::after{content:none;display:none}
#inspector,.captures-tray,.bottom-bar{background:linear-gradient(135deg,#203b29ed,#10291bed);border-color:#8b9462;box-shadow:0 5px 16px #0007,inset 0 0 0 1px #a2ad6033}
.bottom-bar footer button,header button,#help{background:#203b29;border-color:#8a965f;color:#f0e5c9}
.bottom-bar #hand .empty-slot{background:#162b1dc9;border-color:#8a965f}.capture-empty{background:#12261999;border-color:#7e906577}
/* Fired-clay texture: granular relief, fine cracks and worn edges. */
#board .cell:not(.wall):not(.goal-cell){background:#a66b48 url('assets/terracotta-texture.svg') center/100% 100% no-repeat;border:1px solid #76583d;border-radius:3px;box-shadow:inset 1px 2px 2px #e5b48755,inset -2px -3px 3px #492b2466,0 1px 2px #07120d99}
#board .cell:nth-child(even):not(.wall):not(.goal-cell){background-image:linear-gradient(#573e2412,#482a221c),url('assets/terracotta-texture.svg');background-size:100% 100%,100% 100%;background-position:center,right bottom}
#board .cell:nth-child(3n):not(.wall):not(.goal-cell){background-size:100% 100%,113% 109%;background-position:center,65% 35%}
#board .cell.path:not(.wall),#board .cell.trail-blue:not(.wall){background-image:linear-gradient(#248b8970,#248b8970),url('assets/terracotta-texture.svg');box-shadow:inset 0 0 0 2px #96e8dd,inset 0 0 12px #73ddc066}
#board .cell.trail-red:not(.wall){background-image:linear-gradient(#a4495970,#a4495970),url('assets/terracotta-texture.svg');box-shadow:inset 0 0 0 2px #efb09d}
/* The tilted grid is the temple courtyard; its stone edge shares its perspective. */
.board-frame{background:none;border:0;box-shadow:none;outline:0;position:relative;padding:45px 0 15px;justify-content:center;align-items:center;perspective:2400px}
#board{width:770px;max-width:94%;height:100%;margin:0 auto;gap:3px;padding:12px;box-sizing:border-box;background:#343d28;border:12px ridge #72775b;border-radius:3px;box-shadow:0 7px 0 #343f28,0 10px 0 #596344,0 20px 23px #061208aa,inset 0 0 0 2px #9ba078;transform-origin:50% 50%}
#board:before{content:'';position:absolute;inset:-15px;pointer-events:none;border:3px solid #4d653b99;border-radius:4px;box-shadow:inset 0 0 16px #67884666}
#opponent-name{position:absolute;top:1px;left:50%;transform:translateX(-50%);width:560px;max-width:80%;height:38px;display:grid;place-items:center;padding:4px 20px;background:linear-gradient(90deg,transparent,#16281ce8 18%,#16281ce8 82%,transparent);border-block:1px solid #9c9e6977;color:#f0dfb7;font:20px Georgia,serif;letter-spacing:.04em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottom-bar,.bottom-bar:has([data-piece]){background:linear-gradient(90deg,#10271988,#1f3928db,#10271988);box-shadow:0 3px 12px #0005;border-color:#71805688}
/* Compact composition: keep all supporting panels close to the courtyard. */
.stage{flex:none;height:850px;width:1350px;grid-template-columns:1010px 320px;gap:20px;margin:0 auto;align-self:center}
.board-area{gap:24px;width:1010px;justify-content:flex-start}
.board-frame{flex:none;width:804px;height:100%;padding-top:42px;padding-bottom:10px}
#board{width:770px;max-width:none}
#captures-rail{width:182px}
#opponent-name{top:5px}
.bottom-bar,.bottom-bar:has([data-piece]){height:112px;min-height:112px;margin-top:0}
main,:root main{gap:5px}
/* The background belongs to the fixed 16:9 canvas, never to the viewport. */
html,body{background:#000!important}
main,:root main{background:#152017 url('assets/jungle-sanctuary.png') center/100% 100% no-repeat;isolation:isolate;overflow:hidden}
#board{gap:2px;background:#514d3b;border-color:#82775e}
#board .cell:not(.wall):not(.goal-cell),#board .cell:nth-child(even):not(.wall):not(.goal-cell),#board .cell:nth-child(3n):not(.wall):not(.goal-cell){background:#c5ab85 url('assets/limestone-tile.svg') center/100% 100% no-repeat;border:1px solid #85765c;border-radius:5px;box-shadow:inset 1px 1px 2px #f3dfb688,inset -1px -2px 2px #6f624d66,0 0 1px #252a20}
#board .cell:nth-child(3n):not(.wall):not(.goal-cell){background-image:linear-gradient(#7464410b,#7464410b),url('assets/limestone-tile.svg');background-size:100% 100%,117% 112%;background-position:center,70% 25%}
#board .cell:nth-child(5n):not(.wall):not(.goal-cell){background-image:linear-gradient(#f6e5c412,#f6e5c412),url('assets/limestone-tile.svg');background-size:100% 100%,108% 125%;background-position:center,20% 80%}
#board .cell.path:not(.wall),#board .cell.trail-blue:not(.wall){background-image:linear-gradient(#248b8970,#248b8970),url('assets/limestone-tile.svg');box-shadow:inset 0 0 0 2px #96e8dd,inset 0 0 12px #73ddc066}
#board .cell.trail-red:not(.wall){background-image:linear-gradient(#a4495970,#a4495970),url('assets/limestone-tile.svg');box-shadow:inset 0 0 0 2px #efb09d}
/* Side hand frees the full height for the courtyard. */
.stage{width:1720px;height:970px;grid-template-columns:minmax(0,1fr) 340px;gap:24px;margin:0 auto;align-items:center}
.board-area{width:100%;height:100%;gap:24px}
.board-frame{width:auto;flex:1;height:100%;padding:0 18px 10px;align-self:center}
#board{width:100%;max-width:100%;height:100%;--board-tilt:24deg}
.right-column{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:16px;max-height:950px;min-height:0;width:340px}
#inspector{width:100%;max-height:700px!important;flex:0 1 auto;min-height:0}
.right-column .bottom-bar,.right-column .bottom-bar:has([data-piece]){width:100%;height:auto;min-height:150px;max-height:240px;flex:none;margin:0;padding:12px 8px;display:flex;flex-direction:column;gap:10px}
.right-column .bottom-bar #hand{height:auto;min-height:78px;flex:none;width:100%}
.right-column .bottom-bar footer{order:2;flex-direction:row;width:100%;justify-content:center;gap:12px}
.right-column .bottom-bar #hand .spell-slots:has([data-piece]){display:grid;grid-template-columns:repeat(3,var(--mini-card-width));height:auto;gap:8px;justify-content:center}
.right-column .bottom-bar:has([data-piece]){max-height:none}
#board .goal-cell.edge-far{background:linear-gradient(145deg,#c94737,#90281e);border:3px solid #ff9b7d;box-shadow:inset 0 0 18px #ec6c4944,0 0 0 1px #461912;overflow:visible}
#board .goal-cell.edge-near{background:linear-gradient(145deg,#287fb9,#164c8d);border:3px solid #83d6ff;box-shadow:inset 0 0 18px #54b9ff44,0 0 0 1px #102d4b;overflow:visible}
.goal-player-name{position:absolute;left:calc(100% + 18px);top:50%;transform:translateY(-50%);width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:22px Georgia;color:#eee3c9;text-shadow:0 2px 3px #000;pointer-events:none;text-align:left}
#board .goal-cell.edge-far .goal-player-name{color:#ffc1a7}#board .goal-cell.edge-near .goal-player-name{color:#a5dfff}
/* Clearance around the courtyard's widened perspective edge. */
#captures-rail{transform:translateX(-24px)}
.right-column{transform:translateX(24px)}

/* Movement overlays share the board perspective. */
#board .cell.route-blue,#board .cell.trail-blue{--route-color:#369dff;--route-wash:#1685ff55}
#board .cell.route-red,#board .cell.trail-red{--route-color:#ff514e;--route-wash:#f0353555}
#board .cell.route-option::after,#board .cell.path::after,#board .cell.selected::after,
#board .cell.trail-blue::after,#board .cell.trail-red::after{
 content:"";display:block;position:absolute;inset:2px;z-index:7;pointer-events:none;
 border:4px solid var(--route-color,#369dff);border-radius:4px;background:var(--route-wash,#1685ff55);
 box-shadow:inset 0 0 12px var(--route-color,#369dff);
}
#board .cell.route-option::after{border:3px dashed var(--route-color);background:transparent;box-shadow:none}
#board .cell.selected::after{background:transparent}
#board .cell .step{z-index:8;background:#101b29;color:#fff;border:2px solid var(--route-color,#369dff)}
#board .sliding-piece{margin:0;padding:0;box-sizing:border-box}

/* Weathered temple stone: mineral relief, worn joints and muted moss. */
#board .cell:not(.wall):not(.goal-cell):nth-child(n){
 background:#817c65 url('assets/temple-stone-0.svg') center/100% 100% no-repeat;
 border:1px solid #393d30;border-radius:5px;
 box-shadow:inset 2px 2px 3px #c1af7e66,inset -3px -3px 4px #141e18aa,0 2px 3px #08100dcc;
}
#board .cell:not(.wall):not(.goal-cell):nth-child(3n){background-image:url('assets/temple-stone-1.svg')}
#board .cell:not(.wall):not(.goal-cell):nth-child(3n + 2){background-image:url('assets/temple-stone-2.svg')}
#board{background-color:#303529;border-color:#6a6d52}

/* Stone terrace surrounds the grid; goals use team-colored outlines only. */
#board{
 background:#77705e url('assets/temple-stone-1.svg') center/320px 320px repeat;
 border:12px ridge #8a8068;
 box-shadow:0 7px 0 #494638,0 11px 0 #68604e,0 20px 23px #061208aa,inset 0 0 0 2px #b0a084;
}
#board::before{
 border:3px solid #6d6553;border-radius:4px;
 box-shadow:inset 0 0 12px #342e2466;
}
#board .goal-cell.edge-far,#board .goal-cell.edge-near{
 background:#817c65 url('assets/temple-stone-0.svg') center/100% 100% no-repeat;
 border:5px solid var(--goal-color);border-radius:5px;
 box-shadow:inset 0 0 0 1px var(--goal-color),inset 0 0 6px #181c18aa,0 0 0 1px #24261f;
}
#board .goal-cell.edge-far{--goal-color:#ff554f}
#board .goal-cell.edge-near{--goal-color:#389fff}

/* Large dressed limestone blocks, with recessed mortar joints. */
#board{gap:4px;padding:14px;background:#a28a64 url('assets/temple-stone-1.svg') center/260px 180px repeat;border:14px ridge #b49a70;box-shadow:0 8px 0 #746044,0 13px 0 #917953,0 22px 26px #061208bb,inset 0 0 0 2px #dbc298}
#board::before{border-color:#88714f;box-shadow:inset 0 0 10px #59472d88}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){border:1px solid #7c6546;border-radius:2px;box-shadow:inset 3px 3px 2px #f1dab2aa,inset -4px -4px 3px #72583899,0 2px 2px #392d20}

/* Continuous terrace around the two goals: no false cell divisions. */
#board{background-image:url('assets/terrace-stone.svg');background-size:100% 100%;background-repeat:no-repeat}

/* Cool marble: hard mineral faces and crisp bevels, without clay tones. */
#board{background:#939fa6 url('assets/marble-1.svg') center/100% 100% no-repeat;border:14px ridge #a3adb3;box-shadow:0 8px 0 #434e55,0 13px 0 #75838b,0 22px 26px #061208bb,inset 0 0 0 2px #e0e7ea}
#board::before{border-color:#637079;box-shadow:inset 0 0 8px #24313b66}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background:#c2cbd0 url('assets/marble-0.svg') center/100% 100% no-repeat;border:1px solid #66757d;border-radius:1px;box-shadow:inset 2px 2px 0 #f2f7f8cc,inset -3px -3px 0 #63717d99,0 2px 2px #1d2933}
#board .cell:not(.wall):not(.goal-cell):nth-child(3n){background-image:url('assets/marble-1.svg')}
#board .cell:not(.wall):not(.goal-cell):nth-child(3n + 2){background-image:url('assets/marble-2.svg')}
#board .goal-cell.edge-far,#board .goal-cell.edge-near{background:#c2cbd0 url('assets/marble-2.svg') center/100% 100% no-repeat;border-radius:1px}

/* Natural stone color, retaining the marble veins and sharp edges. */
#board{background-color:#8e8778;border-color:#918978;box-shadow:0 8px 0 #49473e,0 13px 0 #716c5d,0 22px 26px #061208bb,inset 0 0 0 2px #b3a993}
#board::before{border-color:#686456}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background-color:#989181;border-color:#666255;box-shadow:inset 2px 2px 0 #c6bba3aa,inset -3px -3px 0 #58564b99,0 2px 2px #292b25}
#board .goal-cell.edge-far,#board .goal-cell.edge-near{background-color:#989181}

.royal-badge{display:none}
#board .card .royal-badge{display:grid;place-items:center;position:absolute;left:3%;top:3%;width:28%;aspect-ratio:1;z-index:9;background:#25241ee8;border:1px solid #e5c66d;border-radius:4px;box-shadow:0 2px 4px #0009;pointer-events:none}
#board .card .royal-badge img{position:static;display:block;width:100%;height:100%;object-fit:contain;background:none}
.royal-description{display:inline-block;margin-top:8px}

/* Royal title on the inspected card; compact icon on the board. */
#board .royal-badge .royal-label{display:none}
#inspector .inspector-card .royal-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:3%;right:3%;left:auto;width:21%;padding:5px 3px;z-index:9;background:#25241ef0;border:1px solid #e5c66d;border-radius:5px;box-shadow:0 2px 5px #0009;pointer-events:none;box-sizing:border-box}
#inspector .inspector-card .royal-badge img{position:static;display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:none}
#inspector .royal-label{display:block;color:#f4d986;font:600 15px/1.2 Georgia,serif;text-align:center;margin-top:3px}
/* Keep the royal badge below the printed name and pantheon headers. */
#inspector .inspector-card .royal-badge{top:15%;right:7%;width:18%;padding:3px 2px}
#inspector .royal-label{font-size:13px;margin-top:2px}
/* Heviosso's ram remains visible above the royal badge. */
#inspector .inspector-card .card[data-unit-id="0"] .royal-badge{top:57%;right:8%}