/*
 * Teka-Teki di situs (/teka-teki) — tangga delapan tempat & layar soal.
 *
 * Berkas terpisah, bukan tambahan di app.css: yang di sini hanya dipakai satu halaman,
 * dan app.css sudah dimuat setiap halaman situs (lihat [[katuranga-public-is-live]] —
 * tiap perubahan di sana berarti menaikkan ?v= untuk seluruh situs).
 *
 * Tangganya ditiru dari aplikasi (lib/widgets/puzzle_ladder.dart): 8 tingkat × 13 anak
 * tangga, naik dari POIN. Di app latar & efeknya digambar CustomPainter; di sini
 * gradien + beberapa kepingan yang dianimasikan CSS — bentuknya sama, cara menggambarnya
 * yang berbeda, dan itu memang perbedaan yang disengaja (lihat
 * [[katuranga-app-web-parity]]): peramban tidak punya painter, dan gambar sebesar layar
 * yang dihidupkan JavaScript akan membakar baterai di halaman yang orang buka lama-lama.
 */

/* ------------------------------------------------------------------ kepala ---- */

.tt-head { display: grid; gap: 14px; }
.tt-nums { display: flex; gap: 18px; align-items: flex-end; }
.tt-num { display: grid; gap: 2px; line-height: 1.1; }
.tt-num b { font-family: var(--font-display); font-size: 26px; font-weight: 800; }
.tt-num span { color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
/* Api rentetan digambar ikon situs (js/icons.js), bukan emoji 🔥: angka rentetan adalah
   isi, bukan hiasan, dan isi tidak boleh bergantung pada huruf emoji sistem. */
.tt-num span svg { color: #e8792b; }

.tt-level { display: grid; gap: 6px; }
.tt-level-bar {
  height: 8px; border-radius: 99px; background: var(--line); overflow: hidden;
}
.tt-level-bar i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--tt-accent, var(--accent)), var(--tt-accent-dark, var(--accent)));
  transition: width .4s ease;
}
.tt-where { margin: 0; color: var(--muted); font-size: 13px; }
.tt-cta { width: 100%; min-height: 48px; font-size: 16px; }
.tt-cta[disabled] { opacity: .55; cursor: not-allowed; }
.tt-quota { margin: 0; }

/* ---------------------------------------------------------- pemilih tingkat --- */

.tt-tiers {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tt-tiers::-webkit-scrollbar { display: none; }
.tt-tier {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--bg-card); color: inherit; font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer;
}
.tt-tier .tt-tier-n { color: var(--muted); font-weight: 800; }
.tt-tier.on { border-color: transparent; color: #fff; }
.tt-tier.on .tt-tier-n { color: rgba(255, 255, 255, .8); }
.tt-tier.locked { opacity: .6; }

/* -------------------------------------------------------------------- peta ---- */

/* Peta menggulir DI DALAM dirinya sendiri, bukan memanjangkan halaman: 13 anak tangga
   yang berjarak enak dilihat butuh 1010px, dan halaman setinggi itu berarti anak tangga
   tempat pemain berdiri (nomor 1, di dasar) selalu berada di luar layar saat halaman
   dibuka. Yang digulirkan js/teka-teki.js sesudah menggambar adalah kotak ini, ke ubin
   tempat pemain berdiri — sama seperti `_scrollToCurrent()` di aplikasi. */
.tt-map {
  position: relative; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  /* Tinggi tetap dalam piksel, bukan `dvh`: di sebagian peramban (dan di Chrome
     headless yang memotret halaman ini) `100dvh` bukan tinggi layar yang terlihat, dan
     kotak setinggi 878px di layar 844px berarti anak tangga paling bawah — tempat
     pemain berdiri — justru jatuh di luar layar. */
  height: 560px;
  -webkit-overflow-scrolling: touch;
}
/* Tinggi sebenarnya tangga — anak dari kotak yang menggulir. */
.tt-scroll { position: relative; height: 1010px; }
.tt-map-title {
  position: sticky; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent);
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.tt-map.light .tt-map-title { color: #14351f; text-shadow: 0 1px 2px rgba(255, 255, 255, .6); }

/* Jalur berkelok digambar satu SVG di belakang ubin — bukan 13 potong garis, supaya
   lengkungnya menyambung di antara dua ubin yang jaraknya tidak sama di layar sempit. */
.tt-path { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.tt-path path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 10; stroke-linecap: round; }
.tt-map.light .tt-path path { stroke: rgba(255, 255, 255, .75); }

.tt-tile {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); color: #16351f;
  border: 3px solid rgba(255, 255, 255, .75);
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22);
}
.tt-tile.done { background: var(--tt-accent-dark, #17804a); color: #fff; border-color: rgba(255, 255, 255, .9); }
.tt-tile.todo { background: rgba(255, 255, 255, .55); color: rgba(0, 0, 0, .55); }
/* Ubin tempat pemain berdiri: cincin kemajuan (conic-gradient) + denyut. Di app inilah
   penanda yang efeknya bertambah tiap tingkat; di sini tingkatnya menambah kelas fx*. */
.tt-tile.now {
  width: 58px; height: 58px; border: 0; background: #fff; color: #16351f; font-size: 17px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.tt-tile.now::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(var(--tt-accent, #2baf6a) calc(var(--tt-progress, 0) * 1turn),
    rgba(255, 255, 255, .45) 0);
}
.tt-tile.now::after {
  content: ''; position: absolute; inset: -14px; border-radius: 50%; z-index: -2;
  border: 2px solid var(--tt-accent, #2baf6a); opacity: .8;
  animation: ttPulse 2.4s ease-out infinite;
}
@keyframes ttPulse {
  0% { transform: scale(.86); opacity: .75; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}
.tt-tile .tt-pawn { width: 26px; height: 26px; display: block; }

/* Efek bertingkat, seperti di app: makin tinggi tempatnya makin meriah. Ditumpuk,
   bukan menggantikan — tingkat 8 memakai semuanya. */
.tt-map.fx3 .tt-tile.now { box-shadow: 0 8px 22px rgba(0, 0, 0, .3), 0 0 22px var(--tt-accent, #2baf6a); }
.tt-map.fx5 .tt-tile.now { animation: ttFloat 3.6s ease-in-out infinite; }
@keyframes ttFloat { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.tt-map.fx7 .tt-tile.now::after { animation-duration: 1.6s; border-style: dashed; }
.tt-map.fx8 .tt-tile.now { background: linear-gradient(135deg, #fff, #ffe9ff 60%, #e6f0ff); }

/* Kepingan latar: awan, pohon, bintang — satu kelas, isinya emoji per tingkat, dan
   gerakannya lambat supaya tidak menarik mata dari ubinnya. */
/* Emoji: rantai huruf yang sama dengan bendera negara (lihat app.css) supaya peramban
   yang tidak punya huruf emoji bawaan tidak menggambar kotak tahu. */
.tt-emo { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.tt-deco {
  position: absolute; z-index: 0; font-size: 26px; opacity: .55;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  animation: ttDrift 26s linear infinite; will-change: transform;
}
@keyframes ttDrift {
  0% { transform: translateX(-8%); }
  50% { transform: translateX(8%); }
  100% { transform: translateX(-8%); }
}
@media (prefers-reduced-motion: reduce) {
  .tt-tile.now::after, .tt-map.fx5 .tt-tile.now, .tt-deco { animation: none; }
}

/* Delapan tempat. Warnanya sama dengan kPuzzleTiers di aplikasi. */
.tt-map.t1 { --tt-accent: #2baf6a; --tt-accent-dark: #17804a; background: linear-gradient(180deg, #d8f3e2, #8fdcae); }
.tt-map.t2 { --tt-accent: #2e9bd6; --tt-accent-dark: #1b6fa3; background: linear-gradient(180deg, #d9eefb, #7cc4ea); }
.tt-map.t3 { --tt-accent: #7bc74d; --tt-accent-dark: #3f7f24; background: linear-gradient(180deg, #2e5b2a, #17361a); }
.tt-map.t4 { --tt-accent: #e59a1c; --tt-accent-dark: #a8650a; background: linear-gradient(180deg, #fbe6bd, #e8b96a); }
.tt-map.t5 { --tt-accent: #c9a227; --tt-accent-dark: #8a6b10; background: linear-gradient(180deg, #3a3222, #1f1b12); }
.tt-map.t6 { --tt-accent: #ff8a1e; --tt-accent-dark: #b85300; background: linear-gradient(180deg, #2a1636, #120a1c); }
.tt-map.t7 { --tt-accent: #5fd4e8; --tt-accent-dark: #2a93a8; background: linear-gradient(180deg, #123745, #0a1f28); }
.tt-map.t8 { --tt-accent: #b57bff; --tt-accent-dark: #7a3fd1; background: linear-gradient(180deg, #221347, #0d0722); }

.tt-locked { margin: 10px 2px 0; }
.tt-past { margin-top: 16px; }
.tt-past h2 { margin-bottom: 8px; }
.tt-run {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--line); text-align: left; width: 100%;
  background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit;
  font: inherit; cursor: pointer;
}
.tt-run:first-child { border-top: 0; }
.tt-run-txt { flex: 1; min-width: 0; }
.tt-run-txt b { display: block; font-size: 14px; }
.tt-run-txt span { color: var(--muted); font-size: 12px; }
.tt-run-pts { font-family: var(--font-display); font-weight: 800; }

/* ------------------------------------------------------------- layar soal ----- */

.tt-play { max-width: 620px; margin: 0 auto; display: grid; gap: 10px; }
.tt-stats { display: flex; align-items: center; gap: 16px; padding: 10px 14px; }
.tt-plevel { margin-left: auto; min-width: 120px; display: grid; gap: 5px; justify-items: end; }
.tt-plevel span { font-size: 12px; color: var(--muted); font-weight: 700; }
.tt-plevel .tt-level-bar { width: 120px; }

/* Gelembung kalimat maskot: di app RobotBuddy, di sini satu baris di atas papan —
   tokohnya sendiri tidak ikut, karena di layar 390px ia memakan tinggi yang dibutuhkan
   papan (lihat [[katuranga-game-screen-layout]]). */
.tt-say {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; font-size: 14px; font-weight: 600; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
}
.tt-say.good { border-color: #2baf6a; color: #17804a; }
.tt-say.bad { border-color: #e0483a; color: #b3251a; }

.tt-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.tt-acts .btn { min-height: 46px; }
.tt-out { display: grid; gap: 8px; }
.tt-home { justify-self: start; }

/* Petak yang ditunjuk petunjuk — warna cincin petunjuk memakai K.hint, bukan warna
   aksen (lihat [[katuranga-hint-ring-color]]). */
.board .sq.tt-hint::after {
  content: ''; position: absolute; inset: 8%; border-radius: 50%;
  border: 3px solid #f2b21a; pointer-events: none;
}

@media (min-width: 901px) {
  .tt-map { height: 640px; }

  /* ---------- layar soal di laptop: papan kiri, sisanya kanan ----------
     24 Sep 2026, ridwanyas: papan di web "kecil banget … padahal buka pakai laptop".
     Satu kolom selebar 620px berarti papan 512px dengan angka, kalimat maskot, dan
     tiga tombol bertumpuk di atas-bawahnya — sementara separuh layar di kiri dan kanan
     dibiarkan kosong. chess.com menaruh papan di kiri dan sisanya di panel kanan, dan
     begitu itu dilakukan tinggi layar tidak lagi dibagi dengan siapa pun: papan
     512 → 664px. Urutan DOM-nya tidak berubah, jadi di ponsel semuanya tetap bertumpuk
     seperti sedia kala.

     100px = bilah situs 57 + jarak atas/bawah kartu + sisa; papan berhenti di 760px. */
  .tt-play {
    --board-w: min(760px, calc(100vh - 100px));
    max-width: none; justify-content: center; align-items: start;
    grid-template-columns: minmax(0, var(--board-w)) minmax(280px, 340px);
    column-gap: 16px;
  }
  /* Papan memegang seluruh kolom kiri; semua yang lain berbaris di kolom kanan. Papan
     diberi rentang baris yang lebih panjang daripada jumlah kartunya supaya kartu yang
     muncul belakangan (#ttOut sesudah soal dijawab) tidak mendorongnya ke bawah. */
  .tt-play > .board-wrap { grid-column: 1; grid-row: 1 / span 6; max-width: var(--board-w); }
  .tt-play > :not(.board-wrap) { grid-column: 2; }
  /* Di kolom yang sempit, angka-angka dan tingkat tidak lagi muat dalam satu baris. */
  .tt-stats { flex-wrap: wrap; row-gap: 8px; }
  .tt-plevel { margin-left: 0; }
  .tt-home { justify-self: stretch; text-align: center; }
}

@media (max-width: 600px) {
  .tt-nums { gap: 14px; }
  .tt-num b { font-size: 22px; }
  .tt-stats { gap: 10px; padding: 8px 10px; }
  .tt-plevel, .tt-plevel .tt-level-bar { min-width: 86px; width: 86px; }
}