/* Root sanctuary: fixed scene coordinates keep UI on the illustrated furniture. */
main,:root main{background-image:url('assets/root-sanctuary.png')}
header{position:absolute;inset:15px 20px auto;z-index:20;background:none}
.stage{position:absolute;inset:0;width:1920px;height:1080px;margin:0;display:block}
.board-area{position:absolute;left:468px;top:166px;width:976px;height:754px;display:block}
.board-frame{width:100%;height:100%;padding:0;margin:0;perspective:2800px}
#board{width:100%;height:100%;max-width:none;gap:3px;padding:8px;border:0;background:transparent;box-shadow:none;--board-tilt:17deg}
#board::before{border:0;box-shadow:none}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background:linear-gradient(140deg,#e7ddbf12,#292a2320);border:1px solid #4a473bb3;border-radius:2px;box-shadow:inset 1px 1px 0 #e9dfc766,inset -1px -2px 1px #30312666,0 1px 2px #25271f55}
#board .goal-cell.edge-far,#board .goal-cell.edge-near{background:linear-gradient(140deg,#e7ddbf12,#292a2320);border-width:4px;box-shadow:inset 0 0 0 1px var(--goal-color)}
#board .cell.wall,#board .cell.wall:nth-child(even){filter:sepia(.18);box-shadow:0 4px 5px #10150f88,inset 1px 1px 0 #e2d6bd66}
main{--mini-card-width:64px;--mini-card-height:96px}
#captures-rail{position:absolute;left:-320px;top:148px;width:240px;height:492px!important;padding:0;transform:none;display:flex;flex-direction:column;justify-content:space-between}
.captures-tray{padding:8px;gap:7px;background:#1b130b20;border:0;box-shadow:none;grid-template-columns:repeat(3,var(--mini-card-width))}
.captures-tray::before{font:13px Georgia;letter-spacing:.08em;color:#e2cda2;text-shadow:0 2px 2px #000;padding-bottom:7px}
.capture-empty{background:#100d0999;border:1px solid #82684388;box-shadow:inset 0 2px 5px #0008}
.right-column{position:absolute;left:1508px;top:239px;width:258px;max-height:650px;gap:10px;transform:none;justify-content:flex-start}
#inspector{padding:8px 15px;background:transparent;border:0;box-shadow:none;max-height:490px!important;overflow:auto;gap:6px}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:100%;max-width:100%}
#inspector .inspector-caption{font-size:15px}
#inspector .inspector-desc{font-size:14px;line-height:1.35;padding:8px 0 0;border-color:#ae895d66;color:#ecdfc7;text-shadow:0 1px 2px #000}
#inspector .inspector-hint{font:17px/1.5 Georgia;color:#ddc99e;text-align:center;padding:35px 4px}
.right-column .bottom-bar,.right-column .bottom-bar:has([data-piece]){padding:7px 4px;min-height:138px;max-height:none;background:#20150c99;border:1px solid #795b3777;box-shadow:0 3px 6px #0005;border-radius:3px}
.right-column .bottom-bar footer{gap:8px}
.bottom-bar footer button,header button,#help{background:linear-gradient(#463522,#251b11);border:1px solid #a18454;color:#e8d8b6;box-shadow:inset 0 1px 0 #cfad6b33;font-size:14px}
.bottom-bar #hand .empty-slot{background:#100d0999;border-color:#82684388}
.goal-player-name{font-size:19px;left:calc(100% + 12px);width:190px}
.board-frame .ranks{color:#e4d8b9;text-shadow:0 2px 3px #000}
.board-frame .files{color:#e4d8b9;text-shadow:0 2px 3px #000}
#notice{z-index:21}
/* Fit the two rows of losses inside each carved tray. */
#captures-rail{top:100px;height:470px!important;--mini-card-width:52px;--mini-card-height:78px}
.right-column{top:220px;width:258px;max-height:700px;gap:7px}
#inspector{max-height:none!important;overflow:visible;padding:8px 20px}
#inspector .inspector-desc{font-size:14px;line-height:1.3}
.right-column .bottom-bar,.right-column .bottom-bar:has([data-piece]){background:linear-gradient(100deg,#20140ef2,#3c2919e8,#21150ff2);border:3px ridge #715236;box-shadow:0 5px 8px #0007,inset 0 0 0 1px #b68c4544}
#board .cell.route-option::after{border-width:3px;background:#3c9fff16}

/* Cards share the plane of the physical wooden supports. */
#captures-rail{left:-299px;top:111px;height:450px!important;perspective:1300px}
.captures-tray{transform:perspective(1100px) rotateX(12deg) skewX(-9deg);transform-origin:center;gap:6px;padding:6px}
.right-column{left:1517px;top:259px;width:249px;max-height:620px;transform:perspective(1400px) rotateX(9deg) skewX(7deg);transform-origin:50% 0}
#inspector{padding:8px 14px}
#inspector .inspector-desc{font-size:15px;line-height:1.35}
.board-area{height:694px}
#board{--board-tilt:17deg}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background:linear-gradient(140deg,#292d2840,#18251f55);border-color:#33372bcc;box-shadow:inset 1px 1px 0 #e1d4b355,inset -2px -2px 2px #20291e77}
#board .cell:not(.wall):not(.goal-cell):nth-child(even){background:linear-gradient(140deg,#76796a28,#33413838)}
main>.root-spell-tray,main>.root-spell-tray:has([data-piece]){position:absolute;left:570px;top:900px;width:780px;height:166px;min-height:166px;max-height:166px;margin:0;padding:29px 34px 27px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:22px;background:url('assets/carved-tray.svg') center/100% 100% no-repeat;border:0;box-shadow:0 10px 16px #07120bc9;transform:perspective(1200px) rotateX(14deg);transform-origin:center;z-index:12}
main>.root-spell-tray #hand{width:auto;flex:0 1 auto;min-height:96px;height:auto}
main>.root-spell-tray #hand .spell-slots{height:96px;display:flex;gap:12px;justify-content:center}
main>.root-spell-tray #hand .spell-slots:has([data-piece]){display:flex;flex-wrap:nowrap;height:96px;gap:10px}
main>.root-spell-tray footer{display:flex;flex-direction:column;gap:8px;flex:none;order:2}
main>.root-spell-tray #hand .hand-slot{flex:0 0 var(--mini-card-width)}
/* Center the playable surface on the stone terrace and give tiles clear contrast. */
.board-area{left:490px;top:174px;width:940px;height:694px}
#captures-rail{left:-321px;top:103px}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background:linear-gradient(140deg,rgba(28,35,29,.60),rgba(19,28,23,.70));border-color:#252c22;box-shadow:inset 1px 1px 0 #b8b09666,inset -2px -2px 2px #151d17bb,0 1px 2px #12191088}
#board .cell:not(.wall):not(.goal-cell):nth-child(even){background:linear-gradient(140deg,rgba(64,68,53,.47),rgba(37,46,35,.60))}
/* One perspective plane for tiles, cards and movement overlays. */
.board-area{left:515px;top:150px;width:890px;height:760px}
.board-frame{perspective:1800px;perspective-origin:50% 50%}
#board{--board-tilt:30deg;transform:rotateX(var(--board-tilt));transform-origin:50% 50%}
#captures-rail{left:-346px;top:127px}

/* Engraved destination seals, restrained team color on natural stone. */
#board .goal-cell.edge-far,#board .goal-cell.edge-near{border:3px solid var(--goal-color);border-radius:5px;background-color:#17221d66;background-size:auto 94%;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 0 0 3px #232b22aa,inset 0 0 15px #111b1688,0 0 0 1px #cfbc8a88,0 3px 6px #111b1688}
#board .goal-cell.edge-far{background-image:url('assets/goal-red.svg')}
#board .goal-cell.edge-near{background-image:url('assets/goal-blue.svg')}
/* The wooden backing grows with the description instead of clipping its text. */
.right-column{top:249px;max-height:none;height:auto;min-height:0}
#inspector{height:auto;max-height:none!important;overflow:visible;flex:none;padding:14px 15px 20px;background:linear-gradient(95deg,#271a10f5,#352416ed 48%,#24170ff5);border:5px ridge #775334;border-radius:4px;box-shadow:0 6px 12px #0008,inset 0 0 0 1px #b18d4b55;gap:8px}
#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint-small{height:auto;max-height:none;overflow:visible;white-space:normal;overflow-wrap:anywhere;flex:none;color:#f0e3cc;line-height:1.4;margin:0}
#inspector .inspector-reveal{font:14px/1.35 system-ui;display:flex;align-items:flex-start;gap:6px;color:#eadbc0;flex:none}
#inspector .inspector-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;flex:none}
#inspector:has(.spell-art) .inspector-card{width:164px;max-width:100%;margin:0 auto}
#inspector .inspector-actions button{background:#473320;color:#f2e2c2;border-color:#ae8952}
/* Natural stone grid with legible joints, positioned higher on the terrace. */
.board-area{top:126px}
#captures-rail{top:151px}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){background:transparent;border:2px solid #48483be6;border-radius:1px;box-shadow:inset 1px 1px 0 #eee1bc99,0 1px 0 #ded2b088}
#board{gap:1px}
/* Center the artwork and copy within the inclined lectern. */
#inspector{align-items:center;text-align:center}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{margin-inline:auto}
#inspector .inspector-caption,#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint-small,#inspector .inspector-hint{width:100%;text-align:center;margin-inline:auto;box-sizing:border-box}
#inspector:has(.spell-art) .inspector-card{width:164px;max-width:100%;margin-inline:auto}
#inspector .inspector-reveal{justify-content:center;text-align:center;width:100%;box-sizing:border-box}
#inspector .inspector-actions{width:100%;justify-content:center}
/* Dark joints clearly separate the natural stone squares. */
#board .cell:not(.wall):not(.goal-cell):nth-child(n){border-color:#20251c;box-shadow:inset 1px 1px 0 #e4d8ba66,0 0 0 1px #20251c99}
/* Project the entire playing terrace onto the same trapezoid as the scenery.
   Scene corners: (565,180), (1335,180), (1410,880), (490,880). */
.board-area{left:490px;top:180px;width:920px;height:700px}
.board-frame{perspective:none}
#board{width:920px;height:700px;transform-origin:0 0;transform:matrix3d(.836956522,0,0,0,-.107142857,.836956522,0,-.000232919255,0,0,1,0,75,0,0,1);padding:10px;border:7px solid #494738;border-radius:3px;background:linear-gradient(#a4967755,#8f846555);box-shadow:inset 0 0 0 2px #d7c9a0,0 0 0 2px #c0af89,0 5px 0 3px #302f25,0 10px 12px #10170cb3}
#board::before{inset:-7px;border:1px solid #dfcda077;box-shadow:none}
#captures-rail{left:-321px;top:97px}

/* Black courtyard outline, fixed lectern bounds matching the painted furniture. */
#board{border-color:#080a08;box-shadow:inset 0 0 0 1px #080a08,0 0 0 2px #080a08,0 5px 0 3px #171a14,0 10px 12px #10170cb3}
#board::before{border-color:#080a08}
.right-column{left:1517px;top:249px;width:249px;height:492px;max-height:492px}
#inspector{height:492px;min-height:492px;max-height:492px!important;width:100%;box-sizing:border-box;padding:10px 13px;gap:6px;justify-content:flex-start;background:#24170e66;border:1px solid #77533488;box-shadow:inset 0 0 12px #160e0788;overflow:hidden}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:146px;max-width:100%;margin:0 auto;flex:none}
#inspector:has(.spell-art) .inspector-card{width:108px}
#inspector .inspector-caption{font-size:14px;line-height:1.2;margin:0;flex:none}
#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint-small{font-size:14px;line-height:1.3;padding-top:5px;margin:0}
#inspector .inspector-reveal{font-size:13px;line-height:1.25;margin:0}
#inspector .inspector-actions{margin-top:auto;gap:6px}
#inspector .inspector-actions button{font-size:13px;padding:5px 9px;min-height:28px}
#inspector .royal-description{margin-top:5px}
/* Keep the inclined content inside the carved frame, including its lower edge. */
.right-column{left:1498px;top:256px;width:242px;height:474px;max-height:474px}
#inspector{height:474px;min-height:474px;max-height:474px!important;padding:10px 15px;box-sizing:border-box}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card{width:140px}
#inspector:has(.spell-art) .inspector-card{width:100px}
/* Follow the terrace's natural perimeter rather than a centered symmetric frame.
   Far edge (550,180)-(1356,180), near edge (482,879)-(1420,879). */
.board-area{left:482px;top:180px;width:938px;height:699px}
#board{width:938px;height:699px;transform:matrix3d(.859275053,0,0,0,-.097281831,.859275053,0,-.000201323243,0,0,1,0,68,0,0,1);border-width:4px;border-color:#14160f;box-shadow:inset 0 0 0 1px #11140e,0 2px 0 1px #11140e,0 5px 7px #10170c88;border-radius:2px}
#board::before{inset:-4px;border-color:#14160f}
#captures-rail{left:-313px}
/* Larger artwork within the same physical wooden supports. */
#inspector{padding:8px 10px;gap:4px}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card,#inspector:has(.spell-art) .inspector-card{width:100%;max-width:100%;margin:0 auto;min-height:0;flex:0 1 auto;aspect-ratio:2/3}
#inspector .inspector-card>.card,#inspector .inspector-card>.spell-art{width:100%;height:100%;object-fit:contain;min-height:0}
#inspector .inspector-caption{font-size:13px;line-height:1.15}
#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint-small{font-size:13px;line-height:1.2;padding-top:3px}
#inspector .inspector-reveal{font-size:12px;line-height:1.15}
#inspector .inspector-actions{margin-top:2px}
main>.root-spell-tray{--mini-card-width:76px;--mini-card-height:114px}
main>.root-spell-tray,main>.root-spell-tray:has([data-piece]){padding-top:23px;padding-bottom:23px}
main>.root-spell-tray #hand{min-height:114px}
main>.root-spell-tray #hand .spell-slots,main>.root-spell-tray #hand .spell-slots:has([data-piece]){height:114px}
/* Taller carved lectern is painted into the background itself. */
main,:root main{background-image:url('assets/root-sanctuary-tall.png')}
.right-column{height:650px;max-height:650px}
#inspector{height:650px;min-height:650px;max-height:650px!important;gap:9px;padding:12px 12px;background:transparent;border:0;box-shadow:none}
#inspector .inspector-card,#inspector:has(.inspector-card):not(:has(.inspector-desc)) .inspector-card,#inspector:has(.spell-art) .inspector-card{flex:none;width:100%;height:auto;aspect-ratio:2/3}
#inspector .inspector-caption{font-size:15px;line-height:1.3}
#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint-small{font-size:15px;line-height:1.4}
#inspector .inspector-reveal{font-size:14px;line-height:1.3}
#inspector .inspector-actions{margin-top:4px}
/* Only the square divisions outline the playing area. */
#board{border:0;box-shadow:none;background:transparent;padding:14px}
#board::before{content:none;display:none}
#board .cell:not(.wall):not(.goal-cell):nth-child(n){border:2px solid #151b12;box-shadow:inset 1px 1px 0 #e3d5b577,0 0 0 1px #151b12aa}
/* Natural rocks remain within the same blocked square as the former walls. */
#board .cell.wall,#board .cell.wall:nth-child(even){background:rgba(34,37,25,.18) url('assets/jungle-rocks.png') center/100% 100% no-repeat;border:2px solid #151b12;border-radius:1px;box-shadow:inset 0 0 7px #131b1377;filter:none}
/* The background stone has no baked-in joints; divisions come from live cells only. */
main,:root main{background-image:url('assets/root-sanctuary-continuous.png')}

/* Interior seams combine two 2px borders and a 1px gap. Match that at the perimeter. */
#board .cell.grid-left{border-left-width:5px!important}
#board .cell.grid-right{border-right-width:5px!important}
#board .cell.grid-top{border-top-width:5px!important}
#board .cell.grid-bottom{border-bottom-width:5px!important}

.rock-impact{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:visible;background:radial-gradient(ellipse,#d3c09c99,transparent 65%);animation:stone-dust .7s ease-out both}
.rock-shard{position:absolute;left:50%;top:50%;width:25%;height:25%;background:url('assets/jungle-rocks.png') center/200% 200%;clip-path:polygon(10% 0,90% 15%,100% 70%,45% 100%,0 65%);filter:drop-shadow(1px 2px 1px #0008)}
@keyframes stone-dust{from{opacity:1}to{opacity:0}}
#modal.duel-fit{width:min(680px,94vw);max-width:94vw;max-height:calc(100dvh - 20px);padding:14px;box-sizing:border-box;overflow:hidden}
#modal.duel-fit .duel-content{display:flow-root;transform-origin:top center}
#modal.duel-fit h2{margin:0 0 8px;padding-bottom:8px}
#modal.duel-fit p{margin:6px 0}
@media(prefers-reduced-motion:reduce){.rock-impact{animation:none}}

/* Six starting cards fit in the bottom tray; the spell hand remains three slots. */
main>.root-spell-tray #hand .spell-slots:has([data-piece]){gap:8px}

/* Carved stone dialogs with vines confined to the edges, clear of text and cards. */
#modal,#modal:has(.duel-pair){
 background-image:url('assets/dialog-vines.svg'),linear-gradient(#d0c4a9e8,#b2a58ceb),url('assets/terrace-stone.svg');
 background-size:100% 100%,100% 100%,320px 320px;background-repeat:no-repeat,no-repeat,repeat;
 color:#29271f;border:7px ridge #81765e;border-radius:5px;
 box-shadow:0 22px 80px #000c,inset 0 0 0 2px #e0d5b3,inset 0 0 20px #493b2766;
 padding:28px 34px;text-align:center;
}
#modal::backdrop,#modal:has(.duel-pair)::backdrop{background:#080e09bd;backdrop-filter:blur(3px)}
#modal h2,#modal:has(.duel-pair) h2{color:#302b20;border-bottom:1px solid #665d4780;font-family:Georgia,serif;text-shadow:0 1px #eee2c7;overflow-wrap:anywhere}
#modal p,#modal label,#modal .no-spell,#modal:has(.duel-pair) #duel-action{color:#343328}
#modal input,#modal select{background:#ede3cc;color:#29271f;border-color:#7a715a}
#modal button,#modal:has(.duel-pair) button{background:linear-gradient(#5e644b,#39422f);color:#fff2d4;border:1px solid #8d9670;border-radius:4px;box-shadow:0 2px 0 #222b1e;font-weight:600}
#modal button:focus-visible{outline:3px solid #274e78;outline-offset:3px}
#modal button:disabled{opacity:.45}
#modal:has(.duel-pair) .duel-figure{background:#544d3526;border:1px solid #736c5266;border-radius:4px}
#modal:has(.duel-pair) .duel-figure figcaption,#modal:has(.duel-pair) .duel-figure figcaption strong{color:#302e23}
#modal:has(.duel-pair) .animated-spell,#modal:has(.duel-pair) .spell-chip{background:#ded2b6;border-color:#786b4e;color:#302b20}
#modal.duel-fit{padding:16px 28px}
@media(max-height:500px){#modal,#modal:has(.duel-pair){padding:12px 26px}#modal.duel-fit{padding:10px 24px}}


/* Remove the pantheon label in-game until the two source images can be cleaned. */


/* Clear interface typography and a restrained charcoal / copper palette. */
:root{--ui-font:"Segoe UI",Arial,sans-serif;--ui-ink:#f4eddf;--ui-muted:#d0c3af;--ui-copper:#c39761}
body,button,input,select,textarea{font-family:var(--ui-font)}
#modal,#modal:has(.duel-pair){background:#27231f;background-image:linear-gradient(145deg,#342e27,#24211e 70%);color:var(--ui-ink);border:1px solid #8f7353;border-radius:14px;box-shadow:0 24px 80px #000b,inset 0 1px 0 #e1bb7933;padding:26px 30px;font:16px/1.5 var(--ui-font);text-align:center}
#modal::backdrop,#modal:has(.duel-pair)::backdrop{background:#100f0dcc;backdrop-filter:blur(5px)}
#modal h2,#modal:has(.duel-pair) h2{font:700 25px/1.25 var(--ui-font);letter-spacing:0;color:#faf2e2;text-shadow:none;border-bottom:1px solid #b1936438;padding-bottom:14px;margin:0 0 16px}
#modal h3{font:600 19px/1.3 var(--ui-font);color:#ead1ac}
#modal p,#modal label,#modal .no-spell,#modal:has(.duel-pair) #duel-action{font-family:var(--ui-font);color:var(--ui-muted);line-height:1.5}
#modal label{font-size:15px}
#modal input,#modal select,#modal textarea{background:#1b1916;color:#f5edde;border:1px solid #857059;border-radius:7px;font:16px/1.4 var(--ui-font)}
#modal button,#modal:has(.duel-pair) button{background:#514133;color:#fff5e5;border:1px solid #a3835f;border-radius:7px;box-shadow:0 2px 4px #0003;font:600 15px/1.35 var(--ui-font);padding:10px 16px;text-shadow:none;transition:background .15s,border-color .15s}
#modal button:hover{background:#69513a;border-color:#d5af7e;filter:none}
#modal button:disabled{opacity:.42;background:#35312b}
#modal button:focus-visible,#modal input:focus-visible{outline:3px solid #e6bb79;outline-offset:3px}
#modal #begin-duel,#modal #result,#modal #again,#modal #insp-use{background:#c79960;color:#211b14;border-color:#e1b981}
#modal:has(.duel-pair) .duel-figure{background:#18161366;border:1px solid #aa88523d;border-radius:9px}
#modal:has(.duel-pair) .duel-figure figcaption,#modal:has(.duel-pair) .duel-figure figcaption strong{font-family:var(--ui-font);color:#f3e8d5}
#modal:has(.duel-pair) .animated-spell,#modal:has(.duel-pair) .spell-chip{background:#40362b;color:#f5e7ce;border-color:#aa8852}
#modal.duel-fit{padding:16px 24px}
#inspector .inspector-caption,#inspector .inspector-desc,#inspector .inspector-spell-note,#inspector .inspector-hint,#inspector .inspector-hint-small,#inspector .inspector-reveal{font-family:var(--ui-font);font-size:16px;line-height:1.4;letter-spacing:0;color:#fff1d9;text-shadow:0 1px 3px #000}
#inspector .inspector-caption strong{font-size:19px;font-weight:700}
#captures-rail .captures-tray::before{font-family:var(--ui-font);font-weight:600;letter-spacing:0}
header button,#help,.bottom-bar footer button,#inspector .inspector-actions button{font-family:var(--ui-font);background:#302a23;color:#f8ead3;border:1px solid #a4845e;border-radius:6px;box-shadow:0 2px 4px #0005;text-shadow:none}
@media(max-height:500px){#modal,#modal:has(.duel-pair){padding:12px 24px}#modal h2{font-size:21px}}