/* ============================================================
   style.css — Tarik Tambang Cerdas Cermat
   Dark mode, kompetitif, animatif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ─── Reset & Variabel ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --biru:       #1a6bff;
  --biru-muda:  #4d8fff;
  --merah:      #ff2d5e;
  --merah-muda: #ff6b8a;
  --emas:       #ffd700;
  --emas-muda:  #ffe94d;
  --hijau:      #00d68f;
  --bg-gelap:   #0a0e1a;
  --bg-panel:   #111827;
  --bg-card:    #1c2333;
  --border:     #2d3748;
  --teks:       #e8eaf6;
  --teks-redup: #8892b0;
  --shadow-biru: 0 0 20px rgba(26,107,255,.4);
  --shadow-merah: 0 0 20px rgba(255,45,94,.4);
  --font-game:  'Fredoka One', cursive;
  --font-ui:    'Nunito', sans-serif;
  --radius:     16px;
  --radius-sm:  8px;
}

html, body {
  font-family: var(--font-ui);
  background:  var(--bg-gelap);
  color:       var(--teks);
  min-height:  100vh;
  overflow-x:  hidden;
}

/* ─── Utility ───────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex   { display: flex; }
.center { align-items: center; justify-content: center; }
.gap-1  { gap: .5rem; }
.gap-2  { gap: 1rem; }
.mb-1   { margin-bottom: .5rem; }
.mb-2   { margin-bottom: 1rem; }
.text-center { text-align: center; }

/* ─── Tombol ────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           .5rem;
  padding:       .75rem 1.5rem;
  border:        none;
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-weight:   700;
  font-size:     1rem;
  cursor:        pointer;
  transition:    all .2s ease;
  text-decoration: none;
}
.btn:active { transform: scale(.96); }

.btn-biru   { background: var(--biru);  color: #fff; box-shadow: var(--shadow-biru); }
.btn-biru:hover { background: var(--biru-muda); }
.btn-merah  { background: var(--merah); color: #fff; box-shadow: var(--shadow-merah); }
.btn-merah:hover { background: var(--merah-muda); }
.btn-emas   { background: var(--emas);  color: #111; }
.btn-emas:hover { background: var(--emas-muda); }
.btn-hijau  { background: var(--hijau); color: #111; }
.btn-abu    { background: var(--border); color: var(--teks); }
.btn-lg     { padding: 1rem 2rem; font-size: 1.2rem; border-radius: var(--radius); }
.btn-full   { width: 100%; }

/* ─── Form ──────────────────────────────────────────────────── */
.form-group       { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 700; color: var(--teks-redup); margin-bottom: .4rem; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; }
.form-control {
  width:         100%;
  padding:       .8rem 1rem;
  background:    var(--bg-card);
  border:        2px solid var(--border);
  border-radius: var(--radius-sm);
  color:         var(--teks);
  font-family:   var(--font-ui);
  font-size:     1rem;
  transition:    border-color .2s;
}
.form-control:focus { outline: none; border-color: var(--biru); }

/* ─── Card ──────────────────────────────────────────────────── */
.card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.5rem;
}

/* ─── Halaman Join (index.php) ──────────────────────────────── */
.join-page {
  min-height:     100vh;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        1rem;
  background:     radial-gradient(ellipse at top, #1a2a4a 0%, var(--bg-gelap) 60%);
}

.join-box {
  width:         100%;
  max-width:     440px;
  background:    rgba(28,35,51,.95);
  border:        1px solid var(--border);
  border-radius: 24px;
  padding:       2.5rem 2rem;
  box-shadow:    0 25px 60px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);
}

.join-logo {
  text-align:    center;
  margin-bottom: 2rem;
}
.join-logo h1 {
  font-family:   var(--font-game);
  font-size:     1.8rem;
  background:    linear-gradient(135deg, var(--biru-muda), var(--emas));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height:   1.2;
}
.join-logo .subtitle {
  color:      var(--teks-redup);
  font-size:  .9rem;
  margin-top: .3rem;
}

/* Tim Radio ─────────────────────────────────────────────────── */
.tim-selector {
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        .75rem;
  margin-top: .5rem;
}
.tim-option { display: none; }
.tim-label {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .4rem;
  padding:        1rem .5rem;
  border:         2px solid var(--border);
  border-radius:  var(--radius);
  cursor:         pointer;
  transition:     all .2s;
  text-align:     center;
  font-weight:    700;
  font-size:      .9rem;
}
.tim-label .ikon { font-size: 2rem; }
.tim-option[value="putra"] + .tim-label { color: var(--biru-muda); }
.tim-option[value="putri"] + .tim-label { color: var(--merah-muda); }
.tim-option:checked + .tim-label {
  border-color: currentColor;
  background:   rgba(255,255,255,.05);
  box-shadow:   0 0 15px rgba(255,255,255,.1);
}

/* ─── Halaman Bermain (bermain.php) ─────────────────────────── */
.bermain-page {
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  padding:     1rem;
  gap:         1rem;
  background:  var(--bg-gelap);
}

.bermain-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         .75rem 1rem;
  background:      var(--bg-panel);
  border-radius:   var(--radius-sm);
  border:          1px solid var(--border);
}
.bermain-nama { font-weight: 800; font-size: 1.1rem; }
.bermain-nama.putra { color: var(--biru-muda); }
.bermain-nama.putri { color: var(--merah-muda); }
.bermain-skor { font-family: var(--font-game); font-size: 1.5rem; color: var(--emas); }

.soal-box {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.5rem;
  flex:          1;
}
.soal-nomor { font-size: .8rem; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .75rem; }
.soal-teks  { font-size: 1.15rem; font-weight: 700; line-height: 1.5; }

.pilihan-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .75rem;
  margin-top:            1.25rem;
}

.pilihan-btn {
  display:        flex;
  align-items:    center;
  gap:            .75rem;
  padding:        1rem;
  background:     var(--bg-panel);
  border:         2px solid var(--border);
  border-radius:  var(--radius-sm);
  color:          var(--teks);
  font-family:    var(--font-ui);
  font-size:      .95rem;
  font-weight:    600;
  cursor:         pointer;
  transition:     all .2s;
  text-align:     left;
  width:          100%;
}
.pilihan-btn:hover { border-color: var(--biru); background: rgba(26,107,255,.1); transform: translateY(-2px); }
.pilihan-btn:active { transform: scale(.97); }
.pilihan-btn .huruf {
  min-width:    32px;
  height:       32px;
  background:   var(--border);
  border-radius: 50%;
  display:      flex;
  align-items:  center;
  justify-content: center;
  font-weight:  800;
  font-size:    .85rem;
  flex-shrink:  0;
}
.pilihan-btn.benar  { border-color: var(--hijau); background: rgba(0,214,143,.15); animation: pulseBenar .5s ease; }
.pilihan-btn.salah  { border-color: var(--merah); background: rgba(255,45,94,.15); animation: pulseSalah .5s ease; }
.pilihan-btn.kunci  { border-color: var(--hijau); background: rgba(0,214,143,.1); }
.pilihan-btn:disabled { cursor: not-allowed; opacity: .6; }

@keyframes pulseBenar { 0%,100% { box-shadow: none } 50% { box-shadow: 0 0 25px rgba(0,214,143,.6) } }
@keyframes pulseSalah { 0%,100% { box-shadow: none } 50% { box-shadow: 0 0 25px rgba(255,45,94,.6) } }

.feedback-bar {
  padding:       .75rem 1rem;
  border-radius: var(--radius-sm);
  font-weight:   700;
  text-align:    center;
  display:       none;
  animation:     slideIn .3s ease;
}
.feedback-bar.benar { display: block; background: rgba(0,214,143,.2); border: 1px solid var(--hijau); color: var(--hijau); }
.feedback-bar.salah { display: block; background: rgba(255,45,94,.2); border: 1px solid var(--merah); color: var(--merah-muda); }
@keyframes slideIn { from { opacity:0; transform: translateY(-10px) } to { opacity:1; transform: translateY(0) } }

/* Menunggu game ─────────────────────────────────────────────── */
.menunggu-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
}
.menunggu-screen .kode-game {
  font-family: var(--font-game);
  font-size:   3rem;
  color:       var(--emas);
  letter-spacing: .2em;
  text-shadow: 0 0 30px rgba(255,215,0,.4);
}
.pulse-dot {
  width: 12px; height: 12px;
  background: var(--hijau);
  border-radius: 50%;
  animation: pulseDot 1.2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity:1; transform:scale(1) } 50% { opacity:.4; transform:scale(.7) } }

/* Layar Selesai ─────────────────────────────────────────────── */
.selesai-screen {
  position:    fixed;
  inset:       0;
  background:  rgba(10,14,26,.95);
  display:     flex;
  align-items: center;
  justify-content: center;
  z-index:     999;
  animation:   fadeIn .5s ease;
}
.selesai-box {
  text-align: center;
  padding:    2rem;
}
.selesai-box .trophy { font-size: 5rem; animation: bounce 1s ease infinite; }
.selesai-box h2 { font-family: var(--font-game); font-size: 2.5rem; margin: 1rem 0 .5rem; }
@keyframes bounce { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-15px) } }
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }

/* ─── Layar Proyektor (tampil_game.php) ─────────────────────── */
.proyektor-page {
  width:      100vw;
  height:     100vh;
  overflow:   hidden;
  display:    flex;
  flex-direction: column;
  background: var(--bg-gelap);
  user-select: none;
}

.proyektor-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         .75rem 2rem;
  background:      var(--bg-panel);
  border-bottom:   2px solid var(--border);
  flex-shrink:     0;
}
.proyektor-judul {
  font-family: var(--font-game);
  font-size:   1.6rem;
  background:  linear-gradient(to right, var(--biru-muda), var(--emas));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.proyektor-kode {
  font-size:    .85rem;
  color:        var(--teks-redup);
  font-weight:  600;
}
.proyektor-kode span {
  font-family: var(--font-game);
  font-size:   1.2rem;
  color:       var(--emas);
  margin-left: .3rem;
}

/* Timer ─────────────────────────────────────────────────────── */
.timer-box {
  font-family: var(--font-game);
  font-size:   2rem;
  color:       var(--teks);
  background:  var(--bg-card);
  border:      2px solid var(--border);
  border-radius: var(--radius-sm);
  padding:     .2rem .8rem;
  min-width:   90px;
  text-align:  center;
}
.timer-box.mepet { color: var(--merah); border-color: var(--merah); animation: kedipTimer 1s ease infinite; }
@keyframes kedipTimer { 0%,100% { opacity:1 } 50% { opacity:.5 } }

/* Area Tengah Proyektor ──────────────────────────────────────── */
.proyektor-arena {
  flex:         1;
  display:      flex;
  align-items:  center;
  overflow:     hidden;
  position:     relative;
}

/* Panel Skor Tim ────────────────────────────────────────────── */
.panel-tim {
  width:          260px;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  padding:        1.5rem;
  height:         100%;
  justify-content: center;
}
.panel-tim.putra { background: linear-gradient(180deg, rgba(26,107,255,.15) 0%, transparent 100%); border-right: 1px solid rgba(26,107,255,.3); }
.panel-tim.putri { background: linear-gradient(180deg, rgba(255,45,94,.15) 0%, transparent 100%);  border-left: 1px solid rgba(255,45,94,.3); }

.tim-label-besar {
  font-family: var(--font-game);
  font-size:   2rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.panel-tim.putra .tim-label-besar { color: var(--biru-muda); }
.panel-tim.putri .tim-label-besar { color: var(--merah-muda); }

.skor-besar {
  font-family:  var(--font-game);
  font-size:    5rem;
  line-height:  1;
  text-shadow:  0 0 40px currentColor;
  transition:   all .3s ease;
}
.panel-tim.putra .skor-besar { color: var(--biru-muda); }
.panel-tim.putri .skor-besar { color: var(--merah-muda); }

.skor-besar.naik { animation: skorNaik .4s ease; }
@keyframes skorNaik { 0% { transform:scale(1) } 50% { transform:scale(1.4) } 100% { transform:scale(1) } }

.daftar-pemain-tim {
  width:      100%;
  max-height: 200px;
  overflow-y: auto;
}
.item-pemain {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         .3rem .5rem;
  border-radius:   6px;
  font-size:       .85rem;
  font-weight:     600;
}
.item-pemain:nth-child(odd) { background: rgba(255,255,255,.04); }

/* Area Tali (Tengah) ────────────────────────────────────────── */
.arena-tengah {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  position:       relative;
  overflow:       hidden;
}

.karakter-area {
  display:     flex;
  align-items: flex-end;
  width:       100%;
  justify-content: space-between;
  padding:     0 20px;
  position:    relative;
  height:      240px;
}

.karakter-putra,
.karakter-putri {
  height:     200px;
  object-fit: contain;
  transition: transform .3s ease;
  filter:     drop-shadow(0 10px 20px rgba(0,0,0,.5));
}
.karakter-putra { transform-origin: bottom right; }
.karakter-putri { transform-origin: bottom left; transform: scaleX(-1); }

.karakter-putra.tarik { animation: tarikKiri .3s ease; }
.karakter-putri.tarik { animation: tarikKanan .3s ease; }
@keyframes tarikKiri  { 0%,100% { transform:rotate(0) } 50% { transform:rotate(-8deg) } }
@keyframes tarikKanan { 0%,100% { transform:scaleX(-1) rotate(0) } 50% { transform:scaleX(-1) rotate(8deg) } }

/* Tali CSS ──────────────────────────────────────────────────── */
.tali-wrapper {
  position:  relative;
  width:     100%;
  height:    40px;
  display:   flex;
  align-items: center;
}

.tali-batang {
  width:         100%;
  height:        12px;
  background:    linear-gradient(180deg, #c8a87a 0%, #8b6914 40%, #c8a87a 100%);
  border-radius: 6px;
  box-shadow:    0 4px 10px rgba(0,0,0,.4);
  position:      relative;
}
/* Tekstur tali */
.tali-batang::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0, rgba(0,0,0,.1) 4px, transparent 4px, transparent 12px);
  border-radius: 6px;
}

.simpul-tali {
  position:    absolute;
  top:         50%;
  left:        50%;
  transform:   translate(-50%, -50%);
  width:       36px;
  height:      36px;
  background:  radial-gradient(circle, #ffe94d, #ffa500);
  border:      3px solid #fff;
  border-radius: 50%;
  box-shadow:  0 0 20px rgba(255,215,0,.8), 0 4px 10px rgba(0,0,0,.5);
  z-index:     10;
  transition:  left .6s cubic-bezier(.34,1.56,.64,1);
}

/* Garis Menang ──────────────────────────────────────────────── */
.garis-menang {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  background: rgba(255,255,255,.3);
  border-left: 2px dashed rgba(255,255,255,.3);
}
.garis-menang.kiri  { left: 25%; }
.garis-menang.kanan { right: 25%; }

/* TTS Bubble ────────────────────────────────────────────────── */
.tts-bubble {
  position:      absolute;
  top:           10px;
  left:          50%;
  transform:     translateX(-50%);
  background:    rgba(255,215,0,.15);
  border:        1px solid var(--emas);
  border-radius: 20px;
  padding:       .5rem 1.2rem;
  font-weight:   700;
  font-size:     1rem;
  color:         var(--emas);
  text-align:    center;
  max-width:     400px;
  animation:     bubbleMuncul .4s ease, bubbleHilang .4s ease 2.6s forwards;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
@keyframes bubbleMuncul  { from { opacity:0; transform:translateX(-50%) translateY(-10px) } to { opacity:1; transform:translateX(-50%) translateY(0) } }
@keyframes bubbleHilang  { to { opacity:0; transform:translateX(-50%) translateY(-10px) } }

/* Layar Menunggu Proyektor ───────────────────────────────────── */
.proyektor-menunggu {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
}
.kode-join-besar {
  font-family: var(--font-game);
  font-size:   6rem;
  color:       var(--emas);
  letter-spacing: .3em;
  text-shadow: 0 0 40px rgba(255,215,0,.5);
  animation:   pulseSkor 2s ease infinite;
}
@keyframes pulseSkor { 0%,100% { text-shadow:0 0 40px rgba(255,215,0,.5) } 50% { text-shadow:0 0 80px rgba(255,215,0,.9) } }

/* Layar Selesai Proyektor ───────────────────────────────────── */
.proyektor-selesai {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,215,0,.2) 0%, var(--bg-gelap) 70%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 2rem;
  animation: fadeIn .8s ease;
}
.proyektor-selesai h1 { font-family: var(--font-game); font-size: 4rem; color: var(--emas); }
.proyektor-selesai .skor-final {
  display: flex; gap: 4rem; align-items: center;
}
.skor-final-item { text-align: center; }
.skor-final-item .angka { font-family: var(--font-game); font-size: 5rem; }
.skor-final-item .label { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.skor-final-item.putra .angka { color: var(--biru-muda); }
.skor-final-item.putri .angka { color: var(--merah-muda); }
.vs-text { font-family: var(--font-game); font-size: 2.5rem; color: var(--teks-redup); }

/* Konfeti ───────────────────────────────────────────────────── */
.konfeti {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
}

/* ─── Responsive Mobile ─────────────────────────────────────── */
@media (max-width: 480px) {
  .pilihan-grid { grid-template-columns: 1fr; }
  .soal-teks { font-size: 1rem; }
  .join-box  { padding: 2rem 1.25rem; }
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-gelap); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ─── Loading spinner ───────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--biru);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }