/* ==========================================================
   LUMIA VERSUS — 공통 셸 (.v-* 접두)
   css/lumi-hud.css 를 무수정 상속하고 그 위에만 얹는다.
   허브·월드컵 = data-theme="versus" / 티어보드 = data-theme="reco"
   ========================================================== */

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{background:var(--bg-deep);color:var(--text);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}

/* overflow:clip — .hud-scene 의 overflow:hidden 은 스크롤 컨테이너를 만들어
   장식 레이어(오로라 등)의 넘침만큼 포커스 스크롤이 발생한다. 클립으로 교체해 차단. */
#stage{position:relative;min-height:100%;min-height:100dvh;display:flex;flex-direction:column;
  overflow:clip;}
#stage>.hud-scene-body{flex:1;display:flex;flex-direction:column;height:auto;min-height:0;}

/* ---------- 배경 레이어 ---------- */
.v-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  opacity:.5;mix-blend-mode:multiply;}
.v-aurora{position:absolute;inset:-22% 0 auto 0;height:74%;z-index:0;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);
  filter:blur(6px);animation:v-aurora 9s var(--ease) infinite alternate;}
@keyframes v-aurora{from{opacity:.5;transform:translateY(-4%) scale(1)}
  to{opacity:.92;transform:translateY(2%) scale(1.06)}}
/* 하단 지평선 광원 — 데스크톱에서 무대감 */
.v-floor{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 118%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);}

/* ---------- 상단 바 ---------- */
.v-top{position:relative;z-index:6;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px clamp(14px,2.2vw,30px) 10px;border-bottom:1px solid rgba(53,102,117,.35);
  background:linear-gradient(180deg,rgba(10,16,32,.78),rgba(10,16,32,0));}
.v-brand{display:flex;align-items:baseline;gap:9px;min-width:0;text-decoration:none;}
.v-brand b{font-size:12.5px;font-weight:800;letter-spacing:.16em;color:var(--text);white-space:nowrap;}
.v-brand i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;
  color:var(--accent-bright);white-space:nowrap;}
.v-brand:hover b{color:var(--accent-bright);}
.v-spacer{flex:1;}
.v-chip{display:inline-block;padding:4px 9px;font:700 9.5px/1 var(--font);letter-spacing:.12em;
  color:var(--text-dim);border:1px solid rgba(123,180,203,.28);white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.v-chip.is-live{color:var(--accent-bright);border-color:color-mix(in srgb,var(--accent) 55%,transparent);}
/* 작은 아웃라인 버튼 */
.v-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;flex:none;
  background:rgba(10,16,32,.5);border:1px solid rgba(123,180,203,.3);color:var(--text-muted);
  font:700 10.5px/1 var(--font);letter-spacing:.1em;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),
    background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.v-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent-bright);
  background:rgba(10,16,32,.75);}
.v-btn:disabled{opacity:.32;cursor:default;}
.v-btn:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px;}
.v-btn.is-on{border-color:var(--accent);color:var(--accent-bright);box-shadow:0 0 10px var(--accent-glow);}

/* ---------- 본문 ---------- */
.v-main{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;align-items:center;
  width:100%;padding:0 clamp(14px,2.2vw,30px);min-height:0;}
.v-screen{display:none;width:100%;max-width:var(--shell-w,1400px);flex:1;flex-direction:column;
  padding:16px 0 22px;min-height:0;}
.v-screen.is-active{display:flex;animation:v-in 240ms var(--ease) both;}
@keyframes v-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 상단 스캔 와이프 */
.v-wipe{position:fixed;left:0;right:0;top:0;height:2px;z-index:9;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent-line),transparent);
  opacity:0;box-shadow:0 0 16px var(--accent-glow);}
.v-wipe.is-run{animation:v-wipe 320ms var(--ease);}
@keyframes v-wipe{0%{opacity:0;transform:translateY(0)}12%{opacity:1}
  100%{opacity:0;transform:translateY(100vh)}}

/* ---------- 공통 조각 ---------- */
.v-rule{height:1px;background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 55%,transparent),transparent);margin:14px 0;}
.v-note{font-size:11.5px;line-height:1.6;color:var(--text-dim);letter-spacing:.02em;}
.v-mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
.v-sect{display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font:700 11px/1 var(--font);letter-spacing:.16em;color:var(--accent-bright);}
.v-sect::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 45%,transparent),transparent);}
.v-sect small{font-weight:600;letter-spacing:.06em;color:var(--text-dim);}
/* 모서리 브래킷 유틸 */
.v-brackets{position:relative;}
.v-brackets::before,.v-brackets::after{content:"";position:absolute;width:13px;height:13px;
  pointer-events:none;}
.v-brackets::before{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);}
.v-brackets::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);}

/* ---------- 푸터 ---------- */
.v-foot{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;padding:12px 16px 16px;border-top:1px solid rgba(53,102,117,.28);
  font-size:11px;color:var(--text-dim);letter-spacing:.03em;text-align:center;}
.v-foot a{color:var(--text-option);text-decoration:none;border-bottom:1px solid rgba(123,180,203,.3);
  padding-bottom:1px;}
.v-foot a:hover{color:var(--accent-bright);border-color:var(--accent);}

/* ---------- 토스트 ---------- */
.v-toast{position:fixed;left:50%;bottom:26px;z-index:60;transform:translate(-50%,14px);
  display:flex;align-items:center;gap:9px;padding:11px 18px;background:rgba(6,12,24,.94);
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  color:var(--text);font:600 12.5px/1 var(--font);letter-spacing:.02em;
  box-shadow:0 0 24px rgba(0,0,0,.6),0 0 14px var(--accent-glow);
  opacity:0;pointer-events:none;transition:opacity 140ms var(--ease),transform 140ms var(--ease);}
.v-toast::before{content:"";width:8px;height:8px;flex:none;background:var(--accent-bright);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
.v-toast.is-on{opacity:1;transform:translate(-50%,0);}

/* ---------- 실험체 일러 슬롯 공통 ---------- */
.v-por{position:relative;display:block;width:100%;overflow:hidden;
  background:radial-gradient(58% 52% at 50% 62%,rgba(123,180,203,.16),transparent 72%);}
.v-por>img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;
  opacity:0;transition:opacity 200ms var(--ease);}
.v-por>img.is-ready{opacity:1;}

/* 모바일 — 상단 바를 최대한 얇게 (대결 카드 2장이 한 화면에 들어가야 한다) */
@media (max-width:639px){
  .v-top{padding:8px 12px;gap:7px;}
  .v-brand b{font-size:11.5px;letter-spacing:.13em;}
  .v-brand i{font-size:9px;}
  .v-btn{height:26px;padding:0 9px;font-size:10px;letter-spacing:.08em;}
  .v-chip{padding:4px 7px;font-size:9px;}
  .v-foot{gap:10px;padding:10px 14px 13px;font-size:10.5px;}
}

@media (prefers-reduced-motion:reduce){
  .v-aurora,.v-wipe.is-run{animation:none;}
  .v-screen.is-active{animation:none;}
}