/* Terjun ke Habitat: Belajar habitat dan permainan Terjun (DOM + transform, ringan) */
.hb { --hb: #4d7c0f; --hb-soft: #ecfccb; --hb-ink: #14532d; }
.hb-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(6px, 1.2vw, 14px); overflow-y: auto; overflow-x: hidden; background: linear-gradient(180deg, #f0f9ff, #fff 60%); -webkit-overflow-scrolling: touch; }
.hb-wrap.play { overflow: hidden; }
.hb-view { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 12px); min-width: 0; }
.hb-view[hidden] { display: none; }
.hb-play { flex: 1; min-height: 0; }
.hb-hud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.hb-hud:empty { display: none; }
.hb-chip { background: #fff; border: 3px solid var(--c); color: var(--ink); border-radius: 999px; padding: 1px 12px; font-weight: 800; font-size: clamp(13px, 1.5vw, 18px); display: inline-flex; gap: 6px; align-items: baseline; }
.hb-chip b { font-size: 1.2em; font-variant-numeric: tabular-nums; }
.hb-chip i { font-style: normal; }
.hb-chip.on { background: var(--c); color: #fff; }
.hb-qn { font-weight: 800; color: var(--muted); font-size: clamp(13px, 1.4vw, 16px); margin-left: 6px; }
.hb h2 { margin: 0; font-size: clamp(18px, 2.4vw, 26px); }
.hb h3 { margin: 0 0 6px; font-size: clamp(16px, 1.9vw, 20px); }
.hb-names { display: grid; gap: 6px; }
.hb-names input { font: 700 16px var(--font); padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; min-width: 0; width: 100%; box-sizing: border-box; text-align: center; }
.hb-names input[hidden] { display: none; }
#game-opts[hidden], #g-level[hidden], #g-line[hidden] { display: none; }
.hb-tip { margin: 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 14px; }

/* gambar organisme */
.hb-pic { display: inline-block; width: var(--ps, 64px); height: var(--ps, 64px); flex: none; line-height: 0; }
.hb-pic svg { width: 100%; height: 100%; display: block; }
.hb-ph { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--h, #94a3b8); color: #fff; font: 800 calc(var(--ps, 64px) * .5)/1 var(--font); }

/* ===== belajar ===== */
.hb-tabs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.hb-tab { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: 800 clamp(14px, 1.6vw, 17px) var(--font); cursor: pointer; }
.hb-tab[aria-pressed="true"] { background: var(--hc); border-color: var(--hc); color: #fff; }
.hb-tab:focus-visible, .hb-act:focus-visible, .hb-dir:focus-visible, .hb-stage:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.hb-sec { background: #fff; border: 3px solid var(--hc); border-radius: 22px; padding: 0 0 14px; min-width: 0; overflow: hidden; }
.hb-banner { position: relative; height: clamp(90px, 18vh, 150px); background: var(--hc); }
.hb-banner svg { width: 100%; height: 100%; display: block; }
.hb-banner h2 { position: absolute; left: 12px; bottom: 8px; margin: 0; color: #fff; background: rgba(15, 23, 42, .62); padding: 2px 14px; border-radius: 999px; font-size: clamp(20px, 3vw, 30px); }
.hb-sec > *:not(.hb-banner) { margin-left: 14px; margin-right: 14px; }
.hb-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 16px; margin-top: 10px; color: var(--ink); line-height: 1.5; font-size: clamp(14px, 1.5vw, 16px); }
.hb-info p { margin: 0; background: #f8fafc; border: 2px solid var(--line); border-radius: 14px; padding: 6px 12px; }
.hb-info ul { margin: 2px 0 0; padding-left: 20px; }
.hb-sec h3 { margin: 12px 14px 6px; color: var(--hc); }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.hb-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 12px; border-radius: 18px; border: 3px solid var(--hs); background: #fff; color: var(--ink); text-align: center; min-width: 0; }
.hb-card .hb-pic { --ps: clamp(84px, 14vw, 120px); }
.hb-card b { font-size: clamp(15px, 1.7vw, 18px); line-height: 1.2; overflow-wrap: anywhere; }
.hb-card em { font-style: normal; font-size: 12px; font-weight: 800; background: var(--hs); color: var(--hc); border-radius: 999px; padding: 0 10px; }
.hb-card p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.hb-card small { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }

/* ===== terjun ===== */
.hb-q { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.6vw, 18px); background: #fff; border: 3px solid var(--hb); border-radius: 18px; padding: 4px 12px; min-height: 52px; flex: none; }
.hb-q .hb-pic { --ps: clamp(44px, 9vh, 76px); }
.hb-qtext { margin: 0; flex: 1 1 200px; text-align: center; font-weight: 800; color: var(--ink); font-size: clamp(15px, 2.1vw, 24px); line-height: 1.3; overflow-wrap: anywhere; }
.hb-qtext small { display: block; font-size: .6em; color: var(--hb); letter-spacing: .03em; text-transform: uppercase; }
.hb-stage { position: relative; flex: 1; min-height: 190px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #3b82d6 0%, #7cc4f5 55%, #cdeeff 100%); border: 3px solid #fff; box-shadow: 0 0 0 2px #cbd5e1; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; contain: layout paint; }
.hb-stage.shake { animation: hb-shake .45s; }
@keyframes hb-shake { 20% { transform: translate(-5px, 4px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, 0); } }
.hb-d { position: absolute; left: 0; top: 0; pointer-events: none; line-height: 0; will-change: transform; }
.hb-d svg { width: 100%; height: 100%; display: block; }
.hb-sun { opacity: .9; }
.hb-ground { position: absolute; left: 0; right: 0; bottom: 0; display: flex; z-index: 3; box-shadow: 0 -3px 0 rgba(15, 23, 42, .25); }
.hb-zone { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #64748b; border-left: 2px solid rgba(255, 255, 255, .8); }
.hb-zone:first-child { border-left: 0; }
.hb-zone > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hb-zl { position: absolute; left: 3px; right: 3px; bottom: 4px; text-align: center; font-weight: 800; font-size: clamp(10.5px, 1.5vw, 15px); line-height: 1.15; color: #0f172a; background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 2px 3px; overflow-wrap: anywhere; border-bottom: 4px solid var(--hz, #64748b); }
.hb-zone.near::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px #fde047; background: rgba(253, 224, 71, .22); pointer-events: none; }
.hb-zone.good::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 5px #16a34a; background: rgba(34, 197, 94, .28); pointer-events: none; }
.hb-zone.bad::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 5px #e11d48; background: rgba(225, 29, 72, .25); pointer-events: none; }
.hb-j { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; transform-origin: 50% 100%; }
.hb-j > span { position: absolute; left: 0; bottom: 0; width: 100%; display: block; line-height: 0; transform-origin: 50% 100%; }
.hb-j svg { width: 100%; height: auto; display: block; }
.hb-j .hb-ch { display: none; }
.hb-j.open .hb-fa { display: none; }
.hb-j.open .hb-ch { display: block; animation: hb-pop .35s ease-out; }
.hb-j.hard { transform-origin: 50% 100%; }
.hb-j.hard .hb-fa { display: block; }
.hb-j.hard .hb-ch { display: none; }
.hb-j.hard > span { transform: rotate(80deg) translateY(-8%); }
@keyframes hb-pop { 0% { transform: scale(.4, .3); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
.hb-line { position: absolute; width: 0; border-left: 4px dotted rgba(255, 255, 255, .95); z-index: 2; pointer-events: none; filter: drop-shadow(0 0 2px rgba(15, 23, 42, .5)); will-change: transform; }
.hb-line[hidden] { display: none; }
.hb-alt { position: absolute; right: 6px; top: 62px; bottom: calc(var(--gh, 90px) + 12px); width: 14px; border-radius: 8px; background: rgba(255, 255, 255, .55); border: 2px solid #fff; z-index: 5; pointer-events: none; overflow: hidden; }
.hb-alt i { position: absolute; left: 0; right: 0; display: block; }
.hb-alt .g { background: #4ade80; }
.hb-alt .r { background: #f43f5e; bottom: 0; }
.hb-alt b { position: absolute; left: -3px; right: -3px; height: 6px; border-radius: 3px; background: #0f172a; border: 1px solid #fff; transform: translateY(-50%); will-change: top; }
.hb-wind { position: absolute; left: 8px; top: 8px; z-index: 5; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 2px 10px; font: 800 13px var(--font); color: #0369a1; pointer-events: none; }
.hb-wind[hidden] { display: none; }
.hb-act { position: absolute; right: 26px; top: 8px; --ax: 0px; z-index: 6; min-height: 52px; min-width: 150px; padding: 0 22px; border-radius: 999px; border: 0; background: #f59e0b; color: #fff; font: 800 clamp(17px, 2.2vw, 22px) var(--font); box-shadow: 0 4px 0 #b45309; cursor: pointer; touch-action: manipulation; }
.hb-act:active { transform: translateY(2px); box-shadow: 0 2px 0 #b45309; }
.hb-act.go { background: #16a34a; box-shadow: 0 4px 0 #166534; }
.hb-fb .hb-act { position: sticky; bottom: 0; display: block; margin: 8px auto 2px; }
.hb-act.nx { background: #0284c7; box-shadow: 0 4px 0 #075985; }
.hb-dir { position: absolute; z-index: 6; bottom: calc(var(--gh, 90px) + 8px); width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; background: rgba(15, 23, 42, .5); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; touch-action: none; }
.hb-dir svg { width: 30px; height: 30px; }
.hb-dir.l { left: 8px; } .hb-dir.r { right: 30px; }
.hb-dir:active, .hb-dir.down { background: rgba(245, 158, 11, .85); }
.hb-dir[hidden], .hb-act[hidden] { display: none; }
.hb-hint { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); z-index: 5; max-width: 80%; text-align: center; background: rgba(255, 255, 255, .92); border-radius: 14px; padding: 6px 14px; font: 700 clamp(13px, 1.7vw, 17px)/1.4 var(--font); color: var(--ink); pointer-events: none; }
.hb-hint[hidden] { display: none; }
.hb-fb { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 7; max-width: 640px; margin: 0 auto; max-height: calc(100% - 12px); overflow: auto; padding: 8px 14px; border-radius: 16px; background: #fff; border: 4px solid var(--line); color: var(--ink); font-weight: 700; font-size: clamp(14px, 1.7vw, 18px); line-height: 1.4; box-shadow: 0 6px 18px rgba(15, 23, 42, .3); }
.hb-fb[hidden] { display: none; }
.hb-fb.ok { border-color: var(--ok); } .hb-fb.bad { border-color: var(--bad); }
.hb-fb b.r { display: block; font-size: 1.12em; }
.hb-fb.ok b.r { color: var(--ok); } .hb-fb.bad b.r { color: var(--bad); }
.hb-fb p { margin: 4px 0 0; font-weight: 600; font-size: .92em; color: var(--ink); }
.hb-fb small { display: block; color: var(--muted); font-weight: 700; margin-top: 2px; }
.hb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hasil */
.hb-score { display: flex; flex-direction: column; gap: 4px; font-size: clamp(15px, 2vw, 22px); margin-bottom: 6px; }
.hb-recap { text-align: left; max-height: 36vh; overflow: auto; margin: 6px 0; }
.hb-recap:empty { display: none; }
.hb-recap h3 { margin: 4px 0 6px; font-size: 16px; }
.hb-recap ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.hb-recap li span { display: block; color: var(--muted); }

@media (max-width: 520px) {
  .hb-act { min-width: 0; padding: 0 16px; }
  .hb-dir { width: 56px; height: 56px; }
}
@media (max-width: 420px) {
  .hb-hud { gap: 4px; }
  .hb-chip { font-size: 12px; padding: 0 8px; border-width: 2px; }
  .hb-qn { font-size: 12px; margin-left: 2px; }
  .hb-q { padding: 2px 8px; min-height: 40px; border-width: 2px; }
  .hb-q .hb-pic { --ps: 40px; }
  .hb-qtext { font-size: 13.5px; line-height: 1.25; }
  .hb-fb { font-size: 13px; padding: 6px 10px; border-width: 3px; }
  .hb-hint { font-size: 12.5px; top: 30%; }
}
@media (max-height: 520px) {
  #overlay-result .trophy { display: none; } #overlay-result .winner { font-size: 30px; margin: 0; } #overlay-result .panel { padding-top: 14px; }
  .hb-wrap { gap: 3px; padding: 4px 8px; }
  .hb-q { min-height: 40px; border-width: 2px; padding: 2px 10px; }
  .hb-q .hb-pic { --ps: 38px; }
  .hb-qtext { font-size: 15px; }
  .hb-stage { min-height: 120px; }
  .hb-act { min-height: 48px; top: 6px; }
  .hb-dir { width: 56px; height: 56px; }
  .hb-fb { padding: 6px 12px; font-size: 14px; top: 6px; }
  .hb-fb .hb-act { margin: 6px auto 2px; }
  .hb-alt { top: 58px; }
  .hb-recap { max-height: 28vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}