/*
 * EXPERIENCE — Minesweeper (js/minesweeper.js).
 *
 * The winmine.exe look on top of the XP window chrome: a Tahoma menu bar on
 * the window-body colour, then the silver play field with its 3px white
 * raised edge, the 2px sunken status panel (LED mine counter · face · LED
 * timer) and the 3px sunken board of 16px raised cells. Every dimension here
 * is a fixed pixel value on purpose — js/minesweeper.js sizes the window from
 * the same constants (MENU_BAR_HEIGHT, FIELD_EXTRA_*), so the shell always
 * wraps the board exactly with no text-metric drift.
 *
 * Loads before xp.css (index.html cascade). The face button therefore pins
 * its own hover/active look with higher specificity than xp.css's generic
 * `button:not(:disabled):hover` rules.
 */

/* ── menu bar ─────────────────────────────────────────────────────────── */

.mine-menubar {
  /* The dropdowns position against the bar, not their own title, so the
     last menu can hang from the bar's right edge: the window is sized to the
     board exactly, the content area scrolls, and a dropdown wider than the
     room to its right (Help on the 9×9 board) would otherwise raise
     scrollbars over the board for as long as it is open. */
  position: relative;
  display: flex;
  flex: none;
  align-self: stretch;
  height: 20px;
  background: #ece9d8;
  color: #000;
  font: 11px/20px Tahoma, "MS Sans Serif", sans-serif;
  user-select: none;
}

.mine-menu {
  padding: 0 6px;
  cursor: default;
}

.mine-menu u {
  text-decoration: underline;
}

.mine-menu:hover,
.mine-menu.open {
  background: #316ac5;
  color: #fff;
}

.mine-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 130px;
  padding: 2px;
  background: #fff;
  color: #000;
  border: 1px solid #aca899;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
  font: 11px/17px Tahoma, "MS Sans Serif", sans-serif;
  white-space: nowrap;
}

/* The last menu opens flush with the bar's right edge (see .mine-menubar). */
.mine-menu:last-child .mine-dropdown {
  left: auto;
  right: 0;
}

.mine-menu-item {
  position: relative;
  padding: 0 20px 0 22px;
  cursor: default;
}

.mine-menu-item:hover {
  background: #316ac5;
  color: #fff;
}

.mine-menu-item.checked::before {
  content: "\2713";
  position: absolute;
  left: 6px;
  top: 0;
  font-size: 12px;
}

.mine-menu-separator {
  height: 1px;
  margin: 3px 1px;
  background: #aca899;
}

/* ── play field ───────────────────────────────────────────────────────── */

.mine-field {
  flex: none;
  align-self: flex-start;
  box-sizing: content-box;
  width: max-content;
  padding: 6px;
  background: #c0c0c0;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
}

.mine-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 37px;
  margin-bottom: 6px;
  padding: 0 5px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}

/* LED counters: three 13×23 seven-segment SVG digits on black, 1px sunken. */
.mine-led {
  display: flex;
  flex: none;
  width: 39px;
  height: 23px;
  background: #000;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  overflow: hidden;
}

.mine-led-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mine-led-digit {
  display: block;
  flex: none;
}

.mine-led-digit .on {
  fill: #ff0000;
}

.mine-led-digit .off {
  fill: #5a0000;
}

/* The face: a 26×26 button whose 24×24 sprite already carries the bevel. */
.mine-panel .mine-face,
.mine-panel .mine-face:hover,
.mine-panel .mine-face:focus,
.mine-panel .mine-face:active {
  flex: none;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: #c0c0c0;
  border: 1px solid #808080;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  cursor: default;
  font-size: 0;
  line-height: 0;
}

.mine-face img {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ── board ────────────────────────────────────────────────────────────── */

.mine-board {
  border: 3px solid;
  border-color: #808080 #fff #fff #808080;
}

#minesweeper-grid {
  background: #c0c0c0;
}

.mine-cell {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  background: #c0c0c0 center / 16px 16px no-repeat;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  color: #000;
  font: bold 11px/12px Tahoma, Verdana, sans-serif;
  text-align: center;
  user-select: none;
  cursor: default;
}

.mine-cell.revealed {
  border-width: 1px 0 0 1px;
  border-color: #808080;
  line-height: 15px;
}

.mine-cell.n1 { color: #0000ff; }
.mine-cell.n2 { color: #008000; }
.mine-cell.n3 { color: #ff0000; }
.mine-cell.n4 { color: #000080; }
.mine-cell.n5 { color: #800000; }
.mine-cell.n6 { color: #008080; }
.mine-cell.n7 { color: #000000; }
.mine-cell.n8 { color: #808080; }

.mine-cell.flag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ff0000' d='M9 2L3 5l6 3z'/%3E%3Cpath fill='%23000' d='M8 2h1v9H8zM6 10h5v1H6zM4 11h9v2H4z'/%3E%3C/svg%3E");
}

.mine-cell.mine {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 1h2v14H7zM1 7h14v2H1zM3 3h2v2H3zM11 3h2v2h-2zM3 11h2v2H3zM11 11h2v2h-2zM6 4h4v1h1v1h1v4h-1v1h-1v1H6v-1H5v-1H4V6h1V5h1z'/%3E%3Cpath fill='%23fff' d='M6 6h2v2H6z'/%3E%3C/svg%3E");
}

.mine-cell.mine.hit {
  background-color: #ff0000;
}

.mine-cell.mine.wrong {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M7 1h2v14H7zM1 7h14v2H1zM3 3h2v2H3zM11 3h2v2h-2zM3 11h2v2H3zM11 11h2v2h-2zM6 4h4v1h1v1h1v4h-1v1h-1v1H6v-1H5v-1H4V6h1V5h1z'/%3E%3Cpath fill='%23fff' d='M6 6h2v2H6z'/%3E%3Cpath stroke='%23ff0000' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3E%3C/svg%3E");
}