/* Bola Tangkas — arah seni "neo-retro": synthwave neon + panel kaca modern.
   Peran warna: magenta = aksi/energi, cyan = info, emas = kemenangan/kredit. */
:root {
  --bg: #0b0420;
  --panel: rgba(18, 8, 48, 0.72);
  --panel-edge: rgba(255, 255, 255, 0.12);
  --magenta: #ff2e97;
  --cyan: #00f0ff;
  --gold: #ffd84d;
  --green: #6dff9b;
  --text: #f4f0ff;
  --muted: #b9a9e8;
  --red-suit: #e0174f;
  --black-suit: #1a1530;
  --radius: 18px;
  --gap: clamp(6px, 1.4vw, 12px);
  --font-display: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.1vw + 10px, 19px);
}
html[data-size='large'] { font-size: clamp(18px, 1.3vw + 12px, 23px); }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

#bg, #fx { position: fixed; inset: 0; display: block; }
#bg { z-index: 0; }
#fx { z-index: 10; pointer-events: none; }

/* ---- Mesin ---------------------------------------------------------------- */
.machine {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  will-change: transform;
}

/* Pembungkus kolom; hanya aktif sebagai kolom di landscape. */
.side, .main { display: contents; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 6px var(--magenta), 0 0 18px var(--magenta), 0 0 40px rgba(255, 46, 151, 0.6);
  animation: neon 4s infinite;
}
.title span:last-child { color: var(--gold); text-shadow: 0 0 6px #ff9a00, 0 0 18px #ff9a00, 0 0 40px rgba(255, 154, 0, 0.6); }
@keyframes neon {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
}

.tools { display: flex; gap: 8px; }
.tool {
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--panel-edge);
  background: var(--panel);
  backdrop-filter: blur(8px);
  color: var(--text);
  font: 700 1.05rem var(--font-body);
  cursor: pointer;
}
.tool[aria-pressed='false'] { opacity: 0.45; }
.tool[hidden] { display: none; }
.tool[aria-pressed='true'] { box-shadow: 0 0 12px rgba(0, 240, 255, 0.4); border-color: rgba(0, 240, 255, 0.5); }
.tool:focus-visible, .btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---- Pilihan mode ------------------------------------------------------- */
.mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--panel-edge);
}
.mode-btn {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: 400 0.95rem var(--font-display);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.mode-btn[aria-pressed='true'] {
  background: linear-gradient(180deg, #8a3bff, #5a12d6);
  color: #fff;
  box-shadow: 0 0 16px rgba(138, 59, 255, 0.6);
}
.mode-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.mode-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---- Tabel bayaran ------------------------------------------------------ */
.paytable {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 46, 151, 0.08);
}
.pay {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}
.pay b { color: var(--gold); font-variant-numeric: tabular-nums; }
.pay.lit { animation: lit 0.45s steps(1) infinite; }
@keyframes lit {
  0% { background: var(--gold); color: #2a1300; }
  50% { background: transparent; color: var(--text); }
}
.pay.lit b { color: inherit; }

/* ---- Meja & kartu --------------------------------------------------------- */
.table {
  position: relative;
  padding: clamp(12px, 2.5vw, 22px);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 240, 255, 0.18), transparent 60%),
    linear-gradient(160deg, rgba(20, 70, 110, 0.75), rgba(10, 20, 60, 0.85));
  border: 2px solid rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.45);
}
.cards { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--gap); perspective: 900px; }

.card { aspect-ratio: 5 / 7; position: relative; }
.card .inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.25s;
}
.card.down .inner { transform: rotateY(180deg); }
.card.empty {
  border-radius: 10px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.15);
}
.face {
  position: absolute; inset: 0;
  border-radius: clamp(6px, 1.2vw, 12px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.front {
  background: linear-gradient(160deg, #ffffff, #ece8f7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  color: var(--black-suit);
  container-type: inline-size;
}
.front.red { color: var(--red-suit); }
.corner {
  position: absolute;
  top: 5%; left: 8%;
  display: flex; flex-direction: column; align-items: center;
  font-weight: 900;
  line-height: 0.95;
  font-size: 26cqw;
}
.corner small { font-size: 22cqw; }
.corner.br { top: auto; left: auto; bottom: 5%; right: 8%; transform: rotate(180deg); }
.pip {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 58cqw;
  line-height: 1;
}
.front.face-card .pip {
  font-family: var(--font-display);
  font-size: 46cqw;
  background: radial-gradient(circle at 50% 50%, rgba(255, 216, 77, 0.35), transparent 60%);
}
.front.joker {
  background: linear-gradient(160deg, #6a1bff, #ff2e97);
  color: #fff;
}
.front.joker .pip { font-size: 60cqw; text-shadow: 0 0 12px var(--gold); color: var(--gold); }
.front.joker .label {
  position: absolute; left: 0; right: 0; bottom: 8%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17cqw;
  letter-spacing: 0.04em;
}
.back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #ff2e97, #6a1bff);
  border: 3px solid #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.back::after {
  content: '★';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--gold);
  font-size: 2rem;
  text-shadow: 0 0 10px var(--gold);
}

.card.deal { animation: deal 0.42s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
@keyframes deal {
  from { transform: translateY(-60px) scale(0.6) rotate(-8deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.card.hit .inner { translate: 0 -10px; }
.card.hit .front { box-shadow: 0 0 0 3px var(--gold), 0 0 24px var(--gold), 0 10px 18px rgba(0, 0, 0, 0.5); }
.card.dim .inner { filter: brightness(0.5) saturate(0.6); }
.card.pop { animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pop { 0% { transform: scale(1.25, 0.8); } 100% { transform: none; } }

/* ---- Double ------------------------------------------------------------ */
.double {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: var(--gap);
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px dashed rgba(255, 216, 77, 0.6);
}
.double[hidden] { display: none; }
.double-text { display: flex; flex-direction: column; gap: 4px; max-width: 26ch; }
.double-text strong { font-family: var(--font-display); font-weight: 400; color: var(--gold); font-size: 1.3rem; }
.double-text em { font-style: normal; color: var(--cyan); }
.card-slot { width: clamp(70px, 14vw, 110px); perspective: 900px; }

/* ---- Pesan & statistik ------------------------------------------------- */
.message {
  margin: 0;
  min-height: 2.4em;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
}
.message.good { color: var(--gold); text-shadow: 0 0 12px #ff9a00; animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.message.bad { color: #ff8fb7; text-shadow: 0 0 10px var(--magenta); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--panel-edge);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
}
.stat span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.stat b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 3.6vw, 2rem);
  color: var(--green);
  text-shadow: 0 0 10px rgba(109, 255, 155, 0.6);
  font-variant-numeric: tabular-nums;
}
.stat.win b { color: var(--gold); text-shadow: 0 0 10px rgba(255, 216, 77, 0.7); }

/* ---- Tombol ------------------------------------------------------------- */
.controls { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
.btn {
  --c1: #3a2a7a; --c2: #241657; --edge: #120a33;
  flex: 1 1 130px;
  max-width: 260px;
  min-height: 62px;
  padding: 10px 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 6px 0 var(--edge), 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
  touch-action: manipulation;
}
.btn small { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; opacity: 0.85; letter-spacing: 0; }
.btn:hover:not(:disabled) { filter: brightness(1.12); }
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge), 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { --c1: #ff5fae; --c2: #e0127a; --edge: #7a0742; box-shadow: 0 6px 0 var(--edge), 0 0 24px rgba(255, 46, 151, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn.gold { --c1: #ffe27a; --c2: #f0a500; --edge: #7a5000; color: #3a1d00; }
.btn.cyan { --c1: #3ff5ff; --c2: #00a9c9; --edge: #005466; color: #002a33; }
.btn.small { flex: 0 1 80px; font-size: 1.5rem; }
.btn.primary.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 6px 0 var(--edge), 0 0 14px rgba(255, 46, 151, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 6px 0 var(--edge), 0 0 34px rgba(255, 46, 151, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}

.hint { margin: 0; text-align: center; font-size: 0.8rem; color: var(--muted); }
kbd { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); font-family: inherit; }

/* ---- Dialog aturan ------------------------------------------------------ */
dialog {
  max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 20px;
  background: #160a3a;
  color: var(--text);
  padding: 22px 24px;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
  line-height: 1.55;
}
dialog::backdrop { background: rgba(5, 0, 20, 0.75); backdrop-filter: blur(4px); }
dialog h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; color: var(--gold); }
dialog ol { padding-left: 1.2em; }
dialog li { margin-bottom: 8px; }
dialog .note { font-size: 0.85rem; color: var(--muted); }
dialog .btn { width: 100%; max-width: none; }

/* ---- Layar sempit -------------------------------------------------------- */
@media (max-width: 640px) {
  .machine { min-height: 100dvh; }
  .message { margin-top: auto; }
  .paytable { grid-template-columns: repeat(2, 1fr); gap: 2px 8px; padding: 10px; }
  .pay { font-size: 0.8rem; padding: 3px 6px; }
  .tool { width: 40px; height: 40px; }
  .btn { flex-basis: 120px; min-height: 58px; font-size: 1rem; }
  .double { flex-direction: column; gap: 10px; text-align: center; }
  .hint { display: none; }
}

/* ---- HP posisi landscape: dua kolom (tabel kiri, meja kanan) -------------- */
@media (orientation: landscape) and (max-height: 560px) {
  :root { font-size: clamp(12px, 3.4vh, 16px); --gap: 6px; }
  html[data-size='large'] { font-size: clamp(14px, 4vh, 18px); }

  .machine {
    max-width: none;
    height: 100dvh;
    display: grid;
    grid-template-columns: minmax(200px, 32%) 1fr;
    column-gap: 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .side, .main { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
  .main { justify-content: space-between; }
  .paytable { flex: 1 1 auto; min-height: 0; }
  .controls { flex-wrap: nowrap; }
  .hint { display: none; }

  .top { flex-direction: column; align-items: stretch; gap: 4px; }
  .title { font-size: 1.25rem; white-space: nowrap; text-align: center; }
  .tools { gap: 5px; justify-content: space-between; }
  .tool { flex: 1; width: auto; height: 32px; border-radius: 9px; font-size: 0.9rem; }

  /* Kartu dibatasi tinggi layar supaya sisa kolom kanan tetap muat. */
  .cards { max-width: calc(7 * 26dvh * 5 / 7 + 6 * var(--gap)); width: 100%; margin: 0 auto; }

  .mode-btn { min-height: 32px; font-size: 0.78rem; }

  .paytable {
    grid-template-columns: 1fr;
    align-content: space-evenly;
    gap: 1px;
    padding: 6px 8px;
  }
  .pay { font-size: 0.8rem; padding: 1px 8px; }

  .table { padding: 8px 10px; position: relative; }
  .message { min-height: 1.6em; font-size: 1.05rem; flex: 1; }
  .stat { padding: 3px 6px; flex-direction: row; justify-content: center; gap: 8px; align-items: baseline; }
  .stat b { font-size: 1.3rem; }
  .btn { min-height: 48px; padding: 6px 10px; font-size: 1rem; max-width: none; }
  .btn small { font-size: 0.68rem; }
  .btn.small { flex: 0 1 64px; }

  /* Double menimpa area kartu supaya tidak menambah tinggi. */
  .double {
    position: absolute;
    inset: 6px;
    margin: 0;
    z-index: 2;
    flex-direction: row;
    gap: 16px;
    background: rgba(12, 4, 34, 0.94);
    border-style: solid;
  }
  .card-slot { width: auto; height: 100%; aspect-ratio: 5 / 7; }
  .card-slot .card { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}