/* Beasties: Triple Trouble (Match3View.swift). .m3 has --w × --h cells; every sprite is one cell (--x, --y), the
 * shapes (floor, goo, fog, walls) are SVG in 100 units per cell. PHP draws the start, beasties-match3.js plays runs. */
.m3 { position: relative; width: 100%; }
.m3-field { position: relative; width: 100%; aspect-ratio: var(--w) / var(--h); }
.m3-field > svg, .m3-l, .m3-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.m3-field > svg { overflow: visible; pointer-events: none; }
.m3-l { pointer-events: none; }
.m3-under { z-index: 1; } .m3-goo { z-index: 0; } .m3-pieces { z-index: 2; overflow: hidden; border-radius: 6px; } .m3-blocks { z-index: 3; } .m3-chains { z-index: 4; }
.m3-fog { z-index: 5; } .m3-edges { z-index: 6; } .m3-fx { z-index: 7; pointer-events: none; overflow: hidden; border-radius: 6px; }
.m3-s {
	position: absolute; display: block; left: calc(var(--x) * 100% / var(--w)); top: calc(var(--y) * 100% / var(--h));
	width: calc(100% / var(--w)); height: calc(100% / var(--h)); background: center / 100% 100% no-repeat;
	transition: left .16s ease-in-out, top var(--fall, .3s) cubic-bezier(.3, 1.25, .5, 1), transform .2s, opacity .2s;
}
.m3-s.is-giant { width: calc(200% / var(--w)); height: calc(200% / var(--h)); }
.m3-s.is-small { transform: scale(.86); }
.m3-s.is-drop { transition: left .16s, top var(--fall, .3s) cubic-bezier(.45, 0, .6, 1.25); }
.m3-s.is-gone { opacity: 0; transform: scale(.25); transition: opacity .22s, transform .22s; }
.m3-s.is-pop { animation: m3-pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.m3-s.is-new { animation: m3-new .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes m3-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes m3-new { 0% { transform: scale(.2); filter: brightness(2); } 60% { transform: scale(1.18); } 100% { transform: none; filter: none; } }
.m3-s.is-mark { z-index: 3; animation: m3-mark .8s ease-in-out infinite alternate; filter: drop-shadow(0 0 4px #ffd400) drop-shadow(0 0 2px #ffd400); }
@keyframes m3-mark { from { transform: scale(1); } to { transform: scale(1.1); } }
.m3-s.is-nope { animation: m3-nope .45s ease-out; }
@keyframes m3-nope { 0%, 100% { transform: none; } 20% { transform: rotate(9deg); } 45% { transform: rotate(-7deg); } 70% { transform: rotate(4deg); } }
.m3.is-shake .m3-field { animation: m3-shake .3s ease-out; }
@keyframes m3-shake { 0%, 100% { transform: none; } 20% { transform: translateX(6px); } 45% { transform: translateX(-5px); } 70% { transform: translateX(3px); } }
.m3.is-won .m3-pieces .m3-s { animation: m3-won .6s ease-out both; }
@keyframes m3-won { 40% { transform: translateY(-14%) scale(1.08); filter: brightness(1.25); } 100% { transform: none; } }
.m3:not(.is-live) * { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .m3 *, .gx.is-m3 * { transition: none !important; animation: none !important; } }

/* the app's sprites (Match3SpriteCache, exported from the app as match3-*.webp) */
.m3-s.is-m0 { background-image: url(../img/beasties/match3-m0.webp); }
.m3-s.is-m1 { background-image: url(../img/beasties/match3-m1.webp); }
.m3-s.is-m2 { background-image: url(../img/beasties/match3-m2.webp); }
.m3-s.is-m3 { background-image: url(../img/beasties/match3-m3.webp); }
.m3-s.is-m4 { background-image: url(../img/beasties/match3-m4.webp); }
.m3-s.is-m5 { background-image: url(../img/beasties/match3-m5.webp); }
.m3-s.is-pR { background-image: url(../img/beasties/match3-p-rh.webp); }
.m3-s.is-pV { background-image: url(../img/beasties/match3-p-rv.webp); }
.m3-s.is-pP { background-image: url(../img/beasties/match3-p-prop.webp); }
.m3-s.is-pT { background-image: url(../img/beasties/match3-p-tnt.webp); }
.m3-s.is-pL { background-image: url(../img/beasties/match3-p-light.webp); }
.m3-s.is-pU { background-image: url(../img/beasties/match3-p-super.webp); }
.m3-s.is-pM { background-image: url(../img/beasties/match3-p-mega.webp); }
.m3-s.is-B { background-image: url(../img/beasties/match3-baby.webp); }
.m3-s.is-c1 { background-image: url(../img/beasties/match3-crate1.webp); }
.m3-s.is-c2 { background-image: url(../img/beasties/match3-crate2.webp); }
.m3-s.is-i1 { background-image: url(../img/beasties/match3-ice1.webp); }
.m3-s.is-i2 { background-image: url(../img/beasties/match3-ice2.webp); }
.m3-s.is-k { background-image: url(../img/beasties/match3-chain.webp); }
.m3-s.is-S { background-image: url(../img/beasties/match3-stone.webp); }
.m3-s.is-fog { background-image: url(../img/beasties/match3-fog.webp); }
.m3-s.is-goo { background-image: url(../img/beasties/match3-goo.webp); }
.m3-s.is-g1 { background-image: url(../img/beasties/match3-giant1.webp); }
.m3-s.is-g2 { background-image: url(../img/beasties/match3-giant2.webp); }
.m3-s.is-g3 { background-image: url(../img/beasties/match3-giant3.webp); }
.m3-s.is-q0-1 { background-image: url(../img/beasties/match3-cc0-1.webp); } .m3-s.is-q0-2 { background-image: url(../img/beasties/match3-cc0-2.webp); } .m3-s.is-q0-3 { background-image: url(../img/beasties/match3-cc0-3.webp); }
.m3-s.is-q1-1 { background-image: url(../img/beasties/match3-cc1-1.webp); } .m3-s.is-q1-2 { background-image: url(../img/beasties/match3-cc1-2.webp); } .m3-s.is-q1-3 { background-image: url(../img/beasties/match3-cc1-3.webp); }
.m3-s.is-q2-1 { background-image: url(../img/beasties/match3-cc2-1.webp); } .m3-s.is-q2-2 { background-image: url(../img/beasties/match3-cc2-2.webp); } .m3-s.is-q2-3 { background-image: url(../img/beasties/match3-cc2-3.webp); }
.m3-s.is-q3-1 { background-image: url(../img/beasties/match3-cc3-1.webp); } .m3-s.is-q3-2 { background-image: url(../img/beasties/match3-cc3-2.webp); } .m3-s.is-q3-3 { background-image: url(../img/beasties/match3-cc3-3.webp); }
.m3-s.is-q4-1 { background-image: url(../img/beasties/match3-cc4-1.webp); } .m3-s.is-q4-2 { background-image: url(../img/beasties/match3-cc4-2.webp); } .m3-s.is-q4-3 { background-image: url(../img/beasties/match3-cc4-3.webp); }
.m3-s.is-q5-1 { background-image: url(../img/beasties/match3-cc5-1.webp); } .m3-s.is-q5-2 { background-image: url(../img/beasties/match3-cc5-2.webp); } .m3-s.is-q5-3 { background-image: url(../img/beasties/match3-cc5-3.webp); }
/* 200-level update: gargoyle, mushroom, letters, treasures, fixtures (match3-*.webp from the app's Match3SpriteCache) */
.m3-s.is-gar { background-image: url(../img/beasties/match3-gargoyle.webp); }
.m3-s.is-shroom { background-image: url(../img/beasties/match3-shroom.webp); }
.m3-s.is-ltr { background-image: url(../img/beasties/match3-letter.webp); }
.m3-s.is-gem { background-image: url(../img/beasties/match3-treasure.webp); }
.m3-s.is-mail { background-image: url(../img/beasties/match3-mailbox.webp); }
.m3-s.is-kettle { background-image: url(../img/beasties/match3-kettle.webp); }
.m3-s.is-hat0 { background-image: url(../img/beasties/match3-hat0.webp); } .m3-s.is-hat1 { background-image: url(../img/beasties/match3-hat1.webp); } .m3-s.is-hat2 { background-image: url(../img/beasties/match3-hat2.webp); }
.m3-s.is-hat3 { background-image: url(../img/beasties/match3-hat3.webp); } .m3-s.is-hat4 { background-image: url(../img/beasties/match3-hat4.webp); } .m3-s.is-hat5 { background-image: url(../img/beasties/match3-hat5.webp); }
.m3-s.is-cup2x1-1 { background-image: url(../img/beasties/match3-cup2x1-1.webp); } .m3-s.is-cup2x1-2 { background-image: url(../img/beasties/match3-cup2x1-2.webp); } .m3-s.is-cup2x1-3 { background-image: url(../img/beasties/match3-cup2x1-3.webp); }
.m3-s.is-cup2x2-1 { background-image: url(../img/beasties/match3-cup2x2-1.webp); } .m3-s.is-cup2x2-2 { background-image: url(../img/beasties/match3-cup2x2-2.webp); } .m3-s.is-cup2x2-3 { background-image: url(../img/beasties/match3-cup2x2-3.webp); }
.m3-s.m3-fix { width: calc(var(--fw, 1) * 100% / var(--w)); height: calc(var(--fh, 1) * 100% / var(--h)); }
.m3-fix > svg { display: block; width: 100%; height: 100%; overflow: visible; font-family: ui-rounded, "SF Pro Rounded", var(--display), system-ui, sans-serif; }
.m3-fix.is-hit { animation: m3-hit .32s ease-out; }
@keyframes m3-hit { 0%, 100% { transform: none; } 30% { transform: scale(1.14); } 62% { transform: scale(.94); } }
.m3-blocks .m3-s.is-pop { animation: m3-sprout .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes m3-sprout { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
.m3-s.is-land { animation: m3-land .3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--land, .4s); }
@keyframes m3-land { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.m3-toss { position: absolute; z-index: 3; }
.m3-fix-gone { position: absolute; }
.m3-eye { animation: m3-blink 3.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes m3-blink { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(.1); } }

/* FX */
.m3-sweep { position: absolute; overflow: hidden; }
.m3-sweep b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--fc) 40%, #fff 50%, var(--fc) 60%, transparent); opacity: .9; }
.m3-sweep.is-v b { background: linear-gradient(180deg, transparent, var(--fc) 40%, #fff 50%, var(--fc) 60%, transparent); }
.m3-ring { position: absolute; border-radius: 50%; border: 4px solid #ffd400; box-sizing: border-box; }
.m3-flash { position: absolute; border-radius: 14%; }
.m3-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m3-rays line { stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
.m3-prop { z-index: 2; position: absolute; }
.m3-carry { left: 20%; top: 55%; width: 60%; height: 60%; --x: 0; --y: 0; }
.m3-banner { position: absolute; left: 50%; top: 35%; z-index: 9; padding: 6px 16px; border-radius: 12px; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-size: clamp(1rem, 5cqw, 1.6rem); font-weight: 800; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 0 #0e0b1a; }
.m3-fly { position: fixed; z-index: 9999; pointer-events: none; transition: none; }
.m3-arrow { position: absolute; z-index: 8; left: calc((var(--x) + .5) * 100% / var(--w)); top: calc((var(--y) + .5) * 100% / var(--h)); width: calc(70% / var(--w)); aspect-ratio: 1; transform: translate(-50%, -50%); background: #ffd400; border-radius: 50%; box-shadow: 0 0 0 3px #0e0b1a, 0 0 14px rgba(255, 212, 0, .8); animation: m3-arrow .8s ease-in-out infinite alternate; }
.m3-arrow::after { content: ""; position: absolute; inset: 22%; background: #0e0b1a; clip-path: polygon(0 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0 65%); }
.m3-arrow.is-l::after { transform: rotate(180deg); } .m3-arrow.is-d::after { transform: rotate(90deg); } .m3-arrow.is-u::after { transform: rotate(-90deg); }
@keyframes m3-arrow { from { transform: translate(-50%, -50%) scale(.9); } to { transform: translate(-50%, -50%) scale(1.08); } }

/* the dark panel the board sits on (Match3BoardView background, dark in light mode too) */
.m3-well { position: relative; padding: 8px; border-radius: 18px; background: linear-gradient(180deg, #2c2650, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a; container-type: inline-size; }
.m3-well.is-card { padding: 6px; border-radius: 14px; }

/* goals (Match3Goals): a card with the yellow sticker */
.m3-goals { position: relative; margin: 10px 0 14px; padding: 8px 8px; border-radius: 18px; background: #241e45; box-shadow: inset 0 0 0 2px #0e0b1a, 0 4px 0 #0e0b1a; color: #ede7ff; }
.m3-goals-tag { position: absolute; left: -4px; top: -10px; padding: 2px 8px; border-radius: 8px; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-size: .72rem; font-weight: 800; transform: rotate(-6deg); box-shadow: 0 2px 0 #0e0b1a; }
.m3-goals ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around; gap: 4px; }
.m3-goals li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.m3-goals li .m3-s { position: relative; left: auto; top: auto; width: 30px; height: 30px; flex: none; }
.m3-goals li b { font-family: var(--display); font-size: 1.15rem; min-width: 1.4em; font-variant-numeric: tabular-nums; }
.m3-goals li.is-done b { font-size: 0 !important; }
.m3-goals li.is-done b::before { content: "✓"; font-size: 1.2rem; color: #7ed957; }
.m3-goals li.is-bump b { animation: bst-pop .25s ease-out; }
.m3-goals.is-4 li .m3-s, .m3-goals.is-5 li .m3-s { width: 24px; height: 24px; }
.m3-goals.is-4 li b, .m3-goals.is-5 li b { font-size: .95rem; }

/* ---------- the game screen ---------- */
.gx.is-m3 .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-m3 .gx-icons, .gx.is-m3 .gx-pill { margin-top: 14px; }
.gx.is-m3 .gx-title { gap: 1px; }
.gx.is-m3 .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-m3 .st { width: 17px; height: 17px; }
.gx-stars.is-capped .st:last-child { color: #2c2456; }
.m3-info { display: inline-flex; gap: 3px; align-items: center; margin-top: 2px; font-size: .66rem; font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m3-info .st-in { width: 9px; height: 9px; color: currentColor; }
.m3-in { display: inline-flex; gap: 2px; align-items: center; }
.m3-in.is-hot { color: #ff4d6d; }
.bst-phone .gx.is-m3 .m3-goals { margin: 12px 4px 8px; flex: none; }
.gx-stage.is-m3 { margin-top: 6px; }
.gx-well.is-m3 { display: block; padding: 7px; }
.gx-tools.is-3 { grid-template-columns: repeat(3, 1fr); }
.bst-phone .gx.is-m3 .gx-bottom { margin-top: auto; margin-bottom: 14px; }
.gx.is-m3 .gx-toast { top: 45%; }

/* a board on a card with Gnatz peeking over it */
.bst-board-card.is-m3 { padding: 12px 14px 16px; max-width: 440px; }
.m3-stage { --pw: 19%; position: relative; padding-top: calc(var(--pw) * .764); }
.m3-stage .gx-peek { --px: .72; }
.m3-stage .m3-well { z-index: 1; }
.m3-stage .gx-fx { z-index: 3; }
.m3-from { margin: 12px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }

/* the cards of power-ups, combos and obstacles */
.m3-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.m3-cards.is-obstacles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.m3-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.m3-card h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; font-size: 1.1rem; }
.m3-card h3 small { font-family: var(--body, inherit); font-size: .78rem; font-weight: 600; color: var(--muted); }
.m3-card-tier { display: inline-flex; align-items: center; gap: 5px; font-family: var(--body, inherit); font-size: .74rem; font-weight: 600; color: var(--muted); }
.bst-scene.is-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.bst-scene.is-card .bst-caps { gap: 6px; }
.bst-scene.is-card .bst-caps li { padding: 8px 10px 8px 40px; font-size: .84rem; line-height: 1.4; border-radius: 12px; }
.bst-scene.is-card .bst-caps li::before { left: 9px; top: 8px; width: 22px; height: 22px; font-size: .85rem; }
.m3-cards.is-obstacles .bst-caps li { font-size: .8rem; }
.m3-cards.is-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.m3-cards.is-makers, .m3-cards.is-pots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; }
@media (max-width: 1100px) { .m3-cards.is-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; margin-inline: auto; } }
@media (max-width: 1100px) { .m3-cards.is-obstacles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .m3-cards, .m3-cards.is-obstacles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .m3-cards, .m3-cards.is-obstacles, .m3-cards.is-shapes, .m3-cards.is-makers, .m3-cards.is-pots { grid-template-columns: minmax(0, 1fr); } .m3-card { max-width: 400px; margin-inline: auto; width: 100%; box-sizing: border-box; } }

/* stars: the header of the game screen and a track of moves */
.m3-starcard .gx.is-card { position: relative; padding: 14px 10px 6px; border-radius: 18px; background: #120f24; color: #ede7ff; }
.m3-starcard .gx.is-m3 .gx-head { display: flex; justify-content: center; }
.m3-starcard .gx.is-m3 .gx-title { display: flex; flex-direction: column; align-items: center; }
.m3-starcard .gx-title small { color: #8f86b8; font-size: .78rem; }
.m3-starcard .gx-title b { font-family: var(--display); font-size: 1.5rem; }
.m3-starcard .gx.is-m3 .st { width: 26px; height: 26px; }
.m3-starcard .m3-info { font-size: .85rem; margin-top: 4px; }
.m3-starcard .m3-info .st-in { width: 11px; height: 11px; }
.m3-track { position: relative; height: 14px; margin: 36px 14px 34px; border-radius: 999px; background: #241e45; box-shadow: inset 0 0 0 2px #0e0b1a; }
.m3-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7ed957, #ffc83d 60%, #ff4d6d); transition: width .2s ease-out; }
.m3-track-mark { position: absolute; left: var(--at); top: -8px; bottom: -8px; width: 3px; transform: translateX(-50%); background: #ede7ff; border-radius: 2px; }
.m3-track-mark b { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); font-size: .75rem; color: #8f86b8; }
.m3-track-zero { position: absolute; left: 0; top: 100%; transform: translate(-30%, 12px); font-size: .75rem; color: #8f86b8; }
.m3-starcard .gx-tools { margin-top: 8px; }
.m3-starcard .gx-toast { top: 50%; }

/* ---------- on the site ---------- */
.bst-mini.is-m3 { display: block; background: #1a1533; padding: 6%; box-sizing: border-box; }
.bst-mini.is-m3 svg { display: block; width: 100%; height: 100%; }
.bst-tiers.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .bst-tiers.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .bst-tiers.is-4 { grid-template-columns: minmax(0, 1fr); } }
.bst-tier.is-m3 .bst-tier-board { margin-bottom: 6px; padding: 5px; border-radius: 12px; }
.bst-fan-card.is-m3 { display: flex; left: 17%; right: 17%; aspect-ratio: 1 / 1.12; align-items: center; }
.bst-fan-card .m3-well.bst-fan-well { flex: 1; padding: 5px; border-radius: 12px; }
.bst-how-tiles.is-m3 { grid-template-columns: repeat(4, 1fr); }
.bst-how-pic .bst-scene:has(.bst-how-m3) { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-m3) { width: 100%; height: 100%; display: grid; place-items: center; }
.bst-how-m3 { width: 62%; }
.bst-how-m3 .m3-well { padding: 4px; border-radius: 10px; }
.m3-well.bst-game-well { padding: 5px; border-radius: 14px; }
.bst-game.is-match3 .bst-game-monster { display: none; }

/* one level */
.bst-level.is-m3 { max-width: 760px; }
.m3-player-stage { max-width: 460px; margin-inline: auto; }
.bst-level.is-m3 .bst-player figcaption, .bst-level.is-m3 .bst-player-bar { max-width: 560px; margin-inline: auto; }
.bst-level.is-m3 .bst-player-count small { display: block; min-height: 2.6em; }
.bst-level.is-m3 .bst-move-list li.is-on { font-weight: 700; color: var(--text); }
.bst-level.is-m3 .bst-move-list small { color: var(--muted); }
.bst-play-btn:disabled { opacity: .4; cursor: default; }
.m3-player-stage .m3-stage { padding-top: 0; }
.m3-player-stage .m3-goals { margin: 14px 0 12px; }

/* ---------- toolbar: Restart greyed until the first move (price tags: shared .gx-tag) ---------- */
.m3-tools .gx-tool.is-off { color: rgba(143, 134, 184, .8); }