/* Minesweeper: chunky raised tiles, the bar, the duel strip and dialogs. */
.ms-page { --p1: #2563eb; --p1-soft: #dde8ff; --p2: #e2620f; --p2-soft: #ffe5d3; --tile: #c9d6ee; --tile-hi: #e6eefb; --tile-lo: #93a6cc; --open: #f6f8fc; }

.ms-tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.ms-tabs button { flex: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.ms-tabs button[aria-selected="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(42,29,23,.12); }

.ms-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-levels { display: flex; gap: 4px; background: var(--cbx-soft); padding: 3px; border-radius: 11px; margin-right: auto; }
.ms-levels button { border: 0; background: transparent; padding: 7px 10px; border-radius: 9px; font: 900 13px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.ms-levels button[aria-checked="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.ms-who { margin-right: auto; font: 900 15px var(--cbx-body); }
.ms-stat { font: 900 15px var(--cbx-body); font-variant-numeric: tabular-nums; background: var(--cbx-soft); padding: 6px 10px; border-radius: 10px; }
.ms-face { border: 0; width: 42px; height: 42px; border-radius: 12px; font-size: 22px; cursor: pointer; background: linear-gradient(180deg, #ffe58a, #f5c518); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12); }
.ms-face:active { transform: translateY(1px); }

.ms-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 8px 8px 8px 12px; border-radius: 14px; font: 900 15px var(--cbx-body); }
.ms-strip.p1 { background: var(--p1-soft); color: var(--p1); } .ms-strip.p2 { background: var(--p2-soft); color: var(--p2); }
.ms-strip .dots i { display: inline-block; width: 9px; height: 9px; margin-left: 3px; border-radius: 50%; background: currentColor; }
.ms-strip .dots i.used { opacity: .25; }
.ms-strip-btn { border: 0; border-radius: 10px; padding: 8px 12px; font: 900 14px var(--cbx-body); cursor: pointer; color: #fff; white-space: nowrap; }
.ms-strip.p1 .ms-strip-btn { background: var(--p1); } .ms-strip.p2 .ms-strip-btn { background: var(--p2); }
.ms-strip-btn.ghost { background: transparent !important; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.ms-banner { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: #1d2740; color: #fff; font: 800 14px/1.4 var(--cbx-body); }
.ms-banner b { color: #ffd66b; }

.ms-boardwrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.ms-board { --n: 9; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; width: min(100%, calc(var(--n) * 46px)); margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ms-board.big { width: max(100%, calc(var(--n) * 30px)); }
.ms-cell { aspect-ratio: 1; border: 0; padding: 0; border-radius: 6px; cursor: pointer; font: 900 clamp(13px, 4.2vw, 20px) var(--cbx-body); display: grid; place-items: center;
  background: linear-gradient(180deg, var(--tile-hi), var(--tile)); box-shadow: inset 0 -3px 0 var(--tile-lo), inset 0 2px 0 rgba(255,255,255,.7); color: var(--cbx-ink); -webkit-tap-highlight-color: transparent; }
.ms-board.big .ms-cell { font-size: clamp(11px, 2.6vw, 16px); border-radius: 4px; }
.ms-cell:not(.open):active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--tile-lo); }
.ms-cell.open { background: var(--open); box-shadow: inset 0 0 0 1px #e1e7f2; cursor: default; }
.ms-cell.flag::after { content: '🚩'; font-size: .9em; }
.ms-cell.mine { background: #ffe1dc; box-shadow: inset 0 0 0 1px #f3b4aa; }
.ms-cell.mine::after { content: '💣'; font-size: .85em; }
.ms-cell.boom { background: #e8473b; animation: ms-boom .5s ease; }
.ms-cell.boom::after { content: '💥'; }
.ms-cell.wrongflag::after { content: '❌'; }
.ms-cell.glow { animation: ms-glow 1.4s ease-in-out 3; }
@keyframes ms-glow { 50% { background: #fff1b8; } }
@keyframes ms-boom { 0% { transform: scale(1.4); } 100% { transform: none; } }
.n1 { color: #2563eb; } .n2 { color: #16883e; } .n3 { color: #d8433b; } .n4 { color: #5b2bb5; } .n5 { color: #a1460f; } .n6 { color: #0f8a8a; } .n7 { color: #222; } .n8 { color: #777; }
.ms-board.locked .ms-cell:not(.open) { cursor: default; filter: saturate(.6) opacity(.75); }
.ms-board.shake { animation: ms-shake .45s; }
@keyframes ms-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.ms-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ms-mode { display: flex; gap: 4px; background: var(--cbx-soft); padding: 4px; border-radius: 14px; }
.ms-mode button { border: 0; background: transparent; padding: 10px 14px; min-height: 44px; border-radius: 11px; font: 900 15px var(--cbx-body); color: var(--cbx-muted); cursor: pointer; }
.ms-mode button[aria-checked="true"] { background: #fff; color: var(--cbx-ink); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.ms-tip { margin: 0; flex: 1; min-width: 160px; font: 800 13px/1.35 var(--cbx-body); color: var(--cbx-muted); }

.ms-result { margin-top: 14px; }
.ms-credits { text-align: left; display: grid; gap: 6px; margin: 8px 0; }
.ms-credits .row { padding: 9px 12px; border-radius: 12px; font: 800 14px/1.45 var(--cbx-body); }
.ms-credits .row.p1 { background: var(--p1-soft); color: var(--p1); } .ms-credits .row.p2 { background: var(--p2-soft); color: var(--p2); }
.ms-credits .nm { display: block; font-weight: 900; font-size: 15px; }
.ms-res-actions { display: grid; gap: 8px; margin-top: 12px; }

.ms-dlg { border: 0; padding: 0; border-radius: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.ms-dlg::backdrop { background: rgba(20,28,48,.5); }
.ms-dlg-card { padding: 20px; }
.ms-dlg h2 { margin: 0 0 6px; font: 900 22px var(--cbx-display); }
.ms-dlg p { margin: 0 0 12px; font: 800 15px/1.45 var(--cbx-body); color: var(--cbx-muted); }
.ms-field { display: grid; gap: 4px; margin: 0 0 10px; font: 900 13px var(--cbx-body); }
.ms-field input { font: 800 17px var(--cbx-body); padding: 11px 12px; border: 2px solid var(--cbx-line); border-radius: 12px; }
.ms-dlg-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }