/* Connected raised slabs: a top plane plus two layered side walls. */
.table-board .tile[data-tile-family]{
 --tile-top:#638358;--tile-face:#3f6244;--tile-side:#29432d;
 --tile-edge:#8baa78;--tile-accent:#d1e5aa;--tile-layer:#a9b8a0;
 --tile-depth:14px;--tile-side-width:8px;--tile-focus-shadow:0 0 0 0 transparent;
 border:1px solid transparent;border-radius:3px;background:none;box-shadow:none;
 padding-right:var(--tile-side-width);padding-bottom:var(--tile-depth);transition:none;isolation:isolate;
}
.table-board .tile[data-tile-family="life"]{--tile-top:#817091;--tile-face:#554961;--tile-side:#37303e;--tile-edge:#b29ec5;--tile-accent:#e4d5ef;--tile-layer:#b5aabb}
.table-board .tile[data-tile-family="market"]{--tile-top:#a58a4f;--tile-face:#726033;--tile-side:#493e21;--tile-edge:#d2b578;--tile-accent:#ffe4a2;--tile-layer:#c8bd99}
.table-board .tile[data-tile-family="growth"],.table-board .tile[data-tile-family="security"]{--tile-top:#5a9390;--tile-face:#386c68;--tile-side:#234745;--tile-edge:#8ec1b3;--tile-accent:#d3f1dd;--tile-layer:#a4c0b8}
.table-board .tile[data-tile-family="social"]{--tile-top:#a37b5b;--tile-face:#78543b;--tile-side:#4c3525;--tile-edge:#cea27b;--tile-accent:#ffdab1;--tile-layer:#c6b5a3}
.table-board .tile[data-tile-family="dark"]{--tile-top:#905571;--tile-face:#60364c;--tile-side:#3c2030;--tile-edge:#c587a4;--tile-accent:#ffd0e0;--tile-layer:#b69fae}
.table-board .tile[data-tile-family="start"],.table-board .tile[data-tile-family="auction"]{--tile-top:#9b8b55;--tile-face:#726235;--tile-side:#483f24;--tile-edge:#c7b77f;--tile-accent:#ffedb5;--tile-layer:#bcb496}
.table-board .tile[data-tile-family]::before,.table-board .tile[data-tile-family]::after{display:none}
.tile-block{position:absolute;inset:0;pointer-events:none;z-index:-1;filter:drop-shadow(-2px 4px 3px #030a076b)}
.tile-block>i{display:block;position:absolute}
.tile-block .tile-surface{
 inset:0 var(--tile-side-width) var(--tile-depth) 0;border:1px solid var(--tile-edge);border-radius:3px 2px 2px 2px;
 background:linear-gradient(155deg,#ffffff13,transparent 55%),linear-gradient(170deg,var(--tile-top),var(--tile-face));
 box-shadow:inset 1px 1px 0 #f1ffda4d,inset -1px -1px 0 #07130d66,var(--tile-focus-shadow);
 transition:box-shadow .18s,border-color .18s;
}
.tile-block .tile-wall-front{
 left:0;right:0;bottom:0;height:calc(var(--tile-depth) + 1px);
 clip-path:polygon(0 0,calc(100% - var(--tile-side-width)) 0,100% 100%,var(--tile-side-width) 100%);
 background:linear-gradient(180deg,var(--tile-side) 0 24%,var(--tile-layer) 24% 47%,var(--tile-side) 47% 69%,var(--tile-layer) 69% 81%,var(--tile-side) 81%);
}
.tile-block .tile-wall-right{
 top:0;right:0;bottom:0;width:calc(var(--tile-side-width) + 1px);
 clip-path:polygon(0 0,100% var(--tile-depth),100% 100%,0 calc(100% - var(--tile-depth)));
 background:linear-gradient(90deg,var(--tile-side) 0 24%,color-mix(in srgb,var(--tile-layer) 64%,var(--tile-side)) 24% 47%,var(--tile-side) 47% 69%,color-mix(in srgb,var(--tile-layer) 64%,var(--tile-side)) 69% 81%,var(--tile-side) 81%);
}
.table-board .tile[data-tile-family] .tile-label{position:relative;color:#fff5e2;font-weight:800;text-shadow:0 1px 0 #08130d,0 2px 3px #0009}
.table-board .tile[data-tile-family] .tile-icon{position:relative;color:var(--tile-accent);filter:drop-shadow(0 2px 1px #0009)}
.table-board .tile[data-tile-family] .tile-num{color:var(--tile-accent);font-weight:650}
.table-board .tile[data-tile-family].active{--tile-focus-shadow:0 0 0 1px #ffd882cc,0 0 12px #ffd06d66}
.table-board .tile[data-tile-family].active .tile-surface{border-color:#ffe3a2}
.table-board .tile[data-tile-family].trail-tile{--tile-focus-shadow:0 0 8px #ffe3a255}
.table-board .tile[data-tile-family].trail-tile .tile-surface{border-color:#e5cea0}
.table-board .tile[data-tile-family].landing-tile{animation:tile-arrival-light .65s ease-out}
@keyframes tile-arrival-light{0%{filter:brightness(1.35)}100%{filter:brightness(1)}}
@media(max-width:1450px){.table-board .tile[data-tile-family]{--tile-depth:11px;--tile-side-width:6px}}
@media(max-width:600px){.table-board .tile[data-tile-family]{--tile-depth:8px;--tile-side-width:4px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px){
 .table-board .tile[data-tile-family]{--tile-depth:6px;--tile-side-width:4px;padding-bottom:6px;padding-right:4px}
 .tile-block{filter:drop-shadow(-1px 2px 1px #030a0766)}
 .tile-block .tile-surface{border-radius:2px}
}
@media(prefers-reduced-motion:reduce){.table-board .tile[data-tile-family].landing-tile{animation:none}}
