/* Beasties: Nonogram (inc/beasties-nonogram.php, assets/js/beasties-nonogram.js).
 * The board as in NonogramView.swift: a dark card, clues above and left, the field a night floor of tiles.
 * .nng is the container; --u is one cell: the card is (clue columns × .62 + .35 + n + .3) cells wide. */

.nng { container-type: inline-size; width: 100%; position: relative; }
.nng-card {
	--u: calc(100cqw / (var(--n) + var(--cr) * .62 + .65));
	position: relative; display: grid; box-sizing: border-box;
	grid-template-columns: calc((var(--cr) * .62 + .35) * var(--u)) calc(var(--n) * var(--u));
	grid-template-rows: calc((var(--cc) * .62 + .35) * var(--u)) calc(var(--n) * var(--u));
	padding: 0 calc(.3 * var(--u)) calc(.3 * var(--u)) 0;
	border-radius: max(10px, calc(.55 * var(--u)));
	background: linear-gradient(180deg, #37305a, #241e45);
	box-shadow: inset 0 0 0 3px #0e0b1a, 0 7px 0 #0e0b1a;
	color: #ede7ff; font: 700 calc(.5 * var(--u))/1 ui-rounded, "SF Pro Rounded", Nunito, system-ui, sans-serif;
	font-variant-numeric: tabular-nums; user-select: none;
}
.nng-cols { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.nng-rows { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(var(--n), minmax(0, 1fr)); }
.nng-cl, .nng-rl {
	display: flex; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; color: inherit; font: inherit;
	border-radius: calc(.22 * var(--u)); transition: background-color .25s, color .25s, opacity .3s;
}
.nng-cl { flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: calc(.12 * var(--u)); }
.nng-rl { flex-direction: row; justify-content: flex-end; align-items: center; padding-right: calc(.1 * var(--u)); }
.nng-cl b, .nng-rl b { display: grid; place-items: center; font-weight: 800; transition: color .25s, transform .25s; }
.nng-cl b { height: calc(.62 * var(--u)); }
.nng-rl b { width: calc(.62 * var(--u)); }
.nng .is-done b { color: rgba(143, 134, 184, .45); }
.nng .is-hl { background: rgba(255, 212, 0, .16); }
.nng .is-hl b { color: #ffd400; }
.nng .is-hl.is-done b { color: rgba(255, 212, 0, .55); }
.nng b.is-on { color: #120f24 !important; background: #ffd400; border-radius: 6px; transform: scale(1.12); }
.nng .is-broke { background: rgba(255, 77, 109, .22); animation: nng-shake .4s ease-out; }
.nng .is-broke b { color: #ff7d95; }
.nng .is-flash { animation: nng-flash .45s cubic-bezier(.3, 1.6, .5, 1); }
.nng .nng-cl.is-flash { transform-origin: 50% 100%; }
.nng .nng-rl.is-flash { transform-origin: 100% 50%; }

.nng-grid {
	grid-column: 2; grid-row: 2; position: relative; display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr));
	background: #1a1533; border-radius: 8px; box-shadow: 0 0 0 2.5px #0e0b1a;
}
.nng .nc { position: relative; display: block; min-width: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; font: inherit; transition: background-color .25s; }
.nng .nc::before { content: ""; position: absolute; inset: 12%; border-radius: 14%; background: #40367c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: inset .35s cubic-bezier(.3, 1.3, .5, 1), border-radius .35s, background-color .3s, opacity .25s, box-shadow .3s; }
.nng .nc.is-f::before { background: #ede7ff; box-shadow: none; }
.nng .nc.is-x::before { inset: 42%; border-radius: 50%; background: rgba(143, 134, 184, .55); box-shadow: none; }
.nng .nc.is-pop::before { animation: nng-pop .24s ease-out; }
.nng .nc.is-hl { background: rgba(255, 255, 255, .09); }
.nng .nc.is-broke { background: rgba(255, 77, 109, .2); }
.nng .nc.is-over::before { box-shadow: 0 0 0 2px #ffd400, 0 0 14px rgba(255, 212, 0, .55); }
.nng .nc.is-key::after { content: ""; position: absolute; inset: -2%; border-radius: 22%; box-shadow: 0 0 0 2.5px #ffd400; animation: nng-key 1.2s ease-in-out infinite; pointer-events: none; z-index: 1; }
.nng .nc.is-shake { animation: nng-shake .35s ease-out; background: rgba(255, 77, 109, .45); border-radius: 12%; }
.nng .nc.is-peek { background: rgba(255, 212, 0, .38); border-radius: 18%; }
/* what if: a tried mark is striped and yellow, until it goes away again */
.nng .nc.is-tf::before { background: repeating-linear-gradient(45deg, #ffd400 0 3px, #f2b800 3px 6px); box-shadow: none; animation: nng-pop .24s ease-out; }
.nng .nc.is-tx::before { inset: 38%; border-radius: 50%; background: #ffd400; box-shadow: none; animation: nng-pop .24s ease-out; }
.nng .nc.is-hint::after { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 3px solid #ffd400; animation: nng-ring .7s ease-out forwards; pointer-events: none; z-index: 2; }
/* a dashed line every five cells */
.nng-lh, .nng-lv { position: absolute; pointer-events: none; transition: opacity .5s; }
.nng-lh { left: 2px; right: 2px; top: calc(var(--k) / var(--n) * 100% - .75px); border-top: 1.5px dashed rgba(143, 134, 184, .35); }
.nng-lv { top: 2px; bottom: 2px; left: calc(var(--k) / var(--n) * 100% - .75px); border-left: 1.5px dashed rgba(143, 134, 184, .35); }
/* overlays: runs pushed left / right, a run that would be too long */
.nng-ov { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.nng-gh { position: absolute; box-sizing: border-box; border-radius: calc(.25 * var(--u)); border: 2.5px solid; animation: nng-in .35s cubic-bezier(.3, 1.5, .5, 1); transition: opacity .3s; }
.nng-gh.is-l { border-color: #4db8ff; background: rgba(77, 184, 255, .22); }
.nng-gh.is-r { border-color: #ff7ab6; background: rgba(255, 122, 182, .22); }
.nng-gh.is-bad { border-color: #ff4d6d; background: rgba(255, 77, 109, .25); border-style: dashed; }
.nng-sw { position: absolute; overflow: hidden; border-radius: 4px; pointer-events: none; }
.nng-sw b { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .8) 45%, rgba(255, 212, 0, .8) 55%, transparent); animation: nng-sweep .6s cubic-bezier(.4, 0, .2, 1) both; }
.nng-sw.is-v b { background: linear-gradient(180deg, transparent, rgba(255, 212, 0, .8) 45%, rgba(255, 212, 0, .8) 55%, transparent); animation-name: nng-sweep-v; }
/* solved: the tiles grow together and take the monster's colour, a wave from the top left */
.nng.is-reveal .nc.is-f::before { inset: 0; border-radius: 1px; background: var(--tint); transition-delay: calc(var(--d) * 30ms); }
.nng.is-reveal .nc.is-x::before, .nng.is-reveal .nc:not(.is-f)::before { opacity: 0; transition-delay: calc(var(--d) * 15ms); }
.nng.is-reveal .nng-lh, .nng.is-reveal .nng-lv { opacity: 0; }
.nng.is-reveal .nng-cols, .nng.is-reveal .nng-rows { opacity: .35; transition: opacity .4s; }
.nng.is-reveal.is-static .nc::before { transition: none; }

@keyframes nng-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes nng-shake { 0%, 100% { transform: none; } 20% { transform: translateX(4px); } 45% { transform: translateX(-4px); } 70% { transform: translateX(2px); } }
@keyframes nng-flash { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes nng-key { 0%, 100% { box-shadow: 0 0 0 2.5px #ffd400; } 50% { box-shadow: 0 0 0 2.5px #ffd400, 0 0 14px 3px rgba(255, 212, 0, .55); } }
@keyframes nng-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes nng-in { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
@keyframes nng-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes nng-sweep-v { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
.nng:not(.is-live) .nc::before { transition: none; }
@media (prefers-reduced-motion: reduce) { .nng *, .nng *::before, .nng *::after { animation: none !important; transition: none !important; } }

/* the picture of a level (PixelMonster) */
.nng-pix { display: block; width: 100%; height: auto; }

/* ---------- on the game screen ---------- */
.gx.is-nono .gx-title .gx-stars { margin-top: 3px; gap: 2px; justify-content: center; }
.gx.is-nono .gx-title .st { width: 15px; height: 15px; }
.gx.is-nono .gx-head { margin-top: 2px; }
.bst-phone .gx-stage.is-nono { margin-top: auto; }
.bst-phone .gx.is-nono .gx-bottom { margin-bottom: auto; padding-bottom: 8%; }
.gx-stage.is-nono .nng { position: relative; z-index: 1; }
.gx-stage.is-nono .gx-peek { z-index: 2; }
.gx.is-nono .gx-tool > svg { width: 22px; height: 22px; padding: 6px 13px; }
.gx.is-nono .gx-tool.is-active > svg { background: #ffd400; color: #120f24; }
.gx.is-nono .gx-tool[data-tool="hint"].is-press > svg { animation: bst-press .3s ease-out; }

/* ---------- guide ---------- */
.bst-board-card.is-nono { padding: 16px; max-width: 460px; }
.bst-tier.is-nono .bst-tier-board { margin-bottom: 4px; }
.bst-tier.is-nono .nng-card { box-shadow: inset 0 0 0 2px #0e0b1a, 0 4px 0 #0e0b1a; }

/* ---------- overview ---------- */
.bst-mini.is-nono { background: #241e45; }
.bst-fan-card.is-nono { display: flex; align-items: center; padding: 10px; background: #1a1533; }
.bst-fan-card.is-nono .nng { align-self: center; }
.bst-game-well.is-nono { max-width: 180px; }
.bst-game.is-nonogram .bst-game-monster { display: none; }
/* how it works, step 2: one row shows itself, cell by cell (loops) */
.bst-how-nng { width: 60%; }
.bst-how-nng .nc.is-r::before { animation: nng-how 6s ease-out infinite both; animation-delay: calc(var(--d) * 90ms); }
.bst-how-nng .nc.is-r { animation: nng-how-bg 6s ease-out infinite both; animation-delay: calc(var(--d) * 90ms); }
@keyframes nng-how { 0%, 12% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.15); } 24%, 80% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; } }
@keyframes nng-how-bg { 0%, 12% { background: transparent; } 18%, 80% { background: rgba(255, 212, 0, .25); } 90%, 100% { background: transparent; } }
.bst-how-board.is-nono { width: 52%; aspect-ratio: 1; display: grid; place-items: center; }
.bst-how-board.is-nono .nng-pix { animation: bst-unblur 5s ease-in-out infinite; }

/* ---------- one level ---------- */
.bst-level.is-nono .bst-boards { align-items: start; }
.bst-nng-stage { padding: 10px; 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-nng-stage .nng-card { box-shadow: inset 0 0 0 2px #0e0b1a; }
.bst-level.is-nono .nng button.nc, .bst-level.is-nono .nng button.nng-cl, .bst-level.is-nono .nng button.nng-rl { cursor: pointer; }
.bst-level.is-nono .nng button.nc:hover:not(.is-f):not(.is-x) { background: rgba(255, 255, 255, .1); }
.bst-level.is-nono .nng button.nng-cl:hover, .bst-level.is-nono .nng button.nng-rl:hover { background: rgba(255, 255, 255, .1); }
.bst-level.is-nono .nng button:focus-visible { outline: 2px solid #ffd400; outline-offset: -2px; }
.bst-level.is-nono .bst-player-bar { margin-top: 16px; }
.nng-say { min-height: 3em; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .95rem; line-height: 1.45; }
.bst-level.is-done .nng-say { color: var(--zap); font-weight: 700; }
.bst-spoiler.is-nono { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22px; background: radial-gradient(80% 80% at 50% 30%, #3a2f74, #1a1533); box-shadow: inset 0 0 0 3px #0e0b1a; }
.nng-pic { width: 66%; transition: filter .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bst-spoiler.is-nono:not(.is-open) .nng-pic { filter: blur(22px) saturate(.4); transform: scale(.9); }
.bst-spoiler.is-nono .bst-cover { border-radius: 22px; }
.bst-level.is-nono .bst-move-list ol { columns: 2 22em; }
@media (max-width: 760px) {
	.bst-level.is-nono .bst-boards { max-width: 560px; }
	.bst-spoiler.is-nono { aspect-ratio: 4 / 3; }
	.nng-pic { width: 52%; }
}
@media (max-width: 420px) {
	.bst-nng-stage { padding: 6px; border-radius: 16px; }
}
.bst-phone .gx.is-nono .gx-tools { margin-top: 26px; }