/* ==========================================================================
   Jago Matematika — sistem desain
   Token warna, komponen, dan gerak. Mendukung terang/gelap + tema Telegram.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #EEF3FF;
  --bg-2: #F7F9FF;
  --surface: #FFFFFF;
  --surface-2: #F3F6FE;
  --surface-3: #E8EEFC;
  --line: #DDE4F5;
  --ink: #16204A;
  --ink-2: #4C5B87;
  --ink-3: #8592B8;

  --brand: #4C6FFF;
  --brand-dark: #3355E0;
  --brand-soft: #E4EAFF;
  --brand-ink: #2D48B8;

  --op-add: #18B87B;
  --op-add-soft: #DDF6EC;
  --op-add-ink: #0C7A50;
  --op-sub: #3BA3F5;
  --op-sub-soft: #DEEFFE;
  --op-sub-ink: #16679F;
  --op-mul: #FF9A1F;
  --op-mul-soft: #FFEFD9;
  --op-mul-ink: #A45B00;
  --op-div: #A56BFF;
  --op-div-soft: #EEE4FF;
  --op-div-ink: #6B34C4;
  /* Warna bersama untuk topik di luar empat operasi (js/topik/). */
  --op-topik: #E0559A;
  --op-topik-soft: #FCE4F0;
  --op-topik-ink: #A3236A;

  --ok: #18B87B;
  --ok-soft: #DDF6EC;
  --ok-ink: #0C7A50;
  --bad: #F4563B;
  --bad-soft: #FFE3DE;
  --bad-ink: #B7301A;
  --warn: #F5A524;
  --warn-soft: #FFF1D6;
  --warn-ink: #96610A;
  --gold: #FFB800;

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --shadow-1: 0 1px 2px rgba(22, 32, 74, .06), 0 4px 12px rgba(22, 32, 74, .06);
  --shadow-2: 0 2px 6px rgba(22, 32, 74, .07), 0 14px 34px rgba(22, 32, 74, .12);
  --shadow-press: 0 1px 2px rgba(22, 32, 74, .10);

  --viz-1: #4C6FFF;
  --viz-2: #FF9A1F;
  --viz-line: #C6D1EC;
  --viz-muted: #8592B8;
  --viz-ink: #16204A;
  --viz-bg: #FFFFFF;
  --viz-cross: #D93025;

  --mascot-skin: #FCDDC4;
  --mascot-skin-2: #EDB894;
  --mascot-skin-3: #C98A66;
  --mascot-shine: rgba(255, 255, 255, .6);
  --mascot-shadow: rgba(22, 32, 74, .16);
  --mascot-star: #FFB800;
  --mascot-spark: #FFC23D;
  --mascot-drop: #8AD3FF;
  --mascot-drop-2: #3E9FE6;
  --mascot-mark: #4C6FFF;
  --mascot-pop: #FF7A3D;
  --mascot-cloud: #E4E9F7;
  --mascot-cloud-2: #9AA6CC;
  --mascot-bubble: #FFFFFF;
  --buddy-koko-1: #45D0C4;
  --buddy-koko-2: #1EA2AE;
  --buddy-koko-3: #12707C;
  --buddy-button: #FFE7A3;
  --buddy-peci-1: #3A416E;
  --buddy-peci-2: #191E3D;
  --buddy-peci-3: #0E122C;
  --buddy-peci-band: #59628F;
  --buddy-pants: #34437F;
  --buddy-pants-2: #222D5E;
  --buddy-shoe: #2A2F52;
  --buddy-hijab-1: #FFC4DD;
  --buddy-hijab-2: #F590BF;
  --buddy-hijab-3: #CF5F97;
  --buddy-ciput: #FFF0F6;
  --buddy-gamis-1: #B39BFF;
  --buddy-gamis-2: #8869F3;
  --buddy-gamis-3: #5F46D1;
  --buddy-gamis-trim: #FFD3E7;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .16s;
  --dur-2: .26s;
  --dur-3: .44s;

  --header-h: 58px;
  --nav-h: 62px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0C1230;
  --bg-2: #111A3E;
  --surface: #182150;
  --surface-2: #1F2A60;
  --surface-3: #26336F;
  --line: #2D3A78;
  --ink: #EDF2FF;
  --ink-2: #AEBCEC;
  --ink-3: #7E8DC4;

  --brand: #7A95FF;
  --brand-dark: #5C7BFF;
  --brand-soft: #23306E;
  --brand-ink: #BFCCFF;

  --op-add: #2ED69A;
  --op-add-soft: #17402F;
  --op-add-ink: #7FEFC4;
  --op-sub: #5CB6FF;
  --op-sub-soft: #16324F;
  --op-sub-ink: #A6D8FF;
  --op-mul: #FFB14D;
  --op-mul-soft: #40300F;
  --op-mul-ink: #FFD49A;
  --op-div: #BE92FF;
  --op-div-soft: #322152;
  --op-div-ink: #DCC6FF;
  --op-topik: #FF7DB8;
  --op-topik-soft: #4A1D35;
  --op-topik-ink: #FFC2DE;

  --ok: #2ED69A;
  --ok-soft: #17402F;
  --ok-ink: #7FEFC4;
  --bad: #FF7862;
  --bad-soft: #4A2019;
  --bad-ink: #FFB3A5;
  --warn: #FFC15E;
  --warn-soft: #43320F;
  --warn-ink: #FFDCA0;
  --gold: #FFC93D;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .28);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .34), 0 18px 40px rgba(0, 0, 0, .44);
  --shadow-press: 0 1px 2px rgba(0, 0, 0, .4);

  --viz-1: #7A95FF;
  --viz-2: #FFB14D;
  --viz-line: #3C4A8E;
  --viz-muted: #7E8DC4;
  --viz-ink: #EDF2FF;
  --viz-bg: #182150;
  --viz-cross: #FF7862;

  --mascot-skin: #FCDDC4;
  --mascot-skin-2: #EAB38E;
  --mascot-skin-3: #B97A57;
  --mascot-shine: rgba(255, 255, 255, .5);
  --mascot-shadow: rgba(0, 0, 0, .38);
  --mascot-star: #FFC21A;
  --mascot-spark: #FFD055;
  --mascot-drop: #8FD6FF;
  --mascot-drop-2: #4FAEF0;
  --mascot-mark: #8DA5FF;
  --mascot-pop: #FF9A5C;
  --mascot-cloud: #3A4677;
  --mascot-cloud-2: #7E8DC4;
  --mascot-bubble: #F2F5FF;
  --buddy-koko-1: #52DACE;
  --buddy-koko-2: #23AAB5;
  --buddy-koko-3: #0E6874;
  --buddy-button: #FFE7A3;
  --buddy-peci-1: #4D5590;
  --buddy-peci-2: #2A3162;
  --buddy-peci-3: #8C96D8;
  --buddy-peci-band: #6E78B4;
  --buddy-pants: #4859A6;
  --buddy-pants-2: #7B8BD6;
  --buddy-shoe: #5A63A0;
  --buddy-hijab-1: #FFC4DD;
  --buddy-hijab-2: #F58ABC;
  --buddy-hijab-3: #C2558C;
  --buddy-ciput: #FFF0F6;
  --buddy-gamis-1: #B8A2FF;
  --buddy-gamis-2: #8C6EF6;
  --buddy-gamis-3: #563DC4;
  --buddy-gamis-trim: #FFD3E7;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  background-image: radial-gradient(120% 70% at 50% 0%, var(--bg-2) 0%, var(--bg) 62%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

h1, h2, h3, .display {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

button, input, select { font-family: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- kerangka aplikasi ---------- */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}

.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
.appbar.scrolled { border-bottom-color: var(--line); }

.appbar-title {
  flex: 1;
  min-width: 0;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.appbar-sub {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink-3);
}

.main {
  flex: 1;
  padding: 4px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
}
.main.no-nav { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

/* ---------- navigasi bawah ---------- */

.nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  gap: 4px;
  padding: 6px;
  width: min(calc(100% - 24px), 460px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.nav[hidden] { display: none; }
.nav-brand { display: none; }
.nav.hide { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px 6px;
  border: none;
  background: transparent;
  border-radius: 16px;
  color: var(--ink-3);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav-btn .ico { font-size: 20px; line-height: 1.1; transition: transform var(--dur-2) var(--ease-back); }
.nav-btn.active { color: var(--brand-ink); background: var(--brand-soft); }
.nav-btn.active .ico { transform: translateY(-2px) scale(1.12); }
.nav-btn .dot {
  position: absolute;
  top: 5px;
  right: calc(50% - 18px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--bad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
}

/* ---------- layar & transisi ---------- */

.screen { display: none; }
.screen.active { display: block; animation: screen-in var(--dur-3) var(--ease); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.stack > * + * { margin-top: 12px; }
.section-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-3);
  margin: 20px 2px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title .link { font-size: 13px; color: var(--brand); cursor: pointer; background: none; border: none; font-weight: 800; }

/* ---------- kartu ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 16px;
}
.card-pad-lg { padding: 20px; }
.card-flat { box-shadow: none; border: 1px solid var(--line); }

/* ---------- tombol ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--brand-dark) 76%, #000), var(--shadow-1);
  min-height: 60px;
  font-size: 18px;
}
.btn-primary:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--brand-dark) 76%, #000); transform: translateY(3px) scale(.99); }
.btn-success {
  background: linear-gradient(180deg, var(--ok) 0%, color-mix(in srgb, var(--ok) 74%, #000) 100%);
  color: #fff;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--ok) 52%, #000), var(--shadow-1);
  min-height: 60px;
  font-size: 18px;
}
.btn-success:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--ok) 52%, #000); transform: translateY(3px) scale(.99); }
.btn-soft { background: var(--surface-2); color: var(--ink); box-shadow: var(--shadow-1); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-sm { min-height: 42px; font-size: 14.5px; padding: 8px 14px; width: auto; }

.icon-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 18px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn.subtle { background: var(--surface-2); box-shadow: none; }

/* ---------- pil & lencana ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.pill-gold { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); color: var(--warn-ink); }
.pill-brand { background: var(--brand-soft); color: var(--brand-ink); }
.pill-ok { background: var(--ok-soft); color: var(--ok-ink); }
.pill-bad { background: var(--bad-soft); color: var(--bad-ink); }
.pill-lg { font-size: 14.5px; padding: 8px 14px; }

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

.bar {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 60%, #7EE7C7) 100%);
  transition: width var(--dur-3) var(--ease);
}
.bar-sm { height: 7px; }
.bar-fill.ok { background: linear-gradient(90deg, var(--ok) 0%, color-mix(in srgb, var(--ok) 55%, var(--gold)) 100%); }
.bar-fill.gold { background: linear-gradient(90deg, var(--gold) 0%, #FF8A3D 100%); }

/* ---------- header pemain ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent) 0%, transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.hero-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  font-size: 31px;
  border-radius: 20px;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease-back);
}
.hero-avatar:active { transform: scale(.92) rotate(-6deg); }
.hero-main { flex: 1; min-width: 0; }
.hero-name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-lv {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.hero-xp { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.hero-xp .bar { flex: 1; }
.hero-xp small { font-size: 11.5px; color: var(--ink-3); font-weight: 800; white-space: nowrap; }
.hero-stats { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

.streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 13px;
  color: var(--warn-ink);
  background: var(--warn-soft);
  padding: 6px 11px;
  border-radius: 999px;
}
.streak-flame.hot { animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

/* ---------- maskot: teman belajar Rafi & Nisa ---------- */

.mascot { width: 100%; height: 100%; display: block; overflow: visible; }
.mascot-wrap { width: 64px; height: 64px; flex: 0 0 64px; }
.mascot-wrap.lg { width: 96px; height: 96px; flex-basis: 96px; }
/* Lapisan gerak: .mascot-act (gerak keadaan) → .mascot-bob (napas) → kepala,
   baju, lengan; partikel di .mascot-fx. Titik asal memakai satuan viewBox 120×120. */
.mascot-act, .mascot-bob, .mascot-head, .mascot-hem, .mascot-arm { transform-box: view-box; }
.mascot-act { transform-origin: 60px 110px; }
.mascot-bob { transform-origin: 60px 110px; animation: mascot-breathe 3.2s ease-in-out infinite; }
.mascot-shadow { transform-box: fill-box; transform-origin: center; animation: mascot-shadow 3.2s ease-in-out infinite; }
.mascot-head { transform-origin: 60px 62px; animation: mascot-nod 3.2s ease-in-out infinite; }
.mascot-hem { transform-origin: 60px 72px; animation: mascot-sway 3.2s ease-in-out infinite; }
.mascot-arm-l { transform-origin: 45px 71px; animation: mascot-swing-l 3.2s ease-in-out infinite; }
.mascot-arm-r { transform-origin: 75px 71px; animation: mascot-swing-r 3.2s ease-in-out infinite; }
.mascot-fx g, .mascot-q { transform-box: fill-box; transform-origin: center; }
@keyframes mascot-breathe { 0%, 100% { transform: none; } 50% { transform: translateY(.6px) scale(1.014, .982); } }
@keyframes mascot-shadow { 0%, 100% { transform: none; } 50% { transform: scaleX(1.05); } }
@keyframes mascot-nod { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes mascot-sway { 0%, 100% { transform: skewX(-2.5deg); } 50% { transform: skewX(2.5deg); } }
@keyframes mascot-swing-l { 0%, 100% { transform: none; } 50% { transform: rotate(4deg); } }
@keyframes mascot-swing-r { 0%, 100% { transform: none; } 50% { transform: rotate(-4deg); } }

/* Senang: lompatan kecil dengan peregangan, kepalan naik, kilau muncul bergiliran. */
.mascot-happy .mascot-act { animation: mascot-hop 2s var(--ease) infinite; }
.mascot-happy .mascot-shadow { animation: mascot-shadow-hop 2s var(--ease) infinite; }
.mascot-happy .mascot-arm-l { animation: mascot-pump-l 2s var(--ease) infinite; }
.mascot-happy .mascot-arm-r { animation: mascot-pump-r 2s var(--ease) infinite; }
.mascot-spark { animation: mascot-twinkle 2s var(--ease) infinite both; }
/* Bersorak: lompat tinggi sambil berputar sekali, lalu lompat-lompat; bintang menyembur. */
.mascot-cheer .mascot-act { animation: mascot-spin-jump 1.2s var(--ease), mascot-jump 2.2s var(--ease) 1.2s infinite; }
.mascot-cheer .mascot-shadow { animation: mascot-shadow-spin 1.2s var(--ease), mascot-shadow-jump 2.2s var(--ease) 1.2s infinite; }
.mascot-cheer .mascot-arm-l { animation: mascot-shake-l .7s ease-in-out infinite alternate; }
.mascot-cheer .mascot-arm-r { animation: mascot-shake-r .7s ease-in-out infinite alternate; }
.mascot-burst { animation: mascot-burst 2.2s var(--ease) infinite both; }
/* Melambai: lengan kanan melambai terus, badan bergoyang condong. */
.mascot-wave .mascot-act { animation: mascot-lean 2.6s ease-in-out infinite; }
.mascot-wave .mascot-arm-r { animation: mascot-wave 1.3s ease-in-out infinite; }
.mascot-whoosh { animation: mascot-whoosh 1.3s ease-in-out infinite both; }
/* Wah: meloncat mundur kaget, tangan di pipi, tanda seru meletup. */
.mascot-wow .mascot-act { animation: mascot-wow .7s var(--ease-back), mascot-startle 2.4s ease-in-out .7s infinite; }
.mascot-wow .mascot-arm-l, .mascot-wow .mascot-arm-r { animation: none; }
.mascot-bang { animation: mascot-bang 2.4s var(--ease-back) infinite both; }
/* Ups: menggaruk kepala sambil malu-malu bergoyang — ramah, bukan dimarahi. */
.mascot-oops .mascot-act { animation: mascot-sheepish 2.4s ease-in-out infinite; }
.mascot-oops .mascot-arm-r { animation: mascot-scratch .42s ease-in-out infinite alternate; }
.mascot-drop { animation: mascot-drop 2.4s ease-in infinite both; }
/* Berpikir: tangan di dagu, gelembung pikiran muncul satu per satu. */
.mascot-think .mascot-head { animation: mascot-ponder 3.6s ease-in-out infinite; }
.mascot-think .mascot-arm-r { animation: mascot-tap 1.8s ease-in-out infinite; }
.mascot-think .mascot-arm-l { animation: none; }
.mascot-thought { animation: mascot-thought 3.6s var(--ease) infinite both; }
.mascot-q { animation: mascot-q 1.8s ease-in-out infinite; }
/* Menunjuk: lengan kanan menyodorkan ke kanan, badan mendorong maju pelan. */
.mascot-point .mascot-act { animation: mascot-nudge 1.4s ease-in-out infinite; }
.mascot-point .mascot-arm-r { animation: mascot-present 1.4s ease-in-out infinite; }
.mascot-point .mascot-spark { animation-duration: 1.4s; }
/* Sedih: bahu turun, napas pelan. */
.mascot-sad .mascot-bob, .mascot-sad .mascot-head, .mascot-sad .mascot-hem { animation-duration: 4.8s; }
.mascot-sad .mascot-act { animation: mascot-droop 1s var(--ease); }
.mascot-sad .mascot-arm-l, .mascot-sad .mascot-arm-r { animation: none; }
.mascot-cloud { animation: mascot-cloud 4.8s ease-in-out infinite; }
/* Tidur: napas dalam dan lambat, huruf z melayang naik. */
.mascot-sleep .mascot-bob { animation: mascot-snore 4.4s ease-in-out infinite; }
.mascot-sleep .mascot-head, .mascot-sleep .mascot-hem, .mascot-sleep .mascot-shadow { animation-duration: 4.4s; }
.mascot-sleep .mascot-arm-l, .mascot-sleep .mascot-arm-r { animation: none; }
.mascot-z { animation: mascot-z 3.3s ease-in-out infinite both; }

@keyframes mascot-hop {
  0%, 72%, 100% { transform: none; }
  10% { transform: scale(1.07, .9); }
  30% { transform: translateY(-9px) scale(.95, 1.07); }
  48% { transform: translateY(0) scale(1.08, .9); }
  60% { transform: scale(.98, 1.03); }
}
@keyframes mascot-shadow-hop { 0%, 72%, 100% { transform: none; opacity: 1; } 30% { transform: scale(.7); opacity: .55; } 48% { transform: scaleX(1.1); } }
@keyframes mascot-pump-l { 0%, 60%, 100% { transform: none; } 30% { transform: rotate(10deg); } }
@keyframes mascot-pump-r { 0%, 60%, 100% { transform: none; } 30% { transform: rotate(-10deg); } }
@keyframes mascot-twinkle {
  0% { transform: scale(0) rotate(-60deg); opacity: 0; }
  16% { transform: scale(1.3) rotate(0); opacity: 1; }
  30%, 70% { transform: none; opacity: 1; }
  100% { transform: scale(0) rotate(60deg); opacity: 0; }
}
@keyframes mascot-spin-jump {
  0%, 100% { transform: none; }
  12% { transform: translateY(0) scale(1.1, .86); }
  32% { transform: translateY(-13px) scale(1, 1.06); }
  48% { transform: translateY(-15px) scale(-1, 1.06); }
  64% { transform: translateY(-11px) scale(1, 1.04); }
  82% { transform: translateY(0) scale(1.1, .88); }
}
@keyframes mascot-jump {
  0%, 62%, 100% { transform: none; }
  10% { transform: scale(1.08, .9); }
  30% { transform: translateY(-10px) scale(.96, 1.06); }
  50% { transform: translateY(0) scale(1.08, .9); }
}
@keyframes mascot-shadow-spin { 0%, 100% { transform: none; } 48% { transform: scale(.6); opacity: .45; } }
@keyframes mascot-shadow-jump { 0%, 62%, 100% { transform: none; } 30% { transform: scale(.7); opacity: .55; } 50% { transform: scaleX(1.1); } }
@keyframes mascot-shake-l { from { transform: rotate(-7deg); } to { transform: rotate(6deg); } }
@keyframes mascot-shake-r { from { transform: rotate(7deg); } to { transform: rotate(-6deg); } }
@keyframes mascot-burst {
  0% { transform: translate(var(--bx), var(--by)) scale(.2) rotate(-120deg); opacity: 0; }
  12% { opacity: 1; }
  38% { transform: scale(1.25) rotate(10deg); }
  52%, 76% { transform: none; opacity: 1; }
  100% { transform: translateY(-6px) scale(.7); opacity: 0; }
}
@keyframes mascot-lean { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes mascot-wave { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg); } }
@keyframes mascot-whoosh { 0%, 100% { transform: translateX(-2px); opacity: .25; } 50% { transform: translateX(2px); opacity: 1; } }
@keyframes mascot-wow {
  0% { transform: scale(.92, 1.04); }
  30% { transform: translate(-4px, -10px) rotate(-5deg) scale(.95, 1.08); }
  62% { transform: translate(-1px, 0) scale(1.07, .92); }
  100% { transform: none; }
}
@keyframes mascot-startle { 0%, 34%, 100% { transform: none; } 10% { transform: translateY(-3px) scale(.98, 1.03); } 20% { transform: scale(1.03, .97); } }
@keyframes mascot-bang {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  14% { transform: scale(1.3) rotate(8deg); opacity: 1; }
  26%, 88% { transform: none; opacity: 1; }
  100% { transform: scale(.9); opacity: 0; }
}
@keyframes mascot-sheepish { 0%, 100% { transform: rotate(-2deg) translateX(-1px); } 50% { transform: rotate(2deg) translateX(1px); } }
@keyframes mascot-scratch { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes mascot-drop {
  0% { transform: translateY(-5px) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  45%, 70% { transform: none; opacity: 1; }
  100% { transform: translateY(7px) scale(.9); opacity: 0; }
}
@keyframes mascot-ponder { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes mascot-tap { 0%, 40%, 100% { transform: none; } 20% { transform: rotate(-4deg); } }
@keyframes mascot-thought {
  0% { transform: scale(0); opacity: 0; }
  12% { transform: scale(1.18); opacity: 1; }
  22% { transform: none; }
  55% { transform: translateY(-1.5px); }
  86% { transform: none; opacity: 1; }
  100% { transform: scale(.85); opacity: 0; }
}
@keyframes mascot-q { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes mascot-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(2.5px) rotate(1deg); } }
@keyframes mascot-present { 0%, 100% { transform: none; } 50% { transform: rotate(-6deg); } }
@keyframes mascot-cloud { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px) translateY(-1px); } }
@keyframes mascot-droop { 0% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes mascot-snore { 0%, 100% { transform: none; } 50% { transform: translateY(1px) scale(1.025, .97); } }
@keyframes mascot-z {
  0% { transform: translate(-4px, 6px) scale(.5); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: none; }
  80% { opacity: 1; }
  100% { transform: translate(5px, -7px) scale(1.15); opacity: 0; }
}
/* Gerak dimatikan bila sistem atau setelan pemain meminta gerak dikurangi;
   pose akhir tetap tergambar statis di SVG. */
@media (prefers-reduced-motion: reduce) { .mascot, .mascot * { animation: none !important; } }
html[data-motion="reduced"] .mascot, html[data-motion="reduced"] .mascot * { animation: none !important; }

.coach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.coach-bubble {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
}
.coach-bubble::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 20px;
  width: 14px;
  height: 14px;
  background: var(--surface-2);
  transform: rotate(45deg);
  border-radius: 3px;
}
.coach-bubble b { color: var(--ink); }

/* ---------- kartu aksi utama ---------- */

.hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: var(--radius-xl);
  text-align: left;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #7B5CFF 100%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand) 36%, transparent);
  transition: transform var(--dur-1) var(--ease);
}
.hero-cta:active { transform: scale(.98); }
.hero-cta .emoji {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  font-size: 27px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .2);
}
.hero-cta .t { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.2; }
.hero-cta .d { display: block; font-size: 13px; opacity: .92; font-weight: 700; margin-top: 3px; }
.hero-cta .go { font-size: 22px; opacity: .9; }

/* ---------- petak mode ---------- */

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode-grid > *:nth-child(odd):last-child { grid-column: 1 / -1; }
.mode-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px;
  min-height: 104px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mode-tile:active { transform: scale(.97); box-shadow: var(--shadow-press); }
.mode-tile .emoji { display: block; font-size: 27px; line-height: 1; }
.mode-tile .t { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15.5px; margin-top: 4px; }
.mode-tile .d { display: block; font-size: 12px; color: var(--ink-3); font-weight: 700; line-height: 1.35; }
.mode-tile .badge {
  position: absolute;
  top: 11px; right: 11px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--bad);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
.mode-tile.accent-review { background: linear-gradient(160deg, var(--op-div-soft), var(--surface) 70%); }
.mode-tile.accent-challenge { background: linear-gradient(160deg, var(--warn-soft), var(--surface) 70%); }
.mode-tile.accent-story { background: linear-gradient(160deg, var(--op-sub-soft), var(--surface) 70%); }
.mode-tile.accent-map { background: linear-gradient(160deg, var(--op-add-soft), var(--surface) 70%); }
.mode-tile.accent-compare { background: linear-gradient(160deg, var(--brand-soft), var(--surface) 70%); }

/* ---------- kartu operasi ---------- */

/* Kartu topik di beranda bertumpuk dengan jarak (dulu saling menempel — masukan orang tua). */
.op-list { display: flex; flex-direction: column; gap: 12px; }

.op-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.op-card:active { transform: scale(.98); }
.op-card .op-emoji {
  width: 50px; height: 50px; flex: 0 0 50px;
  display: grid; place-items: center;
  font-size: 24px;
  border-radius: 17px;
}
.op-card .op-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; }
.op-card .op-meta { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.op-card .op-prog { margin-top: 7px; display: flex; align-items: center; gap: 8px; }
.op-card .op-prog .bar { flex: 1; }
.op-card .op-prog small { font-size: 11.5px; font-weight: 800; color: var(--ink-3); }
.op-card .op-prog .bar { display: block; }

.op-add .op-emoji { background: var(--op-add-soft); }
.op-sub .op-emoji { background: var(--op-sub-soft); }
.op-mul .op-emoji { background: var(--op-mul-soft); }
.op-div .op-emoji { background: var(--op-div-soft); }
.op-add .bar-fill { background: var(--op-add); }
.op-sub .bar-fill { background: var(--op-sub); }
.op-mul .bar-fill { background: var(--op-mul); }
.op-div .bar-fill { background: var(--op-div); }
.op-topik .op-emoji { background: var(--op-topik-soft); }
.op-topik .bar-fill { background: var(--op-topik); }

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

.op-switch { display: flex; gap: 8px; margin-bottom: 14px; }
.op-switch button {
  flex: 1;
  min-height: 48px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 21px;
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.op-switch button.active { background: var(--surface); border-color: var(--brand); box-shadow: var(--shadow-1); transform: translateY(-2px); }

.map { position: relative; padding-left: 30px; }
.map::before {
  content: '';
  position: absolute;
  left: 14px; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: repeating-linear-gradient(var(--line) 0 8px, transparent 8px 16px);
}
.stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease);
}
.stage:active { transform: scale(.985); }
.stage::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 50%;
  width: 13px; height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 4px var(--bg);
}
.stage.done::before { background: var(--ok); }
.stage.current::before { background: var(--brand); animation: ping 1.8s ease-out infinite; }
@keyframes ping {
  0% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  70% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 4px var(--bg), 0 0 0 0 transparent; }
}
.stage .st-emoji {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  font-size: 23px;
  border-radius: 16px;
  background: var(--surface-2);
}
.stage .st-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; }
.stage .st-desc { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 700; }
.stage .st-stars { display: block; font-size: 14px; letter-spacing: 1px; margin-top: 3px; }
.stage.locked { opacity: .58; cursor: not-allowed; }
.stage.locked .st-emoji { filter: grayscale(1); }
.stage-boss { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 16%, var(--surface)), var(--surface) 70%); }
.stage-boss .st-emoji { background: color-mix(in srgb, var(--gold) 22%, var(--surface-2)); }
.stage-boss.locked { background: var(--surface); }
.stage .st-lock { font-size: 17px; color: var(--ink-3); }

/* ---------- layar kuis ---------- */

.quiz-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.quiz-top .icon-btn { background: var(--surface-2); box-shadow: none; }
.quiz-meta { flex: 1; min-width: 0; }
.quiz-meta .label { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.quiz-meta .bar { margin-top: 5px; }

.combo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  background: var(--surface-2);
  color: var(--ink-3);
  transition: all var(--dur-2) var(--ease-back);
}
.combo-chip.on { background: var(--warn-soft); color: var(--warn-ink); }
.combo-chip.hot { background: linear-gradient(135deg, var(--gold), #FF7A3D); color: #fff; transform: scale(1.06); }

.timer-ring { width: 44px; height: 44px; flex: 0 0 44px; position: relative; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-ring .track { stroke: var(--surface-3); }
.timer-ring .prog { stroke: var(--brand); stroke-linecap: round; transition: stroke-dashoffset .3s linear, stroke .3s ease; }
.timer-ring.warn .prog { stroke: var(--warn); }
.timer-ring.danger .prog { stroke: var(--bad); }
.timer-ring .num {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13.5px;
}

.qcard {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: 26px 18px 22px;
  text-align: center;
  margin-bottom: 16px;
  animation: qcard-in var(--dur-3) var(--ease-back);
}
@keyframes qcard-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.qcard .tag {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.qcard .tag.new { background: var(--op-add-soft); color: var(--op-add-ink); }
.qcard .tag.review { background: var(--op-div-soft); color: var(--op-div-ink); }
.qcard .tag.retry { background: var(--warn-soft); color: var(--warn-ink); }
.qcard .speak {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  border: none;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 16px;
  cursor: pointer;
}
.qtext {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.qtext .eq { color: var(--ink-3); }
.qtext.qtext-sangat-panjang { font-size: clamp(1.6rem, 7vw, 2.5rem); }
.qtext .blank {
  display: inline-block;
  min-width: 1.1em;
  padding: 0 .12em;
  border-bottom: 5px solid var(--brand);
  border-radius: 3px;
  color: var(--brand);
}
.qtext .rem-word {
  font-size: .42em;
  font-weight: 800;
  color: var(--ink-3);
  margin: 0 .35em 0 .5em;
  vertical-align: .22em;
}
.qtext-cmp { font-size: clamp(1.7rem, 8.5vw, 2.5rem); }
.qtext-cmp .cmp-side { white-space: nowrap; }
.qtext-cmp .cmp-gap { margin: 0 .5em; }
.qcard .tag.missing { background: var(--brand-soft); color: var(--brand-ink); }
.qcard .tag.rem { background: var(--op-mul-soft); color: var(--op-mul-ink); }
.qcard .tag.teach { background: var(--op-div-soft); color: var(--op-div-ink); }
.qstory {
  padding-right: 42px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
  margin-bottom: 12px;
}
.qstory-eq {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 26px;
  text-align: center;
  color: var(--ink-2);
}

.viz-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.viz-box .viz { display: block; width: auto; height: auto; max-width: 100%; max-height: 180px; margin: 0 auto; }
.viz-cap { font-size: 12px; color: var(--ink-3); font-weight: 700; margin-top: 7px; }

/* ---------- pilihan jawaban ---------- */

.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Pilihan berlabel panjang (Rp17.500, "roti panjang A") mengecil, tidak melebarkan kolom. */
.answer { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.answers .answer.panjang { font-size: clamp(1.15rem, 6.2vw, 1.7rem) !important; }
.answers .answer.sangat-panjang { font-size: clamp(1rem, 4.6vw, 1.3rem) !important; }
.answers-cmp { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.answer-sym { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.answer-sym .sym { font-size: 1.9rem; line-height: 1; }
.answer-sym .sym-name { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; color: var(--ink-3); }
.answer-sym.correct .sym-name { color: var(--ok-ink); }
.answer-sym.wrong .sym-name { color: var(--bad-ink); }
.answer {
  min-height: 72px;
  border: 2.5px solid transparent;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 8vw, 2rem);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.answer:active { transform: scale(.96); }
.answer:disabled { cursor: default; }
.answer.correct { background: var(--ok-soft); border-color: var(--ok); color: var(--ok-ink); }
.answer.wrong { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-ink); }
.answer.dim { opacity: .45; }

/* ---------- papan angka ---------- */

.entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 30px;
}
.entry.correct { background: var(--ok-soft); color: var(--ok-ink); }
.entry.wrong { background: var(--bad-soft); color: var(--bad-ink); }
.entry .caret {
  display: inline-block;
  width: 3px; height: 30px;
  background: var(--brand);
  border-radius: 2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.entry .ph { color: var(--ink-3); font-size: 20px; font-weight: 700; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key {
  min-height: 58px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 24px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.key:active { transform: scale(.94); background: var(--surface-2); }
.key.fn { font-size: 19px; background: var(--surface-2); box-shadow: none; color: var(--ink-2); }
.key.ok { background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 72%, #000)); color: #fff; }
.keypad.done .key { opacity: .45; pointer-events: none; }

/* ---------- umpan balik ---------- */

.feedback {
  border-radius: var(--radius-lg);
  padding: 15px;
  margin-bottom: 14px;
  animation: fb-in var(--dur-2) var(--ease-back);
}
@keyframes fb-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.feedback.ok { background: var(--ok-soft); }
.feedback.bad { background: var(--warn-soft); }
.feedback-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
}
.feedback.ok .feedback-head { color: var(--ok-ink); }
.feedback.bad .feedback-head { color: var(--warn-ink); }
.feedback-body { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-top: 7px; line-height: 1.5; }
.feedback-body b { color: var(--ink); }
.strategy {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.strategy .s-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
.strategy ol { margin: 0; padding-left: 18px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); line-height: 1.65; }
.strategy .s-eq {
  margin-top: 9px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-align: center;
  color: var(--brand-ink);
}
.family { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.family span {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink-2);
}

/* ---------- hasil ---------- */

.result { text-align: center; padding: 8px 0 4px; }
.result-mascot { width: 104px; height: 104px; margin: 0 auto 4px; }
.result-stars { display: flex; justify-content: center; gap: 8px; margin: 8px 0 6px; }
.result-stars span {
  font-size: 38px;
  filter: grayscale(1) opacity(.32);
  transform: scale(.8);
  transition: all var(--dur-3) var(--ease-back);
}
.result-stars span.on { filter: none; transform: scale(1.08); }
.result-score { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.05; }
.result-msg { font-size: 15.5px; font-weight: 700; color: var(--ink-2); margin-top: 4px; }

.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.stat {
  padding: 13px 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.stat .v { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 21px; }
.stat .k { font-size: 11.5px; font-weight: 800; color: var(--ink-3); margin-top: 1px; }

.xp-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--brand-soft) 40%, var(--surface)));
  margin-bottom: 12px;
}
.xp-row .big { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 24px; color: var(--brand-ink); line-height: 1.15; }
.xp-row .sub { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-top: 2px; }

.review-list { text-align: left; }
.review-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  margin-bottom: 8px;
}
.review-item .eq { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; flex: 1; }
.review-item .mark { font-size: 18px; }

/* ---------- misi harian ---------- */

.quest {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  margin-bottom: 9px;
  transition: opacity var(--dur-2) var(--ease);
}
.quest .q-emoji { font-size: 22px; }
.quest .q-main { flex: 1; min-width: 0; }
.quest .q-text { display: block; font-size: 13.5px; font-weight: 800; }
.quest .q-bar { margin-top: 6px; display: flex; align-items: center; gap: 7px; }
.quest .q-bar .bar { display: block; }
.quest .q-main { display: block; }
.quest .q-bar .bar { flex: 1; }
.quest .q-bar small { font-size: 11px; font-weight: 800; color: var(--ink-3); }
.quest .q-xp { font-size: 12px; font-weight: 800; color: var(--warn-ink); background: var(--warn-soft); padding: 4px 9px; border-radius: 999px; }
.quest.done { opacity: .62; }
.quest.done .q-xp { background: var(--ok-soft); color: var(--ok-ink); }

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

.heat-wrap { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.heat {
  display: grid;
  gap: 3px;
  min-width: min-content;
}
.heat-cell {
  aspect-ratio: 1;
  min-width: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--surface-3);
  cursor: pointer;
  border: none;
  padding: 0;
}
.heat-cell.m1 { background: color-mix(in srgb, var(--bad) 26%, var(--surface-2)); color: var(--ink-2); }
.heat-cell.m2 { background: color-mix(in srgb, var(--warn) 42%, var(--surface-2)); color: var(--ink); }
.heat-cell.m3 { background: color-mix(in srgb, var(--ok) 52%, var(--surface-2)); color: var(--ink); }
.heat-cell.m4 { background: var(--ok); color: #fff; }
.heat-head { font-size: 10px; font-weight: 800; color: var(--ink-3); display: grid; place-items: center; }
.heat-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; font-weight: 800; color: var(--ink-3); }
.heat-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.spark div {
  flex: 1 1 0;
  align-self: flex-end;
  min-width: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--brand);
  opacity: .85;
  transition: height var(--dur-3) var(--ease);
}
.spark div.spark-off { background: var(--surface-3); }

/* ---------- peringkat ---------- */

.tabs { display: flex; gap: 6px; padding: 4px; background: var(--surface-2); border-radius: 14px; margin-bottom: 12px; }
.tabs button {
  flex: 1;
  min-height: 38px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all var(--dur-1) var(--ease);
}
.tabs button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
/* Banyak topik (album, progres): baris tab digeser mendatar, tidak melebarkan halaman. */
.tabs.geser { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; max-width: 100%; }
.tabs.geser::-webkit-scrollbar { display: none; }
.tabs.geser button { flex: 0 0 auto; padding: 0 12px; white-space: nowrap; }
.album, .progress { min-width: 0; max-width: 100%; }

.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  margin-bottom: 8px;
}
.rank-row.me { outline: 2.5px solid var(--brand); }
.rank-pos { width: 26px; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink-3); flex-shrink: 0; }
.rank-av { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; font-size: 21px; border-radius: 13px; background: var(--surface-2); }
.rank-main { flex: 1; min-width: 0; }
.rank-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-meta { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.rank-val {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--brand-ink);
  flex-shrink: 0;
  text-align: right;
  line-height: 1.1;
}
.rank-unit {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.rank-you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: 'Nunito', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: 2px;
}
.rank-lagi { display: block; width: 100%; margin: 6px 0 10px; }
.rank-lagi small { font-weight: 700; color: var(--ink-3); }
.rank-gap {
  text-align: center;
  color: var(--ink-3);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 4px;
  margin: 4px 0 10px;
}
.rank-note {
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  line-height: 1.5;
}
.rank-head { margin: 2px 2px 14px; }
.rank-head-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; }
.rank-head-desc { font-size: 12.5px; font-weight: 700; color: var(--ink-3); line-height: 1.5; margin-top: 3px; }

.empty {
  text-align: center;
  color: var(--ink-3);
  font-weight: 700;
  font-size: 14px;
  padding: 34px 16px;
}
.empty .e-emoji { font-size: 38px; display: block; margin-bottom: 8px; }

/* ---------- lencana ---------- */

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.badge-card {
  padding: 13px 8px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: center;
  transition: transform var(--dur-2) var(--ease-back);
}
.badge-card .b-emoji { font-size: 27px; filter: grayscale(1) opacity(.3); }
.badge-card .b-name { font-size: 11.5px; font-weight: 800; margin-top: 5px; line-height: 1.25; }
.badge-card .b-desc { font-size: 10px; color: var(--ink-3); font-weight: 700; margin-top: 2px; line-height: 1.3; }
.badge-card.earned .b-emoji { filter: none; }
.badge-card.earned { background: linear-gradient(160deg, var(--warn-soft), var(--surface) 72%); }

/* ---------- setelan ---------- */

.setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  margin-bottom: 9px;
}
.setting .s-main { flex: 1; min-width: 0; }
.setting .s-title { font-weight: 800; font-size: 14.5px; }
.setting .s-desc { font-size: 12px; color: var(--ink-3); font-weight: 700; }
.switch {
  width: 50px; height: 30px;
  flex: 0 0 50px;
  border: none;
  border-radius: 15px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease);
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform var(--dur-2) var(--ease-back);
}
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(20px); }

.seg { display: flex; gap: 5px; background: var(--surface-2); padding: 4px; border-radius: 12px; flex: 0 0 auto; }
.seg button {
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 7px 11px;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

.field {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 800;
  font-size: 16px;
  outline: none;
  transition: border-color var(--dur-1) var(--ease);
}
.field:focus { border-color: var(--brand); }

.avatar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-opt {
  aspect-ratio: 1;
  border: 2.5px solid transparent;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 23px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-back);
}
.avatar-opt.active { border-color: var(--brand); background: var(--surface); }
.avatar-opt:active { transform: scale(.9); }

/* ---------- lembar bawah ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(8, 12, 32, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.sheet-backdrop.show { opacity: 1; }
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 901;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 18px calc(22px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--shadow-2);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
  max-height: 86vh;
  overflow-y: auto;
}
.sheet.show { transform: none; }
.sheet-grip { width: 42px; height: 4px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { font-size: 19px; margin-bottom: 6px; }

/* ---------- toast, konfeti, teks melayang ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 420px);
  padding: 11px 17px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--shadow-2);
  transform: translate(-50%, -160%);
  transition: transform var(--dur-3) var(--ease-back);
}
.toast.show { transform: translate(-50%, 0); }
.toast-tap { cursor: pointer; }
.toast-icon { font-size: 17px; }
.toast-ok { background: var(--ok); color: #fff; }
.toast-bad { background: var(--bad); color: #fff; }
.toast-gold { background: linear-gradient(135deg, var(--gold), #FF7A3D); color: #fff; }

#fx-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1100; }
.confetti {
  position: absolute;
  top: -24px;
  animation: confetti-fall 1.5s cubic-bezier(.3, .6, .6, 1) forwards;
}
.confetti-emoji { line-height: 1; }
@keyframes confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--drift, 0), 108vh, 0) rotate(var(--spin, 360deg)); opacity: .1; }
}
.float-text {
  position: absolute;
  transform: translate(-50%, 0);
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 21px;
  color: var(--ok);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  animation: float-up 1.1s var(--ease) forwards;
}
.float-xp { color: var(--brand); }
.float-bad { color: var(--bad); }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); }
  22% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -58px) scale(1); }
}

/* ---------- animasi utilitas ---------- */

@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.anim-pop { animation: pop .42s var(--ease-back); }
.anim-shake { animation: shake .42s var(--ease); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

/* ---------- pemain: "Siapa yang main hari ini?" ---------- */

.players { padding-top: 18px; }
.players-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.players-head .mascot-wrap.lg { width: 104px; height: 104px; flex-basis: 104px; }
.players-ask { font-family: 'Baloo 2', sans-serif; font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.player-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.player-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px 14px; border: 3px solid transparent; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-1); cursor: pointer; color: var(--ink);
  transition: transform var(--dur-2) var(--ease-back), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1);
}
.player-card:active { transform: scale(.95); }
.player-card.last { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.player-card.picked { transform: scale(1.06); border-color: var(--brand); }
.player-av { font-size: 54px; line-height: 1.1; }
.player-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-meta { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.player-card.add { background: transparent; border: 3px dashed var(--line); box-shadow: none; }
.player-card.add .player-av { font-size: 40px; padding: 7px 0; }
.hero-avatar { position: relative; }
.hero-swap {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-1);
}

/* ---------- pemain & perangkat ---------- */

.who-card { display: flex; align-items: center; gap: 12px; }
.who-av { font-size: 34px; }
.who-main { flex: 1; min-width: 0; }
.who-name { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; }
.who-meta { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.manage-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.manage-row:last-of-type { border-bottom: none; }
.manage-av { font-size: 30px; width: 40px; text-align: center; }
.manage-main { flex: 1; min-width: 0; }
.manage-name { display: block; font-weight: 800; font-size: 15px; }
.manage-meta { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.mini-label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); margin: 14px 0 8px; }
.sheet-note { font-size: 13px; font-weight: 700; color: var(--ink-2); line-height: 1.55; margin: 6px 0; }
.sheet-note.bad { color: var(--bad-ink); }
.sheet-note[hidden] { display: none !important; }
.code-label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); text-align: center; }
.code-big {
  font-family: 'Baloo 2', ui-monospace, monospace; font-weight: 800; font-size: 36px; letter-spacing: .12em;
  text-align: center; color: var(--brand-ink); background: var(--brand-soft); border-radius: 16px; padding: 6px 0; margin: 6px 0 10px;
  user-select: all;
}
.code-field { text-align: center; font-size: 26px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.match-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.match-who { font-size: 15px; }
.match-sel { font-size: 14.5px; padding: 10px 12px; }
.op-card.picked { outline: 2.5px solid var(--brand); }
.avatar-opt.taken { opacity: .55; }
.avatar-opt.taken.active { opacity: 1; }

/* ---------- gelembung teman belajar di Toko Kue ---------- */

.quiz-buddy { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-height: 52px; }
.buddy-kiko { width: 52px; height: 52px; flex: 0 0 52px; }
.buddy-bubble {
  position: relative; flex: 1; min-width: 0; background: var(--surface); box-shadow: var(--shadow-1);
  border-radius: 14px; padding: 8px 12px; font-size: 14px; font-weight: 800; color: var(--ink-2); line-height: 1.35;
}
.buddy-bubble::before {
  content: ''; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--surface); transform: rotate(45deg); border-radius: 2px;
}
.buddy-bubble b { color: var(--ink); }

/* ---------- kartu pelajaran di peta ---------- */

.lesson-card {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; padding: 12px 16px 12px 10px;
  border: none; border-radius: var(--radius-lg); cursor: pointer; text-align: left; color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 60%, #A56BFF) 100%);
  box-shadow: var(--shadow-2); transition: transform var(--dur-2) var(--ease-back);
}
.lesson-card:active { transform: scale(.98); }
.lesson-card.done { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.lesson-kiko { width: 62px; height: 62px; flex: 0 0 62px; }
.lesson-kicker { display: block; font-size: 12px; font-weight: 800; opacity: .9; }
.lesson-title { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; line-height: 1.2; }
.lesson-desc { display: block; font-size: 13px; font-weight: 700; opacity: .9; }
.lesson-card.done .lesson-kicker, .lesson-card.done .lesson-desc { color: var(--ink-3); opacity: 1; }
.lesson-card .st-lock { color: inherit; opacity: .9; }

/* ---------- layar pelajaran ---------- */

.lsn-dots { display: flex; gap: 5px; margin-top: 6px; }
.lsn-dot { flex: 1; height: 7px; border-radius: 4px; background: var(--surface-3); transition: background var(--dur-2); }
.lsn-dot.done { background: var(--ok); }
.lsn-dot.now { background: var(--brand); }
.lsn-coach { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.lsn-kiko { width: 78px; height: 78px; flex: 0 0 78px; }
.lsn-bubble { background: var(--surface); box-shadow: var(--shadow-1); font-size: 16px; line-height: 1.45; padding: 12px 14px; }
.lsn-bubble::before { background: var(--surface); }
.lsn-replay {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow-1); font-size: 18px;
}
.lsn-body { display: flex; flex-direction: column; gap: 12px; }
.lsn-stage {
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-1);
  padding: 16px 12px; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.lsn-actions { display: flex; flex-direction: column; gap: 10px; }
.lsn-actions .btn + .btn { margin-top: 0; }
.lsn-plates { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; width: 100%; }
.lsn-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lsn-friend { width: 46px; height: 48px; }
.lsn-friend svg { width: 100%; height: 100%; display: block; }
.lsn-friend-name { font-size: 11.5px; font-weight: 800; color: var(--ink-3); margin-top: -2px; }
.lsn-plate {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 3px 4px;
  width: 92px; min-height: 70px; padding: 8px; border-radius: 50%;
  /* Piring keramik: cekungan putih, bibir kebiruan, garis warna di tepi, bayangan. */
  background: radial-gradient(ellipse at 50% 46%, #FFFFFF 0 50%, #EEF2FA 54%, #DCE4F3 72%, #E8EDF8 100%);
  border: 4px solid var(--plate-rim, #4C6FFF);
  box-shadow: inset 0 3px 6px rgba(22, 32, 74, .12), 0 4px 0 rgba(22, 32, 74, .08), 0 6px 12px rgba(22, 32, 74, .12);
  transition: transform var(--dur-2) var(--ease-back), border-color var(--dur-2);
}
.lsn-cell:nth-child(6n+2) .lsn-plate { --plate-rim: #FF8A3D; }
.lsn-cell:nth-child(6n+3) .lsn-plate { --plate-rim: #18B87B; }
.lsn-cell:nth-child(6n+4) .lsn-plate { --plate-rim: #A56BFF; }
.lsn-cell:nth-child(6n+5) .lsn-plate { --plate-rim: #F4563B; }
.lsn-cell:nth-child(6n) .lsn-plate { --plate-rim: #3BA3F5; }
.lsn-plates.big .lsn-plate { width: 170px; min-height: 110px; }
.lsn-plate-wide { width: 190px; min-height: 96px; }
.lsn-plate.tappable { cursor: pointer; border-color: var(--brand); animation: lsn-nudge 1.4s var(--ease) infinite; }
.lsn-plate.taken { border-color: var(--ok); background: radial-gradient(ellipse at 50% 46%, #FFFFFF 0 50%, #E3F7EE 54%, #C9EEDC 72%, #DDF6EC 100%); }
@keyframes lsn-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.lsn-item { position: relative; font-size: 22px; line-height: 1.15; display: inline-block; transition: opacity var(--dur-2), transform var(--dur-2); }
.lsn-plates.big .lsn-item { font-size: 32px; }
.lsn-item.counted { transform: scale(1.12); }
.lsn-item.counted::after {
  content: attr(data-n); position: absolute; top: -8px; right: -6px; min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 9px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  font-family: 'Nunito', sans-serif;
}
.lsn-item.tappable { cursor: pointer; animation: lsn-nudge 1.2s var(--ease) infinite; }
.lsn-item.eaten { opacity: .3; filter: grayscale(1); }
.lsn-item.eaten::before {
  content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 3px; margin-top: -1.5px;
  background: var(--viz-cross); border-radius: 2px; transform: rotate(-35deg);
}
.lsn-label { min-height: 20px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; color: var(--brand-ink); }
.lsn-pile {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 280px; min-height: 36px;
  padding: 8px 12px; border-radius: 18px; background: var(--warn-soft);
}
.lsn-pile:empty::after { content: 'habis ✓'; font-weight: 800; font-size: 14px; color: var(--warn-ink); align-self: center; }
.lsn-total { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; color: var(--brand-ink); }
.lsn-info { font-size: 15px; font-weight: 800; color: var(--ink-2); text-align: center; }
.lsn-info b { color: var(--ink); }
.lsn-qcount { align-self: flex-start; font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
.lsn-eq { display: flex; align-items: flex-start; justify-content: center; gap: 6px; flex-wrap: wrap; }
.lsn-eq-part { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
.lsn-eq-big { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.1; color: var(--ink); }
.lsn-eq-part.ok .lsn-eq-big { color: var(--ok-ink); }
.lsn-eq-small { font-size: 11.5px; font-weight: 800; color: var(--ink-3); max-width: 76px; text-align: center; line-height: 1.2; }
.lsn-stepper { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 16px; padding: 8px 10px; box-shadow: var(--shadow-1); }
.lsn-step-label { flex: 1; font-weight: 800; font-size: 15px; color: var(--ink-2); }
.lsn-step-btn {
  width: 48px; height: 48px; border-radius: 14px; border: none; cursor: pointer;
  background: var(--brand-soft); color: var(--brand-ink); font-size: 26px; font-weight: 800;
}
.lsn-step-btn:active { transform: scale(.92); }
.lsn-step-val { min-width: 34px; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; }
.lsn-answers.locked { opacity: .55; pointer-events: none; }
.lsn-trophy { font-size: 84px; line-height: 1; animation: pop .6s var(--ease-back); }

@media (prefers-reduced-motion: reduce) {
  .lsn-plate.tappable, .lsn-item.tappable, .lsn-trophy { animation: none; }
}
html[data-motion="reduced"] .lsn-plate.tappable,
html[data-motion="reduced"] .lsn-item.tappable,
html[data-motion="reduced"] .lsn-trophy { animation: none; }

/* ==========================================================================
   Layar lebih besar
   HP tetap seperti semula. Tablet mendapat ruang dan huruf lebih besar, dan
   mulai lebar laptop navigasi pindah ke samping supaya tinggi layar terpakai.
   ========================================================================== */

@media (min-width: 430px) {
  .qtext { font-size: 3.2rem; }
  .answer { min-height: 80px; }
}

/* ---------- tablet ---------- */
@media (min-width: 720px) {
  .app { max-width: 760px; }
  .main { padding-left: 24px; padding-right: 24px; }
  .appbar { padding-left: 24px; padding-right: 24px; }
  .appbar-title { font-size: 22px; }

  .mode-grid { grid-template-columns: repeat(3, 1fr); }
  .mode-grid > *:nth-child(odd):last-child { grid-column: auto; }
  .op-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .op-list .op-card { margin: 0; }
  .home-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
  .home-top .coach { margin: 0; }
  .quest-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
  .quest-list .quest { margin-bottom: 0; }
  .badge-grid { grid-template-columns: repeat(5, 1fr); }
  .result-grid { gap: 14px; }

  .qtext { font-size: 3.6rem; }
  .answer { min-height: 92px; font-size: 2.2rem; }
  .key { min-height: 68px; font-size: 27px; }
  .entry { min-height: 72px; font-size: 34px; }
  /* Kotak penguasaan tidak perlu ikut melebar; dibatasi agar tetap ringkas. */
  .heat { max-width: 540px; }
  .heat-wrap { display: flex; justify-content: center; }
  .heat-cell { min-width: 34px; font-size: 11.5px; }
  .heat-legend { justify-content: center; }
  .spark { max-width: 560px; margin-inline: auto; gap: 6px; }
  .spark div { max-width: 34px; }
  .result-grid { max-width: 560px; margin-inline: auto; }
  .tabs { max-width: 560px; margin-inline: auto; }
  .hero-avatar { width: 68px; height: 68px; flex-basis: 68px; font-size: 36px; }
  .hero-name { font-size: 20px; }
  .viz-box .viz { max-height: 240px; }
  .stage { padding: 16px 18px; }
  .sheet { border-radius: 28px; max-width: 620px; bottom: auto; top: 50%; transform: translateY(-40%) scale(.96); opacity: 0; }
  .sheet.show { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* ---------- laptop & tablet lanskap ---------- */
@media (min-width: 1024px) {
  .app { max-width: 1140px; }

  .app.with-nav {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav bar" "nav main";
    column-gap: 26px;
    padding-right: 24px;
  }
  .app.with-nav .appbar { grid-area: bar; padding-left: 4px; }
  .app.with-nav .main {
    grid-area: main;
    padding: 4px 4px 48px;
    max-width: 840px;
  }

  /* Navigasi pindah dari bawah layar ke bilah samping yang menetap. */
  .app.with-nav .nav {
    grid-area: nav;
    position: sticky;
    top: 16px;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    margin: 16px 0 24px 20px;
    padding: 16px 12px;
    flex-direction: column;
    gap: 4px;
    align-self: start;
    border-radius: 26px;
  }
  .app.with-nav .nav.hide { transform: none; opacity: 1; pointer-events: auto; }
  .nav-brand {
    display: block;
    padding: 6px 14px 16px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--ink);
  }
  .nav-brand span { font-size: 21px; margin-right: 4px; }
  .app.with-nav .nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    border-radius: 15px;
  }
  .app.with-nav .nav-btn .ico { font-size: 22px; }
  .app.with-nav .nav-btn .dot { position: static; margin-left: auto; }

  .main { padding-bottom: 48px; }
  .main.no-nav { width: 100%; max-width: 880px; margin-inline: auto; }

  /* Kuis: soal di kiri, jawaban di kanan. */
  .quiz-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    /* Soal diletakkan di tengah tinggi layar supaya tidak menumpuk di atas
       dan menyisakan ruang kosong besar di bawah. */
    align-content: center;
    min-height: calc(100dvh - 140px);
  }
  .quiz-stage { position: sticky; top: 76px; }
  .qcard { margin-bottom: 0; padding: 30px 24px 26px; }
  .qtext { font-size: 3.8rem; }
  .answers { grid-template-columns: 1fr 1fr; gap: 16px; }
  .answer { min-height: 118px; font-size: 2.5rem; }
  .answers-cmp .answer { min-height: 104px; }
  .answer-sym .sym { font-size: 2.4rem; }
  .keypad { gap: 12px; }
  .key { min-height: 76px; font-size: 30px; }
  .entry { min-height: 80px; font-size: 38px; }
  .viz-box .viz { max-height: 340px; }
  .feedback { padding: 18px; }

  .mode-grid { grid-template-columns: repeat(5, 1fr); }
  .badge-grid { grid-template-columns: repeat(6, 1fr); }
  .heat { max-width: 560px; }
  .heat-cell { min-width: 40px; font-size: 12.5px; border-radius: 8px; }
  .heat-legend { font-size: 12.5px; }
  .result-grid { grid-template-columns: repeat(3, 1fr); max-width: 560px; margin-inline: auto; }
  .result { max-width: 620px; margin-inline: auto; }
  .review-list, .xp-row { max-width: 620px; margin-inline: auto; }
  .map { max-width: 640px; }
}

@media (min-width: 1400px) {
  .app { max-width: 1240px; }
  .app.with-nav .main { max-width: 900px; }
}

/* ---------- tetikus: beri sambutan saat disorot ---------- */
@media (hover: hover) and (pointer: fine) {
  .mode-tile:hover, .op-card:hover, .stage:hover:not(.locked), .hero-cta:hover,
  .quest:hover, .rank-row:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .answer:hover:not(:disabled) {
    border-color: var(--brand);
    transform: translateY(-2px);
  }
  .key:hover { background: var(--surface-2); }
  .nav-btn:hover { color: var(--ink); background: var(--surface-2); }
  .icon-btn:hover { background: var(--surface-2); }
  .btn:hover { filter: brightness(1.04); }
  .heat-cell:hover { outline: 2px solid var(--brand); outline-offset: 1px; }
  .stage.locked:hover { transform: none; }
}

/* ---------- pemain & pelajaran di layar lebar ---------- */
@media (min-width: 720px) {
  .player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .players { max-width: 680px; margin-inline: auto; }
  .lsn-plate { width: 112px; min-height: 86px; }
  .lsn-item { font-size: 27px; }
  .lsn-friend { width: 54px; height: 56px; }
  .lsn-bubble { font-size: 17px; }
}
@media (min-width: 1024px) {
  .player-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .players { max-width: 880px; }
  .players-head { justify-content: center; }
  .players-head .coach-bubble { flex: 0 1 auto; }
  /* Pelajaran: adegan di kiri, tombol & pilihan di kanan — tanpa menggulir. */
  .lesson { max-width: 1000px; margin-inline: auto; }
  .lsn-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
  .lsn-stage { min-height: 340px; position: sticky; top: 16px; padding: 22px 18px; }
  .lsn-plate { width: 150px; min-height: 116px; gap: 4px; }
  .lsn-plates.big .lsn-plate { width: 220px; min-height: 150px; }
  .lsn-plate-wide { width: 260px; min-height: 130px; }
  .lsn-item { font-size: 34px; }
  .lsn-plates.big .lsn-item { font-size: 42px; }
  .lsn-friend { width: 64px; height: 66px; }
  .lsn-pile { max-width: 440px; }
  .lsn-eq-big { font-size: 48px; }
  .lsn-total { font-size: 56px; }
  .lsn-actions { padding-top: 4px; }
  .lsn-kiko { width: 92px; height: 92px; flex-basis: 92px; }
}

/* ---------- teman belajar: Rafi & Nisa ---------- */
.welcome-duo { display: flex; justify-content: center; gap: 4px; }
.welcome-duo > div { width: 118px; height: 118px; }
.buddy-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.buddy-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 14px;
  border: 3px solid transparent; border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow-1); cursor: pointer; color: var(--ink);
  transition: transform var(--dur-2) var(--ease-back), border-color var(--dur-1);
}
.buddy-card:active { transform: scale(.96); }
.buddy-card.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.buddy-art { width: 104px; height: 104px; display: block; }
.buddy-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; }
.buddy-desc { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.buddy-intro { background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface)); }
.buddy-intro-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; }
.buddy-intro-desc { font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin: 2px 0 12px; }
.buddy-intro .buddy-card { background: var(--surface); }
@media (min-width: 720px) {
  .buddy-pick { max-width: 460px; margin-inline: auto; }
  .buddy-art { width: 128px; height: 128px; }
}

/* ---------- Toko Kue 3D ---------- */
.mode-tile.accent-game { background: linear-gradient(160deg, #FFE1C7, var(--surface) 70%); }
.mode-tile.accent-game .badge { background: var(--bad); }
.game-menu { padding-top: 6px; }
.game-menu-head { text-align: center; margin-bottom: 8px; }
.game-menu-art { display: flex; justify-content: center; gap: 2px; }
.game-menu-art .mascot { width: 104px; height: 104px; }
.game-menu-head h1 { font-size: 25px; margin: 6px 0 2px; }
.game-menu-head p { font-weight: 700; color: var(--ink-2); font-size: 14.5px; margin: 0 12px; }
.game-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.game-op {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 16px 14px; border: 3px solid transparent; border-radius: var(--radius-lg); cursor: pointer; color: var(--ink);
  background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-back);
}
.game-op:active { transform: scale(.96); }
.game-op.focus { border-color: var(--brand); }
.game-op-emoji { font-size: 34px; line-height: 1.1; }
.game-op-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; }
.game-op-desc { font-size: 12.5px; font-weight: 700; color: var(--ink-3); line-height: 1.35; }
.game-op-tag { margin-top: 4px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.game-op-badge { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 800; color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 99px; }

.game { display: flex; flex-direction: column; min-height: calc(100dvh - 40px); }
.game-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.game-stage {
  position: relative; height: min(50dvh, 460px); min-height: 280px; border-radius: var(--radius-xl);
  overflow: hidden; background: #FFE9D2; box-shadow: var(--shadow-2); touch-action: manipulation;
}
.game-canvas { display: block; width: 100%; height: 100%; }
.game-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.game-label {
  position: absolute; left: 0; top: 0; padding: 2px 9px; border-radius: 99px; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.3;
  color: var(--brand-ink); background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(22, 32, 74, .15);
}
.game-label:empty { display: none; }
.game-label.big { font-size: 26px; padding: 2px 12px; }
.game-label.bump { animation: pop .35s var(--ease-back); }
.game-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font-weight: 800; color: #9A6A44; }
.game-spinner { width: 42px; height: 42px; border-radius: 50%; border: 5px solid #F3CFAE; border-top-color: #E0904F; animation: game-spin .9s linear infinite; }
@keyframes game-spin { to { transform: rotate(360deg); } }
.game-panel { display: flex; flex-direction: column; gap: 10px; }
.game-panel .quiz-buddy { margin: 0; }
.game-order {
  align-self: center; padding: 8px 16px; border-radius: 16px; background: #FFF4E5; border: 2px dashed #F1B67F;
  font-weight: 800; font-size: 15px; color: #8A5A2B; text-align: center;
}
.game-order[hidden] { display: none !important; }
.game-order b { font-family: 'Baloo 2', sans-serif; font-size: 20px; color: #6B3E16; }
.game-actions { display: flex; flex-direction: column; gap: 10px; }
.game-actions .btn + .btn { margin-top: 0; }
.game-answers .answer { min-height: 72px; }
@media (prefers-reduced-motion: reduce) { .game-spinner { animation-duration: 3s; } }

@media (min-width: 720px) {
  .game-ops { grid-template-columns: repeat(4, 1fr); }
  .game-stage { height: min(52dvh, 520px); }
}
@media (min-width: 1024px) {
  /* Laptop: toko di kiri, panel percakapan & jawaban di kanan. */
  /* Halaman tanpa navigasi dibatasi 880px; toko 3D boleh memakai lebar layar. */
  .game { width: min(1180px, calc(100vw - 48px)); margin-left: calc(50% - min(590px, 50vw - 24px)); }
  .game-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
  .game-stage { height: calc(100dvh - 120px); max-height: 640px; }
  .game-panel { padding-top: 6px; }
  .game-menu { max-width: 900px; margin-inline: auto; }
}

/* HP & tablet: toko memenuhi satu layar; bilah atas & panel melayang di atasnya. */
@media (max-width: 1023px) {
  html.game-open, html.game-open body { overflow: hidden; overscroll-behavior: none; }
  .game { position: fixed; inset: 0; z-index: 30; min-height: 0; background: #FFE9D2; }
  .game-body { position: absolute; inset: 0; display: block; }
  .game-stage { position: absolute; inset: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; }
  .game-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3; margin: 0;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    background: linear-gradient(to bottom, rgba(255, 233, 210, .92), rgba(255, 233, 210, 0));
  }
  .game-top .icon-btn { background: rgba(255, 255, 255, .85); }
  .game-panel {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 58%; overflow-y: auto;
    padding: 14px 12px calc(12px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 -6px 24px rgba(22, 32, 74, .12);
  }
  .game-answers .answer { min-height: 62px; }
  .game-panel .game-order { padding: 6px 14px; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .game-panel { left: 50%; right: auto; width: min(640px, 100%); transform: translateX(-50%); }
}

/* Kue & donat polos untuk pelajaran — tanpa chip/taburan yang bisa ikut dihitung. */
.lsn-css { width: .95em; height: .95em; border-radius: 50%; margin: .08em; vertical-align: middle; }
.lsn-kue {
  /* Kue selai: tetes selai tunggal di tengah, tepi keemasan. */
  background:
    radial-gradient(circle at 44% 42%, #fff 0 5%, transparent 6%),
    radial-gradient(circle, #E8344E 0 24%, #B8213A 27%, #F4C985 29% 52%, #DFA25A 56% 80%, #C48441 84% 100%);
  box-shadow: 0 .05em .08em rgba(90, 50, 20, .25);
}
.lsn-donat {
  background: radial-gradient(circle, transparent 0 21%, #FF8ACB 23% 36%, #fff 37% 40%, #FF8ACB 41% 56%, #E9B074 58% 69%, #C98A47 71% 100%);
  box-shadow: 0 .05em .08em rgba(90, 50, 20, .25);
}
/* Benda yang harus diketuk diberi bidang sentuh lebih besar dari gambarnya. */
.lsn-item.tappable { padding: 10px; margin: -6px; border-radius: 50%; background-clip: content-box; }
.lsn-css.tappable { padding: 10px; margin: -4px; box-sizing: content-box; background-origin: content-box; background-clip: content-box; box-shadow: none; }

/* Pilihan penampilan penjaga toko (si anak sendiri) di menu Toko Kue. */
.keeper-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.keeper-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 12px;
  border: 3px solid transparent; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1);
  cursor: pointer; color: var(--ink);
}
.keeper-card.active { border-color: #FF8A3D; background: #FFF6EC; }
.keeper-art { position: relative; width: 84px; height: 84px; display: block; }
.keeper-art .mascot { width: 100%; height: 100%; }
/* Celemek kecil di depan gambar teman supaya terbaca sebagai penjaga toko. */
.keeper-apron {
  position: absolute; left: 50%; bottom: 14%; width: 30%; height: 26%; transform: translateX(-50%);
  background: #FFF6E8; border: 2px solid #FF8A3D; border-radius: 4px 4px 10px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.keeper-label { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; }
@media (min-width: 720px) { .keeper-pick { max-width: 420px; } }

/* Koin toko & layar "Belanja untuk toko". Koin hanya dari melayani pelanggan. */
.belanja-masuk {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 4px; padding: 12px 14px;
  border: 3px solid #FFC93D; border-radius: var(--radius-lg); cursor: pointer; color: var(--ink); text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, #FFE7A3 55%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-back);
}
.belanja-masuk:active { transform: scale(.97); }
.belanja-masuk-ikon { font-size: 36px; line-height: 1; }
.belanja-masuk-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.belanja-masuk-teks b { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; }
.belanja-masuk-teks small { font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.belanja-masuk-koin, .belanja-koin {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #7A4B00;
  background: #FFE7A3; border-radius: 99px; white-space: nowrap;
}
.belanja-masuk-koin { font-size: 18px; padding: 4px 12px; }
.koin-row { background: linear-gradient(135deg, color-mix(in srgb, #FFE7A3 70%, var(--surface)), var(--surface)); }
.koin-row .big { color: #8A5A00; }
.koin-row .koin-belanja { width: auto; margin: 0; padding: 10px 14px; flex: none; }

.belanja { padding-bottom: 16px; }
.belanja-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.belanja-koin { align-self: center; display: flex; align-items: baseline; gap: 6px; padding: 6px 18px; }
.belanja-koin-ikon { font-size: 24px; }
.belanja-koin-n { font-size: 30px; line-height: 1.1; }
.belanja-koin-t { font-size: 13px; font-weight: 800; }
.belanja-stage {
  position: relative; height: clamp(240px, 38dvh, 380px); border-radius: var(--radius-xl); overflow: hidden;
  background: #FFE9D2; box-shadow: var(--shadow-2); margin-bottom: 6px;
}
.belanja-stage .game-canvas { display: block; width: 100%; height: 100%; }
.belanja-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .belanja-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .belanja-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.belanja-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 150px;
  padding: 12px 8px 10px; border: 3px solid transparent; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease-back);
}
.belanja-item:active { transform: scale(.95); }
.belanja-item.on { border-color: #18B87B; background: color-mix(in srgb, #18B87B 10%, var(--surface)); }
.belanja-item.mine { border-color: var(--line); }
.belanja-item.bisa { border-color: #FFC93D; }
.belanja-item.mahal .belanja-ikon { opacity: .55; filter: saturate(.6); }
.belanja-ikon { width: 76px; height: 76px; display: block; }
.belanja-ikon svg { width: 100%; height: 100%; display: block; }
.belanja-nama { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15.5px; line-height: 1.2; text-align: center; }
.belanja-tag { margin-top: auto; font-size: 14px; font-weight: 800; padding: 3px 12px; border-radius: 99px; }
.belanja-tag.price { background: #FFE7A3; color: #7A4B00; font-family: 'Baloo 2', sans-serif; font-size: 16px; }
.belanja-tag.on { background: #18B87B; color: #fff; }
.belanja-tag.mine { background: var(--surface-2); color: var(--ink-2); }
.belanja-ke-toko { margin-top: 18px; }
.belanja-tanya { text-align: center; }
.belanja-tanya-ikon { width: 120px; height: 120px; margin: 4px auto 6px; }
.belanja-tanya-ikon svg { width: 100%; height: 100%; }
.belanja-tanya-harga { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; color: #8A5A00; }
.belanja-tanya-sisa { font-weight: 800; color: var(--ink-2); margin-bottom: 14px; }
.belanja-ya { font-size: 20px; min-height: 60px; }
@media (min-width: 1024px) { .belanja { max-width: 900px; margin-inline: auto; } }

/* ==========================================================================
   Layar penuh & teman belajar di kiri bawah
   Kuis dan pelajaran memenuhi tinggi layar HP: soal/adegan melebar ke ruang
   kosong, pilihan jawaban di bawahnya, dan teman belajar berdiri besar di
   kiri bawah sambil berbicara lewat balon (js/dock.js).
   ========================================================================== */

.main.full {
  display: flex;
  flex-direction: column;
  padding-top: calc(8px + env(safe-area-inset-top));
  padding-bottom: 0;
}
.main.full > .screen-full { flex: 1 0 auto; display: flex; flex-direction: column; }

.dock {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 6px -16px 0;
  padding: 14px 16px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 42%);
  pointer-events: none;
}
.dock > * { pointer-events: auto; }
.dock-buddy {
  flex: 0 0 auto;
  width: clamp(104px, 31vw, 150px);
  aspect-ratio: 1;
  margin: 0 0 -4px -10px;
}
.dock-actor { width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.dock-bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 620px;
  margin-bottom: clamp(26px, 8vw, 44px);
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: clamp(15.5px, 4.3vw, 19px);
  font-weight: 800;
  line-height: 1.38;
  color: var(--ink-2);
  transform-origin: 0% 80%;
}
.dock-bubble:empty, .dock-bubble:has(.dock-text:empty) { visibility: hidden; }
.dock-bubble::before {
  /* Ekor balon mengarah ke kepala teman belajar. */
  content: '';
  position: absolute;
  left: -9px;
  bottom: 16px;
  width: 22px;
  height: 18px;
  background: var(--surface);
  clip-path: polygon(100% 0, 0 78%, 100% 100%);
}
.dock-text b { color: var(--ink); }
/* Kalimat panjang: huruf sedikit lebih kecil supaya balon tidak menutupi tombol. */
.dock-bubble.long { font-size: clamp(14.5px, 3.9vw, 17px); padding: 10px 14px; }
.dock-replay {
  float: right;
  width: 38px;
  height: 38px;
  margin: -4px -6px 4px 8px;
  border: none;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 17px;
  cursor: pointer;
}
.dock-bubble.pop { animation: dock-pop .5s var(--ease-back); }
@keyframes dock-pop {
  0% { transform: scale(.55) rotate(-5deg); opacity: .2; }
  60% { transform: scale(1.04) rotate(1deg); opacity: 1; }
  100% { transform: none; }
}
.dock-w { display: inline-block; animation: dock-word .4s var(--ease-back) both; animation-delay: calc(var(--i) * 42ms); }
@keyframes dock-word {
  from { opacity: 0; transform: translateY(.45em) scale(.7); }
  to { opacity: 1; transform: none; }
}

/* Versi sebaris untuk layar yang digulir (beranda, peringkat, dll.). */
.dock-inline {
  position: relative;
  margin: 0;
  padding: 10px 14px 0 2px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  align-items: flex-end;
  overflow: hidden;
}
.dock-inline .dock-buddy { width: 96px; margin: 0 0 -2px 0; }
.dock-inline .dock-bubble {
  align-self: center;
  margin: 0 0 10px;
  background: var(--surface-2);
  box-shadow: none;
  font-size: 15px;
}
.dock-inline .dock-bubble::before { background: var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .dock-bubble.pop, .dock-w { animation: none; }
}
html[data-motion="reduced"] .dock-bubble.pop,
html[data-motion="reduced"] .dock-w { animation: none; }

/* ---------- kuis memenuhi layar (HP & tablet) ---------- */
@media (max-width: 1023px) {
  .quiz.screen-full .quiz-body { flex: 1 0 auto; display: flex; flex-direction: column; }
  .quiz.screen-full .quiz-stage { flex: 1 0 auto; display: flex; flex-direction: column; }
  .quiz.screen-full .qcard {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 30px 16px 20px;
  }
  .quiz.screen-full .qtext { font-size: clamp(3rem, 17vw, 5.4rem); }
  .quiz.screen-full .qtext-cmp { font-size: clamp(2rem, 10vw, 3.4rem); }
  .quiz.screen-full .qtext.qtext-panjang { font-size: clamp(2rem, 9.5vw, 3.2rem); }
  .quiz.screen-full .qtext.qtext-sangat-panjang { font-size: clamp(1.6rem, 7.4vw, 2.5rem); }
  .quiz.screen-full .qstory { font-size: clamp(17px, 4.8vw, 21px); }
  .quiz.screen-full .qstory-eq { font-size: clamp(28px, 8vw, 38px); }
  .quiz.screen-full .viz-box { padding: 14px 10px; }
  .quiz.screen-full .viz-box .viz { width: 100%; max-height: var(--viz-max, min(34vh, 330px)); }
  /* Soal bergambar tinggi di HP pendek: dirapatkan supaya semua jawaban terlihat di atas teman belajar (quiz.js pasLayar). */
  .quiz.screen-full.rapat .qcard { padding: 22px 12px 12px; gap: 2px; }
  .quiz.screen-full.rapat .qtext:not(.qtext-panjang):not(.qtext-sangat-panjang) { font-size: clamp(2.2rem, 12vw, 3.6rem); }
  .quiz.screen-full.rapat .qtext .blank { min-width: 1.2em; }
  .quiz.screen-full.rapat .viz-box { padding: 8px 6px; margin-top: 6px; }
  .quiz.screen-full.rapat .viz-cap { font-size: 12.5px; margin-top: 2px; }
  .quiz.screen-full.rapat .answers { gap: 8px; }
  .quiz.screen-full.rapat .answer { min-height: 60px; font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .quiz.screen-full .viz-cap { font-size: 14px; }
  .quiz.screen-full .answers { gap: 12px; }
  .quiz.screen-full .answer { min-height: clamp(76px, 11vh, 104px); font-size: clamp(1.9rem, 10vw, 2.6rem); }
  .quiz.screen-full .key { min-height: clamp(56px, 7.4vh, 76px); font-size: clamp(24px, 7vw, 30px); }
  .quiz.screen-full .entry { min-height: 70px; font-size: 34px; }
}
.quiz-side > .btn-ghost { margin-top: 10px; }

/* ---------- pelajaran memenuhi layar ---------- */
.lesson.screen-full .lsn-body { flex: 1 0 auto; }
@media (max-width: 1023px) {
  .lesson.screen-full .lsn-stage { flex: 1 0 auto; padding: 18px 10px; gap: 16px; }
  .lesson.screen-full .lsn-plates { gap: 14px 12px; }
  .lesson.screen-full .lsn-plate { width: clamp(88px, 25.5vw, 150px); min-height: clamp(72px, 20vw, 116px); gap: 4px 5px; }
  .lesson.screen-full .lsn-plates.big .lsn-plate { width: clamp(170px, 46vw, 240px); min-height: clamp(110px, 30vw, 160px); }
  .lesson.screen-full .lsn-plate-wide { width: clamp(190px, 56vw, 280px); }
  .lesson.screen-full .lsn-item { font-size: clamp(24px, 7.2vw, 34px); }
  .lesson.screen-full .lsn-plates.big .lsn-item { font-size: clamp(34px, 10vw, 46px); }
  .lesson.screen-full .lsn-friend { width: clamp(50px, 14vw, 68px); height: clamp(52px, 14.6vw, 70px); }
  .lesson.screen-full .lsn-friend-name { font-size: 13px; }
  .lesson.screen-full .lsn-pile { max-width: 92%; padding: 10px 14px; }
  .lesson.screen-full .lsn-total { font-size: clamp(44px, 14vw, 64px); }
  .lesson.screen-full .lsn-eq-big { font-size: clamp(38px, 11vw, 52px); }
  .lesson.screen-full .lsn-eq-small { font-size: 13px; max-width: 90px; }
  .lesson.screen-full .lsn-info { font-size: 17px; }
  .lesson.screen-full .lsn-label { font-size: 20px; }
  .lesson.screen-full .lsn-actions .btn { min-height: 60px; font-size: 18px; }
  .lesson.screen-full .answer { min-height: clamp(72px, 10vh, 96px); }
}
@media (min-width: 1024px) {
  .dock-buddy { width: 150px; }
  .dock-bubble { font-size: 19px; }
  .main.full { padding-top: 18px; }
}

/* ---------- gerak kuis yang bervariasi ---------- */
.qcard.qin-0 { animation: qin-drop .6s var(--ease-back) both; }
.qcard.qin-1 { animation: qin-slide .55s var(--ease-back) both; }
.qcard.qin-2 { animation: qin-zoom .55s var(--ease-back) both; }
.qcard.qin-3 { animation: qin-swing .7s var(--ease-back) both; transform-origin: 50% 0; }
@keyframes qin-drop {
  0% { opacity: 0; transform: translateY(-40px) scale(.96); }
  60% { opacity: 1; transform: translateY(6px) scale(1.01, .98); }
  100% { transform: none; }
}
@keyframes qin-slide {
  0% { opacity: 0; transform: translateX(60px) rotate(3deg); }
  70% { opacity: 1; transform: translateX(-6px) rotate(-.6deg); }
  100% { transform: none; }
}
@keyframes qin-zoom {
  0% { opacity: 0; transform: scale(.8); }
  65% { opacity: 1; transform: scale(1.03); }
  100% { transform: none; }
}
@keyframes qin-swing {
  0% { opacity: 0; transform: rotateX(-50deg); }
  55% { opacity: 1; transform: rotateX(10deg); }
  80% { transform: rotateX(-4deg); }
  100% { transform: none; }
}
/* Topik bandingkan bilangan: pertanyaannya di atas, kedua bilangan besar di bawah. */
.qtext .bd-tanya, .qtext .bd-tanya.tok { display: block; width: 100%; font-size: .42em; line-height: 1.3; margin-bottom: 4px; color: var(--ink-2); }
.qtext .tok, .qstory-eq .tok { display: inline-block; animation: tok-in .5s var(--ease-back) both; animation-delay: calc(.12s + var(--i, 0) * 90ms); }
@keyframes tok-in {
  0% { opacity: 0; transform: translateY(.35em) scale(.4) rotate(-8deg); }
  70% { opacity: 1; transform: translateY(-.05em) scale(1.08) rotate(2deg); }
  100% { transform: none; }
}
.qtext .blank.tok { animation: tok-in .5s var(--ease-back) both, blank-glow 2.2s 1s ease-in-out infinite; animation-delay: calc(.12s + var(--i, 0) * 90ms), 1.2s; }
@keyframes blank-glow { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.06); } }
g.viz-pop { transform-box: fill-box; transform-origin: center; animation: viz-pop .42s var(--ease-back) both; }
@keyframes viz-pop {
  0% { opacity: 0; transform: scale(0) translateY(-30%); }
  70% { opacity: 1; transform: scale(1.15); }
  100% { transform: none; }
}
.answers .answer:not(:disabled) { animation: ans-in .45s var(--ease-back) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
@keyframes ans-in {
  0% { opacity: 0; transform: translateY(18px) scale(.85); }
  100% { opacity: 1; transform: none; }
}
.answer { position: relative; overflow: visible; }
.answer.correct { animation: ans-win .6s var(--ease-back); }
.answer.correct::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 4px solid var(--ok);
  animation: ans-ring .7s ease-out both;
  pointer-events: none;
}
@keyframes ans-win { 0% { transform: scale(1); } 35% { transform: scale(1.1) rotate(-2deg); } 65% { transform: scale(.97) rotate(1deg); } 100% { transform: none; } }
@keyframes ans-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.6); } }
@media (prefers-reduced-motion: reduce) {
  .qcard[class*="qin-"], .qtext .tok, .qstory-eq .tok, g.viz-pop, .answers .answer, .answer.correct, .answer.correct::after { animation: none !important; }
}
html[data-motion="reduced"] .qcard[class*="qin-"], html[data-motion="reduced"] .qtext .tok,
html[data-motion="reduced"] .qstory-eq .tok, html[data-motion="reduced"] g.viz-pop,
html[data-motion="reduced"] .answers .answer, html[data-motion="reduced"] .answer.correct,
html[data-motion="reduced"] .answer.correct::after { animation: none !important; }

/* ---------- pilih pemain: kartu besar memenuhi layar ---------- */
.players.screen-full { padding-top: 10px; }
.players-title { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.15; text-align: center; margin: auto 0 18px; padding-top: 6px; }
.players.screen-full .player-grid { align-content: start; gap: 14px; }
.players.screen-full .player-card { padding: 16px 8px 14px; animation: card-in .55s var(--ease-back) both; animation-delay: calc(.1s + var(--i, 0) * 90ms); }
.players.screen-full .player-av { font-size: clamp(84px, 26vw, 120px); line-height: 1; }
.players.screen-full .player-card.add .player-av { font-size: clamp(50px, 14vw, 70px); padding: clamp(14px, 5vw, 24px) 0; }
.players.screen-full .player-name { font-size: clamp(20px, 5.6vw, 24px); }
.players.screen-full .player-meta { font-size: 13px; }
.players.screen-full > .btn-ghost { margin-bottom: auto; }
.player-card.picked .av-wrap { animation: av-picked .5s var(--ease-back); }
@keyframes av-picked { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1.1); } }
@keyframes card-in {
  0% { opacity: 0; transform: translateY(26px) scale(.8) rotate(-3deg); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .players.screen-full .player-card, .player-card.picked .av-wrap { animation: none; } }
html[data-motion="reduced"] .players.screen-full .player-card,
html[data-motion="reduced"] .player-card.picked .av-wrap { animation: none; }

/* ---------- layar persiapan (Tantangan, Soal Cerita) ---------- */
.setup .section-title { margin-top: 6px; }
.setup .mode-tile { min-height: clamp(130px, 19vh, 170px); }
.setup .mode-tile .emoji { font-size: clamp(34px, 10vw, 44px); }
.setup .mode-tile .t { font-size: 18px; }
.setup .op-card { min-height: clamp(84px, 11vh, 104px); animation: card-in .5s var(--ease-back) both; animation-delay: calc(.08s + var(--i, 0) * 80ms); }
.setup .op-card .op-emoji { width: 56px; height: 56px; font-size: 28px; }
.setup .op-card .op-name { font-size: 19px; }
.setup > .card { margin-bottom: auto; }
@media (prefers-reduced-motion: reduce) { .setup .op-card { animation: none; } }
html[data-motion="reduced"] .setup .op-card { animation: none; }

/* ---------- avatar bergambar (js/avatars.js) di wadah lama ---------- */
.avatar-opt { padding: 4px; font-size: 0; line-height: 0; }
.avatar-opt .av-wrap, .hero-avatar .av-wrap, .rank-av .av-wrap { width: 100%; height: 100%; }
.avatar-opt.active .av-wrap { animation: av-picked .5s var(--ease-back); transform: scale(1.06); }
.avatar-opt.taken .av-wrap { filter: saturate(.6); }
.hero-avatar { background: transparent; padding: 0; }
.rank-av { background: transparent; }
.who-av { font-size: 52px; line-height: 0; }
.manage-av { font-size: 42px; width: 46px; line-height: 0; }
.match-who .av-wrap { font-size: 26px; vertical-align: -7px; }
@media (prefers-reduced-motion: reduce) { .avatar-opt.active .av-wrap { animation: none; } }
html[data-motion="reduced"] .avatar-opt.active .av-wrap { animation: none; }

/* Teman belajar besar di layar hasil (tanpa balon). */
.dock.dock-hero { position: static; justify-content: center; margin: 0 auto 2px; padding: 0; background: none; }
.dock-hero .dock-bubble { display: none; }
.dock-hero .dock-buddy { width: clamp(130px, 40vw, 170px); margin: 0; }

/* ---------- layar penuh di laptop: soal & adegan ikut membesar ---------- */
@media (min-width: 1024px) {
  .main.full.no-nav { max-width: 1120px; }
  .quiz.screen-full .quiz-body {
    flex: 1 0 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
  }
  .quiz.screen-full .qcard {
    min-height: min(60vh, 560px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .quiz.screen-full .qtext { font-size: clamp(4.2rem, 6vw, 5.6rem); }
  .quiz.screen-full .viz-box .viz { width: 100%; max-height: 40vh; }
  .lesson.screen-full { max-width: none; }
  .lesson.screen-full .lsn-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; }
  .lesson.screen-full .lsn-stage { min-height: min(62vh, 600px); position: static; }
  .players.screen-full .player-av { font-size: 120px; }
}

/* ---------- jalan setapak petualangan di bilah atas kuis ---------- */
.trail { position: relative; height: 38px; margin-top: 4px; --p: 0; }
.trail-path, .trail-done {
  position: absolute; left: 6px; right: 26px; top: 27px; height: 6px; border-radius: 3px;
}
.trail-path { background: repeating-linear-gradient(90deg, var(--surface-3) 0 10px, transparent 10px 16px); }
.trail-done { right: auto; width: calc((100% - 32px) * var(--p)); background: linear-gradient(90deg, var(--ok), var(--brand)); transition: width .6s var(--ease); }
.trail-goal { position: absolute; right: 0; top: 9px; font-size: 22px; line-height: 1; animation: trail-goal 2.4s ease-in-out infinite; }
@keyframes trail-goal { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(6deg); } }
.trail-walker {
  position: absolute; top: 0; width: 34px; height: 34px; margin-left: -12px;
  left: calc(6px + (100% - 32px) * var(--p));
  transition: left .6s var(--ease);
}
.trail-walker.trail-hop { animation: trail-hop .6s var(--ease); }
@keyframes trail-hop {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.1, .88); }
  50% { transform: translateY(-10px) scale(.94, 1.06); }
  80% { transform: translateY(0) scale(1.08, .92); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .trail-goal, .trail-walker.trail-hop { animation: none; } }
html[data-motion="reduced"] .trail-goal, html[data-motion="reduced"] .trail-walker.trail-hop { animation: none; }

/* ---------- pertarungan boss (Ujian Tahap, js/boss.js) ---------- */
.boss-arena {
  position: relative;
  margin: 0 0 12px;
  padding: 10px 12px 0;
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 90% at 50% 100%, #FFE7A8 0%, #F6C1FF 45%, #8C7BFF 100%);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.boss-hud { display: flex; align-items: center; gap: 10px; }
.boss-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; color: #2A1F66; white-space: nowrap; }
.boss-hp { flex: 1; display: flex; gap: 4px; }
.boss-hp i {
  flex: 1; height: 14px; border-radius: 7px; background: #FF4D6D;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 0 2px rgba(255, 255, 255, .7);
  transition: transform .3s var(--ease-back), background .3s;
}
.boss-hp i.lost { background: rgba(42, 31, 102, .25); transform: scaleY(.6); }
.boss-stage { position: relative; height: clamp(120px, 19vh, 190px); display: flex; justify-content: center; align-items: flex-end; }
.boss-body { height: 100%; aspect-ratio: 200 / 210; transform-origin: 50% 100%; }
.boss-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.boss-svg .bs-all { transform-box: view-box; transform-origin: 100px 196px; animation: bs-bob 2.2s ease-in-out infinite; }
.boss-svg .bs-wing-l { transform-box: view-box; transform-origin: 58px 100px; animation: bs-flap-l .8s ease-in-out infinite; }
.boss-svg .bs-wing-r { transform-box: view-box; transform-origin: 142px 100px; animation: bs-flap-r .8s ease-in-out infinite; }
.boss-svg .bs-tent { transform-box: fill-box; transform-origin: 50% 0; animation: bs-tent 1.6s ease-in-out infinite; }
.boss-svg .bs-bulb { animation: bs-bulb 1s steps(2) infinite; }
.boss-svg .bs-crown { transform-box: fill-box; transform-origin: 50% 100%; animation: bs-crown 2.2s ease-in-out infinite; }
.boss-svg .bs-dizzy { transform-box: view-box; transform-origin: 100px 34px; animation: bs-spin 1.2s linear infinite; }
.boss-friend .bs-all { animation: bs-happy .9s ease-in-out infinite; }
@keyframes bs-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(1.02, .98); } }
@keyframes bs-flap-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes bs-flap-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes bs-tent { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes bs-bulb { 50% { opacity: .35; } }
@keyframes bs-crown { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@keyframes bs-happy { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-10px) rotate(-5deg); } 75% { transform: translateY(-10px) rotate(5deg); } }
.boss-body.bs-hurt { animation: bs-hurt .52s var(--ease); }
.boss-body.bs-laugh { animation: bs-laugh .9s ease-in-out; }
.boss-body.bs-defeat { animation: bs-defeat 1.3s var(--ease); }
.boss-body.bs-flee { animation: bs-flee 1.3s ease-in forwards; }
@keyframes bs-hurt {
  0% { transform: none; filter: none; }
  15% { transform: translateX(10px) scale(.92, 1.06) rotate(6deg); filter: brightness(2.2); }
  35% { transform: translateX(-8px) rotate(-5deg); filter: brightness(1.4); }
  60% { transform: translateX(5px) rotate(3deg); }
  100% { transform: none; filter: none; }
}
@keyframes bs-laugh { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-4deg) translateY(-6px); } 40%, 80% { transform: rotate(4deg) translateY(-6px); } }
@keyframes bs-defeat { 0% { transform: none; } 30% { transform: rotate(-12deg) scale(.9); } 55% { transform: rotate(360deg) scale(.75); } 80% { transform: rotate(360deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes bs-flee { 0% { transform: none; } 25% { transform: translateY(-14px) rotate(-6deg); } 100% { transform: translate(140%, -10px) rotate(20deg) scale(.7); opacity: 0; } }
.boss-say {
  position: absolute; left: 8px; top: 8px; max-width: 46%;
  padding: 7px 11px; border-radius: 14px 14px 14px 4px;
  background: #fff; color: #2A1F66; font-weight: 800; font-size: 13.5px; line-height: 1.3;
  box-shadow: 0 4px 10px rgba(42, 31, 102, .18);
  opacity: 0; transform: scale(.6); transform-origin: 0 100%;
}
.boss-say.show { animation: boss-say 2.6s var(--ease-back) forwards; }
@keyframes boss-say { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.05); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
.boss-dmg {
  position: absolute; left: 58%; top: 18%; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 30px;
  color: #FF2E55; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; pointer-events: none;
  animation: boss-dmg .9s ease-out forwards;
}
@keyframes boss-dmg { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; transform: translateY(-6px) scale(1.2); } 100% { opacity: 0; transform: translateY(-40px) scale(1); } }
.boss-star { position: fixed; left: -16px; top: -16px; z-index: 90; font-size: 32px; line-height: 1; pointer-events: none; filter: drop-shadow(0 0 6px #FFD23D); }
html[data-theme="dark"] .boss-arena { background: radial-gradient(120% 90% at 50% 100%, #6B4FD8 0%, #3A2A8C 55%, #1C1650 100%); }
html[data-theme="dark"] .boss-name { color: #F2EEFF; }
@media (min-width: 1024px) { .boss-stage { height: 200px; } .boss-arena { margin-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .boss-svg *, .boss-body[class*="bs-"], .boss-say.show, .boss-dmg { animation: none !important; }
  .boss-say.show { opacity: 1; transform: none; }
}
html[data-motion="reduced"] .boss-svg *, html[data-motion="reduced"] .boss-body[class*="bs-"], html[data-motion="reduced"] .boss-dmg { animation: none !important; }
html[data-motion="reduced"] .boss-say.show { animation: none; opacity: 1; transform: none; }
.boss-end { align-items: center; }
.boss-end-emo { font-size: clamp(64px, 20vw, 110px); line-height: 1; animation: pop .6s var(--ease-back); }
.boss-end-t { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(30px, 9vw, 44px); line-height: 1.1; }
.boss-end-d { font-weight: 700; color: var(--ink-2); font-size: 16px; }
/* Boss 3D (model buatan seniman) menggantikan SVG begitu siap. */
.boss-3dhost { position: absolute; inset: 0 0 0 0; pointer-events: none; }
.boss-canvas { display: block; width: 100%; height: 100%; }
.boss-3d .boss-body { visibility: hidden; }
.boss-3d .boss-stage { height: clamp(150px, 24vh, 240px); }
@media (min-width: 1024px) {
  .boss-3d .boss-stage, .boss-stage { height: min(26vh, 220px); }
  /* Dengan arena boss, kartu soal tidak dipaksa tinggi supaya tidak tertutup teman belajar. */
  .quiz.screen-full .boss-arena ~ .quiz-body .qcard { min-height: 0; }
  .quiz.screen-full .boss-arena ~ .quiz-body .quiz-stage { position: static; }
  .quiz.screen-full .boss-arena ~ .quiz-body .qtext { font-size: clamp(3.4rem, 5vw, 4.6rem); }
}

/* ---------- teman belajar 3D (js/buddy3d.js) ---------- */
.b3d { position: relative; display: block; width: 100%; height: 100%; }
.b3d > svg { transition: opacity .25s; }
html:not(.b3d-off) .b3d > svg { opacity: 0; }
.b3d-canvas { position: absolute; inset: -6% -6% 0; width: 112%; height: 106%; display: block; pointer-events: none; opacity: 0; transition: opacity .35s; }
.b3d.b3d-ready > .b3d-canvas { opacity: 1; }
html.b3d-off .b3d-canvas { display: none; }

/* Kalimat matematika di panel jawaban Toko Kue ("6 : 2 = ?"). */
.game-eq {
  align-self: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(30px, 8.5vw, 40px); line-height: 1.05;
  color: var(--ink); letter-spacing: .01em;
}
.game-eq .op { color: var(--ink-3); margin: 0 .12em; }
.game-eq .ans { display: inline-block; min-width: .9em; padding: 0 .1em; border-bottom: 4px solid var(--brand); color: var(--brand); text-align: center; }
.game-eq .ans.shown { color: var(--ok-ink); border-color: var(--ok); animation: pop .4s var(--ease-back); }
.game-eq .sisa { font-size: .55em; color: var(--ink-3); margin: 0 .1em; }
/* Level Toko (paket 21): papan angka di panel toko, lebih ringkas supaya toko tetap terlihat. */
.game-entry { margin-bottom: 0; min-height: 54px; }
.game-keypad { gap: 8px; }
.game-keypad .key { min-height: 50px; }
.game-op-level { font-size: 12px; font-weight: 800; color: #8A5A00; line-height: 1.3; }
.game-op-level b { margin-left: 4px; }
.toko-row { background: linear-gradient(135deg, color-mix(in srgb, #FFD6E7 70%, var(--surface)), var(--surface)); }
.toko-row.naik { animation: pop .5s var(--ease-back); }
.toko-row .big { color: #A0255A; }
@media (prefers-reduced-motion: reduce) { .toko-row.naik { animation: none; } }

/* ==========================================================================
   Cara bersusun di kertas (js/bersusun.js)
   Kertas berpetak seperti buku tulis matematika: angka tulisan tangan,
   garis & coretan pensil yang tergambar, stabilo pada kolom yang dikerjakan.
   Tempo langkahnya diatur JS (suara); animasi di sini hanya hiasan dan ikut
   mati saat "animasi sedikit" — temponya tidak ikut cepat (aturan 19).
   ========================================================================== */

:root {
  --bs-kertas: #FFFDF5;
  --bs-kotak: rgba(76, 111, 255, .14);
  --bs-tinta: #1F2A55;
  --bs-hasil: #2448C8;
  --bs-merah: #E0413A;
  --bs-stabilo: rgba(255, 213, 61, .55);
  --bs-pudar: #A3ABC6;
  --bs-abu: #7C86A8;
  --bs-pita: #FFFFFF;
  --bs-ok: #0F9D63;
}
[data-theme="dark"] {
  --bs-kertas: #1D2552;
  --bs-kotak: rgba(170, 188, 255, .13);
  --bs-tinta: #EEF2FF;
  --bs-hasil: #A9BEFF;
  --bs-merah: #FF8077;
  --bs-stabilo: rgba(255, 213, 61, .26);
  --bs-pudar: #66739F;
  --bs-abu: #8F9BC8;
  --bs-pita: #161E46;
  --bs-ok: #45DCA0;
}

.bs { container-type: inline-size; margin-top: 12px; text-align: left; }
.bs-paper {
  --bs-cell: 46px;
  --bs-font: 'Patrick Hand', 'Baloo 2', 'Comic Sans MS', cursive;
  position: relative;
  background: var(--bs-kertas);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(22, 32, 74, .05), 0 8px 22px rgba(22, 32, 74, .10);
  overflow: hidden;
}
@supports (width: 1cqi) {
  .bs-paper { --bs-cell: clamp(30px, calc(100cqi / (var(--bs-cols) + .75)), 58px); }
}
.bs-judul {
  position: relative; z-index: 2;
  padding: 9px 14px 2px;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--bs-abu);
}
.bs-body {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 4px calc(var(--bs-cell) * .6);
  padding: calc(var(--bs-cell) * .3) calc(var(--bs-cell) * .3) calc(var(--bs-cell) * .35);
  overflow: hidden;
}
.bs-ada-kepala .bs-body { padding-top: calc(var(--bs-cell) * .72); }

.bs-grid {
  position: relative; z-index: 0; flex: none;
  width: calc(var(--bs-cell) * var(--bs-cols));
  height: calc(var(--bs-cell) * var(--bs-rows));
}
/* Petak kertas digambar dari titik awal kisi, jadi angka selalu tepat di dalam kotak
   di mana pun kisinya diletakkan. */
.bs-grid::before {
  content: ''; position: absolute; inset: -480px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--bs-kotak) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--bs-kotak) 1.5px, transparent 1.5px);
  background-size: var(--bs-cell) var(--bs-cell);
  background-position: 480px 480px;
}

.bs-fokus-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bs-fokus {
  position: absolute;
  left: calc(var(--bs-cell) * var(--c0, 0) - 3px);
  top: calc(var(--bs-cell) * var(--r0, 0) - 2px);
  width: calc(var(--bs-cell) * var(--cw, 1) + 6px);
  height: calc(var(--bs-cell) * var(--rh, 1) + 4px);
  border-radius: 12px 9px 13px 8px;
  background: var(--bs-stabilo);
  opacity: 0;
  transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease), opacity .3s;
}
.bs-fokus.on { opacity: 1; }

.bs-m {
  position: absolute; z-index: 1;
  left: calc(var(--bs-cell) * var(--c));
  top: calc(var(--bs-cell) * var(--r));
  width: calc(var(--bs-cell) * var(--w, 1));
  height: var(--bs-cell);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bs-font);
  font-size: calc(var(--bs-cell) * .84);
  line-height: 1;
  color: var(--bs-tinta);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.bs-m.bs-on { opacity: 1; animation: bs-tulis .6s ease-out both; }
/* Tulisan tangan tidak pernah tegak sempurna. */
.bs-angka:nth-child(3n) { rotate: -2.5deg; }
.bs-angka:nth-child(3n+1) { rotate: 1.5deg; }
@keyframes bs-tulis {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(3px); }
  35% { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.bs-p-hasil, .bs-p-sisa { color: var(--bs-hasil); }
.bs-p-bantu { color: var(--bs-tinta); }
.bs-geser { color: var(--bs-pudar); }
.bs-tanda { font-size: calc(var(--bs-cell) * .7); color: var(--bs-abu); }
.bs-tanda-kecil { font-size: calc(var(--bs-cell) * .62); justify-content: flex-end; padding-right: calc(var(--bs-cell) * .08); }
.bs-kecil {
  align-items: flex-end;
  padding-bottom: calc(var(--bs-cell) * .02);
  font-size: calc(var(--bs-cell) * .48);
  color: var(--bs-merah);
}
.bs-pra {
  align-items: flex-start; justify-content: flex-start;
  padding: calc(var(--bs-cell) * .01) calc(var(--bs-cell) * .07);
  font-size: calc(var(--bs-cell) * .44);
  color: var(--bs-merah);
  z-index: 2;
}
.bs-pra.bs-pos-kecil { align-items: flex-end; padding: 0 0 calc(var(--bs-cell) * .02) calc(var(--bs-cell) * .17); font-size: calc(var(--bs-cell) * .44); }
.bs-p-simpan.bs-pra { padding-left: calc(var(--bs-cell) * .04); }
.bs-kepala {
  height: calc(var(--bs-cell) * .55);
  align-items: flex-end;
  font-family: 'Nunito', sans-serif; font-weight: 800;
  font-size: max(11px, calc(var(--bs-cell) * .26));
  color: var(--bs-abu); letter-spacing: .04em;
}
.bs-label {
  justify-content: flex-end;
  padding-right: calc(var(--bs-cell) * .16);
  font-size: calc(var(--bs-cell) * .56);
  color: var(--bs-merah);
}
.bs-dicoret { color: var(--bs-pudar) !important; }

.bs-ink { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bs-garis {
  fill: none; stroke: var(--bs-tinta); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.bs-garis.bs-on { animation: bs-gores .7s ease-in-out forwards; }
.bs-coret {
  fill: none; stroke: var(--bs-merah); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.bs-coret.bs-on { animation: bs-gores .5s ease-out forwards; }
@keyframes bs-gores { to { stroke-dashoffset: 0; } }
.bs-turun { opacity: 0; transition: opacity .5s; }
.bs-turun.bs-on { opacity: 1; }
.bs-turun-garis { fill: none; stroke: var(--bs-abu); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 11; }
.bs-turun-panah { fill: none; stroke: var(--bs-abu); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

/* Coretan di pinggir kertas: mencari "berapa kali muat". */
.bs-catatan {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  min-width: calc(var(--bs-cell) * 3.2);
  padding: calc(var(--bs-cell) * .08) calc(var(--bs-cell) * .2) calc(var(--bs-cell) * .1);
  border-left: 2px dashed var(--bs-kotak);
  font-family: var(--bs-font);
  font-size: max(20px, calc(var(--bs-cell) * .5));
  line-height: 1.25;
  color: var(--bs-abu);
}
.bs-catatan-judul { font-size: .7em; opacity: .85; }
.bs-note { opacity: 0; white-space: nowrap; }
.bs-note.bs-on { opacity: 1; animation: bs-tulis .6s ease-out both; }
.bs-note.ok span { color: var(--bs-tinta); }
.bs-note.ok b { color: var(--bs-ok); }
.bs-note.no span { text-decoration: line-through; text-decoration-color: var(--bs-merah); text-decoration-thickness: 2px; }
.bs-note.no b { color: var(--bs-merah); }

.bs-say {
  position: relative; z-index: 2;
  min-height: 52px;
  padding: 11px 14px 12px;
  background: var(--bs-pita);
  border-top: 2px dashed var(--bs-kotak);
  font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 17px; line-height: 1.35;
  color: var(--ink);
}
.bs-say:empty::before { content: '✏️'; opacity: .5; }
.bs-say-baru { animation: bs-say-in .35s var(--ease) both; }
@keyframes bs-say-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Pensil yang ikut menulis — hiasan, disembunyikan saat animasi sedikit. */
.bs-pensil {
  position: absolute; z-index: 3; pointer-events: none;
  width: calc(var(--bs-cell) * .95); height: calc(var(--bs-cell) * .95);
  left: calc(var(--bs-cell) * (var(--c, 0) + .5));
  top: calc(var(--bs-cell) * (var(--r, 0) - .55));
  opacity: 0;
  transition: left .4s var(--ease), top .4s var(--ease), opacity .3s;
}
.bs-pensil svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(22, 32, 74, .2)); }
.bs-pensil.bs-nulis { opacity: 1; animation: bs-goyang .32s ease-in-out 3; }
@keyframes bs-goyang { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 3px); } }

.bs-ulang { width: 100%; margin-top: 10px; }
.bs-selesai .bs-ulang { animation: bs-say-in .4s var(--ease) both; }

/* Di dalam umpan balik, judul "cara lain" dibuat ringkas di bawah kertas. */
.strategy.bs-lain { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) { .bs-pensil { display: none; } }
html[data-motion="reduced"] .bs-pensil { display: none; }
.bs-note.bs-lama { display: none; }

/* ---------- mengerjakan sendiri di kertas (bersusunInteraktif) ---------- */
.qcard.qcard-bs { padding: 14px 10px 10px; justify-content: flex-start; gap: 2px; }
.quiz.screen-full .qcard.qcard-bs { padding: 14px 10px 10px; justify-content: flex-start; }
.qcard-bs .qtext.qtext-bs, .quiz.screen-full .qcard-bs .qtext.qtext-bs { font-size: clamp(1.7rem, 7.6vw, 2.4rem); margin-top: 4px; }
.qcard-bs .bs-say { min-height: 46px; padding: 9px 12px 10px; }
/* Coretan pinggir baru muncul kalau sudah ada isinya (saat diperagakan). */
.bs-main .bs-catatan:not(:has(.bs-note.bs-on)) { display: none; }
/* Kertas + papan angka harus muat satu layar HP bersama teman belajar di bawah. */
@supports (width: 1cqi) {
  .bs-main .bs-paper { --bs-cell: clamp(30px, min(calc(100cqi / (var(--bs-cols) + .75)), 6.3dvh, calc(36dvh / var(--bs-rows))), 58px); }
}
.qcard-bs .qstory-bs { font-size: 16px; }
.qcard-bs .bs { margin-top: 8px; }

.bs-kotak {
  position: absolute; z-index: 3;
  left: calc(var(--bs-cell) * var(--c) + 3px);
  top: calc(var(--bs-cell) * var(--r) + 3px);
  width: calc(var(--bs-cell) - 6px); height: calc(var(--bs-cell) - 6px);
  display: flex; align-items: center; justify-content: center;
  border: 3px dashed var(--brand);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  font-family: var(--bs-font);
  font-size: calc(var(--bs-cell) * .8);
  line-height: 1;
  color: var(--bs-tinta);
  animation: bs-kotak-denyut 1.6s ease-in-out infinite;
}
.bs-kotak.isi { border-style: solid; }
.bs-kotak.kursor::after {
  /* Garis tulis di dasar kotak — bukan garis tegak yang mirip angka 1. */
  content: ''; position: absolute; left: 26%; right: 26%; bottom: 16%;
  height: 4px; border-radius: 2px; background: var(--brand);
  animation: bs-kedip 1.1s steps(2, start) infinite;
}
.bs-kotak.salah { border-color: var(--bs-merah); animation: bs-geleng .45s ease; }
@keyframes bs-kotak-denyut { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 20%, transparent); } }
@keyframes bs-kedip { to { visibility: hidden; } }
@keyframes bs-geleng {
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* Papan angka besar: 1–5, 6–0, lalu hapus & centang. */
.bs-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.bs-pad .bs-key {
  min-height: clamp(54px, 7vh, 74px);
  padding: 0;
  font-size: clamp(28px, 7.6vw, 34px);
  touch-action: manipulation;
  transition: opacity .2s;
}
.bs-pad .bs-del { grid-column: span 2; font-size: 24px; }
.bs-pad .bs-ok { grid-column: span 3; }
.bs-pad .bs-key:disabled { opacity: .38; }
/* Hapus & centang hanya perlu di kolom terakhir (hasilnya bisa dua angka). */
.bs-pad:not(.perlu-ok) .bs-del, .bs-pad:not(.perlu-ok) .bs-ok { display: none; }
.bs-main .bs-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; }
.qcard-bs .bs-bantu {
  flex: none;
  min-height: 38px; padding: 0 14px;
  border: none; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn-ink);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.qcard-bs .bs-bantu:disabled { opacity: .5; }
/* Lewati narasi kertas: anak yang tidak sabar tidak perlu menunggu suaranya selesai. */
.bs-lewati {
  flex: none; margin-left: auto;
  min-height: 38px; padding: 0 14px;
  border: none; border-radius: 999px;
  background: var(--surface-2, #eef1ff); color: var(--ink, #1d2353);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px;
  box-shadow: var(--shadow-1); cursor: pointer;
}
.bs-lewati[hidden] { display: none !important; }
.qcard-bs .bs-lewati + .bs-bantu, .qcard-bs .bs-bantu + .bs-lewati { margin-left: 8px; }
.qcard-bs .blank.terisi { color: var(--ok-ink); border-color: var(--ok); }
.bs-pad.mati .bs-key { opacity: .42; pointer-events: none; }
@media (min-width: 1024px) {
  .bs-pad { gap: 12px; }
  .bs-pad .bs-key { min-height: 84px; font-size: 36px; }
}

/* ---------- pilih kelas & gerbang orang tua (paket 02) ---------- */
.kelas-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kelas-opt {
  min-height: 64px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Baloo 2', sans-serif; cursor: pointer; padding: 6px 4px; box-shadow: var(--shadow-1);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.kelas-opt:active { transform: scale(.95); }
.kelas-opt small { font-size: 12px; font-weight: 800; color: var(--ink-3); line-height: 1.1; }
.kelas-opt b { font-size: 26px; font-weight: 800; line-height: 1.05; }
.kelas-opt.kelas-nol small { font-size: 13px; color: var(--ink-2); }
.kelas-opt.active { border-color: var(--brand); background: var(--brand-soft); }
.kelas-opt.active small { color: var(--brand-ink); }
.kelas-card .kelas-pick { margin-top: 10px; }
.kelas-later { margin-top: 8px; }
.gate-tahan { position: relative; overflow: hidden; width: 100%; margin-top: 10px; touch-action: none; user-select: none; -webkit-user-select: none; }
.gate-tahan .gate-isi { position: absolute; inset: 0; background: rgba(255,255,255,.35); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.gate-tahan .gate-teks { position: relative; }
.semua-topik { margin-top: 10px; }
.semua-topik > summary { cursor: pointer; font-weight: 800; color: var(--ink-2); padding: 10px 4px; list-style: none; }
.semua-topik > summary::-webkit-details-marker { display: none; }
.semua-topik > summary::before { content: '▸ '; }
.semua-topik[open] > summary::before { content: '▾ '; }
.mulai-list { display: grid; gap: 8px; margin: 12px 0 4px; }

/* ---------- album stiker (paket 16) ---------- */
.alb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.alb-head { font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 4px 2px 12px; display: flex; flex-direction: column; gap: 2px; }
.alb-head b { color: var(--ink); }
.alb-head small { font-size: 12px; color: var(--ink-3); }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.alb-cell {
  position: relative; border: 2px dashed var(--line); background: var(--surface-2); border-radius: 16px;
  padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  min-height: 108px; color: var(--ink-3);
}
.alb-cell .alb-art { width: 52px; height: 52px; filter: grayscale(1) brightness(.35); opacity: .22; }
.alb-cell .alb-txt { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; }
.alb-cell.got { border: 2px solid color-mix(in srgb, var(--warn) 55%, var(--line)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.alb-cell.got .alb-art { filter: none; opacity: 1; }
.alb-cell.ulang { border-color: var(--line); }
.alb-badge { position: absolute; top: 4px; right: 6px; font-size: 14px; }
.alb-open { margin-bottom: 14px; }

/* ---------- main berdua (paket 16) ---------- */
.berdua { display: flex; flex-direction: column; gap: 10px; }
.berdua-aturan { font-size: 14px; font-weight: 700; color: var(--ink-2); line-height: 1.5; margin: 0 2px; }
.berdua-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.berdua-av { border: 3px solid transparent; background: var(--surface); border-radius: 18px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow-1); cursor: pointer; }
.berdua-av .player-av { font-size: 52px; line-height: 1; }
.berdua-av.active { border-color: var(--brand); background: var(--brand-soft); }
.berdua-av[disabled] { opacity: .35; }
.berdua-giliran { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 20px; font-family: 'Baloo 2', sans-serif; }
.berdua-giliran.kakak { background: var(--op-mul-soft); }
.berdua-giliran.adik { background: var(--op-add-soft); }
.berdua-giliran-av { font-size: 64px; line-height: 1; }
.berdua-giliran small { display: block; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.berdua-giliran b { font-size: 26px; font-weight: 800; }
.berdua-bantu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.berdua-bantu-btn { min-height: 84px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 800; font-size: 13.5px; color: var(--ink); box-shadow: var(--shadow-1); cursor: pointer; }
.berdua-bantu-btn .e { font-size: 30px; }
.berdua-bantu-btn[disabled] { opacity: .35; }

/* ---------- persetujuan & privasi (paket 03) ---------- */
.consent-p { font-weight: 700; color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 4px 0 10px; }
.consent-ul { margin: 0 0 10px 18px; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); line-height: 1.6; }
.consent-p a { color: var(--brand-ink); font-weight: 800; }
.consent-card .btn { margin-top: 8px; }
.consent-ul li { margin-bottom: 4px; }
.consent-kecil { font-size: 12.5px; font-weight: 700; color: var(--ink-3); line-height: 1.5; margin: 0 0 6px; }
.consent-kecil a { color: var(--brand-ink); font-weight: 800; }
.consent-aksi { display: flex; flex-direction: column; }
.sheet .consent-card { box-shadow: none; padding: 0; background: transparent; border: 0; }
.tabs[hidden] { display: none !important; }

/* ---------- cerita dua langkah & operasi campuran (paket 12) ---------- */
/* Cerita dua langkah: ukuran tetap yang terbaca di HP, tidak ikut mengecil bersama
   angka besar kartu soal (dulu ±14 px — masukan orang tua "textnya terlalu kecil"). */
.qtext .c2-cerita, .qtext .c2-cerita.tok { display: block; width: 100%; font-size: clamp(19px, 5.4vw, 26px); line-height: 1.45; text-align: left; color: var(--ink); font-weight: 700; margin-bottom: 10px; }
.qtext .c2-rangka, .qtext .c2-rangka.tok { display: flex; flex-direction: column; gap: 8px; width: 100%; font-size: clamp(24px, 7vw, 34px); text-align: left;
  background: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--brand) 14%, transparent) 27px 28px), var(--surface-2);
  border-radius: 12px; padding: 8px 12px; }
.qtext .c2-kotak { display: inline-block; min-width: 1.4em; text-align: center; color: var(--ink-3); }

/* ---------- nilai tempat: gudang kue (paket 07) ---------- */
.lsn-gudang { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.lsn-rak { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 20px; }
.lsn-kotak { width: 100px; border: 3px solid #B27A44; background: #F9DDB0; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.lsn-kotak.counted { box-shadow: 0 0 0 4px var(--ok); }
.lsn-kotak-isi { display: grid; grid-template-columns: repeat(5, 16px); gap: 2px; min-height: 34px; justify-content: center; }
.lsn-kotak-isi .lsn-item { width: 16px; height: 16px; margin: 0; font-size: 16px; }
.lsn-kotak-label { font-size: 11px; font-weight: 800; color: #7A4E25; }
.lsn-meja { min-height: 48px; }
.qtext u.nt-sorot { text-decoration-thickness: .12em; text-underline-offset: .12em; color: var(--brand-ink); }

/* Gudang Kue (permainan nilai tempat) */
.gudang { display: flex; flex-direction: column; gap: 10px; }
.gd-pesanan { background: var(--surface); border-radius: 20px; padding: 12px 16px; box-shadow: var(--shadow-1); text-align: center; }
.gd-label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); }
.gd-angka { font-family: 'Baloo 2', sans-serif; font-size: 30px; font-weight: 800; }
.gd-angka b { color: var(--brand-ink); font-size: 1.25em; }
.gd-area { background: repeating-linear-gradient(90deg, #E9D2AE 0 46px, #E2C79F 46px 48px); border-radius: 18px; padding: 10px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
html[data-theme="dark"] .gd-area { background: repeating-linear-gradient(90deg, #4A3A28 0 46px, #403223 46px 48px); }
.gd-area.gd-kemas { animation: gd-kemas .45s var(--ease-back); }
@keyframes gd-kemas { 0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); } }
.gd-baris { display: flex; flex-wrap: wrap; gap: 4px; min-height: 36px; align-items: center; }
.gd-satu { width: 36px; height: 36px; display: inline-flex; flex: 0 0 auto; }
.gd-kue-svg { width: 36px; height: 36px; }
.gd-ikon-kue { display: inline-flex; vertical-align: middle; }
.gd-ikon-kue .gd-kue-svg { width: 24px; height: 24px; }
.gd-wadah { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: 22px; line-height: 1; }
.gd-wadah small { font-size: 10px; font-weight: 800; color: #7A4E25; }
.gd-wadah.gd-kotak { width: 44px; height: 46px; background: #F9DDB0; border: 2.5px solid #B27A44; }
.gd-wadah.gd-peti { width: 58px; height: 52px; background: #D9A867; border: 2.5px solid #7A4E25; }
.gd-wadah.gd-truk { width: 64px; height: 52px; background: #CFE3FF; border: 2.5px solid #4C6FFF; }
.gd-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-aksi[hidden] { display: none !important; }
.gd-aksi .btn { width: auto; flex: 1 1 auto; }
.gd-kontrol { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.gd-tambah { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--surface); border-radius: 16px; padding: 6px; box-shadow: var(--shadow-1); }
.gd-pm { min-width: 56px; min-height: 56px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2); font-size: 22px; font-weight: 800; color: var(--ink); cursor: pointer; }
.gd-plus { background: var(--brand-soft); border-color: var(--brand); font-size: 18px; }
.gd-nama { font-weight: 800; color: var(--ink-2); }
.gd-kirim { grid-column: 1 / -1; }

/* ---------- pecahan bertumpuk (paket 09): seperti di buku tulis ---------- */
.pc { display: inline-flex; align-items: center; gap: .12em; font-family: var(--bs-font, 'Patrick Hand', cursive); vertical-align: middle; }
.pc-utuh { font-size: 1em; }
.pc-f { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-size: .62em; }
.pc-n { padding: 0 .15em .06em; border-bottom: .09em solid currentColor; }
.pc-d { padding: .06em .15em 0; }
.lsn-pecahan { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px auto; }
.lsn-pecahan-besar { font-size: clamp(72px, 22vw, 110px); font-weight: 800; color: var(--ink); line-height: 1; }
.lsn-pecahan-ket { display: flex; flex-direction: column; justify-content: space-around; gap: 28px; font-size: 15px; font-weight: 800; color: var(--ink-2); }
.answers .answer .pc { font-size: 1.15em; }

.lsn-martabak { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lsn-martabak-img .viz { width: 180px; height: auto; }
.lsn-martabak-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.lsn-martabak-btn { border: 3px solid var(--line); background: var(--surface); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; color: var(--ink); cursor: pointer; }
.lsn-martabak-btn .viz { width: 100%; max-width: 160px; height: auto; }
.lsn-martabak-btn.benar { border-color: var(--ok); background: var(--ok-soft); }
.lsn-martabak-btn.salah { border-color: var(--bad); background: var(--bad-soft); }

/* Dapur Martabak */
.martabak { display: flex; flex-direction: column; gap: 10px; }
.mb-teman { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.mb-satu { display: flex; flex-direction: column; align-items: center; width: 70px; }
.mb-wajah svg { width: 46px; height: 56px; }
.mb-piring { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; }
.mb-piring .viz { width: 52px; height: 52px; }
.mb-meja { display: flex; justify-content: center; background: var(--surface-2); border-radius: 24px; padding: 10px; min-height: 120px; align-items: center; }
.mb-martabak { width: min(76vw, 300px); touch-action: none; cursor: crosshair; }
.mb-martabak .viz { width: 100%; height: auto; pointer-events: none; }
.mb-kosong { font-weight: 800; color: var(--ink-2); }

/* ---------- waktu & jam (paket 10) ---------- */
.jadwal { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.jd-kalimat { font-family: 'Baloo 2', sans-serif; font-size: 22px; font-weight: 800; line-height: 1.3; }
.jd-jam { width: min(80vw, 300px); align-self: center; touch-action: none; cursor: grab; border-radius: 50%; }
.jd-jam:focus-visible { outline: 4px solid var(--brand); }
.jd-jam .viz { width: 100%; height: auto; pointer-events: none; }
.jd-baca { text-align: center; font-family: var(--bs-font, 'Patrick Hand', cursive); font-size: 30px; font-weight: 800; color: var(--ink-2); }
.lsn-jam .viz { width: 200px; height: auto; }
.viz.jam text { font-family: 'Baloo 2', sans-serif; }

/* ---------- panjang & berat (paket 11a) ---------- */
.timbangan { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tb-alat { width: min(86vw, 340px); align-self: center; }
.tb-alat .viz { width: 100%; height: auto; }
.tb-alat .viz g { transition: transform .35s var(--ease-back); }
.tb-piring { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 52px; align-items: center; }
.tb-kosong { color: var(--ink-3); font-weight: 700; }
.tb-anak { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 8px; border-radius: 12px 12px 8px 8px; border: 2px solid #5A5F6B; background: linear-gradient(#C9CED8, #9AA1AE); color: #1E2230; font-weight: 800; font-size: 15px; cursor: pointer; }
.tb-anak.tb-500 { min-width: 72px; min-height: 52px; }
.tb-anak.tb-200 { min-width: 62px; min-height: 48px; }
.tb-anak.tb-50 { min-width: 46px; min-height: 40px; font-size: 13px; }
.tb-rak .tb-taruh { padding: 6px; }
.lsn-jam .viz.penggaris { width: min(100%, 320px); }

/* ---------- bangun datar & ruang (paket 11b) ---------- */
.lsn-bangun { display: flex; gap: 8px; justify-content: center; }
.lsn-bangun .viz { width: 30%; max-width: 120px; height: auto; }
.viz.bangun { max-height: 200px; }
.cetakan { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ck-rak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ck-cetak { background: var(--surface); border: 3px solid var(--line); border-radius: 18px; padding: 6px; cursor: pointer; min-height: 88px; display: flex; align-items: center; justify-content: center; }
.ck-cetak svg { width: 72px; height: 72px; pointer-events: none; }
.ck-cetak.dipilih { border-color: var(--brand); background: var(--brand-soft); }
.ck-adonan { background: #F6DDB0; border-radius: 24px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
html[data-theme="dark"] .ck-adonan { background: #5A4630; }
.ck-adonan svg { width: min(64vw, 240px); height: auto; touch-action: manipulation; }
.ck-sisi { cursor: pointer; }
.ck-ket { font-weight: 800; color: #7A4E25; min-height: 22px; text-align: center; }
html[data-theme="dark"] .ck-ket { color: #F6DDB0; }

/* ---------- pola (paket 11c) ---------- */
.pl-deret { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 6px; }
.pl-deret.pl-gambar .pl-suku { font-size: 30px; line-height: 1; }
.pl-koma { margin-right: 4px; }
.lsn-pola { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-family: 'Baloo 2', sans-serif; font-size: 34px; font-weight: 800; }
.kereta { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.kr-rel { padding: 6px 4px; overflow: hidden; }
/* Rel digambar di bawah setiap baris gerbong, jadi kereta yang terlipat tetap di atas rel. */
.kr-kereta { display: flex; flex-wrap: wrap; gap: 14px 0; align-items: flex-end; }
.kr-kereta > * { padding: 0 2px 6px; border-bottom: 4px solid #8A6A4A; }
.kr-kereta.jalan { animation: kr-jalan 1.6s ease-in forwards; }
@keyframes kr-jalan { 0% { transform: translateX(0); } 20% { transform: translateX(-8px); } 100% { transform: translateX(120%); } }
.kr-lok { font-size: 40px; line-height: 1; transform: scaleX(-1); }
.kr-gerbong { min-width: 42px; height: 44px; padding: 0 6px; border-radius: 10px 10px 6px 6px; background: #FFE3A3; border: 2.5px solid #B27A44; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #5A3608; font-family: 'Baloo 2', sans-serif; }
.kr-gerbong.angka { font-size: 20px; }
.kr-gerbong.kosong { background: transparent; border-style: dashed; color: var(--ink-3); }
.kr-gerbong.kosong.berikut { border-color: var(--brand); color: var(--brand); animation: kr-denyut 1.2s ease-in-out infinite; }
@keyframes kr-denyut { 50% { transform: scale(1.08); } }
.kr-depo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 12px; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-1); }
.kr-ambil { min-width: 64px; height: 64px; font-size: 34px; cursor: grab; touch-action: none; user-select: none; }
.kr-ambil.angka { font-size: 24px; }
.kr-ambil.ditarik { position: relative; z-index: 5; box-shadow: var(--shadow-2, 0 6px 16px rgba(0,0,0,.25)); cursor: grabbing; }
.kr-ambil.goyang { animation: kr-goyang .4s; }
@keyframes kr-goyang { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .kr-kereta.jalan, .kr-gerbong.kosong.berikut, .kr-ambil.goyang { animation: none; } }

/* ---------- data (paket 11d) ---------- */
.lsn-data .viz, .viz.piktogram, .viz.batang { width: min(100%, 360px); height: auto; }
.viz.turus { width: auto; height: 52px; max-width: 100%; }
.survei { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.sv-pelanggan { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-1); }
.sv-pelanggan .sv-wajah { width: 48px; height: 48px; flex: 0 0 auto; }
.sv-pelanggan .sv-wajah svg { width: 100%; height: 100%; }
.sv-kata { font-family: 'Baloo 2', sans-serif; font-size: 20px; font-weight: 800; line-height: 1.2; }
.sv-baris { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 6px 12px; border-radius: 16px; border: 3px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); }
.sv-baris:active { transform: scale(.98); }
.sv-baris .sv-nama { width: 108px; flex: 0 0 auto; font-weight: 800; }
.sv-baris .sv-titik { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.sv-baris .viz.turus { height: 40px; }
.sv-grafik { display: flex; gap: 10px; justify-content: center; align-items: flex-end; background: var(--surface); border-radius: 20px; padding: 12px 8px 8px; box-shadow: var(--shadow-1); }
.sv-kolom { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; max-width: 84px; }
.sv-tiang { position: relative; width: 100%; height: 200px; background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px 20px); border-radius: 8px; touch-action: none; cursor: ns-resize; }
.sv-isi { position: absolute; left: 8%; right: 8%; bottom: 0; border-radius: 8px 8px 0 0; transition: height .12s; }
.sv-isi::after { content: ''; position: absolute; left: 50%; top: -9px; width: 30px; height: 10px; margin-left: -15px; border-radius: 6px; background: inherit; filter: brightness(.8); }
.sv-kolom .sv-label { font-size: 12px; font-weight: 800; text-align: center; }
.sv-kolom .sv-pm { display: flex; gap: 4px; }
.sv-kolom .sv-pm button { min-width: 34px; min-height: 34px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface-2); font-weight: 800; font-size: 18px; color: var(--ink); }
.sv-kolom.sv-sumbu { flex: 0 0 22px; align-self: flex-start; }
.sv-skala { position: relative; width: 22px; height: 200px; margin-top: 0; }
.sv-skala span { position: absolute; right: 2px; transform: translateY(50%); font-size: 12px; font-weight: 800; color: var(--ink-3); }
.sv-kolom.salah .sv-tiang { outline: 3px solid var(--bad, #E5484D); }

/* ---------- kebun (paket 14) ---------- */
.viz.kebun { width: min(100%, 320px); height: auto; }
.viz-box .viz.kebun + .viz.kebun { margin-left: 8px; }
.kebun-main { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.kb-lahan { touch-action: none; user-select: none; background: var(--surface); border-radius: 20px; padding: 6px; box-shadow: var(--shadow-1); }
/* Lebar dibatasi tinggi layar (viewBox 356 × 260) supaya seluruh kebun terlihat di laptop. */
.kb-lahan svg { width: 100%; max-width: calc(58vh * 1.37); height: auto; display: block; margin: 0 auto; }

/* ---------- bilangan negatif (paket 15a) ---------- */
.viz.tegak { width: auto; height: min(44vh, 320px); max-width: 100%; }
.lsn-tegak { display: flex; justify-content: center; }
.lsn-tegak .viz.tegak { height: min(38vh, 280px); }
.kapalselam { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ks-baris { display: flex; gap: 10px; align-items: stretch; justify-content: center; }
.ks-laut { flex: 0 1 auto; border-radius: 18px; overflow: hidden; touch-action: none; cursor: ns-resize; box-shadow: var(--shadow-1); }
.ks-laut svg { display: block; height: min(52vh, 420px); width: auto; }
.ks-papan { align-self: center; background: var(--surface); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-1); text-align: center; min-width: 110px; }
.ks-angka { font-family: 'Baloo 2', sans-serif; font-size: 34px; font-weight: 800; color: var(--brand-ink); }
.ks-catatan { font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* ---------- desimal (paket 15b) ---------- */
.viz.penggaris-mm { width: min(100%, 420px); height: auto; }
.jahit { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.jh-meja { background: #F3E3C8; border-radius: 18px; padding: 14px 6px; touch-action: none; cursor: ew-resize; box-shadow: var(--shadow-1); }
html[data-theme="dark"] .jh-meja { background: #5A4630; }
.jh-meja .viz.penggaris-mm { width: 100%; max-width: none; display: block; }

/* ---------- persen (paket 15c) ---------- */
.viz.petak100 { width: min(70vw, 240px); height: auto; }
.dk-stiker { display: inline-block; background: #E5484D; color: #fff; border-radius: 999px; padding: 0 10px; font-size: .8em; transform: rotate(-4deg); }
.diskon-main { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.dk-rak { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; background: var(--surface); border-radius: 20px; padding: 12px; box-shadow: var(--shadow-1); }
.dk-blok { min-height: 64px; border-radius: 12px; border: 2.5px solid #2E9E6A; background: #D9F5E6; color: #145C3A; font-weight: 800; font-size: 14px; cursor: pointer; position: relative; }
.dk-blok.dicoret { background: var(--surface-2); color: var(--ink-3); border-style: dashed; border-color: #E5484D; }
.dk-blok.dicoret::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; border-top: 3px solid #E5484D; transform: rotate(-14deg); }

/* ---------- koordinat (paket 15d) ---------- */
.viz.bidang { width: min(100%, 360px); height: auto; }
.hartakarun { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.hk-peta { background: #BFE6F7; border-radius: 20px; padding: 8px; box-shadow: var(--shadow-1); cursor: crosshair; }
.hk-peta .viz.bidang { width: 100%; max-width: calc(56vh * 1.41); display: block; margin: 0 auto; }

/* ---------- statistik (paket 15e) ---------- */
.st-data { display: block; font-family: 'Baloo 2', sans-serif; font-size: 1.05em; letter-spacing: .02em; margin: 4px 0; }
.viz.tumpukan { width: min(100%, 300px); height: auto; }
.lomba { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lb-arena { display: flex; flex-direction: column; gap: 8px; }
.lb-tumpukan { display: flex; gap: 8px; justify-content: center; align-items: flex-end; background: var(--surface); border-radius: 20px; padding: 12px 8px; box-shadow: var(--shadow-1); }
.lb-kolom { flex: 1 1 0; max-width: 72px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; border: 2px dashed transparent; border-radius: 14px; background: none; cursor: pointer; padding: 4px 0; }
.lb-kolom.diambil { border-color: var(--brand); background: var(--brand-soft); }
.lb-isi { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.lb-kerupuk { display: inline-block; width: 40px; height: 18px; border-radius: 50%; background: #F7E3A8; border: 1.5px solid #C59A2E; }
.lb-nama { font-size: 12px; font-weight: 800; color: var(--ink-2); }
.lb-tangan { text-align: center; font-weight: 700; color: var(--ink-2); min-height: 24px; }
.lb-tangan .lb-kerupuk { vertical-align: middle; }
.lb-pelari { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 72px; background: var(--surface); border-radius: 18px; padding: 8px; box-shadow: var(--shadow-1); }
.lb-urut { background: var(--brand-soft); }
.lb-orang { min-width: 64px; min-height: 64px; border-radius: 14px; border: 2.5px solid var(--line); background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--ink); cursor: pointer; }
.lb-orang.tengah { border-color: var(--brand); }
.lb-nomor { font-family: 'Baloo 2', sans-serif; font-size: 22px; line-height: 1; }
.lb-kaos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; background: var(--surface); border-radius: 18px; padding: 10px; box-shadow: var(--shadow-1); }
.lb-satu-kaos { width: 44px; height: 44px; display: inline-block; clip-path: polygon(30% 0, 70% 0, 100% 22%, 86% 42%, 78% 36%, 78% 100%, 22% 100%, 22% 36%, 14% 42%, 0 22%); filter: drop-shadow(0 0 1px #0006); }
.lb-titik { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line); vertical-align: middle; }

/* ---------- aljabar (paket 15f) ---------- */
.al-kotak { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; border-radius: 6px; background: #C98A3E; color: #fff; font-size: .85em; vertical-align: middle; }
.viz.timbangan-al { width: min(100%, 320px); height: auto; }
.misteri { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tm-alat { position: relative; background: var(--surface); border-radius: 20px; padding: 20px 10px 64px; box-shadow: var(--shadow-1); min-height: 240px; }
.tm-lengan { position: absolute; left: 8%; right: 8%; top: 46%; height: 10px; border-radius: 5px; background: #7A5A3A; transition: transform .3s var(--ease-back); }
.tm-tiang { position: absolute; left: calc(50% - 8px); top: 46%; bottom: 16px; width: 16px; background: #9A7B52; border-radius: 4px; z-index: 0; }
.tm-baris { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12%; }
.tm-piring { flex: 1 1 0; min-height: 96px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 4px; padding: 6px; border-bottom: 6px solid #B08D5E; border-radius: 0 0 14px 14px; transition: transform .3s var(--ease-back); }
.tm-kotak { width: 40px; height: 40px; border-radius: 8px; background: #C98A3E; border: 2px solid #7A4E25; color: #fff; font-weight: 800; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; }
.tm-piring { position: relative; }
.tm-beban { width: 26px; height: 26px; border-radius: 50%; background: #8A93A6; border: 2px solid #5A6070; }
.tm-ketuk { position: absolute; inset: -10px; background: none; border: 0; cursor: pointer; border-radius: 16px; }
.tm-ketuk:active { background: rgba(76, 111, 255, .08); }

/* ---------- rasio (paket 15g) ---------- */
.resep-main { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.rs-kartu { background: #FFF6E0; border: 2px solid #E8C78A; border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
html[data-theme="dark"] .rs-kartu { background: #3E3424; border-color: #6A5532; }
.rs-judul { font-weight: 800; text-align: center; color: var(--ink-2); }
.rs-baris { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; }
.rs-baris.salah { outline: 3px solid var(--bad, #E5484D); background: rgba(229, 72, 77, .08); }
.rs-bahan { font-weight: 800; }
.rs-dasar { font-size: 13px; color: var(--ink-3); font-weight: 700; }
.rs-panah { color: var(--ink-3); }
.rs-atur { display: flex; align-items: center; gap: 6px; }
.rs-atur .gd-pm { min-width: 48px; min-height: 48px; }
.rs-nilai { min-width: 32px; text-align: center; font-family: 'Baloo 2', sans-serif; font-size: 24px; font-weight: 800; }

/* ---------- sudut (paket 15h) ---------- */
.viz.sudut { width: min(46%, 200px); height: auto; }
.lsn-bangun .viz.sudut { width: 32%; }
.viz.busur { width: min(100%, 380px); height: auto; }
.meriam { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.mr-medan { background: linear-gradient(#1B2A6B, #3A4FA8); border-radius: 20px; padding: 12px 8px 6px; touch-action: none; cursor: grab; box-shadow: var(--shadow-1); }
.mr-medan .viz.busur { width: 100%; max-width: calc(50vh * 1.74); display: block; margin: 0 auto; }

/* ---------- peluang (paket 15i) ---------- */
.viz.kantong { width: min(60vw, 220px); height: auto; }
.lsn-bangun .viz.kantong { width: 32%; }
.kelereng { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.kl-kantong { display: flex; justify-content: center; }
.kl-catat { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.kl-catat > div { display: flex; align-items: center; gap: 8px; }
.kl-catat .viz.turus { height: 36px; }

/* ---------- kelas guru (paket 17) ---------- */
.kelas-gabung { display: flex; gap: 8px; }
.kelas-gabung .field { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.kelas-gabung .btn { width: auto; flex: 0 0 auto; }
.quest.quest-tugas { width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; color: inherit; }

/* ---------- paket & akun orang tua (paket 18) ---------- */
.kunci-topik { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 16px; }
.kunci-gembok { font-size: 64px; }
.kunci-judul { font-family: 'Baloo 2', sans-serif; font-size: 24px; font-weight: 800; }
.kunci-teks { font-size: 17px; font-weight: 700; color: var(--ink-2); max-width: 420px; }
.kunci-teks.kecil { font-size: 13.5px; color: var(--ink-3); }
.kunci-topik .btn { width: auto; }
.op-card.op-kunci { opacity: .72; }
.paket-ortu { display: flex; flex-direction: column; gap: 12px; }
.paket-ortu [hidden] { display: none !important; }
.paket-ortu .field { margin: 6px 0; }
.paket-item { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.paket-catatan { font-size: 13px; font-weight: 700; color: var(--ink-3); }

/* ---------- beli paket (paket 19) ---------- */
.paket-utama { display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--brand); }
.paket-utama-judul { font-size: 20px; font-weight: 900; color: var(--ink); }
.paket-utama-isi { font-size: 14px; color: var(--ink-2); margin: 0; }
.paket-utama .btn-lg { display: block; text-decoration: none; font-size: 19px; padding: 16px; text-align: center; }
.paket-langkah { margin: 0; padding-left: 22px; font-size: 14px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.paket-akun > summary { cursor: pointer; font-weight: 800; color: var(--ink-2); list-style: none; }
.paket-akun > summary::-webkit-details-marker { display: none; }
.paket-akun > summary::before { content: '▸ '; }
.paket-akun[open] > summary { margin-bottom: 8px; }
.paket-akun[open] > summary::before { content: '▾ '; }
.paket-beli { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.paket-beli:empty { display: none; }
.paket-beli .section-title { margin-top: 4px; }

/* ---------- Hiu Hitung (paket 22) ---------- */
.hiu-menu { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.hiu-menu-head { text-align: center; padding: 8px 6px 0; }
.hiu-menu-art { font-size: 46px; letter-spacing: 6px; }
.hiu-menu-head h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; margin: 2px 0 4px; color: #0F5590; }
.hiu-menu-head p { font-weight: 700; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 0 auto; max-width: 520px; }
.hiu-pilih { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.hiu-pilih-kartu { grid-column: span 2; }
.hiu-pilih-kartu.hp-div, .hiu-pilih-kartu.hp-campur { grid-column: span 3; }
@media (min-width: 700px) { .hiu-pilih { grid-template-columns: repeat(5, 1fr); } .hiu-pilih-kartu, .hiu-pilih-kartu.hp-div, .hiu-pilih-kartu.hp-campur { grid-column: auto; } }
.hiu-bicara-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 18px; text-align: left;
  border: 2px solid #b9def5; background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1); touch-action: manipulation;
}
.hiu-bicara-btn .hb-ikon { font-size: 28px; flex: none; }
.hiu-bicara-btn .hb-teks { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.hiu-bicara-btn .hb-teks b { font-family: 'Baloo 2', sans-serif; font-size: 17px; }
.hiu-bicara-btn .hb-teks small { font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.hiu-bicara-btn .hb-saklar { flex: none; width: 46px; height: 26px; border-radius: 13px; background: #cfd8e3; position: relative; transition: background .2s; }
.hiu-bicara-btn .hb-saklar i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.hiu-bicara-btn.on { border-color: #1f9e8f; background: #e9fbf6; }
.hiu-bicara-btn.on .hb-saklar { background: #1f9e8f; }
.hiu-bicara-btn.on .hb-saklar i { transform: translateX(20px); }
.hiu-pilih-kartu {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; min-height: 120px;
  border: 2px solid #9fd8f2; border-radius: 18px; background: linear-gradient(#eaf8ff, #c9ecfb); color: #0f4a7d;
  font-family: 'Baloo 2', sans-serif; cursor: pointer; box-shadow: var(--shadow-1); touch-action: manipulation;
}
.hiu-pilih-kartu.fokus { border-color: #1f7fb8; box-shadow: 0 0 0 3px rgba(31, 127, 184, .25), var(--shadow-1); }
.hiu-pilih-kartu .hp-emoji { font-size: 32px; }
.hiu-pilih-kartu .hp-judul { font-weight: 800; font-size: 19px; }
.hiu-pilih-kartu .hp-desc { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 12px; color: #2f6c96; text-align: center; line-height: 1.3; }
.hiu-cara-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.hiu-cara ul { margin: 0; padding-left: 20px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

html.game-open .hiu, .hiu { position: fixed; inset: 0; z-index: 30; background: #08243f; color: #fff; overflow: hidden; }
/* Bilah atas melayang (semi-transparan) di atas laut; laut terlihat di belakangnya. */
.hiu-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; flex-direction: column; gap: 4px;
  padding: calc(6px + env(safe-area-inset-top)) 10px 6px;
  background: linear-gradient(rgba(6, 34, 66, .72), rgba(6, 34, 66, .38) 75%, rgba(6, 34, 66, 0));
}
.hiu-top1 { display: flex; align-items: center; gap: 8px; }
.hiu-top2 { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.hiu-top .icon-btn { background: rgba(255, 255, 255, .9); color: #0f4a7d; flex: none; }
.hiu-oksigen { display: flex; align-items: center; gap: 5px; flex: 0 1 auto; min-width: 0; position: relative; }
/* Oksigen: 5 gelembung besar yang mudah dihitung; yang pecah jelas kosong & retak. */
.hiu-o2 {
  width: 26px; height: 26px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, #c8f4ff 21%, #5cc7ee 66%, #1f86bf);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 10px rgba(120, 220, 255, .65); transition: transform .3s;
}
.hiu-o2.pecah { background: rgba(10, 30, 55, .55); box-shadow: 0 0 0 2px rgba(255, 120, 120, .75) inset, 0 0 0 1.5px rgba(255, 255, 255, .35); }
.hiu-o2.pecah::before, .hiu-o2.pecah::after { content: ''; position: absolute; left: 50%; top: 18%; width: 2.5px; height: 64%; margin-left: -1.25px; background: rgba(255, 140, 140, .95); border-radius: 2px; transform: rotate(40deg); }
.hiu-o2.pecah::after { transform: rotate(-40deg); }
.hiu-o2.pecah.baru { animation: hiu-o2-letus .7s ease-out; }
@keyframes hiu-o2-letus { 0% { transform: scale(1); background: #bdf0ff; box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(255, 90, 90, .9); } 30% { transform: scale(1.9); box-shadow: 0 0 0 3px #fff, 0 0 0 14px rgba(255, 90, 90, 0); } 55% { transform: scale(.6); } 100% { transform: scale(1); } }
.hiu-o2-angka { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; margin-left: 3px; color: #dff7ff; text-shadow: 0 2px 0 #0a3a66; }
.hiu-o2-min { position: absolute; right: -6px; top: 18px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #ff6b6b; text-shadow: 0 2px 0 #5a0f0f, 0 0 8px rgba(255, 80, 80, .8); pointer-events: none; animation: hiu-min-naik 1.2s ease-out forwards; }
@keyframes hiu-min-naik { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.25); } 100% { opacity: 0; transform: translateY(30px) scale(1); } }
.hiu-oksigen.goyang { animation: hiu-getar .45s ease-in-out; }
.hiu-lv { flex: none; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; padding: 1px 9px; border-radius: 10px; background: #ffd23a; color: #5a3a00; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.hiu-dalam { flex: 0 1 auto; min-width: 0; font-weight: 800; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 9px; border-radius: 10px; background: rgba(0, 20, 45, .45); }
.hiu-dalam b { font-family: 'Baloo 2', sans-serif; font-size: 14px; color: #9fe8ff; font-variant-numeric: tabular-nums; }
.hiu-dalam span { opacity: .85; }
.hiu-meta { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; opacity: .92; white-space: nowrap; text-align: right; }
@media (max-width: 380px) { .hiu-o2 { width: 21px; height: 21px; } .hiu-oksigen { gap: 4px; } .hiu-dalam span { display: none; } }
.hiu-skor { margin-left: auto; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; min-width: 44px; text-align: right; color: #fff6c9; text-shadow: 0 2px 0 #0a3a66, 0 0 10px rgba(255, 230, 120, .45); font-variant-numeric: tabular-nums; }
.hiu-combo { flex: none; transition: background .25s, color .25s; padding: 4px 9px; font-size: 14px; white-space: nowrap; }
@media (max-width: 430px) { .hiu-meta { font-size: 12px; } .hiu-skor { font-size: 23px; min-width: 36px; } }
.hiu-combo b { font-size: .9em; margin-left: 2px; }
.hiu-combo[data-tier="2"] { background: linear-gradient(#ffb23d, #ff7a1a); color: #fff; box-shadow: 0 0 10px rgba(255, 150, 40, .7); }
.hiu-combo[data-tier="3"] { background: linear-gradient(#ff6fb0, #e8338a); color: #fff; box-shadow: 0 0 12px rgba(255, 90, 170, .8); }
.hiu-combo[data-tier="4"] { background: linear-gradient(90deg, #ff5f5f, #ffb23d, #ffe14d, #4fd18b, #4fb3ff, #a77bff); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 0 14px rgba(255, 255, 255, .8); }
.hiu-combo.naik { animation: hiu-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.hiu-combo-besar {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%); pointer-events: none; z-index: 4; text-align: center; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: .95; animation: hiu-combo-masuk 1.4s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.hiu-combo-besar span { display: block; font-size: clamp(20px, 5.5vw, 28px); color: #fff; text-shadow: 0 2px 0 #0b4a80; letter-spacing: 1px; }
.hiu-combo-besar b { display: block; font-size: clamp(54px, 15vw, 84px); color: #ffd23a; text-shadow: 0 4px 0 #b8660b, 0 0 24px rgba(255, 210, 60, .9); }
.hiu-combo-besar.t3 b { color: #ff7ac0; text-shadow: 0 4px 0 #a51e63, 0 0 26px rgba(255, 110, 190, .95); }
.hiu-combo-besar.t4 b { background: linear-gradient(90deg, #ff5f5f, #ffb23d, #ffe14d, #4fd18b, #4fb3ff, #a77bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 0 rgba(60, 20, 100, .55)) drop-shadow(0 0 14px rgba(255, 255, 255, .9)); }
@keyframes hiu-combo-masuk { 0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-8deg); } 18% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(2deg); } 30% { transform: translateX(-50%) scale(1) rotate(0); } 78% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.9); } }
.hiu-stage { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; background: #2c88c0; }
/* Serangan ikan: kilat merah di tepi layar & tulisan kartun. */
.hiu-serang-kilat { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; box-shadow: inset 0 0 60px 22px rgba(255, 40, 40, .85), inset 0 0 0 6px rgba(255, 80, 80, .7); }
.hiu-serang-kilat.nyala { animation: hiu-kilat-merah .6s ease-out; }
@keyframes hiu-kilat-merah { 0% { opacity: 1; } 25% { opacity: .9; } 100% { opacity: 0; } }
.hiu-bonk {
  position: absolute; transform: translate(-50%, -110%) rotate(-8deg); pointer-events: none; z-index: 4; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 34px; color: #fff36b; letter-spacing: 1px;
  text-shadow: 0 3px 0 #c2410c, 0 0 0 #000, 3px 3px 0 #7c2d12, 0 0 14px rgba(255, 200, 60, .9); animation: hiu-bonk 1s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.hiu-bonk.besar { font-size: 42px; color: #ffd0e0; text-shadow: 0 3px 0 #be185d, 3px 3px 0 #831843, 0 0 16px rgba(255, 120, 180, .9); }
@keyframes hiu-bonk { 0% { opacity: 0; scale: .3; } 20% { opacity: 1; scale: 1.3; } 35% { scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; scale: 1.05; translate: 0 -24px; } }
.hiu-stage .game-loading { color: #e6f7ff; }
.hiu-canvas { display: block; width: 100%; height: 100%; }
.hiu-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hiu-papan-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hiu-papan {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap;
  display: flex; align-items: baseline; gap: 6px; padding: 3px 13px 5px; border-radius: 15px;
  border: 3px solid #fff; background: linear-gradient(#ffffff, #fff4d9); color: #133a63;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(20px, 5.4vw, 26px); line-height: 1.15;
  text-shadow: 0 1px 0 #fff;
  box-shadow: 0 4px 0 rgba(10, 60, 110, .28), 0 6px 14px rgba(0, 30, 60, .3); will-change: transform; touch-action: manipulation;
}
.hiu-papan::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: rotate(45deg); border-radius: 0 0 3px 0; z-index: -1; }
.hiu-papan.besar { font-size: clamp(28px, 8vw, 40px); padding: 4px 18px 6px; border-width: 3.5px; border-color: #ff9d3d; background: #fff1d6; border-radius: 18px; box-shadow: 0 4px 16px rgba(0, 30, 60, .4); }
.hiu-papan.besar::before { content: '🦈'; font-size: .7em; align-self: center; }
.hiu-papan .hp-nyawa {
  position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); display: flex; gap: 4px;
  padding: 3px 4px; border-radius: 9px; border: 2px solid #fff; background: rgba(12, 32, 56, .82);
  box-shadow: 0 2px 8px rgba(0, 20, 40, .45); pointer-events: none;
}
.hiu-papan .hp-nyawa i {
  display: block; width: 24px; height: 11px; border-radius: 5px;
  background: linear-gradient(#ff8a7a, #e0302a 60%, #b81c1c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: background .25s, opacity .25s;
}
.hiu-papan .hp-nyawa i.hilang { background: #4a5a6c; opacity: .55; box-shadow: none; animation: hiu-nyawa-hilang .55s ease-out; }
@keyframes hiu-nyawa-hilang {
  0% { transform: scale(1); background: #fff6a0; opacity: 1; } 30% { transform: scale(1.5, 1.7); background: #ffffff; opacity: 1; }
  60% { transform: scale(.8) rotate(-8deg); } 100% { transform: scale(1); }
}
.hiu-papan.sambar { border-color: #8ff0ff; background: #e9fbff; animation: hiu-papan-sambar .38s ease-out; }
@keyframes hiu-papan-sambar { 0% { scale: 1; } 30% { scale: 1.16; } 100% { scale: 1; } }
.hiu-papan.soal-baru .hp-soal { animation: hiu-soal-baru .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hiu-soal-baru { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hiu-papan .hp-nyawa i.hilang, .hiu-papan.sambar, .hiu-papan.soal-baru .hp-soal { animation: none; } }
.hiu-papan.peti { border-color: #ffc928; background: linear-gradient(#fff8d0, #ffe58a); box-shadow: 0 0 0 3px rgba(255, 201, 40, .35), 0 3px 14px rgba(160, 100, 0, .45); }
.hiu-papan.peti::before { content: '💰'; font-size: .8em; align-self: center; }
.hiu-papan.ubur { border-color: #ff9ad5; background: #fff0f9; }
.hiu-papan.ubur::before { content: '🪼'; font-size: .8em; align-self: center; }
.hiu-papan.beku { border-color: #8fe6ff; background: #e4f9ff; color: #1b5a80; box-shadow: 0 0 0 3px rgba(143, 230, 255, .5), 0 0 14px rgba(170, 240, 255, .9); }
.hiu-papan.beku .hp-soal::after { content: ' ❄'; color: #3fb6e6; font-size: .75em; }
.hiu-papan.bicara .hp-soal::after { content: ' 🔊'; display: inline-block; font-size: .8em; animation: hiu-denyut .6s ease-in-out infinite alternate; }
@keyframes hiu-denyut { from { transform: scale(.85); } to { transform: scale(1.15); } }
.hiu-papan.kunci { border-color: #ffd21f; background: linear-gradient(#fffbe0, #ffefa8); box-shadow: 0 0 0 4px rgba(255, 225, 77, .6), 0 0 22px rgba(255, 238, 120, .95), 0 4px 0 rgba(150, 100, 0, .25); animation: hiu-kunci-denyut .7s ease-in-out infinite alternate; }
@keyframes hiu-kunci-denyut { from { box-shadow: 0 0 0 3px rgba(255, 225, 77, .55), 0 0 14px rgba(255, 238, 120, .8); } to { box-shadow: 0 0 0 6px rgba(255, 225, 77, .35), 0 0 26px rgba(255, 238, 120, 1); } }
.hiu-papan .hp-ketik:empty { display: none; }
.hiu-papan .hp-ketik { color: #0b8a3e; }
.hiu-papan .hp-ketik b { display: inline-block; }
.hiu-papan.pop .hp-ketik b.baru { animation: hiu-pop .28s cubic-bezier(.2, 1.6, .4, 1); }
.hiu-papan .hp-salah { display: inline-block; color: #e23b3b; font-style: normal; animation: hiu-getar .45s ease-in-out, hiu-pudar .7s ease-in forwards; }
.hiu-papan.kena { background: #e9fbff; border-color: #8ff0ff; animation: hiu-papan-hilang .75s ease-in forwards; pointer-events: none; }
.hiu-papan.besar.kena { animation-duration: 1.3s; }
@keyframes hiu-papan-hilang { 0% { scale: 1; } 18% { scale: 1.18; } 55% { opacity: 1; scale: 1.05; } 100% { opacity: 0; scale: .9; } }
@keyframes hiu-pop { 0% { transform: scale(.4); } 60% { transform: scale(1.45); color: #19c35a; } 100% { transform: scale(1); } }
@keyframes hiu-getar { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes hiu-pudar { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
.hiu-poin {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #fff36b;
  text-shadow: 0 2px 0 #b8660b, 0 0 10px rgba(255, 220, 80, .8); animation: hiu-naik 1.25s cubic-bezier(.2, .8, .3, 1) forwards;
}
.hiu-poin.besar { font-size: 38px; }
.hiu-poin.kecil { font-size: 20px; color: #bff4ff; text-shadow: 0 2px 0 #1a6c96, 0 0 8px rgba(120, 230, 255, .8); }
.hiu-poin em { display: block; font-style: normal; font-size: .7em; text-align: center; color: #ffe066; }
.hiu-kilat { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff, #dff8ff 55%, rgba(200, 245, 255, .6)); opacity: 0; z-index: 3; }
.hiu-kilat.nyala { animation: hiu-kilat .45s ease-out; }
@keyframes hiu-kilat { 0% { opacity: var(--kuat, .5); } 100% { opacity: 0; } }
.hiu-es {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, rgba(200, 245, 255, 0) 58%, rgba(190, 240, 255, .45) 85%, rgba(230, 250, 255, .8));
  box-shadow: inset 0 0 40px rgba(160, 235, 255, .8); animation: hiu-es-masuk .35s ease-out;
}
.hiu-es::before, .hiu-es::after { content: '❄  ❅  ❄'; position: absolute; left: 10px; top: 8px; font-size: 26px; color: rgba(255, 255, 255, .9); letter-spacing: 4px; }
.hiu-es::after { content: '❅  ❄  ❅'; left: auto; top: auto; right: 10px; bottom: 8px; }
.hiu-es.cair { animation: hiu-es-cair .5s ease-in forwards; }
.hiu-es[hidden] { display: none !important; }
@keyframes hiu-es-masuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes hiu-es-cair { from { opacity: 1; } to { opacity: 0; } }
.hiu-jaring {
  flex: none; width: 58px; height: 52px; border-radius: 14px; border: 2px solid #c9d6e2; background: #f1f5f9; color: #7c8ea3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; cursor: pointer; touch-action: manipulation;
}
.hiu-jaring .hj-ikon { font-size: 22px; line-height: 1; filter: grayscale(1); opacity: .55; }
.hiu-jaring .hj-isi { display: flex; gap: 2px; }
.hiu-jaring .hj-isi i { width: 7px; height: 7px; border-radius: 2px; background: #d3dce6; }
.hiu-jaring .hj-isi i.on { background: #ffc928; box-shadow: 0 0 4px rgba(255, 201, 40, .8); }
.hiu-jaring.siap { border-color: #ffc928; background: linear-gradient(#fff6c2, #ffd84a); color: #7a4c00; animation: hiu-jaring-siap .7s ease-in-out infinite alternate; }
.hiu-jaring.siap .hj-ikon { filter: none; opacity: 1; }
.hiu-jaring.goyang { animation: hiu-getar .4s ease-in-out; }
@keyframes hiu-jaring-siap { from { box-shadow: 0 0 0 0 rgba(255, 201, 40, .7); transform: scale(1); } to { box-shadow: 0 0 0 7px rgba(255, 201, 40, 0); transform: scale(1.06); } }
.hiu-poin small { font-size: .7em; color: #ffb86b; }
@keyframes hiu-naik { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -70%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.hiu-banner {
  position: absolute; left: 0; right: 0; top: 26%; text-align: center; pointer-events: none; z-index: 4;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; color: #fff; padding: 10px 0 14px;
  background: linear-gradient(90deg, rgba(8, 50, 100, 0), rgba(8, 50, 100, .55) 20%, rgba(8, 50, 100, .55) 80%, rgba(8, 50, 100, 0));
  overflow: hidden;
}
.hiu-banner::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: hiu-kilau-banner 1.6s ease-in-out .25s; }
.hiu-banner .hb-judul { font-size: clamp(40px, 11vw, 64px); line-height: 1; color: #fff; text-shadow: 0 4px 0 #0b4a80, 0 0 22px rgba(120, 220, 255, .8); letter-spacing: 1px; }
.hiu-banner .hb-sub { font-size: clamp(17px, 4.6vw, 24px); color: #ffe27a; text-shadow: 0 2px 0 #0b4a80; margin-top: 2px; }
@keyframes hiu-kilau-banner { from { left: -40%; } to { left: 120%; } }
.hiu-banner[hidden], .hiu-jeda[hidden] { display: none !important; }
.hiu-banner.masuk { animation: hiu-luncur 1.5s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes hiu-luncur { 0% { opacity: 0; transform: translateX(-60%); } 22% { opacity: 1; transform: translateX(4%); } 32% { transform: translateX(0); } 80% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(40%); } }
.hiu-jeda { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 40, 75, .55); z-index: 4; }
.hiu-jeda-kartu { background: var(--surface); color: var(--ink); border-radius: 22px; padding: 20px 22px; width: min(320px, 86vw); display: flex; flex-direction: column; gap: 10px; text-align: center; box-shadow: var(--shadow-2); }
.hiu-jeda-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; }
.hiu-jeda-kartu p { margin: 0; font-weight: 700; color: var(--ink-2); }
.hiu-jeda-kartu .btn + .btn { margin-top: 0; }
/* Panel bawah melayang di atas laut (kaca tembus pandang): laut terlihat sampai bawah
   dan penyelam melayang tepat di atas papan angka, di tengah baris balon. */
.hiu-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; color: var(--ink); padding: 0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
.hiu-panel > * { pointer-events: auto; }
.hiu-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 52px; pointer-events: none; }
.hiu-baris > * { pointer-events: auto; }
.hiu-balon {
  flex: 0 1 40%; max-width: 40%; font-size: 13px; line-height: 1.32; padding: 7px 10px; margin: 0;
  background: rgba(255, 255, 255, .86); color: #1d3b5a; box-shadow: 0 4px 14px rgba(0, 20, 50, .25);
}
.hiu-balon::before { left: auto; right: -6px; top: auto; bottom: 12px; background: rgba(255, 255, 255, .86); }
.hiu-baris-kanan { display: flex; align-items: center; gap: 8px; flex: none; }
/* Ikan mendekat ke penyelam: balon & ketikan di samping penyelam memudar supaya ikan tidak tertutup. */
.hiu-baris > * { transition: opacity .25s; }
.hiu-baris.redup .hiu-balon { opacity: .28; }
.hiu-baris.redup .hiu-jaring { opacity: .55; }
.hiu-layar {
  flex: none; min-width: 74px; height: 50px; padding: 0 10px; border-radius: 14px; background: rgba(234, 246, 255, .88); border: 2px solid rgba(185, 222, 245, .95);
  display: flex; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 4px 14px rgba(0, 20, 50, .25);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; color: #0f4a7d;
}
.hiu-layar .kosong { opacity: .35; }
.hiu-layar .hiu-salah { color: #e23b3b; font-style: normal; display: inline-block; animation: hiu-getar .45s ease-in-out, hiu-pudar .7s ease-in forwards; }
.hiu-pad { grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 7px; border-radius: 20px; background: rgba(8, 40, 75, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.hiu-pad .bs-key { min-height: clamp(46px, 6.2vh, 60px); background: rgba(255, 255, 255, .8); color: #123a62; box-shadow: 0 3px 0 rgba(10, 50, 90, .3); }
.hiu-pad .bs-key:active { background: rgba(255, 255, 255, .95); }
.hiu-pad .bs-del { grid-column: span 3; display: block !important; min-height: 42px; background: rgba(230, 240, 250, .7); }
.hiu-pad .hiu-ke-suara { grid-column: span 2; min-height: 42px; font-size: 17px; font-weight: 800; background: rgba(255, 236, 205, .85); color: #8a4b00; }
.hiu-pad .hiu-ke-suara[hidden] { display: none !important; }
.hiu-pad:has(.hiu-ke-suara[hidden]) .bs-del { grid-column: 1 / -1; }
@media (min-width: 900px) {
  /* Laptop: satu baris di bawah (balon · ketikan · papan angka); keyboard tetap jalan. */
  .hiu-panel { display: flex; align-items: center; gap: 14px; }
  .hiu-baris { flex: 0 0 38%; margin: 0; align-items: center; }
  .hiu-balon { flex: 1 1 auto; max-width: none; }
  .hiu-balon::before { left: -6px; right: auto; top: 50%; bottom: auto; margin-top: -6px; }
  .hiu-pad { flex: 1; grid-template-columns: repeat(12, 1fr); }
  .hiu-pad .hiu-ke-suara { grid-column: auto; min-height: 54px; font-size: 15px; }
  .hiu-pad .bs-key { min-height: 54px; font-size: 28px; }
  .hiu-pad .bs-del { grid-column: auto; min-height: 54px; }
}
/* Mode "Jawab dengan suara": papan angka diganti satu baris — mikrofon (berdenyut
   saat mendengar, gelombang saat ada suara), teks yang didengar, 🔢, dan ⌫. */
.hiu-dengar { display: flex; align-items: center; gap: 8px; padding: 7px; border-radius: 20px; background: rgba(8, 40, 75, .28); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.hiu-dengar[hidden], .hiu-pad[hidden] { display: none !important; }
.hd-mic { flex: none; position: relative; width: 62px; height: 62px; border-radius: 50%; border: 0; background: #ff6b6b; color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 rgba(120, 20, 20, .35); cursor: pointer; }
.hd-mic-ikon { font-size: 28px; line-height: 1; position: relative; z-index: 1; }
.hd-mic::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(255, 120, 120, .7); opacity: 0; }
.hiu-dengar.mati .hd-mic { background: #8a97a8; box-shadow: 0 3px 0 rgba(30, 40, 60, .35); }
.hiu-dengar.mati .hd-mic::after { content: ''; position: absolute; width: 4px; height: 44px; background: #fff; border-radius: 2px; transform: rotate(45deg); z-index: 2; box-shadow: 0 0 0 2px #8a97a8; }
.hiu-dengar.dengar .hd-mic::before, .hiu-dengar.bicara .hd-mic::before, .hiu-dengar.siap .hd-mic::before { animation: hd-denyut 1.3s ease-out infinite; }
.hiu-dengar.bicara .hd-mic { background: #ff4f6d; }
.hd-gel { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; align-items: flex-end; height: 12px; z-index: 1; }
.hd-gel i { width: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.hiu-dengar.bicara .hd-gel i { animation: hd-gel .5s ease-in-out infinite alternate; }
.hiu-dengar.bicara .hd-gel i:nth-child(2) { animation-delay: .1s; }
.hiu-dengar.bicara .hd-gel i:nth-child(3) { animation-delay: .2s; }
.hiu-dengar.bicara .hd-gel i:nth-child(4) { animation-delay: .15s; }
.hiu-dengar.bicara .hd-gel i:nth-child(5) { animation-delay: .05s; }
@keyframes hd-denyut { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes hd-gel { from { height: 3px; } to { height: 12px; } }
.hd-teks { flex: 1; min-width: 0; min-height: 50px; padding: 4px 12px; border-radius: 14px; background: rgba(234, 246, 255, .88); border: 2px solid rgba(185, 222, 245, .95);
  display: flex; align-items: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: #0f4a7d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hd-teks .hd-ajak { font-size: clamp(12.5px, 3.6vw, 15px); color: #5a7a98; font-weight: 700; }
.hd-teks.sementara { color: #6a8aa6; font-style: italic; }
.hd-teks.cocok { color: #148a52; background: rgba(220, 255, 235, .95); border-color: #6fd6a0; }
.hd-teks.tidak { font-size: 17px; color: #7a5a1a; background: rgba(255, 246, 220, .95); border-color: #f2cf7a; }
.hd-teks.tidak b { font-size: 22px; margin-left: 4px; }
.hd-pad { flex: none; width: 46px; height: 50px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .55); font-size: 22px; cursor: pointer; }
.hiu-dengar .hd-del { flex: none; width: 70px; min-height: 54px; display: block !important; background: rgba(255, 255, 255, .8); color: #123a62; box-shadow: 0 3px 0 rgba(10, 50, 90, .3); font-size: 24px; }
@media (min-width: 900px) { .hiu-dengar { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .hiu-dengar .hd-mic::before, .hiu-dengar .hd-gel i { animation: none !important; } }
.hiu-suara-btn { margin-top: 10px; }
/* Mode suara: layar ketikan tidak perlu (yang didengar tampil di baris mikrofon). */
.hiu.mode-suara .hiu-layar { display: none; }
/* Jawab dengan suara (v2.17): mic berdenyut tiap hasil, gelembung angka dari helm,
   gelombang suara ke ikan (kanvas laut3d), combo suara & berantai. */
.hiu-dengar .hd-mic.denyut { animation: hd-bump .28s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hd-bump { 0% { transform: scale(1); } 40% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(255, 120, 200, .35), 0 3px 0 rgba(120, 20, 20, .35); } 100% { transform: scale(1); } }
.hiu-gel-angka {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -50%);
  min-width: 64px; height: 64px; padding: 0 14px; border-radius: 32px; display: grid; place-items: center;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; color: #fff; white-space: nowrap;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85) 0 9%, rgba(255, 190, 245, .55) 10% 45%, rgba(200, 80, 220, .55) 75%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .85), 0 0 22px rgba(255, 110, 220, .75);
  text-shadow: 0 2px 0 #8a1f7a, 0 0 8px rgba(255, 255, 255, .7);
}
.hiu-gel-angka.muncul { animation: hiu-gel-muncul .26s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hiu-gel-muncul { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .2; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.hiu-gel-angka.pecah { animation: hiu-gel-pecah .5s ease-out forwards; }
@keyframes hiu-gel-pecah {
  0% { transform: translate(-50%, -50%) scale(1); } 25% { transform: translate(-50%, -50%) scale(1.25, .8) rotate(-6deg); }
  45% { transform: translate(-50%, -50%) scale(.85, 1.2) rotate(5deg); opacity: 1; }
  70% { transform: translate(-50%, -60%) scale(1.5); opacity: .5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 0 10px rgba(255, 200, 245, 0); }
  100% { transform: translate(-50%, -70%) scale(1.9); opacity: 0; }
}
.hiu-suara-super {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%); pointer-events: none; z-index: 4; text-align: center; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: .95; animation: hiu-combo-masuk 1.1s cubic-bezier(.2, 1.2, .3, 1) forwards;
}
.hiu-suara-super span { display: block; font-size: clamp(17px, 4.8vw, 24px); color: #fff; text-shadow: 0 2px 0 #7a1f6e; letter-spacing: 1px; }
.hiu-suara-super b { display: block; font-size: clamp(40px, 11vw, 64px); color: #ffc4f3; text-shadow: 0 3px 0 #a0287f, 0 0 22px rgba(255, 110, 220, .95); }
.hiu-suara-super.berantai b { color: #fff6a0; text-shadow: 0 3px 0 #b8660b, 0 0 22px rgba(255, 230, 90, .95); }
.hiu-suara-super.hebat b { background: linear-gradient(90deg, #ff7ad9, #ffe14d, #7af0ff, #b48bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 0 rgba(90, 20, 90, .6)) drop-shadow(0 0 12px rgba(255, 255, 255, .9)); }
@media (prefers-reduced-motion: reduce) { .hiu-dengar .hd-mic.denyut, .hiu-gel-angka { animation: none !important; } }
html[data-motion="reduced"] .hiu-dengar .hd-mic.denyut { animation: none !important; }
/* Pembahasan akhir: kertas & gambar biasa, bisa digulir. */
.hiu-bahas-mode .hiu-top { background: linear-gradient(#0f4f86, #155f99); }
.hiu-bahas-mode .hiu-top2 { display: none; }
.hiu-bahas-mode .hiu-stage { bottom: 0; overflow-y: auto; background: linear-gradient(#cdeefc, #eef9ff 40%, var(--bg)); color: var(--ink); }
.hiu-bahas { max-width: 640px; margin: 0 auto; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.hiu-ringkas { text-align: center; }
.hiu-ringkas-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 24px; color: #0f4a7d; }
.hiu-ringkas-angka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.hiu-ringkas-angka span { background: var(--surface); border-radius: 14px; padding: 6px 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.hiu-ringkas-angka b { font-family: 'Baloo 2', sans-serif; font-size: 20px; color: var(--ink); }
.hiu-bahas-no { font-weight: 800; font-size: 12.5px; color: var(--ink-2); }
.hiu-bahas-soal { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 40px; text-align: center; margin: 4px 0 10px; }
.hiu-bahas-jwb { display: inline-block; min-width: 1.2em; color: var(--brand); }
.hiu-bahas-jwb.terisi { color: #13924a; animation: hiu-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.hiu-viz { margin-bottom: 10px; }
.hiu-viz svg { max-height: 200px; }
.hiu-bahas-aksi { display: flex; flex-direction: column; gap: 8px; }
.hiu-bahas-aksi .btn + .btn { margin-top: 0; }
.hiu-bahas .dock { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .hiu-banner.masuk, .hiu-poin, .hiu-papan.pop .hp-ketik b.baru, .hiu-kilat.nyala, .hiu-jaring.siap, .hiu-papan.bicara::after { animation-duration: .01s; }
}
.hiu-bahas-aksi .btn[hidden] { display: none !important; }
.hiu-bahas-mode .hiu-combo, .hiu-bahas-mode .hiu-jeda-btn, .hiu-bahas-mode .hiu-oksigen { visibility: hidden; }
.hiu-ringkas-sub { font-weight: 800; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.hiu-rekor-baru { display: inline-block; margin-top: 8px; padding: 5px 14px; border-radius: 14px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 18px; color: #6b3d00; background: linear-gradient(#fff3b0, #ffcf3a); box-shadow: 0 0 0 3px rgba(255, 207, 58, .35), 0 4px 12px rgba(160, 100, 0, .3); animation: hiu-pop .6s cubic-bezier(.2, 1.6, .4, 1); }
/* Banner level & lulus level */
.hiu-banner.masuk { animation-duration: var(--lama, 1.5s); }
.hiu-banner.level .hb-judul { color: #fff; }
.hiu-banner.level .hb-sub { color: #9fe8ff; }
.hiu-banner.lulus { background: linear-gradient(90deg, rgba(120, 70, 0, 0), rgba(150, 90, 0, .62) 18%, rgba(150, 90, 0, .62) 82%, rgba(120, 70, 0, 0)); }
.hiu-banner.lulus .hb-judul { color: #ffe066; text-shadow: 0 4px 0 #9a4f00, 0 0 26px rgba(255, 220, 90, .95); }
.hiu-banner.lulus .hb-sub { color: #fff; }
/* Menu: lanjutkan level & peta kedalaman */
/* Menu v2: lima topik dalam satu baris ringkas supaya "Lanjutkan Level" tampak di layar pertama HP. */
.hiu-menu .hiu-pilih { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hiu-menu .hiu-pilih-kartu, .hiu-menu .hiu-pilih-kartu.hp-div, .hiu-menu .hiu-pilih-kartu.hp-campur { grid-column: auto; min-height: 74px; padding: 7px 2px; gap: 1px; border-radius: 14px; }
.hiu-menu .hiu-pilih-kartu .hp-emoji { font-size: 22px; }
.hiu-menu .hiu-pilih-kartu .hp-judul { font-size: 14.5px; }
.hiu-menu-art { font-size: 34px; }
.hiu-menu-head h1 { font-size: 25px; }
.hiu-menu-head p { font-size: 13.5px; line-height: 1.42; }
@media (min-width: 700px) { .hiu-menu .hiu-pilih-kartu .hp-emoji { font-size: 30px; } .hiu-menu .hiu-pilih-kartu .hp-judul { font-size: 18px; } .hiu-menu .hiu-pilih-kartu { min-height: 96px; } }
.hiu-pilih-kartu .hp-lv { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 11px; color: #2f6c96; white-space: nowrap; }
.hiu-pilih-kartu.fokus { background: linear-gradient(#ffffff, #d6f2ff); }
.hiu-lanjut { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 20px; color: #fff; box-shadow: var(--shadow-2); }
.hiu-lanjut .hl-info { flex: 1 1 160px; min-width: 0; }
.hiu-lanjut .hl-dalam { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.hiu-lanjut .hl-zona { font-weight: 800; font-size: 15px; opacity: .95; }
.hiu-lanjut .hl-rekor { font-weight: 700; font-size: 13px; opacity: .9; margin-top: 2px; }
.hiu-lanjut .hl-btn { flex: 1 1 200px; margin: 0; font-size: 19px; }
.hiu-lanjut.z-karang, .hiu-peta-baris.z-karang { background: linear-gradient(135deg, #38b6e8, #1673b3); }
.hiu-lanjut.z-lepas, .hiu-peta-baris.z-lepas { background: linear-gradient(135deg, #1f6fb5, #0b3f7a); }
.hiu-lanjut.z-senja, .hiu-peta-baris.z-senja { background: linear-gradient(135deg, #1b4b85, #061a3a); }
.hiu-lanjut.z-malam, .hiu-peta-baris.z-malam { background: linear-gradient(135deg, #0f2550, #020818); }
.hiu-lanjut.z-abisal, .hiu-peta-baris.z-abisal { background: linear-gradient(135deg, #0b1838, #01030c); }
.hiu-lanjut.z-palung, .hiu-peta-baris.z-palung { background: linear-gradient(135deg, #2a1d4f, #01020a); }
.hiu-peta { display: flex; flex-direction: column; gap: 0; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-1); }
.hiu-peta-baris { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 0; color: #fff; text-align: left; cursor: pointer; font: inherit; touch-action: manipulation; position: relative; }
.hiu-peta-baris + .hiu-peta-baris { border-top: 1px solid rgba(255, 255, 255, .08); }
.hiu-peta-baris .hpb-dalam { flex: 0 0 74px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; text-align: right; color: #bdeeff; font-variant-numeric: tabular-nums; }
.hiu-peta-baris .hpb-titik { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }
.hiu-peta-baris .hpb-nama { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.hiu-peta-baris .hpb-nama b { font-family: 'Baloo 2', sans-serif; margin-right: 4px; }
.hiu-peta-baris.lulus .hpb-titik { background: #2fd27a; box-shadow: 0 0 0 2px #b7ffd5; }
.hiu-peta-baris.kini .hpb-titik { background: #ffd23a; color: #5a3a00; box-shadow: 0 0 0 3px #fff3b0, 0 0 14px rgba(255, 220, 80, .9); animation: hiu-jaring-siap .8s ease-in-out infinite alternate; }
.hiu-peta-baris.kunci { cursor: default; }
.hiu-peta-baris.kunci .hpb-nama, .hiu-peta-baris.kunci .hpb-dalam { opacity: .55; }
.hiu-peta-baris.goyang { animation: hiu-getar .4s ease-in-out; }
.xp-row.hiu-level-row.naik, .xp-row.hiu-row.rekor { box-shadow: 0 0 0 3px rgba(255, 207, 58, .55), var(--shadow-1); }

/* Pengaturan → Diagnosa mic */
.diag-mic { display: block; }
.diag-mic summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.diag-mic summary::-webkit-details-marker { display: none; }
.diag-mic summary::before { content: '▸'; color: var(--ink-3); }
.diag-mic[open] summary::before { content: '▾'; }
.diag-isi { margin-top: 8px; }
.diag-daftar { margin: 8px 0; padding-left: 18px; max-height: 220px; overflow: auto; font-size: 13.5px; }
.diag-daftar li { margin: 3px 0; overflow-wrap: anywhere; }
.diag-daftar span { color: var(--ink-3); }
.diag-tombol { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   Arena (permainan versus) & Tarik Tambang Angka
   ========================================================================== */
.mode-tile.accent-arena { background: linear-gradient(160deg, #ffe1dc, var(--surface) 70%); }
.arena-kepala { text-align: center; padding: 4px 6px 0; }
.arena-art { font-size: 44px; }
.arena-kepala h1 { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; margin: 0 0 4px; }
.arena-kepala p { margin: 0 auto; max-width: 520px; font-weight: 700; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.arena-daftar { display: flex; flex-direction: column; gap: 10px; }
.arena-kartu {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 22px;
  color: #fff; text-align: left; font: inherit; cursor: pointer; box-shadow: var(--shadow-2); touch-action: manipulation;
  position: relative; overflow: hidden;
}
.arena-kartu:active { transform: scale(.98); }
.arena-merah { background: linear-gradient(135deg, #ff6b4a, #e2323c 60%, #b8233a); }
.arena-laut { background: linear-gradient(135deg, #38b6e8, #1673b3); }
.arena-kue { background: linear-gradient(135deg, #ffb35c, #e7782b); }
.arena-kartu.segera { filter: saturate(.45); opacity: .82; cursor: default; }
.arena-kartu .ak-emoji { font-size: 46px; flex: none; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .18)); }
.arena-kartu .ak-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arena-kartu .ak-teks b { font-family: 'Baloo 2', sans-serif; font-size: 21px; line-height: 1.15; }
.arena-kartu .ak-teks small { font-weight: 700; font-size: 13.5px; opacity: .95; line-height: 1.35; }
.arena-kartu .ak-teks em { font-style: normal; font-weight: 800; font-size: 12.5px; opacity: .9; }
.arena-kartu .ak-go { font-size: 22px; flex: none; }
.arena-kartu .ak-segera { flex: none; font-weight: 800; font-size: 12px; padding: 4px 9px; border-radius: 10px; background: rgba(255, 255, 255, .25); }
.arena-kode .ak-judul { font-weight: 800; margin-bottom: 8px; }
.arena-kode-baris { display: flex; gap: 8px; }
.arena-kode-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .3em; font-weight: 800; font-size: 22px; text-align: center; }
.arena-kode-btn { flex: none; width: auto; margin: 0; padding: 0 22px; }

html.game-open .tb, .tb { position: fixed; inset: 0; z-index: 30; background: #9fd8ff; color: var(--ink); overflow: hidden; }
.tb-adegan { position: absolute; inset: 0; overflow: hidden; touch-action: manipulation; background: linear-gradient(#5aa9f0, #cfeeff 55%, #6cc04a 55%); }
.tb-kanvas { display: block; width: 100%; height: 100%; }
.tb-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: flex-start; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
  background: linear-gradient(rgba(10, 40, 90, .45), rgba(10, 40, 90, 0));
}
.tb-top .icon-btn { background: rgba(255, 255, 255, .92); color: #123a62; flex: none; }
.tb-hud { flex: 1; min-width: 0; color: #fff; }
.tb-hud.judul { display: flex; align-items: center; min-height: 40px; font-family: 'Baloo 2', sans-serif; font-size: 20px; text-shadow: 0 2px 0 rgba(10, 40, 90, .5); }
.tb-hud.main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.tb-sisi { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 16px; font-weight: 800; }
.tb-sisi.aku { background: rgba(47, 123, 255, .9); }
.tb-sisi.lawan { background: rgba(255, 75, 62, .9); justify-content: flex-end; }
.tb-sisi .tb-av { font-size: 26px; flex: none; }
.tb-sisi .tb-nama { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.tb-sisi .tb-angka { font-family: 'Baloo 2', sans-serif; font-size: 24px; line-height: 1; flex: none; }
.tb-waktu { font-family: 'Baloo 2', sans-serif; font-size: 22px; line-height: 1; padding: 6px 10px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: #123a62; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 rgba(10, 40, 90, .25); }
.tb-waktu.genting { color: #e2323c; animation: hiu-denyut .5s ease-in-out infinite alternate; }
.tb-meter { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(47, 123, 255, .85), rgba(255, 255, 255, .85) 50%, rgba(255, 75, 62, .85)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.tb-meter-garis { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; }
.tb-meter-pita { position: absolute; top: -4px; width: 12px; height: 18px; margin-left: -6px; border-radius: 4px; background: #e5222f; box-shadow: 0 0 0 2px #fff; transition: left .3s cubic-bezier(.2, 1.4, .4, 1); }

.tb-tengah { position: absolute; left: 0; right: 0; top: 30%; z-index: 5; display: grid; place-items: center; pointer-events: none; }
.tb-hitung { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(90px, 28vw, 150px); color: #fff; text-shadow: 0 6px 0 #1f5fb8, 0 0 30px rgba(120, 200, 255, .9); animation: tb-hitung .9s cubic-bezier(.2, 1.4, .4, 1); }
.tb-hitung.tarik { font-size: clamp(60px, 18vw, 110px); color: #ffe066; text-shadow: 0 6px 0 #c2410c, 0 0 30px rgba(255, 220, 90, .95); }
@keyframes tb-hitung { from { transform: scale(2.2); opacity: 0; } 40% { opacity: 1; } to { transform: scale(1); } }
.tb-tengah[data-putus]::after { content: '📶 Menyambung lagi…'; font-weight: 800; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .9); }

.tb-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); max-height: 78%; overflow-y: auto; }
.tb-panel.lobi, .tb-panel.tunggu, .tb-panel.hasil { max-width: 560px; margin: 0 auto; }
.tb-kartu { background: color-mix(in srgb, var(--surface) 94%, transparent); border-radius: 24px; padding: 14px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; backdrop-filter: blur(6px); }
.tb-kartu .btn + .btn { margin-top: 0; }
.tb-kartu-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.1; }
.tb-kecil { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.tb-stat { color: var(--brand); }
.tb-label { font-weight: 800; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.tb-kelas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.tb-topik { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.tb-opt {
  position: relative; min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: inherit; cursor: pointer; padding: 4px 2px; touch-action: manipulation;
}
.tb-opt small { font-size: 10.5px; font-weight: 700; color: var(--ink-2); line-height: 1; }
.tb-opt b { font-family: 'Baloo 2', sans-serif; font-size: 18px; line-height: 1.1; }
.tb-opt .tb-emoji { font-size: 18px; line-height: 1; }
.tb-opt i { position: absolute; top: -6px; right: -4px; font-style: normal; font-size: 14px; }
.tb-opt.aktif { border-color: #e2323c; background: #fff0ee; box-shadow: 0 0 0 3px rgba(226, 50, 60, .18); }
.tb-opt.kunci { opacity: .6; }
.tb-buat { margin-top: 4px; font-size: 19px; background: linear-gradient(#ff6b4a, #e2323c); }
.tb-kode-masuk { display: flex; align-items: center; gap: 8px; }
.tb-kode-masuk .tb-kecil { flex: none; }
.tb-kode-masuk .field { flex: 1 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .25em; font-weight: 800; text-align: center; }
.tb-kode-masuk .btn { flex: none; width: auto; margin: 0; padding: 0 18px; }
.tb-memuat { text-align: center; font-weight: 800; }
.tb-kode-label { text-align: center; font-weight: 800; font-size: 13px; color: var(--ink-2); }
.tb-kode { text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 54px; letter-spacing: .18em; line-height: 1; color: #e2323c; }
.tb-tengah-teks { text-align: center; }
.tb-bagi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-bagi .btn { margin: 0; font-size: 15px; padding-left: 6px; padding-right: 6px; }
.tb-wa { background: linear-gradient(#2ecf6b, #1aa152); text-decoration: none; display: flex; align-items: center; justify-content: center; }
.tb-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.tb-vs { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; color: #e2323c; }
.tb-pemain { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 18px; background: var(--surface-2, #eef1ff); text-align: center; min-width: 0; }
.tb-pemain b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-pemain small { font-weight: 700; font-size: 12px; color: var(--ink-2); }
.tb-pemain.siap { background: #e6f9ee; box-shadow: inset 0 0 0 2px #2ecf6b; }
.tb-pemain.kosong { opacity: .8; border: 2px dashed var(--line); background: transparent; }
.tb-pemain .tb-av-besar { font-size: 46px; }
.tb-tunggu-ikon { font-size: 36px; animation: hiu-denyut .8s ease-in-out infinite alternate; }
.tb-siap { font-size: 19px; }
.tb-siap.sudah { background: #2ecf6b; }

.tb-panel.main { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; overflow: visible; max-height: none; }
.tb-soal {
  align-self: center; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 6px;
  min-width: min(100%, 300px); padding: 8px 18px; border-radius: 22px; background: rgba(255, 255, 255, .94);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(38px, 11vw, 56px); line-height: 1.05; color: #16204a;
  box-shadow: 0 4px 0 rgba(10, 40, 90, .2), var(--shadow-2); transition: opacity .2s;
}
.tb-soal.redup { opacity: .55; }
.tb-soal .tb-ketik { min-width: 1.2em; text-align: center; color: #1f6fe0; border-bottom: 4px solid #1f6fe0; }
.tb-soal .tb-ketik.kosong { color: #b6c2dc; border-bottom-color: #c9d3ea; }
.tb-soal.benar { animation: tb-benar .35s ease-out; }
@keyframes tb-benar { 40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(46, 207, 107, .5), var(--shadow-2); } }
.tb-soal.salah { background: #fff1ef; animation: hiu-getar .45s ease-in-out; }
.tb-soal .tb-betul { color: #13924a; }
.tb-soal .tb-peleset { flex-basis: 100%; text-align: center; font-family: 'Nunito', sans-serif; font-size: 15px; color: #e2323c; }
.tb-pad { padding: 7px; border-radius: 20px; background: rgba(10, 40, 90, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); gap: 7px; }
.tb-pad .bs-key { min-height: clamp(48px, 6.6vh, 64px); background: rgba(255, 255, 255, .92); color: #123a62; box-shadow: 0 3px 0 rgba(10, 50, 90, .3); }
.tb-pad .tb-ok { background: linear-gradient(#ff6b4a, #e2323c); color: #fff; font-size: 22px; }
.tb-pad.mati .bs-key { opacity: .45; }

.tb-hasil-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.05; text-align: center; }
.tb-hasil.menang .tb-hasil-judul { color: #1f6fe0; }
.tb-hasil.kalah .tb-hasil-judul { color: #c2410c; }
.tb-hasil > .tb-kecil { text-align: center; }
.tb-hasil-angka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-hasil-angka > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; background: var(--surface-2, #eef1ff); min-width: 0; }
.tb-hasil-angka > div:first-child { box-shadow: inset 0 0 0 2px rgba(47, 123, 255, .6); }
.tb-hasil-angka > div:last-child { box-shadow: inset 0 0 0 2px rgba(255, 75, 62, .6); }
.tb-hasil-angka .tb-av { font-size: 34px; }
.tb-hasil-angka b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-hasil-angka span { font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.tb-bahas { display: flex; flex-direction: column; gap: 4px; }
.tb-bahas-baris { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 10px; border-radius: 10px; background: #fff6e5; }
.tb-bahas-baris span { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; }
.tb-bahas-baris b { color: #13924a; }
.tb-bahas-baris small { font-weight: 700; color: #c2410c; }
.tb-sempurna { text-align: center; }
.tb-ajak { padding: 10px; border-radius: 16px; background: #fff8dd; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.tb-aksi { display: flex; flex-direction: column; gap: 6px; }
.tb-lagi { font-size: 19px; }
.tb-lagi.denyut { animation: hiu-jaring-siap .7s ease-in-out infinite alternate; }

/* Adegan cadangan 2D */
.tb2 { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: flex-end; }
.tb2-svg { width: 100%; height: 100%; }
.tb2-geser { transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.tb2-condong { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(var(--arah) * -12deg)); transition: transform .3s; }
.tb2-anak.tarik .tb2-condong { transform: rotate(calc(var(--arah) * -24deg)); }
.tb2-anak.peleset .tb2-condong { animation: tb2-peleset 1.2s ease-in-out; }
@keyframes tb2-peleset { 20% { transform: rotate(calc(var(--arah) * 14deg)); } 45% { transform: rotate(calc(var(--arah) * -6deg)); } 70% { transform: rotate(calc(var(--arah) * 8deg)); } }
.tb2.tegang .tb2-tali { animation: tb2-getar .08s linear infinite alternate; }
@keyframes tb2-getar { to { transform: translateY(.8px); } }
.tb2-anak.jatuh .tb2-condong { transform: rotate(calc(var(--arah) * 70deg)) translateY(6px); }
@media (prefers-reduced-motion: reduce) { .tb2-geser, .tb2-condong { transition: none; } }
html[data-motion="reduced"] .tb-hitung, html[data-motion="reduced"] .tb-soal.benar, html[data-motion="reduced"] .tb-soal.salah { animation: none; }
.tb-wa { text-align: center; line-height: 1.2; }
.tb-pemain.kosong b { white-space: normal; }
@media (max-width: 400px) {
  .tb-sisi .tb-nama { display: none; }
  .tb-sisi.aku { justify-content: space-between; }
  .tb-bagi .btn { font-size: 14px; }
}
/* Layar lebar (laptop): kartu lobi/tunggu/hasil di samping kanan, adegan tetap terlihat utuh. */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .tb-panel.lobi, .tb-panel.tunggu, .tb-panel.hasil {
    left: auto; right: 18px; bottom: 18px; width: 420px; max-height: calc(100% - 90px); margin: 0; padding: 0;
  }
}
.tb2 { background: linear-gradient(#7fd0ff, #d8f3ff); }
.tb2-svg { overflow: visible; }
.tb-panel.hasil .tb-kartu { animation: tb-naik .45s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes tb-naik { from { transform: translateY(110%); } }
.tb-seru { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(56px, 17vw, 96px); color: #ffe066; text-shadow: 0 5px 0 #c2410c, 0 0 26px rgba(255, 220, 90, .9); animation: tb-hitung .7s cubic-bezier(.2, 1.4, .4, 1); }
.tb-seru.kalah { color: #fff; text-shadow: 0 5px 0 #7a4e2c, 0 0 20px rgba(120, 80, 40, .6); }
html[data-motion="reduced"] .tb-panel.hasil .tb-kartu, html[data-motion="reduced"] .tb-seru { animation: none; }
.tb-tengah:has(.tb-seru) { top: calc(70px + env(safe-area-inset-top)); }
@media (max-width: 899px) { .tb-panel.hasil { max-height: 68%; } }

/* ---------- Tarik Tambang v2.21: tim, layar besar, efek ---------- */
.tb3-label-lapis { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.tb3-label { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; will-change: transform; }
.tb3-label span { font-weight: 800; font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 9px; color: #fff; max-width: 92px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.tb3-label.biru span { background: rgba(31, 100, 230, .88); }
.tb3-label.merah span { background: rgba(226, 50, 60, .88); }
.tb3-label i { font-style: normal; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 13px; color: #ffe14d; text-shadow: 0 2px 0 #7a4b00, 0 0 8px rgba(255, 225, 77, .9); animation: tb3-kamu .8s ease-in-out infinite alternate; }
.tb3-label.kamu span { box-shadow: 0 0 0 2px #ffe14d, 0 2px 0 rgba(0, 0, 0, .2); }
@keyframes tb3-kamu { to { transform: translateY(3px); } }
.tb3-plus { position: absolute; z-index: 3; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; transform: translate(-50%, -50%); pointer-events: none; animation: tb3-plus 1s cubic-bezier(.3, .7, .5, 1) forwards; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.tb3-plus.biru { color: #9cc2ff; -webkit-text-stroke: 1px #0d3d99; }
.tb3-plus.merah { color: #ffb0a8; -webkit-text-stroke: 1px #8f1a20; }
.tb3-plus.kamu { color: #ffe14d; -webkit-text-stroke: 1px #7a4b00; font-size: 32px; }
@keyframes tb3-plus {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  18% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; }
  45% { transform: translate(-50%, -110%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); opacity: 0; }
}
.tb3-garis { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; }
.tb3-garis.nyala { animation: tb3-garis .9s ease-out; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, .0) 0deg 5deg, rgba(255, 255, 255, .55) 5deg 6deg); -webkit-mask: radial-gradient(circle at 50% 55%, transparent 28%, #000 62%); mask: radial-gradient(circle at 50% 55%, transparent 28%, #000 62%); }
.tb3-garis.nyala.biru { box-shadow: inset 0 0 80px 10px rgba(47, 123, 255, .45); }
.tb3-garis.nyala.merah { box-shadow: inset 0 0 80px 10px rgba(255, 75, 62, .45); }
.arena-robot { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 2px dashed var(--line); background: var(--surface); padding: 12px 14px; cursor: pointer; font: inherit; color: var(--ink); }
.arena-robot .ak-teks { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.arena-robot .ak-teks small { color: var(--ink-3); font-weight: 700; }
.arena-robot .ak-emoji { font-size: 30px; }
.tb-lawan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-robot-cepat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tb-robot-cepat .tb-opt b { font-size: 12px; line-height: 1.1; }
.tb.sinematik .tb-top, .tb.sinematik .tb-panel, .tb.sinematik .tb-tengah, .tb.sinematik .tb-tepi, .tb.sinematik .tb-seruan { display: none !important; }
/* Sinematik akhir Tarik Tambang: bilah film, kilat, cap komik, noda lumpur di lensa, sinar, spanduk. */
.tb3-sine { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; --sx: 50%; --sy: 45%; }
.tb3-sine [hidden] { display: none !important; }
.tb3-sine-bilah { position: absolute; left: 0; right: 0; height: 11%; background: #000; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tb3-sine-bilah.atas { top: 0; transform: translateY(-101%); }
.tb3-sine-bilah.bawah { bottom: 0; transform: translateY(101%); }
.tb3-sine.aktif .tb3-sine-bilah { transform: none; }
.tb3-sine-lewati { position: absolute; right: 12px; bottom: calc(11% + 10px); pointer-events: auto; border: 0; border-radius: 999px; padding: 7px 14px; font: 800 13px/1 'Baloo 2', sans-serif; color: #fff; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s .6s; cursor: pointer; }
.tb3-sine.aktif .tb3-sine-lewati { opacity: 1; }
.tb3-sine-kilat { position: absolute; inset: 0; background: #fff; opacity: 0; }
.tb3-sine.byur .tb3-sine-kilat { animation: tb3-kilat .45s ease-out; }
.tb3-sine-cap { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0); font: 800 clamp(54px, 15vw, 120px)/1 'Baloo 2', sans-serif; color: #ffe14d; -webkit-text-stroke: 3px #5a3410; text-shadow: 0 6px 0 #5a3410, 0 0 30px rgba(255, 210, 60, .7); letter-spacing: 2px; opacity: 0; }
.tb3-sine.byur .tb3-sine-cap { animation: tb3-cap 1.35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.tb3-sine-lensa i { position: absolute; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: radial-gradient(circle at 35% 30%, rgba(160, 110, 60, .95), rgba(74, 44, 21, .95) 60%); box-shadow: inset -4px -6px 0 rgba(40, 22, 8, .35); opacity: 0; transform: scale(.2); animation: tb3-lensa 1.5s ease-out forwards; }
.tb3-sine-lensa i::after { content: ''; position: absolute; left: 40%; top: 80%; width: 22%; height: 60%; border-radius: 0 0 50% 50%; background: rgba(74, 44, 21, .9); }
.tb3-sine-sinar { position: absolute; left: var(--sx); top: var(--sy); width: 260vmax; height: 260vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 224, 120, .0) 0deg 9deg, rgba(255, 224, 120, .26) 9deg 18deg); -webkit-mask: radial-gradient(circle, transparent 6%, #000 11%, transparent 34%); mask: radial-gradient(circle, transparent 6%, #000 11%, transparent 34%); mix-blend-mode: screen; opacity: 0; transition: opacity .6s; }
.tb3-sine.juara .tb3-sine-sinar { opacity: 1; animation: tb3-sinar 9s linear infinite; }
.tb3-sine-spanduk { position: absolute; left: 50%; top: calc(11% + 14px); transform: translate(-50%, -160%); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 22px 10px; border-radius: 16px; background: linear-gradient(180deg, #ff4b3e, #c8262b); box-shadow: 0 6px 0 rgba(0, 0, 0, .25); color: #fff; white-space: nowrap; transition: transform .55s cubic-bezier(.2, 1.5, .4, 1), opacity .3s; }
.tb3-sine-spanduk.biru { background: linear-gradient(180deg, #4b8dff, #1d5fd6); }
.tb3-sine-spanduk b { font: 800 clamp(24px, 7vw, 44px)/1 'Baloo 2', sans-serif; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.tb3-sine-spanduk small { font-weight: 800; font-size: 13px; opacity: .92; }
.tb3-sine-spanduk small:empty { display: none; }
.tb3-sine.juara .tb3-sine-spanduk { transform: translate(-50%, 0); opacity: 1; }
.tb3-sine.pulang .tb3-sine-bilah, .tb3-sine.pulang .tb3-sine-spanduk { transition-duration: .5s; }
@keyframes tb3-kilat { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes tb3-cap { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0) rotate(-14deg); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.08) rotate(-6deg); } }
@keyframes tb3-lensa { 0% { opacity: 0; transform: scale(.2); } 8% { opacity: 1; transform: scale(1.08); } 14% { transform: scale(1); } 70% { opacity: .95; transform: translateY(14px) scale(1); } 100% { opacity: 0; transform: translateY(34px) scale(.96); } }
@keyframes tb3-sinar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes tb3-garis { 0% { opacity: 0; transform: scale(1.15); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* HUD gaya siaran olahraga */
.tb-sisi { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
.tb-sisi.aku { clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); padding-right: 16px; }
.tb-sisi.lawan { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); padding-left: 16px; }
.tb-sisi.biru { background: linear-gradient(180deg, #4d8dff, #1f5fd6); }
.tb-sisi.merah { background: linear-gradient(180deg, #ff6b5e, #d22d36); }
.tb-sisi::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.tb-tim-ikon { font-size: 18px; flex: none; }
.tb-meter-merah { background: linear-gradient(90deg, rgba(255, 75, 62, .85), rgba(255, 255, 255, .85) 50%, rgba(47, 123, 255, .85)); }
.tb.genting .tb-waktu { background: #e2323c; color: #fff; animation: tb-genting .5s ease-in-out infinite alternate; }
@keyframes tb-genting { to { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(226, 50, 60, .35); } }
.tb-lencana { font-size: 13px; padding: 2px 8px; border-radius: 9px; background: rgba(255, 255, 255, .25); margin-left: 6px; }
/* Hitung mundur timbul */
.tb-hitung { -webkit-text-stroke: 3px #10306e; text-shadow: 0 4px 0 #10306e, 0 8px 0 #0b2252, 0 12px 18px rgba(0, 0, 0, .35); }
.tb-hitung[data-n="3"] { color: #ff6b5e; }
.tb-hitung[data-n="2"] { color: #ffd23a; }
.tb-hitung[data-n="1"] { color: #4fe08b; }
.tb-hitung.tarik { -webkit-text-stroke: 3px #7a2a00; text-shadow: 0 4px 0 #7a2a00, 0 8px 0 #5a1d00, 0 0 34px rgba(255, 220, 90, .95); letter-spacing: 2px; }
/* Lobi: format */
.tb-format { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tb-format .tb-opt b { font-size: 15px; }
.tb-guru { font-size: 14px; }
.tb-tonton { padding: 0 12px !important; font-size: 18px; }
/* Ruang tunggu tim */
.tb-tim-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-tim { border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tb-tim.biru { background: #e9f0ff; box-shadow: inset 0 0 0 2px rgba(47, 123, 255, .45); }
.tb-tim.merah { background: #ffeceb; box-shadow: inset 0 0 0 2px rgba(255, 75, 62, .45); }
.tb-tim-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 4px; }
.tb-tim-judul small { margin-left: auto; font-family: 'Nunito', sans-serif; font-size: 12px; color: var(--ink-2); }
.tb-tim-baris { display: flex; align-items: center; gap: 5px; min-height: 34px; padding: 3px 5px; border-radius: 10px; background: rgba(255, 255, 255, .8); min-width: 0; }
.tb-tim-baris .tb-av { font-size: 22px; flex: none; }
.tb-tim-nama { flex: 1; min-width: 0; font-weight: 800; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-tim-siap { flex: none; font-size: 14px; }
.tb-tim-baris.kosong { background: transparent; border: 2px dashed rgba(0, 0, 0, .12); opacity: .7; }
.tb-tim-baris.kamu { box-shadow: 0 0 0 2px #ffd23a; }
.tb-tim-baris.luring { opacity: .6; }
.tb-tendang { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .08); color: var(--ink-2); font-weight: 800; cursor: pointer; }
.tb-pindah { margin: 2px 0 0 !important; min-height: 36px; font-size: 13px; padding: 0 6px; }
.tb-mulai:disabled { opacity: .55; }
.tb-aksi .btn + .btn { margin-top: 0; }
/* Hasil tim */
.tb-hasil-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tb-hasil-tim { border-radius: 16px; padding: 7px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-hasil-tim.biru { background: #e9f0ff; }
.tb-hasil-tim.merah { background: #ffeceb; }
.tb-hasil-tim.juara { box-shadow: 0 0 0 3px #ffd23a, 0 6px 16px rgba(255, 190, 40, .35); }
.tb-hasil-tim-judul { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; display: flex; gap: 4px; align-items: center; }
.tb-hasil-tim-judul b { margin-left: auto; font-size: 20px; }
.tb-hasil-baris { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border-radius: 9px; background: rgba(255, 255, 255, .8); min-width: 0; }
.tb-hasil-baris .tb-av { font-size: 20px; flex: none; }
.tb-hasil-baris.pahlawan { background: linear-gradient(90deg, #fff3b0, #fff); }
.tb-hasil-baris.kamu { box-shadow: 0 0 0 2px #ffd23a; }
.tb-hasil-skor { flex: none; font-weight: 700; font-size: 11.5px; color: var(--ink-2); }
/* Layar besar (proyektor/TV) */
.tb.layar-besar .tb-panel.main.tonton { left: auto; right: 16px; bottom: 16px; width: min(340px, 40%); max-width: none; margin: 0; }
.tb-sorak { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; min-height: 40px; }
.tb-sorak-baris { font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); padding: 6px 12px; border-radius: 14px; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); animation: tb-benar .4s ease-out; }
.tb-sorak-baris.biru { background: rgba(31, 100, 230, .9); }
.tb-sorak-baris.merah { background: rgba(226, 50, 60, .9); }
.tb.layar-besar .tb-hud.main { max-width: 900px; margin: 0 auto; }
.tb.layar-besar .tb-sisi .tb-angka { font-size: 32px; }
.tb.layar-besar .tb-waktu { font-size: 30px; }
.tb-seru.biru { color: #9cc2ff; text-shadow: 0 5px 0 #0d3d99, 0 0 26px rgba(80, 150, 255, .9); }
.tb-seru.merah { color: #ffd0cb; text-shadow: 0 5px 0 #8f1a20, 0 0 26px rgba(255, 90, 80, .9); }
@media (max-width: 400px) { .tb-tim-baris .tb-av { display: none; } .tb-format .tb-opt b { font-size: 13px; } }
html[data-motion="reduced"] .tb3-plus, html[data-motion="reduced"] .tb3-garis.nyala, html[data-motion="reduced"] .tb.genting .tb-waktu { animation: none; }
.arena-kode .ak-sub { font-weight: 700; font-size: 12.5px; color: var(--ink-2); margin: -4px 0 8px; }
.tb3-label-lapis.padat .tb3-label span { font-size: 10px; padding: 2px 5px; max-width: 64px; }
.tb3-label-lapis.padat .tb3-label i { font-size: 11px; }
.tb3-plus.kecil { font-size: 16px; }
.tb3-label.pemimpin span::before { content: '👑 '; }
.tb-sisi.naik { filter: brightness(1.25) saturate(1.2); box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255, 255, 255, .8); }
.tb-sisi.naik .tb-angka { transform: scale(1.18); }
.tb-sisi .tb-angka { transition: transform .15s; }

/* ---------- Tarik Tambang v2.21.1: posisi di sudut mata ---------- */
.tb { --tb-aku: #2f7bff; --tb-lawan: #ff4b3e; }
.tb-soal { position: relative; flex-direction: column; align-items: stretch; gap: 2px; width: min(100%, 440px); min-width: 0; padding: 6px 16px 6px;
  border: 3px solid transparent; transition: opacity .2s, border-color .3s, box-shadow .3s; }
.tb-soal-isi { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 6px; }
.tb-soal.pos-unggul { border-color: color-mix(in srgb, var(--tb-aku) 70%, white); box-shadow: 0 4px 0 rgba(10, 40, 90, .2), 0 0 16px color-mix(in srgb, var(--tb-aku) 45%, transparent); }
.tb-soal.pos-tertinggal { border-color: color-mix(in srgb, var(--tb-lawan) 70%, white); box-shadow: 0 4px 0 rgba(10, 40, 90, .2), 0 0 16px color-mix(in srgb, var(--tb-lawan) 45%, transparent); }
/* Mini-tali: tinggi tetap 20 px, tidak pernah menggeser soal atau papan angka. */
.tb-mini { height: 20px; flex: none; display: flex; align-items: center; gap: 8px; font-family: 'Nunito', sans-serif; }
.tb-mini-rel { position: relative; flex: 1; height: 8px; border-radius: 5px; overflow: visible; }
.tb-mini-sisi { position: absolute; top: 0; bottom: 0; width: 50%; }
.tb-mini-sisi.aku { left: 0; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, var(--tb-aku), color-mix(in srgb, var(--tb-aku) 30%, white)); }
.tb-mini-sisi.lawan { right: 0; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tb-lawan) 30%, white), var(--tb-lawan)); }
.tb-mini-tengah { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #16204a; opacity: .5; }
.tb-mini-pita { position: absolute; top: 50%; left: 50%; width: 10px; height: 16px; margin: -8px 0 0 -5px; border-radius: 3px; background: #e5222f; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, .35); transition: left .35s cubic-bezier(.2, 1.3, .4, 1); }
.tb-mini-teks { flex: none; min-width: 88px; text-align: right; font-size: 13px; font-weight: 800; line-height: 1; color: #5a6585; }
.tb-mini.unggul .tb-mini-teks { color: color-mix(in srgb, var(--tb-aku) 80%, black); }
.tb-mini.tertinggal .tb-mini-teks { color: color-mix(in srgb, var(--tb-lawan) 80%, black); }
/* Seruan pergantian pimpinan: pil di ATAS kartu soal, tidak menutupi angka. */
.tb-seruan { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px) scale(.9); opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; line-height: 1; padding: 7px 14px; border-radius: 999px; color: #fff; background: #5a6585; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); transition: opacity .2s, transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.tb-seruan.tampil { opacity: 1; transform: translate(-50%, 0) scale(1); }
.tb-seruan.unggul { background: var(--tb-aku); }
.tb-seruan.tersusul { background: var(--tb-lawan); }
/* Cahaya tepi menjelang akhir: hijau "hampir menang", merah "awas"; lemah di bawah (papan angka). */
.tb-tepi { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s; }
.tb-tepi.hampir, .tb-tepi.awas { opacity: 1; animation: tb-tepi 1.1s ease-in-out infinite alternate; }
.tb-tepi.hampir { box-shadow: inset 0 0 70px 18px rgba(46, 220, 110, .55); }
.tb-tepi.awas { box-shadow: inset 0 0 70px 18px rgba(255, 50, 50, .55); }
.tb-tepi { -webkit-mask: linear-gradient(#000 55%, rgba(0, 0, 0, .25) 80%, rgba(0, 0, 0, .1)); mask: linear-gradient(#000 55%, rgba(0, 0, 0, .25) 80%, rgba(0, 0, 0, .1)); }
@keyframes tb-tepi { from { opacity: .45; } to { opacity: 1; } }
html[data-motion="reduced"] .tb-tepi.hampir, html[data-motion="reduced"] .tb-tepi.awas { animation: none; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .tb-tepi.hampir, .tb-tepi.awas { animation: none; opacity: .8; } .tb-mini-pita { transition: none; } }
.tb.layar-besar .tb-tepi { display: none; }
/* "Terpeleset!" sebagai lencana di tepi atas kartu: kartu tidak bertambah tinggi. */
.tb-soal .tb-peleset { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); flex-basis: auto; padding: 3px 10px; border-radius: 999px; background: #e2323c; color: #fff; font-size: 13px; line-height: 1; box-shadow: 0 2px 0 rgba(0, 0, 0, .2); }