body { margin: 0; background: #0a0a10; }
.mines { container-type: inline-size; position: relative; display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; padding: 16px; box-sizing: border-box; font-family: 'Figtree', system-ui, sans-serif; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(100%, calc(5 * 88px + 4 * 8px)); }
.hud-title { font-family: 'Red Hat Display', 'Figtree', system-ui, sans-serif; font-weight: 900; font-size: 19px; letter-spacing: .04em; color: #ffd94d; text-shadow: 0 0 16px rgba(245, 179, 1, .35); white-space: nowrap; }
.hud-title span { color: #e8e8f0; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.pips { display: flex; gap: 5px; align-items: center; }
.pip { width: 9px; height: 9px; border-radius: 50%; background: #26262e; border: 1px solid #3a3a44; box-sizing: border-box; }
.pip.on { background: #0d5f6e; border-color: #5cf6f6; box-shadow: 0 0 6px rgba(92, 246, 246, .5); }
.pip.last { width: 12px; height: 12px; border-color: #8a6d1a; }
.pip.last.on { background: #f5b301; border-color: #ffe066; box-shadow: 0 0 9px rgba(245, 179, 1, .8); }
.hud-msg { font-size: 12.5px; font-weight: 700; color: #9b9bab; white-space: nowrap; }
.hud-msg.hot { color: #ffd94d; }
.grid { --c: min(88px, (100cqi - 32px - 4 * 8px) / 5); display: grid; grid-template-columns: repeat(5, var(--c)); gap: 8px; }
.grid button { height: var(--c); border: 1px solid #2c2c38; border-radius: 10px; background: linear-gradient(160deg, #1b1b24 0%, #12121a 60%, #0d0d13 100%); cursor: pointer; display: grid; place-items: center; transition: transform 120ms, background 160ms, border-color 160ms, box-shadow 160ms; padding: 0; }
.grid button:disabled { cursor: default; }
.grid button.live:hover { background: linear-gradient(160deg, #232330 0%, #17171f 60%, #101016 100%); border-color: #57571f; transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0, 0, 0, .45); }
.grid button.gem { background: linear-gradient(160deg, #0d4034, #082a20); border-color: #14684c; }
.grid button.gold { background: radial-gradient(120% 120% at 50% 30%, #6e4f04 0%, #42300a 55%, #241a03 100%); border-color: #f5b301; box-shadow: 0 0 18px rgba(245, 179, 1, .55), inset 0 0 12px rgba(255, 217, 77, .35); }
.grid button.mine { background: #3b0f14; border-color: #7e1f3a; }
.grid button.mine.hit { background: #7e1f3a; box-shadow: 0 0 16px rgba(255, 80, 100, .5); }
.grid button.shown { opacity: .55; }
.grid button.pop { animation: tile-pop 260ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tile-pop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
.grid svg { width: 56%; height: 56%; }
.next { min-height: 20px; color: #9b9bab; font-size: 14px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.next b { color: #e8e8f0; }
.next b.goldx { color: #ffd94d; text-shadow: 0 0 10px rgba(245, 179, 1, .5); }
.winpop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; min-width: 158px; box-sizing: border-box; padding: 16px 24px 14px; border-radius: 12px; border: 2px solid #22c55e; background: linear-gradient(180deg, #0e2018, #08130d); box-shadow: 0 0 0 1px rgba(34, 197, 94, .35), 0 0 34px rgba(34, 197, 94, .45), 0 14px 34px rgba(0, 0, 0, .6); text-align: center; cursor: pointer; }
.winpop.pop { animation: winpop-in 260ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes winpop-in { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.winpop-x { color: #2ee06f; font-size: 34px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(46, 224, 111, .45); }
.winpop-div { border-top: 2px dotted rgba(120, 200, 150, .4); margin: 9px 2px; }
.winpop-amt { display: flex; align-items: center; justify-content: center; gap: 7px; color: #eafff1; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.winpop-coin { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7bf1a8, #22c55e 60%, #15803d); color: #052e16; font-size: 12px; font-weight: 900; box-shadow: inset 0 0 0 1.5px rgba(220, 252, 231, .6); }

/* Phone: the shell stacks the panel under the zone — keep the zone
   inside the short 364×440 frame. */
@media (max-width: 699px) {
  .mines { gap: 7px; padding: 10px 8px; }
  .hud { width: 100%; }
  .hud-title { font-size: 14px; }
  .hud-msg { font-size: 10.5px; }
  .pip { width: 7px; height: 7px; }
  .pip.last { width: 9px; height: 9px; }
  .grid { --c: min(56px, (100cqi - 16px - 4 * 6px) / 5); gap: 6px; }
  .next { font-size: 12px; min-height: 17px; }
  .winpop { min-width: 104px; padding: 8px 12px 7px; border-radius: 9px; }
  .winpop-x { font-size: 19px; }
  .winpop-div { margin: 5px 1px; }
  .winpop-amt { font-size: 11px; gap: 4px; }
  .winpop-coin { width: 12px; height: 12px; font-size: 8px; }
}