/* ============================================================
   Mahjong Naga Giok — demo slot
   ============================================================ */

.mj-game {
  --mj-speed: 1;
  --mj-drop: calc(420ms * var(--mj-speed));
  --mj-tile-ink: #1d2a44;
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(51, 200, 147, 0.16), transparent 60%),
    linear-gradient(170deg, #0f2c21 0%, #071710 100%);
  border: 1px solid rgba(217, 171, 82, 0.35);
  box-shadow: var(--shadow-card), 0 0 0 6px rgba(217, 171, 82, 0.05);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mj-game.is-free {
  border-color: var(--gold);
  box-shadow: var(--shadow-card), 0 0 0 6px rgba(217, 171, 82, 0.14), 0 0 48px rgba(217, 171, 82, 0.22);
}

.mj-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.mj-title { font-weight: 800; font-size: 0.98rem; line-height: 1.2; color: var(--ink); }
.mj-title small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); font-weight: 700; }
.mj-mode {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mj-game.is-free .mj-mode { color: var(--gold-bright); }
.mj-mult {
  min-width: 3.2rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--jade-bright);
  background: rgba(51, 200, 147, 0.12);
  border: 1px solid rgba(51, 200, 147, 0.4);
}
.mj-mult.is-free { color: #1a1003; background: var(--grad-gold); border-color: transparent; }
.mj-mult.is-bump { animation: mj-bump 0.4s ease; }
@keyframes mj-bump { 40% { transform: scale(1.25); } }

/* --- Papan --- */
.mj-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  aspect-ratio: 1 / 1;
  padding: 6px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(3, 10, 7, 0.75), rgba(5, 18, 13, 0.9));
  border: 1px solid var(--line);
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.5);
}
.mj-reel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(51, 200, 147, 0.035);
}
.mj-tile {
  position: absolute;
  inset: 0 0 auto 0;
  height: 25%;
  padding: 3px 2px;
  transition: transform var(--mj-drop) cubic-bezier(0.3, 0.9, 0.35, 1.08);
  will-change: transform;
}
.mj-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: linear-gradient(180deg, #fffdf6 0%, #f1e8d2 100%);
  box-shadow:
    inset 0 -5px 0 #0e8f66,
    inset 0 -6px 0 rgba(0, 0, 0, 0.18),
    inset 0 2px 0 #fff,
    0 3px 6px rgba(0, 0, 0, 0.45);
  color: var(--mj-tile-ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Microsoft YaHei", serif;
  line-height: 1;
  padding-bottom: 5px;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}
.mj-face b { font-size: clamp(1.25rem, 6.4vw, 2.2rem); font-weight: 900; }
.mj-face.is-wind { color: #1d2a44; }
.mj-face.is-red { color: #c0262d; }
.mj-face.is-green { color: #0f8a50; }
.mj-face.is-fu { color: #b0161e; background: linear-gradient(180deg, #fff6dc 0%, #f4d993 100%); }
.mj-face.is-dragon {
  color: #7a4a00;
  background: linear-gradient(180deg, #fff1c4 0%, #e8b956 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.mj-face.is-wild {
  color: #1a1003;
  background: linear-gradient(160deg, #fff3c9 0%, #f0c560 45%, #b8872f 100%);
  box-shadow: inset 0 -5px 0 #8a5f12, inset 0 2px 0 #fff8e0, 0 0 14px rgba(243, 209, 138, 0.55);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.mj-face.is-wild b { font-size: clamp(0.72rem, 3vw, 1.05rem); letter-spacing: 0.04em; }
.mj-face.is-wild small {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", "Microsoft YaHei", serif;
  font-size: clamp(0.62rem, 2.5vw, 0.9rem);
  font-weight: 900;
  margin-top: 0.15rem;
}
.mj-face.is-scatter {
  color: #f8e0a8;
  background: linear-gradient(180deg, #d0313a 0%, #8c1219 100%);
  box-shadow: inset 0 -5px 0 #5a0a0f, inset 0 2px 0 #ef6a70, 0 0 14px rgba(208, 49, 58, 0.5);
}

.mj-tile.is-win .mj-face { animation: mj-glow 0.7s ease-in-out infinite alternate; z-index: 1; }
.mj-tile.is-gone .mj-face { animation: none; transform: scale(0.2) rotate(-8deg); opacity: 0; }
@keyframes mj-glow {
  from { filter: brightness(1); transform: scale(1); }
  to { filter: brightness(1.15) drop-shadow(0 0 8px rgba(243, 209, 138, 0.95)); transform: scale(1.06); }
}

.mj-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
  color: #1a1003;
  background: var(--grad-gold);
  box-shadow: var(--shadow-gold);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.mj-pop.is-on { animation: mj-pop calc(1.1s * var(--mj-speed)) ease-out forwards; }
@keyframes mj-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -95%) scale(1); }
}

.mj-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(3, 10, 7, 0.78);
  backdrop-filter: blur(3px);
  cursor: pointer;
  animation: mj-fade 0.25s ease;
}
.mj-overlay[hidden] { display: none; }
.mj-overlay-card { text-align: center; animation: mj-rise 0.35s ease; }
.mj-overlay-card h3 {
  font-size: clamp(1.4rem, 6vw, 2rem);
  margin-bottom: 0.4rem;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mj-overlay-card p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 0.6rem; }
.mj-overlay-card .mj-big { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.mj-overlay-hint { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
@keyframes mj-fade { from { opacity: 0; } }
@keyframes mj-rise { from { opacity: 0; transform: translateY(12px) scale(0.95); } }

/* --- Pesan & kontrol --- */
.mj-msg {
  min-height: 2.6rem;
  margin: 0.7rem 0 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}
.mj-chip {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(51, 200, 147, 0.12);
  border: 1px solid rgba(51, 200, 147, 0.3);
  color: var(--jade-bright);
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
}
.mj-chip.gold { color: var(--gold-bright); background: rgba(217, 171, 82, 0.12); border-color: rgba(217, 171, 82, 0.35); }

.mj-stats { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 0.45rem; margin-bottom: 0.8rem; }
.mj-stat {
  padding: 0.45rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(3, 10, 7, 0.55);
  border: 1px solid var(--line-soft);
  text-align: center;
  min-width: 0;
}
.mj-stat .lbl { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.mj-stat .val { display: block; font-weight: 800; font-size: 0.86rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-stat.win .val { color: var(--gold-bright); }
.mj-bet { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.mj-bet button {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
}
.mj-bet button:disabled { opacity: 0.35; }

.mj-controls { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.mj-side {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 4.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.mj-side i { font-size: 1.05rem; }
.mj-side:hover { color: var(--ink); border-color: var(--jade-deep); }
.mj-side.is-on { color: #1a1003; background: var(--grad-gold); border-color: transparent; }
.mj-spin {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border: 0;
  background: var(--grad-jade);
  color: #04130d;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  box-shadow: var(--shadow-jade), inset 0 -4px 0 rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(51, 200, 147, 0.12);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.mj-spin i { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 0.1rem; }
.mj-spin:hover:not(:disabled) { transform: scale(1.05); }
.mj-spin:active:not(:disabled) { transform: scale(0.96); }
.mj-spin:disabled { filter: grayscale(0.6) brightness(0.75); }
.mj-game.is-busy .mj-spin i { animation: mj-rotate 0.9s linear infinite; }
@keyframes mj-rotate { to { transform: rotate(360deg); } }
.mj-spin:focus-visible, .mj-side:focus-visible, .mj-bet button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.mj-reset { display: block; margin: 0.8rem auto 0; }
.mj-disclaimer { margin: 0.75rem 0 0; text-align: center; font-size: 0.7rem; color: var(--muted-2); }

/* --- Tabel pembayaran --- */
.mj-pay-note { font-size: 0.84rem; color: var(--muted); margin-bottom: 0.6rem; }
.mj-paytable { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.mj-pay-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--grad-card);
  border: 1px solid var(--line-soft);
}
.mj-pay-tile { flex: none; width: 2.8rem; height: 3.5rem; }
.mj-pay-tile .mj-face b { font-size: 1.45rem; }
.mj-pay-name { font-weight: 800; font-size: 0.82rem; color: var(--ink); margin-bottom: 0.15rem; }
.mj-pay-vals { display: grid; gap: 0.05rem; font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.35; }
.mj-pay-vals em { color: var(--gold-bright); font-style: normal; font-weight: 800; display: inline-block; min-width: 1.6rem; }
.mj-special { display: flex; gap: 0.75rem; align-items: flex-start; }
.mj-special .mj-pay-tile { margin-top: 0.15rem; }

@media (max-width: 575.98px) {
  .mj-game { padding: 0.7rem; border-radius: var(--radius); }
  .mj-board { gap: 3px; padding: 4px; }
  .mj-paytable { grid-template-columns: 1fr; }
  .mj-controls { gap: 0.6rem; }
  .mj-stats { grid-template-columns: 1fr 1fr; }
  .mj-stat:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .mj-stat:nth-child(2) .mj-bet { justify-content: center; gap: 1rem; }
  .mj-stat .val { font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mj-tile.is-win .mj-face { animation: none; filter: brightness(1.15) drop-shadow(0 0 6px rgba(243, 209, 138, 0.9)); }
  .mj-game.is-busy .mj-spin i { animation: none; }
}