/*
 * The state's sign (includes/pieces/statemap.php), on the tile map's blocks (tilemap.css shapes them):
 * an enamel station nameboard on two steel legs, black-rimmed, the state's name in big board letters
 * and its answer on a band in the rule's colour; beside it the map in stone, the state's own block
 * lifted high off its socket, the states with the same answer standing in the same colour.
 */

.smap { --tilt: 50deg; --step: 4px; --k: 1; --rule: #0a5c3c; --t-top: #0a5c3c; --t-s: #053524; --t-e: #074830; --t-n: #0a5236; --t-plate: #063d28; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.smap > * { min-width: 0; }
/* This state's rule colours its block, the states with the same answer and the key's dots alike. */
.smap[data-status="no-income-tax"] { --rule: #0d5c63; --t-top: #0d5c63; --t-s: #06363a; --t-e: #09474d; --t-n: #0b5158; --t-plate: #073b40; }
.smap[data-status="partial"] { --rule: #874000; --t-top: #874000; --t-s: #4a2300; --t-e: #663100; --t-n: #793a00; --t-plate: #552900; }
.smap[data-status="taxed"] { --rule: #9c1d14; --t-top: #9c1d14; --t-s: #560e09; --t-e: #7a160f; --t-n: #8c1a12; --t-plate: #600f0a; }

/* The nameboard. */
.smap__board { position: relative; align-self: center; }
.smap__sign { --rule: #0a5c3c; position: relative; z-index: 1; padding: 18px 22px 14px; border-radius: 10px; background: linear-gradient(180deg, #ffffff, #f6f3ea); color: #15171a; text-align: center; box-shadow: inset 0 0 0 5px #15171a, inset 0 0 0 8px #fbfaf6, var(--p-enamel), 0 3px 0 rgba(0, 0, 0, .35), 0 22px 30px -22px rgba(0, 0, 0, .6); transform-origin: 50% 0; }
.smap__sign::before, .smap__sign::after { content: ""; position: absolute; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1f3f5, #8e949d 55%, #3b4047); }
.smap__sign::before { left: 14px; } .smap__sign::after { right: 14px; }
.smap__sign--no-income-tax { --rule: #0d5c63; } .smap__sign--partial { --rule: #874000; } .smap__sign--taxed { --rule: #9c1d14; }
.smap__sign p { margin: 0; }
.smap__name { padding: 0 10px; font: 700 clamp(2rem, 1.2rem + 3.4vw, 3rem)/1 var(--board-font); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; }
.smap__band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; margin: 12px -14px 0 !important; padding: 8px 12px; background: var(--rule); color: #fff; font: 700 1.1rem/1.2 var(--board-font); letter-spacing: .07em; text-transform: uppercase; }
.smap__ans { padding: 3px 10px 2px; border-radius: 4px; background: #fff; color: var(--rule); letter-spacing: .1em; }
.smap__year { margin-top: 9px !important; font: 700 .98rem/1.2 var(--board-font); letter-spacing: .1em; text-transform: uppercase; color: #3c4148; }
.smap__legs { display: flex; justify-content: space-between; height: 40px; margin: -6px 22% 0; }
.smap__legs i { width: 10px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, #6b7079, #eef0f2 40%, #c2c7ce 62%, #5c626a); box-shadow: 2px 0 3px rgba(0, 0, 0, .25); }
.smap__legs i::after { content: ""; display: block; height: 100%; background: linear-gradient(transparent calc(100% - 6px), #3b4047 calc(100% - 6px)); }

/* The map: stone blocks, the same answer in its colour, this state lifted. */
.smap__table { padding-top: 0; }
.smap .tmap__map { max-width: 540px; margin: -34px auto 46px; }
/* The plinth runs on in front of the map: the platform the lifted block is set on. */
.smap .tmap__map::before { bottom: -15%; }
.smap .tmap__map::after { top: 115%; }
.smap .tmap__tile.is-quiet { --top: #e4ded2; --s: #b0a792; --e: #c6bea9; --n: #d8d1c1; --plate: #57524a; }
.smap .tmap__tile.is-same, .smap .tmap__tile.is-here { --top: var(--t-top); --s: var(--t-s); --e: var(--t-e); --n: var(--t-n); --plate: var(--t-plate); }
.smap .tmap__tile.is-here { --lift: calc(var(--step) * 10 + 18px); }
.smap .is-socket .tmap__top { background: #2b2f35; box-shadow: inset 0 3px 6px #000c, inset 0 0 0 2px #f5c21b; }
.smap .is-socket .tmap__code b { background: #f5c21b; color: #1b1600; }
.smap .tmap__tile:has(.tmap__hit:hover), .smap .tmap__tile:has(.tmap__hit:focus-visible) { --lift: 10px; }
.smap .tmap__tile:has(.tmap__hit:hover) .tmap__code b, .smap .tmap__tile:has(.tmap__hit:focus-visible) .tmap__code b { background: #15171a; }
/* The two polished jacks that hold the state's block up out of its socket. */
.smap .is-here .tmap__ground { transform-style: preserve-3d; background: rgba(20, 16, 8, .55); }
.smap .is-here .tmap__ground::before, .smap .is-here .tmap__ground::after { content: ""; position: absolute; left: 28%; bottom: 50%; width: 7px; height: var(--lift); margin-left: -3.5px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #5c626a, #ffffff 40%, #c2c7ce 62%, #4b5058); transform-origin: 50% 100%; transform: rotateX(-90deg); transition: height 1.4s cubic-bezier(.45, .1, .25, 1.15); }
.smap .is-here .tmap__ground::after { left: 72%; }
.smap__stop { min-height: 3em; margin: 10px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink); }
.smap__dot { display: inline-block; width: 13px; height: 13px; margin-right: 6px; border-radius: 3px; background: var(--rule); vertical-align: -1px; }
.smap__dot--here { box-shadow: 0 0 0 2px #f5c21b, 0 0 0 3px #15171a; }
.smap__dot--same { margin-left: 4px; }

/* Before it is seen: the block down in its socket, the sign folded up under its top edge. */
.smap.is-down .tmap__tile.is-here { --lift: 0px; transform: translate3d(calc(var(--dc) * (100% + 2 * var(--g))), calc(var(--dr) * (100% + 2 * var(--g))), 0); }
.smap.is-down .smap__sign { transform: perspective(700px) rotateX(-88deg); }
.smap .smap__sign { transition: transform 1s cubic-bezier(.3, 1.35, .5, 1) .5s; }
.smap.is-setup .smap__sign, .smap.is-setup .tmap__tile, .smap.is-setup .tmap__ground::before, .smap.is-setup .tmap__ground::after { transition: none; }
.smap .tmap__tile.is-here { transition: transform 1.4s cubic-bezier(.45, .1, .25, 1.15); }

@media (min-width: 700px) {
	.smap { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); column-gap: 22px; align-items: center; }
	.smap__name { font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem); }
	.smap .p-live { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.smap { --step: 3px; --tilt: 46deg; }
	.smap .tmap__map { --g: 1.5px; margin: -16px auto 34px; }
	.smap__legs { height: 22px; }
	.smap__sign { padding: 16px 16px 12px; }
	.smap__band { margin-inline: -8px !important; }
}
@media (prefers-color-scheme: dark) {
	.smap .tmap__tile.is-quiet { --top: #4a4e55; --s: #26292e; --e: #34373d; --n: #3f434a; --plate: #1f2226; }
}
@media (prefers-reduced-motion: reduce) {
	.smap .smap__sign, .smap .tmap__tile.is-here, .smap .is-here .tmap__ground::before, .smap .is-here .tmap__ground::after { transition: none; }
}