/*
 * Mahjongin lauta. Värit ja mittasuhteet Klassik Mahjongin TileBoardView'stä: pinta #173d33, tiili #faf5e6,
 * sivu #8c805e (siirtymä 2 / 6), ääriviiva #87856e, valinta #f0a321, este #d13821, vapaan merkki #0d664a,
 * estetty korostettuna #b8bfad. Laudan koordinaatit ovat sovelluksen virtuaalipikseleitä; --inv = 1 / mittakaava,
 * jotta ääriviivat ja kohdistus ovat näytöllä aina yhtä paksuja. Vain .hdp-mahjong-luokat.
 */
.hdpeli[data-game="mahjong"] .hdp-mahjong-view {
  position: relative; overflow: hidden; border-radius: var(--hdp-radius, 14px);
  background: radial-gradient(ellipse at 50% 38%, #21503f 0%, #1b4538 45%, #173d33 80%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 20px 60px rgba(0, 0, 0, .18);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.hdpeli[data-game="mahjong"] .hdp-mahjong-view.is-zoomed { touch-action: none; }
/* --mj-depth: tiilen sivu (sovelluksen 2 / 6) ja pehmeä varjo, joka tummentaa alempaa kerrosta ja tuo kerrokset esiin. */
.hdp-mahjong-board { position: absolute; left: 0; top: 0; width: 960px; height: 674px; transform-origin: 0 0; --inv: 1;
  --mj-depth: 2px 6px 0 #8c805e, 3px 9px 7px rgba(0, 0, 0, .28); }

.hdpeli[data-game="mahjong"] .hdp-mahjong-tile {
  position: absolute; display: block; width: 62px; height: 80px; margin: 0; padding: 0; border: 0; border-radius: 5px;
  background: linear-gradient(#fcf9ef, #f7f0dc); color: inherit; font: inherit; appearance: none; -webkit-appearance: none;
  pointer-events: none; cursor: pointer;
  box-shadow: var(--mj-depth), 0 0 0 calc(.7px * var(--inv)) #87856e;
}
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile[hidden] { display: none; }
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile::before {
  content: ""; position: absolute; left: 4px; top: 5px; right: 4px; bottom: 5px; pointer-events: none;
  background-image: var(--mj-faces); background-repeat: no-repeat; background-size: 700% 600%;
  background-position: calc(var(--fx, 0) * 100% / 6) calc(var(--fy, 0) * 100% / 5);
}
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile.is-selected {
  transform: translateY(calc(-1.5px * var(--inv) - 2px));
  box-shadow: var(--mj-depth), 0 0 0 calc(3px * var(--inv)) #f0a321, 0 calc(6px * var(--inv)) calc(14px * var(--inv)) rgba(0, 0, 0, .35);
}
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile.is-rejected,
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile.is-blocker {
  box-shadow: var(--mj-depth), 0 0 0 calc(3px * var(--inv)) #d13821;
}
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile.is-hint {
  box-shadow: var(--mj-depth), 0 0 0 calc(3px * var(--inv)) #f4ba6c, 0 0 calc(14px * var(--inv)) calc(3px * var(--inv)) rgba(244, 186, 108, .85);
  animation: hdp-mahjong-pulse .9s ease-in-out 2;
}
@keyframes hdp-mahjong-pulse { 50% { filter: brightness(1.12); } }
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile:focus { outline: none; }
.hdpeli[data-game="mahjong"] .hdp-mahjong-tile:focus-visible {
  outline: calc(3px * var(--inv)) solid #14a5dc; outline-offset: calc(2px * var(--inv));
}

/* Asetus "Poistettavat tiilet eri värillä": estetyt harmaina, vapaissa vihreä piste (kuten sovelluksessa). */
.hdpeli[data-game="mahjong"] .hdp-mahjong-view.is-marks .hdp-mahjong-tile:not(.is-free) { background: #b8bfad; }
.hdpeli[data-game="mahjong"] .hdp-mahjong-view.is-marks .hdp-mahjong-tile:not(.is-free)::before { opacity: .64; }
.hdpeli[data-game="mahjong"] .hdp-mahjong-view.is-marks .hdp-mahjong-tile.is-free::after {
  content: ""; position: absolute; right: 3px; top: 3px; width: max(7px, calc(5px * var(--inv))); height: max(7px, calc(5px * var(--inv)));
  border-radius: 50%; background: #0d664a; box-shadow: 0 0 0 calc(1px * var(--inv)) #faf5e6;
}

/* Kosketuslaitteiden zoom-rivi laudan alla (ytimen napin tyyli). */
.hdp-mahjong-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; height: 48px; padding-top: 8px; box-sizing: border-box; }
.hdp-mahjong-row[hidden] { display: none; }
.hdpeli[data-game="mahjong"] .hdp-mahjong-zoom svg { width: 20px; height: 20px; }

/* Lyhyt selitys paneelissa (estetty tiili): ei ota napautuksia, jotta laudan alaosaa voi pelata. */
.hdpeli[data-game="mahjong"] .hdpeli-banner.hdp-mahjong-flash { pointer-events: none; }

@media (max-width: 559px) {
  .hdpeli[data-game="mahjong"] .hdp-mahjong-view { border-radius: 0; }
  .hdp-mahjong-row { padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); }
}