/* PlayCalm Minesweeper. Reuses .sd-head / .levels / .side / .buddy / .bubble / .win / .confirm from the Sudoku look. */
:root { --ms-bev-light: rgba(255,255,255,.78); --ms-bev-dark: rgba(0,0,0,.32); --ms-frame-dark: rgba(0,0,0,.28); --ms-frame-light: rgba(255,255,255,.9); --ms-hidden: var(--raised); --ms-hidden-edge: var(--border-strong); --ms-open: var(--card); --ms-flag: #C8553D; --ms-n1: #2458A6; --ms-n2: #2F7A3E; --ms-n3: #C0392B; --ms-n4: #2B2F7A; --ms-n5: #8A2B1E; --ms-n6: #1C7C7C; --ms-n7: #222; --ms-n8: #6B6B6B; }
:root[data-theme="dark"] { --ms-bev-light: rgba(255,255,255,.26); --ms-bev-dark: rgba(0,0,0,.55); --ms-frame-dark: rgba(0,0,0,.6); --ms-frame-light: rgba(255,255,255,.14); --ms-hidden: #46524C; --ms-hidden-edge: #2A322E; --ms-open: #1B211E; --ms-flag: #F08A6C; --ms-n1: #8DB6FF; --ms-n2: #8FD49B; --ms-n3: #FF8E80; --ms-n4: #B3B7FF; --ms-n5: #FFB08A; --ms-n6: #7FD8D8; --ms-n7: #EDEDED; --ms-n8: #B5B5B5; }
.sd-head h1 { font-size: 28px; }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; }
.levels { display: flex; gap: 8px; flex-wrap: wrap; }
.levels small { font-family: "Plus Jakarta Sans", sans-serif; opacity: .7; margin-inline-start: 4px; direction: ltr; unicode-bidi: isolate; }
.ms-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 20px; margin: 20px 0; align-items: start; }
.ms-main { min-width: 0; }
.ms-bar { direction: ltr; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; margin-bottom: 10px; }
.ms-stat { display: flex; align-items: center; gap: 8px; font: 800 22px "Plus Jakarta Sans", sans-serif; min-width: 90px; direction: ltr; }
.ms-stat[hidden] { visibility: hidden; display: flex; }
.ms-ico { display: inline-flex; width: 22px; height: 22px; color: var(--text); }
.ms-ico svg { width: 100%; height: 100%; }
.ms-zoom { display: flex; gap: 6px; }
.ms-zoom .btn { min-width: 48px; min-height: 48px; padding: 0; font: 800 22px "Plus Jakarta Sans", sans-serif; }
.ms-face { font-size: 26px; min-width: 56px; min-height: 52px; padding: 0 10px; }
.ms-board-card { padding: 10px; }
.ms-scroll { direction: ltr; overflow: auto; max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ms-board {
  --cell: calc(clamp(20px, calc((min(100vw, 1180px) - 48px) / var(--cols) - 2px), 40px) * var(--zoom, 1));
  display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); width: max-content; margin: 0 auto; direction: ltr;
  /* classic look: thin grid lines between squares, and a sunken frame around the board */
  gap: 1px; padding: 0; background: var(--ms-hidden-edge); border-radius: 4px; user-select: none; -webkit-user-select: none;
  border: 4px solid; border-color: var(--ms-frame-dark) var(--ms-frame-light) var(--ms-frame-light) var(--ms-frame-dark);
  --bev: max(2px, calc(var(--cell) * .11));
  -webkit-touch-callout: none; touch-action: manipulation;
}
.ms-row { display: contents; }
.ms-cell {
  width: var(--cell); height: var(--cell); padding: 0; border: 0; border-radius: 1px; cursor: pointer;
  /* closed squares look raised (3D): light top-left edge, dark bottom-right edge — like the original game */
  background: var(--ms-hidden); color: var(--text);
  box-shadow: inset var(--bev) var(--bev) 0 var(--ms-bev-light), inset calc(var(--bev) * -1) calc(var(--bev) * -1) 0 var(--ms-bev-dark);
  font: 800 calc(var(--cell) * .55) / 1 "Plus Jakarta Sans", sans-serif; display: flex; align-items: center; justify-content: center;
}
.ms-cell:hover:not(.open) { filter: brightness(1.07); }
.ms-cell:active:not(.open):not(.flag) { box-shadow: inset 1px 1px 0 var(--ms-bev-dark); filter: none; }   /* pressed in */
.ms-cell.open { background: var(--ms-open); box-shadow: none; cursor: default; }
.ms-cell.open.n1, .ms-cell.open.n2, .ms-cell.open.n3, .ms-cell.open.n4, .ms-cell.open.n5, .ms-cell.open.n6, .ms-cell.open.n7, .ms-cell.open.n8 { cursor: pointer; }
.ms-cell svg { width: 70%; height: 70%; }
.ms-cell.flag { color: var(--text); }
.ms-cell.wrong { background: var(--err-bg); }
.ms-cell.wrong::after { content: "✕"; position: absolute; color: var(--err); font-size: calc(var(--cell) * .8); }
.ms-cell.wrong { position: relative; }
.ms-cell.mine { color: var(--text); }
.ms-cell.boom { background: #C0392B; color: #fff; }
.ms-cell.cur, .ms-cell:focus-visible { outline: 3px solid var(--star); outline-offset: -2px; position: relative; z-index: 1; }
.n1 { color: var(--ms-n1); } .n2 { color: var(--ms-n2); } .n3 { color: var(--ms-n3); } .n4 { color: var(--ms-n4); }
.n5 { color: var(--ms-n5); } .n6 { color: var(--ms-n6); } .n7 { color: var(--ms-n7); } .n8 { color: var(--ms-n8); }
.ms-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ms-mode .btn { min-height: 54px; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ms-mode .btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.ms-mode .btn[aria-pressed="true"] .ms-ico { color: var(--on-primary); }
.actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.ms-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; }
.ms-check { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; cursor: pointer; }
.ms-check input { width: 22px; height: 22px; accent-color: var(--primary); }
.ms-note { color: var(--text-2); font-size: 15px; margin: 0; flex-basis: 100%; }
.side { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.buddy { max-width: 220px; margin: 0 auto; width: 100%; }
.bubble { background: var(--raised); border: 2px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 600; min-height: 56px; }
.win { text-align: center; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.win h2 { font-size: 24px; color: var(--primary); }
.win.lost h2 { color: var(--text); }
.ms-final { font: 800 20px "Plus Jakarta Sans", var(--font-head); margin: 0; }
.ms-two { display: grid; gap: 8px; }
.stat { color: var(--text-2); font-size: 16px; line-height: 1.7; }
.confirm { max-width: 420px; }
.confirm-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.confirm-body h2 { font-size: 22px; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.confirm-actions .btn { min-height: 52px; }
@media (max-width: 900px) { .ms-layout { grid-template-columns: 1fr; } .side { order: 2; } }
@media (max-width: 480px) { .ms-bar { padding: 6px 8px; gap: 6px; } .ms-stat { min-width: 0; font-size: 18px; gap: 5px; } .ms-ico { width: 18px; height: 18px; }
  .ms-face { min-width: 48px; min-height: 48px; font-size: 22px; } .ms-zoom .btn { min-width: 48px; min-height: 48px; }
  .main-ms { padding: 0 8px; } .ms-board-card { padding: 6px; } .sd-head h1 { font-size: 24px; } .levels .btn { flex: 1; padding: 0 8px; } }

/* Board colour choice */
.ms-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.ms-colors-t { font-weight: 700; flex-basis: 100%; }
.ms-swatch { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--card); padding: 5px; cursor: pointer; display: inline-flex; }
.ms-swatch span { flex: 1; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a) 0 55%, var(--sw-b) 55% 100%); box-shadow: inset 0 -3px 0 var(--sw-e, rgba(0,0,0,.25)); border: 1px solid rgba(0,0,0,.15); }
.ms-swatch[aria-pressed="true"], .ms-custom.is-on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary); }
.ms-swatch:focus-visible, .ms-custom:focus-within { outline: 3px solid var(--star); outline-offset: 2px; }
.ms-custom span { background: conic-gradient(#e74c3c, #f1c40f, #2ecc71, #3498db, #9b59b6, #e74c3c); position: relative; }
.ms-custom span::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--sw-a); border: 2px solid #fff; }
.ms-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

/* LED counters and face (classic look) */
.ms-led { background: #000; border: 2px solid; border-color: #6b6b6b #fff #fff #6b6b6b; border-radius: 3px; padding: 3px 4px; line-height: 0; }
.ms-led[hidden] { visibility: hidden; display: block; }
.ms-led-svg { width: 76px; height: 42px; display: block; }
.ms-led-svg .on { fill: #FF1A1A; filter: drop-shadow(0 0 2px rgba(255, 30, 30, .7)); }
.ms-led-svg .off { fill: #3A0000; }
.ms-face { width: 52px; height: 52px; padding: 4px; border: 0; cursor: pointer; background: #C0C0C0;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #808080; border-radius: 2px; display: inline-flex; }
.ms-face:active { box-shadow: inset 1px 1px 0 #808080; padding: 5px 3px 3px 5px; }
.ms-face svg { width: 100%; height: 100%; pointer-events: none; }
/* the original palette uses big bold digits, like the original game */
.ms-board.pal-classic .ms-cell.open { font-family: "Archivo Black", "Arial Black", "Plus Jakarta Sans", sans-serif; font-weight: 400; font-size: calc(var(--cell) * .62); }
.ms-board.pal-classic .ms-cell.mine { color: #000; }
@media (max-width: 480px) { .ms-led-svg { width: 60px; height: 34px; } .ms-face { width: 48px; height: 48px; } }
.ms-zoom-row { justify-content: flex-end; margin-top: 8px; direction: ltr; }

/* "Calm" — the game's first look (default): soft rounded squares with a gap and a bottom edge, plain counters, emoji face */
.ms-board.pal-calm { gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: var(--border); }
.ms-board.pal-calm .ms-cell { border-radius: 6px; box-shadow: inset 0 -3px 0 var(--ms-hidden-edge); }
.ms-board.pal-calm .ms-cell.open { box-shadow: none; }
.ms-board.pal-calm .ms-cell:active:not(.open):not(.flag) { box-shadow: inset 0 -1px 0 var(--ms-hidden-edge); }
.ms-bar.calm { direction: ltr; }
.ms-face-emoji { font-size: 26px; min-width: 56px; min-height: 52px; padding: 0 10px; line-height: 1; }
@media (max-width: 480px) { .ms-face-emoji { min-width: 48px; min-height: 48px; font-size: 22px; } .ms-bar.calm .ms-zoom .btn { min-width: 48px; min-height: 48px; } }

/* Design notes (19 Oct): soft bar icons, a warm Flag button, tidy level buttons on small screens */
.ms-ico.soft { color: var(--text-2); width: 24px; height: 24px; }
.ms-flagbtn { background: #FFE4B0; border-color: #EDB45A; color: #6A3F00; }
.ms-flagbtn .ms-ico svg .flag { fill: #E8931A; }
.ms-mode .ms-flagbtn[aria-pressed="true"] { background: #F2A33A; border-color: #DB8C20; color: #2E1A00; }
.ms-mode .ms-flagbtn[aria-pressed="true"] .ms-ico { color: #2E1A00; }
.ms-mode .ms-flagbtn[aria-pressed="true"] .ms-ico svg .flag { fill: #2E1A00; }
:root[data-theme="dark"] .ms-flagbtn { background: #4A3818; border-color: #8A6420; color: #FFE0A6; }
:root[data-theme="dark"] .ms-mode .ms-flagbtn[aria-pressed="true"] { background: #F2A33A; border-color: #F2A33A; color: #2E1A00; }
.ms-level { white-space: nowrap; }
@media (max-width: 560px) {
  .ms-head .levels { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .ms-level { flex-direction: column; gap: 2px; padding: 6px 4px; min-height: 56px; font-size: 15px; line-height: 1.15; display: inline-flex; align-items: center; justify-content: center; }
  .ms-level small { margin: 0; font-size: 12px; }
}