/* ===== Arena: HUD di atas video kamera ===== */
.arena {
  --text: #ffffff;
  --muted: #d6d0f5;
  color: var(--text);
  position: fixed; inset: 0;
  max-width: none; min-height: 0; padding: 0; gap: 0;
  background: #000;
  overflow: hidden;
}
.stage { position: absolute; inset: 0; }
.stage video, .stage canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.stage video { opacity: 0.72; }
.arena-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgba(14, 10, 43, 0.85) 0%, transparent 26%, transparent 60%, rgba(14, 10, 43, 0.9) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(14, 10, 43, 0.65) 100%);
}
/* Bingkai kalibrasi menyala hijau / merah */
.calib-ok .stage { box-shadow: inset 0 0 0 8px var(--ok), inset 0 0 60px rgba(168, 255, 62, 0.5); }
.calib-bad .stage { box-shadow: inset 0 0 0 8px var(--bad), inset 0 0 60px rgba(255, 84, 104, 0.5); }

.sim-pad {
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: flex-end;
  padding-bottom: 24vh;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(120, 80, 255, 0.35), transparent 70%),
    repeating-linear-gradient(-28deg, #150f3c 0 22px, #1a1349 22px 44px);
  z-index: 0;
}
.sim-pad p { color: var(--muted); margin: 0; font-size: 0.875rem; font-weight: 600; }

.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-center, .energy, .hud-coach { pointer-events: none !important; }

/* --- atas: bar pemain --- */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  padding: max(10px, env(safe-area-inset-top)) 10px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.bars { flex: 1; display: grid; gap: 6px; min-width: 0; }
.bar {
  --c: var(--me);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 3px;
  padding: 6px 10px 8px;
  border-radius: 16px;
  background: rgba(10, 6, 34, 0.72);
  border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.bar .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar .who .avatar { width: 32px; height: 32px; font-size: 1rem; }
.bar .name { font-weight: 800; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .tagline { font-size: 0.75rem; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar > span:empty { display: none; }
.bar .reps {
  font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--c);
  -webkit-text-stroke: 2px #0b0726; paint-order: stroke fill; text-shadow: 0 3px 0 #0b0726;
}
.bar .track {
  grid-column: 1 / -1; height: 14px; border-radius: 999px;
  background: #0b0726; border: 2px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.bar .fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0 6px, transparent 6px 12px), linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
  border-radius: inherit;
  transition: width 0.35s var(--ease-back);
  box-shadow: 0 0 12px var(--c);
}
.bar.out { opacity: 0.5; }
.bar.bump .reps { animation: bump 0.35s var(--ease-back); }

/* --- tengah: timer, counter, combo, target --- */
.hud-center {
  position: absolute; left: 0; right: 0; top: 43%;
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: 4px;
  text-align: center;
}
.timer-box {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 16px 5px 6px; border-radius: 999px;
  background: rgba(10, 6, 34, 0.78); border: 3px solid #3b2f80;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}
.timer-ring { width: 40px; height: 40px; transform: rotate(-90deg); }
.timer-ring circle { fill: none; stroke-width: 5; }
.timer-ring .track { stroke: rgba(255, 255, 255, 0.14); }
.timer-ring .prog { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 0; transition: stroke-dashoffset 0.25s linear, stroke 0.3s; filter: drop-shadow(0 0 4px var(--cyan)); }
.timer { font-family: var(--display); font-size: clamp(1.4rem, 6vw, 2.1rem); line-height: 1; color: #fff; letter-spacing: 0.02em; text-shadow: 0 2px 0 #0b0726; white-space: nowrap; }
.timer-box.low { border-color: var(--bad); animation: timer-shake 0.5s ease-in-out infinite; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 84, 104, 0.7); }
.timer-box.low .prog { stroke: var(--bad); filter: drop-shadow(0 0 5px var(--bad)); }
.timer-box.low .timer { color: #ffd0d6; }
@keyframes timer-shake { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-3deg) scale(1.05); } 75% { transform: rotate(3deg) scale(1.05); } }

.count-wrap { position: relative; display: grid; place-items: center; }
.count-rays {
  position: absolute; width: 150%; aspect-ratio: 1; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 49, 0.18) 0 8deg, transparent 8deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 62%);
  mask-image: radial-gradient(circle, #000 15%, transparent 62%);
  animation: spin 18s linear infinite;
  opacity: 0.55;
  transition: opacity 0.3s;
}
/* Counter rep: raksasa, outline tebal, terbaca dari 1–2 m */
.count {
  position: relative;
  font-family: var(--display);
  font-size: clamp(8.5rem, min(42vmin, 24vh), 21rem);
  line-height: 0.82;
  color: var(--gold);
  background: linear-gradient(180deg, #fff6c8 0%, var(--gold) 45%, var(--fire) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 0 0 #0b0726) drop-shadow(5px 0 0 #0b0726) drop-shadow(-5px 0 0 #0b0726) drop-shadow(0 -5px 0 #0b0726) drop-shadow(0 10px 0 #0b0726) drop-shadow(0 14px 26px rgba(255, 122, 26, 0.55));
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 70%;
}
.count.bump { animation: count-pop 0.38s var(--ease-back); }
.count.reject { background: linear-gradient(180deg, #ffd0d6 0%, var(--bad) 60%, var(--red-deep) 100%); -webkit-background-clip: text; background-clip: text; animation: shake 0.4s; }
@keyframes count-pop { 0% { transform: scale(1); } 30% { transform: scale(1.32, 1.2) rotate(-3deg); } 60% { transform: scale(0.92, 1.05) rotate(1deg); } 100% { transform: scale(1); } }

/* Combo bertingkat */
.combo { min-height: 3.2rem; display: grid; justify-items: center; line-height: 1; }
.combo b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.4rem);
  color: var(--tc, #fff);
  -webkit-text-stroke: 3px #0b0726; paint-order: stroke fill;
  text-shadow: 0 4px 0 #0b0726, 0 0 22px var(--tg, transparent);
  letter-spacing: 0.02em;
}
.combo small { font-family: var(--display); font-size: clamp(0.95rem, 4vw, 1.3rem); color: #fff; text-shadow: 0 2px 0 #0b0726; letter-spacing: 0.08em; }
.combo.t1 { --tc: var(--lime); --tg: rgba(168, 255, 62, 0.6); }
.combo.t2 { --tc: var(--cyan); --tg: rgba(46, 232, 255, 0.7); }
.combo.t3 { --tc: var(--gold); --tg: rgba(255, 197, 49, 0.8); }
.combo.t4 { --tc: var(--fire); --tg: rgba(255, 122, 26, 0.9); }
.combo.t5 { --tc: #fff; --tg: rgba(236, 42, 63, 1); }
.combo.t5 b { background: linear-gradient(90deg, var(--red-hi), var(--gold), var(--fire), var(--red-hi)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; filter: drop-shadow(0 3px 0 #0b0726) drop-shadow(0 0 16px rgba(236, 42, 63, 0.9)); text-shadow: none; animation: rainbow 0.8s linear infinite; }
@keyframes rainbow { to { background-position: 200% 0; } }
.combo.pop b { animation: tier-slam 0.6s var(--ease-back); }
.combo.tick small { animation: bump 0.3s var(--ease-back); }
@keyframes tier-slam { 0% { transform: scale(3) rotate(-8deg); opacity: 0; } 50% { transform: scale(0.9) rotate(2deg); opacity: 1; } 100% { transform: scale(1); } }
/* Arena makin "panas" seiring tingkat combo */
.hud[data-tier='t3'] .count-rays { opacity: 0.8; }
.hud[data-tier='t4'] .count-rays, .hud[data-tier='t5'] .count-rays { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 122, 26, 0.32) 0 8deg, transparent 8deg 18deg); animation-duration: 6s; }
.hud[data-tier='t5'] ~ .arena-vignette, .arena:has(.hud[data-tier='t5']) .arena-vignette { box-shadow: inset 0 0 120px rgba(236, 42, 63, 0.55); }

.target-bar {
  display: flex; align-items: center; gap: 8px;
  width: min(320px, 78vw);
  padding: 5px 12px 5px 8px; border-radius: 999px;
  background: rgba(10, 6, 34, 0.75); border: 2px solid #3b2f80;
  font-weight: 800; font-size: 0.85rem;
}
.target-bar .icon { color: var(--gold); }
.target-track { flex: 1; height: 10px; border-radius: 999px; background: #0b0726; overflow: hidden; }
.target-fill { height: 100%; transform-origin: left; transform: scaleX(0); border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--lime)); transition: transform 0.35s var(--ease-back); }
.target-bar.reached { border-color: var(--lime); box-shadow: 0 0 16px rgba(168, 255, 62, 0.6); }
.target-bar.reached .target-fill { background: linear-gradient(90deg, var(--lime), var(--gold)); }

/* --- energy bar vertikal --- */
.energy {
  position: absolute; right: 8px; top: 43%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 4px;
}
.energy span { display: none; }
.energy-ico { width: 26px; height: 26px; --o1: var(--bolt); --o3: #fff; filter: drop-shadow(0 0 6px var(--bolt)); }
.energy-track {
  width: 18px; height: min(34vh, 240px);
  border-radius: 999px; padding: 3px;
  background: #0b0726; border: 2px solid #3b2f80;
  display: flex; align-items: flex-end;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
.energy .energy-fill {
  width: 100%; height: 100%;
  border-radius: 999px;
  transform-origin: 50% 100%; transform: scaleY(0);
  transition: transform 0.2s linear, background 0.3s;
  background: linear-gradient(0deg, var(--red), var(--fire));
}
.energy[data-level='mid'] .energy-fill { background: linear-gradient(0deg, var(--fire), var(--gold)); }
.energy[data-level='high'] .energy-fill { background: linear-gradient(0deg, var(--lime), var(--cyan)); box-shadow: 0 0 14px var(--cyan); }
.energy[data-level='low'] .energy-ico { filter: none; opacity: 0.6; }

/* --- maskot pojok --- */
/* Maskot pojok kiri atas, di bawah bar pemain (area itu jarang tertutup badan pemain). */
.hud-coach { position: absolute; left: 4px; top: calc(max(10px, env(safe-area-inset-top)) + var(--bars-h, 72px)); width: min(104px, 24vw); }
.hud-coach .coach-bubble { left: 88%; right: auto; top: 18%; bottom: auto; transform-origin: 0 50%; min-width: 0; width: max-content; max-width: 46vw; text-align: left; }
.hud-coach .coach-bubble::after { display: none; }

/* --- bawah --- */
.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.feedback {
  font-family: var(--display); font-size: clamp(1.7rem, 7vw, 2.6rem); min-height: 1.2em; line-height: 1.1;
  -webkit-text-stroke: 3px #0b0726; paint-order: stroke fill; text-shadow: 0 4px 0 #0b0726;
}
.feedback.good { color: var(--lime); animation: pop 0.35s var(--ease-back); }
.feedback.bad { color: var(--bad); animation: shake 0.35s; }
.status {
  color: #fff; font-size: 1.02rem; font-weight: 600; max-width: 520px;
  padding: 8px 14px; border-radius: 14px; background: rgba(10, 6, 34, 0.7);
}
.status:empty { display: none; }
.room-info {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  background: rgba(10, 6, 34, 0.85); padding: 10px 14px; border-radius: 18px; border: 3px solid #3b2f80;
}
.room-info strong { font-family: var(--display); font-size: 2.2rem; letter-spacing: 0.2em; color: var(--gold); text-shadow: 0 3px 0 #0b0726; }
.sim-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* --- countdown 3-2-1-GO --- */
.countdown {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(46, 10, 120, 0.55), rgba(5, 3, 20, 0.75));
  overflow: hidden;
}
.countdown::before {
  content: ''; position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.06) 0 6deg, transparent 6deg 14deg);
  animation: spin 8s linear infinite;
}
.countdown span {
  position: relative;
  font-family: var(--display);
  line-height: 1;
  -webkit-text-stroke: 8px #0b0726; paint-order: stroke fill;
  text-shadow: 0 14px 0 #0b0726;
}
.cd-num { font-size: 48vmin; color: #fff; animation: slam 0.95s var(--ease-out) both; }
.cd-num[data-n='3'] { color: var(--cyan); }
.cd-num[data-n='2'] { color: var(--gold); }
.cd-num[data-n='1'] { color: var(--fire); }
.cd-go {
  font-size: 40vmin; color: var(--lime);
  text-shadow: 0 14px 0 #0b0726, 0 0 60px rgba(168, 255, 62, 0.8);
  animation: go-slam 0.7s var(--ease-back) both;
}
@keyframes slam {
  0% { transform: scale(4); opacity: 0; }
  22% { transform: scale(0.85); opacity: 1; }
  34% { transform: scale(1.06); }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0; }
}
@keyframes go-slam { 0% { transform: scale(0.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.2) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }

/* --- Push & Quiz --- */
.quiz {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  background: linear-gradient(180deg, rgba(47, 34, 117, 0.97), rgba(23, 16, 66, 0.97));
  border: 3px solid #0b0726;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel), inset 0 0 0 2px rgba(168, 255, 62, 0.25);
  padding: 16px;
  z-index: 4;
  display: grid; gap: 12px;
  animation: quiz-in 0.45s var(--ease-back);
}
@keyframes quiz-in { from { transform: translate(-50%, -50%) scale(0.6) rotate(-3deg); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.quiz-head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.2rem; color: var(--lime); }
.quiz-head .orn { width: 30px; height: 30px; --o1: var(--pink); --o2: #fff; }
.quiz-time { flex: 1; height: 12px; border-radius: 999px; background: #0b0726; overflow: hidden; border: 2px solid #3b2f80; }
.quiz-time span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--fire), var(--gold), var(--lime)); transform-origin: left; }
.quiz-stem { margin: 0; font-size: clamp(1.15rem, 4.2vw, 1.7rem); font-weight: 700; line-height: 1.3; text-align: center; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-opt {
  position: relative; overflow: hidden;
  display: grid; gap: 6px; align-content: center;
  min-height: 100px;
  padding: 12px;
  border-radius: var(--radius);
  border: 3px solid #0b0726;
  background: linear-gradient(180deg, var(--night-4), var(--night-3));
  box-shadow: 0 5px 0 #0b0726;
  color: var(--text);
  font-size: clamp(1.05rem, 4vw, 1.5rem); font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease-back);
}
.quiz-opt .arrow { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.quiz-opt .opt-text { position: relative; z-index: 1; }
.quiz-opt .hold { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 197, 49, 0.45), rgba(255, 122, 26, 0.35)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 0.08s linear; }
.quiz-opt[data-side='RIGHT'] .hold { transform-origin: right; }
.quiz-opt.leaning { border-color: var(--gold); transform: scale(1.05); box-shadow: 0 5px 0 #0b0726, 0 0 24px rgba(255, 197, 49, 0.6); }
.quiz-opt.correct { border-color: var(--lime); background: linear-gradient(180deg, #4c9c00, #2c5c00); box-shadow: 0 5px 0 #0b0726, 0 0 30px rgba(168, 255, 62, 0.7); animation: bump 0.45s var(--ease-back); }
.quiz-opt.wrong { border-color: var(--bad); background: linear-gradient(180deg, #a8162a, #5c0915); animation: shake 0.4s; }
.quiz-hint { margin: 0; text-align: center; color: var(--muted); min-height: 1.4em; font-weight: 600; }
.quiz-hint.good { color: var(--lime); font-family: var(--display); font-size: 1.5rem; }
.quiz-hint.bad { color: var(--bad); font-family: var(--display); font-size: 1.3rem; }
.arena.quiz-on .hud-center { opacity: 0.12; }
.arena.quiz-on .hud-coach { opacity: 0.4; }

/* --- Pause --- */
.pause {
  position: absolute; inset: 0; z-index: 8;
  display: grid; place-items: center; padding: 20px;
  background: rgba(5, 3, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.25s ease-out;
}
@keyframes fade-in { from { opacity: 0; } }
.pause-panel { width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; padding-top: 70px; margin-top: 90px; animation: dlg-in 0.45s var(--ease-back); }
.pause-panel > .pause-coach { position: absolute; top: -112px; left: 50%; width: 132px; transform: translateX(-50%); }
.pause-panel > .pause-coach .coach-bubble { left: 96%; bottom: 40%; width: max-content; max-width: min(150px, calc(50vw - 84px)); min-width: 0; transform: scale(0); transform-origin: 0 100%; }
.pause-panel > .pause-coach .coach-bubble.show { transform: scale(1); }
.pause-panel > .pause-coach .coach-bubble::after { left: 14px; }
.pause-title {
  font-size: 3.4rem; line-height: 1; color: var(--gold); margin: 0;
  -webkit-text-stroke: 3px #2a1100; paint-order: stroke fill; text-shadow: 0 5px 0 #2a1100;
}
#pauseNote { margin: 0; }
.pause-actions { display: grid; gap: 12px; width: 100%; margin-top: 6px; }

/* HP mendatar */
@media (orientation: landscape) and (max-height: 520px) {
  .bars { grid-template-columns: 1fr 1fr; }
  .count { font-size: 46vh; }
  .quiz { gap: 8px; padding: 12px; }
  .quiz-opt { min-height: 70px; }
  .hud-coach { width: 80px; }
  .hud-center, .energy { top: 50%; }
  .energy-track { height: 36vh; }
}