/* 扫雷 —— 黑金柠檬
 * 图片只有四样:钻石、水雷、爆炸、刺猬(三个表情)。棋盘、格子、倍数条、按钮全是 CSS。
 * 版面:顶栏 / 舞台(倍数条 + 刺猬 + 5×5 棋盘)/ 控制面板。舞台吃掉剩下的高度,棋盘在里面取最大的正方形。
 */
.mines {
  position: fixed; inset: 0; z-index: 10; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--safe-t, 0px) 0 calc(var(--safe-b, 0px) + 10px);
  --bg: #0a0a0a; --surface: #151515; --surface-2: #1c1c1c; --line: #242424;
  --ink: #fff; --ink-2: #8a8a8a; --ink-3: #5c5c5c; --neon: #e5ff3d; --neon-ink: #0a0a0a; --bad: #ff5a5a;
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --head: 70px;           /* 棋盘上面那一条(倍数条 / 结果)的高度 */
  background: var(--bg); color: var(--ink); font-family: var(--sans);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mines[hidden] { display: none; }
.mines :where(p, h2, h3) { margin: 0; }
/* 用 :where 把重置的权重压到 0:后面单个 class 的按钮样式才盖得过它(road.css 那种写法会把背景吃掉) */
.mines :where(button) { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.mines button:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.mines img { -webkit-user-drag: none; pointer-events: none; }
/* 按钮里面的字、金额、金币一律点不到:按下、松手、click 都落在按钮本身(收钱上的金额每翻一格就换,PA 金币那层还会换成新的 <span>+<img>) */
.mines button > *, .mines button * { pointer-events: none; }

/* ---------- 顶栏 ---------- */
.mn-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.mn-back, .mn-help { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mn-back svg, .mn-help svg { width: 20px; height: 20px; }
.mn-help { color: var(--ink-2); font-weight: 700; }
.mn-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mn-bal { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 340px) { .mn-top { gap: 8px; padding-left: 12px; padding-right: 12px; } .mn-title { font-size: 15px; } .mn-bal { padding: 7px 10px; } }
/* 顶栏多了音符按钮(2026-10-23):间距收一点、余额框窄一点 */
.mn-top.has-music { gap: 6px; }
.mn-top.has-music .mn-bal { padding-inline: 10px; flex-shrink: 1; min-width: 0; }

/* ---------- 舞台 ---------- */
/* 舞台是个量得到宽高的盒子(container),棋盘那一组按「宽」和「高 − 上面那一条」里小的那个取正方形。
   不支持 container 单位的旧浏览器退回按屏幕高度估。 */
.mn-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 16px; container-type: size; }
.mn-wrap { position: relative; width: 100%; max-width: max(220px, calc(100vh - 330px - var(--head))); padding-top: var(--head); }
@supports (width: 1cqw) {
  .mn-wrap { width: min(100cqw, calc(100cqh - var(--head))); max-width: none; }
}

/* 倍数条:翻到第几颗是几倍。拿到的发黄,下一颗描白边,后面的灰着 */
.mn-head { position: absolute; left: 0; right: 100px; top: 0; height: var(--head); display: flex; align-items: center; }
.mn-rail { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 28px; }
.mn-rail::-webkit-scrollbar { display: none; }
.mn-rung { flex: none; min-width: 56px; height: 46px; padding: 0 8px; display: grid; justify-items: center; align-content: center; gap: 1px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mn-rung i { font-style: normal; font-size: 10px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mn-rung b { font-size: 14px; line-height: 1.15; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mn-rung.is-done { box-shadow: inset 0 0 0 1px rgba(229, 255, 61, .38); }
.mn-rung.is-done i { color: rgba(229, 255, 61, .6); }
.mn-rung.is-done b { color: var(--neon); }
.mn-rung.is-next { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--ink); }
.mn-rung.is-next i { color: var(--ink-2); }
.mn-rung.is-next b { color: var(--ink); }

/* 结果:占倍数条那个位置,棋盘整块留给摊开的雷和钻石 */
.mn-result { display: grid; gap: 3px; min-width: 0; animation: mn-rise .28s ease-out both; }
.mn-result b { font-size: 30px; line-height: 1.05; font-weight: 800; color: var(--neon); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-result.is-bad b { color: var(--bad); }
.mn-result.is-plain b { color: var(--ink); font-size: 22px; }   /* 退回的局:不是赢也不是输,白字、小一号(这句在几种语言里比较长,30px 会被截掉) */
.mn-result small { font-size: 12px; line-height: 1.3; color: var(--ink-2); }
/* 踩雷那一行只有输掉的钱:红字、大一号,跟别的游戏的「−RM x」一样 */
.mn-result .mn-loss { font-size: 16px; font-weight: 800; color: var(--bad); font-variant-numeric: tabular-nums; }
.mn-result b.is-big { text-shadow: 0 0 26px rgba(229, 255, 61, .55); }
@keyframes mn-rise { from { opacity: 0; transform: translateY(8px); } }

/* 刺猬:站在棋盘后面探出上半身,下半身被棋盘挡住 */
.mn-hog { position: absolute; right: 2px; top: calc(var(--head) - 82px); width: 98px; height: 110px; background: center top / contain no-repeat; pointer-events: none; }
.mn-hog.is-idle { background-image: url(/img/mines/hog-idle.webp?v=1); }
.mn-hog.is-win { background-image: url(/img/mines/hog-win.webp?v=1); animation: mn-hop .5s cubic-bezier(.3, 1.5, .5, 1); }
.mn-hog.is-boom { background-image: url(/img/mines/hog-boom.webp?v=1); animation: mn-jolt .4s ease-out; }
.mn-hog.is-cheer { animation: mn-cheer .32s ease-out; }
@keyframes mn-hop { 0% { transform: translateY(18px); } 55% { transform: translateY(-7px); } }
@keyframes mn-cheer { 40% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes mn-jolt { 0% { transform: translateY(-10px) rotate(-5deg); } 40% { transform: translateY(3px) rotate(4deg); } 70% { transform: rotate(-2deg); } }

/* 棋盘 */
.mn-board { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 2.4%; padding: 3%; border-radius: 22px; background: #101010; box-shadow: inset 0 0 0 1px var(--line); }
.mn-board.is-shake { animation: mn-shake .36s linear; }
@keyframes mn-shake { 10% { transform: translate(-5px, 2px); } 25% { transform: translate(5px, -3px); } 40% { transform: translate(-4px, -2px); } 55% { transform: translate(4px, 3px); } 70% { transform: translate(-2px, 1px); } 85% { transform: translate(2px, -1px); } }

/* 格子。盖着的像一颗按键:面上亮一点,底下压一道深色的边 */
.mn-tile { position: relative; min-width: 0; min-height: 0; border-radius: 22%; background: #212121; box-shadow: inset 0 0 0 1px #2e2e2e, inset 0 -4px 0 rgba(0, 0, 0, .3); transition: transform .09s ease-out, background-color .16s ease-out, opacity .2s ease-out; }
.mn-board:not(.is-live) .mn-tile.is-closed { opacity: .7; }   /* 还没开局:暗一点,按了「开始」才亮起来 */
/* 开局那一下:格子沿着斜线一排一排亮起来(--g 是这一格在第几条斜线上,mines.js 写进去的) */
.mn-board.is-live .mn-tile.is-closed { animation: mn-wake .3s ease-out backwards; animation-delay: calc(var(--g, 0) * 22ms); }
@keyframes mn-wake { from { opacity: .7; transform: scale(.93); } }
.mn-board.is-live .mn-tile.is-closed:active { transform: scale(.93); background: #2a2a2a; }
.mn-tile.is-waiting { background: #2a2a2a; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), inset 0 -4px 0 rgba(0, 0, 0, .3); animation: mn-wait .5s ease-in-out infinite alternate; }
@keyframes mn-wait { to { transform: scale(.94); } }
.mn-face { position: absolute; inset: 11%; display: grid; place-items: center; }
.mn-face img { width: 100%; height: 100%; object-fit: contain; }

/* 翻出来的钻石:格子陷下去,描一圈柠檬黄 */
.mn-tile.is-gem { background: #0d0d0d; box-shadow: inset 0 0 0 1.5px rgba(229, 255, 61, .5); }
.mn-tile.is-pop .mn-face img { animation: mn-pop .34s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes mn-pop { from { opacity: 0; transform: scale(.3) rotate(-14deg); } }
.mn-tile.is-gem.is-pop::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 2px var(--neon); opacity: 0; animation: mn-ring .45s ease-out; pointer-events: none; }
@keyframes mn-ring { 0% { opacity: .9; transform: scale(.82); } 100% { opacity: 0; transform: scale(1.18); } }

/* 收钱那一下:翻出来的钻石沿着斜线依次闪一下 */
.mn-board.is-won .mn-tile.is-gem .mn-face img { animation: mn-glint .55s ease-out; animation-delay: calc(var(--g, 0) * 34ms); }
@keyframes mn-glint { 35% { transform: scale(1.18) rotate(5deg); filter: brightness(1.3); } }

/* 踩到的那颗雷 */
.mn-tile.is-hit { z-index: 2; background: #2c0f0f; box-shadow: inset 0 0 0 1.5px var(--bad); }
/* 平时看不见:只在动画那半秒里出现。关了动态效果的手机上它就一直不出现,不会停在格子上 */
.mn-boom { position: absolute; inset: -62%; background: url(/img/mines/boom.webp?v=1) center / contain no-repeat; opacity: 0; pointer-events: none; animation: mn-boom .6s ease-out; }
@keyframes mn-boom { 0% { opacity: 0; transform: scale(.3); } 22% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }

/* 局结束后摊开的:没踩到的雷、没翻到的钻石,都压暗 —— 亮着的只有玩家自己翻出来的 */
.mn-tile.is-mine, .mn-tile.is-spare { background: #0d0d0d; box-shadow: inset 0 0 0 1px #1c1c1c; }
.mn-tile.is-mine .mn-face img { opacity: .62; }
.mn-tile.is-spare .mn-face img { opacity: .3; filter: grayscale(.85) brightness(1.15); }
.mn-tile.is-late .mn-face { animation: mn-late .3s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes mn-late { from { opacity: 0; transform: scale(.7); } }

/* ---------- 控制面板 ---------- */
.mn-panel { flex: none; display: grid; gap: 8px; padding: 12px 16px 0; }
/* 等服务器的时候不收第二下;等超过 300ms(mines.js 的 WAIT_DIM_MS)才变灰 */
.mn-panel.mn-busy { pointer-events: none; }
/* 「收钱」例外:上一格还在等回复的时候也按得到(按了 = 这一格回来就收,排着的那一格不翻了) */
.mn-panel.mn-busy [data-mn="cash"] { pointer-events: auto; }
/* 等回复超过 0.3 秒:面板暗下去。「收钱」这时还按得到(见上一条),不能跟着暗,所以暗的是它以外的每一块,不是整块面板 */
.mn-panel.mn-busy.mn-wait > :not(.mn-acts),
.mn-panel.mn-busy.mn-wait .mn-acts > :not([data-mn="cash"]) { opacity: .55; }

.mn-minesrow { display: flex; align-items: center; gap: 10px; }
.mn-label { flex: none; font-size: 13px; color: var(--ink-2); }
.mn-seg { flex: 1; min-width: 0; display: flex; gap: 6px; }
.mn-chip { flex: 1; min-width: 0; min-height: 38px; padding: 0 4px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-chip.is-on { background: var(--neon); color: var(--neon-ink); box-shadow: none; }
.mn-chip:disabled { opacity: .4; }
.mn-more { flex: 1.5; font-size: 13px; }
.mn-more.is-on { font-size: 15px; }

.mn-betrow { display: flex; align-items: stretch; gap: 8px; }
.mn-step { display: grid; place-items: center; width: 54px; flex: none; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 24px; font-weight: 700; }
.mn-step:disabled { opacity: .35; }
.mn-bet { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 54px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.mn-bet small { font-size: 11px; color: var(--ink-2); }
.mn-bet b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.mn-quick { display: flex; gap: 6px; }
.mn-qbtn { flex: 1; min-width: 0; min-height: 36px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-qbtn.is-on { box-shadow: inset 0 0 0 1px var(--neon); color: var(--neon); }
.mn-qbtn:disabled { opacity: .35; }

.mn-acts { display: flex; gap: 8px; }
/* 「取消」和「收钱」占同一格、原地切 hidden(一格没翻是取消,翻开第一颗是收钱):.mn-btn 的 display:grid 会盖过 hidden,要补这一条 */
.mn-btn[hidden] { display: none; }
.mn-btn { flex: 1; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 58px; padding: 0 10px; border-radius: 18px; font-weight: 800; }
.mn-btn span { font-size: 17px; line-height: 1.15; text-align: center; }
.mn-btn small { font-size: 15px; font-weight: 800; color: inherit; opacity: 1; font-variant-numeric: tabular-nums; }
/* 「收钱」已经按了、还在等(等上一格回来,或者等收钱的回复):按下去的样子 + 一明一暗,看得出它收到了 */
.mn-btn.is-armed { transform: scale(.975); animation: mn-armed .6s ease-in-out infinite alternate; }
@keyframes mn-armed { from { filter: brightness(1); } to { filter: brightness(.7); } }
.mn-btn small.is-bump { animation: mn-bump .3s ease-out; }
@keyframes mn-bump { 40% { transform: scale(1.2); } }
.mn-btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.mn-btn.primary { flex: 1.2; background: var(--neon); color: var(--neon-ink); }
.mn-btn.is-wide { font-size: 22px; }
.mn-btn:active:not(:disabled) { transform: scale(.985); }
.mn-btn:disabled { opacity: .35; }
/* 没开局就去点格子:让「开始」晃一下,告诉他先按这里 */
.mn-btn.is-nudge { animation: mn-nudge .4s ease-out; }
@keyframes mn-nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

.mn-hint { padding: 0; font-size: 12px; line-height: 1.35; color: var(--ink-3); text-align: center; }

/* ---------- 自选雷数 ---------- */
.mn-picker { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .66); }
.mn-picker[hidden] { display: none; }
.mn-sheet { width: 100%; padding: 20px 16px calc(var(--safe-b, 0px) + 18px); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: inset 0 1px 0 var(--line); animation: mn-up .22s ease-out both; }
.mn-sheet h3 { font-size: 18px; font-weight: 700; }
.mn-sheet p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.mn-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 14px; }
.mn-pick { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.mn-pick b { font-size: 17px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.mn-pick small { font-size: 10px; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mn-pick.is-on { background: var(--neon); color: var(--neon-ink); box-shadow: none; }
.mn-pick.is-on small { color: rgba(10, 10, 10, .66); }
@keyframes mn-up { from { transform: translateY(24px); opacity: 0; } }

/* 矮屏幕:面板收紧一点,把高度让给棋盘 */
@media (max-height: 700px) {
  .mines { --head: 62px; }
  .mn-panel { gap: 6px; padding-top: 8px; }
  .mn-bet { min-height: 48px; }
  .mn-btn { min-height: 52px; }
  .mn-chip { min-height: 34px; }
  .mn-qbtn { min-height: 32px; }
  .mn-rung { height: 42px; }
}
/* 很矮的屏幕(老的小手机):快捷金额和底下那行说明收起来,格子才不会小到点不准;金额照样可以用 − / + 调 */
@media (max-height: 600px) {
  .mn-quick, .mn-hint { display: none; }
}