/* =============================================================
   GAME: Mahjong Solitaire
   ============================================================= */
.board-mahjong {
  --tw: 40px; --th: calc(var(--tw) * 4 / 3); --dz: calc(var(--tw) * .15); --mj-glow: #4dffc3;
  padding: 10px; border-radius: 20px; max-width: 100%;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(77, 255, 195, .12), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at 50% 45%, #10503f, #062019 78%);
  box-shadow: 0 0 0 2px var(--mj-glow), 0 0 26px rgba(77, 255, 195, .32), inset 0 0 40px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .4);
}
@media (max-width: 420px) { .board-mahjong { padding: 7px; border-radius: 14px; } }
.mj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mj-field {
  position: relative;
  width: calc(var(--cols) * var(--tw) + var(--mz) * var(--dz) + var(--tw) * .16);
  height: calc(var(--rows) * var(--th) + var(--mz) * var(--dz) + var(--tw) * .18);
}
/* one tile: ivory face, a cream layer and a jade back as the visible side, drop shadow */
.mj-tile {
  --u: calc(var(--tw) / 100);
  --side:
    calc(var(--u) * 3.5) calc(var(--u) * 3.5) 0 #e2d4aa,
    calc(var(--u) * 7) calc(var(--u) * 7) 0 #cdb985,
    calc(var(--u) * 10) calc(var(--u) * 10) 0 #1f9a6e,
    calc(var(--u) * 12.5) calc(var(--u) * 12.5) 0 #0d5b41,
    calc(var(--u) * 14) calc(var(--u) * 17) calc(var(--u) * 14) rgba(0, 0, 0, .5);
  position: absolute;
  left: calc(var(--x) * var(--tw) / 2 + (var(--mz) - var(--z)) * var(--dz));
  top: calc(var(--y) * var(--th) / 2 + (var(--mz) - var(--z)) * var(--dz));
  width: calc(var(--tw) - 1.5px); height: calc(var(--th) - 1.5px);
  padding: 0; margin: 0; border: 0; cursor: pointer; border-radius: calc(var(--u) * 13);
  background: linear-gradient(150deg, #fffef8 0%, #f7f0da 55%, #ebdfbc 100%);
  box-shadow: inset 0 0 0 max(1px, calc(var(--u) * 2)) rgba(255, 255, 255, .85), inset calc(var(--u) * -3) calc(var(--u) * -4) 0 rgba(176, 150, 95, .28), var(--side);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .15s ease;
}
.mj-tile svg { width: 100%; height: 100%; padding: 7% 8% 8% 7%; box-sizing: border-box; pointer-events: none; }
.mj-free:hover { transform: translate(-1px, -1px); filter: brightness(1.05); }
.mj-tile:focus { outline: none; }
.mj-tile:focus-visible { outline: 3px solid #fff; outline-offset: 1px; z-index: 900 !important; }
.mj-blocked { background: linear-gradient(150deg, #ddd6c0, #c9bf9f); cursor: default; }
.mj-blocked svg { opacity: .62; filter: saturate(.6); }
.mj-sel {
  transform: translate(calc(var(--u) * -3), calc(var(--u) * -4));
  background: linear-gradient(150deg, #f1fff8, #c4f7e1 70%, #a5ecd0);
  box-shadow: 0 0 0 max(2px, calc(var(--u) * 5)) var(--mj-glow), 0 0 calc(var(--u) * 40) rgba(77, 255, 195, .85), var(--side);
}
.mj-sel:hover { transform: translate(calc(var(--u) * -3), calc(var(--u) * -4)); }
.mj-hint { animation: mjHint 1s ease-in-out infinite alternate; }
@keyframes mjHint {
  from { box-shadow: 0 0 0 max(2px, calc(var(--u) * 4)) #3df5ff, 0 0 calc(var(--u) * 16) rgba(61, 245, 255, .6), var(--side); }
  to { box-shadow: 0 0 0 max(2px, calc(var(--u) * 6)) #3df5ff, 0 0 calc(var(--u) * 46) rgba(61, 245, 255, 1), var(--side); }
}
.mj-out { visibility: hidden; pointer-events: none; }
.mj-out.mj-going { visibility: visible; animation: mjGone .36s ease-out forwards; }
@keyframes mjGone {
  0% { opacity: 1; transform: none; filter: brightness(1.3); }
  100% { opacity: 0; transform: translateY(calc(var(--u) * -18)) scale(1.18); filter: brightness(1.8); }
}
.mj-nope { animation: mjNope .36s ease; }
@keyframes mjNope { 20% { translate: -3px 0; } 45% { translate: 3px 0; } 70% { translate: -2px 0; } }
.mj-shuffling .mj-tile:not(.mj-out) { animation: mjShuffle .45s ease; }
@keyframes mjShuffle { 40% { transform: scale(.86) rotate(-4deg); filter: brightness(.8); } }
.mj-clock { color: var(--muted); font-variant-numeric: tabular-nums; }
.mj-time { color: var(--ink); }
.play-area .mj-pairs strong, .play-area .score strong { font-variant-numeric: tabular-nums; }
.mj-pairs.mj-zero strong { color: #ff7a7a; }
.mj-note { color: var(--muted); font-weight: 600; }
.mj-note.mj-warn { color: #ffb36b; }
.mj-note.mj-good { color: #7dffd6; }
.mj-pulse { animation: mjPulse 1.1s ease-in-out infinite alternate; }
@keyframes mjPulse { to { box-shadow: inset 0 0 0 1px var(--mj-glow, #4dffc3), 0 0 18px rgba(77, 255, 195, .65); } }
.mj-shuffle-btn.mj-pulse { --mj-glow: #4dffc3; }
@media (prefers-reduced-motion: reduce) {
  .mj-hint { animation: none; box-shadow: 0 0 0 3px #3df5ff, 0 0 20px rgba(61, 245, 255, .9), var(--side); }
  .mj-pulse { animation: none; box-shadow: inset 0 0 0 2px #4dffc3; }
}