:root {
  --game: #f472b6
}
.mine-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(12px,3vw,24px);
  box-shadow: 0 0 40px #f472b612
}
.mine-shell h1 {
  margin: 0;
  font-size: clamp(1.5rem,4vw,2.3rem)
}
.mine-sub {
  color: var(--text-dim);
  margin: 4px 0 20px
}
.mine-controls,.mine-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px
}
.mine-controls select,.mine-controls button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 13px;
  min-height: 44px
}
.mine-controls button:focus-visible {
  border-color: var(--game)
}
@media (hover: hover) {
  .mine-controls button:hover {
    border-color: var(--game)
  }
}
.action-switch {
  display: flex;
  border: 2px solid var(--game);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.action-switch button {
  min-width: 92px;
  min-height: 44px;
  border: 0;
  background: transparent;
}
.action-switch button[aria-pressed="true"] {
  background: var(--game);
  color: #201321;
  font-weight: 800;
}
.coach-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  color: var(--text-dim);
  font-size: .88rem;
}
.coach-row p {
  margin: 0;
}
.coach-row button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}
.action-label {
  color: var(--game);
  font-weight: 700;
  margin: 4px 0 10px;
}
.mine-hud {
  justify-content: space-between;
  color: var(--text-dim)
}
.mine-hud strong {
  color: var(--text)
}
#daily-note {
  color: var(--game);
  min-height: 1.5em;
  font-size: .9rem
}
.board-wrap {
  max-width: 100%;
  overflow: auto;
  border-radius: 12px;
  background: var(--surface-2);
  padding: 8px;
  overscroll-behavior: contain
}
.board-wrap.flag-mode {
  outline: 3px solid var(--game);
  outline-offset: 2px;
}
.board {
  /* fit the row: viewport minus page/card/board padding minus the (cols - 1) gaps */
  --cell: clamp(24px,calc((min(100vw,1080px) - 84px - (var(--cols) - 1) * 3px)/var(--cols)),42px);
  display: grid;
  grid-template-columns: repeat(var(--cols),var(--cell));
  gap: 3px;
  width: max-content;
  margin: auto;
  touch-action: pan-y
}
.board.expert {
  --cell: 24px
}
.cell {
  width: var(--cell);
  height: var(--cell);
  border: 1px solid #696977;
  border-radius: 6px;
  background: #373743;
  box-shadow: inset 0 2px 0 #ffffff24, 0 2px 3px #0007;
  color: var(--text);
  font-weight: 800;
  font-size: calc(var(--cell)*.57);
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y
}
@media (hover: hover) {
  .cell:hover:not(.revealed) {
    background: #474756;
  }
}
.cell.charging:not(.revealed)::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--game) var(--hold-angle), transparent 0);
  mask: radial-gradient(transparent 58%, #000 62%);
  animation: hold-ring 350ms linear both;
  pointer-events: none;
}
.cell.hold-pop {
  animation: flag-pop .22s ease-out;
}
.cell.revealed {
  background: #17171d;
  border-color: #22222b;
  box-shadow: none;
  animation: cell-in .14s ease-out
}
.cell.flagged {
  font-size: calc(var(--cell)*.55)
}
.cell.exploded {
  background: #9b3156;
  color: #fff
}
.cell.wrong {
  background: #563139
}
.cell:focus-visible {
  outline: 2px solid var(--game);
  outline-offset: -2px;
  z-index: 1
}
.cell[data-number="1"] {
  color: #8ab4ff
}
.cell[data-number="2"] {
  color: #6cda9a
}
.cell[data-number="3"] {
  color: #ff8f9c
}
.cell[data-number="4"] {
  color: #b3a1ff
}
.cell[data-number="5"] {
  color: #ffb478
}
.cell[data-number="6"] {
  color: #69d6d5
}
.cell[data-number="7"] {
  color: #f1a1ed
}
.cell[data-number="8"] {
  color: #d0d0d5
}
.mine-help {
  color: var(--text-dim);
  font-size: .85rem;
  margin: 15px 0 0
}
@keyframes cell-in {
  from {
    transform: scale(.87);
    opacity: .6
  }
  to {
    transform: scale(1);
    opacity: 1
  }
}
@media(prefers-reduced-motion:reduce) {
  .cell.revealed {
    animation: none
  }
}
@media(max-width:600px) {
  .mine-hud {
    font-size: .9rem
  }
  .board-wrap {
    padding: 5px
  }
  .board {
    gap: 2px
  }
  .board:not(.expert) {
    --cell: clamp(17px,calc((100vw - 82px - (var(--cols) - 1) * 2px)/var(--cols)),42px)
  }
}
.cell.mine::before {
  content: "";
  width: 62%;
  height: 62%;
  background: #f5c2d5;
  clip-path: polygon(50% 0,61% 27%,85% 15%,73% 39%,100% 50%,73% 61%,85% 85%,61% 73%,50% 100%,39% 73%,15% 85%,27% 61%,0 50%,27% 39%,15% 15%,39% 27%)
}
.cell.mine::after {
  content: "";
  position: absolute;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: #6a183e
}
.cell.mine {
  position: relative
}
.cell {
  position: relative;
  -webkit-touch-callout: none;
}
@property --hold-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes hold-ring {
  to { --hold-angle: 360deg; }
}
@keyframes flag-pop {
  50% { transform: scale(1.18); }
}

.cell.daily-start {
  outline: 2px solid var(--game);
  outline-offset: -2px;
}
.cell.daily-start::before {
  content: "◆";
  color: var(--game);
  font-size: calc(var(--cell) * .38);
}