/* =============================================================
   GAME: Minesweeper
   ============================================================= */
.board-minesweeper { --cell: 30px; --cols: 9; --ms-glow: #b6ff3b; --bev: 2px; max-width: 100%; }
.ms-grid {
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); grid-auto-rows: var(--cell); gap: var(--gap, 2px);
  padding: 6px; border-radius: 12px;
  background: linear-gradient(160deg, #1a2e19, #0f1c10);
  box-shadow: 0 0 0 2px var(--ms-glow), 0 0 26px rgba(182, 255, 59, .33), inset 0 2px 10px rgba(0, 0, 0, .5);
}
.ms-small { --bev: 1px; }
/* closed tile: raised, lit from the top left */
.ms-cell {
  position: relative; border: 0; padding: 0; margin: 0; border-radius: 5px; cursor: pointer;
  display: grid; place-items: center; font: 800 calc(var(--cell) * .58) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  background: linear-gradient(145deg, #5a8a4c 0%, #3c6534 48%, #2c4c28 100%); color: var(--ink);
  box-shadow: inset var(--bev) var(--bev) 0 rgba(225, 255, 190, .22), inset calc(var(--bev) * -1) calc(var(--bev) * -1) 0 rgba(0, 0, 0, .38), 0 1px 1px rgba(0, 0, 0, .45);
  transition: background-color .12s, transform .08s;
  -webkit-touch-callout: none; touch-action: manipulation;
}
.ms-small .ms-cell { border-radius: 3px; font-size: calc(var(--cell) * .64); }
.ms-cell:not(.ms-open):hover { background: linear-gradient(145deg, #6c9f5b 0%, #47753e 48%, #33572e 100%); }
.ms-cell:not(.ms-open):active { transform: translateY(1px) scale(.97); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.ms-cell:focus { outline: none; }
.ms-cell:focus-visible, .ms-cell.ms-cursor:focus { box-shadow: 0 0 0 2px var(--focus); z-index: 1; }
/* opened: pressed down into the board */
.ms-cell.ms-open {
  background: linear-gradient(180deg, #0a120b, #0e1a10); cursor: default;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(150, 220, 120, .07);
}
.ms-cell.ms-open:not(.ms-n0) { cursor: pointer; }
.ms-n1 { color: #5cc8ff; }
.ms-n2 { color: #3dffa8; }
.ms-n3 { color: #ff5f8f; }
.ms-n4 { color: #c08cff; }
.ms-n5 { color: #ffb03d; }
.ms-n6 { color: #3df5ff; }
.ms-n7 { color: #ff8cf0; }
.ms-n8 { color: #e8e8f0; }
.ms-cell.ms-open:not(.ms-mine) { text-shadow: 0 0 8px currentColor; animation: msopen .22s ease-out; }
@keyframes msopen {
  from { transform: scale(.88); background: #2c4c28; box-shadow: inset 2px 2px 0 rgba(225, 255, 190, .15), inset -2px -2px 0 rgba(0, 0, 0, .3); }
}

/* icons (inline SVG): flag, mine, wrong-flag cross */
.ms-flag::before, .ms-mine::before, .ms-wrong::after {
  content: ""; position: absolute; inset: 15%; background: center / contain no-repeat; pointer-events: none;
}
.ms-flag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 20.5h10' stroke='%23cfd6f2' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9.5 20V3.8' stroke='%23eef2ff' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v7.6c-4.3.7-6.3-1.2-8.9-.2z' fill='%23ff3d7f'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v2.2c-4.3.7-6.3-1.2-8.9-.2z' fill='%23fff' opacity='.3'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 3px rgba(255, 61, 127, .65)); animation: msflag .2s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes msflag { from { transform: translateY(-30%) scale(.6); opacity: 0; } }
.ms-flag.ms-wrong { background: linear-gradient(180deg, #3a1424, #2a0f1b); }
.ms-flag.ms-wrong::before { opacity: .5; filter: grayscale(1); }
.ms-wrong::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' stroke='%23ff3d7f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); inset: 10%; }
.ms-mine::before { inset: 11%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23d9d6f0' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 2.6v18.8M2.6 12h18.8'/%3E%3Cpath d='M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4' stroke-width='1.7'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.7' fill='%23171428' stroke='%23d9d6f0' stroke-width='1.1'/%3E%3Ccircle cx='9.7' cy='9.7' r='2' fill='%23fff' opacity='.85'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .25)); }
.ms-flag::before { inset: 10%; }
.ms-small .ms-flag::before, .ms-small .ms-mine::before { inset: 4%; }
.ms-open.ms-mine:not(.ms-boom) { background: linear-gradient(180deg, #1c0f18, #140a12); }

/* the mine that went off */
.ms-cell.ms-boom {
  background: radial-gradient(circle, #fff6c8 0, #ffd23f 22%, #ff3d7f 58%, #9b0f45 100%);
  box-shadow: 0 0 18px rgba(255, 120, 80, .9); z-index: 2; animation: msboom .6s ease-out;
}
@keyframes msboom {
  0% { transform: scale(1.9); box-shadow: 0 0 0 10px rgba(255, 240, 180, .9), 0 0 60px 24px rgba(255, 140, 60, .9); }
  60% { transform: scale(.92); }
}
.ms-exploded .ms-grid { animation: msshake .45s ease-out, msred 1.2s ease-out; }
@keyframes msshake { 15%, 55% { translate: -4px 1px; } 35%, 75% { translate: 4px -1px; } }
@keyframes msred { 0%, 20% { box-shadow: 0 0 0 2px #ff3d7f, 0 0 50px rgba(255, 61, 127, .8), inset 0 0 40px rgba(255, 61, 127, .45); } }

.ms-won .ms-flag::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 20.5h10' stroke='%23cfd6f2' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9.5 20V3.8' stroke='%23eef2ff' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v7.6c-4.3.7-6.3-1.2-8.9-.2z' fill='%23b6ff3b'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v2.2c-4.3.7-6.3-1.2-8.9-.2z' fill='%23fff' opacity='.3'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 4px var(--ms-glow)); }
.ms-won .ms-grid { animation: mswin 1.2s ease-in-out 2 alternate; }
@keyframes mswin { to { box-shadow: 0 0 0 2px var(--ms-glow), 0 0 50px rgba(182, 255, 59, .7); } }
.ms-over .ms-cell { cursor: default; }
.ms-flagging .ms-cell:not(.ms-open):hover { box-shadow: inset 0 0 0 2px #ff3d7f, 0 0 8px rgba(255, 61, 127, .5); }

/* toolbar toggle + status icons */
.ms-flagmode { gap: 8px; }
.ms-flagmode[aria-pressed="true"] { background: linear-gradient(135deg, #ff3d7f, #c2185b); color: #fff; box-shadow: 0 0 0 1px #ff8fb4, 0 0 16px rgba(255, 61, 127, .45); }
.ms-flag-i { display: inline-block; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 20.5h10' stroke='%23cfd6f2' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9.5 20V3.8' stroke='%23eef2ff' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v7.6c-4.3.7-6.3-1.2-8.9-.2z' fill='%23ff3d7f'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v2.2c-4.3.7-6.3-1.2-8.9-.2z' fill='%23fff' opacity='.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.ms-flagmode[aria-pressed="true"] .ms-flag-i { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 20.5h10' stroke='%23cfd6f2' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M9.5 20V3.8' stroke='%23eef2ff' stroke-width='1.9' stroke-linecap='round'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v7.6c-4.3.7-6.3-1.2-8.9-.2z' fill='%23ffffff'/%3E%3Cpath d='M10.2 3.6c2.6-1 4.6.9 8.9.2v2.2c-4.3.7-6.3-1.2-8.9-.2z' fill='%23fff' opacity='.3'/%3E%3C/svg%3E"); }
.ms-mine-i { display: inline-block; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23d9d6f0' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 2.6v18.8M2.6 12h18.8'/%3E%3Cpath d='M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4' stroke-width='1.7'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='6.7' fill='%23171428' stroke='%23d9d6f0' stroke-width='1.1'/%3E%3Ccircle cx='9.7' cy='9.7' r='2' fill='%23fff' opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat; }
.ms-clock { font-variant-numeric: tabular-nums; }
.ms-size { color: var(--muted); font-size: .88rem; }