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

.hdp-kuplapeli-board {
  position: relative; overflow: hidden; border-radius: 14px; background: #eef5fa; cursor: crosshair;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.hdp-kuplapeli-board.is-full { border-radius: 0; }
.hdp-kuplapeli-board.is-swap-hover { cursor: pointer; }
.hdp-kuplapeli-board[data-status="over"], .hdp-kuplapeli-board[data-status="won"] { cursor: default; }
.hdp-kuplapeli-canvas { display: block; }
.hdp-kuplapeli-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, .04);
}

/* Aloitusohje ja loppuviesti kentän alaosassa; tähtäys menee kortin läpi laudalle, vain nappi ottaa osumat. */
.hdp-kuplapeli-card {
  position: absolute; left: 50%; top: 66%; transform: translate(-50%, -50%); z-index: 2;
  width: max-content; max-width: min(86%, 360px); padding: 12px 16px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 1px 2px rgba(16, 36, 52, .1), 0 8px 28px rgba(16, 36, 52, .16);
  display: grid; gap: 6px; justify-items: center; text-align: center; pointer-events: none;
}
.hdp-kuplapeli-card strong { font: 700 18px/1.2 var(--hdp-font-display); color: var(--hdp-fg); }
.hdp-kuplapeli-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hdp-muted); }
.hdpeli .hdp-kuplapeli-card .hdpeli-btn { pointer-events: auto; margin-top: 4px; }

/* Loppudialogi */
.hdpeli-overlay[data-game="kuplapeli"] .hdp-kuplapeli-result { color: var(--hdp-fg); }
.hdpeli-overlay[data-game="kuplapeli"] .hdp-kuplapeli-result strong { font: 700 20px/1.3 var(--hdp-font-display); }
.hdpeli-overlay[data-game="kuplapeli"] .hdp-kuplapeli-prev { margin-inline-start: 8px; font-size: 14px; color: var(--hdp-muted); white-space: nowrap; }

@media (max-width: 559px) {
  .hdp-kuplapeli-card { padding: 10px 14px 12px; }
  .hdp-kuplapeli-card strong { font-size: 16px; }
  .hdp-kuplapeli-card p { font-size: 13px; }
}