/*
 * The raised tile map (includes/pieces/tilemap.php): a stone plinth tilted on the table, the states
 * standing on it as blocks lit from above (a top, and sides in deeper shades), each one's code on a
 * small plate standing upright on it so it is never read at a slant. The picked block lifts off its
 * socket. Its card is an enamel plate with a rim in the rule's colour. statemap.css draws the same
 * blocks for the state pages.
 */

.tmap { --tilt: 48deg; --step: 7px; --k: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tmap > * { min-width: 0; }
.tmap__table { perspective: 1500px; perspective-origin: 50% -10%; padding: 8px 0 0; overflow: hidden; }
.tmap__map { --g: 2px; position: relative; width: 100%; max-width: 660px; aspect-ratio: 11 / 8; margin: -54px auto -26px; transform-style: preserve-3d; transform: rotateX(var(--tilt)); transform-origin: 50% 55%; transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); }
.tmap__map::before { content: ""; position: absolute; inset: -2.4%; border-radius: 12px; background: linear-gradient(160deg, #efeadf, #ddd6c6); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 0 0 1px #c9c1ae; }
.tmap__map::after { content: ""; position: absolute; left: -2.4%; right: -2.4%; top: 102.4%; height: 12px; background: linear-gradient(#bfb6a1, #a39a85); transform-origin: 50% 0; transform: rotateX(-90deg); }

/* A block: its footprint, its faces, its plate, its button. */
.tmap__tile { --h: calc(var(--lv) * var(--step) * var(--k)); --top: #0a5c3c; --s: #053524; --e: #074830; --n: #0a5236; --plate: #063d28;
	position: absolute; left: calc((var(--c) - 1) * 100% / 11 + var(--g)); top: calc((var(--r) - 1) * 100% / 8 + var(--g)); width: calc(100% / 11 - 2 * var(--g)); height: calc(100% / 8 - 2 * var(--g));
	transform-style: preserve-3d; transform: translateZ(var(--lift, 0px)); transition: transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.tmap__tile--no-income-tax { --top: #0d5c63; --s: #06363a; --e: #09474d; --n: #0b5158; --plate: #073b40; }
.tmap__tile--partial { --top: #874000; --s: #4a2300; --e: #663100; --n: #793a00; --plate: #552900; }
.tmap__tile--taxed { --top: #9c1d14; --s: #560e09; --e: #7a160f; --n: #8c1a12; --plate: #600f0a; }
.tmap__tile--checking { --top: #59626e; --plate: #4f565f; }
.tmap__top, .tmap__f, .tmap__ground, .tmap__hit { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tmap__top { inset: 0; border-radius: 3px; background: var(--top); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(0, 0, 0, .18); transform: translateZ(var(--h)); transition: transform .7s cubic-bezier(.3, .1, .2, 1) calc(var(--lv) * 110ms); }
.tmap__f { transition: height .7s cubic-bezier(.3, .1, .2, 1) calc(var(--lv) * 110ms), width .7s cubic-bezier(.3, .1, .2, 1) calc(var(--lv) * 110ms); }
.tmap__f--s { left: 0; right: 0; bottom: 0; height: var(--h); background: var(--s); transform-origin: 50% 100%; transform: rotateX(-90deg); }
.tmap__f--n { left: 0; right: 0; top: 0; height: var(--h); background: var(--n); transform-origin: 50% 0; transform: rotateX(90deg); }
.tmap__f--e { top: 0; bottom: 0; right: 0; width: var(--h); background: var(--e); transform-origin: 100% 50%; transform: rotateY(90deg); }
.tmap__f--w { top: 0; bottom: 0; left: 0; width: var(--h); background: var(--e); transform-origin: 0 50%; transform: rotateY(-90deg); }
.tmap__tile--checking .tmap__top { background: repeating-linear-gradient(135deg, #59626e 0 5px, #474e58 5px 10px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); transform: translateZ(.5px); }
.tmap__ground { inset: 0; border-radius: 4px; background: rgba(30, 24, 12, .42); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); transform: translateZ(calc(.5px - var(--lift, 0px))); opacity: 0; transition: opacity .4s, transform .55s cubic-bezier(.3, 1.4, .5, 1); }
.tmap__code { position: absolute; left: 50%; bottom: 46%; z-index: 1; transform-style: preserve-3d; pointer-events: none; transform: translateX(-50%) translateZ(calc(var(--h) + 1px)); transition: transform .7s cubic-bezier(.3, .1, .2, 1) calc(var(--lv) * 110ms); }
.tmap__code b { display: block; padding: 2px 4px 1px; border-radius: 3px; background: var(--plate); color: #fff; font: 700 .95rem/1 var(--board-font); letter-spacing: .03em; white-space: nowrap; transform-origin: 50% 100%; transform: rotateX(calc(-1 * var(--tilt))); transition: transform 1.1s cubic-bezier(.3, .1, .2, 1); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.tmap__hit { inset: 0; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; transform: translateZ(calc(var(--h) + .6px)); cursor: pointer; }
.tmap__hit:disabled { cursor: default; }
.tmap__hit:focus-visible { outline: 3px solid var(--signal); outline-offset: 1px; box-shadow: 0 0 0 6px #15171a; }
/* The picked block rises only a little, so it never hides the code of the block behind it. */
.tmap__tile.is-on { --lift: calc(var(--step) * 2); }
.tmap__tile.is-on .tmap__top { box-shadow: inset 0 0 0 3px #f5c21b, inset 0 1px 0 rgba(255, 255, 255, .28); }
.tmap__tile.is-on .tmap__ground { opacity: 1; }
.tmap__tile.is-on .tmap__code b { background: #f5c21b; color: #1b1600; }

/* Before it is seen: the map flat on the table, every block down. */
.tmap.is-flat { --tilt: 0deg; --k: 0; }
.tmap.is-setup .tmap__map, .tmap.is-setup .tmap__top, .tmap.is-setup .tmap__f, .tmap.is-setup .tmap__code, .tmap.is-setup .tmap__code b, .tmap.is-setup .tmap__tile { transition: none; }
.tmap.is-rising .tmap__top, .tmap.is-rising .tmap__code { transition-delay: calc(.5s + var(--lv) * 130ms); }
.tmap.is-rising .tmap__f { transition-delay: calc(.5s + var(--lv) * 130ms); }

/* The key: a small block of each height. */
.tmap__keys { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tmap__key { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.tmap__key b { font-weight: 700; }
.tmap__swatch { --top: #0a5c3c; --s: #053524; width: 24px; height: 18px; border-radius: 3px; background: var(--top); box-shadow: 0 calc(var(--lv) * 1.6px + 1px) 0 var(--s), inset 0 1px 0 rgba(255, 255, 255, .28); transform: translateY(calc(var(--lv) * -.8px)); }
.tmap__key--no-income-tax .tmap__swatch { --top: #0d5c63; --s: #06363a; }
.tmap__key--partial .tmap__swatch { --top: #874000; --s: #4a2300; }
.tmap__key--taxed .tmap__swatch { --top: #9c1d14; --s: #560e09; }
.tmap__key--checking .tmap__swatch { background: repeating-linear-gradient(135deg, #59626e 0 4px, #474e58 4px 8px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45); }

/* The card: an enamel plate, rimmed in the rule's colour. */
.tmap__card { --rim: #0a5c3c; padding: 16px 18px 14px; border-radius: 10px; background: #fbfaf6; color: #15171a; box-shadow: inset 0 0 0 4px var(--rim), var(--p-enamel), 0 2px 0 rgba(0, 0, 0, .3), 0 18px 26px -20px rgba(0, 0, 0, .55); }
.tmap__card--no-income-tax { --rim: #0d5c63; } .tmap__card--partial { --rim: #874000; } .tmap__card--taxed { --rim: #9c1d14; } .tmap__card--checking { --rim: #59626e; }
.tmap__card p { margin: 0; }
.tmap__cn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 700 1.7rem/1.1 var(--board-font); letter-spacing: .04em; text-transform: uppercase; }
.tmap__ca { padding: 3px 10px 2px; border-radius: 5px; background: var(--rim); color: #fff; font-size: 1.15rem; letter-spacing: .1em; }
.tmap__cw { margin-top: 6px !important; font: 700 1.05rem/1.25 var(--board-font); letter-spacing: .06em; text-transform: uppercase; color: #3c4148; }
.tmap__cs { margin-top: 8px !important; font-size: 1rem; line-height: 1.5; }
.tmap__cl { margin-top: 10px !important; font-weight: 700; }
.tmap__cl a { color: #0b4f9a; }
.tmap__hint { margin: 0; font-size: 1rem; color: var(--ink-2); }

/* The page's own list spacing (.prose ol, .prose li) does not apply inside the drawing. */
.piece .tmap__keys, .piece .tmap__key { margin: 0; }
@media (min-width: 700px) {
	.tmap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
	.tmap__table, .tmap__hint { grid-column: 1 / -1; }
	.tmap__keys { align-self: start; }
}
@media (max-width: 599px) {
	.tmap { --step: 3px; --tilt: 40deg; }
	.tmap__tile.is-on { --lift: var(--step); }
	.tmap__map { --g: 1.5px; margin: -22px auto -8px; }
	.tmap__table { margin-inline: -6px; }
	.tmap__code b { padding: 1px 2px 0; letter-spacing: 0; }
	.tmap__cn { font-size: 1.45rem; }
}
@media (prefers-color-scheme: dark) {
	.tmap__map::before { background: linear-gradient(160deg, #34373d, #26292e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px #000; }
	.tmap__map::after { background: linear-gradient(#1d1f23, #121417); }
	.tmap__ground { background: rgba(0, 0, 0, .5); }
}
@media (prefers-reduced-motion: reduce) {
	.tmap__map, .tmap__tile, .tmap__top, .tmap__f, .tmap__code, .tmap__code b, .tmap__ground { transition: none; }
}