/* Balap Warna — gaya khusus game ini (kamera iso Sirkuit Kilat, Pengecat + gokar krem). Satuan layar pakai var(--u);
   keyframes bersama ada di ../style.css.
   Bidang tanah (.rw-plane) diberi matrix iso dari warna.js; ukuran di dalamnya dalam px lokal = satuan dunia × 20.
   Semua pola tanah harus membagi PERIOD (4 satuan = 80px lokal): ubin rumput 80 · garis jalur 40 · kerb 20.
   .rw dipanjangkan ke atas oleh warna.js sampai di belakang bilah atas (bilah atas z-index 3 melayang di atasnya). */

#app.t-car { background: #adc860; } /* = warna rumput vinyl (tanah-iso.json) */

.rw { position: absolute; inset: 0; overflow: hidden; touch-action: none; } /* tap ditangani di pointerdown (warna.js) */

/* ---------- bidang tanah iso ---------- */
.rw-plane { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; z-index: 0; }
.rw-plane > * { position: absolute; }
.rw-ground { background: #adc860 url(../../assets/sprites/warna/tanah/rumput-vinyl.webp) 0 0 / 80px 80px; } /* rumput tampak atas 4×4 satuan, di luar pita iso */
/* pita jalan iso (ubin per periode, posisi layar dari warna.js) di antara rumput dan lapisan atas bidang (garis, jalur, panah) */
.rw-plate { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.rw-plate img { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.rw-line { background: repeating-conic-gradient(#26314d 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.rw-line[hidden] { display: none; }

/* jalur bisa ditap (.f) tapi tanpa cincin/lompatan fokus bersama */
.rw-lane { background: transparent; }
.rw-lane.f.on { transform: none; box-shadow: none; }
.rw-lane.tap { animation: rw-lane-tap .35s ease-out; } /* kilasan tanda tap diterima */
@keyframes rw-lane-tap { from { background: rgba(255, 255, 255, .28); } to { background: transparent; } }

/* panah bantuan di aspal jalur target, menunjuk ke depan */
.rw-arrow { animation: rw-nudge .55s ease-in-out infinite alternate; }
.rw-arrow[hidden] { display: none; }
.rw-arrow svg { display: block; width: 100%; height: 100%; }

/* ---------- sprite: gokar & gerbang (z-index = titik kaki di layar) ---------- */
.rw-sprites { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.rw-sprites img { display: block; user-select: none; -webkit-user-drag: none; }

.rw-car { position: absolute; left: 0; top: 0; transition: transform .2s cubic-bezier(.25, 1.35, .5, 1); }
.rw-body {
  position: relative;
  transform-origin: 50% 85%;
  animation: rw-bob .16s ease-in-out infinite alternate;
  transition: rotate .18s ease-out;
}
.rw-shadow { /* bayangan di aspal: di luar .rw-body supaya tidak ikut goyang/lompat */
  position: absolute;
  background: rgba(30, 30, 50, .3);
  border-radius: 50%;
  filter: blur(calc(var(--u) * .35));
}
.rw-kart, .rw-roll { position: absolute; inset: 0; width: 100%; height: 100%; }
.rw-body.tilt-up { rotate: -5deg; }
.rw-body.tilt-down { rotate: 5deg; }
.rw-body.painted { animation: pop .5s, rw-bob .16s ease-in-out infinite alternate; }
.rw-body.oops { animation: rw-wobble .55s ease-in-out, rw-bob .16s ease-in-out infinite alternate; }
.rw-body.honk { animation: rw-squash .35s ease-out, rw-bob .16s ease-in-out infinite alternate; }
.rw.stopped .rw-body { animation-duration: .5s; }

.rw-prop { position: absolute; left: 0; top: 0; }
.rw-prop[hidden] { display: none; }
/* tribun = kelompok: gambar benda + penonton + bayangannya (posisi dalam % kotak benda) */
.rw-prop.group > img, .rw-prop.group > i { position: absolute; }
.rw-fan-shadow { background: rgba(30, 30, 50, .25); border-radius: 50%; filter: blur(calc(var(--u) * .2)); animation: none; }
.rw.cheer .rw-fan-shadow { animation: rw-fan-shadow .6s ease-in-out infinite alternate; }
.rw-prop.group > .base { inset: 0; width: 100%; height: 100%; }
.rw-fan { transform-origin: 50% 96%; animation: rw-fan-bob .6s ease-in-out infinite alternate; }
.rw.cheer .rw-fan { animation-name: rw-fan-cheer; }
.rw-gate { position: absolute; left: 0; top: 0; }
.rw-gate img { width: 100%; height: 100%; transform-origin: 50% 71.6%; } /* 71.6% = titik kaki 943/1317 */
.rw-gate.hint img { animation: rw-glow .7s ease-in-out infinite alternate; }
.rw-gate.hit img { animation: rw-burst .5s ease-out forwards; }
/* cadangan kalau pewarnaan gagal: bentuk warna polos (gerbang krem tidak boleh tampil) */
.rw-gate.flat i {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 22%;
  bottom: 28%;
  background: var(--c);
  border: calc(var(--u) * .4) solid var(--ink);
  border-radius: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * .8) calc(var(--u) * .8);
}
.rw-gate.flat.hit i { animation: rw-burst .5s ease-out forwards; }

/* cipratan cat salah di bodi gokar (lapisan cat + kilap, kanvas sama dengan gokar) */
.rw-splat, .rw-gloss { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.rw-body.splatted .rw-splat, .rw-body.splatted .rw-gloss { opacity: 1; transition-duration: .12s; }

.rw-honk { /* gelembung "TIN TIN!" — pil permukaan design system */
  position: absolute;
  left: 58%;
  top: 4%;
  padding: calc(var(--ds-u) * .3) calc(var(--ds-u) * 1.4);
  background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2));
  color: var(--ds-ink);
  border-radius: var(--ds-r-pill);
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-soft);
  font-size: calc(var(--ds-u) * 2.3);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}
.rw-honk.show { animation: rw-honk .75s ease-out; }

/* asap knalpot: lahir 0,18 satuan (skala .3 dari 0,6), membesar, ke belakang gokar sambil naik, memudar 0,6 dtk */
.rw-smoke { position: absolute; pointer-events: none; opacity: 0; animation: rw-smoke .6s ease-out forwards; }
@keyframes rw-smoke {
  from { opacity: .85; transform: translate(0, 0) scale(.3) rotate(var(--r)); }
  to { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1) rotate(calc(var(--r) + 40deg)); }
}

.rw-puff {
  position: absolute;
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  translate: -50% -50%;
  animation: rw-puff .6s ease-out forwards;
}

.rw-drop {
  position: absolute;
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  border-radius: 50%;
  background: var(--c);
  border: calc(var(--u) * .25) solid rgba(38, 49, 77, .5);
  translate: -50% -50%;
  animation: rw-drop .75s ease-out forwards;
}

/* ---------- banner soal (bentuk .ds-callout — gelembung helper tingkat + pil teks; kelas .ds-callout tidak dipakai karena
   gaya `.ds-callout b` bentrok dengan kata tebal di dalam soal) ----------
   Gelembung = helper tingkat yang sedang dimainkan dengan cincin warna tingkat (--lv). Ketuk banner = ulangi instruksi. */
.rw-banner {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * .6);
  translate: -50% 0;
  z-index: 2;
  display: flex;
  align-items: center;
  font-size: calc(var(--ds-u) * 3.8);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.rw-banner:empty { display: none; }
.rw.lanes-4 .rw-banner { font-size: calc(var(--ds-u) * 3.4); }
.rw-banner.new { animation: pop .5s; }
.rw-helper {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center;
  width: calc(var(--ds-u) * 7.6); height: calc(var(--ds-u) * 7.6); border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 calc(var(--ds-u) * .5) var(--lv, var(--ds-sel)), var(--ds-sh-soft);
}
.rw-helper img { width: 78%; height: 78%; object-fit: contain; }
.rw-say {
  display: flex; align-items: center; gap: calc(var(--ds-u) * .9);
  margin-left: calc(var(--ds-u) * -1.8);
  padding: calc(var(--ds-u) * .8) calc(var(--ds-u) * 3) calc(var(--ds-u) * .8) calc(var(--ds-u) * 3);
  border-radius: 0 var(--ds-r-pill) var(--ds-r-pill) 0;
  background: linear-gradient(180deg, var(--ds-surf), var(--ds-surf-2));
  color: var(--ds-ink); font-weight: 700;
  box-shadow: inset 0 0 0 var(--ds-rim) #fff, var(--ds-sh-soft);
}
.rw-say b { color: var(--ds-ink); }
/* tingkat 3: gambar benda clay (sprites/warna/benda; rasio asli) — cadangan emoji .rw-thing-e */
.rw-thing { display: block; height: 1.45em; width: auto; max-width: 2.2em; object-fit: contain; }
.rw-thing-e { font-size: 1.35em; line-height: 1; }
/* tingkat 4: campur warna — gumpalan cat + nama */
.rw-blob {
  display: inline-block;
  width: 1.1em;
  height: 1em;
  background: var(--c);
  border: calc(var(--ds-u) * .3) solid var(--ds-ink);
  border-radius: 55% 45% 50% 60%;
}
.rw-blob + span { font-size: .8em; margin-left: calc(var(--ds-u) * -.4); }
.rw-op { color: var(--ds-ink-2); }
.rw-q {
  display: inline-grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  border: calc(var(--ds-u) * .3) dashed var(--ds-ink-2);
}
/* tingkat 4: baca kata — huruf besar, tinta netral (bukan warnanya sendiri) */
.rw-banner.k-read .rw-say > span { font-size: .7em; color: var(--ds-ink-2); }
.rw-read { font-size: 1.35em; letter-spacing: .04em; }

@keyframes rw-bob { from { translate: 0 0; } to { translate: 0 calc(var(--u) * -.25); } }
@keyframes rw-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 50% { rotate: 5deg; } 75% { rotate: -3deg; } }
@keyframes rw-squash { 0%, 100% { scale: 1; } 35% { scale: 1.07 .9; } 70% { scale: .97 1.04; } }
@keyframes rw-honk { 0% { opacity: 1; scale: .5; } 20% { scale: 1.12; } 75% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes rw-puff { to { transform: translate(calc(var(--u) * -5), calc(var(--u) * 2.5)) scale(1.8); opacity: 0; } }
@keyframes rw-drop { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes rw-burst { to { scale: 1.3 1.1; opacity: 0; } }
@keyframes rw-glow {
  from { scale: 1; filter: drop-shadow(0 0 calc(var(--u) * .4) #ffd21f); }
  to { scale: 1.08; filter: drop-shadow(0 0 calc(var(--u) * 1.4) #ffd21f); }
}
@keyframes rw-fan-bob { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -4%; rotate: 3deg; } }
@keyframes rw-fan-shadow { from { scale: 1; opacity: 1; } to { scale: .7; opacity: .6; } }
@keyframes rw-fan-cheer { from { translate: 0 0; scale: 1 .94; } to { translate: 0 -22%; scale: .96 1.06; } }
@keyframes rw-nudge { from { translate: 0 0; } to { translate: 16px 0; } }