/* Beasties: Paint Trail (inc/beasties-paint.php, assets/js/beasties-paint.js). Prefix pnt. The board is LabFrame of the
 * app (Block Munch's frame: panel #241E45 with a sticker edge and hard shadow, well #1A1533), sizes in cqw of .pnt so
 * the same numbers work in the phone, on a card, a tier card or the level page. */

/* ---------- the board ---------- */
.pnt { container-type: inline-size; position: relative; width: 100%; user-select: none; -webkit-user-select: none; }
.pnt-panel { padding: 2.5cqw; border-radius: 6.2cqw; background: #241e45; box-shadow: inset 0 0 0 .93cqw #0e0b1a, 0 1.85cqw 0 #0e0b1a; }
.pnt-well { padding: 1.25cqw; border-radius: 4.3cqw; background: #1a1533; box-shadow: inset 0 0 0 .93cqw #0e0b1a; }
.pnt-field { position: relative; aspect-ratio: var(--w) / var(--h); }
.pnt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pnt-t .pnt-tin { transform-box: fill-box; transform-origin: center; transform: scale(.2); opacity: 0; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), opacity .18s ease-out; }
.pnt-t.is-on .pnt-tin { transform: none; opacity: 1; }
.pnt-t.is-on.is-fresh .pnt-tin { transform: scale(1.15); }
.pnt-head { position: absolute; z-index: 2; left: calc(var(--x) * 100% / var(--w)); top: calc(var(--y) * 100% / var(--h)); width: calc(100% / var(--w)); height: calc(100% / var(--h)); pointer-events: none; }
.pnt.is-live .pnt-head { transition: left .05s linear, top .05s linear; }
.pnt-hb { position: absolute; inset: 7%; }
.pnt-hb img { display: block; width: 100%; height: 100%; }
.pnt-hb.is-squash { animation: pnt-squash .37s ease-out; }
.pnt-head[data-dir="0"] .pnt-hb.is-squash, .pnt-head[data-dir="2"] .pnt-hb.is-squash { animation-name: pnt-squash-v; }
.pnt-hb.is-jump { animation: pnt-jump .8s ease-out; }
.pnt-hb.is-bump { animation: pnt-bump-x .32s ease-out; }
.pnt-head[data-dir="3"] .pnt-hb.is-bump { animation-name: pnt-bump-l; }
.pnt-head[data-dir="0"] .pnt-hb.is-bump { animation-name: pnt-bump-u; }
.pnt-head[data-dir="2"] .pnt-hb.is-bump { animation-name: pnt-bump-d; }
@keyframes pnt-squash { 0% { transform: none; } 20% { transform: scale(.86, 1.14); } 100% { transform: none; } }
@keyframes pnt-squash-v { 0% { transform: none; } 20% { transform: scale(1.14, .86); } 100% { transform: none; } }
@keyframes pnt-jump { 0% { transform: none; } 22% { transform: translateY(-35%); } 42% { transform: none; } 58% { transform: translateY(-15%); } 75%, 100% { transform: none; } }
@keyframes pnt-bump-x { 0%, 100% { transform: none; } 35% { transform: translateX(9%) scale(.92, 1.06); } }
@keyframes pnt-bump-l { 0%, 100% { transform: none; } 35% { transform: translateX(-9%) scale(.92, 1.06); } }
@keyframes pnt-bump-u { 0%, 100% { transform: none; } 35% { transform: translateY(-9%) scale(1.06, .92); } }
@keyframes pnt-bump-d { 0%, 100% { transform: none; } 35% { transform: translateY(9%) scale(1.06, .92); } }
/* marks of the scenes: stop points (yellow), crossed fields (white), fields out of reach (red), the path of a swipe */
.pnt-mk { fill: none; stroke-width: 7; animation: pnt-mk .35s cubic-bezier(.3, 1.6, .5, 1) both; transform-box: fill-box; transform-origin: center; }
.pnt-mk.is-stop { stroke: #ffd400; stroke-dasharray: 16 10; }
.pnt-mk.is-again { stroke: #fff; }
.pnt-mk.is-lost { stroke: #ff4d6d; fill: rgba(255, 77, 109, .22); animation: pnt-mk .35s cubic-bezier(.3, 1.6, .5, 1) both, pnt-throb 1s ease-in-out .4s infinite alternate; }
.pnt-gh { fill: rgba(255, 255, 255, .28); animation: pnt-mk .3s ease-out both; transform-box: fill-box; transform-origin: center; }
.pnt-gh-arrow { fill: #ffd400; stroke: #0e0b1a; stroke-width: 5; stroke-linejoin: round; animation: pnt-arrow .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pnt-mk { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pnt-arrow { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pnt-throb { 0% { opacity: 1; } 100% { opacity: .45; } }
.pnt-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.pnt-finger { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), 0 6px 14px rgba(0, 0, 0, .35); }
/* the route map of a solution: the number of every swipe that ends on a field */
.pnt-num { position: absolute; z-index: 3; left: calc(var(--x) * 100% / var(--w)); top: calc(var(--y) * 100% / var(--h)); width: calc(100% / var(--w)); height: calc(100% / var(--h)); display: grid; place-items: center; pointer-events: none; }
.pnt-num::before { content: ""; position: absolute; inset: 22%; border-radius: 999px; background: #ffd400; box-shadow: 0 0 0 .6cqw #0e0b1a, 0 .8cqw 0 #0e0b1a; }
.pnt-num { color: #0e0b1a; font: 900 calc(30cqw / var(--w)) / 1 var(--display, system-ui), system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pnt-num.is-many { font-size: calc(21cqw / var(--w)); }
.pnt-num.is-many::before { inset: 22% 6%; }
@media (prefers-reduced-motion: reduce) { .pnt *, .pnt *::before { animation: none !important; transition: none !important; } }

/* ---------- on the game screen ---------- */
.gx.is-paint { --pw: 21%; }
.bst-phone .gx-stage.is-paint { margin-top: auto; padding-left: 4px; padding-right: 4px; }
.gx-stage.is-paint .pnt, .pnt-stage .pnt { position: relative; z-index: 1; }
.gx-stage.is-paint .gx-peek, .pnt-stage .gx-peek { z-index: 2; --px: .5; }
.gx.is-paint .gx-title { gap: 1px; }
.pnt-moves { display: inline-flex; align-items: center; justify-content: center; gap: 5px; margin-top: 3px; font-size: .66rem; font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnt-moves i { font-style: normal; }
.pnt-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.pnt-next .st-next { width: 9px; height: 9px; color: currentColor; }
.pnt-next.is-hot { color: #ff4d6d; }
.bst-phone .gx.is-paint .gx-bottom { margin-bottom: auto; padding-bottom: 6%; }
.gx.is-paint .gx-tools { grid-template-columns: repeat(2, 1fr); max-width: 62%; margin: 22px auto 0; }
.gx.is-paint .gx-tool.is-off { opacity: .45; }
.gx.is-paint .gx-tool.is-press > svg { animation: bst-press .3s ease-out; }

/* ---------- guide ---------- */
.bst-board-card.is-paint { padding: 14px 14px 20px; max-width: min(360px, calc(300px * var(--w) / var(--h) + 28px)); background: linear-gradient(180deg, #2f294f, #241e45); border-color: #0e0b1a; }
.pnt-stage { --pw: 21%; position: relative; padding-top: calc(var(--pw) * .764); }
.pnt-need { position: absolute; z-index: 4; left: 50%; bottom: -12px; transform: translate(-50%, 0); display: inline-block; max-width: 92%; padding: 5px 12px; border-radius: 999px; background: #ffd400; color: #0e0b1a; font-size: .78rem; font-weight: 800; line-height: 1.25; text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px #0e0b1a, 0 3px 0 #0e0b1a; opacity: 0; transition: opacity .2s, background-color .2s; }
.pnt-need.is-on { opacity: 1; }
.pnt-need.is-none { background: #ff4d6d; color: #fff; white-space: normal; }
.pnt-need.is-pop { animation: pnt-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pnt-pop { 0% { transform: translate(-50%, 0) scale(.7); } 100% { transform: translate(-50%, 0) scale(1); } }
.bst-tier.is-paint .bst-tier-board { max-width: 190px; margin: 0 auto 8px; }

/* ---------- overview ---------- */
.bst-mini.is-paint { background: #241e45; }
.bst-fan-card.is-paint { display: grid; place-items: center; padding: 10px; background: #241e45; }
.pnt-fan { width: var(--fw); max-width: 100%; }
.bst-how-pnt { width: 46%; }
.bst-how-board.is-paint { width: 46%; display: grid; place-items: center; }
.bst-how-board.is-paint .pnt { animation: bst-unblur 5s ease-in-out infinite; }
/* the game card: the app's PaintMiniArt (4×4, half painted, tilted) */
.pnt-home { display: inline-block; width: 112px; transform: rotate(-3deg); }
.pnt.is-home .pnt-panel { padding: 0; border-radius: 12px; background: none; box-shadow: none; }
.pnt.is-home .pnt-well { padding: 5px; border-radius: 10px; box-shadow: inset 0 0 0 2.5px #0e0b1a; }
.bst-tile-pic .pnt-home { width: 96px; }

/* ---------- one level ---------- */
.bst-level.is-paint .bst-boards { align-items: start; }
.bst-pnt-stage { padding: 10px 12px 18px; border-radius: 22px; background: linear-gradient(180deg, #2f294f, #241e45); box-shadow: inset 0 0 0 3px #0e0b1a, 0 8px 0 #0e0b1a, 0 30px 60px -30px rgba(0, 0, 0, .7); }
.bst-pnt-stage .pnt-stage { max-width: 420px; margin: 0 auto; }
.pnt-score { position: absolute; z-index: 3; left: 4px; top: 2px; display: flex; gap: 2px; }
.pnt-score .st { width: 20px; height: 20px; color: #ffd400; transition: color .3s, transform .3s; }
.pnt-score .st.is-lost { color: #2c2456; transform: scale(.85); }
.bst-level.is-paint:not(.is-self) .pnt-score { visibility: hidden; }
.bst-level.is-paint.is-self .pnt { touch-action: none; cursor: grab; }
.bst-level.is-paint .pnt:focus-visible { outline: 3px solid #ffd400; outline-offset: 4px; border-radius: 8px; }
.bst-level.is-paint .bst-player-bar { margin-top: 16px; }
.bst-level.is-paint.is-done .pnt-say { color: var(--zap); font-weight: 700; }
.bst-level.is-paint.is-dead .pnt-say { color: #ff8da1; font-weight: 700; }
.pnt-modes { display: flex; gap: 4px; width: fit-content; margin: 0 auto 12px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.pnt-modes button { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.pnt-modes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.pnt-modes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pnt-bar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.pnt-bar[hidden] { display: none; }
.pnt-pad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 48px); gap: 5px; }
.pnt-pad .is-up { grid-column: 2; grid-row: 1; }
.pnt-pad .is-left { grid-column: 1; grid-row: 2; }
.pnt-pad .is-down { grid-column: 2; grid-row: 2; }
.pnt-pad .is-right { grid-column: 3; grid-row: 2; }
.pnt-pad .pnt-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pnt-side { display: grid; gap: 6px; }
.pnt-tool { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; transition: transform .15s, border-color .15s; }
.pnt-tool svg { width: 22px; height: 22px; }
.pnt-side .pnt-tool { flex-direction: row; gap: 6px; padding: 9px 14px; }
.pnt-tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.pnt-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bst-spoiler.is-paint { display: grid; place-items: center; padding: 14px 14px 22px; border-radius: 22px; background: radial-gradient(80% 80% at 50% 30%, #3a2f74, #1a1533); box-shadow: inset 0 0 0 3px #0e0b1a; }
.pnt-sol { width: 100%; max-width: 400px; transition: filter .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bst-spoiler.is-paint:not(.is-open) .pnt-sol { filter: blur(16px) saturate(.5); transform: scale(.94); }
.bst-spoiler.is-paint .bst-cover { border-radius: 22px; }
.pnt-sol-note { color: var(--text-2); font-size: .85rem; }
.pnt-facts { margin: clamp(22px, 4vw, 36px) auto 0; max-width: 880px; padding: clamp(16px, 3vw, 24px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.pnt-facts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.pnt-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pnt-facts-list div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.pnt-facts-list dt { font-size: .8rem; color: var(--muted); }
.pnt-facts-list dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pnt-stars { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; padding: 0; font-size: .9rem; color: var(--text-2); }
.pnt-stars li { display: inline-flex; align-items: center; gap: 8px; }
.pnt-stars li.is-lost { color: #e0566f; font-weight: 600; }
.pnt-sr { display: inline-flex; gap: 1px; }
.pnt-sr .st { width: 16px; height: 16px; color: var(--zap, #ffc400); filter: drop-shadow(0 1px 0 #0e0b1a); }
.pnt-sr .st.is-off { color: color-mix(in srgb, var(--muted) 45%, transparent); filter: none; }
.bst-level.is-paint .bst-move-list ol { columns: 2 16em; }
@media (max-width: 760px) { .bst-level.is-paint .bst-boards { max-width: 560px; } }
@media (max-width: 620px) { .pnt-facts-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .bst-pnt-stage, .bst-spoiler.is-paint { padding: 6px 6px 14px; border-radius: 16px; } .pnt-pad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 44px); } .pnt-bar { gap: 12px; } }
.gx-stage.is-paint .gx-toast strong, .pnt-stage .gx-toast strong { white-space: nowrap; font-size: 1.3rem; }
.bst-level.is-paint [data-pane][hidden] { display: none; }
.pnt-num { isolation: isolate; } .pnt-num::before { z-index: -1; }
.pnt-hb:has(img[src*="labtile-"]) { inset: -3.35%; }