/* =========================================================================
   Item Drill, page styles (uses tokens from ../assets/theme.css)
   ========================================================================= */

.drill { padding-top: 34px; }

.best-pill {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .04);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
}

/* A way back to the game picker that is NOT a tab: the row below lists games,
   and a fifth pill there would read as one more game. */
.tabs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}

.tabs-back:hover,
.tabs-back:focus-visible {
  color: var(--accent);
}

/* ---------- bar ---------- */

.drill-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 16px;
}

.drill-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- data scope row (Drafting Skill brackets) ----------
   Sits on its own line above the question types, because it changes WHICH data
   the questions come from, not what they ask. One chip is always pressed, so
   the row has no empty state to advertise. */
.variants {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variants-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.variants-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Belum ada cakupan yang dipilih: barisnya harus terbaca sebagai hal yang belum
   selesai, sama seperti baris jenis soal yang kosong. */
.variants.is-empty .variants-label {
  color: var(--amber);
}

.variants.is-empty .variants-row {
  outline: 1px dashed rgba(200, 162, 90, .6);
  outline-offset: 7px;
  border-radius: var(--radius);
}

/* `display: flex` in theme.css beats the `hidden` attribute, so a game without
   question types has to say it explicitly. */
.chips[hidden] {
  display: none;
}

.progress {
  width: 170px;
  height: 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width .22s ease;
}

/* ---------- board ---------- */

.board {
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 26px;
}

/* ---------- start ---------- */

/* Satu kolom, di tengah kartu. Lebarnya sengaja dalam px, bukan `ch`: `ch`
   bergantung pada font yang sedang terpakai, jadi judul dan tombol bisa
   berhenti sejajar kalau font tampilan belum termuat atau diganti peramban.
   `align-self: center` dipakai eksplisit, kartunya flex-column, dan item
   ber-`max-width` di sumbu silang tidak selalu jatuh ke tengah di semua
   peramban kalau hanya mengandalkan `margin: auto`. */
.start {
  width: 100%;
  /* Lebih lebar dari 420px: tiga kotak langkah butuh ruang untuk berdiri
     berdampingan, dan judulnya tetap terbaca di tengah. */
  max-width: 740px;
  margin: auto;
  align-self: center;
  text-align: center;
  position: relative;
  isolation: isolate;
  padding: 4px 0;
}

.start > * { max-width: 100%; }

/* ---------- ilustrasi latar ----------
   Satu potret hero Dota dari CDN Valve (gambar yang sama dipakai halaman hero
   dan kuis), diburamkan dan diredupkan, bergerak sangat pelan. Ini pengganti
   GIF: efek "ilustrasi hidup" tanpa menambah berkas animasi ratusan KB. */
.start-art {
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  pointer-events: none;
  background-image: url("https://cdn.cloudflare.steamstatic.com/apps/dota2/images/dota_react/heroes/crops/axe.png");
  background-size: cover;
  background-position: center;
  filter: blur(2.5px) saturate(.9);
  opacity: .5;
  transform: scale(1.06);
  animation: start-drift 38s ease-in-out infinite alternate;
  /* Tepinya melebur ke latar, jadi yang terlihat cuma bercak ilustrasi di
     belakang judul, bukan potret berbentuk persegi. */
  -webkit-mask-image: radial-gradient(76% 72% at 50% 45%, #000 38%, transparent 100%);
  mask-image: radial-gradient(76% 72% at 50% 45%, #000 38%, transparent 100%);
}

/* Lapisan gelap di atas gambar supaya teksnya tetap terbaca; tanpa ini judul
   putih jatuh di bagian potret yang terang. */
.start-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 74% at 50% 45%, rgba(10, 14, 19, .3), rgba(10, 14, 19, .82) 86%);
}

@keyframes start-drift {
  from { transform: scale(1.06) translate3d(-1.4%, -1%, 0); }
  to { transform: scale(1.12) translate3d(1.4%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .start-art { animation: none; }
}

.howto-kicker {
  margin: 0 0 6px !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber) !important;
}

/* ---------- tiga kotak langkah ---------- */

.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  text-align: left;
}

.howto-step {
  display: grid;
  gap: 3px;
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(9, 13, 18, .62);
}

.howto-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--dim);
}

.howto-step b {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.howto-step em {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Langkah yang sedang ditunggu: bingkai amber, nomornya menyala. */
.howto-step.is-next {
  border-color: rgba(200, 162, 90, .65);
  background: rgba(200, 162, 90, .08);
}

.howto-step.is-next .howto-num { color: var(--amber); }

/* Langkah yang sudah selesai: nomornya jadi centang, teksnya meredup supaya
   mata pindah ke langkah berikutnya. */
.howto-step.is-done .howto-num {
  color: var(--live);
  letter-spacing: 0;
}

.howto-step.is-done b { color: var(--text-soft); }

.start-cta {
  margin-top: 18px;
  min-width: 220px;
}

.start-desc {
  margin: 8px auto 0 !important;
  max-width: 56ch;
}

.start h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.start .eyebrow { margin-bottom: 6px; }

.start p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.start-hint {
  margin: 16px 0 0 !important;
  font-size: 11.5px !important;
  color: var(--muted);
}

/* ---------- question ---------- */

.q-prompt {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}

.q-stage {
  display: grid;
  place-items: center;
  min-height: 168px;
  margin-bottom: 24px;
}

.q-icon {
  width: 108px;
  height: 108px;
  padding: 10px;
  object-fit: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
}

.q-name {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.12;
  text-align: center;
}

/* ---------- hero card as the question (Hero Memorize) ---------- */

/* The dota_react hero card is 256×144, so it is never given a square box: a
   contain-fit square would shrink it to a stamp and the recognition task would
   become a squint. */
.q-portrait {
  width: min(320px, 100%);
  aspect-ratio: 256 / 144;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
}

/* Attribute symbols are small square glyphs; the icon box suits them, they just
   do not need the padding an item icon gets. */
.q-icon--attr {
  width: 96px;
  height: 96px;
  padding: 18px;
}

/* A 12.5% slice of a hero card. The driver sets `background-size` and
   `background-position` inline (282.84% = 1/√8 of each side); this rule only
   decides the window the slice is seen through. */
.q-crop {
  width: min(300px, 100%);
  aspect-ratio: 256 / 144;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* The recipe AS the question (components → item): one icon per component, with
   ×N when the item is bought twice (Battle Fury is two Broadswords). */
.q-recipe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  max-width: 460px;
}

.q-recipe-part {
  position: relative;
  display: grid;
  place-items: center;
}

.q-recipe-part img {
  width: 76px;
  height: 76px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
}

.q-recipe-part i {
  position: absolute;
  right: -7px;
  bottom: -7px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  color: #0a0e13;
  background: var(--accent);
  border-radius: var(--radius);
}

/* ---------- options ---------- */

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.option {
  position: relative;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.option:hover:not([disabled]) {
  border-color: rgba(200, 162, 90, .55);
  background: var(--surface-hover);
  color: var(--text);
}

.option[disabled] { cursor: default; }

.option--icon {
  display: grid;
  place-items: center;
  padding: 12px;
  min-height: 100px;
}

.option--icon .key {
  position: absolute;
  top: 6px;
  left: 6px;
}

.option--icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  image-rendering: auto;
}

.option .key {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--dim);
}

/* ---------- hero stage and hero options (Counter Drill) ---------- */

.q-hero {
  display: grid;
  place-items: center;
  gap: 10px;
}

.q-hero img {
  width: 208px;
  height: 117px;
  object-fit: cover;
  object-position: center 22%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  box-shadow: var(--shadow);
}

.q-hero-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.1;
}

.q-hero-roles {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.option--hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
}

.option--hero img {
  width: 64px;
  height: 36px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

.option--hero .key {
  position: absolute;
  top: 6px;
  right: 8px;
}

.option--hero .name {
  font-size: 13.5px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- portrait & icon+name options (Hero Memorize) ---------- */

/* The answer is the PICTURE, so the name is only an aria-label and the tile
   carries no text. Landscape, because the source card is landscape. */
.option--portrait {
  display: grid;
  place-items: center;
  padding: 8px;
  min-height: 96px;
}

.option--portrait .key {
  position: absolute;
  top: 6px;
  left: 6px;
}

.option--portrait img {
  width: 100%;
  max-width: 168px;
  aspect-ratio: 256 / 144;
  object-fit: cover;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
}

/* Square icon that needs its label under it (attribute icons: four small
   symbols that mean nothing to a newcomer without the word). */
.option--icon-name {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 12px;
  min-height: 116px;
}

.option--icon-name .key {
  position: absolute;
  top: 6px;
  left: 6px;
}

.option--icon-name img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.option--icon-name .name {
  font-size: 12px;
  color: var(--text-soft);
}

/* ---------- recipe stage ---------- */

.recipe-parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.recipe-part {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 108px;
}

.recipe-part img {
  width: 62px;
  height: 62px;
  padding: 6px;
  object-fit: contain;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}

.recipe-part span {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
}

/* A stage that is just a mode name, no portrait to give it height. */
.q-name--sm {
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: .01em;
}

.option.is-correct {
  border-color: var(--good);
  background: var(--good-soft);
  box-shadow: 0 0 0 3px rgba(110, 231, 168, .16);
}

.option.is-wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.option.is-dim { opacity: .42; }

/* ---------- feedback ---------- */

.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line);
}

.feedback-text { font-size: 13px; color: var(--ink-soft); }

.feedback-text b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}

.feedback-text span { color: var(--muted); }

/* ---------- result ---------- */

.result {
  margin: auto;
  width: 100%;
  text-align: center;
}

.verdict {
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.verdict--good { background: var(--good-soft); border-color: rgba(110, 231, 168, .55); color: var(--good); }
.verdict--mid { background: rgba(200, 162, 90, .14); border-color: rgba(200, 162, 90, .55); color: var(--amber); }
.verdict--bad { background: var(--bad-soft); border-color: rgba(255, 122, 107, .55); color: var(--bad); }

.result-score {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 86px);
  line-height: .95;
  letter-spacing: -.02em;
}

.result-score small {
  font-size: .38em;
  color: var(--muted);
  letter-spacing: 0;
}

.result-line {
  margin: 12px 0 24px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}

.result-line strong { color: var(--accent); }

.result-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* ---------- typed answer (Skill Memorize) ---------- */

.q-type {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.q-input {
  flex: 1 1 240px;
  max-width: 420px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.q-input::placeholder {
  color: var(--dim);
  font-weight: 500;
}

.q-input:focus-visible {
  outline: none;
  border-color: rgba(200, 162, 90, .55);
  background: rgba(200, 162, 90, .06);
}

/* A typed question has no option row to mark, so the box carries the verdict. */
.q-input.is-correct {
  border-color: var(--good);
  background: var(--good-soft);
  box-shadow: 0 0 0 3px rgba(110, 231, 168, .16);
}

.q-input.is-wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
}

/* Disabled inputs dim by default, and dimming is exactly what would hide it. */
.q-input[disabled] {
  opacity: 1;
  -webkit-text-fill-color: var(--text);
}

/* An endless run ends on the player's terms, so the bar carries the way out. */
.drill-stop {
  white-space: nowrap;
}

/* ---------- chip colour = level of the question type ---------- */

.chip[data-level] {
  display: inline-flex;
  align-items: center;
}

.chip-dot {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--chip-level, var(--muted));
  flex: none;
}

.chip[data-level="easy"] { --chip-level: var(--good); }
.chip[data-level="medium"] { --chip-level: var(--amber); }
.chip[data-level="hard"] { --chip-level: var(--bad); }

/* ---------- kelompok jenis soal per tingkat -------------------------------
   Warna titik saja tidak cukup: orang tidak tahu bahwa "Ikon → nama" itu mudah
   dan "ketik nama" itu sulit. Tiap tingkat sekarang punya judul di atas
   kelompoknya. Warna tetap dipakai, tapi sebagai penegas, bukan satu-satunya
   penanda. */

/* Tiga kolom, satu per tingkat. Sebagai baris flex biasa, kelompoknya
   berserak: MUDAH di tepi kiri, SEDANG di tengah baris, SULIT terlempar ke
   baris berikutnya. Grid membuat judul ketiganya sejajar. */
.chips.is-grouped {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
  gap: 10px 20px;
  /* Baris sendiri di dalam .drill-bar: kalau ikut berbagi baris dengan tombol
     Mode, tiap kolom cuma dapat ~190px dan chip-nya menumpuk satu per satu. */
  flex: 1 1 100%;
}

.chip-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.chip-group[data-level="easy"] { --chip-level: var(--good); }
.chip-group[data-level="medium"] { --chip-level: var(--amber); }
.chip-group[data-level="hard"] { --chip-level: var(--bad); }

.chip-group-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chip-level, var(--muted));
}

.chip-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Chip di dalam kelompok dibuat lebih rapat: bar-nya tetap terpakai selama
   run berjalan (jam, poin, tombol), jadi menambah 100px tinggi di situ
   memakan ruang soal. */
.chip-group .chip {
  padding: 5px 10px;
  font-size: 11px;
}

/* ---------- papan skor sebagai dialog ------------------------------------ */

html.mg-modal-open { overflow: hidden; }

.mg-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
}

.mg-modal[hidden] { display: none; }

.mg-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 9, .74);
  backdrop-filter: blur(2px);
}

.mg-modal-box {
  position: relative;
  width: min(600px, 100%);
  max-height: min(84vh, 680px);
  overflow-y: auto;
  padding: 20px 20px 16px;
  border: 1px solid #05070a;
  border-radius: var(--radius-lg);
  /* Batu yang sama dengan bar atas, tapi di sini butirannya bergerak pelan —
     permukaannya jadi terbaca sebagai air, bukan batu diam. Panel di dalamnya
     ikut transparan supaya teksturnya tidak menumpuk dua kali. */
  background-color: #0d1318;
  background-image:
    url("../../assets/brand/bar-noise.webp"),
    radial-gradient(140% 90% at 15% 0%, rgba(110, 160, 200, .13), rgba(110, 160, 200, 0) 62%),
    linear-gradient(180deg, rgba(30, 39, 49, .98) 0%, rgba(17, 23, 30, .99) 58%, rgba(11, 16, 21, 1) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 128px 128px, 220% 220%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 30px 70px rgba(0, 0, 0, .7);
  animation: mg-water 28s ease-in-out infinite alternate;
}

/* Gerakannya bolak-balik, bukan memutar: ubin noise berpindah tepat satu
   petak (128px) lalu kembali, jadi tidak ada jahitan yang melompat, dan
   kilau cahayanya ikut bergeser seperti pantulan di permukaan air.
   Latar belakang tidak ikut tergulir saat isi dialog di-scroll (bawaan
   `background-attachment: scroll`), jadi airnya diam di tempat sementara
   daftar skor bergerak di atasnya. */
@keyframes mg-water {
  from {
    background-position: 0 0, 10% 6%, 50% 0;
  }
  to {
    background-position: 128px 96px, 90% 94%, 50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mg-modal-box { animation: none; }
}

/* Kartu papan sudah punya bingkai sendiri di halaman; di dalam dialog bingkai
   itu jadi bingkai kedua. */
.mg-modal-body .leaderboard {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Tombol tutup duduk di pojok kanan atas, tepat di atas label musim. */
.mg-modal-body .leaderboard-head { padding-right: 34px; }

.mg-modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mg-modal-close:hover,
.mg-modal-close:focus-visible {
  color: var(--text);
  border-color: var(--line);
  background: rgba(255, 255, 255, .06);
}

.chip[data-level][aria-pressed="true"] {
  color: var(--chip-level);
  border-color: var(--chip-level);
  background: rgba(255, 255, 255, .05);
}

.chip[data-level][aria-pressed="false"] .chip-dot { opacity: .55; }

/* Nothing switched on: the row itself has to look unfinished, or the disabled
   Start button reads as a broken button rather than as "choose something". */
.chips.is-empty {
  position: relative;
  outline: 1px dashed rgba(200, 162, 90, .6);
  outline-offset: 7px;
  border-radius: var(--radius);
  transition: outline-color .25s ease;
}

/* Saat cincin menyala, garis putus-putusnya memudar: satu garis saja yang
   bergerak, tidak ada dua garis bertumpuk. Aturan yang sama untuk tombol mode,
   supaya cincinnya tidak bertumpuk dengan garis putus-putus di tiap tombol. */
.drill.is-nudge .chips.is-empty { outline-color: transparent; }

.drill.is-nudge .run-mode.is-empty .mode-tab {
  border-style: solid;
  border-color: rgba(200, 162, 90, .3);
  transition: border-color .25s ease;
}

/* Cincin di tempat yang persis sama dengan garis putus-putus itu, supaya
   warnanya bisa dianimasikan tanpa mengubah ketebalan outline. */
.chips.is-empty::after,
.run-mode-tabs::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  pointer-events: none;
}

/* Kursor menyentuh panel game padahal belum ada pilihan: kelompok mode dan
   kotak jenis soal berdenyut. Ini bukan hiasan, tombol mulai memang sengaja
   mati sampai satu mode dan satu jenis soal dinyalakan, jadi mata diarahkan
   ke dua tempat itu. Tiap kelompok hanya menyala selama dirinya masih kosong. */
.drill.is-nudge .chips.is-empty::after,
.drill.is-nudge .run-mode.is-empty .run-mode-tabs::after {
  animation: chipsNudge 1.1s ease-in-out infinite;
}

@keyframes chipsNudge {
  0%, 100% {
    border-color: rgba(200, 162, 90, .3);
    box-shadow: 0 0 0 0 rgba(200, 162, 90, 0);
  }
  50% {
    border-color: rgba(200, 162, 90, .95);
    box-shadow: 0 0 0 1px rgba(200, 162, 90, .12), 0 0 12px rgba(200, 162, 90, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drill.is-nudge .chips.is-empty::after,
  .drill.is-nudge .run-mode.is-empty .run-mode-tabs::after {
    animation: none;
    border-color: rgba(200, 162, 90, .9);
    box-shadow: 0 0 0 1px rgba(200, 162, 90, .14);
  }
}

/* Same instruction, repeated where the eye already is (beside the chips). */
#progress-label.is-warn {
  color: var(--amber);
  font-weight: 800;
}

/* The speaker sits with the stop button: both act on the run, not on a type. */
.drill-sound {
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1;
}

/* The glyph is a colour emoji on some systems and a monochrome one on others,
   so the ON state also has to read from the border. */
.drill-sound[aria-pressed="true"] {
  border-color: rgba(200, 162, 90, .55);
  color: var(--amber);
}

.drill-sound[aria-pressed="false"] {
  border-color: var(--line);
  color: var(--dim);
}

.level-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0 0 20px !important;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}

.level-legend .lv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.level-legend .lv::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.level-legend .lv--easy { color: var(--good); }
.level-legend .lv--medium { color: var(--amber); }
.level-legend .lv--hard { color: var(--bad); }

/* Nilai per soal di samping nama tingkat (mode Kompetitif saja). Warnanya
   mengikuti tingkatnya, tapi tidak berteriak: yang dibaca pertama tetap poin. */
.level-legend .lv-pay {
  font-family: var(--font-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--text-soft);
}

/* Aturan main Kompetitif di kartu start, satu paragraf, bukan daftar. */
.start .start-rules {
  max-width: 100%;
  margin: 0 0 18px !important;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* The alert replaces the description line while nothing is picked. */
.start .start-alert {
  display: inline-block;
  margin: 0 0 20px !important;
  padding: 12px 16px;
  border: 1px solid rgba(200, 162, 90, .6);
  border-radius: var(--radius);
  background: rgba(200, 162, 90, .12);
  color: var(--amber);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

/* ---------- question-type actions (all / clear) ---------- */

.drill-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ---------- multi-answer questions ---------- */

.options--many {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.option.is-picked {
  border-color: var(--accent);
  background: rgba(200, 162, 90, .13);
  box-shadow: 0 0 0 3px rgba(200, 162, 90, .14);
}

.option.is-picked .key {
  border-color: var(--accent);
  color: var(--accent);
}

/* A right option the player did not tick: correct, but not found. */
.option.is-correct.is-missed {
  border-style: dashed;
  box-shadow: none;
}

/* A multi answer has to say WHAT was off, not only that something was. The badges
   sit top-right so they never fight the 1–8 key in the top-left corner. */
.option-flag {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #0a0e13;
  background: var(--accent);
  border-radius: var(--radius);
}

.option-flag--wrong {
  background: var(--bad);
}

.feedback-flag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  vertical-align: baseline;
}

.feedback-flag--wrong {
  border-color: var(--bad);
  color: var(--bad);
}

.multi-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.multi-hint {
  font-size: 11.5px;
  color: var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width: 560px) {
  .drill { padding-top: 22px; }
  .board { padding: 18px; min-height: 400px; }
  .options { grid-template-columns: 1fr; }
  .options--many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options--many .option--icon { min-height: 84px; }
  .options--many .option--icon img { width: 60px; height: 60px; }
  .options--many .option--portrait { min-height: 66px; padding: 5px; }
  .options--many .option--icon-name { min-height: 92px; padding: 9px; }
  .options--many .option--icon-name img { width: 44px; height: 44px; }
  .options--many .option--icon-name .name { font-size: 11px; }
  .q-portrait { width: min(260px, 100%); }
  .q-crop { width: min(240px, 100%); }
  .q-icon { width: 88px; height: 88px; }
  .q-recipe { gap: 9px; max-width: 100%; }
  .q-recipe-part img { width: 58px; height: 58px; }
  .progress { width: 110px; }
  .drill-progress { font-size: 11px; }
  .drill-actions { margin-left: 0; }
  .mode-tab { padding: 9px 18px; font-size: 10px; }
}

/* ---------- latihan / kompetitif ---------- */

/* Pilihan mode berdiri di barisnya sendiri, di TENGAH bar: ini keputusan yang
   mengubah arti seluruh sesi (streak vs poin berjam), jadi ia bukan chip di
   antara jenis soal. */
.run-mode {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.run-mode-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.run-mode-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

.mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .03);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.mode-tab:hover,
.mode-tab:focus-visible {
  color: var(--text);
  border-color: var(--text-soft);
}

/* Belum dipilih: garis putus-putus amber, sama bahasanya dengan baris jenis
   soal yang masih kosong, "ada yang harus kamu tentukan di sini". */
.run-mode.is-empty .mode-tab {
  border-style: dashed;
  border-color: rgba(200, 162, 90, .55);
}

/* Latihan: biru tenang. Kompetitif: amber penuh dengan teks gelap.
   Dua warna berbeda supaya keadaannya terbaca dari sudut mata, bukan dari
   membaca labelnya. */
.mode-tab[data-run-mode="training"][aria-pressed="true"] {
  border-color: #7aa2ff;
  background: rgba(122, 162, 255, .18);
  color: #d8e3ff;
  box-shadow: 0 0 0 1px rgba(122, 162, 255, .4), 0 12px 28px -20px #7aa2ff;
}

.mode-tab[data-run-mode="competitive"][aria-pressed="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, #ffc266, var(--accent));
  color: #1a1206;
  box-shadow: 0 0 0 1px rgba(200, 162, 90, .6), 0 14px 30px -14px rgba(200, 162, 90, .85);
}

/* Jam + poin: satu baris sendiri di bawah chip. Rata penuh supaya bar waktunya
   bisa dibaca dari sudut mata tanpa meninggalkan soal. */
.run-clock {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.run-clock[hidden] { display: none; }

.run-clock-seconds {
  min-width: 46px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.run-clock-track {
  flex: 1 1 auto;
  height: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
}

.run-clock-track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transition: width .12s linear;
}

.run-clock.is-low .run-clock-track i { background: var(--bad); }
.run-clock.is-low .run-clock-seconds { color: var(--bad); }

.run-clock-points {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Catatan di bawah hasil run: status kirim skor, bukan bagian dari skor. */
.result-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.result-note.is-good { color: var(--good); }
.result-note.is-bad { color: var(--bad); }
.result-note.is-mid { color: var(--amber); }
.result-note.is-dim { color: var(--dim); }

/* Ajakan masuk Steam: instruksi, bukan hiasan, ia muncul HANYA saat pengunjung
   belum masuk, dan hanya setelah papan berhasil dibaca. */
.board-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 7px 10px;
  /* Pita kiri + tint, sama seperti catatan di panel Alat Bantu dan kartu
     pengunjung. Kotak berbingkai penuh di sini terbaca sebagai komponen lain. */
  border: 0;
  border-left: 2px solid var(--amber);
  border-radius: 0;
  background: rgba(200, 162, 90, .09);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-soft);
}

.board-auth[hidden] { display: none; }

.board-login {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 162, 90, .5);
  white-space: nowrap;
}

.board-login:hover,
.board-login:focus-visible {
  color: #ffd08a;
}

/* Versi di kartu start: sebaris dengan hint, tidak menggeser tombol Start. */
.start .start-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 8px;
  margin: -6px 0 0 !important;
  font-size: 12px;
  color: var(--muted);
}

.start .start-auth[hidden] { display: none; }

/* ---------- board + papan skor ---------- */

.drill-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px) {
  .drill-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Permukaan batu, resep yang sama dengan bar atas global: tile noise 128px di
   atas gradien gelap, bingkai hitam, dan garis terang tipis di bibir atas.
   Papan ini sekarang terasa satu keluarga dengan bar navigasi, bukan kartu
   generik. `.card` memberi gradien rata, jadi aturan ini menimpanya. */
.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #05070a;
  border-radius: var(--radius);
  background-color: #0d1318;
  background-image:
    url("../../assets/brand/bar-noise.webp"),
    linear-gradient(180deg, rgba(30, 39, 49, .98) 0%, rgba(17, 23, 30, .99) 58%, rgba(11, 16, 21, 1) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 128px 128px, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 0 var(--line),
    0 10px 26px rgba(0, 0, 0, .45);
}

.leaderboard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Judul papan memakai bahasa yang sama dengan panel "Alat Bantu" dan kartu
   pengunjung: huruf mono kecil, renggang, amber. Sebelumnya abu-abu, jadi
   papannya terbaca seperti komponen dari situs lain yang ditempel di sini. */
.leaderboard-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
}

.leaderboard-season {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.leaderboard-body { min-height: 64px; }

.leaderboard-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.leaderboard-note.is-bad { color: var(--bad); }
.leaderboard-note.is-dim { color: var(--dim); }

/* Satu bingkai rambut untuk seluruh papan, satu garis pemisah antar baris:
   bentuk tabel yang dipakai di mana-mana di situs ini, bukan deretan kartu
   bulat yang mengambang. */
.board-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Sedikit lebih gelap dari batu di belakangnya, tapi tetap transparan supaya
     teksturnya kelihatan menembus. */
  background: rgba(6, 9, 13, .42);
  overflow: hidden;
}

.board-row {
  display: grid;
  grid-template-columns: minmax(30px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 0;
}

.board-row + .board-row { border-top: 1px solid rgba(43, 53, 64, .6); }

.board-row:hover { background: rgba(255, 255, 255, .03); }

/* Baris pemain sendiri: pita amber di tepi kiri, seperti baris yang sedang
   berbunyi di daftar lagu. */
.board-row.is-me {
  background: linear-gradient(90deg, rgba(200, 162, 90, .16), rgba(200, 162, 90, .03));
  box-shadow: inset 2px 0 0 var(--amber);
}

.board-place {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* Tiga besar: nomornya tetap ada, bintangnya di samping, ikon saja tidak
   mengurutkan, dan nomor saja tidak menandai juara. */
.board-row:nth-child(-n + 3) .board-place-num {
  color: var(--amber);
  font-weight: 700;
}

.board-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* Nama + medali rank Dota dalam satu baris; medali tidak boleh mengecil saat
   namanya panjang (16px tetap 16px) dan nama yang memendek dengan elipsis.
   Ukuran & warna medali ada di `assets/theme.css` (dipakai juga oleh hub). */
.board-name-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.board-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Setup soal yang dipakai untuk skor itu, kecil, karena yang dibaca pertama
   adalah nama dan poin. */
.board-mode {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.board-points {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.board-sep {
  margin: 8px 0 2px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.leaderboard-foot {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  line-height: 1.5;
  color: var(--dim);
}