/* F-014 리그 여정 공용: 방송 프레임, 구단 엠블럼 패, 우승 무대. 첫 진입(/)과 시즌 화면이 같이 쓴다.
   규칙 docs/04-ui-ux.md#league-journey-finish. 팀 색은 막대·테·칩에만 쓴다. */

/* 방송 프레임 바탕: 인디고 격자 가상세계 경기장이 옅게 비친다 */
.onair{position:relative;isolation:isolate;overflow:hidden;background:var(--color-stage);color:var(--color-stage-ink);border-radius:var(--r-frame);box-shadow:var(--shadow-frame)}
.onair:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 90% at 78% 40%,color-mix(in srgb,var(--color-pitch) 85%,transparent),transparent 70%),
    repeating-linear-gradient(90deg,var(--color-pitch-grid) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,var(--color-pitch-grid) 0 1px,transparent 1px 44px)}
.onair:after{content:'';position:absolute;z-index:-1;pointer-events:none;width:420px;height:420px;right:12%;top:50%;translate:0 -50%;border:1.5px solid #cfe0ff26;border-radius:50%;box-shadow:0 0 40px #6f9bff1a inset}

/* 여정 CTA (첫 진입·경기 종료·시즌 화면 공용) */
.journey-primary,.journey-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-2);text-decoration:none;font:700 var(--fs-14)/var(--lh-ui) var(--font-ui);text-align:center;cursor:pointer}
.journey-primary{background:var(--color-accent);color:var(--color-accent-ink);border:1px solid var(--color-accent)}
.journey-primary:hover:not(:disabled){background:#1631db;border-color:#1631db}
.journey-secondary:hover:not(:disabled){background:var(--color-surface-2);border-color:var(--color-ink)}
.journey-secondary{background:var(--color-surface);color:var(--color-ink);border:1px solid var(--color-line-strong)}

/* 어두운 프레임 위 버튼 */
.onair .journey-primary,.champ-hero .journey-primary{box-shadow:0 10px 30px #1f3dff59}
.onair .journey-secondary,.champ-hero .journey-secondary{background:#0b132699;color:var(--color-stage-ink);border-color:#ffffff38}
/* 기본 button:hover(밝은 바탕)가 어두운 프레임의 흰 글자를 지우지 않게 바탕까지 정한다 */
.onair .journey-secondary:hover:not(:disabled),.champ-hero .journey-secondary:hover:not(:disabled),.result-overlay .journey-secondary:hover:not(:disabled){background:#14213dcc;border-color:#ffffff80;color:var(--color-stage-ink)}
.onair :focus-visible,.champ-hero :focus-visible{outline:2px solid var(--color-accent-dark);outline-offset:3px}

/* 기본 엠블럼은 배경이 투명한 마크다. 어두운 프레임에서는 크림색 테두리를 두른 패치 컷(/emblems/patch/)을 쓴다.
   직접 만든 구단은 구단 색 바탕의 첫 글자 패. */
.crest-tile{display:grid;place-items:center;flex:none;aspect-ratio:1;border-radius:22%;background:var(--club,var(--color-portrait));color:var(--team-ink);font:700 var(--fs-23)/1 var(--font-emphasis);overflow:hidden}
img.crest-tile{object-fit:contain;background:none;border-radius:0;overflow:visible}
.onair span.crest-tile,.fulltime-board span.crest-tile{box-shadow:0 0 0 2px #ffffff26,0 10px 24px #00000073}
.onair img.crest-tile,.fulltime-board img.crest-tile{filter:drop-shadow(0 8px 14px #00000080)}

/* ── 우승 무대 ── */
.champ-hero{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;min-height:600px;padding:64px var(--sp-7) 48px;border-radius:var(--r-frame);box-shadow:var(--shadow-frame);color:#fff;text-align:center;
  background:radial-gradient(60% 55% at 50% 40%,color-mix(in srgb,var(--club,var(--color-accent)) 42%,transparent),transparent 72%),linear-gradient(#060b18,var(--color-stage) 50%,#121f45)}
.ch-beams i{position:absolute;top:-8%;width:260px;height:120%;z-index:-1;transform-origin:50% 0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(color-mix(in srgb,var(--club,var(--color-accent)) 70%,#fff),transparent 70%);opacity:.18;filter:blur(4px)}
.ch-beams i:nth-child(1){left:6%;rotate:-26deg}
.ch-beams i:nth-child(2){left:26%;rotate:-10deg;opacity:.12}
.ch-beams i:nth-child(3){right:26%;rotate:10deg;opacity:.12}
.ch-beams i:nth-child(4){right:6%;rotate:26deg}
.ch-word{position:absolute;left:50%;top:34%;translate:-50% -50%;z-index:-1;font:400 10.5cqw/1 var(--font-display);letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--club,var(--color-accent)) 45%,#ffffff22);opacity:.55}
.ch-floor{position:absolute;left:-30%;right:-30%;bottom:-6%;height:46%;z-index:-1;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,#8fb3ff2e 0 1px,transparent 1px 56px),repeating-linear-gradient(0deg,#8fb3ff2e 0 1px,transparent 1px 56px);
  -webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%)}
.ch-confetti{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ch-confetti i{position:absolute;left:var(--x);top:var(--y);width:7px;height:13px;border-radius:1px;background:var(--c);rotate:var(--r);opacity:.85}
.ch-confetti i:nth-child(3n){width:9px;height:9px;border-radius:50%}
.ch-confetti i:nth-child(5n){width:4px;height:16px}
.ch-body{display:grid;justify-items:center;gap:var(--sp-3);width:min(820px,100%)}
.ch-kicker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-12);color:var(--color-stage-muted)}
.ch-kicker b{display:flex;align-items:center;gap:var(--sp-3);font:400 var(--fs-16)/1 var(--font-display);letter-spacing:.28em;color:var(--color-cast);text-shadow:0 0 18px #ffd66b80}
.ch-kicker b:before,.ch-kicker b:after{content:'';width:36px;height:1.5px;background:linear-gradient(90deg,transparent,var(--color-cast))}
.ch-kicker b:after{rotate:180deg}
.ch-crest{position:relative;display:grid;place-items:center;width:200px;height:200px;margin:44px 0 6px}
.ch-crest .crest-tile{position:relative;width:168px;height:168px;border-radius:26%;font-size:72px;box-shadow:0 0 0 4px var(--club,var(--color-accent)),0 0 0 11px #ffffff14,0 0 90px color-mix(in srgb,var(--club,var(--color-accent)) 75%,transparent),0 24px 40px #0009}
.ch-crest img.crest-tile{width:188px;height:188px;box-shadow:none;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--club,var(--color-accent)) 80%,transparent)) drop-shadow(0 22px 26px #000a)}
.ch-halo{position:absolute;inset:-34px;border-radius:50%;filter:blur(1px);
  background:conic-gradient(from 0deg,transparent 0 8%,color-mix(in srgb,var(--club,var(--color-accent)) 60%,transparent) 12%,transparent 18% 33%,#ffd66b55 38%,transparent 44% 58%,color-mix(in srgb,var(--club,var(--color-accent)) 60%,transparent) 63%,transparent 69% 83%,#ffffff40 88%,transparent 94%);
  -webkit-mask:radial-gradient(closest-side,transparent 52%,#000 54%,#000 74%,transparent 100%);mask:radial-gradient(closest-side,transparent 52%,#000 54%,#000 74%,transparent 100%)}
.ch-crown{position:absolute;top:-46px;left:50%;translate:-50% 0;z-index:1;width:76px;fill:var(--color-cast);filter:drop-shadow(0 0 14px #ffd66bb3) drop-shadow(0 4px 0 #8a5a00)}
.champ-hero h2{margin:0;font:700 clamp(40px,6vw,76px)/1.12 var(--font-emphasis);letter-spacing:var(--ls-tight);text-wrap:balance;overflow-wrap:anywhere;color:#fff;text-shadow:0 0 44px color-mix(in srgb,var(--club,var(--color-accent)) 70%,transparent),0 5px 0 #0007}
.ch-sub{margin:0;font-size:var(--fs-16);color:var(--color-stage-ink);opacity:.85}
.ch-stats{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);width:min(660px,100%)}
.ch-stats li{display:grid;align-content:start;gap:4px;padding:var(--sp-4) var(--sp-3);background:#0b1326b3;border:1px solid var(--color-stage-line);border-top:3px solid var(--club,var(--color-accent));border-radius:var(--r-3);backdrop-filter:blur(4px)}
.ch-stats small{font-size:var(--fs-12);color:var(--color-stage-muted)}
.ch-stats b{font:400 var(--fs-28)/1.1 var(--font-display);color:#fff;font-variant-numeric:tabular-nums}
.ch-stats span{font-size:var(--fs-12);color:var(--color-stage-ink);overflow-wrap:anywhere}
.ch-badge{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--r-pill);background:var(--color-cast);color:var(--team-ink);font:700 var(--fs-10)/1.5 var(--font-ui);font-style:normal;vertical-align:1px;white-space:nowrap}
.ch-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-4)}
.ch-actions>*{min-height:52px;padding-inline:var(--sp-7);font-size:var(--fs-16)}
.ch-actions .journey-primary{box-shadow:0 10px 30px #1f3dff66}
@media(max-width:600px){
  .champ-hero{min-height:0;padding:44px var(--sp-4) var(--sp-6)}
  .ch-crest{width:140px;height:140px;margin-top:36px}
  .ch-crest .crest-tile{width:116px;height:116px;font-size:52px}
  .ch-crest img.crest-tile{width:132px;height:132px}
  .ch-halo{inset:-22px}
  .ch-crown{width:56px;top:-34px}
  .champ-hero h2{font-size:36px}
  .ch-sub{font-size:var(--fs-14)}
  .ch-kicker b{font-size:var(--fs-13);letter-spacing:.2em}
  .ch-kicker b:before,.ch-kicker b:after{width:20px}
  .ch-kicker span{display:none}
  .ch-stats{gap:var(--sp-2)}
  .ch-stats li{padding:var(--sp-3) var(--sp-2)}
  .ch-stats b{font-size:var(--fs-19)}
  .ch-stats span{font-size:var(--fs-11)}
  .ch-actions{width:100%}
  .ch-actions>*{flex:1 1 100%}
  .ch-word{top:30%}
  .ch-beams i{width:150px}
}
@media(prefers-reduced-motion:no-preference){
  .ch-beams i{animation:ch-sweep 7s ease-in-out infinite alternate}
  .ch-beams i:nth-child(2n){animation-duration:9s;animation-direction:alternate-reverse}
  .ch-halo{animation:ch-spin 14s linear infinite}
  .ch-crest .crest-tile{animation:ch-drop .8s cubic-bezier(.2,1.4,.4,1) .2s both}
  .ch-crown{animation:ch-crown .6s var(--ease-out) .9s both}
  .champ-hero h2{animation:ch-rise .6s var(--ease-out) 1.05s both}
  .ch-sub,.ch-kicker{animation:ch-rise .6s var(--ease-out) 1.2s both}
  .ch-stats li{animation:ch-rise .55s var(--ease-out) both}
  .ch-stats li:nth-child(1){animation-delay:1.35s}.ch-stats li:nth-child(2){animation-delay:1.45s}.ch-stats li:nth-child(3){animation-delay:1.55s}
  .ch-actions{animation:ch-rise .55s var(--ease-out) 1.7s both}
  .ch-confetti i{top:-24px;animation:ch-fall var(--d) linear calc(1s + var(--w)) 2 both}
}
@keyframes ch-sweep{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes ch-spin{to{rotate:360deg}}
@keyframes ch-drop{from{opacity:0;scale:1.6;filter:blur(6px)}to{opacity:1;scale:1}}
@keyframes ch-crown{from{opacity:0;translate:-50% -24px}to{opacity:1;translate:-50% 0}}
@keyframes ch-rise{from{opacity:0;translate:0 16px}}
@keyframes ch-fall{0%{translate:0 0;rotate:var(--r)}100%{translate:30px 680px;rotate:calc(var(--r) + 540deg)}}