/* KOMANDO — penyesuaian brand di atas tema HUD (glassmorphism + hijau) */

:root,
[data-bs-theme="dark"] {
    --bs-body-font-family: "Chakra Petch", sans-serif;
}

body { font-family: "Chakra Petch", sans-serif; }

.brand-text {
    font-weight: 700;
    letter-spacing: .12em;
}

/* kartu pilihan mode di beranda */
.mode-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card .mode-icon { font-size: 2.6rem; line-height: 1; }

/* angka statistik besar */
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { font-size: .8rem; opacity: .6; text-transform: uppercase; letter-spacing: .08em; }

/* papan skor live */
.scoreboard-total { font-size: 4rem; font-weight: 700; line-height: 1; }
.timer-big { font-size: 2.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* daftar tembakan */
.shot-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: .4rem;
    font-weight: 700; margin: .15rem;
    background: rgba(60, 210, 165, .15); border: 1px solid rgba(60, 210, 165, .4);
}
.shot-badge.miss { background: rgba(255, 96, 96, .15); border-color: rgba(255, 96, 96, .4); }

/* brand: KOMANDO + subjudul menyatu (bukan terpisah di pojok) */
.brand-sub {
    font-size: .6rem; letter-spacing: .24em; font-weight: 500;
    color: #7d8794; margin-top: 1px;
}
/* hamburger (minimize sidebar) di pojok KIRI, brand tepat di sebelahnya —
   batalkan margin-right:auto tema yang tadi melempar brand ke kanan */
#header.app-header .desktop-toggler { margin-right: .25rem; }

/* Background bercorak HUD: tema menunjuk /images/pattern*.png (path build sibekal) yang
   404 di sini. Arahkan ke lokasi aset yang benar (blueprint webapp: /app-static/assets/css/images/...). */
:root,
[data-bs-theme="light"] {
    --bs-body-bg-image: url("/app-static/assets/css/images/pattern.png");
    --bs-body-bg-cover: url("/app-static/assets/css/images/cover.jpg");
}
[data-bs-theme="dark"] {
    --bs-body-bg-image: url("/app-static/assets/css/images/pattern-dark.png");
    --bs-body-bg-cover: url("/app-static/assets/css/images/cover-dark.jpg");
}

/* ============================================================================
   RESPONSIF LAYAR MATCH (versus & main) — fit ke layar tanpa fullscreen.
   Masalah: konten match (2 papan + skor) bisa lebih tinggi dari area konten,
   dan area konten tema tidak selalu bisa di-scroll -> kepotong. Solusi:
   (a) jamin area konten bisa di-scroll sbagai fallback,
   (b) skalakan ring/baja/font ke TINGGI layar (vh) supaya muat tanpa scroll. */
#content.app-content { overflow-y: auto; }

/* skala elemen papan match ke tinggi viewport (ambil yg terkecil vs batas px) */
#panel-match .tgt-card svg { width: 100%; max-width: min(220px, 30vh) !important; height: auto; }
#panel-match .baja { height: clamp(78px, 17vh, 180px); }
#panel-match .plate { width: clamp(70px, 11vh, 118px); height: clamp(70px, 11vh, 118px); }
#panel-match .neck { height: clamp(26px, 5vh, 44px); }
#panel-match .tgt-label { font-size: clamp(.78rem, 2.1vh, 1.05rem); }
#panel-match .stat-value { font-size: clamp(1.15rem, 3vh, 2rem); }
#panel-match .stat-label { font-size: clamp(.6rem, 1.5vh, .8rem); }
#panel-match .timer-big { font-size: clamp(1.4rem, 4vh, 2.4rem); }
#panel-match .card-body.py-2 { padding-top: .35rem !important; padding-bottom: .35rem !important; }

/* layar hasil overlay: kartu ikut tinggi layar (juga saat layar pendek) */
#done-overlay #result-card-slot canvas { max-height: 72vh; }

/* ============================================================================
   TABEL RESPONSIF DI HP — riwayat & peringkat.
   Di layar lebar tetap tabel biasa (dibungkus .table-responsive Bootstrap).
   Di layar <576px, .table-stack berubah jadi daftar KARTU: tiap baris jadi
   satu kartu, tiap sel jadi baris "Label : Nilai" (label dari data-label).
   Tak ada lagi kolom yg tersembunyi / perlu di-swipe. */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td {
    display: block; width: 100%;
  }
  .table-stack { border: 0; }
  .table-stack tr {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, .025);
  }
  /* matikan latar zebra/hover Bootstrap yg mengganggu di mode kartu */
  .table-stack > tbody > tr > td {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    padding: 8px 0 !important;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    text-align: right !important;
    min-height: 0;
  }
  .table-stack > tbody > tr > td:last-child { border-bottom: 0 !important; }
  .table-stack > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .6;
    text-transform: uppercase;
    font-size: .72em;
  }
  /* sel tanpa label (mis. nomor peringkat) tampil rata-kiri penuh */
  .table-stack > tbody > tr > td:not([data-label])::before { content: ""; }
}