/* Beasties: Mines (MinesView.swift). The board is a container: number sizes are cqw of it, cells follow --c / --r.
 * Panel #241e45 with the sleeper counter, night floor #1a1533, flat tiles #40367c, the app's number colours. */

.mn { --tile: #40367c; --ink-dark: #0e0b1a; position: relative; width: 100%; container-type: inline-size; box-sizing: border-box; }
.mn-panel { padding: 2.6cqw; border-radius: 4.4cqw; background: linear-gradient(180deg, #2f2a4f, #241e45); box-shadow: inset 0 0 0 3px var(--ink-dark), 0 7px 0 var(--ink-dark); }
.mn-count { display: flex; align-items: center; gap: 1.6cqw; padding: .4cqw 1cqw 2.2cqw; color: #8f86b8; font-size: clamp(.7rem, 3.4cqw, .95rem); font-weight: 500; line-height: 1; }
.mn-count b { font-family: var(--display); font-size: 1.3em; font-weight: 700; color: #ede7ff; min-width: 1.1em; transition: transform .2s; }
.mn-count-moon { width: 1.25em; height: 1.25em; color: #8f86b8; }
.mn-count.is-pulse b { animation: mn-pulse .9s ease-out; }
.mn-count.is-pulse .mn-count-moon { animation: mn-pulse .9s ease-out; }
@keyframes mn-pulse { 0%, 100% { transform: none; color: #ede7ff; } 30% { transform: scale(1.45); color: #ffd400; } 60% { transform: scale(1.1); color: #ffd400; } }
.mn-well { padding: 1cqw; border-radius: 3cqw; background: #1a1533; box-shadow: inset 0 0 0 2.5px var(--ink-dark); }
.mn-grid { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); aspect-ratio: var(--c) / var(--r); }

/* a cell: the tile is ::before (flat, small, lots of air), highlights are ::after */
.mc { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; aspect-ratio: 1; }
.mc::before, .mc::after { content: ""; position: absolute; pointer-events: none; }
.mc.s-c::before, .mc.s-f::before { inset: 12%; border-radius: 16%; background: var(--tile); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mc b { position: relative; z-index: 1; font: 900 calc(46cqw / var(--c)) / 1 ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; }
.mc .n1 { color: #6fb6ff; } .mc .n2 { color: #7ed957; } .mc .n3 { color: #ff6b81; } .mc .n4 { color: #b48cff; }
.mc .n5 { color: #ffa552; } .mc .n6 { color: #4dd6c8; } .mc .n7, .mc .n8 { color: #ede7ff; }
.mc .mn-moon { position: relative; z-index: 1; width: 40%; height: auto; color: #b9acf5; }
/* woken by mistake: a red tile, the grumpy monster tucked in it like in bed */
.mc.s-w::before { inset: 12%; border-radius: 16%; background: #b8324a; box-shadow: inset 0 0 0 1.5px #ff6b81; }
.mc.s-w img, .mc.s-p img, .mn-peek img { position: absolute; z-index: 1; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: cover; object-position: 50% 8%; border-radius: 16%; }
.mc.s-w img { filter: saturate(.85); }
/* solved: every sleeper wakes up and waves */
.mn.is-party .mc.s-p img { animation: mn-wave 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.mn.is-party .mc.s-p:nth-child(2n) img { animation-delay: -.5s; }
.mn.is-party .mc.s-p:nth-child(3n) img { animation-delay: -.9s; }
@keyframes mn-wave { 0%, 100% { transform: none; } 30% { transform: translateY(-6%) rotate(-5deg); } 60% { transform: rotate(4deg); } }

/* highlights (scenes and the step player) */
.mc.h-why::after { inset: 4%; border-radius: 18%; background: rgba(255, 212, 0, .16); box-shadow: inset 0 0 0 2px #ffd400, 0 0 14px rgba(255, 212, 0, .35); animation: mn-in .3s ease-out; }
.mc.h-area::after { inset: 4%; border-radius: 18%; background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 2px rgba(255, 212, 0, .75); animation: mn-in .3s ease-out; }
.mc.h-safe::after { inset: 4%; border-radius: 18%; background: rgba(126, 217, 87, .14); box-shadow: inset 0 0 0 2px #7ed957; animation: mn-in .3s ease-out; }
.mc.h-bad::after { inset: 4%; border-radius: 18%; background: rgba(255, 77, 109, .22); box-shadow: inset 0 0 0 2.5px #ff4d6d, 0 0 16px rgba(255, 77, 109, .5); animation: mn-in .3s ease-out, mn-shake .4s .1s ease-out; }
.mc.h-new::after { inset: 2%; border-radius: 20%; box-shadow: 0 0 0 2px #ffd400, 0 0 18px rgba(255, 212, 0, .55); animation: mn-glow 1.6s ease-out both; }
@keyframes mn-in { from { opacity: 0; transform: scale(.8); } }
@keyframes mn-glow { 0% { opacity: 0; transform: scale(1.3); } 20% { opacity: 1; transform: none; } 100% { opacity: .55; } }
/* "what if": a mark in pencil */
.mn-ghost { position: absolute; z-index: 2; inset: 18%; display: grid; place-items: center; border-radius: 50%; animation: mn-in .3s ease-out; }
.mn-ghost.is-m { border: 2px dashed #b9acf5; background: rgba(185, 172, 245, .14); }
.mn-ghost.is-m .mn-moon { width: 62%; opacity: .9; }
.mn-ghost.is-s { inset: 30%; border: 2.5px dashed #7ed957; }
/* who sleeps there (rules scene): a faint look under the tile */
.mn-peek { position: absolute; inset: 0; z-index: 1; opacity: .7; animation: mn-in .4s ease-out; }
.mn-peek img { filter: brightness(.9); }
.mc.is-pop { animation: mn-pop .32s ease-out both; }
@keyframes mn-pop { 0% { transform: scale(.55); opacity: .2; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.mc.is-tap::after { inset: -10%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); animation: mn-tap .45s ease-out both; }
@keyframes mn-tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.mn.is-shake .mn-panel { animation: mn-shake .4s ease-out; }
@keyframes mn-shake { 0%, 100% { transform: none; } 15% { transform: translateX(9px); } 32% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 68% { transform: translateX(-4px); } 84% { transform: translateX(2px); } }
/* the woken monster jumps out, big */
.mn-burst { position: absolute; z-index: 6; pointer-events: none; transform-origin: 50% 100%; }
.mn-burst img { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; object-fit: cover; object-position: 50% 8%; border-radius: 16%; }
.mn-burst b { position: absolute; right: -12%; top: -14%; padding: 0 .3em; border-radius: 999px; background: #ff4d6d; color: #fff; font: 900 .7rem/1.3 var(--display); box-shadow: inset 0 0 0 1.5px #0e0b1a; }

/* a window of a board (technique scenes): no panel, the cut edges fade out */
.mn.is-cut .mn-panel { padding: 0; background: none; box-shadow: none; }
.mn.is-cut .mn-well { padding: 1.4cqw; border-radius: 5cqw; }
.mn.is-cut .mn-grid {
	--ft: 0%; --fb: 0%; --fl: 0%; --fr: 0%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%), linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%), linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
	mask-composite: intersect;
}
.mn.cut-t .mn-grid { --ft: 11%; } .mn.cut-b .mn-grid { --fb: 11%; } .mn.cut-l .mn-grid { --fl: 11%; } .mn.cut-r .mn-grid { --fr: 11%; }
.mn.cut-t .mn-well { border-top-left-radius: 0; border-top-right-radius: 0; }
.mn.cut-b .mn-well { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

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

/* ---------- cards, tiers, fan, games page ---------- */
.bst-board-card.is-mines { padding: 14px; }
.bst-board-card.is-mines .mn.is-cut { max-width: calc(var(--c) * 66px); margin: 0 auto; }
.bst-board-card.is-mines.is-full .mn { max-width: 400px; margin: 0 auto 7px; }
.bst-mini.is-mines { background: #2a2352; background-image: none; aspect-ratio: var(--c, 8) / var(--r, 9); }
.bst-tab .bst-mini.is-mines { width: 44px; }
.bst-tier.is-mines .bst-tier-board { margin-bottom: 10px; }
.bst-tier.is-mines .mn-panel { padding: 2cqw; }
.bst-fan-card.is-mines { display: flex; }
.bst-fan-card.is-mines .bst-fan-well { flex: 1; display: grid; place-items: center; min-width: 0; }
.bst-fan-card.is-mines .mn { width: 84%; }
.bst-game.is-mines .bst-game-monster { display: none; }
.bst-mn-card { width: 100%; }
.bst-how-pic .bst-scene:has(.bst-how-mn) { grid-template-columns: minmax(0, 1fr); }
.bst-how-pic .bst-scene-visual:has(.bst-how-mn) { width: 100%; display: grid; place-items: center; }
.bst-how-mn { width: 52%; position: relative; }
.bst-how-mn .mn-panel { padding: 2cqw; box-shadow: inset 0 0 0 2px var(--ink-dark), 0 5px 0 var(--ink-dark); }
.bst-how-mn.is-reveal .mn { animation: bst-unblur 5s ease-in-out infinite; }
.bst-how-mn.is-reveal .mn-grid img { animation: none; }
@media (max-width: 860px) { .bst-how-mn { width: 44%; } }

/* ---------- the game screen ---------- */
.gx.is-mines .gx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 4px; }
.gx.is-mines .gx-title .gx-stars { justify-content: center; gap: 3px; margin-top: 3px; }
.gx.is-mines .gx-title .st { width: 15px; height: 15px; }
.bst-phone .gx-stage.is-mines { margin-top: auto; margin-bottom: 4px; padding-top: calc(var(--pw) * .7); }
.gx-stage.is-mines .mn { position: relative; z-index: 1; }
.gx-stage.is-mines .mn-panel { padding: 2.4cqw; }
.bst-phone .gx.is-mines .gx-bottom { position: relative; margin-bottom: auto; padding-bottom: 6px; }
.bst-phone .gx.is-mines .gx-tools { margin-top: 20px; }
.gx.is-mines .gx-tool .mn-tool-moon { width: 24px; height: 24px; padding: 5px 12px; border-radius: 999px; transition: background-color .2s, color .2s; }
.gx.is-mines .gx-tool.is-active .mn-tool-moon { background: #ffd400; color: #120f24; }
.gx.is-mines .gx-offer { top: 4px; bottom: auto; }
.gx.is-mines .gx-peek { --px: .82; }

/* ---------- one level: the step player and the whole board ---------- */
.bst-level.is-mines { max-width: 1080px; }
.bst-mn-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bst-mn-stage { max-width: calc(var(--cols, 9) * 52px + 40px); margin-inline: auto; }
.bst-mn-stage .mn { max-width: min(520px, max(300px, calc((100svh - 330px) * var(--c) / var(--r)))); margin: 0 auto 7px; }
.bst-mn-why { min-height: 4.8em; margin: 14px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); line-height: 1.5; }
.bst-level.is-mines [data-step-kind] { color: var(--text); font-weight: 600; }
.bst-level.is-mines.is-done .bst-mn-why { border-color: color-mix(in srgb, var(--zap) 55%, var(--line)); color: var(--text); }
.bst-mn-whole .bst-spoiler { border-radius: 18px; }
.bst-mn-whole .bst-spoiler:not(.is-open) .mn { filter: blur(9px) saturate(.6); user-select: none; }
.bst-mn-whole .mn { transition: filter .35s ease; }
.bst-mn-whole .bst-cover { border-radius: 18px; }
.bst-level.is-mines .bst-move-list ol { columns: 2 22em; }
.bst-level.is-mines .bst-move-list small { color: var(--muted); }
.bst-level.is-mines .bst-move-list strong.is-sleep { color: #b9acf5; }
@media (max-width: 900px) {
	.bst-mn-grid { grid-template-columns: 1fr; max-width: 560px; }
}