/* Beasties: Number Pairs (inc/beasties-pairs.php, assets/js/beasties-pairs.js).
 * The field as in PairsView.swift: a dark well (Theme.well, corner 16, padding 8), flat tiles #40367C with light rounded
 * digits, the selected tile yellow (Theme.zap) with a dark digit (Theme.sticker), cleared cells empty. The well keeps
 * the height of the start rows; empty rows close up inside it. .prs is the container, --u is one cell; every cell sits
 * at (--c, --r) and slides when --r changes. */

.prs { container-type: inline-size; width: 100%; position: relative; }
.prs-well {
	--u: calc(100cqw / (var(--w) + .32));
	position: relative; box-sizing: border-box; width: 100%; padding: calc(.16 * var(--u));
	border-radius: max(10px, calc(.34 * var(--u))); background: #1a1533;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 0 6px 0 rgba(0, 0, 0, .28);
	user-select: none; -webkit-user-select: none;
}
.prs-field { position: relative; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.prs .prc {
	position: absolute; left: calc(var(--c) * var(--u)); top: calc(var(--r) * var(--u)); width: var(--u); height: var(--u);
	display: grid; place-items: center; padding: 0; margin: 0; border: 0; background: transparent; color: #ede7ff;
	font: 900 calc(.52 * var(--u))/1 ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif; font-variant-numeric: tabular-nums;
	transition: top .45s cubic-bezier(.3, 1.25, .5, 1);
}
/* the tile: padding .05, corner .18 (PairsTile) */
.prs .prc::before {
	content: ""; position: absolute; inset: 5%; border-radius: 18%; background: #40367c;
	transition: background-color .15s, transform .22s ease-in, opacity .22s ease-in;
}
.prs .prc > b { position: relative; z-index: 1; font-weight: 900; transition: color .15s, transform .22s ease-in, opacity .22s ease-in; }
.prs .prc.is-sel::before { background: #ffd400; }
.prs .prc.is-sel > b { color: #0e0b1a; }
/* cleared: nothing left (the app draws two faint crumbs; the site keeps the cell empty) */
.prs .prc.is-gone { pointer-events: none; }
.prs .prc.is-gone::before, .prs .prc.is-gone > b { transform: scale(.1) rotate(-25deg); opacity: 0; }
.prs .prc.is-eat::before { background: #ffd400; }
.prs .prc.is-eat > b { color: #0e0b1a; }
.prs .prc.is-back::before, .prs .prc.is-back > b { animation: prs-back .38s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: var(--dl, 0s); }
.prs .prc.is-shake { animation: prs-shake .4s ease-out; }
.prs .prc.is-shake::before { background: #8b374b; }
.prs .prc.is-sel.is-shake::before { background: #ffd400; }
/* a pair to look at (scenes) pulses, an option glows blue, the hint frames its pair (PairsTile: strokeBorder zap 3) */
.prs .prc.is-mark::after, .prs .prc.is-hint::after, .prs .prc.is-ghost::after { content: ""; position: absolute; inset: 1%; border-radius: 20%; pointer-events: none; }
.prs .prc.is-mark::after { box-shadow: inset 0 0 0 max(2px, calc(.06 * var(--u))) #ffd400; animation: prs-key 1.2s ease-in-out infinite; }
.prs .prc.is-hint::after { box-shadow: inset 0 0 0 max(2.5px, calc(.07 * var(--u))) #ffd400; }
.prs .prc.is-ghost::after { box-shadow: inset 0 0 0 max(2px, calc(.06 * var(--u))) #4db8ff; background: rgba(77, 184, 255, .18); }
/* the solution: every tile carries the number of its pair */
.prs .prc > small {
	position: absolute; z-index: 2; right: 7%; top: 6%; min-width: 34%; padding: 0 3%; box-sizing: border-box; border-radius: 999px;
	background: #ffd400; color: #0e0b1a; font-size: max(8px, calc(.22 * var(--u))); font-weight: 900; line-height: 1.25; text-align: center;
}
.prs.is-nums .prc > b { transform: translate(-8%, 8%); font-size: .86em; }

/* sight lines (scenes): yellow = they see each other, red with a cross = blocked, the row-end line runs off the
   right edge and comes back in on the left */
.prs-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.prs-ln { fill: none; stroke: #ffd400; stroke-width: .1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .2 .14; animation: prs-draw .45s ease-out both; }
.prs-ln.is-block, .prs-ln.is-x { stroke: #ff4d6d; }
.prs-ln.is-x { stroke-dasharray: none; stroke-width: .11; animation: prs-pop .3s cubic-bezier(.3, 1.6, .5, 1) .25s both; transform-box: fill-box; transform-origin: center; }
.prs-ln.is-head { stroke-dasharray: none; }
.prs-ov { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.prs-touch { position: absolute; left: calc(var(--c) * var(--u)); top: calc(var(--r) * var(--u)); width: var(--u); height: var(--u); display: grid; place-items: center; }
.prs-touch::before { content: ""; width: 70%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); animation: prs-touch .45s ease-out forwards; }

/* cleared: the last tiles hop, the well glows */
.prs.is-party .prs-well { box-shadow: inset 0 0 0 2px rgba(255, 212, 0, .55), 0 0 30px -6px rgba(255, 212, 0, .45), 0 6px 0 rgba(0, 0, 0, .28); transition: box-shadow .4s; }

@keyframes prs-shake { 0%, 100% { translate: 0 0; } 20% { translate: 6% 0; } 45% { translate: -6% 0; } 70% { translate: 4% 0; } }
@keyframes prs-back { 0% { transform: scale(.2); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes prs-key { 0%, 100% { box-shadow: inset 0 0 0 max(2px, calc(.06 * var(--u))) #ffd400; } 50% { box-shadow: inset 0 0 0 max(2px, calc(.06 * var(--u))) #ffd400, 0 0 14px 3px rgba(255, 212, 0, .55); } }
@keyframes prs-draw { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes prs-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes prs-touch { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .prs *, .prs *::before, .prs *::after { animation: none !important; transition: none !important; } }
.prs:not(.is-live) .prc, .prs:not(.is-live) .prc::before, .prs:not(.is-live) .prc > b { transition: none; }

/* ---------- on the game screen ---------- */
.gx.is-pairs .gx-title .gx-stars { margin-top: 3px; gap: 2px; justify-content: center; }
.gx.is-pairs .gx-title .st { width: 15px; height: 15px; }
.gx.is-pairs .gx-head { margin-top: 2px; }
.bst-phone .gx-stage.is-pairs { --pw: 21%; margin-top: auto; padding-left: 4px; padding-right: 4px; }
.bst-phone .gx.is-pairs .gx-bottom { margin-bottom: auto; padding-bottom: 6%; }
.bst-phone .gx.is-pairs .gx-tools { margin-top: 22px; }
.gx-tools.is-two { grid-template-columns: repeat(2, 1fr); max-width: 62%; margin-left: auto; margin-right: auto; }
.gx-stage.is-pairs .prs { position: relative; z-index: 1; }
.gx-stage.is-pairs .gx-peek, .prs-stage .gx-peek { z-index: 2; }
.gx.is-pairs .prs-ti { position: relative; display: block; }
.gx.is-pairs .prs-ti > svg { display: block; width: 22px; height: 22px; padding: 6px 13px; border-radius: 999px; transition: background-color .2s, color .2s; }
.gx.is-pairs .gx-tool.is-active .prs-ti > svg { background: #ffd400; color: #120f24; }
.gx.is-pairs .gx-tool.is-off { opacity: .45; }
.gx.is-pairs .gx-tool.is-press .prs-ti { animation: bst-press .3s ease-out; }
.gx-toast.is-dead { background: #0e0b1a; color: #ffd400; transform: translate(-50%, -50%) rotate(-4deg) scale(.6); }
.gx-toast.is-dead.is-on { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
.gx-toast.is-dead strong { color: #ffd400; }

/* ---------- guide ---------- */
.bst-board-card.is-pairs { padding: 14px 14px 18px; max-width: 360px; background: linear-gradient(180deg, #2f294f, #241e45); border-color: #0e0b1a; }
.prs-stage { --pw: 21%; position: relative; padding-top: calc(var(--pw) * .764); }
.prs-stage .gx-peek { --px: .5; }
.bst-tier.is-pairs .bst-tier-board { max-width: 210px; margin: 0 auto 6px; }
.bst-tier.is-pairs .prs-well { box-shadow: inset 0 0 0 2px #0e0b1a, 0 4px 0 #0e0b1a; }

/* ---------- overview ---------- */
.bst-mini.is-pairs { background: #241e45; }
.bst-fan-card.is-pairs { display: grid; place-items: center; padding: 10px; background: #241e45; }
.prs-fan { width: var(--fw); max-width: 100%; }
.bst-how-prs { width: 46%; }
.bst-how-prs .prc.is-how::before, .bst-how-prs .prc.is-how > b { animation: prs-how 7s ease-in-out infinite both; }
.bst-how-prs .prc.is-h2::before, .bst-how-prs .prc.is-h2 > b { animation-delay: 1.4s; }
.bst-how-prs .prc.is-h3::before, .bst-how-prs .prc.is-h3 > b { animation-delay: 2.8s; }
@keyframes prs-how { 0%, 6% { opacity: 1; transform: none; background-color: #40367c; } 10%, 16% { opacity: 1; transform: scale(1.08); background-color: #ffd400; color: #0e0b1a; } 22%, 70% { opacity: 0; transform: scale(.1); } 80%, 100% { opacity: 1; transform: none; } }
.bst-how-board.is-pairs { width: 46%; display: grid; place-items: center; }
.bst-how-board.is-pairs .prs { animation: bst-unblur 5s ease-in-out infinite; }
/* the game card: the app's MiniPairs (4×3 tiles, a 3 and a 7 picked) */
.prs-home { position: relative; display: inline-block; padding: 6px; border-radius: 14px; background: #0e0b1a; transform: rotate(-3deg); }
.prs-home-well { display: grid; grid-template-columns: repeat(4, 32px); grid-auto-rows: 32px; padding: 4px; border-radius: 9px; background: #1a1533; }
.prs-home-well i { display: grid; place-items: center; margin: 2px; border-radius: 6px; background: #40367c; color: #ede7ff; font: 900 19px/1 ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif; font-style: normal; }
.prs-home-well i.is-sel { background: #ffd400; color: #0e0b1a; }
.prs-home-well i.is-gone { background: transparent; }
.prs-home-gnatz { position: absolute; right: -30px; bottom: -14px; width: 58px; height: auto; transform: scaleX(-1) rotate(6deg); }
.bst-game.is-pairs .bst-game-monster { display: none; }

/* ---------- one level ---------- */
.bst-level.is-pairs .bst-boards { align-items: start; }
.bst-prs-stage { padding: 10px 12px 16px; 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-prs-stage .prs { max-width: 440px; margin: 0 auto; }
.bst-prs-stage .prs-stage { max-width: 440px; margin: 0 auto; }
.bst-level.is-pairs .prs button.prc { cursor: pointer; }
.bst-level.is-pairs .prs button.prc:hover:not(.is-sel)::before { background: #4d4293; }
.bst-level.is-pairs .prs button.prc:focus-visible { outline: 2px solid #ffd400; outline-offset: -2px; border-radius: 18%; }
.bst-level.is-pairs .bst-player-bar { margin-top: 16px; }
.bst-level.is-pairs.is-done .prs-say, .bst-level.is-pairs .prs.is-party ~ .prs-say { color: var(--zap); font-weight: 700; }
.bst-level.is-pairs.is-dead .prs-say { color: #ff8da1; font-weight: 700; }
.bst-level.is-pairs.is-busy .prs-bar { opacity: .5; pointer-events: none; }
.prs-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); }
.prs-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; }
.prs-modes button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.prs-modes button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prs-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.prs-bar[hidden] { display: none; }
.prs-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: transform .15s, border-color .15s; }
.prs-tool svg { width: 22px; height: 22px; }
.prs-tool:hover { border-color: var(--accent); transform: translateY(-2px); }
.prs-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bst-spoiler.is-pairs { 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; }
.prs-sol { width: 100%; max-width: 420px; transition: filter .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bst-spoiler.is-pairs:not(.is-open) .prs-sol { filter: blur(16px) saturate(.5); transform: scale(.94); }
.bst-spoiler.is-pairs .bst-cover { border-radius: 22px; }
.prs-sol-note { color: var(--text-2); font-size: .85rem; }
.bst-level.is-pairs .bst-move-list ol { columns: 2 22em; }
@media (max-width: 760px) { .bst-level.is-pairs .bst-boards { max-width: 560px; } }
@media (max-width: 420px) { .bst-prs-stage, .bst-spoiler.is-pairs { padding: 6px 6px 12px; border-radius: 16px; } .prs-tool { font-size: .72rem; } }
.bst-tile-pic .prs-home { zoom: .75; }