/* Beasties: Cage Sums (inc/beasties-cage.php, assets/js/beasties-cage.js).
 * The Sudoku paper board (.sdk) plus the cage layer .cg-ov on top: the same 3×3 grid of 3×3 cells (gaps 2px / 1px
 * like .sdk / .sb), so every piece lines up with its cell. Each cell holds its part of the dashed cage line as an SVG
 * (viewBox 100, like the app's CageLines: 1pt line, dash 3 / 2.5, inset 9 %) and the first cell of a cage its sum
 * (CageSums: 21 % of a cell, bold rounded, on paper). The digits sit a little lower and smaller, as in the app. */

.sdk.is-cage { position: relative; }
.cg-ov {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px;
}
.cg-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1px; min-width: 0; min-height: 0; }
.cg-ov i { position: relative; display: block; min-width: 0; min-height: 0; font-style: normal; }
.cg-ov svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cg-ov path { fill: none; stroke: #6e6888; stroke-opacity: .8; stroke-width: 2.6; stroke-dasharray: 7.5 6; stroke-linecap: round; transition: stroke .25s, stroke-width .25s, stroke-opacity .25s; }
.cg-ov b {
	position: absolute; left: 5%; top: 3%; padding: 0 1px; border-radius: 2px; background: var(--paper); color: var(--paper-ink);
	font: 800 clamp(6px, 2.35cqw, 13px)/1.05 ui-rounded, "SF Pro Rounded", Nunito, Inter, system-ui, sans-serif; letter-spacing: -.01em;
	transition: background-color .25s, color .25s;
}
.cg-ov i.is-on path { stroke: var(--paper-user); stroke-opacity: 1; stroke-width: 5; }
.cg-ov i.is-on b { background: var(--paper-user); color: #fff; }
.sdk.is-cage .sc { font-size: clamp(.5rem, 5.5cqw, 1.75rem); padding-top: 1.3cqw; }
.sdk.is-cage .nts { inset: 16% 5% 3% 5%; }
/* small boards: the sums would be unreadable, the cages say enough */
.bst-tier .sdk.is-cage .sc, .bst-fan-card .sdk.is-cage .sc, .bst-how-board .sdk.is-cage .sc { padding-top: 1.1cqw; }
.bst-tile-pic .cg-ov path, .bst-game-pic .cg-ov path { stroke-width: 3.4; }

/* the sum card the scenes write on (top right of the board card, like .bst-count) */
.cg-calc {
	position: absolute; z-index: 3; top: -16px; right: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
	padding: 7px 13px; border-radius: 16px; background: var(--zap); color: var(--zap-ink); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
	font-weight: 800; font-size: .95rem; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap;
	opacity: 0; transform: scale(.7); transform-origin: top right; transition: opacity .2s, transform .2s; pointer-events: none;
}
.cg-calc.is-on { opacity: 1; transform: none; }
.cg-calc.is-pop span:last-child { animation: bst-pop .3s ease-out; }
@media (max-width: 520px) { .cg-calc { font-size: .82rem; right: 10px; max-width: calc(100% - 20px); white-space: normal; text-align: right; } }

/* the tutorial's coach bubble (TutorialCoach): under the board, over the tools */
.cg-coach {
	position: absolute; z-index: 6; left: 4%; right: 4%; top: calc(100% + 8px); display: flex; justify-content: center; pointer-events: none;
	opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.cg-coach span {
	position: relative; padding: 9px 13px; border-radius: 14px; background: #fff; color: #1e1a33; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 0 0 2px #0e0b1a;
	font-weight: 700; font-size: clamp(.68rem, 2.9cqw, .85rem); line-height: 1.3; text-align: center;
}
.cg-coach span::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); box-shadow: -2px -2px 0 0 #0e0b1a; }
.cg-coach.is-on { opacity: 1; transform: none; }
.gx-stars.is-glow .st { color: #ffd400; filter: drop-shadow(0 0 6px rgba(255, 212, 0, .9)); animation: cg-glow .9s ease-in-out infinite alternate; }
@keyframes cg-glow { to { transform: scale(1.18); } }

/* the combination cheat sheet */
.cg-cheat { display: grid; gap: 14px; padding: clamp(14px, 3vw, 22px); }
.cg-cheat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cg-chip { display: flex; align-items: center; justify-content: center; padding: 12px 4px; border-radius: 14px; background: var(--surface-2); transition: background-color .3s, transform .3s; }
.cg-chip-cage {
	--s: clamp(19px, 2.3vw + 7px, 30px);
	position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: var(--s); grid-template-rows: var(--s);
	background: var(--paper); border-radius: 6px; box-shadow: 0 0 0 2px var(--paper-ink), 0 4px 0 rgba(0, 0, 0, .25);
}
.cg-chip.is-4 .cg-chip-cage { grid-auto-flow: row; grid-template-columns: var(--s) var(--s); grid-template-rows: var(--s) var(--s); }
.cg-chip-cage::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed rgba(110, 104, 136, .85); border-radius: 3px; pointer-events: none; }
.cg-chip-cage i { position: relative; display: grid; place-items: center; font-style: normal; box-shadow: inset -1px 0 0 var(--paper-line); }
.cg-chip-cage i:last-child { box-shadow: none; }
.cg-chip.is-4 .cg-chip-cage i { box-shadow: inset -1px -1px 0 var(--paper-line); }
.cg-chip-cage b { padding-top: 3px; font: 700 calc(var(--s) * .5)/1 Inter, system-ui, sans-serif; color: var(--paper-user); }
.cg-chip-cage em { position: absolute; z-index: 1; left: 4px; top: 3px; padding: 0 1px; background: var(--paper); font: 800 calc(var(--s) * .3)/1 ui-rounded, Nunito, Inter, system-ui, sans-serif; font-style: normal; color: var(--paper-ink); }
.cg-cheat.is-run .cg-chip:not(.is-on) b { opacity: 0; }
.cg-cheat.is-run .cg-chip.is-on b { animation: bst-pop .35s ease-out both; animation-delay: calc(var(--k) * 110ms); }
.cg-cheat.is-run .cg-cheat-row:not(.is-on) { opacity: .45; }
.cg-cheat-row { transition: opacity .3s; }
.cg-chip.is-on { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
@media (max-width: 420px) { .cg-cheat-row { gap: 6px; } .cg-chip { padding: 10px 2px; } }

/* the game card: the app's MiniCage (3×3 paper, dashed cages, small sums, tilted, Gnatz at the corner) */
.bst-home-pic.cg-home { position: relative; display: block; width: 66%; max-width: 150px; aspect-ratio: 1; margin: 0 auto; }
.bst-tile-pic > .bst-home-pic.cg-home { width: 62%; }
.cg-home-card { position: absolute; inset: 0; padding: 5.5%; border-radius: 13%; background: #0e0b1a; transform: rotate(3deg); }
.cg-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; border-radius: 8%; overflow: hidden; background: var(--paper); container-type: inline-size; }
.cg-home-grid i { position: relative; display: grid; place-items: center; font-style: normal; }
.cg-home-grid i::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 0 dashed rgba(110, 104, 136, .95); }
.cg-home-grid i.t::before { border-top-width: 1.5px; top: 9%; }
.cg-home-grid i.b::before { border-bottom-width: 1.5px; bottom: 9%; }
.cg-home-grid i.l::before { border-left-width: 1.5px; left: 9%; }
.cg-home-grid i.r::before { border-right-width: 1.5px; right: 9%; }
.cg-home-grid b { padding-top: 6cqw; font: 700 17cqw/1 ui-rounded, Nunito, Inter, system-ui, sans-serif; color: var(--paper-ink); }
.cg-home-grid i.is-user b { color: var(--paper-user); }
.cg-home-grid em { position: absolute; left: 12%; top: 9%; font: 800 9cqw/1 ui-rounded, Nunito, Inter, system-ui, sans-serif; font-style: normal; color: var(--paper-ink); background: var(--paper); padding: 0 1px; }
.cg-home-gnatz { position: absolute; right: -16%; bottom: -12%; width: 44% !important; height: auto !important; max-width: none !important; transform: scaleX(-1) rotate(-6deg); }

/* mini boards of the level tiles */
.bst-mini.is-cage canvas { display: block; }

/* the level page: what it takes */
.cg-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); }
.cg-facts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.cg-facts-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.cg-facts-list div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.cg-facts-list dt { font-size: .8rem; color: var(--muted); }
.cg-facts-list dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cg-facts-need { margin: 16px 0 8px; font-weight: 700; }
.cg-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cg-tech a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cg-tech a:hover { border-color: var(--accent); }
@media (max-width: 520px) { .cg-facts-list { grid-template-columns: 1fr 1fr; } .cg-facts-list div:last-child { grid-column: span 2; } }

@media (prefers-reduced-motion: reduce) {
	.cg-ov path, .cg-calc, .cg-coach, .cg-chip, .gx-stars.is-glow .st { animation: none !important; transition: none !important; }
}