/* Balon Jatuh Matematika: 1 sampai 3 jalur atau satu jalur lebar untuk sekelas */
.bj { --team-c: #059669; --team-c-soft: #d1fae5; }
.bj .lanes { flex: 1; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); min-height: 0; }
.bj .lanes.n1 { --n: 1; } .bj .lanes.n2 { --n: 2; } .bj .lanes.n3 { --n: 3; }
.lane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: clamp(4px, 1vw, 14px); gap: clamp(4px, 1vh, 10px); border-right: 3px solid #fff; }
.lane:last-child { border-right: 0; }
.lane.a { background: var(--team-a-soft); } .lane.b { background: var(--team-b-soft); } .lane.c { background: var(--team-c-soft); }
.lanes.n1 .lane.a { background: var(--sky-50); }
.lhead { display: flex; align-items: center; gap: 8px; }
.lane h2 { margin: 0; flex: 1; font-size: clamp(13px, 1.8vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane.a h2 { color: var(--team-a); } .lane.b h2 { color: var(--team-b); } .lane.c h2 { color: var(--team-c); }
.lanes.n1 .lane.a h2 { color: var(--sky-d); }
.score { min-width: 2.2em; text-align: center; padding: 0 8px; border-radius: 999px; background: #fff; font-family: var(--font); font-weight: 800; font-size: clamp(15px, 2vw, 26px); color: var(--ink); border: 3px solid var(--line); }
.hearts { display: inline-flex; gap: 3px; }
.hearts[hidden] { display: none; }
.hearts i { width: clamp(14px, 1.8vw, 24px); height: clamp(14px, 1.8vw, 24px); background: #cbd5e1; }
.hearts i { clip-path: polygon(50% 100%, 6% 55%, 2% 30%, 15% 8%, 36% 8%, 50% 25%, 64% 8%, 85% 8%, 98% 30%, 94% 55%); }
.hearts i.on { background: #e11d48; }

.bj .qbox {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  background: #fff; border: 4px solid var(--line); border-radius: 20px; padding: clamp(3px, 1vh, 12px) 8px;
  font-family: var(--font); font-weight: 800; color: var(--ink); line-height: 1.1; font-size: clamp(20px, 3.4vw, 54px);
}
.lane.a .qbox { border-color: var(--team-a); } .lane.b .qbox { border-color: var(--team-b); } .lane.c .qbox { border-color: var(--team-c); }
.lanes.n1 .lane.a .qbox { border-color: var(--sky-d); }
.field { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #e0f2fe, #f0f9ff); border: 3px solid #fff; }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: #16a34a; }

.balloon {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; cursor: pointer; touch-action: manipulation;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.65) 0 10%, transparent 11%), var(--c);
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; color: #fff; font-family: var(--font); font-weight: 800;
  display: grid; place-items: center; box-shadow: inset -6px -8px 0 rgba(0,0,0,.14); will-change: transform;
}
.balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22%; margin-left: -1px; background: rgba(15,23,42,.35); }
.balloon span { pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.balloon:focus-visible { outline: 4px solid var(--amber); outline-offset: 3px; }
.balloon:disabled { cursor: default; }
.balloon.pop { animation: bj-pop .3s forwards; pointer-events: none; }
.balloon.popwrong { animation: bj-pop .3s forwards; filter: grayscale(1); pointer-events: none; }
@keyframes bj-pop { 50% { transform-origin: center; opacity: .9; scale: 1.3; } 100% { opacity: 0; scale: 1.6; } }

.bj .feedback { left: 6px; right: 6px; top: 6px; bottom: auto; padding: 6px 10px; border-width: 3px; border-radius: 14px; font-size: clamp(12px, 1.4vw, 18px); pointer-events: none; opacity: .96; z-index: 4; }
.bj .feedback b { display: inline; margin-right: 6px; font-size: 1.05em; }
.outmask { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(51,65,85,.72); color: #fff; font-family: var(--font); font-weight: 800; font-size: clamp(18px, 3vw, 36px); z-index: 3; }
.lane.out .outmask { display: flex; }
.winner.c { color: var(--team-c); }

@media (max-width: 700px) and (orientation: portrait) {
  .bj .lanes.n3 .pre { display: none; }
  .bj .lanes.n3 .score { min-width: 1.8em; padding: 0 4px; font-size: 14px; border-width: 2px; }
  .bj .lanes.n3 .hearts { gap: 1px; }
  .bj .lanes.n3 .hearts i { width: 11px; height: 11px; }
  .bj .qbox { font-size: clamp(16px, 5vw, 26px); }
  .bj .lanes.n3 .qbox { font-size: clamp(14px, 4vw, 20px); }
}
@media (max-height: 520px) {
  .lane { padding: 4px 6px; gap: 3px; }
  .lane h2 { font-size: 12px; }
  .score { font-size: 14px; border-width: 2px; }
  .bj .qbox { border-width: 3px; border-radius: 12px; font-size: clamp(16px, 8vh, 28px); padding: 1px 4px; }
  .field { border-radius: 12px; border-width: 2px; }
}