/* Beasties: Laundry Day (LaundryView.swift). .ldy is the container: every size is in cqw of it
 * (--u = cqw per app unit, --h = field height; lines and socks: --x, --y; socks: --z = size in units, 54 on a
 * peg, 34 in a basket). PHP draws the start, beasties-laundry.js (bstLdy) moves the socks. */
.ldy { position: relative; container-type: inline-size; box-sizing: border-box; width: 100%; }
.ldy-field { position: relative; height: calc(var(--h) * 1cqw); }
.ldy-fx { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.ldy-ln, .ldy-fr { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--u) * 120cqw); height: calc(var(--u) * 150cqw); pointer-events: none; }
.ldy-ln { z-index: 1; }
.ldy-fr { z-index: 3; }
.ldy-ln svg, .ldy-fr svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ldy-s {
	position: absolute; z-index: 2; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw);
	width: calc(var(--z) * var(--u) * .7cqw); height: calc(var(--z) * var(--u) * 1cqw); transform: translate(-50%, -50%);
	transition: left .36s cubic-bezier(.3, 1.12, .5, 1), top .36s cubic-bezier(.3, 1.3, .5, 1), width .32s ease, height .32s ease, transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .25s, filter .25s;
}
.ldy-s svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 0; }
.ldy-s.is-up { z-index: 6; transform: translate(-50%, -50%) translateY(calc(var(--u) * -12cqw)) rotate(-8deg) scale(1.12); filter: drop-shadow(0 calc(var(--u) * 4cqw) 0 rgba(14, 11, 26, .5)); }
.ldy-s.is-fly { z-index: 7; }
/* a sock tangled in the line (KnottedSock): its own 80 × 90 canvas for a sock of 44, the rope point on the line */
.ldy-s.is-knot { width: calc(var(--z) * var(--u) * 1.8182cqw); height: calc(var(--z) * var(--u) * 2.0455cqw); }
.ldy-s.is-knot svg { transform-origin: 50% 22%; }
/* a twin clip (PairClip): a bar behind two plastic clips in the family colour; --w = distance of the clips (cqw),
 * --z = sock size in units; it moves with the pair */
.ldy-pc {
	--s: calc(var(--z) * var(--u) * 1cqw);
	position: absolute; z-index: 4; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw + var(--s) * .18); height: calc(var(--s) * .55);
	transform: translate(-50%, -50%) rotate(var(--r, 0deg)); pointer-events: none;
	transition: left .36s cubic-bezier(.3, 1.12, .5, 1), top .36s cubic-bezier(.3, 1.3, .5, 1), width .32s ease, height .32s ease, transform .28s cubic-bezier(.3, 1.6, .5, 1), opacity .25s;
}
.ldy-pc::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--s) * .18); transform: translateY(-50%); box-sizing: border-box; border-radius: 99px; background: var(--cb); border: calc(var(--s) * .044) solid #0e0b1a; }
.ldy-pc b { position: absolute; top: 0; width: calc(var(--s) * .2125); height: 100%; box-sizing: border-box; border-radius: calc(var(--s) * .06); background: var(--c); border: calc(var(--s) * .04) solid #0e0b1a; overflow: hidden; }
.ldy-pc b:first-child { left: calc(var(--s) * -.01625); }
.ldy-pc b:last-child { right: calc(var(--s) * -.01625); }
.ldy-pc b::after { content: ""; position: absolute; left: 20%; top: 22%; width: 22%; height: 55%; border-radius: 99px; background: rgba(255, 255, 255, .45); }
.ldy-pc.is-up { z-index: 7; transform: translate(-50%, -50%) translateY(calc(var(--u) * -12cqw)) rotate(var(--r, 0deg)); }
.ldy-pc.is-fly { z-index: 8; }
.ldy-pc.is-gone { opacity: 0; transition: none; }
.ldy-pc.is-pop { animation: ldy-fade .35s ease-out both; }
@keyframes ldy-fade { from { opacity: 0; } to { opacity: 1; } }
.ldy-s.is-gone { opacity: 0; transition: none; }
.ldy-s.is-mark svg { filter: drop-shadow(0 0 1.5px #ffd400) drop-shadow(0 0 5px rgba(255, 212, 0, .9)); animation: ldy-glow 1s ease-in-out infinite alternate; }
.ldy-s svg.is-hop { animation: ldy-hop .45s cubic-bezier(.3, .7, .4, 1) both; }
.ldy-s svg.is-pop { animation: ldy-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.ldy-s svg.is-shake { animation: ldy-shake .45s ease-out; }
.ldy-s svg.is-win { animation: ldy-win .5s ease-out both; }
.ldy-fly { position: absolute; z-index: 9; pointer-events: none; }
.ldy-fly.is-ghost svg { filter: drop-shadow(0 0 4px rgba(255, 77, 109, .9)); }
.ldy-fly svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes ldy-hop { 0% { transform: none; } 30% { transform: translateY(-16%) rotate(-6deg); } 60% { transform: translateY(2%) rotate(3deg); } 100% { transform: none; } }
@keyframes ldy-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ldy-shake { 0%, 100% { transform: none; } 16% { transform: rotate(14deg); } 34% { transform: rotate(-10deg); } 52% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes ldy-win { 0% { transform: none; filter: none; } 40% { transform: scale(1.2) translateY(-8%); filter: brightness(1.4) drop-shadow(0 0 6px #fff); } 100% { transform: scale(1.08); filter: brightness(1.15); } }
@keyframes ldy-glow { from { transform: none; } to { transform: translateY(-5%); } }

/* pointing at a line (its rope and pegs) or at its baskets */
.ldy-ln::after, .ldy-fr::after { content: ""; position: absolute; border-radius: 12%/10%; opacity: 0; pointer-events: none; box-shadow: 0 0 0 3px rgba(255, 212, 0, .85), 0 0 22px rgba(255, 212, 0, .45); }
.ldy-ln::after { left: 0; right: 0; top: -2%; height: 62%; }
.ldy-fr::after { left: 4%; right: 4%; top: 66%; height: 25%; border-radius: 30%; }
.ldy-ln.is-point::after, .ldy-fr.is-point::after { animation: ldy-point 1.6s ease-out; }
.ldy-ln.is-nope::after { box-shadow: 0 0 0 3px rgba(255, 77, 109, .9), 0 0 18px rgba(255, 77, 109, .45); animation: ldy-point .7s ease-out; }
@keyframes ldy-point { 0% { opacity: 0; transform: scale(.94); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

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

/* the well the board sits in, like the app (dark, also in light mode) */
.ldy-well { background: linear-gradient(180deg, #2f294f, #241e45); border-radius: 18px; padding: 9px; box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a; }
.ldy-well .ldy, .gx-well.is-laundry .ldy, .bst-stk-stage .ldy { background: #1a1533; border-radius: 12px; box-shadow: inset 0 0 0 2.5px #0e0b1a; padding: 8px 4px; }

/* a board on a card: Gnatz peeks over the panel */
.bst-board-card.is-laundry { padding: 14px 14px 20px; }
.ldy-stage { --pw: 19%; position: relative; padding-top: calc(var(--pw) * .764); }
.ldy-stage .gx-peek { --px: .5; }
.ldy-stage .ldy-well { position: relative; z-index: 1; }

/* ---------- the game screen ---------- */
.gx.is-laundry .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 2px; }
.gx.is-laundry .gx-icons, .gx.is-laundry .gx-pill { margin-top: 14px; }
.gx.is-laundry .gx-title { gap: 1px; }
.gx.is-laundry .gx-stars { justify-content: center; gap: 3px; margin-top: 2px; }
.gx.is-laundry .st { width: 17px; height: 17px; }
.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-moves i { font-style: normal; }
.gx-next { display: inline-flex; align-items: center; gap: 2px; transition: color .25s; }
.gx-moves.is-out i, .gx-moves.is-out .gx-next { display: none; }
.gx-next .st-next { width: 9px; height: 9px; color: currentColor; }
.gx-next.is-hot { color: #ff4d6d; }
.gx-moves.is-hl { animation: ldy-hl 1.6s ease-out; }
@keyframes ldy-hl { 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-laundry { margin-top: 12px; }
.gx.is-laundry .gx-peek { --px: .5; }
.gx-well.is-laundry { display: block; }
.bst-phone .gx.is-laundry .gx-bottom { margin-top: auto; margin-bottom: 18px; }
.gx-tools.is-2 { grid-template-columns: repeat(2, 1fr); }
.gx.is-laundry .gx-toast { top: 45%; }

/* ---------- on the site ---------- */
.bst-mini.is-laundry { background: #1a1533; }
.bst-tier.is-laundry .bst-tier-board { margin-bottom: 4px; padding: 6px; border-radius: 14px; }
.bst-tier.is-laundry .bst-tier-board .ldy { padding: 5px 2px; }
.bst-fan-card.is-laundry { display: flex; }
.bst-fan-well { flex: 1; display: flex; min-width: 0; }
.bst-fan-well.ldy-well { padding: 6px; border-radius: 12px; align-items: center; }
.bst-fan-well .ldy { flex: 1; }
.bst-how-ldy { width: 72%; padding: 6px; border-radius: 14px; }
.bst-how-ldy .ldy { padding: 4px 2px; }
.bst-game-well.ldy-well { padding: 6px; border-radius: 14px; }
.bst-game.is-laundry .bst-game-monster { display: none; }

/* one level */
.bst-level.is-laundry { max-width: 760px; }
.bst-stk-stage.ldy-stage-lv { max-width: 450px; margin-inline: auto; }
.bst-level.is-laundry .bst-player figcaption, .bst-level.is-laundry .bst-player-bar { max-width: 560px; margin-inline: auto; }
.ldy-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; }
.ldy-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); }
.ldy-facts strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; color: var(--text); }
.ldy-facts span { font-size: .8rem; color: var(--muted); line-height: 1.3; }
.ldy-facts .is-stars strong { display: inline-flex; gap: 2px; color: #ffd400; }
.ldy-facts .st { width: 22px; height: 22px; }
.bst-level.is-laundry .bst-move-list small { color: var(--muted); }
@media (max-width: 560px) {
	.ldy-facts { gap: 6px; }
	.ldy-facts strong { font-size: 1.4rem; }
	.ldy-facts .st { width: 17px; height: 17px; }
	.bst-level.is-laundry .bst-stk-stage { padding: 7px; }
}

/* the extra line (bought with stars): grows in; the offer above the tools like Stacks */
.ldy-ln.is-grow, .ldy-fr.is-grow { animation: ldy-grow .5s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 60%; }
@keyframes ldy-grow { 0% { opacity: 0; transform: translateY(12%) scale(.7); } 100% { opacity: 1; transform: none; } }
.bst-phone .gx.is-laundry .gx-bottom { position: relative; }
.gx.is-laundry .gx-offer { bottom: -16px; }
.gx-tool.is-off { opacity: .4; }