/*
 * Matopelin ulkoasu: lauta (canvas), viestikortti laudan päällä, suuntanapit ja loppudialogin ennätystaulukko.
 * Vain .hdp-matopeli-luokat ja .hdpeli[data-game="matopeli"]-valitsimet. Mitat tulevat JS:stä (game.js applyLayout).
 */
.hdpeli[data-game="matopeli"] .hdp-matopeli { display: grid; justify-items: center; min-width: 0; }

.hdp-matopeli-board {
  position: relative; overflow: hidden; border-radius: 14px; background: #f7f4ee;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.hdp-matopeli-board.is-full { border-radius: 0; }
.hdp-matopeli-canvas { display: block; }
/* Reunan muoto kertoo tilan: seinätilassa yhtenäinen tumma reuna, avoimilla reunoilla katkoviiva. */
.hdp-matopeli-board::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(19, 33, 43, .12), inset 0 14px 40px rgba(19, 33, 43, .05);
}
.hdp-matopeli-board.is-walls::after { box-shadow: inset 0 0 0 3px #55636d, inset 0 14px 40px rgba(19, 33, 43, .05); }
.hdp-matopeli-board.is-wrap::after { border: 2px dashed rgba(22, 132, 184, .6); }

/* Aloitus-, tauko- ja loppuviesti laudan alaosassa; pyyhkäisy menee kortin läpi laudalle, vain nappi ottaa osumat. */
.hdp-matopeli-card {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 2;
  width: max-content; max-width: min(88%, 380px); padding: 12px 16px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 2px rgba(16, 36, 52, .1), 0 8px 28px rgba(16, 36, 52, .16);
  display: grid; gap: 8px; justify-items: center; text-align: center; pointer-events: none;
}
.hdp-matopeli-card strong { font: 700 18px/1.2 var(--hdp-font-display); color: var(--hdp-fg); }
.hdp-matopeli-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hdp-muted); }
.hdp-matopeli-card .hdp-matopeli-note { font-size: 13px; color: var(--hdp-okra-dark); }
.hdpeli .hdp-matopeli-card .hdpeli-btn { pointer-events: auto; margin-top: 2px; }

/* Suuntanapit: yksi rivi laudan alla, ei peilaudu oikealta vasemmalle -kielissä (dir="ltr"). */
.hdp-matopeli-pad {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 56px; padding-top: 8px;
  max-width: 100%; touch-action: manipulation;
}
.hdpeli .hdp-matopeli-dir {
  display: grid; place-items: center; height: 48px; min-width: 0; margin: 0; padding: 0; border-radius: 12px;
  border: 1px solid var(--hdp-line); background: var(--hdp-surface); color: var(--hdp-fg); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s, transform .12s;
}
.hdpeli .hdp-matopeli-dir svg { width: 24px; height: 24px; pointer-events: none; }
.hdpeli .hdp-matopeli-dir:hover { border-color: var(--hdp-primary); }
.hdpeli .hdp-matopeli-dir.is-down { background: rgba(22, 132, 184, .12); border-color: var(--hdp-primary); color: var(--hdp-primary); transform: scale(.96); }
@media (max-width: 559px) {
  .hdp-matopeli-pad { padding-left: 12px; padding-right: 12px; width: 100% !important; max-width: 384px; }
}

/* Loppudialogi */
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-result { color: var(--hdp-fg); }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-result strong { font: 700 20px/1.3 var(--hdp-font-display); }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-prev { margin-inline-start: 8px; font-size: 14px; color: var(--hdp-muted); white-space: nowrap; }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records { display: grid; gap: 6px; }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records-title { font: 600 12px/1.3 var(--hdp-font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--hdp-muted); }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records th,
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records td { padding: 6px 4px; border-top: 1px solid var(--hdp-line); text-align: start; font-weight: 400; }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records td { text-align: end; font: 600 14px/1.3 var(--hdp-font-display); font-variant-numeric: tabular-nums; }
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records tr.is-current th,
.hdpeli-overlay[data-game="matopeli"] .hdp-matopeli-records tr.is-current td { color: var(--hdp-primary); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .hdpeli .hdp-matopeli-dir { transition: none; }
}