/* ==========================================================
   실험체 이상형 월드컵 — 전용 스타일 (.w-* 접두)
   상속: lumi-hud.css(무수정) + shell.css / 테마: data-theme="versus"
   ========================================================== */

/* ================= 1. 설정 화면 ================= */
.w-setup{--shell-w:1080px;}
.w-setup-inner{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(16px,2.4vh,26px);padding:10px 0 4px;}
.w-setup-head{text-align:center;display:grid;gap:8px;justify-items:center;}
.w-title{margin:6px 0 0;font-size:clamp(30px,6.4vw,54px);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;text-shadow:var(--text-shadow);}
.w-title em{font-style:normal;color:var(--accent-bright);
  text-shadow:0 0 22px color-mix(in srgb,var(--accent-bright) 45%,transparent);}
.w-lead{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-muted);word-break:keep-all;}

.w-setup-cols{display:grid;gap:clamp(16px,3vw,34px);}
@media (min-width:820px){.w-setup-cols{grid-template-columns:1fr 1fr;align-items:start;}}
.w-opts{margin-top:0;gap:9px;}

/* 선택지 리본 안의 보조 정보 */
.w-opt{justify-content:space-between;gap:12px;}
.w-opt b{font-weight:inherit;font-size:15.5px;letter-spacing:.01em;}
.w-opt .w-opt-sub{display:block;margin-top:3px;font-size:11px;font-weight:500;letter-spacing:.02em;
  opacity:.78;}
.w-opt .w-opt-n{flex:none;font:800 15px/1 var(--font);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;opacity:.9;}
.w-opt.is-selected .w-opt-sub{opacity:.72;}

/* 요약 스탯 스트립 */
.w-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(53,102,117,.5);border:1px solid rgba(53,102,117,.5);}
.w-stats>div{display:grid;gap:4px;justify-items:center;padding:12px 6px 11px;
  background:rgba(6,12,24,.6);text-align:center;}
.w-stats b{font-size:clamp(18px,4.4vw,24px);font-weight:800;line-height:1;color:var(--accent-bright);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.w-stats span{font-size:10px;line-height:1.45;color:var(--text-dim);letter-spacing:.04em;}

.w-setup-cta{display:grid;gap:10px;max-width:620px;width:100%;margin:0 auto;}
.w-setup-note{text-align:center;}
.w-setup-note b{color:var(--text-option);font-weight:700;padding:0 3px;}
.w-bubble .hud-bubble-body{background:rgba(10,16,32,.72);}

/* ================= 2. 대결 화면 ================= */
.w-match{--shell-w:1300px;}

/* 헤드 — 방송 화면에서 매치 번호가 즉시 읽혀야 한다 */
.w-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding-bottom:10px;}
.w-head-l{display:flex;align-items:center;gap:10px;min-width:0;flex-wrap:wrap;}
.w-head-r{display:flex;justify-content:flex-end;}
.w-round{transform:skewX(-12deg) scale(1.05);transform-origin:left center;}
.w-round>span{font-size:12.5px;letter-spacing:.1em;}
.w-remain{font-size:11.5px;color:var(--text-dim);letter-spacing:.04em;white-space:nowrap;}
.w-head-c{display:flex;align-items:baseline;gap:6px;position:relative;padding:0 4px;}
.w-mno{font-size:clamp(30px,4.6vw,52px);font-weight:800;line-height:.92;letter-spacing:-.03em;
  color:var(--accent-bright);text-shadow:0 0 22px var(--accent-glow);}
.w-mslash{font-size:clamp(17px,2.4vw,26px);font-weight:300;color:var(--text-dim);
  transform:translateY(-2px);}
.w-mtot{font-size:clamp(17px,2.4vw,26px);font-weight:700;color:var(--text-muted);}
.w-mlabel{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translateX(-50%);
  font:800 9.5px/1 var(--font);letter-spacing:.34em;color:var(--text-dim);}
.w-steps{margin-bottom:clamp(8px,1.6vh,16px);}

/* 결승 배너 */
.w-final-banner{display:none;justify-content:center;margin:0 0 clamp(6px,1.4vh,14px);}
.w-final-banner.is-on{display:flex;animation:w-final-in 320ms var(--ease) both;}
.w-final-banner>span{display:inline-block;padding:7px 34px;background:var(--accent);
  color:var(--text-on-accent);font:800 clamp(15px,2.2vw,22px)/1 var(--font);letter-spacing:.4em;
  text-indent:.4em;transform:skewX(-12deg);
  box-shadow:0 0 0 4px rgba(10,16,32,.85),0 0 26px var(--accent-glow);
  animation:w-final-pulse 1.6s var(--ease) infinite alternate;}
@keyframes w-final-in{from{opacity:0;transform:scale(.86)}}
@keyframes w-final-pulse{to{box-shadow:0 0 0 4px rgba(10,16,32,.85),0 0 42px var(--accent-glow);}}

/* 아레나 */
.w-arena{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;
  padding:2px 0;}
.w-arena.is-out{animation:w-out 150ms var(--ease) both;}
.w-arena.is-in{animation:w-in 220ms var(--ease) both;}
@keyframes w-out{to{opacity:0;transform:translateX(-26px) scale(.985)}}
@keyframes w-in{from{opacity:0;transform:translateX(30px) scale(.985)}}

.w-versus{width:100%;max-width:1180px;margin:0 auto;gap:clamp(12px,2.6vw,54px);}

.w-duel{padding:clamp(10px,1.2vw,16px);gap:clamp(8px,1vw,12px);align-content:center;
  background:linear-gradient(180deg,rgba(24,30,48,.42),rgba(10,16,32,.62));
  border-color:rgba(53,102,117,.5);overflow:hidden;-webkit-tap-highlight-color:transparent;}
.w-duel::before{content:"";position:absolute;inset:auto 0 0;height:34%;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent);
  opacity:0;transition:opacity var(--dur) var(--ease);}
.w-duel:hover::before{opacity:1;}
.w-duel:focus-visible{outline:2px solid var(--accent-line);outline-offset:3px;}
.w-duel-key{position:absolute;top:8px;left:10px;z-index:2;font:800 11px/1 var(--font);
  letter-spacing:.1em;color:var(--text-dim);padding:4px 7px;border:1px solid rgba(123,180,203,.28);
  background:rgba(6,12,24,.6);}
.w-duel:hover .w-duel-key{color:var(--accent-bright);border-color:var(--accent);}

.w-duel-por{height:clamp(190px,45vh,600px);}
.w-duel-por>img{transition:opacity 200ms var(--ease),transform 180ms var(--ease),
  filter 180ms var(--ease);}
.w-duel:hover .w-duel-por>img{transform:translateY(-4px) scale(1.02);}

.w-duel-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:22px;}
.w-tag{display:inline-block;padding:4px 9px;font:700 10.5px/1 var(--font);letter-spacing:.06em;
  color:var(--accent-bright);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent-bright) 45%,transparent);}
.w-tag.is-plain{color:var(--text-muted);background:rgba(10,16,32,.5);
  border-color:rgba(123,180,203,.24);}

.w-duel-name{display:grid;gap:3px;padding:clamp(8px,1vw,12px) 10px;}
.w-duel-name b{font-size:clamp(17px,2.2vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.w-duel-name i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  opacity:.62;text-transform:uppercase;}

/* 선택/탈락 상태 */
.w-duel.is-picked{transform:translateY(-4px) scale(1.015);z-index:2;}
.w-duel.is-picked::before{opacity:1;}
.w-duel.is-picked .w-duel-por>img{transform:scale(1.045);
  filter:drop-shadow(0 0 26px var(--accent-glow));}
.w-duel.is-lost{transform:scale(.965);opacity:.42;border-color:rgba(53,102,117,.3);
  box-shadow:none;pointer-events:none;}
.w-duel.is-lost .w-duel-por>img{filter:grayscale(1) brightness(.55);transform:none;}
.w-duel.is-lost .hud-duel-name{background:var(--surface-disabled);color:#7E8B94;}
.w-duel.is-lost .w-tag{opacity:.4;}
.w-versus.is-locked .w-duel{cursor:default;}

.w-vs{font-size:clamp(13px,1.6vw,20px);padding:7px 15px;}
.w-versus.is-final .w-vs{animation:w-vs-beat 900ms var(--ease) infinite alternate;}
@keyframes w-vs-beat{to{transform:translate(-50%,-50%) skewX(-12deg) scale(1.12)}}

.w-match-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:clamp(6px,1.4vh,14px);flex-wrap:wrap;}
.w-match-foot .v-note b{color:var(--text-option);font-weight:700;padding:0 2px;}

/* ================= 3. 우승 화면 ================= */
.w-result{--shell-w:1240px;justify-content:center;}
.w-res-head{display:flex;align-items:center;gap:10px;padding-bottom:6px;}
.w-res-grid{display:grid;gap:clamp(18px,3vw,40px);align-items:start;padding-top:6px;}
@media (min-width:900px){.w-res-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

.w-champ{display:grid;justify-items:center;gap:4px;text-align:center;}
.w-champ-frame{position:relative;width:min(420px,100%);padding:14px;
  background:radial-gradient(62% 58% at 50% 62%,rgba(77,157,246,.16),rgba(6,12,24,.5) 72%);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),
    calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  animation:w-champ-in 420ms var(--ease) both;}
@keyframes w-champ-in{from{opacity:0;transform:scale(.94)}}
.w-champ-glow{position:absolute;inset:-8%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 52%,var(--accent-glow),transparent 68%);
  filter:blur(10px);animation:w-glow 2.6s var(--ease) infinite alternate;}
@keyframes w-glow{from{opacity:.45}to{opacity:.9}}
.w-champ-ring{position:absolute;left:50%;top:52%;width:112%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);border:1px dashed rgba(166,208,255,.3);border-radius:50%;
  animation:w-spin 22s linear infinite;pointer-events:none;}
.w-champ-ring::before{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:9px;height:9px;
  background:var(--accent-bright);box-shadow:0 0 12px var(--accent-glow);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);}
@keyframes w-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.w-champ-por{position:relative;z-index:1;height:clamp(280px,44vh,440px);margin-top:10px;}
.w-champ-por>img{filter:drop-shadow(0 14px 30px rgba(0,0,0,.55));}
.w-corner{position:absolute;width:18px;height:18px;z-index:2;pointer-events:none;}
.w-corner.tl{top:5px;left:5px;border-top:2px solid var(--accent-bright);border-left:2px solid var(--accent-bright);}
.w-corner.tr{top:5px;right:5px;border-top:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright);}
.w-corner.bl{bottom:5px;left:5px;border-bottom:2px solid var(--accent-bright);border-left:2px solid var(--accent-bright);}
.w-corner.br{bottom:5px;right:5px;border-bottom:2px solid var(--accent-bright);border-right:2px solid var(--accent-bright);}
/* 프레임의 clip-path 안쪽에 배치 — 밖으로 빼면 잘린다 */
.w-crown{position:absolute;left:50%;top:14px;z-index:3;transform:translateX(-50%) skewX(-12deg);
  padding:6px 18px;background:var(--accent);color:var(--text-on-accent);
  font:800 11px/1 var(--font);letter-spacing:.28em;text-indent:.28em;
  box-shadow:0 0 0 4px rgba(6,12,24,.9),0 0 20px var(--accent-glow);}
.w-crown>span{display:inline-block;transform:skewX(12deg);}

/* 파티클 — JS가 14개 생성 */
.w-fx{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.w-fx i{position:absolute;left:var(--x);bottom:-8px;width:var(--s);height:var(--s);
  background:var(--accent-bright);box-shadow:0 0 8px var(--accent-glow);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;
  animation:w-rise var(--dur2) linear var(--delay) infinite;}
@keyframes w-rise{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.95}
  100%{opacity:0;transform:translateY(calc(-1*var(--rise))) scale(1.1)}}

.w-champ-label{margin:16px 0 0;font:800 10.5px/1 var(--font);letter-spacing:.42em;text-indent:.42em;
  color:var(--accent-bright);}
.w-champ-name{margin:8px 0 0;font-size:clamp(32px,6vw,52px);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;text-shadow:var(--text-shadow);}
.w-champ-en{margin:5px 0 0;font:700 11px/1 var(--font);letter-spacing:.24em;color:var(--text-dim);
  text-transform:uppercase;}
.w-champ-tags{margin-top:12px;}

.w-res-side{display:grid;gap:8px;align-content:start;}
.w-res-side .v-sect{margin-top:12px;}

/* 시상대 */
.w-podium{display:grid;gap:8px;}
.w-pod{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;
  padding:8px 12px 8px 8px;background:rgba(10,16,32,.55);
  border:1px solid rgba(53,102,117,.42);}
.w-pod-face{width:44px;height:44px;overflow:hidden;background:rgba(6,12,24,.7);
  border:1px solid rgba(123,180,203,.24);}
.w-pod-face img{width:100%;height:100%;object-fit:cover;object-position:50% 4%;
  opacity:0;transition:opacity 200ms var(--ease);}
.w-pod-face img.is-ready{opacity:1;}
.w-pod-info{min-width:0;display:grid;gap:2px;}
.w-pod-info b{font-size:15px;font-weight:700;letter-spacing:-.01em;}
.w-pod-info span{font-size:10.5px;color:var(--text-dim);letter-spacing:.04em;}
.w-pod-rank{font:800 10px/1 var(--font);letter-spacing:.16em;color:var(--text-dim);
  padding:5px 8px;border:1px solid rgba(123,180,203,.28);white-space:nowrap;}
.w-pod.is-2 .w-pod-rank{color:var(--accent-bright);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);}

/* 여정 */
.w-path{list-style:none;margin:0;padding:0;display:grid;gap:5px;}
.w-path li{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:10px;
  padding:7px 10px;background:rgba(6,12,24,.45);border-left:2px solid rgba(53,102,117,.6);
  font-size:12.5px;color:var(--text-muted);}
.w-path li b{font:700 10.5px/1 var(--font);letter-spacing:.1em;color:var(--accent-bright);}
.w-path li span{color:var(--text-option);}
.w-path li.is-final{border-left-color:var(--accent);background:rgba(10,22,42,.6);}

.w-share{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;margin-top:14px;
  padding:11px 14px 11px 10px;border:1px dashed rgba(123,180,203,.3);background:rgba(6,12,24,.4);}
.w-ggang{width:52px;height:52px;object-fit:contain;}
.w-share p{margin:0;font-size:12px;line-height:1.55;color:var(--text-muted);word-break:keep-all;}

.w-res-cta{display:grid;gap:8px;margin-top:16px;}
.w-wide{justify-content:center;height:38px;text-decoration:none;}

/* ================= 반응형 ================= */
@media (max-width:639px){
  /* 대결 카드 2장이 스크롤 없이 한 화면에 들어가도록 수직 예산을 조인다 */
  .w-match .v-screen,.w-match{padding-top:10px;}
  .w-versus{gap:26px;}
  .w-duel{padding:8px;gap:7px;}
  .w-duel-por{height:clamp(140px,23vh,200px);}
  .w-duel-key{display:none;}
  .w-duel-name{padding:7px 8px;}
  .w-duel-name b{font-size:17px;}
  .w-duel-tags{min-height:0;gap:5px;}
  .w-tag{padding:3px 7px;font-size:10px;}
  .w-head{grid-template-columns:1fr auto;gap:8px;padding-bottom:6px;}
  .w-head-r{display:none;}
  .w-head-c{justify-self:end;}
  .w-steps{margin-bottom:8px;}
  #chip-state{display:none;}
  .w-match-foot{justify-content:center;text-align:center;padding-top:8px;}
  .w-match-foot .v-note{font-size:11px;}
  .w-keyhint{display:none;}
  .w-champ-frame{width:min(320px,100%);}
  .w-champ-por{height:clamp(230px,36vh,300px);}
  .w-setup{--option-h:50px;--fs-option:15px;}
  .w-setup-cols{gap:14px;}
  .w-setup-inner{gap:14px;}
}
@media (min-width:1600px){
  .w-duel-por{height:min(56vh,640px);}
  .w-versus{max-width:1180px;}
  .w-champ-frame{width:460px;}
}
@media (prefers-reduced-motion:reduce){
  .w-arena.is-out,.w-arena.is-in,.w-final-banner.is-on,.w-champ-frame{animation:none;}
  .w-champ-ring,.w-champ-glow,.w-fx i,.w-versus.is-final .w-vs,
  .w-final-banner>span{animation:none;}
}

/* ================= 8/17 확장 — 주제 · 부전승 · 완주 기록 ================= */
/* 주제 입력 (설정) */
.w-topic-sect{margin-bottom:clamp(14px,2.4vh,22px);}
.w-topic-input{width:100%;padding:13px 16px;font:600 15px/1.3 var(--font);color:var(--text);
  background:rgba(10,16,32,.62);border:1px solid rgba(123,180,203,.32);border-radius:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  outline:none;transition:border-color 80ms linear,background 80ms linear;}
.w-topic-input::placeholder{color:var(--text-dim);font-weight:500;}
.w-topic-input:focus{border-color:var(--accent-bright);background:rgba(10,16,32,.85);}

/* 주제 배너 (대결 상단) */
.w-topic-bar{text-align:center;margin-bottom:clamp(6px,1.2vh,12px);
  font:800 clamp(13px,1.8vw,17px)/1.3 var(--font);letter-spacing:.12em;
  color:var(--accent-bright);text-shadow:0 0 18px var(--accent-glow);}

/* 부전승 카드 — 루미가 자리를 지킨다 */
.w-duel.is-bye{opacity:.92;}
.w-duel.is-bye .w-duel-por img{object-fit:contain;padding:10%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));}
.w-duel.is-bye .w-duel-name b{color:var(--text-muted);}
.w-bye-line{text-align:center;margin:0 0 clamp(6px,1.2vh,10px);
  font:600 12.5px/1.5 var(--font);color:var(--text-muted);letter-spacing:.02em;}
.w-bye-line::before{content:'◈ ';color:var(--accent-bright);}

/* 완주 기록 (설정 하단) */
.w-hist{margin-top:clamp(14px,2.4vh,22px);}
.w-hist-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.w-hist-clear{font:700 10.5px/1 var(--font);letter-spacing:.08em;color:var(--text-dim);
  background:none;border:1px solid rgba(123,180,203,.28);padding:6px 10px;cursor:pointer;
  transition:color 80ms linear,border-color 80ms linear;}
.w-hist-clear:hover{color:var(--text);border-color:var(--accent-bright);}
.w-hist-list{list-style:none;margin:8px 0 0;padding:0;max-height:180px;overflow-y:auto;
  border:1px solid rgba(123,180,203,.18);background:rgba(10,16,32,.42);}
.w-hist-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 14px;
  font:500 12.5px/1.4 var(--font);color:var(--text-muted);
  border-bottom:1px solid rgba(123,180,203,.12);}
.w-hist-row:last-child{border-bottom:none;}
.w-hist-row b{color:var(--text);font-weight:700;}
.w-hist-row em{font-style:normal;color:var(--accent-bright);font-weight:700;}
.w-hist-row .v-mono{font-size:11px;color:var(--text-dim);}