/* Boomless: soft tiles in the Chicon palette. Numbers are digits (colour is never the only cue); mines and flags are shapes. */
:root {
  --bm-hid-a: #ffe58a; --bm-hid-b: #ffc933; --bm-hid-edge: #d79a00; --bm-open: #fffdf4; --bm-open-edge: #ecd9a6;
  --bm-1: #1560a8; --bm-2: #1b7a3a; --bm-3: #c4361c; --bm-4: #6a3fb0; --bm-5: #9a5200; --bm-6: #00717c; --bm-7: #2b2036; --bm-8: #6a5d78;
  --bm-bomb: #3b2a4a; --bm-bomb-hl: #fff; --bm-fuse: #19679f; --bm-spark: #ff6f59; --bm-boom: #ff9a85;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bm-hid-a: #5b4a86; --bm-hid-b: #46366f; --bm-hid-edge: #150e26; --bm-open: #251a3d; --bm-open-edge: #392a58;
  --bm-1: #78c4ff; --bm-2: #74e39f; --bm-3: #ff9078; --bm-4: #cdaaff; --bm-5: #ffc060; --bm-6: #66e0e0; --bm-7: #fff4e0; --bm-8: #c5b8dc;
  --bm-bomb: #f0e4ff; --bm-bomb-hl: #2b2045; --bm-fuse: #6cc0ff; --bm-boom: #8a3a3a;
} }
:root[data-theme="dark"] {
  --bm-hid-a: #5b4a86; --bm-hid-b: #46366f; --bm-hid-edge: #150e26; --bm-open: #251a3d; --bm-open-edge: #392a58;
  --bm-1: #78c4ff; --bm-2: #74e39f; --bm-3: #ff9078; --bm-4: #cdaaff; --bm-5: #ffc060; --bm-6: #66e0e0; --bm-7: #fff4e0; --bm-8: #c5b8dc;
  --bm-bomb: #f0e4ff; --bm-bomb-hl: #2b2045; --bm-fuse: #6cc0ff; --bm-boom: #8a3a3a;
}

.bm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bm-stat { display: flex; align-items: baseline; gap: 5px; min-width: 92px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 4px 10px; font-size: 1.1rem; }
.bm-stat:last-child { justify-content: flex-end; }
.bm-stat small { color: var(--muted); font-size: .75rem; }
.bm-num { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.3rem; }
.bm-chico { width: 52px; height: 56px; flex: none; position: relative; }
.bm-chico .mascot { width: 52px; }
.bm-chico.big { width: 64px; } .bm-chico.big .mascot { width: 64px; }
.bm-chico .stars { position: absolute; top: -8px; right: -10px; font-size: 1.2rem; }
.dizzy .mascot { transform: rotate(-8deg); }
.bm-hint { min-height: 1.4em; margin: 6px 0 2px; text-align: center; color: var(--muted); font-weight: 600; font-size: .9rem; }
.bm-how { margin: 6px 0 0; color: var(--muted); font-size: .85rem; text-align: center; }
.bm-actions { display: flex; justify-content: center; margin-top: 10px; }
.bm-actions .btn { min-height: 44px; }
.bm-actions .btn[aria-pressed="true"] { background: var(--coral); color: #2b2036; border-color: var(--accent-edge); }

.bm-board { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; width: min(calc(100% + 16px), 468px); margin-left: 50%; transform: translateX(-50%); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.bm-t { appearance: none; position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 9px; display: grid; place-items: center; font: 800 1.2rem/1 var(--font); cursor: pointer; color: var(--ink);
  background: linear-gradient(var(--bm-hid-a), var(--bm-hid-b)); box-shadow: 0 2px 0 var(--bm-hid-edge), inset 0 1px 0 rgba(255, 255, 255, .45); -webkit-tap-highlight-color: transparent; transition: transform .06s; }
.bm-t:active:not(:disabled) { transform: translateY(1px) scale(.96); }
.bm-t:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; z-index: 2; }
.bm-t.open { background: var(--bm-open); box-shadow: inset 0 0 0 1.5px var(--bm-open-edge); cursor: default; }
.bm-t:disabled { cursor: default; opacity: 1; color: inherit; }
.bm-t.n1 { color: var(--bm-1); } .bm-t.n2 { color: var(--bm-2); } .bm-t.n3 { color: var(--bm-3); } .bm-t.n4 { color: var(--bm-4); }
.bm-t.n5 { color: var(--bm-5); } .bm-t.n6 { color: var(--bm-6); } .bm-t.n7 { color: var(--bm-7); } .bm-t.n8 { color: var(--bm-8); }
.bm-t svg { width: 78%; height: 78%; display: block; overflow: visible; }
.bm-t .bd { fill: var(--bm-bomb); } .bm-t .hl { fill: var(--bm-bomb-hl); opacity: .8; }
.bm-t .fz { fill: none; stroke: var(--bm-fuse); stroke-width: 1.8; stroke-linecap: round; } .bm-t .sp { fill: var(--bm-spark); }
.bm-t .pole { stroke: #3b2a4a; stroke-width: 2; stroke-linecap: round; fill: none; }
.bm-t .lf { fill: var(--leaf); stroke: #1f6b2a; stroke-width: 1.3; stroke-linejoin: round; } .bm-t .vn { fill: none; stroke: #1f6b2a; stroke-width: 1; stroke-linecap: round; }
.bm-t .base { fill: #3b2a4a; }
.bm-t.flag { box-shadow: 0 2px 0 var(--bm-hid-edge), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 2px color-mix(in srgb, var(--leaf) 70%, transparent); }
.bm-t.mine { background: var(--bm-open); }
.bm-t.boom { background: var(--bm-boom); box-shadow: inset 0 0 0 2px var(--accent); }
.bm-t.wrong::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.3rem; color: var(--accent); background: color-mix(in srgb, var(--bm-hid-b) 75%, transparent); border-radius: 9px; }
.bm-board.flagmode { outline: 3px dashed var(--coral); outline-offset: 3px; border-radius: 6px; }
.bm-board.over .bm-t.mine { animation: bm-fade .6s ease-out both; }
@keyframes bm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .bm-board.over { animation: bm-shake .35s 1; }
  @keyframes bm-shake { 20% { translate: -4px 0; } 40% { translate: 4px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } }
}
@media (prefers-reduced-motion: reduce) { .bm-t, .bm-t:active:not(:disabled) { transition: none; transform: none; } }

.bm-boom { margin-top: 14px; text-align: center; }
.bm-share-sq { font-size: 1.6rem; letter-spacing: 2px; margin: 6px 0; text-align: center; }
.bm-win { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }