/* OUT V9 — rhythm halo, media loading gate, result guard, fullscreen toggle.
   Keep the puzzle readable: rhythm guidance is centered and never identifies
   which piece can move. All overlays are pointer-transparent except controls. */

/* The old CALL / BEAT arrival indicator is replaced by predictive timing. */
#beatMeter{display:none!important}

.rhythm-halo-v9{
  --halo-scale:.22;
  --halo-alpha:.12;
  --halo-energy:0;
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.rhythm-halo-v9::before{
  content:"";
  position:absolute;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(218,241,255,.18);
  box-shadow:
    0 0 0 1px rgba(105,221,255,.025) inset,
    0 0 24px rgba(105,221,255,calc(.025 + var(--halo-energy)*.055));
  opacity:calc(.62 + var(--halo-energy)*.32);
}
.rhythm-halo-v9 .halo-incoming,
.rhythm-halo-v9 .halo-afterglow{
  position:absolute;
  width:58%;
  aspect-ratio:1;
  border-radius:50%;
}
.rhythm-halo-v9 .halo-incoming{
  border:1.5px solid rgba(233,249,255,.78);
  transform:scale(var(--halo-scale));
  opacity:var(--halo-alpha);
  box-shadow:
    0 0 10px rgba(105,221,255,.16),
    0 0 22px rgba(105,221,255,.08) inset;
  will-change:transform,opacity;
}
.rhythm-halo-v9 .halo-core{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(235,250,255,.45);
  box-shadow:0 0 12px rgba(105,221,255,.22);
  opacity:calc(.26 + var(--halo-energy)*.44);
}
.rhythm-halo-v9 .halo-afterglow{
  border:1px solid rgba(255,244,190,.72);
  opacity:0;
  transform:scale(1);
}
.rhythm-halo-v9.beat-hit .halo-afterglow{animation:out-halo-afterglow .42s ease-out}
.rhythm-halo-v9.beat-hit::before{animation:out-halo-line-hit .24s ease-out}
@keyframes out-halo-afterglow{
  0%{opacity:.65;transform:scale(.995)}
  100%{opacity:0;transform:scale(1.15)}
}
@keyframes out-halo-line-hit{
  0%,100%{border-color:rgba(218,241,255,.18)}
  35%{border-color:rgba(255,245,190,.78);box-shadow:0 0 30px rgba(255,212,111,.17)}
}

/* Timing judgement is deliberately much more legible than V1–V8. */
.judgement{
  top:8%;
  width:min(92%,680px);
  font-size:clamp(26px,7vw,58px);
  line-height:.88;
  letter-spacing:.055em;
  text-transform:uppercase;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.72));
}
.judgement small{
  margin-top:8px;
  font-size:clamp(10px,2.4vw,15px);
  letter-spacing:.16em;
}
.judgement .judge-meta-v9{
  display:block;
  margin-top:7px;
  font-size:clamp(8px,1.9vw,12px);
  line-height:1.2;
  letter-spacing:.13em;
  color:rgba(238,246,255,.76);
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.judgement.show{animation:out-judge-v9 .78s cubic-bezier(.16,.85,.2,1)}
.judgement.perfect{
  color:#fff5bd;
  text-shadow:0 3px 20px rgba(0,0,0,.9),0 0 18px rgba(255,221,119,.58),0 0 44px rgba(105,221,255,.22);
}
.judgement.great{color:#a9efff;text-shadow:0 3px 18px rgba(0,0,0,.9),0 0 28px rgba(105,221,255,.38)}
.judgement.good{color:#adf5d2;text-shadow:0 3px 18px rgba(0,0,0,.9),0 0 24px rgba(114,239,176,.28)}
.judgement.off{color:#c3ccd8;opacity:.92}
.judgement.penalty{color:#ff8c99}
@keyframes out-judge-v9{
  0%{opacity:0;transform:translate(-50%,12px) scale(.72)}
  14%{opacity:1;transform:translate(-50%,0) scale(1.12)}
  30%{transform:translate(-50%,0) scale(.98)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-22px) scale(1.03)}
}

.rhythm-result-burst-v9{
  position:absolute;
  left:50%;
  top:50%;
  width:58%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  z-index:19;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
}
.rhythm-result-burst-v9::before,
.rhythm-result-burst-v9::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
}
.rhythm-result-burst-v9.perfect{animation:out-perfect-burst .72s ease-out}
.rhythm-result-burst-v9.perfect::before{
  border:2px solid rgba(255,244,181,.82);
  box-shadow:0 0 25px rgba(255,215,105,.22),0 0 60px rgba(105,221,255,.10);
}
.rhythm-result-burst-v9.perfect::after{
  inset:-11%;
  background:repeating-conic-gradient(from 0deg,rgba(255,239,173,.23) 0 1deg,transparent 1deg 14deg);
  -webkit-mask:radial-gradient(circle,transparent 0 45%,#000 47% 49%,transparent 51%);
  mask:radial-gradient(circle,transparent 0 45%,#000 47% 49%,transparent 51%);
}
.rhythm-result-burst-v9.great{animation:out-great-burst .54s ease-out;border:1px solid rgba(105,221,255,.62)}
@keyframes out-perfect-burst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(-4deg)}
  16%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22) rotate(5deg)}
}
@keyframes out-great-burst{
  0%{opacity:.7;transform:translate(-50%,-50%) scale(.88)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}

/* Media preparation gate. It blocks accidental early starts but remains light. */
.out-load-gate-v9{
  position:absolute;
  inset:8px;
  z-index:90;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(3,8,16,.90);
  backdrop-filter:blur(12px);
  opacity:1;
  transition:opacity .38s ease,visibility .38s ease;
}
.out-load-gate-v9[hidden]{display:none}
.out-load-gate-v9.is-leaving{opacity:0;visibility:hidden}
.out-load-card-v9{width:min(78%,370px);text-align:center}
.out-load-orbit-v9{
  width:76px;
  aspect-ratio:1;
  margin:0 auto 17px;
  position:relative;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.out-load-orbit-v9::before,
.out-load-orbit-v9::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:9px;
  border:1px solid rgba(105,221,255,.3);
  animation:out-load-breathe 1.35s ease-in-out infinite;
}
.out-load-orbit-v9::after{
  inset:25px;
  border-color:rgba(255,226,139,.5);
  animation-delay:-.42s;
}
@keyframes out-load-breathe{0%,100%{transform:scale(.78);opacity:.28}50%{transform:scale(1.08);opacity:1}}
.out-load-kicker-v9{font-size:8px;letter-spacing:.22em;font-weight:900;color:#91a7c5}
.out-load-title-v9{margin:7px 0 5px;font-size:clamp(20px,4vw,30px);font-weight:950;letter-spacing:-.025em}
.out-load-detail-v9{min-height:1.5em;margin:0;color:#aebdd0;font-size:10px;line-height:1.5}
.out-load-track-v9{height:4px;margin-top:15px;border-radius:99px;background:rgba(255,255,255,.075);overflow:hidden}
.out-load-track-v9 i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#69ddff,#fff0ae);box-shadow:0 0 12px rgba(105,221,255,.28);transition:width .22s ease}

/* Result screen must settle before replay buttons accept input. */
body.out-result-entering-v9 .overlay{
  animation:out-result-reveal-v9 .9s cubic-bezier(.16,.82,.2,1) both;
}
body.out-result-entering-v9 .overlay-actions,
body.out-result-entering-v9 .out-change-track{
  opacity:.28!important;
  pointer-events:none!important;
  transform:translateY(7px);
  transition:opacity .28s ease,transform .28s ease;
}
@keyframes out-result-reveal-v9{
  0%{opacity:0;transform:scale(1.035);filter:blur(4px)}
  35%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:scale(1)}
}

/* Fourth core control: fullscreen on/off. */
.controls.out-controls-v9{grid-template-columns:repeat(4,1fr)}
.fullscreen-toggle-v9{white-space:nowrap}
.fullscreen-toggle-v9 .fs-icon{font-size:14px;vertical-align:-1px;margin-right:4px}

html:fullscreen .controls.out-controls-v9,
html:-webkit-full-screen .controls.out-controls-v9{grid-template-columns:repeat(4,1fr)}

@media(max-width:720px){
  .rhythm-halo-v9::before,
  .rhythm-halo-v9 .halo-incoming,
  .rhythm-halo-v9 .halo-afterglow{width:62%}
  .controls.out-controls-v9{grid-template-columns:repeat(2,1fr)}
  .controls.out-controls-v9 #newRun{grid-column:auto}
  html:fullscreen .controls.out-controls-v9,
  html:-webkit-full-screen .controls.out-controls-v9{grid-template-columns:repeat(4,1fr)}
  html:fullscreen .controls.out-controls-v9 #newRun,
  html:-webkit-full-screen .controls.out-controls-v9 #newRun{grid-column:auto}
}

@media(max-width:470px){
  .out-load-gate-v9{inset:5px}
  .judgement{top:7%;font-size:clamp(24px,10vw,46px)}
}

@media(prefers-reduced-motion:reduce){
  .rhythm-halo-v9 .halo-incoming{transition:none}
  .rhythm-halo-v9.beat-hit .halo-afterglow,
  .rhythm-halo-v9.beat-hit::before,
  .rhythm-result-burst-v9,
  body.out-result-entering-v9 .overlay,
  .out-load-orbit-v9::before,
  .out-load-orbit-v9::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}