/* Minesweeper Classic — pixel survey-field skin.
 *
 * Shared tokens come from /assets/css/tokens.css. Game-specific palette and
 * geometry live only in this file. The Shell pixel skin (pixel.css) is not
 * loaded inside the iframe, so the --pixel-* geometry tokens are reused here
 * while the game keeps its own light/dark survey palette.
 */

:root {
  color-scheme: light;

  /* Platform pixel geometry */
  --ms-grid: var(--pixel-grid-size);
  --ms-border: var(--pixel-border-width);
  --ms-border-thin: var(--pixel-border-thin);
  --ms-shadow: var(--pixel-shadow-offset);
  --ms-shadow-lg: var(--pixel-shadow-offset-lg);
  --ms-font: var(--pixel-ui-font);

  /* Survey palette — light */
  --ms-bg: #e9e4d0;
  --ms-bg-2: #d6cfb6;
  --ms-surface: #fffdf4;
  --ms-surface-2: #f1ecdc;
  --ms-surface-3: #e2dbc4;
  --ms-ink: #23281e;
  --ms-muted: #5f6656;
  --ms-line: #23281e;
  --ms-accent: #3f7a5c;
  --ms-accent-soft: #cfe3d5;
  --ms-on-accent: #fffdf4;
  --ms-warm: #b9781f;
  --ms-warm-soft: #f3dfb7;
  --ms-danger: #b8462f;
  --ms-danger-soft: #f2c9c0;
  --ms-success: #3f7a5c;
  --ms-success-soft: #cfe3d5;

  --ms-tile-top: #fffdf4;
  --ms-tile-bottom: #e7dfc8;
  --ms-tile-border: #7f7c66;
  --ms-tile-bevel: #d2cbb4;
  --ms-tile-shade: #8f8a72;
  --ms-open: #f4efe0;
  --ms-open-border: #b9b39b;
  --ms-mine: #23281e;
  --ms-flag: #b8462f;
  --ms-scrim: rgba(22, 26, 20, 0.74);
  --ms-scene-line: #8c9b82;
  --ms-scene-opacity: 0.34;

  --ms-n1: #1f4fa8;
  --ms-n2: #2f6b3f;
  --ms-n3: #a34a1c;
  --ms-n4: #5b3a8a;
  --ms-n5: #8c1f3a;
  --ms-n6: #176f7a;
  --ms-n7: #3b3f33;
  --ms-n8: #4f4a3c;

  --ms-mark-size: 32px;
  --ms-emblem-size: 64px;
  --ms-sprite-url: url("./assets/pixel/minesweeper-sprites.png");
}

[data-theme="dark"] {
  color-scheme: dark;

  --ms-bg: #0d1310;
  --ms-bg-2: #17211a;
  --ms-surface: #1c271f;
  --ms-surface-2: #243225;
  --ms-surface-3: #2d3d2f;
  --ms-ink: #eef4e6;
  --ms-muted: #a3af9c;
  --ms-line: #eef4e6;
  --ms-accent: #6fc28b;
  --ms-accent-soft: #2c4a37;
  --ms-on-accent: #08100b;
  --ms-warm: #ffc857;
  --ms-warm-soft: #4a3a18;
  --ms-danger: #ff6b57;
  --ms-danger-soft: #4a241c;
  --ms-success: #6fc28b;
  --ms-success-soft: #2c4a37;

  --ms-tile-top: #2a3a2c;
  --ms-tile-bottom: #1b2a20;
  --ms-tile-border: #5f7a64;
  --ms-tile-bevel: #3d5443;
  --ms-tile-shade: #0a100c;
  --ms-open: #142018;
  --ms-open-border: #3a4a3c;
  --ms-mine: #eef4e6;
  --ms-flag: #ffc857;
  --ms-scrim: rgba(3, 7, 5, 0.8);
  --ms-scene-line: #55705c;
  --ms-scene-opacity: 0.5;

  --ms-n1: #8fb6ff;
  --ms-n2: #7bd99a;
  --ms-n3: #ffa06b;
  --ms-n4: #c1a0ff;
  --ms-n5: #ff8fa3;
  --ms-n6: #7bdce0;
  --ms-n7: #d8d3c2;
  --ms-n8: #bcb59f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  color: var(--ms-ink);
  background: var(--ms-bg);
  font-family: var(--ms-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

button {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button,
[role="gridcell"] {
  touch-action: manipulation;
}

:focus-visible {
  outline: var(--ms-border) solid var(--ms-warm);
  outline-offset: 2px;
}

.ms-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* App frame --------------------------------------------------------------- */

.ms-app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "header"
    "hud"
    "main"
    "side";
  gap: var(--ms-grid);
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  padding:
    max(var(--ms-grid), env(safe-area-inset-top))
    max(var(--ms-grid), env(safe-area-inset-right))
    max(var(--ms-grid), env(safe-area-inset-bottom))
    max(var(--ms-grid), env(safe-area-inset-left));
  overflow: hidden;
  isolation: isolate;
  background: var(--ms-bg);
}

/* Generated pixel background --------------------------------------------- */

.ms-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--ms-scene-opacity);
  background-color: var(--ms-bg);
  background-image: url("./assets/minesweeper-light.png");
  background-position: center;
  background-size: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

[data-theme="dark"] .ms-scene {
  background-image: url("./assets/minesweeper-dark.png");
}

.ms-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ms-bg);
  opacity: 0.38;
}

.ms-scene__scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 4px;
  background: var(--ms-scene-line);
  opacity: 0.16;
  transform: translateY(-8px);
  animation: ms-scan 14s steps(22, end) infinite;
}

.ms-scene__dust {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ms-scene__dust i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--ms-scene-line);
  opacity: 0.3;
  animation: ms-drift 16s steps(4, end) infinite alternate;
}

.ms-scene__dust i:nth-child(1) {
  top: 18%;
  left: 12%;
}

.ms-scene__dust i:nth-child(2) {
  top: 66%;
  left: 22%;
  animation-duration: 19s;
  animation-delay: -4s;
}

.ms-scene__dust i:nth-child(3) {
  top: 28%;
  left: 76%;
  animation-duration: 17s;
  animation-delay: -7s;
}

.ms-scene__dust i:nth-child(4) {
  top: 78%;
  left: 84%;
  animation-duration: 21s;
  animation-delay: -2s;
}

.ms-scene__dust i:nth-child(5) {
  top: 46%;
  left: 54%;
  animation-duration: 23s;
  animation-delay: -10s;
}

.ms-scene__dust i:nth-child(6) {
  top: 88%;
  left: 42%;
  animation-duration: 18s;
  animation-delay: -6s;
}

/* Header ------------------------------------------------------------------ */

.ms-header {
  position: relative;
  z-index: 1;
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ms-grid);
  min-width: 0;
}

.ms-brand {
  display: flex;
  align-items: center;
  gap: var(--ms-grid);
  min-width: 0;
}

.ms-brand__mark {
  flex: 0 0 auto;
  width: var(--ms-mark-size);
  height: var(--ms-mark-size);
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  background-color: var(--ms-surface);
  background-image: var(--ms-sprite-url);
  background-repeat: no-repeat;
  background-size: calc(var(--ms-mark-size) * 4) calc(var(--ms-mark-size) * 2);
  background-position: 0 calc(var(--ms-mark-size) * -1);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

.ms-brand__copy {
  min-width: 0;
}

.ms-brand h1 {
  margin: 0;
  font-family: var(--ms-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-brand h1 span {
  color: var(--ms-accent);
}

.ms-brand p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ms-muted);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-header__hint {
  display: none;
  margin: 0;
  color: var(--ms-muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

/* HUD --------------------------------------------------------------------- */

.ms-hud {
  position: relative;
  z-index: 1;
  grid-area: hud;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 48px;
  gap: var(--ms-grid);
  align-items: stretch;
  min-width: 0;
}

.ms-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 2px var(--ms-grid);
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
}

.ms-stat__label {
  color: var(--ms-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.ms-stat strong {
  overflow: hidden;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ms-stat strong.is-bump {
  animation: ms-bump 240ms steps(3, end);
}

.ms-reset {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  color: var(--ms-ink);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
  font-family: var(--ms-font);
  font-size: 22px;
  line-height: 1;
}

.ms-reset:hover {
  background: var(--ms-surface-2);
}

.ms-reset:active {
  transform: translate(var(--ms-shadow), var(--ms-shadow));
  box-shadow: 0 0 0 var(--ms-shadow);
}

/* Board ------------------------------------------------------------------- */

.ms-main {
  position: relative;
  z-index: 1;
  grid-area: main;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.ms-board-col {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.ms-board-viewport {
  position: relative;
  flex: 0 1 auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  margin-inline: auto;
  padding: var(--ms-grid);
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  background-color: var(--ms-surface-2);
  background-image: conic-gradient(
    var(--ms-surface-3) 0 25%,
    var(--ms-surface-2) 0 50%,
    var(--ms-surface-3) 0 75%,
    var(--ms-surface-2) 0
  );
  background-size: calc(var(--ms-grid) * 2) calc(var(--ms-grid) * 2);
  box-shadow: var(--ms-shadow-lg) var(--ms-shadow-lg) 0 var(--ms-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--ms-line) var(--ms-surface-2);
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .ms-board-viewport {
  background-image: conic-gradient(
    var(--ms-surface-3) 0 25%,
    var(--ms-surface-2) 0 50%,
    var(--ms-surface-3) 0 75%,
    var(--ms-surface-2) 0
  );
}

.ms-board-viewport::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ms-board-viewport::-webkit-scrollbar-track {
  background: var(--ms-surface-2);
}

.ms-board-viewport::-webkit-scrollbar-thumb {
  background: var(--ms-line);
  border: 2px solid var(--ms-surface-2);
}

.ms-board {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 2px);
  width: max-content;
  margin: auto;
  padding: 0;
  background: transparent;
  overflow: hidden;
  overflow: clip;
}

.ms-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell, 32px));
  gap: var(--gap, 2px);
}

.ms-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell, 32px);
  height: var(--cell, 32px);
  padding: 0;
  border: var(--ms-border-thin) solid var(--ms-tile-border);
  border-radius: 0;
  color: var(--ms-ink);
  background: var(--ms-tile-top);
  box-shadow:
    inset var(--ms-border-thin) var(--ms-border-thin) 0 var(--ms-tile-bevel),
    inset calc(var(--ms-border-thin) * -1) calc(var(--ms-border-thin) * -1) 0
      var(--ms-tile-shade);
  font-family: var(--ms-font);
  font-size: clamp(12px, calc(var(--cell, 32px) * 0.54), 26px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 80ms steps(2, end),
    background-color 80ms steps(2, end),
    border-color 80ms steps(2, end);
}

/* Transparent touch expansion. The board uses nearest-cell maths, so the
   active tile stays predictable even when the hit layer overlaps on dense
   fields; controls outside the grid are each at least 44×44. */
.ms-cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.ms-cell__glyph {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
}

.ms-cell[data-kind="hidden"]:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .ms-cell[data-kind="hidden"]:hover {
    border-color: var(--ms-accent);
    background: var(--ms-surface);
  }
}

.ms-cell.is-cursor:not(.is-revealed) {
  border-color: var(--ms-warm);
  outline: var(--ms-border) solid var(--ms-warm);
  outline-offset: -3px;
}

.ms-cell:focus-visible {
  z-index: 2;
  outline: var(--ms-border) solid var(--ms-warm);
  outline-offset: -3px;
}

.ms-cell.is-revealed {
  border-color: var(--ms-open-border);
  background: var(--ms-open);
  box-shadow: none;
  cursor: default;
}

.ms-cell[data-kind="number"] {
  background: var(--ms-open);
}

.ms-cell[data-number="1"] {
  color: var(--ms-n1);
}

.ms-cell[data-number="2"] {
  color: var(--ms-n2);
}

.ms-cell[data-number="3"] {
  color: var(--ms-n3);
}

.ms-cell[data-number="4"] {
  color: var(--ms-n4);
}

.ms-cell[data-number="5"] {
  color: var(--ms-n5);
}

.ms-cell[data-number="6"] {
  color: var(--ms-n6);
}

.ms-cell[data-number="7"] {
  color: var(--ms-n7);
}

.ms-cell[data-number="8"] {
  color: var(--ms-n8);
}

/* Pixel flag -------------------------------------------------------------- */

.ms-cell[data-kind="flag"] .ms-cell__glyph::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 44%;
  width: 8%;
  height: 62%;
  background: var(--ms-flag);
}

.ms-cell[data-kind="flag"] .ms-cell__glyph::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 52%;
  width: 34%;
  height: 34%;
  background: var(--ms-flag);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Sprite mine / spark ----------------------------------------------------- */

.ms-cell[data-kind="mine"] .ms-cell__glyph,
.ms-cell[data-kind="exploded"] .ms-cell__glyph {
  background-image: var(--ms-sprite-url);
  background-size: calc(var(--cell, 32px) * 4) calc(var(--cell, 32px) * 2);
  background-position: 0 calc(var(--cell, 32px) * -1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

.ms-cell[data-kind="exploded"] .ms-cell__glyph {
  background-image: var(--ms-sprite-url), var(--ms-sprite-url);
  background-position:
    0 calc(var(--cell, 32px) * -1),
    calc(var(--cell, 32px) * -2) calc(var(--cell, 32px) * -1);
}

.ms-cell[data-kind="mine"],
.ms-cell[data-kind="exploded"] {
  border-color: var(--ms-open-border);
  background: var(--ms-open);
  box-shadow: none;
}

.ms-cell[data-kind="exploded"] {
  border-color: var(--ms-danger);
  background: var(--ms-danger-soft);
}

/* Wrong flag -------------------------------------------------------------- */

.ms-cell[data-kind="wrong"] {
  border-color: var(--ms-danger);
  background: var(--ms-danger-soft);
  box-shadow: none;
}

.ms-cell[data-kind="wrong"] .ms-cell__glyph::before,
.ms-cell[data-kind="wrong"] .ms-cell__glyph::after {
  content: "";
  position: absolute;
  top: 22%;
  left: 47%;
  width: 8%;
  height: 56%;
  background: var(--ms-danger);
}

.ms-cell[data-kind="wrong"] .ms-cell__glyph::before {
  transform: rotate(45deg);
}

.ms-cell[data-kind="wrong"] .ms-cell__glyph::after {
  transform: rotate(-45deg);
}

/* Reveal / win / loss ----------------------------------------------------- */

.ms-cell.is-fresh {
  animation: ms-reveal 200ms steps(3, end) both;
  animation-delay: var(--delay, 0ms);
}

.ms-board.is-lost {
  animation: ms-shake 150ms steps(3, end);
}

.ms-board.is-won {
  animation: ms-win 520ms steps(4, end);
}

.ms-board.is-won .ms-cell[data-kind="flag"] {
  border-color: var(--ms-success);
  background: var(--ms-success-soft);
}

.ms-board.is-won .ms-cell[data-kind="flag"] .ms-cell__glyph::before,
.ms-board.is-won .ms-cell[data-kind="flag"] .ms-cell__glyph::after {
  background: var(--ms-success);
}

/* Side controls ----------------------------------------------------------- */

.ms-side {
  position: relative;
  z-index: 1;
  grid-area: side;
  display: flex;
  align-items: stretch;
  gap: var(--ms-grid);
  min-width: 0;
}

.ms-difficulty {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ms-grid);
  min-width: 0;
}

.ms-diff {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 2px 4px;
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  color: var(--ms-ink);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
}

.ms-diff__size {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.ms-diff__meta {
  overflow: hidden;
  max-width: 100%;
  color: var(--ms-muted);
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-diff:active {
  transform: translate(var(--ms-shadow), var(--ms-shadow));
  box-shadow: 0 0 0 var(--ms-shadow);
}

.ms-diff.is-active {
  border-color: var(--ms-line);
  color: var(--ms-on-accent);
  background: var(--ms-accent);
}

.ms-diff.is-active .ms-diff__meta {
  color: var(--ms-on-accent);
}

.ms-flag-toggle {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 96px;
  min-height: 48px;
  padding: 2px var(--ms-grid);
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  color: var(--ms-ink);
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.ms-flag-toggle__icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}

.ms-flag-toggle__icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 3px;
  height: 14px;
  background: currentColor;
}

.ms-flag-toggle__icon::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 6px;
  width: 9px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ms-flag-toggle strong {
  color: var(--ms-muted);
  font-size: 12px;
  font-weight: 700;
}

.ms-flag-toggle.is-active {
  border-color: var(--ms-line);
  color: var(--ms-warm);
  background: var(--ms-warm-soft);
}

.ms-flag-toggle.is-active strong {
  color: var(--ms-warm);
}

.ms-flag-toggle:active {
  transform: translate(var(--ms-shadow), var(--ms-shadow));
  box-shadow: 0 0 0 var(--ms-shadow);
}

.ms-hint,
.ms-status {
  display: none;
  margin: 0;
  color: var(--ms-muted);
  font-size: 12px;
  line-height: 1.4;
}

.ms-hint__keys {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.ms-hint__touch {
  display: none;
}

.ms-status {
  min-height: 18px;
}

@media (hover: none) and (pointer: coarse) {
  .ms-hint__keys {
    display: none;
  }

  .ms-hint__touch {
    display: inline;
  }
}

/* Overlays ---------------------------------------------------------------- */

.ms-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding:
    max(var(--ms-grid), env(safe-area-inset-top))
    max(var(--ms-grid), env(safe-area-inset-right))
    max(var(--ms-grid), env(safe-area-inset-bottom))
    max(var(--ms-grid), env(safe-area-inset-left));
  background: var(--ms-scrim);
  animation: ms-fade 160ms steps(2, end);
}

.ms-overlay[hidden] {
  display: none;
}

.ms-dialog {
  width: min(100%, 400px);
  max-height: min(80vh, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ms-grid);
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-lg) var(--ms-shadow-lg) 0 var(--ms-shadow);
  text-align: center;
  animation: ms-rise 200ms steps(3, end);
}

.ms-result__emblem {
  width: var(--ms-emblem-size);
  height: var(--ms-emblem-size);
  margin: 0 auto var(--ms-grid);
  background-image: var(--ms-sprite-url);
  background-repeat: no-repeat;
  background-size: calc(var(--ms-emblem-size) * 4) calc(var(--ms-emblem-size) * 2);
  background-position: 0 calc(var(--ms-emblem-size) * -1);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
}

[data-result="won"] .ms-result__emblem {
  background-position:
    calc(var(--ms-emblem-size) * -2) calc(var(--ms-emblem-size) * -1);
}

[data-result="lost"] .ms-result__emblem {
  background-position: 0 calc(var(--ms-emblem-size) * -1);
}

.ms-eyebrow {
  margin: 0 0 var(--ms-grid);
  color: var(--ms-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ms-dialog__title {
  margin: 0 0 var(--ms-grid);
  font-family: var(--ms-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ms-dialog__text {
  margin: 0 0 var(--ms-grid);
  color: var(--ms-muted);
  font-size: 16px;
  line-height: 1.5;
}

.ms-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-grid);
  margin: 0 0 var(--ms-grid);
  text-align: left;
}

.ms-result > div {
  padding: var(--ms-grid);
  border: var(--ms-border-thin) solid var(--ms-line);
  border-radius: 0;
  background: var(--ms-surface-2);
}

.ms-result dt {
  color: var(--ms-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.ms-result dd {
  margin: 2px 0 0;
  color: var(--ms-ink);
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.ms-result__score dd {
  color: var(--ms-accent);
  font-size: 20px;
}

.ms-result__record {
  margin: 0 0 var(--ms-grid);
  color: var(--ms-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.ms-result__record.is-record {
  color: var(--ms-success);
}

.ms-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ms-grid);
  margin-top: var(--ms-grid);
}

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--ms-grid) var(--ms-grid);
  border: var(--ms-border) solid var(--ms-line);
  border-radius: 0;
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.ms-btn--primary {
  color: var(--ms-on-accent);
  background: var(--ms-accent);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
}

.ms-btn--ghost {
  color: var(--ms-ink);
  background: var(--ms-surface-2);
  box-shadow: var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
}

.ms-btn:active {
  transform: translate(var(--ms-shadow), var(--ms-shadow));
  box-shadow: 0 0 0 var(--ms-shadow);
}

/* Landscape / wide layouts ----------------------------------------------- */

@media (orientation: landscape) and (min-aspect-ratio: 5 / 4) {
  .ms-app {
    grid-template-columns: minmax(0, 1fr) 184px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "header header"
      "main hud"
      "main side";
    gap: var(--ms-grid);
  }

  .ms-header__hint {
    display: block;
  }

  .ms-hud {
    align-self: start;
    grid-template-columns: 1fr 1fr;
  }

  .ms-stat--best {
    grid-column: 1;
  }

  .ms-reset {
    grid-row: 2;
    grid-column: 2;
    width: 48px;
    justify-self: end;
  }

  .ms-side {
    flex-direction: column;
    align-items: stretch;
  }

  .ms-difficulty {
    grid-template-columns: 1fr;
  }

  .ms-diff {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--ms-grid);
  }

  .ms-flag-toggle {
    width: 100%;
  }

  .ms-hint,
  .ms-status {
    display: block;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .ms-hint {
    display: none;
  }

  .ms-status {
    display: block;
    margin-top: auto;
  }

  .ms-header__hint {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 420px) {
  .ms-app {
    grid-template-columns: minmax(0, 1fr) 192px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main hud"
      "main side";
    gap: 1px;
    padding:
      max(1px, env(safe-area-inset-top))
      max(1px, env(safe-area-inset-right))
      max(1px, env(safe-area-inset-bottom))
      max(1px, env(safe-area-inset-left));
  }

  .ms-header {
    display: none;
  }

  .ms-hud {
    grid-area: hud;
    align-self: start;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .ms-stat {
    min-height: 44px;
  }

  .ms-reset {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .ms-side {
    grid-area: side;
    flex-direction: column;
    align-self: start;
    justify-content: flex-start;
    gap: 8px;
  }

  .ms-difficulty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .ms-diff {
    flex-direction: column;
    justify-content: center;
    padding: 2px;
    min-height: 44px;
  }

  .ms-diff__meta {
    display: none;
  }

  .ms-flag-toggle {
    width: 100%;
    min-height: 44px;
  }

  .ms-hint,
  .ms-status,
  .ms-header__hint,
  .ms-brand p {
    display: none;
  }

  .ms-stat strong {
    font-size: 16px;
  }

  .ms-stat__label {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .ms-app {
    gap: 2px;
    padding:
      max(2px, env(safe-area-inset-top))
      max(2px, env(safe-area-inset-right))
      max(2px, env(safe-area-inset-bottom))
      max(2px, env(safe-area-inset-left));
  }

  .ms-stat {
    min-height: 44px;
  }

  .ms-reset {
    height: 44px;
    min-height: 44px;
  }

  .ms-diff,
  .ms-flag-toggle {
    min-height: 44px;
  }

  .ms-board-viewport {
    padding: 0;
    border: 0;
    box-shadow:
      0 0 0 var(--ms-border-thin) var(--ms-line),
      var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
  }
}

/* Very short portrait stages (360–375px phones): the Shell page already
   carries the game title, so drop the in-game header and give the 9×9 field
   the full height. */
@media (orientation: portrait) and (max-height: 410px) {
  .ms-header {
    display: none;
  }
}

/* 390px-class portrait stages: keep the seed but compress the header. */
@media (orientation: portrait) and (min-height: 411px) and (max-height: 520px) {
  .ms-header {
    min-height: 20px;
  }

  .ms-brand__mark {
    display: none;
  }

  .ms-brand__copy {
    display: flex;
    align-items: baseline;
    gap: var(--ms-grid);
    min-width: 0;
  }

  .ms-brand h1 {
    font-size: 14px;
  }

  .ms-brand p {
    margin: 0;
    font-size: 11px;
  }
}

/* Very short landscape stages: drop the frame's layout padding so the 9×9
   field fits inside the 16:9 stage; the 2px ring and hard shadow remain. */
@media (max-height: 320px) {
  .ms-board-viewport {
    padding: 0;
    border: 0;
    box-shadow:
      0 0 0 var(--ms-border-thin) var(--ms-line),
      var(--ms-shadow) var(--ms-shadow) 0 var(--ms-shadow);
  }
}

/* Phone-width labels: keep the size buttons readable without truncating the
   mine count meta line. The HUD and ARIA label still expose the mine count. */
@media (max-width: 360px) {
  .ms-diff__meta {
    display: none;
  }
}

@media (max-width: 330px) {
  .ms-brand h1 {
    font-size: 12px;
  }

  .ms-brand p {
    font-size: 10px;
  }
}

/* Tablet and desktop ------------------------------------------------------ */

@media (min-width: 768px) {
  :root {
    --ms-mark-size: 48px;
  }

  .ms-app {
    gap: 12px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .ms-brand h1 {
    font-size: 24px;
  }

  .ms-brand p {
    font-size: 13px;
  }

  .ms-stat strong {
    font-size: 20px;
  }

  .ms-hint,
  .ms-status {
    display: block;
  }

  .ms-dialog {
    padding: 16px;
  }

  .ms-dialog__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ms-btn {
    flex: 1 1 150px;
    width: auto;
  }
}

@media (min-width: 1024px) {
  .ms-app {
    max-width: 1100px;
    margin: 0 auto;
  }
}

/* Keep the short-landscape rail tight even after the desktop padding rules. */
@media (orientation: landscape) and (max-height: 420px) {
  .ms-app {
    gap: 1px;
    padding:
      max(1px, env(safe-area-inset-top))
      max(1px, env(safe-area-inset-right))
      max(1px, env(safe-area-inset-bottom))
      max(1px, env(safe-area-inset-left));
  }
}

/* Motion ----------------------------------------------------------------- */

@keyframes ms-reveal {
  from {
    opacity: 0.3;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ms-bump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes ms-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  60% {
    transform: translateX(4px);
  }
}

@keyframes ms-win {
  0%,
  100% {
    box-shadow: var(--ms-shadow-lg) var(--ms-shadow-lg) 0 var(--ms-shadow);
  }

  50% {
    box-shadow: var(--ms-shadow-lg) var(--ms-shadow-lg) 0 var(--ms-success);
  }
}

@keyframes ms-scan {
  from {
    transform: translateY(-8px);
  }

  to {
    transform: translateY(100vh);
  }
}

@keyframes ms-drift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(8px, -8px);
  }
}

@keyframes ms-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ms-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ms-app[data-status="paused"] .ms-scene__scan,
.ms-app[data-visible="false"] .ms-scene__scan,
.ms-app[data-status="won"] .ms-scene__scan,
.ms-app[data-status="lost"] .ms-scene__scan,
.ms-app[data-status="paused"] .ms-scene__dust i,
.ms-app[data-visible="false"] .ms-scene__dust i,
.ms-app[data-status="won"] .ms-scene__dust i,
.ms-app[data-status="lost"] .ms-scene__dust i {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .ms-scene__scan,
  .ms-scene__dust i {
    animation: none;
  }

  .ms-overlay,
  .ms-dialog {
    animation: none;
  }
}