/* ===========================================================================
   jolt8 — Mines (JILI-style) — blue grid risk game
   =========================================================================== */
.mn {
  max-width: 560px; margin: 0 auto;
  height: calc(100vh - 150px);          /* fit below the header + footer on desktop — no page scroll */
  max-height: 860px;
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden;
}
.mn [hidden] { display: none !important; }

/* ── top bar ─────────────────────────────────────────────────────── */
.mn-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.mn-bal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(10,22,52,.7); border: 1px solid rgba(80,150,255,.35);
  border-radius: 99px; padding: 6px 14px; font-weight: 800; color: #cfe6ff;
}
.mn-bal-pill svg { color: #3aa0ff; }
.mn-history { display: flex; gap: 6px; margin-left: auto; flex-wrap: nowrap; overflow: hidden; justify-content: flex-end; }
.mn-hchip { flex: 0 0 auto; white-space: nowrap; }
.mn-hchip { font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.05); }
.mn-hchip.win { color: #4fd08a; background: rgba(40,180,110,.14); }
.mn-hchip.loss { color: #ff6b6b; background: rgba(255,80,80,.12); }

/* ── stage / grid ────────────────────────────────────────────────── */
.mn-stage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px;
  padding: clamp(8px, 2.5vw, 16px);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(60,140,255,.22), transparent 70%),
    linear-gradient(180deg, #0d1b3d 0%, #081127 60%, #050b1c 100%);
  border: 1px solid rgba(80,150,255,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 50px rgba(30,80,200,.18);
}
.mn-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(6px, 1.7vw, 13px);
  margin: auto;            /* JS fitGrid sets an exact square width/height */
}
.mn-tile {
  position: relative; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  border-radius: 14px;
  background: linear-gradient(180deg, #2f5db5 0%, #1f3f86 60%, #16306a 100%);
  box-shadow: 0 4px 0 #0e2050, 0 8px 14px rgba(0,0,0,.45), inset 0 2px 3px rgba(160,200,255,.45), inset 0 -6px 12px rgba(8,20,60,.6);
  transition: transform .1s, box-shadow .12s, filter .12s;
}
.mn-tile::before {   /* glossy sheen */
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 46%);
}
.mn-tile.open::before { opacity: .12; }
.mn-tile .mn-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.mn-tile .mn-face svg, .mn-tile .mn-face img { width: 66%; height: 66%; display: block; object-fit: contain; }
.mn-tile .mn-face img.mn-bomb-ic { width: 74%; height: 74%; }
.mn-tile:not(.open):not(:disabled):not(.idle):hover {
  filter: brightness(1.14); transform: translateY(-2px);
  box-shadow: 0 6px 0 #0e2050, 0 11px 22px rgba(0,0,0,.5), 0 0 22px rgba(70,150,255,.55), inset 0 2px 3px rgba(160,200,255,.5);
}
.mn-tile:not(.open):not(:disabled):not(.idle):active { transform: translateY(3px); box-shadow: 0 1px 0 #0e2050, 0 3px 8px rgba(0,0,0,.4), inset 0 2px 3px rgba(160,200,255,.4); }
.mn-tile.idle { cursor: default; filter: saturate(.7) brightness(.86); }
.mn-tile:disabled { cursor: default; }

/* revealed states */
.mn-tile.open {
  background: linear-gradient(180deg, #0b2350 0%, #07183a 100%);
  box-shadow: inset 0 0 0 1px rgba(80,150,255,.25), inset 0 4px 12px rgba(0,0,0,.5);
}
.mn-tile.open.safe {
  background: radial-gradient(circle at 50% 36%, #fff0aa 0%, #ffcf3a 46%, #e89200 100%);
  animation: mnSafeGlow 1.5s ease-in-out infinite;
}
@keyframes mnSafeGlow {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(255,240,160,.65), 0 0 16px rgba(255,200,50,.55), inset 0 -8px 16px rgba(180,110,0,.5); }
  50%     { box-shadow: inset 0 0 0 2px rgba(255,250,205,.95), 0 0 30px rgba(255,210,70,.95), inset 0 -8px 16px rgba(180,110,0,.5); }
}
/* one-time shine sweep when a coin is revealed */
.mn-tile.open.safe::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.75) 50%, transparent 66%);
  background-size: 250% 100%;
  animation: mnShine .7s ease-out;
}
@keyframes mnShine { from { background-position: 160% 0; } to { background-position: -140% 0; } }
.mn-tile.open.mine {
  background: radial-gradient(circle at 50% 36%, #ff6a55 0%, #c4161c 50%, #6e0608 100%);
  animation: mnMineGlow 1.5s ease-in-out infinite;
}
@keyframes mnMineGlow {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(255,130,100,.6), 0 0 16px rgba(255,70,40,.55), inset 0 -8px 16px rgba(120,0,0,.5); }
  50%     { box-shadow: inset 0 0 0 2px rgba(255,170,140,.95), 0 0 30px rgba(255,80,50,.95), inset 0 -8px 16px rgba(120,0,0,.5); }
}
/* one-time flash sweep when a bomb is revealed */
.mn-tile.open.mine::after {
  content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 34%, rgba(255,220,190,.7) 50%, transparent 66%);
  background-size: 250% 100%;
  animation: mnShine .7s ease-out;
}
.mn-tile.open.mine.boom { animation: mnBoom .45s ease, mnMineGlow 1.5s ease-in-out infinite; }
.mn-tile.dim { opacity: .42; }
.mn-tile.pop .mn-face { animation: mnPop .32s cubic-bezier(.3,1.5,.5,1); }
@keyframes mnPop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); } }
@keyframes mnBoom { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mn-coin-ic { filter: drop-shadow(0 0 9px rgba(255,205,70,.85)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.mn-bomb-ic { filter: drop-shadow(0 0 8px rgba(255,80,40,.7)); }

/* win popup over the grid */
.mn-winpop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.7);
  z-index: 5; pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 34px; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 40%, rgba(20,40,90,.95), rgba(6,14,34,.95));
  border: 2px solid rgba(120,200,255,.55);
  box-shadow: 0 0 40px rgba(60,150,255,.6), inset 0 0 24px rgba(40,110,255,.4);
  opacity: 0; transition: opacity .3s, transform .3s cubic-bezier(.3,1.4,.5,1);
}
.mn-winpop.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.mn-winpop-x { font-family: 'Lilita One', system-ui, sans-serif; font-size: 38px; line-height: 1;
  background-image: linear-gradient(180deg,#eaf7ff,#7cc8ff 50%,#2e8cff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(70,160,255,.8)); }
.mn-winpop-amt { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 20px; color: #ffe24a; }

/* ── controls ────────────────────────────────────────────────────── */
.mn-controls { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.mn-row { display: flex; gap: 12px; }
.mn-field { flex: 1 1 0; min-width: 0; }
.mn-field > label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #8fa6d6; margin-bottom: 5px; }
.mn-stepper { display: flex; align-items: center; gap: 6px; min-width: 0; background: rgba(10,22,52,.7); border: 1px solid rgba(80,150,255,.3); border-radius: 12px; padding: 4px; }
.mn-stepper input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font-weight: 800; font-size: 17px; text-align: center; outline: none; -moz-appearance: textfield; }
.mn-stepper input::-webkit-outer-spin-button, .mn-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mn-pm { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg,#2f5db5,#1c3a7e); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 2px 0 #0e2050; transition: filter .12s, transform .08s; }
.mn-pm:hover { filter: brightness(1.12); }
.mn-pm:active { transform: translateY(2px); }
.mn-pm:disabled { opacity: .4; cursor: default; }

.mn-stats { display: flex; gap: 12px; visibility: hidden; }   /* space always reserved so the box never resizes */
.mn-stats.on { visibility: visible; }
.mn-stat { flex: 1; background: rgba(10,22,52,.6); border: 1px solid rgba(80,150,255,.25); border-radius: 12px; padding: 8px 12px; text-align: center; }
.mn-stat span { display: block; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #8fa6d6; }
.mn-stat b { font-size: 19px; color: #cfe6ff; font-weight: 900; }

.mn-bigbtn {
  width: 100%; border: 0; cursor: pointer; border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 900; letter-spacing: 1px; color: #fff; font-size: 18px;
  transition: filter .12s, transform .08s;
}
.mn-bigbtn .mn-bb-sub { font-size: 12px; font-weight: 700; opacity: .85; letter-spacing: .5px; }
.mn-bigbtn.bet { position: relative; overflow: hidden; background: linear-gradient(180deg,#3a8bff,#1f6ae0); box-shadow: 0 5px 0 #0f3f96, 0 10px 22px rgba(20,80,200,.5); animation: mnBetPulse 1.7s ease-in-out infinite; }
.mn-bigbtn.bet::before {   /* periodic shine sweep */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: mnBtnShine 2.6s ease-in-out infinite;
}
@keyframes mnBetPulse {
  0%,100% { box-shadow: 0 5px 0 #0f3f96, 0 10px 22px rgba(20,80,200,.5); }
  50%     { box-shadow: 0 5px 0 #0f3f96, 0 0 30px rgba(70,150,255,.95); }
}
@keyframes mnBtnShine { 0% { background-position: 170% 0; } 55%,100% { background-position: -170% 0; } }
/* attention shake when the player taps the grid before betting (keeps the pulse) */
.mn-bigbtn.bet.nudge { animation: mnNudge .5s ease, mnBetPulse 1.7s ease-in-out infinite; }
@keyframes mnNudge { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-7px); } 38% { transform: translateX(7px); } 58% { transform: translateX(-5px); } 78% { transform: translateX(4px); } }
.mn-bigbtn.cash { background: linear-gradient(180deg,#28c878,#149a55); box-shadow: 0 5px 0 #0c6a38, 0 10px 22px rgba(20,160,90,.5); }
.mn-bigbtn.cash.ready { animation: mnCashPulse 1.2s ease-in-out infinite; }
.mn-bigbtn:hover { filter: brightness(1.08); }
.mn-bigbtn:active { transform: translateY(4px); box-shadow: 0 1px 0 #0f3f96; }
.mn-bigbtn:disabled { filter: grayscale(.4) brightness(.8); cursor: default; }
@keyframes mnCashPulse { 0%,100% { box-shadow: 0 5px 0 #0c6a38, 0 10px 22px rgba(20,160,90,.5); } 50% { box-shadow: 0 5px 0 #0c6a38, 0 0 26px rgba(40,220,130,.9); } }

.mn-msg { flex: 0 0 auto; min-height: 0; text-align: center; font-weight: 800; font-size: 14px; opacity: 0; transition: opacity .2s; }
.mn-msg.show { opacity: 1; }
.mn-msg.err { color: #ff6b6b; }
.mn-msg.win { color: #4fd08a; }

/* ── centered notice modal ───────────────────────────────────────── */
.mn-notice {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,10,28,.55); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s; cursor: pointer;
}
.mn-notice.show { opacity: 1; }
.mn-notice[hidden] { display: none; }
.mn-notice-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 34px; max-width: 80%; text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22,44,96,.98), rgba(8,18,42,.98));
  border: 2px solid rgba(120,200,255,.55);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 44px rgba(60,150,255,.55), inset 0 0 24px rgba(40,110,255,.3);
  transform: scale(.7) translateY(10px);
  transition: transform .28s cubic-bezier(.3,1.5,.5,1);
}
.mn-notice.show .mn-notice-card { transform: scale(1) translateY(0); }
.mn-notice-ic {
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 0 14px rgba(255,210,70,.9));
  animation: mnNoticeIcon 1.1s ease-in-out infinite;
}
@keyframes mnNoticeIcon { 0%,100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.15) rotate(6deg); } }
.mn-notice-text {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: 22px; letter-spacing: .5px;
  background-image: linear-gradient(180deg,#eaf7ff,#7cc8ff 55%,#2e8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(10,40,110,.6));
}

/* ── phone / foldable — full-bleed stage that fills between the top & bottom
   navs, no page scroll. Spans the whole compact range (≤860px = where the site
   shows the bottom nav), so the unfolded Z Fold / large phones fit too. ── */
@media (max-width: 860px) {
  .content:has(.mn) { padding: 0 !important; border-left: 0 !important; }
  .mn {
    width: 100%; max-width: min(100%, calc((100svh - 150px) * 1.1));
    margin-left: auto; margin-right: auto;
    height: calc(100svh - 124px); max-height: none;
    padding: 8px 10px; gap: 8px;
    justify-content: flex-start;
  }
  /* smaller grid so the controls + CASH OUT sit higher, clear of the bottom nav */
  .mn-stage { max-height: 46vh; }
  .mn-stage { border-radius: 16px; }
  .mn-topbar { gap: 8px; }
  .mn-bal-pill { padding: 5px 11px; font-size: 14px; }
  .mn-history { gap: 4px; }
  .mn-hchip { font-size: 11px; padding: 3px 7px; }
  .mn-row { gap: 8px; }
  .mn-stepper { gap: 4px; padding: 3px; }
  .mn-pm { width: 34px; height: 34px; font-size: 18px; }
  .mn-stepper input { font-size: 16px; }
  .mn-stat b { font-size: 17px; }
  .mn-bigbtn { padding: 13px; font-size: 17px; }
}
@media (max-width: 360px) {
  .mn-pm { width: 30px; height: 30px; }
  .mn-field > label { font-size: 10px; }
}