/* Checkerboard stones and shallow relief. The camera rules below project it. */
body.dimensional-board .board-frame{position:relative;border-color:#a8a284 #687e72 #344840 #758d7e;box-shadow:inset 0 2px 0 #d1caa23b,inset 3px 0 0 #8295824d,0 5px 0 #45564b,0 9px 0 #293d39,0 13px 0 #0b1b20,6px 13px 0 #03121770}
body.dimensional-board .board{border:1px solid #a6b1a0;box-shadow:inset 0 3px 0 #152b2d,0 3px 0 #071f23;background:#273f3d;overflow:visible}
body.dimensional-board .cell{background-color:#6f8174;border-right:1px solid #1a353eaa;border-bottom:1px solid #172e36cb;box-shadow:inset 0 2px 0 #cdd0b256,inset 2px 0 0 #a6b6a132,inset -2px 0 0 #2b40434f,inset 0 -4px 0 #30474199;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 11px,#e4e1bd07 11px,#e4e1bd07 12px),repeating-linear-gradient(90deg,transparent 0,transparent 17px,#132c3109 17px,#132c3109 18px)}
body.dimensional-board .cell:nth-child(even){background-color:#354c4c;box-shadow:inset 0 2px 0 #90a79742,inset 2px 0 0 #6f908031,inset -2px 0 0 #11293363,inset 0 -4px 0 #142c338c}
body.dimensional-board .cell:after{inset:4px 4px 7px;border:1px solid #c5cbae0d;border-top-color:#d7d8b91c;border-left-color:#d7d8b914}
body.dimensional-board .cell.home-blue{background-color:#607f76}
body.dimensional-board .cell.home-blue:nth-child(even){background-color:#335b59}
body.dimensional-board .cell.home-red{background-color:#897977}
body.dimensional-board .cell.home-red:nth-child(even){background-color:#5d4c58}
body.dimensional-board .cell.jar-cell{background-color:#4b655f}
body.dimensional-board .cell.jar-cell.red{background-color:#69525a}
body.dimensional-board .cell.range{background-color:#a48c5e!important;box-shadow:inset 0 2px 0 #f1d49b6b,inset 0 -4px 0 #685b3dc9,inset 0 0 0 1px #d4be876d}
body.dimensional-board .cell.move-target{background-color:#488b86!important;box-shadow:inset 0 2px 0 #a8dac271,inset 0 -4px 0 #2458539f,inset 0 0 0 1px #a8dac26b}
body.dimensional-board .cell.selected{background-color:#ac995f!important;box-shadow:inset 0 0 0 2px #ffdfa0,inset 0 -5px 0 #766849a3}
body.dimensional-board .cell.area{background-color:#c09a57!important;box-shadow:inset 0 0 0 2px #fff0bf,inset 0 -5px 0 #8a704da3}
body.dimensional-board .unit-figure:before{content:'';position:absolute;left:20%;right:15%;bottom:4%;height:17%;background:#13282587;clip-path:polygon(12% 0,73% 0,73% 18%,89% 18%,89% 42%,100% 42%,100% 70%,80% 70%,80% 100%,22% 100%,22% 80%,0 80%,0 25%,12% 25%);transform:translate(2px,2px);pointer-events:none}
body.dimensional-board .unit-figure .mage-sprite{filter:drop-shadow(2px 2px 0 #102b2d66)}
body.dimensional-board .jar-sprite{filter:drop-shadow(3px 4px 0 #0b252799);opacity:1;transform:translateY(-2px)}
body.dimensional-board .jar-emblem{transform:translateY(-2px)}
body.dimensional-board .coordinate-columns{color:#c9cfb4}
body.dimensional-board .coordinate-rows{color:#c9cfb4}
body.dimensional-board .board-caption{background:#203638;border-top:1px solid #768b7470;margin:2px -6px 0;padding-right:8px;padding-bottom:11px;color:#c2c9ae}
@media(max-width:650px){body.dimensional-board .cell{box-shadow:inset 0 1px 0 #cdd0b256,inset 0 -2px 0 #30474199}body.dimensional-board .cell:nth-child(even){box-shadow:inset 0 1px 0 #90a79742,inset 0 -2px 0 #142c338c}body.dimensional-board .unit-figure .mage-sprite{filter:drop-shadow(1px 1px 0 #102b2d66)}body.dimensional-board .board-caption{margin:2px -1px 0}}

/* A real CSS camera projects the square grid and its hit areas together. */
body.dimensional-board .board-frame{--camera-tilt:48deg;container-type:inline-size;padding:12px 10px 0;background:linear-gradient(180deg,#1730388a,#162d32ef)}
body.dimensional-board .board-perspective{position:relative;height:calc(31cqw + 15px);perspective:1000px;perspective:130cqw;perspective-origin:50% 100%}
body.dimensional-board .board-plane{position:absolute;bottom:0;left:0;right:0;transform:rotateX(var(--camera-tilt));transform-origin:50% 100%;transform-style:preserve-3d}
body.dimensional-board .board-and-rows{transform-style:preserve-3d}
body.dimensional-board .board{transform-style:preserve-3d;border:2px solid #adb59a;box-shadow:0 4px 0 #688276,0 8px 0 #435c52,0 12px 0 #243e3c,0 17px 0 #11292e,0 24px 15px #04141cad}
body.dimensional-board .cell{transform-style:preserve-3d;backface-visibility:hidden}
/* Sprites stand upright; distance still scales them through the camera. */
body.dimensional-board .unit-figure{inset:auto 0 0;height:100%;transform:rotateX(calc(-1 * var(--camera-tilt)));transform-origin:50% 88%;transform-style:preserve-3d}
body.dimensional-board .unit-figure:before{content:none}
body.dimensional-board .unit-shadow{position:absolute;left:20%;right:14%;top:68%;height:23%;background:#12282b99;clip-path:polygon(12% 0,73% 0,73% 18%,89% 18%,89% 42%,100% 42%,100% 70%,80% 70%,80% 100%,22% 100%,22% 80%,0 80%,0 25%,12% 25%);pointer-events:none}
body.dimensional-board .unit-figure .mage-sprite{transform:scale(1.13);transform-origin:50% 87%}
body.dimensional-board .unit-tag{top:8%;left:1px;font-size:6px;padding:1px 2px}
body.dimensional-board .unit-affinity{width:13px;height:13px;top:5%;right:0}
body.dimensional-board .secret-tag{top:5%;right:0;font-size:7px;padding:1px 2px}
body.dimensional-board .unit-marker{bottom:-1px}
body.dimensional-board .jar-standing{position:absolute;inset:0;transform:rotateX(calc(-1 * var(--camera-tilt)));transform-origin:50% 88%;pointer-events:none}
body.dimensional-board .coordinate-columns,body.dimensional-board .coordinate-rows{font-weight:600}
body.dimensional-board .board-caption{position:relative;margin:22px -8px 0;padding:9px 8px 11px;z-index:2}
@media(max-width:650px){body.dimensional-board .board-frame{padding:8px 4px 0}body.dimensional-board .board-perspective{height:calc(31cqw + 15px)}body.dimensional-board .unit-figure .mage-sprite{transform:scale(1.18)}body.dimensional-board .unit-affinity{width:9px;height:9px}body.dimensional-board .secret-tag{font-size:5px}body.dimensional-board .board-caption{margin:22px -2px 0}}
body.dimensional-board .cell.reach-own{box-shadow:inset 0 0 0 2px #9fe0c8,inset 0 0 0 4px #2d6b6599!important}body.dimensional-board .cell.reach-enemy{background-image:linear-gradient(#c0607a66,#c0607a66)!important;box-shadow:inset 0 0 0 2px #f0a7bc,inset 0 0 0 4px #4f253266!important}body.dimensional-board .cell.reach-maybe{box-shadow:inset 0 0 0 2px #e0a0b48c,inset 0 0 0 4px #4f253255!important;background-image:repeating-linear-gradient(45deg,#e0a0b42e 0 4px,transparent 4px 8px)!important}#board.moving .unit-figure,#board.moving .unit-figure .mage-sprite,#board.aiming .cell.selected .unit-figure,#board.aiming .cell.selected .unit-figure .mage-sprite{pointer-events:none!important}.legend-square.reach-own{background:transparent;border:2px solid #9fe0c8}.legend-square.reach-enemy{background:#8a4a5c;border-color:#f0a7bc}.legend-square.reach-maybe{background:repeating-linear-gradient(45deg,#e0a0b4 0 2px,transparent 2px 4px);border-color:#e0a0b4}.unit-actions{transition:opacity .15s}.unit-actions.ghost{opacity:.38;pointer-events:none}