/* Beasties: Goo Pipes (PipeGame.swift, board in the Block Munch frame LabFrame). .gpp is the container: every size
 * is in cqw of it. Panel = 100cqw wide (8 pt panel + 4 pt well padding = 3.175cqw, as in a 378 pt wide stage), the
 * grid is 93.65cqw wide with cells of --c cqw; --bh = the whole height. Pipes are drawn in their base orientation and
 * turned by --t quarter turns; goo is one stroke per pipe end (pathLength 1) that runs in after --dl. Dark like the
 * app in both themes. Class prefix gpp-. */
.gpp { position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; }
.gpp-in { position: relative; height: calc(var(--bh) * 1cqw); }
.gpp-panel { position: absolute; left: 0; right: 0; top: 0; bottom: 1.587cqw; box-sizing: border-box; border-radius: 5.29cqw; background: #241e45; border: .794cqw solid #0e0b1a; box-shadow: 0 1.587cqw 0 #0e0b1a; }
.gpp-well { position: absolute; left: 2.116cqw; right: 2.116cqw; top: 2.116cqw; bottom: calc(1.587cqw + 2.116cqw); border-radius: 3.7cqw; background: #1a1533; box-shadow: inset 0 0 0 .794cqw #0e0b1a; }
.gpp-grid { position: absolute; left: 3.175cqw; top: 3.175cqw; width: 93.65cqw; height: calc(var(--c) * var(--h) * 1cqw); }
.gpp-hollows { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; fill-opacity: .05; }
.gpp-c { position: absolute; left: calc(var(--x) * var(--c) * 1cqw); top: calc(var(--y) * var(--c) * 1cqw); width: calc(var(--c) * 1cqw); height: calc(var(--c) * 1cqw); display: block; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
button.gpp-c { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.gpp-c:focus-visible { outline: 3px solid #ffd400; outline-offset: -3px; border-radius: 18%; z-index: 3; }
.gpp-r { position: absolute; inset: 0; transform: rotate(calc(var(--t) * 90deg)); transition: transform .34s cubic-bezier(.3, 1.45, .5, 1); }
.gpp-tile, .gpp-barrel, .gpp-bolts, .gpp-rock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gpp-rock { z-index: 1; }

/* goo: runs in from its first new spot on (the app's trim), drains quickly when it is gone */
.gpp-g { fill: none; stroke-width: 20; stroke-linecap: round; stroke-dasharray: 1 3; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .12s ease-out, opacity 0s linear .12s, stroke .2s; }
.gpp-g.is-on { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .055s linear var(--dl, 0s), opacity 0s linear var(--dl, 0s), stroke .2s; }
.gpp.is-still .gpp-g, .gpp.is-still .gpp-r { transition: none !important; }
/* still boards (difficulty cards, game card): the goo runs in on a loop */
.gpp.is-loop .gpp-g.is-on { animation: gpp-loop 7s linear var(--gd, 0s) infinite both; }
@keyframes gpp-loop { 0% { stroke-dashoffset: 1; opacity: 0; } .2% { opacity: 1; stroke-dashoffset: 1; } 1% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { opacity: 0; stroke-dashoffset: 0; } }

/* barrel (breathes like PipeBarrel), bolts, monster tile (LabMonsterTile, 70 % of the cell) */
.gpp-barrel { z-index: 1; transform-origin: 50% 50%; animation: gpp-breathe .9s ease-in-out infinite alternate; }
@keyframes gpp-breathe { from { transform: none; } to { transform: scale(1.04); } }
.gpp-bolts { z-index: 1; pointer-events: none; }
.gpp-mon { position: absolute; z-index: 1; left: 6.6%; top: 6.6%; width: 86.8%; height: 86.8%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.gpp-mon img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.gpp-mon .is-idle, .gpp-c.is-fed .gpp-mon .is-chomp, .gpp-c.is-wrong .gpp-mon .is-oops, .gpp.is-won .gpp-c.is-fed .gpp-mon .is-happy { opacity: 1; }
.gpp-c.is-fed .gpp-mon .is-idle, .gpp-c.is-wrong .gpp-mon .is-idle, .gpp.is-won .gpp-c.is-fed .gpp-mon .is-chomp { opacity: 0; }
.gpp-c.is-fed .gpp-mon { transform: scale(1.08); }
.gpp-c.is-chomp .gpp-mon { animation: gpp-chomp .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes gpp-chomp { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1.08); } }
.gpp-c.is-wrong .gpp-mon { animation: gpp-oops .5s ease-out; }
@keyframes gpp-oops { 0%, 100% { translate: 0; } 25% { translate: -6% 0; } 50% { translate: 6% 0; } 75% { translate: -3% 0; } }
.gpp.is-won .gpp-c.is-fed .gpp-mon { animation: gpp-happy .7s cubic-bezier(.3, 1.5, .5, 1) 2; }
@keyframes gpp-happy { 0%, 100% { transform: scale(1.08); } 40% { transform: translateY(-14%) scale(1.12); } }

/* a bolted pipe that is tapped wobbles (keyframes of PipeCell) */
.gpp-c.is-wob { animation: gpp-wob .26s ease-out; }
@keyframes gpp-wob { 0% { transform: none; } 19% { transform: rotate(7deg); } 46% { transform: rotate(-6deg); } 69% { transform: rotate(3deg); } 100% { transform: none; } }

/* leaks: a drop at the open end that pops up after the goo got there and bobs (PipeDrip) */
.gpp-drips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gpp-drip { position: absolute; left: calc(var(--x) * var(--c) * 1cqw); top: calc(var(--y) * var(--c) * 1cqw); width: calc(var(--c) * .26cqw); height: calc(var(--c) * .26cqw); margin: calc(var(--c) * -.13cqw) 0 0 calc(var(--c) * -.13cqw); border-radius: 50%; background: var(--g); box-shadow: 0 0 0 max(1.5px, calc(var(--c) * .025cqw)) #0e0b1a; animation: gpp-bob 1s ease-in-out infinite alternate; }
.gpp-drip b { position: absolute; left: 73%; top: 81%; width: 46%; height: 46%; border-radius: 50%; background: var(--g); }
.gpp-drip.is-new { animation: gpp-pop .45s cubic-bezier(.3, 1.6, .5, 1) var(--dl, 0s) both, gpp-bob 1s ease-in-out calc(var(--dl, 0s) + .45s) infinite alternate; }
@keyframes gpp-pop { from { transform: scale(.1); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gpp-bob { from { transform: none; } to { transform: translateY(calc(var(--c) * .04cqw)); } }

/* what the guide points at; the solution player's next pipe; planned taps */
.gpp-c.is-key, .gpp-c.is-leak, .gpp-c.is-now { z-index: 2; }
.gpp-c.is-key::after, .gpp-c.is-leak::after, .gpp-c.is-now::after { content: ""; position: absolute; z-index: 4; inset: 2%; border-radius: 20%; box-shadow: 0 0 0 1.1cqw #ffd400, 0 0 4cqw rgba(255, 212, 0, .7); animation: gpp-hl .8s ease-in-out infinite alternate; pointer-events: none; }
.gpp-c.is-leak::after { box-shadow: 0 0 0 1.1cqw #ff4d6d, 0 0 4cqw rgba(255, 77, 109, .7); }
.gpp-c.is-path::before { content: ""; position: absolute; inset: 6%; border-radius: 22%; background: rgba(255, 212, 0, .22); box-shadow: inset 0 0 0 .4cqw rgba(255, 212, 0, .55); animation: gpp-in .3s ease-out both; }
@keyframes gpp-hl { from { opacity: .7; } to { opacity: 1; } }
@keyframes gpp-in { from { opacity: 0; transform: scale(.7); } }
.gpp-badge { position: absolute; z-index: 5; right: -6%; top: -8%; min-width: 34%; padding: 0 6%; border-radius: 999px; background: #ffd400; color: #0e0b1a; box-shadow: 0 0 0 max(1.5px, .45cqw) #0e0b1a; font: 800 calc(var(--c) * .28cqw)/1.35 var(--display, system-ui), system-ui, sans-serif; text-align: center; }
.gpp-badge.is-pop { animation: bst-pop .3s ease-out; }
.gpp-badge.is-done { opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }

/* FX: the finger, the solved ring and shards */
.gpp-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.gpp-tap { position: absolute; left: calc((var(--x) + .5) * var(--c) * 1cqw); top: calc((var(--y) + .5) * var(--c) * 1cqw); width: calc(var(--c) * .62cqw); height: calc(var(--c) * .62cqw); border-radius: 50%; background: rgba(255, 255, 255, .3); box-shadow: 0 0 0 .5cqw rgba(255, 255, 255, .55); transform: translate(-50%, -50%); animation: gpp-tap .55s ease-out both; }
@keyframes gpp-tap { 0% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } 25% { transform: translate(-50%, -50%) scale(.9); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; } }
.gpp-ring { position: absolute; left: 50%; top: 58%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 4px solid #ffd400; box-sizing: border-box; animation: gpp-ring .7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes gpp-ring { from { transform: translate(-50%, -50%) scale(.2); opacity: .95; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.gpp-shard { position: absolute; left: 50%; top: 58%; width: 9px; height: 9px; border-radius: 2px; animation: gpp-shard 1.1s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes gpp-shard { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 140px)) rotate(var(--rot)); opacity: 0; } }

/* ---------- the game screen (LabScreen) ---------- */
.gx.is-pipes { --pw: 19%; }
.gx.is-pipes .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-pipes .gx-icons, .gx.is-pipes .gx-pill { margin-top: 14px; }
.gx.is-pipes .gx-pill { white-space: nowrap; }
.gx.is-pipes .gx-title { gap: 1px; }
.gx.is-pipes .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-pipes .st { width: 17px; height: 17px; }
.gpp-moves { display: inline-flex; align-items: center; justify-content: 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; }
.gpp-moves i { font-style: normal; }
.gpp-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.gpp-next[hidden], .gpp-moves i[hidden] { display: none; }
.gpp-next .st-next { width: 9px; height: 9px; color: currentColor; }
.gpp-next.is-hot { color: #ff4d6d; }
.gpp-moves.is-glow { animation: gpp-glow 1.1s ease-in-out infinite alternate; }
@keyframes gpp-glow { from { background: transparent; color: #8f86b8; } to { background: rgba(255, 212, 0, .18); color: #ede7ff; box-shadow: 0 0 0 1.5px rgba(255, 212, 0, .7); } }
.gx-stage.is-pipes .gpp { z-index: 1; }
.bst-phone .gx-stage.is-pipes { margin-top: auto; }
.bst-phone .gx.is-pipes .gx-bottom { margin-bottom: auto; }
.bst-phone .gx.is-pipes .gx-tools { margin-top: 6px; }
.gx.is-pipes .gx-tools.is-1 { grid-template-columns: 1fr; }
.gx.is-pipes .gx-tool.is-off { opacity: .4; }
.gx.is-pipes .gx-home { margin-top: 0; }

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

/* ---------- difficulty boards, fan, how it works, mini tiles, game card ---------- */
.bst-tier.is-pipes .bst-tier-board { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 4px; }
.bst-tier.is-pipes .gpp { width: calc(96% * min(1, var(--w) / var(--h))); }
.bst-fan-card.is-pipes { display: flex; align-items: center; justify-content: center; padding: 6px; background: #17112f; border-color: #0e0b1a; }
.bst-fan-card.is-pipes .gpp { width: calc(100% * min(1, var(--w) / var(--h))); }
.bst-how-board.is-pipes { display: flex; align-items: center; justify-content: center; width: auto; height: 86%; aspect-ratio: 1; }
.bst-how-board.is-pipes .gpp { width: calc(100% * min(1, var(--w) / var(--h))); filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .35)); }
.bst-how-board.is-try .gpp-c.is-turn .gpp-r { animation: gpp-spin 4s ease-in-out infinite; }
.bst-how-board.is-try .gpp-c.is-turn:nth-of-type(3n) .gpp-r { animation-delay: 1.3s; }
.bst-how-board.is-try .gpp-c.is-turn:nth-of-type(3n+1) .gpp-r { animation-delay: 2.6s; }
@keyframes gpp-spin { 0%, 70% { transform: rotate(calc(var(--t) * 90deg)); } 80%, 100% { transform: rotate(calc(var(--t) * 90deg + 90deg)); } }
.bst-how-board.is-reveal.is-pipes .gpp { animation: bst-unblur 5s ease-in-out infinite; }
.bst-mini.is-pipes { background: #1a1533; background-image: none; }
.bst-home-pic.gpp-home { display: block; width: 62%; max-width: 150px; margin: 0 auto; transform: rotate(-3deg); }
.gpp.is-home .gpp-panel { border-radius: 10cqw; }

/* ---------- the level page ---------- */
.bst-level.is-pipes .bst-boards { align-items: start; }
.gpp-play, .gpp-player { padding: 12px 14px 16px; border-radius: 22px; background: linear-gradient(180deg, #2a1c63, #17112f); color: #ede7ff; }
.gpp-stage { --pw: 19%; position: relative; max-width: 440px; margin: 0 auto; }
.gpp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 6px; }
.gpp-bar > * { min-width: 0; }
.gpp-bar .gpp-moves { font-size: .8rem; }
.gpp-stars { display: inline-flex; gap: 3px; }
.gpp-stars .st, .gpp-sr .st { width: 20px; height: 20px; color: #ffd400; transition: color .3s; }
.gpp-stars .st.is-lost, .gpp-sr .st.is-off { color: #3a3166; }
.gpp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #3a2f78; color: #ede7ff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.gpp-btn svg { width: 18px; height: 18px; }
.gpp-btn:disabled { opacity: .4; cursor: default; }
.gpp-btn:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; }
.gpp-btn.is-icon { width: 40px; padding: 0; justify-content: center; }
.gpp-btn.is-main { width: 52px; height: 52px; padding: 0; justify-content: center; background: #ffd400; color: #0e0b1a; }
.gpp-btn.is-main svg { width: 24px; height: 24px; }
.gpp-btn .is-pause, .gpp-btn.is-playing .is-play { display: none; }
.gpp-btn.is-playing .is-pause { display: block; }
.gpp-status { min-height: 1.4em; margin: 10px 0 0; text-align: center; font-weight: 700; color: #ede7ff; }
.gpp-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.gpp-count { min-width: 4.5em; font-weight: 700; font-variant-numeric: tabular-nums; color: #b7aee0; }
.gpp-steps { margin: 12px 0 0; padding: 0 0 0 1.6em; display: grid; gap: 4px; font-size: .9rem; color: #b7aee0; }
.gpp-steps li.is-on { color: #ffd400; font-weight: 700; }
.gpp-steps li.is-on strong, .gpp-steps li.is-done strong { color: inherit; }
.gpp-steps li.is-done { color: #7e76a8; text-decoration: line-through; text-decoration-color: rgba(126, 118, 168, .6); }
.gpp-steps strong { color: #ede7ff; }
.bst-spoiler.is-pipes:not(.is-open) .gpp-player { filter: blur(7px) saturate(.6); pointer-events: none; }
.gpp-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); }
.gpp-facts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.gpp-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.gpp-facts-list div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.gpp-facts-list dt { font-size: .8rem; color: var(--muted); }
.gpp-facts-list dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.gpp-stars-rule { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gpp-stars-rule li { display: grid; gap: 4px; justify-items: center; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); font-size: .85rem; color: var(--text-2); text-align: center; }
.gpp-sr { display: inline-flex; gap: 2px; padding: 3px 8px; border-radius: 999px; background: #17112f; }
.gpp-sr .st { width: 16px; height: 16px; }
@media (max-width: 620px) { .gpp-facts-list, .gpp-stars-rule { grid-template-columns: 1fr 1fr; } .gpp-play, .gpp-player { padding: 10px 10px 14px; } }

@media (prefers-reduced-motion: reduce) {
	.gpp *, .gx.is-pipes *, .gpp-stage * { animation: none !important; transition: none !important; }
}