/* Beasties: Block Munch (MampfView.swift, look of 2026-10-16). .mmp is the container: every size is in cqw of it.
 * The board panel is 100cqw square (374 pt in the app: 8 pt panel + 4 pt well padding), the grid starts at 3.209cqw
 * with cells of 11.698cqw, the tray of three sits below (slots 31.551cqw, cells of 5.882cqw). Layers: well + fog sheet
 * (.mmp-grid), pieces (z 2), the fog block over pieces on fog (.mmp-top, z 3), footprint/lines/marks, the dragged
 * piece, FX. PHP draws the start, beasties-blocks.js (bstMmp) plays on. Dark like the app in both themes. */
.mmp { position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; aspect-ratio: 100 / 129.412; }
.mmp.is-board { aspect-ratio: 1; }
.mmp-panel { position: absolute; left: 0; top: 0; width: 100cqw; height: 100cqw; box-sizing: border-box; border-radius: 5.348cqw; background: #241e45; border: .802cqw solid #0e0b1a; box-shadow: 0 1.604cqw 0 #0e0b1a; }
.mmp-well { position: absolute; inset: 1.337cqw; border-radius: 3.743cqw; background: #1a1533; box-shadow: inset 0 0 0 .802cqw #0e0b1a; }
.mmp-grid { position: absolute; left: 1.07cqw; top: 1.07cqw; width: 93.583cqw; height: 93.583cqw; overflow: visible; }
.mmp-top { position: absolute; z-index: 3; left: 3.209cqw; top: 3.209cqw; width: 93.583cqw; height: 93.583cqw; overflow: visible; pointer-events: none; }
.mmp-slot { position: absolute; top: 102.674cqw; width: 31.551cqw; height: 26.738cqw; border-radius: 4.813cqw; background: rgba(14, 11, 26, .35); }
.mmp-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mmp-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }

/* the eyes in the fog blink now and then (closed 0.16 s of 3.6 s, MampfFogLayer) */
.mmp-eye { transform-box: fill-box; transform-origin: center; animation: mmp-blink 3.6s linear infinite; }
@keyframes mmp-blink { 0%, 95.5% { transform: none; } 96%, 99.5% { transform: scaleY(.16); } 100% { transform: none; } }
.mmp-puff { transform-origin: 400px 400px; animation: mmp-puff .55s ease-out both; }
@keyframes mmp-puff { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.04); } }

/* a piece: fused tiles, the head tile with the family's monster (an <image> in the piece's svg) */
.mmp-p { position: absolute; z-index: 2; display: block; transition: left .5s cubic-bezier(.3, 1, .4, 1), top .5s cubic-bezier(.3, 1, .4, 1), width .26s ease, height .26s ease, opacity .25s, filter .25s; }
.mmp-p > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mmp-p.is-rock { z-index: 2; }
.mmp-p.is-crack > svg { animation: mmp-crack .45s ease-out; }
@keyframes mmp-crack { 0%, 100% { transform: none; } 20% { transform: rotate(-8deg) scale(1.08); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
.mmp-p.is-land { animation: mmp-land .35s ease-out; }
@keyframes mmp-land { 0% { transform: scale(1.08); } 30% { transform: scale(.97); } 100% { transform: none; } }
.mmp-p.is-tray.is-nofit { opacity: .35; filter: grayscale(1); }
.mmp-p.is-pop { animation: mmp-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes mmp-pop { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.mmp-p.is-drag { z-index: 7; transform: scale(1.05); filter: drop-shadow(0 2.7cqw 0 rgba(0, 0, 0, .4)); }
.mmp-p.is-drag.is-quick { transition-duration: .26s, .26s, .14s, .14s, .25s, .25s; }
.mmp-p.is-no { animation: mmp-no .5s ease-out; filter: drop-shadow(0 2.7cqw 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 1.4cqw rgba(255, 77, 109, .9)); }
@keyframes mmp-no { 0%, 100% { translate: 0; } 15% { translate: -1.6cqw 0; } 35% { translate: 1.4cqw 0; } 55% { translate: -1cqw 0; } 75% { translate: .5cqw 0; } }
.mmp-p.is-ghost { z-index: 3; transition: none; animation: bst-fade .15s ease-out; }
.mmp-p.is-eaten { z-index: 7; transition: none; }
.mmp.is-shake .mmp-panel, .mmp.is-shake .mmp-grid { animation: mmp-shake .3s ease-out; }
@keyframes mmp-shake { 0%, 100% { translate: 0; } 20% { translate: 2.1cqw 0; } 45% { translate: -1.9cqw 0; } 70% { translate: 1.1cqw 0; } }

/* the finger under a dragged piece */
.mmp-finger { position: absolute; z-index: 6; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; border-radius: 50%; background: rgba(255, 255, 255, .28); box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .35); opacity: 0; transition: left .5s cubic-bezier(.3, 1, .4, 1), top .5s cubic-bezier(.3, 1, .4, 1), opacity .2s; pointer-events: none; }
.mmp-finger.is-on { opacity: 1; }
.mmp-finger.is-quick { transition-duration: .26s, .26s, .2s; }

/* rows and columns: the white frame of the app's preview, and the guide pointing at a line (yellow, site only) */
.mmp-ln { position: absolute; z-index: 4; box-sizing: border-box; border-radius: 2.34cqw; border: .802cqw solid rgba(255, 255, 255, .9); pointer-events: none; }
.mmp-ln.is-hl { border-color: #ffd400; animation: mmp-hl 1.2s ease-in-out infinite alternate; box-shadow: 0 0 3cqw rgba(255, 212, 0, .45); }
@keyframes mmp-hl { from { opacity: .55; } to { opacity: 1; } }
.mmp-mk { position: absolute; box-sizing: border-box; border-radius: 2.6cqw; box-shadow: 0 0 0 .8cqw #ffd400, 0 0 4cqw rgba(255, 212, 0, .7); animation: mmp-hl .8s ease-in-out infinite alternate; }
.mmp-trayhl { position: absolute; box-sizing: border-box; border-radius: 4cqw; box-shadow: 0 0 0 .8cqw rgba(255, 212, 0, .85), 0 0 5cqw rgba(255, 212, 0, .4); opacity: 0; animation: mmp-point 1.6s ease-out; }
@keyframes mmp-point { 0% { opacity: 0; transform: scale(.96); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* FX: sweep, bits flying to Gnatz, eyes running off, shards, ×2 banner, ring */
.mmp-sweep { position: absolute; overflow: hidden; border-radius: 1.5cqw; }
.mmp-sweep b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .85) 45%, rgba(255, 212, 0, .85) 55%, transparent); animation: mmp-sweep .6s cubic-bezier(.4, 0, .2, 1) both; }
.mmp-sweep.is-v b { background: linear-gradient(180deg, transparent, rgba(255, 212, 0, .85) 45%, rgba(255, 212, 0, .85) 55%, transparent); animation-name: mmp-sweep-v; }
@keyframes mmp-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes mmp-sweep-v { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.mmp-chunk { position: absolute; box-sizing: border-box; border-radius: 25%; border: max(1.5px, .5cqw) solid #0e0b1a; }
.mmp-flee { position: absolute; }
.mmp-flee svg { display: block; width: 100%; height: 100%; }
.mmp-shard { position: absolute; border-radius: 30%; }
.mmp-banner { position: absolute; z-index: 2; transform: translate(-50%, -50%) rotate(-4deg); padding: 1.6cqw 4cqw; border-radius: 3.5cqw; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-size: 8cqw; font-weight: 800; line-height: 1; white-space: nowrap; text-transform: uppercase; box-shadow: inset 0 0 0 .8cqw #0e0b1a, 0 1.4cqw 0 #0e0b1a; animation: mmp-banner 1.4s cubic-bezier(.3, 1.6, .5, 1) both; }
.mmp-banner.is-hot { background: #ff4d6d; font-size: 4.6cqw; text-transform: none; white-space: normal; width: max-content; max-width: 84cqw; text-align: center; line-height: 1.15; animation-duration: 2s; }
@keyframes mmp-banner { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.3); } 18%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) rotate(-4deg) scale(1); } }
.mmp-ring { position: absolute; border-radius: 50%; border: 1.2cqw solid #ffd400; box-sizing: border-box; animation: mmp-ring .65s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes mmp-ring { from { transform: translate(-50%, -50%) scale(.2); opacity: .95; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

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

/* ---------- on a card: Gnatz peeks over the board ---------- */
.bst-board-card.is-blocks { padding: 14px 14px 18px; background: linear-gradient(180deg, #2a1c63, #17112f); border-color: #0e0b1a; }
.mmp-ui { --pw: 19%; position: relative; }
.mmp-ui .gx-stage .gx-peek, .gx.is-blocks .gx-peek { --px: .5; }
.gx-stage.is-blocks .mmp { z-index: 1; }

/* ---------- the game screen ---------- */
.gx.is-blocks { --pw: 19%; }
.gx.is-blocks .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-blocks .gx-icons, .gx.is-blocks .gx-pill { margin-top: 14px; }
.gx.is-blocks .gx-title { gap: 1px; }
.gx.is-blocks .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-blocks .st { width: 17px; height: 17px; }
.gx.is-blocks .gx-moves { display: inline-flex; align-items: center; gap: 5px; 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.is-blocks .gx-moves i { font-style: normal; }
.gx.is-blocks .gx-fog { display: inline-flex; align-items: center; gap: 3px; color: #9c97cf; }
.gx.is-blocks .gx-pill { white-space: nowrap; }
.gx.is-blocks .mmp-cloud { width: 11px; height: 8px; fill: currentColor; }
.gx.is-blocks .gx-moves.is-clear .gx-fog, .gx.is-blocks .gx-moves.is-clear .is-fogdot { display: none; }
.gx.is-blocks .gx-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.gx.is-blocks .gx-moves.is-out i:not(.is-fogdot), .gx.is-blocks .gx-moves.is-out .gx-next { display: none; }
.gx.is-blocks .gx-next .st-next { width: 9px; height: 9px; color: currentColor; }
.gx.is-blocks .gx-next.is-hot { color: #ff4d6d; }
.gx.is-blocks .gx-moves.is-hl { animation: mmp-count 1.6s ease-out; }
@keyframes mmp-count { 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-blocks { margin-top: auto; }
.bst-phone .gx.is-blocks .gx-bottom { margin-bottom: auto; }
.bst-phone .gx.is-blocks .gx-tools { margin-top: 2px; }
.gx-tools.is-1 { grid-template-columns: 1fr; }
.gx.is-blocks .gx-home { margin-top: 0; }

/* ---------- on the site ---------- */
.mmp-box { padding: 0; }
.bst-mini.is-blocks { background: #1a1533; }
.bst-tier.is-blocks .bst-tier-board { margin-bottom: 10px; padding: 0 2px 6px; }
.bst-fan-card.is-blocks { display: flex; }
.bst-fan-card.is-blocks .bst-fan-well { flex: 1; display: flex; align-items: center; min-width: 0; padding: 4px 4px 8px; }
.bst-fan-card.is-blocks .bst-fan-well .mmp { flex: 1; }
.bst-how-pic .bst-scene:has(.bst-how-mmp) { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-mmp) { height: 100%; display: grid; place-items: center; }
.bst-how-mmp { height: 94%; aspect-ratio: 100 / 129.412; }
.bst-how-mmp .mmp { width: 100%; }
.bst-game-well.mmp-box { padding: 4px 4px 10px; }
.bst-game.is-blocks .bst-game-monster { display: none; }

/* one level */
.bst-level.is-blocks { max-width: 760px; }
.bst-stk-stage.mmp-stage-lv { max-width: 400px; margin-inline: auto; padding: 14px 14px 18px; border-radius: 22px; background: linear-gradient(180deg, #2a1c63, #17112f); }
.bst-level.is-blocks .bst-player figcaption, .bst-level.is-blocks .bst-player-bar { max-width: 560px; margin-inline: auto; }
.bst-level.is-blocks .bst-move-list small { color: var(--muted); }
.bst-level.is-blocks .bst-move-list li.is-trio { margin-top: 10px; }
.mmp-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; }
.mmp-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); }
.mmp-facts strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--text); }
.mmp-facts span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.mmp-facts .is-stars strong { display: inline-flex; gap: 2px; color: #ffd400; }
.mmp-facts .st { width: 22px; height: 22px; }
@media (max-width: 560px) {
	.mmp-facts { gap: 6px; }
	.mmp-facts strong { font-size: 1.4rem; }
	.mmp-facts .st { width: 17px; height: 17px; }
	.bst-stk-stage.mmp-stage-lv { padding: 10px 10px 14px; }
}