/*
 * Miinaharavan lauta (game.js asettaa --cell, --pad ja kuvien osoitteet --hdp-mh-*). Värit ja kontrastit:
 * miinaharava/DESIGN.md kohta 5. Omat värit ja muodot, ei Microsoftin. Vain .hdp-miinaharava- ja
 * .hdpeli[data-game="miinaharava"] -valitsimet.
 */
.hdpeli[data-game="miinaharava"] .hdpeli-stage { display: flex; justify-content: center; }

.hdp-miinaharava-view {
  position: relative; max-width: 100%; overflow: hidden; border-radius: 10px; background: #c3d3df;
  touch-action: manipulation; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(16, 36, 52, .1);
}
.hdp-miinaharava-view.is-scroll { overflow: auto; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; }
.hdp-miinaharava-view.is-narrow { border-radius: 0; }

.hdp-miinaharava-grid {
  display: grid; gap: 1px; padding: var(--pad, 4px); width: max-content; background: #c3d3df;
  --mh-ink: #1d2f3b;
}
.hdp-miinaharava-grid > [role="row"] { display: contents; }

.hdp-miinaharava-cell {
  position: relative; display: grid; place-items: center; width: var(--cell, 30px); height: var(--cell, 30px);
  background: #f7fafc; color: var(--mh-ink); border-radius: 2px; outline: none; cursor: default;
  font: 700 calc(var(--cell, 30px) * .58)/1 "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}
/* Piilossa oleva ruutu: kohokuvio (vaalea yläreuna, tumma alareuna), joten ero avattuun ei ole pelkkä väri. */
.hdp-miinaharava-cell.is-hidden {
  background: linear-gradient(#d8e8f3, #c4dae9); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -2px 0 rgba(20, 80, 120, .22), inset 1px 0 0 rgba(255, 255, 255, .35);
}
.hdp-miinaharava-view.is-ended .hdp-miinaharava-cell.is-hidden { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .hdp-miinaharava-view:not(.is-ended) .hdp-miinaharava-cell.is-hidden:hover { background: linear-gradient(#e6f1f8, #d2e4f0); }
}
.hdp-miinaharava-cell.is-hidden.is-down { background: #e7eef3; box-shadow: inset 0 1px 2px rgba(20, 60, 90, .18); }

/* Numerot: omat värit, kontrasti taustaa #f7fafc vasten vähintään 4,8:1. */
.hdp-miinaharava-cell[data-n="1"] { color: #0f6e9c; }
.hdp-miinaharava-cell[data-n="2"] { color: #2e7d32; }
.hdp-miinaharava-cell[data-n="3"] { color: #c62f2f; }
.hdp-miinaharava-cell[data-n="4"] { color: #4b3ba3; }
.hdp-miinaharava-cell[data-n="5"] { color: #8a4510; }
.hdp-miinaharava-cell[data-n="6"] { color: #0f6f6c; }
.hdp-miinaharava-cell[data-n="7"] { color: #1d2f3b; }
.hdp-miinaharava-cell[data-n="8"] { color: #5b6670; }

/* Lippu, miina ja väärä lippu: omat SVG-kuvat. Kysymysmerkki on teksti. */
.hdp-miinaharava-cell.is-flag::after, .hdp-miinaharava-cell.is-mine::after, .hdp-miinaharava-cell.is-wrong::after {
  content: ""; position: absolute; inset: 12%; background: center / contain no-repeat; pointer-events: none;
}
.hdp-miinaharava-cell.is-flag::after { background-image: var(--hdp-mh-flag); }
.hdp-miinaharava-cell.is-mine::after { background-image: var(--hdp-mh-mine); }
.hdp-miinaharava-cell.is-wrong::after { background-image: var(--hdp-mh-wrong); }
.hdp-miinaharava-cell.is-q { color: #1d5a82; }
.hdp-miinaharava-cell.is-mine { background: #eef3f6; }
.hdp-miinaharava-cell.is-exploded { background: #e5484d; }
.hdp-miinaharava-cell.is-wrong { background: #f6e9e9; }

/* Vihje: kohderuutu okran renkaalla, perustelun numerot vaalealla okralla. */
.hdp-miinaharava-cell.is-hint { z-index: 2; box-shadow: inset 0 0 0 3px #f4ba6c, 0 0 0 2px #b56219; }
.hdp-miinaharava-cell.is-hint-src { background: #fbe1bb; }
.hdp-miinaharava-cell:focus-visible { z-index: 3; outline: 3px solid var(--hdp-primary-2, #14a5dc); outline-offset: -1px; }

/* Vihjepaneeli laudan yläreunaan, kun vihjeen ruutu on alareunassa (game.js). */
.hdpeli[data-game="miinaharava"] .hdpeli-stage.is-banner-top .hdpeli-banner { top: 14px; bottom: auto; }

/* Tason valinta (dialogin body). */
.hdp-miinaharava-levels { display: grid; gap: 8px; }
.hdpeli-overlay .hdp-miinaharava-level {
  display: grid; gap: 2px; width: 100%; margin: 0; padding: 10px 14px; text-align: start; cursor: pointer;
  border: 1px solid var(--hdp-line, #d1d2d4); border-radius: 10px; background: var(--hdp-surface, #fff); color: var(--hdp-fg, #13212b);
  font: 400 14px/1.35 var(--hdp-font-body, "Inter", "Segoe UI", system-ui, sans-serif);
}
.hdpeli-overlay .hdp-miinaharava-level strong { font: 600 15px/1.3 var(--hdp-font-display, "Montserrat", "Segoe UI", system-ui, sans-serif); }
.hdpeli-overlay .hdp-miinaharava-level span { color: var(--hdp-muted, #58585a); unicode-bidi: plaintext; }
.hdpeli-overlay .hdp-miinaharava-level:hover { border-color: var(--hdp-primary, #1684b8); }
.hdpeli-overlay .hdp-miinaharava-level[aria-pressed="true"] { border-color: var(--hdp-primary, #1684b8); box-shadow: inset 0 0 0 1px var(--hdp-primary, #1684b8); }
.hdpeli-overlay .hdp-miinaharava-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; padding: 10px 12px 12px;
  border: 1px solid var(--hdp-line, #d1d2d4); border-radius: 10px; min-width: 0; }
.hdpeli-overlay .hdp-miinaharava-custom legend { padding: 0 4px; font: 600 13px/1.3 var(--hdp-font-display, "Montserrat", "Segoe UI", system-ui, sans-serif); }
.hdpeli-overlay .hdp-miinaharava-custom label { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.hdpeli-overlay .hdp-miinaharava-custom input { width: 100%; min-width: 0; height: 40px; }
.hdpeli-overlay .hdp-miinaharava-custom small { font-size: 12px; color: var(--hdp-muted, #58585a); unicode-bidi: plaintext; }
.hdpeli-overlay .hdp-miinaharava-custom .hdpeli-btn { grid-column: 1 / -1; justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .hdp-miinaharava-cell { transition: none; }
}