/* Minesweeper. The classic Windows layout (counter, face, timer over a beveled grid) in the site's D4 colours.
   Site tokens come from public/styles.css (docs/BRAND.md). Light only. */
.ms [hidden] { display: none !important; }
.ms { margin-top: 12px; --cs: 28px; }
.ms h1 { font-size: clamp(2.2rem, 6vw, 3.3rem); letter-spacing: -.02em; line-height: 1; margin: 0 0 10px; }
.ms h2 { margin-top: 34px; }
.ms h3 { margin: 0 0 6px; font-size: 1.02rem; }
.ms .button, .ms button { min-height: 44px; }
.ms-quiet { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.ms-quiet:hover { background: var(--chip); color: var(--ink); border-color: var(--ink); }
.ms-quiet[aria-pressed="true"], .ms-quiet.on { background: var(--olive); color: var(--on-dark); border-color: var(--olive); }
.ms-big { font-size: 1.05rem; padding: 10px 20px; }
.ms-btnrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ms-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.ms .table td.num, .ms .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ms .table .me td { background: var(--subtotal); }
.ms-sub { font-family: var(--font-head); font-weight: 600; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: -4px 0 12px; }
.ms-hint-tag { display: inline-block; font-size: .74rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--sand); color: var(--on-light-accent); white-space: nowrap; }
.ms-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--ink); white-space: nowrap; }

/* ---------- the window: olive frame, sunken top bar and grid ---------- */
.ms-window {
  --frame: #3B4A1E; --frame-hi: #5E7036; --frame-lo: #232D0F; --well: #2B3614;
  --tile: #F5F2E6; --tile-hi: #FFFFFA; --tile-lo: #9C9372; --open: #DFD7BD; --open-line: #C5BC9C;
  display: inline-flex; flex-direction: column; gap: 8px; padding: 9px; background: var(--frame);
  border: 3px solid; border-color: var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi);
  border-radius: 6px; max-width: 100%; box-shadow: 0 10px 28px rgba(42, 53, 20, .18);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ms-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; background: var(--well);
  border: 3px solid; border-color: var(--frame-lo) var(--frame-hi) var(--frame-hi) var(--frame-lo); }
.ms-led { background: #161D08; padding: 3px 4px; border: 2px solid; border-color: #0E1304 #4A5A26 #4A5A26 #0E1304; display: flex; gap: 2px; line-height: 0; }
.ms-led svg { width: 17px; height: 30px; display: block; }
.ms-led .on { fill: #F07A3E; }
.ms-led .off { fill: #F07A3E; opacity: .1; }
.ms-face { width: 46px; height: 46px; min-height: 46px !important; padding: 0; border-radius: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--tile); border: 3px solid; border-color: var(--tile-hi) var(--tile-lo) var(--tile-lo) var(--tile-hi); }
.ms-face:hover { background: #FFF8E4; border-color: var(--tile-hi) var(--tile-lo) var(--tile-lo) var(--tile-hi); }
.ms-face:active, .ms-face.down { border-color: var(--tile-lo) var(--tile-hi) var(--tile-hi) var(--tile-lo); background: var(--open); }
.ms-face svg { width: 36px; height: 36px; display: block; }
.ms-lamb .x { display: none; }
.ms-face[data-face="calm"] .x-calm, .ms-face[data-face="oh"] .x-oh, .ms-face[data-face="dead"] .x-dead, .ms-face[data-face="cool"] .x-cool { display: inline; }

.ms-scroll { overflow: auto; max-width: 100%; max-height: 78vh; touch-action: pan-x pan-y; overscroll-behavior: contain;
  border: 3px solid; border-color: var(--frame-lo) var(--frame-hi) var(--frame-hi) var(--frame-lo); background: var(--frame-lo); }
.ms-grid { display: grid; grid-template-columns: repeat(var(--w), var(--cs)); grid-auto-rows: var(--cs); width: max-content; outline: none; }
.ms-grid:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
.ms-c { width: var(--cs); height: var(--cs); position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  font: 700 calc(var(--cs) * .62)/1 var(--font-head); font-variant-numeric: tabular-nums; }
/* hidden: a raised cream tile */
.ms-c.c-h, .ms-c.c-f, .ms-c.c-q { background: var(--tile); border: calc(var(--cs) * .1) solid; border-color: var(--tile-hi) var(--tile-lo) var(--tile-lo) var(--tile-hi); cursor: pointer; }
.ms-c.c-h:hover { background: #FFF9EA; }
.ms-c.pressed { background: var(--open) !important; border: 0 !important; border-left: 1px solid var(--open-line) !important; border-top: 1px solid var(--open-line) !important; }
/* uncovered: flat */
.ms-c.c-0, .ms-c.c-1, .ms-c.c-2, .ms-c.c-3, .ms-c.c-4, .ms-c.c-5, .ms-c.c-6, .ms-c.c-7, .ms-c.c-8, .ms-c.c-X, .ms-c.c-m, .ms-c.c-w {
  background: var(--open); border-left: 1px solid var(--open-line); border-top: 1px solid var(--open-line); }
.ms-c.c-1 { color: #1F43C9; } .ms-c.c-2 { color: #1D6A1D; } .ms-c.c-3 { color: #A8211A; } .ms-c.c-4 { color: #1A237E; }
.ms-c.c-5 { color: #7A1F12; } .ms-c.c-6 { color: #00676A; } .ms-c.c-7 { color: #1E1E18; } .ms-c.c-8 { color: #5A5A52; }
.ms-c.c-f::after, .ms-c.c-m::after, .ms-c.c-X::after, .ms-c.c-w::after { content: ''; position: absolute; inset: 6%; background: center / contain no-repeat; }
.ms-c.c-f::after { background-image: url(crook.svg); inset: 2%; }
.ms-c.c-m::after, .ms-c.c-X::after { background-image: url(wolf.svg); }
.ms-c.c-X { background: #B23A26; }
.ms-c.c-w::after { background-image: url(crook-wrong.svg); }
.ms-c.c-q { color: var(--olive); }
.ms-c.cursor { box-shadow: inset 0 0 0 2px var(--rust); z-index: 1; }
.ms-c.hint { box-shadow: inset 0 0 0 3px #4D7A2A, 0 0 0 2px #B8CC8C; z-index: 2; animation: ms-pulse 1s ease-in-out infinite alternate; }
.ms-c.start { box-shadow: inset 0 0 0 2px var(--sage); }
@keyframes ms-pulse { from { background: #E9F2D4; } to { background: #C9DCA2; } }
.ms-c.pop { animation: ms-pop .18s ease-out; }
@keyframes ms-pop { from { transform: scale(.82); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-c.hint, .ms-c.pop { animation: none; } }
.ms-window.over .ms-c { cursor: default; }

/* ---------- play page ---------- */
.ms-play { display: flex; flex-direction: column; align-items: flex-start; }
.ms-titlebar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; width: 100%; }
.ms-titlebar h1 { font-size: clamp(1.6rem, 4.4vw, 2.2rem); margin: 0; }
.ms-titlebar h1 span { font-weight: 600; color: var(--muted); }
.ms-levels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; }
.ms-levels a.button { padding: 8px 14px; }
.ms-levels .nick { font-weight: 400; opacity: .75; font-size: .82em; margin-left: 4px; }
.ms-levels .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }
.ms-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%; }
.ms-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ms-controls .count { font-variant-numeric: tabular-nums; }
.ms-mode { display: none; }
.ms.touch .ms-mode { display: inline-flex; }
@media (pointer: coarse) { .ms-mode { display: inline-flex; } }
.ms-mode button { border-radius: 0; }
.ms-mode button:first-child { border-radius: 10px 0 0 10px; }
.ms-mode button:last-child { border-radius: 0 10px 10px 0; margin-left: -1px; }
.ms-status { min-height: 1.5em; margin: 0; color: var(--muted); font-size: .95rem; }
.ms-confirm { max-width: 520px; border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
.ms-confirm p { margin: 0 0 10px; }
.ms-after { width: 100%; max-width: 760px; }
.ms-after h2 { margin: 0 0 6px; border: 0; padding: 0; }
.ms-final { font-size: 1.1rem; margin: 0 0 8px; }
.ms-final strong { font-family: var(--font-head); font-size: 1.9rem; }
.ms-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 8px 0 12px; }
.ms-facts div { display: flex; flex-direction: column; }
.ms-facts dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ms-facts dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.ms-custom { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ms-custom label { width: 96px; }
.ms-custom input { width: 100%; }
.ms-help { margin-top: 16px; max-width: 72ch; }
.ms-help summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.ms kbd { font: .85em var(--font-mono); background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; }

/* ---------- lobby ---------- */
.ms-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; }
.ms-lede { font-size: 1.12rem; max-width: 54ch; margin: 0 0 16px; }
@media (max-width: 900px) { .ms-hero { grid-template-columns: 1fr; gap: 20px; } }
.ms-demo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ms-demo .ms-window { --cs: 19px; pointer-events: none; }
.ms-demo .ms-led svg { width: 12px; height: 22px; }
.ms-demo .ms-face { width: 36px; height: 36px; min-height: 36px !important; }
.ms-demo .ms-face svg { width: 28px; height: 28px; }
.ms-demo figcaption { text-align: center; max-width: 360px; }
.ms-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.ms-pick li > a { display: block; height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.ms-pick li > a:hover { border-color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }
.ms-pick strong { font-family: var(--font-head); font-size: 1.25rem; display: block; }
.ms-pick .nick { font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rust-text); }
.ms-pick p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.ms-ngrow { margin: 12px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ms-ngrow label { flex-direction: row; align-items: center; gap: 8px; font-size: .95rem; color: var(--ink); }
.ms-ngrow input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--rust); }
.ms-daily { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; border-color: var(--sand); box-shadow: inset 0 0 0 1px var(--sand); }
@media (max-width: 760px) { .ms-daily { grid-template-columns: 1fr; } }
.ms-daily h2 { margin: 0 0 4px; border: 0; padding: 0; }
.ms-resume { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ms-resume a { display: inline-flex; gap: 8px; align-items: center; }
.ms-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.ms-boards h3 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ms-you { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.ms-you div { display: flex; flex-direction: column; }
.ms-you dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ms-you dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
.ms-botrec { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--muted); justify-content: center; }
.ms-botrec strong { color: var(--ink); }

/* ---------- leaderboards, player, badges, heatmaps ---------- */
.ms-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ms-tabs a { padding: 8px 14px; }
.ms-statgrid { overflow-x: auto; }
.ms-statgrid table { min-width: 640px; }
.ms-medal { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.ms-medal-mark { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: .95rem; border: 3px solid; letter-spacing: -.02em; }
.cat-milestone .ms-medal-mark { background: var(--olive); color: var(--on-dark); border-color: var(--sand); }
.cat-speed .ms-medal-mark { background: var(--rust); color: var(--on-rust); border-color: var(--brick); }
.cat-skill .ms-medal-mark { background: #2E3A17; color: #F2E7C9; border-color: var(--sage); }
.cat-quirky .ms-medal-mark { background: var(--sage); color: var(--on-light-accent); border-color: var(--olive); }
.cat-streak .ms-medal-mark { background: var(--sand); color: var(--on-light-accent); border-color: var(--rust); }
.ms-medals { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ms-medals li { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ms-medals li.locked .ms-medal-mark { background: var(--surface); color: var(--muted); border-color: var(--line); border-style: dashed; }
.ms-medals li.mine { border-color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage); }
.ms-medals p { margin: 2px 0 0; font-size: .9rem; }
.ms-medals .meta { font-size: .8rem; color: var(--muted); margin-top: 4px; }
.ms-crown { color: var(--rust-text); font-weight: 700; }
.ms-heat { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ms-heat figure { margin: 0; }
.ms-heat canvas { display: block; width: 100%; height: auto; border-radius: 6px; border: 3px solid #3B4A1E; background: #F5F2E6; }
.ms-heat figcaption { margin-top: 6px; }
.ms-legend { display: inline-flex; align-items: center; gap: 6px; }
.ms-legend i { display: inline-block; width: 60px; height: 10px; border-radius: 5px; }