/* Beasties: Colour Gulp (app key flood, FloodGame.swift). .fld is the container: every size is a multiple of
 * --u = 1/374 of its width (the app's 374 pt board panel: LabFrame 8 + 4 pt, the fields 350 pt wide in all). Cells are
 * --C wide. A free field = FloodCell's raised tile (ink rim, dark base, light tile, gloss line), a slime field = the
 * colour packed tight (1 pt ink seam, light top, a bubble). --fd = wave delay of a freshly swallowed field. Colours are
 * MonsterTileFamily mixed in OKLab like SwiftUI's Color.mix (site_flood.py / _src mix): --ft tint, --fs slime top
 * (white .18), --fq tile top (white .12), --fb tile base (ink .28). Dark like the app in both themes. */
@property --ft { syntax: "<color>"; inherits: true; initial-value: #ff6fb5; }
@property --fs { syntax: "<color>"; inherits: true; initial-value: #ff8cc2; }
.fld { --u: calc(100cqw / 374); position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; }
.fld-panel { position: absolute; left: 0; top: 0; right: 0; bottom: calc(6 * var(--u)); border-radius: calc(20 * var(--u)); background: #241e45; box-shadow: inset 0 0 0 calc(3 * var(--u)) #0e0b1a, 0 calc(6 * var(--u)) 0 #0e0b1a; }
.fld-well { position: absolute; inset: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #1a1533; box-shadow: inset 0 0 0 calc(3 * var(--u)) #0e0b1a; }
.fld-grid { position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(350 * var(--u)); height: calc(350 * var(--u) / var(--w) * var(--h)); }
.fld-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

.fld-c { --C: calc(350 * var(--u) / var(--w)); position: absolute; left: calc(var(--x) * var(--C)); top: calc(var(--y) * var(--C)); width: var(--C); height: var(--C); transition: --ft .25s ease-in-out, --fs .25s ease-in-out; }
.fld-c.k0 { --ft: #ff6fb5; --fs: #ff8cc2; --fq: #ff82be; --fb: #b35186; }
.fld-c.k1 { --ft: #4db8ff; --fs: #74c6ff; --fq: #68c1ff; --fb: #3e82b7; }
.fld-c.k2 { --ft: #7ed957; --fs: #97e17a; --fq: #8fde6f; --fb: #5c994b; }
.fld-c.k3 { --ft: #ffc83d; --fs: #ffd36d; --fq: #ffcf5f; --fb: #b28d3f; }
.fld-c.k4 { --ft: #8e5cff; --fs: #9f7eff; --fq: #9973ff; --fb: #6644b8; }
.fld-c.k5 { --ft: #ff8a3d; --fs: #ffa167; --fq: #ff995a; --fb: #b3643b; }
/* the free field: ink rim (inset .06), dark base (.1), light tile (.16) with a gloss line */
.fld-t { position: absolute; inset: calc(var(--C) * .06); border-radius: calc(var(--C) * .2); background: #0e0b1a; transition: opacity .18s ease var(--fd, 0s), transform .3s ease var(--fd, 0s); }
.fld-t::before { content: ""; position: absolute; inset: calc(var(--C) * .04); border-radius: calc(var(--C) * .17); background: var(--fb); }
.fld-t::after {
	content: ""; position: absolute; inset: calc(var(--C) * .1); border-radius: calc(var(--C) * .16);
	background: linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, .45)) no-repeat calc(var(--C) * .1) calc(var(--C) * .07) / calc(var(--C) * .28) max(1.5px, calc(var(--C) * .06)), linear-gradient(var(--fq), var(--ft));
}
/* the slime: the cell exactly, a 1 pt ink seam over the neighbours drawn before it, a bubble */
.fld-s { position: absolute; inset: 0; border-radius: calc(var(--C) * .12); background: linear-gradient(var(--fs), var(--ft)); box-shadow: 0 0 0 max(1px, var(--u)) #0e0b1a; opacity: 0; transform: scale(.35); transition: transform .42s cubic-bezier(.3, 1.6, .5, 1) var(--fd, 0s), opacity .14s linear var(--fd, 0s); }
.fld-s::before { content: ""; position: absolute; left: calc(var(--C) * (.42 + var(--bx) / 100)); top: calc(var(--C) * (.42 + var(--by) / 100)); width: calc(var(--C) * .16); height: calc(var(--C) * .16); border-radius: 50%; background: rgba(255, 255, 255, .3); }
.fld-c.is-s .fld-s { opacity: 1; transform: none; }
.fld-c.is-s .fld-t { opacity: 0; transform: scale(.8); }
.fld-c.is-rock svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* monsters: the app's LabMonsterTile (labtile-*.webp, 12 pt padding around a 100 pt tile) or MonsterTileArt with an ink rim */
.fld-m { position: absolute; z-index: 2; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 20%; box-shadow: 0 0 0 max(1px, calc(var(--C) * .04)) #0e0b1a, 0 calc(var(--C) * .05) 0 max(1px, calc(var(--C) * .04)) #0e0b1a; transition: filter .3s; }
.fld.is-lab .fld-m { left: 0; top: 0; width: 99.2%; height: 99.2%; border-radius: 0; box-shadow: none; }
.fld:not(.is-lab) .fld-m.is-sleepy { filter: brightness(.68) saturate(.7); }
.fld-m.is-gulp { animation: fld-gulp .4s ease-out; }
@keyframes fld-gulp { 0% { transform: none; } 25% { transform: scale(1.15); } 60% { transform: scale(.96); } 100% { transform: none; } }
.fld-m.is-wake { animation: fld-wake .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fld-wake { 0% { transform: scale(.8) rotate(-8deg); } 50% { transform: scale(1.18) rotate(4deg); } 100% { transform: none; } }
.fld-z { position: absolute; z-index: 3; right: -2%; top: -14%; font-family: var(--display); font-style: normal; font-weight: 800; font-size: calc(var(--C) * .34); line-height: 1; color: #fff; text-shadow: 1px 1px 0 #0e0b1a; animation: fld-z .9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes fld-z { from { transform: none; opacity: .6; } to { transform: translateY(calc(var(--C) * -.08)); opacity: 1; } }
/* site only: yellow rings the guide points at */
.fld-c.is-hl::after { content: ""; position: absolute; z-index: 4; inset: 4%; border-radius: 22%; box-shadow: 0 0 0 max(2px, calc(var(--C) * .07)) #ffd400, 0 0 calc(var(--C) * .35) rgba(255, 212, 0, .7); animation: fld-hl .8s ease-in-out infinite alternate; pointer-events: none; }
@keyframes fld-hl { from { opacity: .55; } to { opacity: 1; } }

/* FX: "+7" over the slime, the Cleared! banner, a ring where two slimes meet */
.fld-tag { position: absolute; z-index: 7; transform: translate(-50%, -50%); padding: .35em .6em; border-radius: 999px; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-weight: 800; font-size: max(.8rem, 5cqw); line-height: 1; box-shadow: inset 0 0 0 2px #0e0b1a, 0 3px 0 #0e0b1a; animation: fld-tag 1.5s cubic-bezier(.3, 1.6, .5, 1) both; white-space: nowrap; }
@keyframes fld-tag { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.4); } 15%, 70% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -110%) scale(1); } }
.fld-banner { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); padding: .3em .7em; border-radius: 14px; background: #ffd400; color: #0e0b1a; font-family: var(--display); font-weight: 800; font-size: max(1.2rem, 9cqw); line-height: 1; white-space: nowrap; text-transform: uppercase; box-shadow: inset 0 0 0 3px #0e0b1a, 0 5px 0 #0e0b1a; animation: fld-banner 1.8s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fld-banner { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(.3); } 15%, 78% { opacity: 1; transform: translate(-50%, -50%) rotate(-4deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -62%) rotate(-4deg) scale(1); } }
.fld-ring { position: absolute; z-index: 7; border-radius: 50%; border: 4px solid #ffd400; box-sizing: border-box; animation: fld-ring .7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes fld-ring { from { transform: translate(-50%, -50%) scale(.2); opacity: .95; } to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.fld.is-shake .fld-grid { animation: fld-shake .3s ease-out; }
@keyframes fld-shake { 0%, 100% { translate: 0; } 25% { translate: 1.5% 0; } 55% { translate: -1.2% 0; } 80% { translate: .6% 0; } }

/* the colour buttons and the sleepers row (FloodPalette) */
.fld-below { display: grid; gap: 8px; margin-top: 10px; }
.fld-sleepers { display: flex; justify-content: center; gap: 6px; }
.fld-sl { width: 22px; height: 22px; display: block; }
.fld-slm { display: block; width: 100%; height: 100%; border-radius: 5px; opacity: .6; transition: opacity .3s; }
.fld-slm.is-up { opacity: 1; }
.fld-slm.is-wake { animation: fld-wake .6s cubic-bezier(.3, 1.6, .5, 1); }
.fld-pal { display: flex; justify-content: center; gap: 2.4%; }
.fld-p { flex: 0 1 52px; min-width: 0; aspect-ratio: 52 / 56; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 12px; font: inherit; color: inherit; }
button.fld-p { cursor: pointer; }
button.fld-p:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; }
.fld-pm { display: block; width: 85%; height: auto; aspect-ratio: 1; border-radius: 20%; box-shadow: 0 0 0 2px #0e0b1a, 0 3px 0 2px #0e0b1a; transition: opacity .25s, transform .12s; }
.is-lab .fld-pm, .gx.is-lab .fld-pm { box-shadow: none; width: 105%; border-radius: 0; }
.fld-p.is-off .fld-pm { opacity: .35; }
.fld-p.is-press .fld-pm { animation: fld-press .3s ease-out; }
@keyframes fld-press { 0% { transform: none; } 35% { transform: scale(.86); } 100% { transform: none; } }
.fld-p.is-nope .fld-pm { animation: fld-nope .4s ease-out; }
@keyframes fld-nope { 0%, 100% { translate: 0; } 20% { translate: -14% 0; } 45% { translate: 12% 0; } 70% { translate: -6% 0; } }
.fld-p.is-ring { box-shadow: 0 0 0 3px #ffd400, 0 0 16px rgba(255, 212, 0, .55); animation: fld-hl .8s ease-in-out infinite alternate; }
.fld-tools { grid-template-columns: repeat(2, 1fr); }
.fld-tool > svg { width: 24px; height: 24px; padding: 5px 12px; border-radius: 999px; }
.fld-tool.is-off { opacity: .4; }
button.fld-tool { border: 0; background: none; font: inherit; color: #ede7ff; cursor: pointer; padding: 0; }
button.fld-tool:disabled { cursor: default; }
button.fld-tool:focus-visible { outline: 2px solid #ffd400; outline-offset: 2px; border-radius: 10px; }
.fld-tool.is-press > svg { animation: bst-press .3s ease-out; }

/* ---------- the game screen (LabScreen) ---------- */
.gx.is-flood { --pw: 19%; }
.gx-head.is-flood { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx-head.is-flood .gx-icons, .gx-head.is-flood .gx-pill { margin-top: 14px; }
.gx-head.is-flood .gx-pill { white-space: nowrap; }
.gx-head.is-flood .gx-title { gap: 1px; }
.gx.is-flood .gx-stars, .fld-head .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-flood .st, .fld-head .st { width: 17px; height: 17px; }
.fld-moves { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: .66rem; font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fld-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.fld-next i { font-style: normal; margin-right: 2px; }
.fld-next .st-next { width: 9px; height: 9px; color: currentColor; }
.fld-next.is-hot { color: #ff4d6d; }
.fld-next.is-gone { display: none; }
.fld-moves.is-bump [data-moves] { animation: fld-press .3s ease-out reverse; }
.gx-stage.is-flood { position: relative; }
.gx-stage.is-flood .fld { z-index: 1; }
.bst-phone .gx.is-flood .gx-stage { margin-top: auto; }
.bst-phone .gx.is-flood .gx-bottom { margin-bottom: auto; }
.bst-phone .gx.is-flood .fld-tools { margin-top: 10px; }
.gx.is-flood .fld-below { margin-top: 8px; }
.gx.is-flood .gx-home { margin-top: 0; }
.gx-peek.is-hop .gx-peek-body { animation: fld-hop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes fld-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-12%); } }

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

/* ---------- on the site ---------- */
.bst-mini.is-flood { background: #1a1533; }
.bst-tier.is-flood .bst-tier-board { margin-bottom: 10px; }
.bst-fan-card.is-flood { display: flex; background: #241e45; border-color: #0e0b1a; }
.bst-fan-card.is-flood .bst-fan-well { flex: 1; display: flex; align-items: center; min-width: 0; padding: 2px; }
.bst-how-pic .bst-scene:has(.bst-how-fld) { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; }
.bst-how-pic .bst-scene-visual:has(> .bst-how-fld) { height: 100%; display: grid; place-items: center; }
.bst-how-fld { height: 96%; aspect-ratio: .74; display: grid; align-items: center; }
.bst-how-fld .bst-board-card { padding: 6px 8px 8px; border-radius: 16px; box-shadow: none; }
.bst-how-fld .fld-pal { gap: 1.5%; }
@media (prefers-reduced-motion: reduce) { .fld *, .fld-ui *, .gx.is-flood * { transition: none !important; animation: none !important; } }

/* ---------- one level ---------- */
.bst-level.is-flood { max-width: 1040px; }
.fld-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; }
.fld-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); }
.fld-facts strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--text); }
.fld-facts span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.fld-facts .is-stars strong { display: inline-flex; gap: 2px; color: #ffd400; }
.fld-facts .st { width: 22px; height: 22px; }
.fld-ui.is-page, .fld-sol-in { padding: 12px 14px 16px; border-radius: 22px; background: linear-gradient(180deg, #2a1c63, #17112f); color: #ede7ff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.fld-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; }
.fld-head .gx-stars { display: flex; }
.fld-head .st { color: #ffd400; transition: color .3s; }
.fld-head .st.is-lost { color: #2c2456; }
.fld-ui.is-page .fld-tools { margin-top: 12px; }
.fld-ui.is-page .fld-moves { font-size: .78rem; }
.fld-say { min-height: 3em; }
.fld-say.is-won { color: var(--text); font-weight: 700; }
.fld-sol-in .fld-ui.is-watch { --pw: 0%; }
.fld-sol-in .gx-peek { display: none; }
.fld-sol-in .bst-player-bar { margin-top: 14px; }
.fld-sol-in .bst-play-btn:not(.is-main) { background: #241e45; color: #ede7ff; border-color: #3a3166; }
.fld-sol-in .bst-player-count, .fld-sol-in .bst-player-count strong { color: #ede7ff; }
.fld-sol-in .bst-player-count small { color: #b7aee0; }
.bst-spoiler.is-flood { border-radius: 22px; }
.bst-spoiler.is-flood:not(.is-open) .fld-sol-in { filter: blur(9px) saturate(.6); user-select: none; pointer-events: none; }
.bst-spoiler.is-flood .fld-sol-in { transition: filter .35s ease; }
.fld-seq { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fld-seq li { position: relative; width: 34px; }
.fld-seq .fld-qm { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 20%; box-shadow: 0 0 0 2px #0e0b1a; transition: transform .2s, opacity .2s; }
.is-lab .fld-seq .fld-qm { box-shadow: none; border-radius: 0; }
.fld-seq b { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box; border-radius: 999px; background: #ede7ff; color: #0e0b1a; font-size: .66rem; line-height: 16px; text-align: center; box-shadow: 0 0 0 1.5px #0e0b1a; }
.fld-seq li.is-done .fld-qm { opacity: .4; }
.fld-seq li.is-on .fld-qm { transform: scale(1.15); }
.fld-seq li.is-on b { background: #ffd400; }
@media (max-width: 560px) {
	.fld-facts { gap: 6px; }
	.fld-facts strong { font-size: 1.4rem; }
	.fld-facts .st { width: 17px; height: 17px; }
	.fld-ui.is-page, .fld-sol-in { padding: 10px 10px 14px; }
	.fld-seq li { width: 30px; }
}