/* Beasties: Number Cross (inc/beasties-cross.php, assets/js/beasties-cross.js).
 * The board as the app draws it (CrossView.swift): a dark well (#1a1533, 4 pt padding, radius 12) around the grid
 * (radius 8); clue cells #40367c with a 0.75 pt border #2b2150, a white 25 % diagonal from the top left to the bottom
 * right, the across sum at 70 % / 30 % and the down sum at 30 % / 72 % (30 % of a cell, bold rounded, Theme.ink);
 * light cells on Sudoku paper with a 0.5 pt line, digits 56 % of a cell (given semibold ink, typed medium purple),
 * notes in a 3×3 grid. Sizes are cqw of .cx-grid (container): one cell = 100cqw / --w. */

.cx {
	display: block; box-sizing: border-box; padding: 4px; border-radius: 12px; background: #1a1533;
	font-variant-numeric: tabular-nums; user-select: none;
}
.cx-grid {
	display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); aspect-ratio: var(--w) / var(--h);
	border-radius: 8px; overflow: hidden; container-type: inline-size;
}
.cx-k, .cx .sc { position: relative; display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; }
.cx-k { background: #40367c; box-shadow: inset 0 0 0 .75px #2b2150; }
.cx-k.is-clue { background-image: linear-gradient(to top right, transparent calc(50% - .6px), rgba(255, 255, 255, .25) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)); }
.cx-k b {
	position: absolute; transform: translate(-50%, -50%); padding: 0 .12em; border-radius: .3em; color: #ede7ff; line-height: 1.05; white-space: nowrap;
	font: 700 calc(30cqw / var(--w)) / 1.05 ui-rounded, "SF Pro Rounded", Nunito, Inter, system-ui, sans-serif; letter-spacing: -.02em;
	transition: background-color .25s, color .25s, transform .25s;
}
.cx-k .cx-a { left: 70%; top: 30%; }
.cx-k .cx-d { left: 30%; top: 72%; }
.cx-k b.is-on { background: #ffd400; color: #120f24; transform: translate(-50%, -50%) scale(1.25); }
.cx .sc {
	display: grid; place-items: center; overflow: hidden; background: var(--paper); color: var(--paper-ink);
	box-shadow: inset 0 0 0 1px var(--paper-line);
	font: 600 calc(56cqw / var(--w)) / 1 ui-rounded, "SF Pro Rounded", Nunito, Inter, system-ui, sans-serif;
	transition: background-color .25s ease, color .25s ease;
}
.cx .sc.is-filled, .cx .sc.is-hint { color: var(--paper-user); font-weight: 500; }
.cx .sc.is-peer, .cx .sc.is-run { background: #eeeaf8; }
.cx .sc.is-hit, .cx .sc.is-area { background: #d6ccfa; }
.cx .sc.is-minus { background: #fbe3e7; }
.cx .sc.is-sel { background: #ffe066; }
.cx .sc.is-key { background: #ffe066; box-shadow: inset 0 0 0 2px #e0b400; }
.cx .sc.is-hint { background: #fff3b8; }
.cx .sc.is-wrong { color: #d92d4b; background: #fde2e6; }
.cx .sc.is-shake { animation: cx-shake .32s ease-out; }
.cx .sc.is-pop { animation: bst-pop .32s ease-out; }
.cx .sc.is-hop { animation: cx-hop .42s ease-out both; }
@keyframes cx-hop { 0% { transform: none; } 35% { transform: translateY(-14%) scale(1.18); } 100% { transform: none; } }
@keyframes cx-shake { 0%, 100% { transform: none; } 20% { transform: translateX(10%); } 45% { transform: translateX(-10%); } 70% { transform: translateX(6%); } }
/* notes: a 3×3 grid of small candidates (app: 24 % of a cell, #6e6888) */
.cx .nts { position: absolute; inset: 5%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-size: .43em; font-weight: 700; line-height: 1; color: #6e6888; }
.cx .nts i { font-style: normal; display: grid; place-items: center; opacity: 0; transition: opacity .25s, color .25s; }
.cx .nts i.is-on { opacity: 1; animation: bst-pop .25s ease-out; }
.cx .nts i.is-on.is-big { color: #5b3fd0; font-weight: 900; transform: scale(1.3); transition: opacity .25s, color .25s, transform .25s; }
.cx .nts i.is-out { color: #d92d4b; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; animation: bst-shake .3s ease-out; }
.cx .sc.is-key .nts i.is-on { color: var(--paper-ink); font-weight: 800; }
/* the level page: tap a cell for its digit */
.cx button.sc.is-empty { cursor: pointer; color: var(--paper-user); }
.cx button.sc.is-empty:hover { background: #eeeaf8; }
.cx button.sc.is-empty:focus-visible { outline: 2px solid var(--paper-user); outline-offset: -3px; }
.cx button.sc.is-peek { background: #ffe066; cursor: default; animation: bst-pop .28s ease-out; font-weight: 500; }
.bst-spoiler.is-cross .cx { transition: filter .35s ease; }
.bst-spoiler.is-cross:not(.is-open) .cx { filter: blur(9px) saturate(.6); }
.bst-level.is-cross .bst-board .cx { width: min(100%, calc(560px * var(--w) / var(--h))); margin: 0 auto; }

/* ---------- the game screen (phone): Gnatz over the board, the combos line, tools and number pad ---------- */
.gx-stage.is-cross .cx { position: relative; z-index: 1; box-shadow: 0 6px 0 rgba(0, 0, 0, .28); }
.gx-stage.is-cross .gx-peek { z-index: 2; }
.bst-phone .gx.is-cross .gx-stage { margin-top: auto; }
.bst-phone .gx.is-cross .gx-bottom { margin-bottom: auto; padding-bottom: 4%; }
.bst-phone .gx.is-cross .gx-tools { margin-top: 10px; }
.gx.is-cross .gx-key b { font-size: clamp(1.25rem, 5.6vw, 1.75rem); }
.cx-combos {
	display: flex; justify-content: center; gap: 14px; min-height: 1.4em; margin: 8px 0 0; padding: 0 4px;
	font-size: clamp(.62rem, 2.9cqw, .78rem); font-weight: 600; color: #8f86b8; font-variant-numeric: tabular-nums;
	white-space: nowrap; overflow: hidden;
}
.cx-combos span { animation: bst-fade .25s ease-out; }
.gx.is-cross .gx-stars.is-glow .st { color: #ffd400; filter: drop-shadow(0 0 6px rgba(255, 212, 0, .9)); animation: cx-glow .9s ease-in-out infinite alternate; }
@keyframes cx-glow { to { transform: scale(1.18); } }

/* the tutorial's coach bubble (TutorialCoach): under the board, over the tools */
.cx-coach {
	position: absolute; z-index: 6; left: 4%; right: 4%; top: calc(100% + 6px); 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);
}
.cx-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;
}
.cx-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; }
.cx-coach.is-on { opacity: 1; transform: none; }

/* ---------- a board on a card (technique scenes) and the sum card ---------- */
.bst-board-card.is-cross { padding: 14px; max-width: 470px; }
.bst-board-card.is-cross .cx { width: min(100%, calc(440px * var(--w) / var(--h))); margin: 0 auto; }
.cx-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;
}
.cx-calc.is-on { opacity: 1; transform: none; }
.cx-calc.is-pop span:last-child { animation: bst-pop .3s ease-out; }
@media (max-width: 520px) { .cx-calc { font-size: .82rem; right: 10px; max-width: calc(100% - 20px); white-space: normal; text-align: right; } }

/* ---------- the combination cheat sheet: little runs with their clue cell ---------- */
.cx-cheat { display: grid; gap: 14px; padding: clamp(14px, 3vw, 22px); }
.cx-cheat-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transition: opacity .3s; }
.cx-chip { display: flex; align-items: center; justify-content: center; padding: 12px 4px; border-radius: 14px; background: var(--surface-2); transition: background-color .3s; }
.cx-chip-run {
	--s: clamp(22px, 2.2vw + 10px, 32px);
	display: grid; grid-auto-flow: column; grid-auto-columns: var(--s); grid-template-rows: var(--s);
	padding: 3px; border-radius: 8px; background: #1a1533; box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
}
.cx-chip-run em {
	position: relative; display: block; font-style: normal; background: #40367c; border-radius: 5px 0 0 5px;
	background-image: linear-gradient(to top right, transparent calc(50% - .6px), rgba(255, 255, 255, .25) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px));
}
.cx-chip-run em b { position: absolute; white-space: nowrap; left: 70%; top: 30%; transform: translate(-50%, -50%); color: #ede7ff; font: 700 calc(var(--s) * .32)/1 ui-rounded, Nunito, Inter, system-ui, sans-serif; }
.cx-chip-run i { display: grid; place-items: center; font-style: normal; background: var(--paper); box-shadow: inset 0 0 0 .5px var(--paper-line); }
.cx-chip-run i:last-child { border-radius: 0 5px 5px 0; }
.cx-chip-run i b { font: 600 calc(var(--s) * .56)/1 ui-rounded, Nunito, Inter, system-ui, sans-serif; color: var(--paper-user); }
.cx-cheat.is-run .cx-chip:not(.is-on) i b { opacity: 0; }
.cx-cheat.is-run .cx-chip.is-on i b { animation: bst-pop .35s ease-out both; animation-delay: calc(var(--k) * 110ms); }
.cx-cheat.is-run .cx-cheat-row:not(.is-on) { opacity: .45; }
.cx-chip.is-on { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
@media (max-width: 420px) { .cx-cheat-row { gap: 6px; } .cx-chip { padding: 10px 2px; } }

/* ---------- difficulty boards, fan, how it works, mini tiles ---------- */
.bst-tier.is-cross .bst-tier-board { display: flex; justify-content: center; align-items: center; aspect-ratio: 1; }
.bst-tier.is-cross .cx { width: calc(100% * var(--w) / var(--h)); }
.bst-fan-card.is-cross { display: flex; align-items: center; justify-content: center; }
.bst-fan-card.is-cross .cx { width: calc(100% * var(--w) / var(--h)); }
.bst-how-board.is-cross { display: flex; justify-content: center; }
.bst-how-board.is-cross .cx { width: calc(100% * var(--w) / var(--h)); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.bst-how-board.is-peek.is-cross .sc.is-filled { animation: bst-reveal 6s ease-out infinite both; }
.bst-how-board.is-peek.is-cross .is-r2 { animation-delay: .9s; }
.bst-how-board.is-peek.is-cross .is-r3 { animation-delay: 1.8s; }
.bst-how-board.is-reveal.is-cross .cx { animation: bst-unblur 5s ease-in-out infinite; }
.bst-mini.is-cross { background: #1a1533; background-image: none; }
.bst-mini.is-cross canvas { display: block; }

/* the game card: the app's MiniCross (4×4 on the sticker panel, tilted 3°, Gnatz at the corner) */
.bst-home-pic.cx-home { position: relative; display: block; width: 62%; max-width: 150px; aspect-ratio: 1; margin: 0 auto; }
.bst-tile-pic > .bst-home-pic.cx-home { width: 58%; }
.cx-home-card { position: absolute; inset: 0; display: block; padding: 4%; border-radius: 12%; background: #0e0b1a; transform: rotate(3deg); }
.cx-home-card .cx { padding: 0; background: none; }
.cx-home-card .cx-grid { border-radius: 7%; }
.cx-home-gnatz { position: absolute; right: -18%; bottom: -12%; width: 44% !important; height: auto !important; max-width: none !important; transform: scaleX(-1) rotate(-6deg); }

/* ---------- the level page: what it takes ---------- */
.cx-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); }
.cx-facts h2 { margin: 0 0 12px; font-size: 1.15rem; }
.cx-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.cx-facts-list div { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.cx-facts-list dt { font-size: .8rem; color: var(--muted); }
.cx-facts-list dd { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.cx-facts-need { margin: 16px 0 8px; font-weight: 700; }
.cx-tech { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-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); }
.cx-tech a:hover { border-color: var(--accent); }
@media (max-width: 620px) { .cx-facts-list { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.cx *, .cx-calc, .cx-coach, .cx-chip, .cx-combos span, .gx.is-cross .gx-stars.is-glow .st { animation: none !important; transition: none !important; }
}