/* Beasties: Tile Pile (TilesView.swift). .tpl is the container: every size is in cqw of it (--h = field height,
 * --slot = bench slot, --by = bench centre; tiles: --x, --y = centre, --s = size). PHP draws the start,
 * beasties-tiles.js (bstTpl) moves the tiles. */
.tpl { position: relative; isolation: isolate; container-type: inline-size; box-sizing: border-box; width: 100%; }
.tpl-field { position: relative; height: calc(var(--h) * 1cqw); }
.tpl-fx { position: absolute; inset: 0; z-index: 99999; pointer-events: none; }

/* a tile (TileFace / PileTileArt): the app's stone, exported per family (pile-<f>.webp, -exportArt): tile in the
 * family colour, the monster tucked in at the bottom edge, lighter rim, dark outline, hard dark edge below, shadow.
 * The picture has 10 % air on each side (MonsterTileSprites.pad), so .tpl-f sticks out by that much.
 * Covered tiles get the night overlay (58 %, sleepers 40 %), sleepers show the dark moon stone. */
.tpl-t {
	position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw);
	transform: translate(-50%, -50%);
	transition: left .38s cubic-bezier(.3, 1.15, .5, 1), top .38s cubic-bezier(.3, 1.25, .5, 1), width .32s ease, height .32s ease, opacity .25s;
}
.tpl-t::before { content: ""; position: absolute; inset: 0; border-radius: 20%; pointer-events: none; }
.tpl-f { position: absolute; inset: -10%; z-index: 1; display: block; background: center / 100% 100% no-repeat; }
.tpl-t::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20%; background: #120f24; opacity: 0; transition: opacity .25s; pointer-events: none; }
.tpl-t.is-dim::after { opacity: .58; }
.tpl-t.is-dim.is-sleep::after { opacity: .4; }
.f0 .tpl-f { background-image: url(../img/beasties/pile-0.webp); }
.f1 .tpl-f { background-image: url(../img/beasties/pile-1.webp); }
.f2 .tpl-f { background-image: url(../img/beasties/pile-2.webp); }
.f3 .tpl-f { background-image: url(../img/beasties/pile-3.webp); }
.f4 .tpl-f { background-image: url(../img/beasties/pile-4.webp); }
.f5 .tpl-f { background-image: url(../img/beasties/pile-5.webp); }
.f6 .tpl-f { background-image: url(../img/beasties/pile-6.webp); }
.f7 .tpl-f { background-image: url(../img/beasties/pile-7.webp); }
.f8 .tpl-f { background-image: url(../img/beasties/pile-8.webp); }

/* asleep: the dark stone with a light rim and a moon instead of the monster */
.tpl-t.is-sleep .tpl-f { background-image: url(../img/beasties/pile-sleep.webp); }
.tpl-f.is-wake { animation: tpl-wake .5s ease-out; }
@keyframes tpl-wake { 0% { transform: scaleX(1); } 45% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }

/* the fuse (FuseBorder): a dark track, the rest of the fuse in orange → red on it, glowing */
.tpl-fz { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: none; }
.tpl-t.has-fuse .tpl-fz { display: block; }
.tpl-fz path { fill: none; }
.tpl-fz-o, .tpl-fz-ro { stroke: #0e0b1a; stroke-width: 12.5; }
.tpl-fz-t { stroke: #3a3458; stroke-width: 8; }
.tpl-fz-ro, .tpl-fz-r { stroke-linecap: round; transition: stroke-dasharray .35s ease-out, stroke-dashoffset .35s ease-out, stroke .35s; }
.tpl-fz-r { stroke: var(--fc, #ff8a3d); stroke-width: 8; filter: drop-shadow(0 0 2px var(--fc, #ff8a3d)); }
.tpl-t.is-hot .tpl-fz-r { animation: tpl-fuse .9s ease-in-out infinite alternate; }
@keyframes tpl-fuse { from { filter: drop-shadow(0 0 1px var(--fc)); } to { filter: drop-shadow(0 0 5px var(--fc)) drop-shadow(0 0 2px var(--fc)); } }

.tpl-t.is-gone { opacity: 0; transition: none; pointer-events: none; }
.tpl-t.is-mark::before { box-shadow: 0 0 0 calc(var(--s) * .07cqw) #ffd400, 0 0 calc(var(--s) * .3cqw) rgba(255, 212, 0, .8); }
.tpl-t.is-mark { animation: tpl-glow 1s ease-in-out infinite alternate; }
@keyframes tpl-glow { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -56%); } }
.tpl-t.is-hop { animation: tpl-hop .4s cubic-bezier(.3, .7, .4, 1); }
@keyframes tpl-hop { 0% { transform: translate(-50%, -50%) scale(1.15); } 50% { transform: translate(-50%, -62%) scale(1.05); } 100% { transform: translate(-50%, -50%); } }
.tpl-t.is-nope { animation: tpl-nope .45s ease-out; }
@keyframes tpl-nope { 0%, 100% { transform: translate(-50%, -50%); } 20% { transform: translate(-50%, -50%) rotate(9deg); } 45% { transform: translate(-50%, -50%) rotate(-7deg); } 70% { transform: translate(-50%, -50%) rotate(4deg); } }
.tpl-t.is-win { animation: tpl-win .5s ease-out both; }
@keyframes tpl-win { 0% { transform: translate(-50%, -50%); filter: none; } 40% { transform: translate(-50%, -64%) scale(1.15); filter: brightness(1.25) drop-shadow(0 0 6px #fff); } 100% { transform: translate(-50%, -55%) scale(1.06); filter: brightness(1.1); } }
.tpl-t.is-back { animation: tpl-back .55s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes tpl-back { 0% { filter: drop-shadow(0 0 6px #ff4d6d); } 100% { filter: none; } }
.tpl-t.is-pop { animation: tpl-pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tpl-pop { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 100% { transform: translate(-50%, -50%); opacity: 1; } }
.tpl-starpop { position: absolute; z-index: 10; pointer-events: none; color: #ffd400; filter: drop-shadow(0 2px 0 #0e0b1a); }
.tpl-starpop svg { display: block; width: 100%; height: 100%; }
.tpl-fly { position: absolute; z-index: 9; pointer-events: none; transform: none; }

/* the bench (BenchView): a wooden board with seven hollows; the last free ones glow red when it gets tight */
.tpl-bench {
	position: absolute; left: 50%; top: calc(var(--by) * 1cqw); width: calc(var(--slot) * 7cqw + 3cqw); height: calc(var(--slot) * 1.12cqw);
	transform: translate(-50%, -50%); box-sizing: border-box; display: flex; align-items: center; justify-content: center;
	border-radius: calc(var(--slot) * .28cqw); background: linear-gradient(180deg, #8a5a3b, #6b4429);
	box-shadow: inset 0 0 0 3px #0e0b1a, 0 5px 0 #0e0b1a;
}
.tpl-bench i { flex: none; width: calc(var(--slot) * .88cqw); height: calc(var(--slot) * .88cqw); margin: 0 calc(var(--slot) * .06cqw); border-radius: calc(var(--slot) * .18cqw); background: rgba(0, 0, 0, .28); transition: background-color .2s; }
.tpl-bench i.is-hot { background: rgba(255, 77, 109, .35); }
.tpl-bench.is-shake { animation: tpl-shake .45s ease-out; }
@keyframes tpl-shake { 0%, 100% { transform: translate(-50%, -50%); } 15% { transform: translate(calc(-50% + 10px), -50%); } 35% { transform: translate(calc(-50% - 8px), -50%); } 60% { transform: translate(calc(-50% + 5px), -50%); } }
.tpl-bench.is-point { animation: tpl-point 1.6s ease-out; }
@keyframes tpl-point { 0%, 100% { box-shadow: inset 0 0 0 3px #0e0b1a, 0 5px 0 #0e0b1a; } 20%, 70% { box-shadow: inset 0 0 0 3px #0e0b1a, 0 5px 0 #0e0b1a, 0 0 0 4px rgba(255, 212, 0, .9), 0 0 24px rgba(255, 212, 0, .5); } }

/* before the script takes over, the start is a still picture */
.tpl:not(.is-live) * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .tpl *, .gx.is-tiles * { transition: none !important; animation: none !important; } }

/* the panel the pile sits on, like the app (TilesBoard: dark, also in light mode) */
.tpl-well { position: relative; background: linear-gradient(180deg, #2f294f, #241e45); border-radius: 18px; padding: 10px; box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a; }

/* a board on a card: Gnatz peeks over the panel */
.bst-board-card.is-tiles { padding: 14px 14px 20px; max-width: 420px; }
.tpl-stage { --pw: 19%; position: relative; padding-top: calc(var(--pw) * .764); }
.tpl-stage .gx-peek { --px: .5; }
.tpl-stage .tpl-well { z-index: 1; }

/* ---------- the game screen ---------- */
.gx.is-tiles .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-tiles .gx-icons, .gx.is-tiles .gx-pill { margin-top: 14px; }
.gx.is-tiles .gx-title { gap: 1px; }
.gx.is-tiles .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-tiles .st { width: 17px; height: 17px; }
.gx-left { display: inline-flex; margin-top: 2px; padding: 1px 6px; border-radius: 8px; font-size: .66rem; font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gx-left.is-hl { animation: tpl-hl 1.6s ease-out; }
@keyframes tpl-hl { 0%, 100% { background: transparent; color: #8f86b8; } 20%, 70% { background: rgba(255, 212, 0, .18); color: #ede7ff; box-shadow: 0 0 0 1.5px rgba(255, 212, 0, .7); } }
.bst-phone .gx-stage.is-tiles { margin-top: 10px; }
.gx.is-tiles .gx-peek { --px: .5; }
.gx-well.is-tiles { display: block; padding: 8px; }
.bst-phone .gx.is-tiles .gx-bottom { margin-top: auto; margin-bottom: 14px; }
.gx-tools.is-1 { grid-template-columns: 1fr; }
.gx.is-tiles .gx-toast { top: 42%; }

/* ---------- on the site ---------- */
.bst-mini.is-tiles { background: #241e45; }
.bst-tier.is-tiles .bst-tier-board { margin-bottom: 4px; padding: 6px; border-radius: 14px; }
.bst-fan-card.is-tiles { display: flex; left: 17%; right: 17%; aspect-ratio: 1 / 1.24; }
.bst-fan-card .tpl-well { flex: 1; display: flex; min-width: 0; padding: 6px; border-radius: 12px; align-items: center; }
.bst-fan-card .tpl-well .tpl { flex: 1; }
.bst-how-pic .bst-scene:has(.bst-how-tpl) { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-tpl) { width: 100%; height: 100%; display: grid; place-items: center; }
.bst-how-tpl { width: 46%; padding: 5px; border-radius: 12px; box-sizing: border-box; }
@media (max-width: 860px) { .bst-how-tpl { width: 36%; } }
.bst-game-well.tpl-well { padding: 6px; border-radius: 14px; }
.bst-game.is-tiles .bst-game-monster { display: none; }

/* one level */
.bst-level.is-tiles { max-width: 760px; }
.bst-stk-stage.tpl-stage-lv { max-width: 420px; margin-inline: auto; }
.bst-level.is-tiles .bst-player figcaption, .bst-level.is-tiles .bst-player-bar { max-width: 560px; margin-inline: auto; }
.tpl-facts { list-style: none; margin: 0 auto 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.tpl-facts li { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.tpl-facts strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--text); }
.tpl-facts strong small { font-size: .55em; color: var(--muted); }
.tpl-facts span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.tpl-facts .is-stars strong { display: inline-flex; gap: 2px; color: #ffd400; }
.tpl-facts .st { width: 22px; height: 22px; }
.bst-level.is-tiles .bst-move-list small { color: var(--muted); }
@media (max-width: 560px) {
	.tpl-facts { gap: 6px; }
	.tpl-facts strong { font-size: 1.4rem; }
	.tpl-facts .st { width: 17px; height: 17px; }
	.bst-level.is-tiles .bst-stk-stage { padding: 7px; }
}