/* ============================================================
   HODLOWEEN — TAMPILAN
   Tema: arcade malam Halloween. Ungu gelap, oranye labu,
   hijau lendir. Font pixel untuk judul, mono untuk angka.
   ============================================================ */

:root {
  /* Nada: Halloween yang ceria, bukan horor suram.
     Ungu benar-benar ungu, oranye labu terang, plus pink permen
     sebagai aksen kedua supaya terasa arcade dan menyenangkan. */
  --bg:        #1d1338;  /* malam ungu, bukan hitam */
  --bg2:       #261a49;
  --panel:     #2c1e57;  /* panel ungu jelas */
  --panel2:    #3a2a69;  /* panel lebih terang */
  --line:      #5b3fa0;  /* garis pinggir ungu terang */
  --text:      #fff6e8;  /* krem hangat */
  --dim:       #b9a8e0;  /* teks redup keunguan */
  --orange:    #ff8f2e;  /* labu */
  --orange2:   #ffc44f;  /* labu terang / emas */
  --green:     #8dff7a;  /* lendir terang */
  --red:       #ff6b8f;  /* darah permen */
  --pink:      #ff5fd0;  /* aksen ceria */
  --purple:    #b98cff;  /* hantu */
  --font-px:   'Press Start 2P', monospace;
  --font-big:  'VT323', monospace;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  min-height: 100vh;
  /* cahaya ungu-pink lembut + bintang, supaya latar tidak terasa mati */
  background-image:
    radial-gradient(900px 500px at 12% -5%,  #6a2fb455 0%, transparent 60%),
    radial-gradient(800px 480px at 88% 0%,   #b02f8a3d 0%, transparent 62%),
    radial-gradient(700px 420px at 50% 100%, #3f2a8a4d 0%, transparent 65%),
    radial-gradient(1.5px 1.5px at 20% 30%, #ffffff55 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 10%, #ffffff40 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 70%, #ffffff30 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 50%, #ffffff48 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 15% 85%, #ffffff35 50%, transparent 51%);
  background-attachment: fixed;
}

/* ---------- bilah atas ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 20px;
  border-bottom: 3px solid var(--line);
  background: linear-gradient(#33215f, #241748);
  box-shadow: 0 4px 0 #0000002e;
}
.logo { font-family: var(--font-px); font-size: 18px; line-height: 1; }
.logo-hodl  { color: var(--orange2); text-shadow: 3px 3px 0 #b4460a, 0 0 18px #ff8f2e66; }
.logo-oween { color: var(--text);   text-shadow: 3px 3px 0 #7a4fd0, 0 0 18px #b98cff55; }
.logo-tag {
  display: block; font-size: 7px; color: var(--dim);
  margin-top: 6px; letter-spacing: 2px;
}
.mainnav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.mainnav a {
  color: var(--dim); text-decoration: none; padding: 8px 10px;
  font-family: var(--font-big); font-size: 18px; letter-spacing: 1px;
}
.mainnav a.on { color: var(--orange); border-bottom: 2px solid var(--orange); }
.mainnav a[data-soon] { cursor: not-allowed; opacity: .55; position: relative; }
.mainnav a[data-soon]:hover::after {
  content: 'SOON'; position: absolute; top: -8px; right: -6px;
  font-size: 9px; color: var(--bg); background: var(--purple);
  padding: 1px 4px; border-radius: 3px; font-family: var(--font-mono);
}

/* ---------- tombol ---------- */
.btn {
  font-family: var(--font-px); font-size: 11px;
  color: #2a1400; background: linear-gradient(#ffa544, var(--orange));
  border: none; padding: 12px 16px; cursor: pointer; border-radius: 8px;
  box-shadow: 0 4px 0 #c4571a, 0 6px 12px #ff8f2e33;
  transition: transform .06s, box-shadow .06s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c4571a; }
.btn-wallet { font-size: 9px; }
.btn-ghosted {
  background: linear-gradient(#4a3480, var(--panel2)); color: var(--text);
  box-shadow: 0 4px 0 #221743;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- ticker ---------- */
.tickerbar {
  display: flex; align-items: center;
  border-bottom: 2px solid var(--line);
  background: linear-gradient(#241748,#1b1136); height: 34px; overflow: hidden;
}
.tick-static {
  padding: 0 14px; white-space: nowrap; font-size: 12px;
  color: var(--dim); border-right: 2px solid var(--line);
}
.tick-static b { color: var(--text); }
.tick-sep { margin: 0 8px; }
.orange { color: var(--orange); }
.green  { color: var(--green); }
.tick-scroll { flex: 1; overflow: hidden; }
.tick-track {
  display: inline-block; white-space: nowrap;
  animation: ticker 40s linear infinite;
  font-size: 12px; color: var(--dim); padding-left: 100%;
}
.tick-track b { color: var(--green); }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ---------- tata letak 3 kolom ---------- */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  gap: 14px; padding: 14px; max-width: 1560px; margin: 0 auto;
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  box-shadow: 0 4px 0 #17102e, inset 0 1px 0 #ffffff12;
}
.panel-title {
  font-family: var(--font-px); font-size: 10px;
  color: var(--orange2); margin-bottom: 10px; letter-spacing: 1px;
}
.dim { color: var(--dim); font-size: 11px; font-family: var(--font-mono); }
.live { color: var(--green); font-size: 10px; }

/* ---------- lobby kiri ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tab {
  flex: 1; font-family: var(--font-px); font-size: 10px;
  padding: 10px 0; background: var(--panel2); color: var(--dim);
  border: 2px solid var(--line); cursor: pointer; border-radius: 8px;
}
.tab.on { background: linear-gradient(#ffa544, var(--orange)); color: #2a1400; border-color: var(--orange2); }
.lobby-head {
  font-family: var(--font-big); font-size: 20px; letter-spacing: 2px;
  margin-bottom: 10px;
}
.blink { color: var(--green); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.pick-label { font-size: 11px; color: var(--dim); margin: 6px 0; }
/* 3 kolom, bukan 4 — karakter harus cukup besar untuk dikenali,
   karena identitas karakter itu inti dari game ini */
.char-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin-bottom: 12px;
}
.char-cell {
  background: var(--panel2); border: 2px solid var(--line);
  border-radius: 6px; padding: 4px; cursor: pointer; text-align: center;
  transition: transform .08s;
}
.char-cell:hover { transform: translateY(-3px); border-color: var(--pink); }
.char-cell.on { border-color: var(--orange2); background: linear-gradient(#5c3a1e,#3f2a5e); box-shadow: 0 0 0 2px #ff8f2e44; }
.char-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.char-cell .cname {
  font-size: 8.5px; font-family: var(--font-mono); color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}
.char-cell.on .cname { color: var(--orange2); }

.stake-box { border-top: 2px dashed var(--line); padding-top: 12px; }
.stake-label { font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.stake-row { display: flex; gap: 6px; margin-bottom: 12px; }
.chip {
  flex: 1; font-family: var(--font-mono); font-weight: 700;
  padding: 8px 0; background: var(--panel2); color: var(--text);
  border: 2px solid var(--line); border-radius: 6px; cursor: pointer;
}
.chip.on { background: linear-gradient(#a9ff96, var(--green)); color: #0d2b08; border-color: var(--green); }
.btn-race { width: 100%; font-size: 13px; padding: 14px 0; }
.fee-note { text-align: center; font-size: 11px; color: var(--dim); margin-top: 8px; }

/* ---------- arena tengah ---------- */
.stage-wrap { padding: 0; overflow: hidden; position: relative; }
.stage-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 2px solid var(--line);
}
.race-state { font-family: var(--font-px); font-size: 10px; color: var(--purple); }
.race-pot   { font-family: var(--font-px); font-size: 10px; color: var(--green); }
#raceCanvas { display: block; width: 100%; height: auto; image-rendering: auto; }

.race-overlay {
  position: absolute; inset: 0; top: 40px;
  background: #14101cd9; backdrop-filter: blur(2px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.race-overlay.hidden { display: none; }
.ro-title  { font-family: var(--font-px); font-size: 18px; color: var(--text); }
.ro-winner { font-family: var(--font-px); font-size: 26px; color: var(--orange); text-shadow: 4px 4px 0 #7a3200; }
.ro-payout { font-family: var(--font-big); font-size: 34px; color: var(--green); }
.ro-payout.lose { color: var(--red); }

/* ---------- panel bukti adil ---------- */
.fair-panel { margin-top: 14px; }
.fair-panel.hidden { display: none; }
.fair-title { font-family: var(--font-px); font-size: 10px; color: var(--green); margin-bottom: 10px; }
.fair-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--dim); padding: 5px 0;
  border-bottom: 1px solid #2a214033;
}
.fair-row code {
  color: var(--text); font-family: var(--font-mono); font-size: 10px;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fair-row code.ok  { color: var(--green); }
.fair-row code.bad { color: var(--red); }
.fair-note { font-size: 11px; color: var(--dim); margin-top: 8px; line-height: 1.5; }

/* ---------- baris bawah ---------- */
.under-row {
  display: grid; grid-template-columns: 300px 1fr; gap: 14px; margin-top: 14px;
}
@media (max-width: 900px) { .under-row { grid-template-columns: 1fr; } }

.top-list { display: flex; flex-direction: column; gap: 8px; }
.top-item { display: flex; align-items: center; gap: 10px; }
.top-item img {
  width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
  background: var(--panel2); border-radius: 6px; padding: 2px;
}
.top-item .tname { flex: 1; font-size: 12px; }
.top-item .twins { color: var(--green); font-size: 12px; }
.top-item .medal { font-size: 16px; }

.hist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hist-table th {
  text-align: left; color: var(--dim); font-weight: 400; font-size: 10px;
  padding: 4px 8px; border-bottom: 1px solid var(--line);
}
.hist-table td { padding: 6px 8px; border-bottom: 1px solid #2a214055; }
.hist-table .win  { color: var(--green); }
.hist-table .lose { color: var(--red); }

/* ---------- sidebar kanan ---------- */
.col-side { display: flex; flex-direction: column; gap: 14px; }
.side-card {}
.balance-row {
  display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0;
}
.balance-row b { font-family: var(--font-big); font-size: 24px; }
.dim-row { font-size: 11px; }
.mission-line {
  display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0;
  border-bottom: 1px dashed #2a214077;
}
.mission-note { font-size: 11px; color: var(--dim); margin-top: 8px; }

.gotd { text-align: center; }
.gotd img {
  width: 110px; height: 110px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 6px 12px #00000088);
}
.gotd-name { font-family: var(--font-px); font-size: 10px; color: var(--orange2); margin-top: 8px; }
.gotd-joke { font-size: 11px; color: var(--dim); margin-top: 4px; }

.demo-note { font-size: 11px; color: var(--dim); line-height: 1.6; }
.demo-note b { color: var(--orange2); }

/* ---------- footer ---------- */
.footer {
  text-align: center; color: var(--dim); font-size: 11px;
  padding: 20px; border-top: 2px solid var(--line); margin-top: 20px;
}

/* ============================================================
   HALAMAN ISI (Tokenomics, How It Works)
   Dipakai bersama oleh semua halaman selain Play.
   ============================================================ */

.logo-link { text-decoration: none; display: block; }
.page { max-width: 1080px; margin: 0 auto; padding: 30px 20px 60px; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 30px 0 44px; }
.hero-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase; margin-bottom: 14px;
}
.hero-title {
  font-family: var(--font-px); font-size: 26px; line-height: 1.7;
  color: var(--text); text-shadow: 4px 4px 0 #7a4fd0;
}
.hero-sub {
  max-width: 640px; margin: 22px auto 0; color: var(--dim);
  font-size: 15px; line-height: 1.75;
}
.hero-note {
  max-width: 720px; margin: 26px auto 0; color: var(--dim);
  font-size: 13px; line-height: 1.8;
  border-left: 3px solid var(--line); padding-left: 16px; text-align: left;
}

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 34px;
}
@media (max-width: 780px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-box {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 12px; padding: 18px 10px;
  box-shadow: 0 4px 0 #17102e;
}
.stat-num { font-family: var(--font-big); font-size: 30px; color: var(--text); line-height: 1; }
.stat-lbl { font-size: 11px; color: var(--dim); margin-top: 8px; }

/* ---------- blok umum ---------- */
.block { margin-top: 56px; }
.block-kicker {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px;
  color: var(--pink); text-transform: uppercase; margin-bottom: 8px;
}
.block-title {
  font-family: var(--font-px); font-size: 17px; color: var(--orange2);
  margin-bottom: 16px; text-shadow: 3px 3px 0 #b4460a;
}
.block-lead { color: var(--dim); font-size: 14px; line-height: 1.8; max-width: 780px; }
.block-lead b, .loop-note b { color: var(--text); }
.small-note { color: var(--dim); font-size: 12px; margin-top: 16px; line-height: 1.7; }
.small-note b { color: var(--orange2); }

/* ---------- pembagian fee ---------- */
.split-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px;
}
@media (max-width: 900px) { .split-grid { grid-template-columns: repeat(2, 1fr); } }
.split-card {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-top: 5px solid var(--dim);
  border-radius: 12px; padding: 16px; box-shadow: 0 4px 0 #17102e;
}
.split-card.accent-purple { border-top-color: var(--purple); }
.split-card.accent-green  { border-top-color: var(--green); }
.split-card.accent-orange { border-top-color: var(--orange); }
.split-pct { font-family: var(--font-px); font-size: 22px; color: var(--text); }
.split-name { font-size: 13px; color: var(--orange2); margin: 8px 0 6px; font-weight: 700; }
.split-desc { font-size: 12px; color: var(--dim); line-height: 1.7; }
.loop-note {
  margin-top: 20px; background: #ffffff0a; border-left: 4px solid var(--green);
  border-radius: 8px; padding: 16px 18px; color: var(--dim);
  font-size: 13px; line-height: 1.8;
}

/* ---------- tier ---------- */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px;
}
@media (max-width: 780px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 14px; padding: 20px; text-align: center;
  box-shadow: 0 4px 0 #17102e;
}
.tier-card.tier-mid { border-color: var(--purple); }
.tier-card.tier-top { border-color: var(--orange2); box-shadow: 0 4px 0 #17102e, 0 0 26px #ff8f2e33; }
.tier-icon { font-size: 34px; }
.tier-name { font-family: var(--font-px); font-size: 14px; color: var(--orange2); margin: 10px 0 4px; }
.tier-hold { font-size: 12px; color: var(--dim); margin-bottom: 14px; }
.tier-perks { list-style: none; font-size: 13px; color: var(--dim); line-height: 2; }
.tier-perks b { color: var(--green); }

/* ---------- bagian jujur ---------- */
.honest-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px;
}
@media (max-width: 780px) { .honest-grid { grid-template-columns: 1fr; } }
.honest-card {
  background: #ff6b8f12; border: 2px solid #ff6b8f45;
  border-radius: 12px; padding: 18px;
}
.honest-card h3 { font-size: 14px; color: var(--red); margin-bottom: 8px; }
.honest-card p { font-size: 13px; color: var(--dim); line-height: 1.8; }

/* ---------- roadmap ---------- */
.road { margin-top: 22px; border-left: 3px dashed var(--line); padding-left: 26px; }
.road-item { position: relative; padding-bottom: 26px; }
.road-dot {
  position: absolute; left: -34px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--panel2); border: 3px solid var(--line);
}
.road-item.done .road-dot { background: var(--green); border-color: var(--green); }
.road-item h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.road-item p { font-size: 13px; color: var(--dim); line-height: 1.8; }
.road-tag {
  font-family: var(--font-mono); font-size: 10px; background: var(--panel2);
  color: var(--dim); padding: 2px 7px; border-radius: 4px; margin-left: 8px;
  vertical-align: middle;
}
.road-tag.done-tag { background: var(--green); color: #0d2b08; }

/* ---------- langkah bernomor ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 12px; padding: 16px;
  box-shadow: 0 4px 0 #17102e;
}
.step-n {
  font-family: var(--font-px); font-size: 16px; color: var(--orange);
  display: block; margin-bottom: 10px;
}
.step h3 { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.step p { font-size: 12px; color: var(--dim); line-height: 1.7; }

/* ---------- daftar gerak karakter ---------- */
.move-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 900px) { .move-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .move-grid { grid-template-columns: 1fr; } }
.move-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.move-card img {
  width: 54px; height: 54px; object-fit: contain; flex-shrink: 0;
}
.move-card .mv-name { font-size: 12px; color: var(--orange2); font-weight: 700; }
.move-card .mv-desc { font-size: 11px; color: var(--dim); line-height: 1.5; margin-top: 3px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 20px; }
.faq details {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-size: 14px; color: var(--text); list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-size: 20px; }
.faq details[open] summary::after { content: '−'; }
.faq p { font-size: 13px; color: var(--dim); line-height: 1.85; margin-top: 12px; }

/* ---------- CTA penutup ---------- */
.cta { text-align: center; margin-top: 64px; padding: 44px 20px; }
.cta h2 {
  font-family: var(--font-px); font-size: 18px; color: var(--text);
  margin-bottom: 24px; text-shadow: 3px 3px 0 #7a4fd0;
}
.btn-cta { display: inline-block; text-decoration: none; font-size: 14px; padding: 18px 30px; }

/* ============================================================
   TAMPILAN HP
   ------------------------------------------------------------
   Tiga hal yang diperbaiki di layar kecil:
   1. Arena balapan dipindah ke ATAS lobby. Di HP, hal pertama
      yang dilihat orang harus gamenya — bukan daftar 13 karakter
      yang bikin mereka harus scroll jauh dulu.
   2. Navigasi jadi baris mendatar yang bisa digeser, bukan
      tumpukan vertikal yang makan setengah layar.
   3. Tidak ada satu pun elemen yang meluber ke samping.
   ============================================================ */
@media (max-width: 760px) {

  /* ---- bilah atas jadi ringkas ---- */
  .topbar {
    flex-wrap: wrap; gap: 10px; padding: 12px 14px;
  }
  .logo { font-size: 15px; flex: 1; }
  .logo-tag { font-size: 6px; margin-top: 5px; }
  .btn-wallet { font-size: 8px; padding: 10px 12px; }

  /* navigasi: satu baris mendatar, digeser jari */
  .mainnav {
    order: 3; width: 100%; flex: none; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 2px; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { font-size: 16px; padding: 6px 9px; white-space: nowrap; }

  /* ---- ticker ---- */
  .tick-static { font-size: 10px; padding: 0 10px; }
  .tick-track { font-size: 10px; }

  /* ---- urutan di HP: arena -> lobby -> statistik -> sidebar ----
     `display:contents` membuat isi kolom tengah ikut jadi anggota
     grid, sehingga arena dan papan statistik bisa dipisah dan
     lobby diselipkan di antaranya. Tujuannya: begitu selesai
     menonton balapan, tombol main ada tepat di bawah layar —
     bukan setelah melewati tabel statistik. */
  .layout { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
  .col-stage { display: contents; }
  .stage-wrap { order: 1; }
  .fair-panel { order: 2; }
  .col-lobby  { order: 3; }
  .under-row  { order: 4; margin-top: 0; }
  .col-side   { order: 5; }

  /* ---- lobby lebih padat ---- */
  .char-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .char-cell { padding: 3px; border-radius: 8px; }
  .char-cell .cname { font-size: 7px; }
  .tab { font-size: 9px; padding: 11px 0; }
  .chip { padding: 11px 0; font-size: 13px; }
  .btn-race { font-size: 11px; padding: 15px 0; }
  .lobby-head { font-size: 17px; }

  /* ---- arena ---- */
  .stage-head { padding: 8px 10px; }
  .race-state, .race-pot { font-size: 8px; }
  .ro-title  { font-size: 13px; }
  .ro-winner { font-size: 17px; }
  .ro-payout { font-size: 24px; }
  .race-overlay { gap: 10px; padding: 0 14px; }

  /* ---- baris bawah & riwayat ---- */
  .under-row { grid-template-columns: 1fr; gap: 10px; }
  .hist-table { font-size: 11px; }
  .hist-table td, .hist-table th { padding: 5px 4px; }

  /* ---- panel bukti keadilan: hash panjang jangan meluber ---- */
  .fair-row { flex-direction: column; gap: 3px; }
  .fair-row code { max-width: 100%; font-size: 9px; }

  /* ---- halaman isi ---- */
  .page { padding: 22px 14px 44px; }
  .hero { padding: 16px 0 28px; }
  .hero-title { font-size: 16px; line-height: 1.85; }
  .hero-sub { font-size: 13px; }
  .block { margin-top: 40px; }
  .block-title { font-size: 13px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 23px; }
  .split-grid, .steps { grid-template-columns: 1fr; }
  .tier-grid, .honest-grid, .move-grid { grid-template-columns: 1fr; }
  .cta h2 { font-size: 13px; line-height: 1.8; }
  .btn-cta { font-size: 11px; padding: 15px 20px; }
}

/* layar sangat kecil */
@media (max-width: 400px) {
  .char-grid { grid-template-columns: repeat(3, 1fr); }
  .logo { font-size: 13px; }
}

/* tabel klasemen — sedikit lebih lega dari tabel riwayat di halaman Play */
.lb-table { width: 100%; }
.lb-table th { padding: 10px 12px; font-size: 10px; }
.lb-table td { padding: 9px 12px; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tbody tr:hover { background: #ffffff08; }

/* ---------- pita "belum aktif" untuk halaman fitur mendatang ---------- */
.soon-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, #ff8f2e22, #b98cff1c);
  border: 2px solid var(--orange); border-radius: 12px;
  padding: 15px 18px; margin-bottom: 30px;
}
.soon-pill {
  font-family: var(--font-px); font-size: 9px; flex-shrink: 0;
  background: var(--orange); color: #2a1400;
  padding: 8px 11px; border-radius: 7px;
}
.soon-banner p { font-size: 13px; color: var(--dim); line-height: 1.7; }
.soon-banner b { color: var(--text); }

/* ---------- tabel spesifikasi ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 18px; }
.spec th {
  text-align: left; font-size: 10px; color: var(--dim); font-weight: 400;
  padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap;
}
.spec td { padding: 10px 12px; border-bottom: 1px solid #ffffff10; }
.spec tbody tr:hover { background: #ffffff08; }
.spec .hi { color: var(--green); font-weight: 700; }
.spec .row-top td { background: #ff8f2e14; }
.spec-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: 12px;
  background: linear-gradient(160deg, var(--panel2), var(--panel)); }

/* ---------- jadwal mingguan ---------- */
.week { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 780px) { .week { grid-template-columns: 1fr; } }
.week-card {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 12px; padding: 18px; text-align: center;
  box-shadow: 0 4px 0 #17102e;
}
.week-day { font-family: var(--font-px); font-size: 12px; color: var(--orange2); }
.week-what { font-size: 13px; color: var(--text); margin: 10px 0 6px; font-weight: 700; }
.week-desc { font-size: 12px; color: var(--dim); line-height: 1.7; }

/* ---------- kartu harga ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
@media (max-width: 780px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border: 2px solid var(--line); border-radius: 14px; padding: 22px; text-align: center;
  box-shadow: 0 4px 0 #17102e; position: relative;
}
.price-card.best { border-color: var(--green); box-shadow: 0 4px 0 #17102e, 0 0 26px #8dff7a2e; }
.price-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #0d2b08; font-size: 10px; font-weight: 700;
  padding: 4px 12px; border-radius: 6px; white-space: nowrap;
}
.price-days { font-family: var(--font-px); font-size: 13px; color: var(--orange2); }
.price-amt { font-family: var(--font-big); font-size: 42px; color: var(--text); margin: 12px 0 2px; }
.price-per { font-size: 12px; color: var(--dim); }

/* ---------- tombol bisu ---------- */
.btn-mute { font-size: 15px; padding: 10px 13px; }

/* ============================================================
   BILAH TOKEN — alamat kontrak + tombol beli Pump.fun
   Muncul di semua halaman, tepat di bawah bilah atas.
   ============================================================ */
.tokenbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(90deg, #2c1e57, #3a2a69);
  border-bottom: 3px solid var(--line);
  flex-wrap: wrap;
}
.tb-label {
  font-family: var(--font-px); font-size: 9px; color: var(--orange2);
  letter-spacing: 1px; flex-shrink: 0;
}

/* ---- kotak alamat, bisa diklik untuk menyalin ---- */
.tb-ca {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  background: #150c2ab3; border: 2px solid var(--line);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
  transition: border-color .12s, background .12s;
  min-width: 0; flex: 1;
}
.tb-ca:hover { border-color: var(--pink); background: #150c2ae6; }
.tb-ca.tersalin { border-color: var(--green); }
.tb-ca-full  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ca-short { display: none; }
.tb-copy-ikon {
  font-size: 11px; color: var(--dim); flex-shrink: 0; margin-left: auto;
  white-space: nowrap;
}
.tb-ca.tersalin .tb-copy-ikon { color: var(--green); font-weight: 700; }

/* ---- keadaan belum launch ---- */
.tb-belum {
  flex: 1; min-width: 0; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
  background: #ff6b8f14; border: 2px solid #ff6b8f4d;
  border-radius: 8px; padding: 7px 12px;
}
.tb-belum b { font-size: 12px; color: var(--red); white-space: nowrap; }
.tb-belum span { font-size: 11px; color: var(--dim); }

/* ---- tombol beli ---- */
.tb-buy {
  font-family: var(--font-px); font-size: 10px; text-decoration: none;
  color: #0d2b08; background: linear-gradient(#a9ff96, var(--green));
  padding: 11px 16px; border-radius: 8px; flex-shrink: 0;
  box-shadow: 0 4px 0 #4a9c3a, 0 6px 14px #8dff7a33;
  transition: transform .06s, box-shadow .06s, filter .12s;
}
.tb-buy:hover { filter: brightness(1.08); }
.tb-buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #4a9c3a; }
.tb-buy-mati {
  background: var(--panel2); color: var(--dim);
  box-shadow: 0 4px 0 #221743; cursor: not-allowed;
}
.tb-buy-mati:hover { filter: none; }

@media (max-width: 760px) {
  .tokenbar { padding: 9px 14px; gap: 8px; }
  .tb-label { width: 100%; }
  .tb-ca { font-size: 11px; padding: 8px 10px; }
  .tb-ca-full  { display: none; }
  .tb-ca-short { display: inline; }
  .tb-buy { font-size: 8px; padding: 10px 12px; }
  .tb-belum { padding: 6px 10px; }
  .tb-belum span { display: none; }
}

/* ---------- hitung mundur di bilah token ---------- */
.tb-hitung {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: #150c2ab3; border: 2px solid var(--line);
  border-radius: 8px; padding: 6px 14px; min-width: 0;
}
.th-blok { text-align: center; min-width: 42px; }
.th-blok b {
  display: block; font-family: var(--font-big); font-size: 26px;
  color: var(--orange2); line-height: 1;
}
.th-blok span { font-size: 8px; color: var(--dim); letter-spacing: 1px; }
.th-titik { color: var(--line); font-size: 18px; margin-top: -8px; }

/* saat waktunya sudah lewat tapi CA belum dipasang */
.tb-siap {
  flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #8dff7a1a; border: 2px solid #8dff7a59;
  border-radius: 8px; padding: 8px 14px;
}
.tb-siap b { font-size: 13px; color: var(--green); white-space: nowrap; }
.tb-siap span { font-size: 11px; color: var(--dim); }

/* ---------- tautan sosial di bilah atas ---------- */
.sosial-baris { display: flex; align-items: center; gap: 6px; }
.sosial-baris a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; color: var(--dim);
  background: var(--panel2); border: 2px solid var(--line);
  border-radius: 8px; text-decoration: none;
  transition: color .12s, border-color .12s, transform .08s, background .12s;
}
.sosial-baris a svg { width: 17px; height: 17px; display: block; }
.sosial-baris a:hover {
  color: var(--text); border-color: var(--pink);
  background: #4a3480; transform: translateY(-2px);
}

@media (max-width: 760px) {
  .tb-hitung { padding: 5px 8px; gap: 3px; }
  .th-blok { min-width: 34px; }
  .th-blok b { font-size: 20px; }
  .th-blok span { font-size: 7px; }
  .tb-siap span { display: none; }
  .sosial-baris a { width: 34px; height: 34px; }
  .sosial-baris a svg { width: 15px; height: 15px; }
}