/* VictoryData home (SPEC §23) — the one-click AI scan. Stadium night: violet-black, violet / ultraviolet with magenta
   glow, lavender text; GOLD only for the recommendation and calls to action. The results block is forked from
   /assets/ai/ai.css (same markup, drawn by /assets/ai/cards.js) and recoloured — kimce /ai and PULSAR keep ai.css. */
:root {
  --bg0:#07040F;--bg1:#0E0720;--bg2:#1A0D36;
  --ink:#F3EEFF;--ink2:#BDB0DA;--ink3:#8A7FAE;
  --teal:#B48CFF;--blue:#E246FF;--uv:#7A4BFF;--lav:#DCCBFF;--gold:#F5C451;--gold1:#FFE9A8;--coral:#FF8A76;
  --line:rgba(176,150,255,.15);--glass:rgba(18,10,38,.72);
  --gold-g:linear-gradient(100deg,#FFF3C9 0%,#F5C451 38%,#E3A43C 64%,#FFE7A3 100%);
  --data-g:linear-gradient(90deg,#B48CFF,#E246FF);
  --f:'Sora','PingFang TC','Noto Sans TC','Microsoft JhengHei',system-ui,sans-serif;
  --hud:'Chakra Petch','Sora','PingFang TC','Noto Sans TC','Microsoft JhengHei',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hdr:60px;--tab:calc(60px + env(safe-area-inset-bottom));
}
*,*::before,*::after {box-sizing:border-box}
[hidden] {display:none !important}
html {-webkit-text-size-adjust:100%;background:var(--bg0)}
body {
  margin:0;min-height:100vh;color:var(--ink);background:var(--bg0);overflow-x:hidden;
  font:400 15px/1.6 var(--f);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
body::before {
  content:'';position:fixed;inset:0;z-index:-2;
  background:radial-gradient(70% 46% at 50% 60%,rgba(122,75,255,.2),transparent 70%),radial-gradient(46% 38% at 4% -4%,rgba(122,75,255,.3),transparent 70%),
    radial-gradient(46% 38% at 96% -4%,rgba(226,70,255,.2),transparent 70%),linear-gradient(180deg,#150A2E 0%,#0B0619 48%,#07040F 100%);
}
body[data-view="run"] {overflow:hidden}
a {color:inherit}
.mono {font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr-only {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs {position:absolute;width:0;height:0;overflow:hidden}
.noscript {position:relative;z-index:50;padding:16px;text-align:center;color:var(--ink)}
:focus-visible {outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.ic {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- atmosphere ---------- */
.stage {position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette {position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 48%,rgba(4,2,10,.72) 100%)}
.grain {
  position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover:hover) {.grain {animation:grain 1.2s steps(4) infinite}}
.flash {position:fixed;inset:0;z-index:45;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,rgba(255,246,222,.92),rgba(226,70,255,.34) 26%,transparent 68%)}
.flash.go {animation:flash .8s ease-out}

/* ---------- header: the same floating bar as the inner pages ---------- */
.top {position:fixed;top:0;left:0;right:0;z-index:40;padding:calc(env(safe-area-inset-top) + 8px) 10px 0;pointer-events:none}
.bar {
  pointer-events:auto;display:flex;align-items:center;gap:8px;max-width:1180px;height:48px;margin:0 auto;padding:0 6px 0 12px;border-radius:16px;
  background:rgba(11,6,22,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(176,150,255,.14),0 24px 50px -30px rgba(0,0,0,.95),0 18px 40px -34px rgba(226,70,255,.5);
}
body[data-view="results"] .bar {background:rgba(9,5,19,.88)}
.brand {display:flex;align-items:center;gap:9px;min-width:0;text-decoration:none}
.brand-mark {display:flex;flex:none;filter:drop-shadow(0 0 8px rgba(180,140,255,.5)) drop-shadow(0 0 18px rgba(226,70,255,.25))}
.brand-mark img {border-radius:8px;object-fit:contain}
.brand-name {
  font:700 16px/1.2 var(--f);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;
  background:linear-gradient(100deg,#FBF7FF 0%,#E9DEFF 50%,#C49DFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav {display:none;align-items:center;gap:2px;margin:0 auto}
.nav a {position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:var(--ink2);text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover,.nav a[aria-current="page"] {color:var(--ink)}
.nav a[aria-current="page"]::after {content:'';position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:2px;background:var(--data-g);box-shadow:0 0 10px rgba(226,70,255,.6)}
.acc {display:flex;align-items:center;gap:6px;margin-left:auto}
.btn-s {
  display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border-radius:999px;font:600 13px var(--f);text-decoration:none;white-space:nowrap;
  color:var(--ink);background:rgba(22,12,42,.72);border:1px solid rgba(176,150,255,.24);transition:border-color .2s,box-shadow .2s;
}
.btn-s:hover {border-color:rgba(180,140,255,.6)}
.btn-s.gold {color:#1A1203;border-color:transparent;background:var(--gold-g);box-shadow:0 6px 20px -8px rgba(245,196,81,.75)}

/* mobile tab bar: the same four destinations as the inner pages */
.tabbar {
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);padding:0 4px env(safe-area-inset-bottom);
  background:rgba(9,5,19,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(176,150,255,.14);
}
.tabbar a {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;color:var(--ink3);text-decoration:none;font-size:11px}
.tabbar .ic {width:22px;height:22px}
.tabbar a[aria-current="page"] {color:var(--ink)}
.tabbar a[aria-current="page"] .ic {color:var(--teal);filter:drop-shadow(0 0 6px rgba(180,140,255,.7))}
.tabbar a[aria-current="page"]::before {content:'';position:absolute;top:0;left:50%;width:26px;height:2px;translate:-50% 0;border-radius:0 0 2px 2px;background:var(--data-g);box-shadow:0 0 10px rgba(226,70,255,.7)}
body[data-view="run"] .tabbar {display:none}

/* ---------- hero (idle) ---------- */
main,.foot {position:relative;z-index:5}
.hero {
  min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(270px,1fr) auto;
  padding:calc(var(--hdr) + env(safe-area-inset-top) + 18px) 16px calc(18px + var(--tab));text-align:center;user-select:none;
  transition:opacity .45s ease,visibility 0s;
}
body[data-view="run"] .hero {opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
body[data-view="run"] .launch {transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.6,0,.9,.4),opacity .35s}
.hero-copy > * {animation:rise .9s cubic-bezier(.2,.8,.2,1) backwards}
.hero-copy > :nth-child(2) {animation-delay:.08s}
.hero-copy > :nth-child(3) {animation-delay:.18s}
.eyebrow {
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 14px;border-radius:999px;
  font:600 11.5px/1 var(--hud);letter-spacing:.26em;color:var(--lav);border:1px solid rgba(180,140,255,.3);background:rgba(122,75,255,.1);
}
.live-dot {width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);animation:blink 1.6s ease-in-out infinite}
h1 {margin:0;font-size:clamp(28px,8.2vw,62px);line-height:1.16;font-weight:700;letter-spacing:-.015em}
h1 span {display:block}
h1 .l2 {
  background:linear-gradient(100deg,#F4EDFF 0%,#C49DFF 35%,#E246FF 65%,#F4EDFF 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(226,70,255,.3));animation:sheen 7s ease-in-out infinite;
}
.hero-sub {display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;margin:14px auto 0;max-width:600px;color:var(--ink2);font-size:13px}
.hero-sub b {color:var(--ink);font-size:14px;font-weight:600}
.hero-sub .sep {color:var(--ink3)}
.core-wrap {position:relative;display:grid;place-items:center}
.launch {
  --s:clamp(150px,40vw,204px);position:relative;width:var(--s);height:var(--s);padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:transform .3s,opacity .3s;
}
.l-ring,.l-ticks {position:absolute;border-radius:50%;pointer-events:none}
.l-ring {
  inset:0;background:conic-gradient(rgba(226,70,255,0),rgba(226,70,255,.95) 70deg,rgba(180,140,255,.25) 140deg,rgba(180,140,255,0) 200deg,rgba(122,75,255,.9) 300deg,rgba(226,70,255,0));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:spin 4.5s linear infinite;
}
.l-ticks {
  inset:6%;opacity:.6;background:repeating-conic-gradient(rgba(220,203,255,.55) 0 1.4deg,transparent 1.4deg 15deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));
  animation:spin 40s linear infinite reverse;
}
.l-face {
  position:absolute;inset:14%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:50%;
  background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.22),rgba(180,140,255,.36) 22%,rgba(72,24,122,.92) 60%,rgba(14,6,30,.97) 100%);
  box-shadow:0 0 0 1px rgba(180,140,255,.6),0 0 34px rgba(180,140,255,.42),0 0 110px rgba(226,70,255,.32),inset 0 0 30px rgba(180,140,255,.42);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;
}
.l-v {width:28%;height:auto;filter:drop-shadow(0 0 10px rgba(226,70,255,.75))}
.l-label {font-size:clamp(15px,4.2vw,19px);font-weight:800;letter-spacing:.04em;text-shadow:0 0 14px rgba(226,70,255,.8);white-space:nowrap}
.l-sub {font:600 10px/1.2 var(--hud);letter-spacing:.22em;color:rgba(243,238,255,.74);white-space:nowrap}
.launch:hover .l-face {transform:scale(1.045);box-shadow:0 0 0 1px rgba(220,203,255,.9),0 0 46px rgba(180,140,255,.6),0 0 140px rgba(226,70,255,.45),inset 0 0 36px rgba(180,140,255,.6)}
.launch:active .l-face {transform:scale(.95)}
.launch:focus-visible {outline:none}
.launch:focus-visible .l-face {box-shadow:0 0 0 2px var(--gold),0 0 0 6px rgba(245,196,81,.25),0 0 40px rgba(180,140,255,.5)}
.launch:disabled {cursor:progress}
.hero-foot {display:grid;gap:7px;justify-items:center}
.hero-hint {max-width:30em;margin:0;color:var(--ink2);font-size:13px}
.hero-flow {margin:0;font:600 10px/1.4 var(--hud);letter-spacing:.22em;color:var(--ink3)}

/* ---------- HUD (the run) — English only ---------- */
.hud {
  position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;outline:none;
  padding:calc(var(--hdr) + env(safe-area-inset-top) + 10px) 16px calc(14px + env(safe-area-inset-bottom));
}
.hud.on {animation:fadeIn .45s ease both}
.hud::before {content:'';position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 3px,rgba(180,140,255,.022) 3px 4px)}
.hud-top {position:relative;width:100%;max-width:760px;margin:0 auto}
.steps {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.steps li {display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;font:600 9.5px/1.1 var(--hud);letter-spacing:.12em;color:var(--ink3);transition:color .3s}
.steps b {font:500 9.5px var(--mono);letter-spacing:0;opacity:.75}
.steps span {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps li[data-state="now"] {color:var(--ink);text-shadow:0 0 12px rgba(226,70,255,.75)}
.steps li[data-state="done"] {color:var(--teal)}
.prog {position:relative;height:3px;margin-top:8px;border-radius:3px;overflow:hidden;background:rgba(176,150,255,.14)}
.prog-fill {position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--data-g);box-shadow:0 0 12px rgba(226,70,255,.8);transition:width var(--fill-ms,0ms) linear}
.prog.hold .prog-fill {animation:hold 1.3s ease-in-out infinite}
.readout {text-align:center;min-height:116px;background:radial-gradient(closest-side,rgba(7,4,15,.62),rgba(7,4,15,0))}
.ph-title {margin:4px 0 0;min-height:18px;font:600 12.5px/1.4 var(--hud);letter-spacing:.2em;color:var(--lav);text-shadow:0 0 14px rgba(180,140,255,.5)}
.big {display:flex;align-items:baseline;justify-content:center;margin:2px 0 0;line-height:1.05;min-height:1.05em;font-size:clamp(40px,11.5vw,84px)}
.big-num {font-weight:700;letter-spacing:-.02em;color:#FBF7FF;text-shadow:0 0 26px rgba(226,70,255,.55),0 0 2px #fff}
.big-num.rolling {color:#F1E6FF}
.big-label {margin:2px 0 0;min-height:18px;font:600 11.5px/1.4 var(--hud);letter-spacing:.2em;color:var(--ink2)}
.subs {display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0 0;padding:0;list-style:none}
.subs li {padding:4px 10px;border-radius:999px;font:600 10.5px var(--hud);letter-spacing:.14em;color:var(--ink2);background:rgba(19,10,38,.74);border:1px solid var(--line)}
.subs b {margin-right:6px;font:600 12px var(--mono);letter-spacing:0;color:var(--ink)}
.rh-scan li,.tz-lg li {padding:4px 10px;border-radius:999px;font-size:12px;color:var(--ink2);background:rgba(19,10,38,.74);border:1px solid var(--line)}
.rh-scan b {margin-right:3px;color:var(--ink);font-weight:600}
.lg-dot {width:6px;height:6px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.s-baseball .lg-dot {background:#DCCBFF;box-shadow:0 0 8px #DCCBFF}
.s-basketball .lg-dot {background:#FF8CD6;box-shadow:0 0 8px #FF8CD6}
.s-hockey .lg-dot {background:#BFCBFF;box-shadow:0 0 8px #BFCBFF}
.hud-core {position:relative;min-height:150px}
.factors {position:absolute;left:0;right:0;bottom:2px;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.factors li {padding:5px 10px;border-radius:6px;font:600 10.5px var(--hud);letter-spacing:.14em;color:var(--ink3);background:rgba(11,6,22,.82);border:1px solid var(--line);transition:all .3s}
.factors li.on {color:var(--ink);border-color:rgba(226,70,255,.7);box-shadow:0 0 16px rgba(226,70,255,.35),inset 0 0 10px rgba(180,140,255,.16)}
.factors.out li {opacity:0;transform:translateY(10px)}
.chips {position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.chip {
  position:absolute;left:0;top:0;opacity:0;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;white-space:nowrap;
  font:600 10.5px/1.2 var(--hud);letter-spacing:.1em;color:var(--ink);will-change:transform,opacity;
  background:rgba(14,7,30,.86);border:1px solid rgba(180,140,255,.34);box-shadow:0 8px 20px -10px rgba(0,0,0,.85);transition:border-color .3s,box-shadow .3s,filter .3s;
}
.chip i {width:5px;height:5px;flex:none;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.chip time {font:500 10.5px var(--mono);letter-spacing:0;color:var(--ink2)}
.chip.s-basketball i {background:#FF8CD6;box-shadow:0 0 8px #FF8CD6}
.chip.s-baseball i {background:#DCCBFF;box-shadow:0 0 8px #DCCBFF}
.chip.s-hockey i {background:#BFCBFF;box-shadow:0 0 8px #BFCBFF}
.chip.gold {color:var(--gold1);border-color:rgba(245,196,81,.85);box-shadow:0 0 22px rgba(245,196,81,.5),inset 0 0 10px rgba(245,196,81,.18)}
.chip.gold i {background:var(--gold);box-shadow:0 0 8px var(--gold)}
.chip.gold time {color:var(--gold1)}
.chip.dim {filter:grayscale(1) brightness(.55)}
.term {
  display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:600px;height:100px;margin:0 auto;padding:10px 14px;overflow:hidden;
  border-radius:12px;font:11.5px/19px var(--mono);letter-spacing:.02em;color:var(--ink2);background:rgba(9,5,19,.78);border:1px solid var(--line);
  box-shadow:inset 0 0 30px rgba(180,140,255,.05);-webkit-mask-image:linear-gradient(transparent 0,#000 34%);mask-image:linear-gradient(transparent 0,#000 34%);
}
.term p {display:flex;align-items:center;gap:8px;margin:0;flex:none;white-space:nowrap;animation:lineIn .25s ease both}
.term p:last-child {color:var(--ink)}
.t-pr {color:var(--blue)}
.t-txt {overflow:hidden;text-overflow:ellipsis}
.t-end {display:inline-flex}
.t-ok {width:14px;height:14px;color:var(--teal);stroke-width:2.6}
.t-spin {display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(180,140,255,.25);border-top-color:var(--blue);animation:spin .7s linear infinite}
.hud-err {position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:16px;background:rgba(7,4,15,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.err-card {max-width:380px;padding:26px 22px;border-radius:22px;text-align:center;background:var(--glass);border:1px solid rgba(255,138,118,.35);box-shadow:0 30px 80px -30px #000}
.err-ic {width:34px;height:34px;color:var(--coral)}
.err-k {margin:8px 0 0;font:600 12px var(--hud);letter-spacing:.24em;color:var(--coral)}
.err-t {margin:6px 0 0;font-weight:700;font-size:16px}
.err-m {margin:6px 0 0;color:var(--ink2);font-size:13.5px}
.err-act {display:flex;justify-content:center;gap:10px;margin-top:16px}
/* calm run (prefers-reduced-motion): the same phases and wait, a still stadium, no chips / tags */
body.calm .chips,body.calm .factors {display:none}
body.calm .stage {opacity:.55}
body.calm .prog {height:6px}

/* ---------- buttons ---------- */
.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid transparent;font:600 14px var(--f);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .2s,box-shadow .2s,background .2s,color .2s;
}
.btn .ic {width:16px;height:16px}
.btn-gold {color:#1A1203;background:var(--gold-g);box-shadow:0 6px 24px -8px rgba(245,196,81,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-gold:hover {transform:translateY(-1px);box-shadow:0 10px 32px -6px rgba(245,196,81,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost {color:var(--ink);background:rgba(22,12,42,.66);border-color:rgba(176,150,255,.3)}
.btn-ghost:hover {border-color:rgba(180,140,255,.6)}
.btn-link {min-height:44px;padding:0 6px;color:var(--teal);background:none}
.btn-sm {min-height:40px;padding:0 15px;font-size:13px}

/* ---------- results ---------- */
.results {max-width:1120px;margin:0 auto;padding:calc(var(--hdr) + env(safe-area-inset-top) + 26px) 16px 26px;animation:fadeIn .7s ease both}
.rh {max-width:780px;margin:0 auto 26px;text-align:center}
.rh-e {display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font:600 11.5px var(--hud);letter-spacing:.22em;color:var(--lav)}
.rh-t {margin:0;font-size:clamp(25px,6.6vw,44px);line-height:1.22;outline:none}
.rh-t em {padding:0 2px;font-style:normal;font-family:var(--mono);background:var(--gold-g);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px rgba(245,196,81,.4))}
.rh-w {margin:8px 0 0;color:var(--ink2);font-size:13.5px}
.rh-scan,.tz-lg {display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.rh-f {display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;padding:8px 13px;border-radius:12px;font-size:12.5px;text-align:left;
  color:var(--gold1);background:rgba(245,196,81,.07);border:1px solid rgba(245,196,81,.24)}
.rh-f .ic {width:16px;height:16px}
.cards {display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.cards.one {max-width:640px;margin:0 auto}

/* card */
.pc {
  --rx:0deg;--ry:0deg;position:relative;isolation:isolate;padding:18px 16px 8px;border-radius:22px;
  background:linear-gradient(165deg,rgba(36,20,72,.86),rgba(12,7,28,.92) 62%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px);transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  animation:cardIn .95s cubic-bezier(.16,.84,.3,1) backwards;animation-delay:calc(var(--i,0) * 160ms + 120ms);
}
.pc::before {
  content:'';position:absolute;inset:0;z-index:-1;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg,rgba(180,140,255,.6),rgba(226,70,255,.18) 42%,rgba(245,196,81,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
@property --ang {syntax:'<angle>';inherits:false;initial-value:0deg}
.pc.is-top {padding-top:26px;box-shadow:0 30px 90px -34px rgba(245,196,81,.42),0 30px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.pc.is-top::before {padding:1.5px;background:conic-gradient(from var(--ang),#F5C451,#FFF1C4,#E09A2E,rgba(245,196,81,.15),rgba(180,140,255,.5),#F5C451);animation:rot 7s linear infinite}
.pc.is-top::after {content:'';position:absolute;inset:-34px -10px auto;height:160px;z-index:-2;border-radius:50%;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(245,196,81,.2),transparent 70%)}
.pc-beam {position:absolute;left:50%;bottom:100%;width:2px;height:70vh;margin-left:-1px;z-index:3;pointer-events:none;opacity:0;transform-origin:top;
  background:linear-gradient(to bottom,transparent,rgba(245,196,81,.55) 60%,rgba(255,244,214,.95));box-shadow:0 0 14px rgba(245,196,81,.9);
  animation:beam 1s ease-out backwards;animation-delay:calc(var(--i,0) * 160ms)}
.pc-glare {position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.09),transparent 45%)}
.pc:hover .pc-glare {opacity:1}
.crown {position:absolute;top:-13px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 9px;border-radius:999px;
  font-size:12.5px;font-weight:800;color:#1A1203;background:var(--gold-g);box-shadow:0 6px 22px -4px rgba(245,196,81,.75)}
.crown .ic {width:15px;height:15px;fill:currentColor;stroke:none}
.pc-h {grid-area:h;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink2)}
.lg {display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:55%;padding:4px 10px;border-radius:999px;font-size:12px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(226,70,255,.1);border:1px solid rgba(226,70,255,.26)}
.ko {display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 6px;text-align:right}
.ko .ic {width:14px;height:14px;color:var(--ink3)}
.cd {padding:2px 7px;border-radius:6px;font:500 11px var(--mono);color:var(--teal);background:rgba(180,140,255,.09)}
.cd.none {display:none}
.tm {grid-area:t;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:16px 0 6px}
.tm-s {display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.tm-n {font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tm-r {font-size:10.5px;letter-spacing:.1em;color:var(--ink3)}
.tm-vs {font:700 12px var(--mono);letter-spacing:.1em;color:var(--ink3)}
.crest {width:40px;height:40px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.04)}
.crest-i {display:grid;place-items:center;font-size:17px;font-weight:700;background:linear-gradient(140deg,rgba(180,140,255,.26),rgba(226,70,255,.2));border:1px solid rgba(176,150,255,.26)}
.tm-away .crest-i {background:linear-gradient(140deg,rgba(226,70,255,.28),rgba(122,75,255,.2))}
.pm {grid-area:m;align-self:start;position:relative;margin-top:10px;padding:14px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,rgba(245,196,81,.09),rgba(245,196,81,.02) 50%,transparent),rgba(11,6,22,.52);border:1px solid rgba(245,196,81,.17)}
.pm-top {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pm-bt {padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;color:#1A1203;background:var(--gold)}
.pm-st {padding:2px 8px;border-radius:6px;font-size:11.5px;color:var(--ink2);border:1px solid var(--line)}
.pm-top .pips {margin-left:auto}
.pm-label {
  margin:8px 0 4px;font-size:clamp(28px,8.2vw,44px);font-weight:800;line-height:1.12;letter-spacing:-.01em;overflow-wrap:anywhere;
  background:var(--gold-g);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px rgba(245,196,81,.34));animation:sheen 6s ease-in-out infinite;
}
.is-top .pm-label {font-size:clamp(32px,9.6vw,56px)}
.pm-stats {display:flex;flex-wrap:wrap;gap:10px 24px;margin:10px 0 0}
.pm-stats div {display:flex;flex-direction:column;gap:2px}
.pm-stats dt {font-size:11px;letter-spacing:.08em;color:var(--ink3)}
.pm-stats dd {display:flex;align-items:center;gap:6px;min-height:28px;margin:0}
.pm-stats small {font-size:11px;color:var(--ink3)}
.odds {font-size:22px;font-weight:700;color:var(--ink)}
.ev {padding:2px 8px;border-radius:6px;font-size:13.5px;color:var(--teal);background:rgba(180,140,255,.1);border:1px solid rgba(180,140,255,.32)}
.ev.neg {color:var(--coral);background:rgba(255,138,118,.08);border-color:rgba(255,138,118,.3)}
.pips {display:inline-flex;gap:6px;padding:0 2px}
.pips i {width:9px;height:9px;border-radius:2px;transform:rotate(45deg);border:1px solid rgba(245,196,81,.5)}
.pips i.on {background:var(--gold);border-color:var(--gold1);box-shadow:0 0 10px rgba(245,196,81,.85)}

/* AI 觀點 */
.vw {grid-area:v;margin-top:16px}
.vw-h {display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.04em}
.vw-ic {color:var(--teal);fill:rgba(180,140,255,.25)}
.vw-src {margin-left:auto;padding:2px 7px;border-radius:6px;font:500 10.5px var(--mono);color:var(--ink3);border:1px solid var(--line)}
.vw-q {position:relative;margin:10px 0 0;padding:12px 34px 12px 16px;border-radius:14px;border-left:2px solid var(--teal);background:linear-gradient(100deg,rgba(180,140,255,.09),rgba(226,70,255,.04))}
.vw-q::after {content:'\201D';position:absolute;right:10px;top:-4px;font:700 50px/1 Georgia,serif;color:rgba(180,140,255,.2)}
.vw-q p {margin:0;font-size:16px;font-weight:600;line-height:1.55;color:#F7F2FF}
.vw-rest {display:none}
.pc.open .vw-rest {display:block;animation:fadeIn .35s ease}
.vw-tog {width:100%;min-height:44px;margin-top:10px;border-radius:12px;font:600 13px var(--f);color:var(--teal);background:rgba(180,140,255,.05);border:1px dashed rgba(180,140,255,.36);cursor:pointer}
.vw-pts {display:grid;gap:9px;margin:12px 0 0;padding:0;list-style:none}
.vw-pts li {display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.55;color:var(--ink2)}
.pt-ic {width:28px;height:28px;padding:6px;border-radius:9px;color:var(--teal);background:rgba(180,140,255,.08);border:1px solid rgba(180,140,255,.2)}
.vw-fx {display:grid;gap:11px;margin-top:14px;padding:12px;border-radius:14px;background:rgba(11,6,22,.52);border:1px solid var(--line)}
.fx-leg {display:flex;justify-content:space-between;gap:10px;margin:0;font-size:11px;color:var(--ink3)}
.fx-leg span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-leg i {display:inline-block;width:8px;height:8px;margin:0 5px;border-radius:2px;vertical-align:middle}
.k-h {background:var(--teal)} .k-a {background:var(--blue)}
.fx-t {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline;gap:8px;font-size:12.5px}
.fx-h {text-align:left} .fx-a {text-align:right}
.fx-l {font-size:11.5px;color:var(--ink3);text-align:center}
.fx.fav-home .fx-h,.fx.fav-away .fx-a {color:var(--teal);text-shadow:0 0 10px rgba(180,140,255,.5)}
.fx-bar {display:flex;gap:3px;height:6px;margin-top:5px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.04)}
.fx-hb,.fx-ab {border-radius:999px;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s}
.fx-hb {flex:0 0 calc(var(--s) * 100% - 1.5px);transform-origin:right;background:linear-gradient(90deg,rgba(180,140,255,.3),var(--teal))}
.fx-ab {flex:1 1 0;transform-origin:left;transition-delay:.3s;background:linear-gradient(90deg,var(--blue),rgba(226,70,255,.3))}
.pc.vis .fx-hb,.pc.vis .fx-ab {transform:scaleX(1)}
.fx.fav-home .fx-hb {box-shadow:0 0 12px rgba(180,140,255,.75)}
.fx.fav-away .fx-ab {box-shadow:0 0 12px rgba(226,70,255,.85)}
.vw-c {display:flex;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,138,118,.06);border:1px solid rgba(255,138,118,.24)}
.vw-c b {display:block;font-size:11.5px;letter-spacing:.08em;color:var(--coral)}
.vw-c p {margin:2px 0 0;font-size:13.5px;color:var(--ink2)}
.c-ic {margin-top:2px;color:var(--coral)}
.vw-mw {margin-top:6px}
.vw-more {min-height:44px;padding:0;border:0;background:none;font:600 13px var(--f);color:var(--teal);cursor:pointer}
.vw-body p {margin:0 0 10px;font-size:14px;line-height:1.8;color:var(--ink2)}
.vw-up {display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:10px;padding:14px;border-radius:14px;background:rgba(245,196,81,.05);border:1px dashed rgba(245,196,81,.36)}
.vw-up p {margin:0;font-size:13.5px;color:var(--ink2)}
.vw-up .ic {color:var(--gold)}
.pc-f {grid-area:f;align-self:end;display:flex;justify-content:flex-end;margin-top:10px;border-top:1px solid var(--line)}
.pc-link {display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;font-size:13px;color:var(--ink2);text-decoration:none}
.pc-link .ic {width:15px;height:15px}
.pc-link:hover {color:var(--teal)}

/* locked / teaser */
.lk {position:relative;margin-top:10px;border-radius:14px;overflow:hidden}
.lk-ghost {position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:16px;filter:blur(8px);opacity:.55}
.lk-ghost i {display:block;width:70%;height:34px;border-radius:10px;background:var(--gold-g);opacity:.5}
.lk-ghost i:nth-child(2) {width:46%;height:16px;background:rgba(243,238,255,.4)}
.lk-ghost i:nth-child(3) {width:62%;height:16px;background:rgba(180,140,255,.35)}
.lk-c {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:160px;padding:18px 12px;text-align:center;background:rgba(9,5,18,.45)}
.lk-ic {width:26px;height:26px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(245,196,81,.6))}
.lk-t {margin:4px 0 0;font-size:15px;font-weight:700}
.lk-s {margin:0 0 8px;font-size:12.5px;color:var(--ink2)}
.lk-a {display:flex;flex-direction:column;align-items:center;gap:2px}
.lk-or {font-size:13px;color:var(--ink3)}
.tz {margin:0 0 22px;text-align:center}
.tz-n {margin:0;font-size:16px;color:var(--ink2)}
.tz-n b {margin:0 4px;font-size:30px;color:var(--gold);text-shadow:0 0 18px rgba(245,196,81,.55)}
.tz-lg b {margin-left:6px;color:var(--ink);font-weight:600}
.cta {position:relative;max-width:640px;margin:24px auto;padding:22px 18px;border-radius:22px;text-align:center;backdrop-filter:blur(8px);
  background:radial-gradient(120% 140% at 50% 0%,rgba(245,196,81,.13),transparent 60%),rgba(18,10,34,.78);border:1px solid rgba(245,196,81,.3)}
.cta-t {margin:0;font-size:18px;font-weight:700}
.cta-s {margin:6px 0 0;font-size:13.5px;color:var(--ink2)}
.cta-steps {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink2)}
.cta-steps li {display:flex;align-items:center;gap:6px}
.cta-steps b {display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:700 11px var(--mono);color:var(--gold);border:1px solid rgba(245,196,81,.5)}
.cta-a {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.empty {max-width:580px;margin:0 auto;padding:30px 20px;border-radius:22px;text-align:center;background:rgba(18,10,34,.74);border:1px solid var(--line);backdrop-filter:blur(8px)}
.em-ic {width:40px;height:40px;margin-bottom:4px;color:var(--teal)}
.em-t {margin:0;font-size:18px;font-weight:700;line-height:1.5}
.em-n {margin:12px 0 0;color:var(--ink2)}
.em-n b {font-family:var(--mono);color:var(--gold1)}
.em-s {margin:10px 0 0;font-size:13px;color:var(--ink3)}
.r-act {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 0}
.rnotes {max-width:780px;margin:26px auto 0;padding:16px;border-radius:16px;font-size:12.5px;line-height:1.7;color:var(--ink3);background:rgba(11,6,22,.64);border:1px solid var(--line)}
.rnotes p {display:flex;align-items:flex-start;gap:8px;margin:0 0 6px}
.rnotes p:last-child {margin:0}
.rnotes .disc {display:block}
.age {display:inline-grid;place-items:center;flex:none;min-width:32px;height:20px;padding:0 5px;border-radius:5px;font:700 11px var(--mono);color:var(--coral);border:1px solid rgba(255,138,118,.6)}

/* ---------- footer ---------- */
.foot {max-width:1120px;margin:0 auto;padding:22px 16px calc(28px + var(--tab));text-align:center;font-size:12px;color:var(--ink3);border-top:1px solid var(--line)}
.foot p {margin:0 0 8px}
.foot-agep {display:flex;align-items:center;justify-content:center;gap:8px}
.foot-links {display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;margin:6px 0}
.foot-links a {display:inline-flex;align-items:center;min-height:40px;color:var(--ink2);text-decoration:none}
.foot-links a:hover {color:var(--teal)}
body[data-view="run"] .foot {display:none}
body[data-view="results"] .foot-risk,body[data-view="results"] .foot-agep,body[data-view="results"] .foot-disc {display:none}
.noscript {position:relative;z-index:50;padding:16px;text-align:center;color:var(--ink)}


/* ---------- breakpoints ---------- */
@media (max-width:480px) {
  .chip {padding:3px 7px;font-size:10px}
  .steps li {font-size:8.5px;letter-spacing:.08em}
  .factors {gap:5px}
  .factors li {padding:4px 8px;font-size:10px}
  .acc {gap:5px}
  .btn-s {padding:0 11px}
}
@media (max-width:360px) {
  .brand-name {font-size:14px;max-width:34vw}
  .btn-s {padding:0 9px;font-size:12.5px}
  .acc .btn-s:not(.gold) {display:none}
}
@media (max-height:700px) {
  .term {height:80px}
  .readout {min-height:104px}
  .subs {margin-top:5px}
}
@media (max-height:560px) {
  .subs,.big-label,.steps span {display:none}
  .readout {min-height:0}
}
@media (min-width:768px) {
  :root {--hdr:68px}
  .top {padding:calc(env(safe-area-inset-top) + 12px) 20px 0}
  .bar {height:52px;padding:0 8px 0 16px}
  .brand-name {font-size:17px;max-width:none}
  .hero {padding-left:28px;padding-right:28px}
  .hero-sub {font-size:14px}
  .steps li {font-size:11px}
  .steps b {font-size:10.5px}
  .term {height:120px}
  .pc {padding:22px 22px 10px}
  .pc.is-top {padding-top:28px}
  .vw-rest {display:block}
  .vw-tog {display:none}
}
@media (min-width:900px) {
  .cards {grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards > .is-top {grid-column:1 / -1}
  .cards > .is-top:not(.locked) {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"h v" "t v" "m v" "f v";grid-template-rows:auto auto 1fr auto;column-gap:30px}
  .cards > .is-top:not(.locked) .pm {align-self:center}
  .is-top .crest {width:56px;height:56px;border-radius:16px}
  .is-top .tm-n {font-size:18px}
  .is-top .vw {margin-top:0}
}
@media (min-width:1024px) {
  :root {--tab:0px}
  .nav {display:flex}
  .acc {margin-left:0}
  .tabbar {display:none}
}

/* ---------- keyframes ---------- */
@keyframes fadeIn {from {opacity:0} to {opacity:1}}
@keyframes rise {from {opacity:0;transform:translateY(18px);filter:blur(6px)} to {opacity:1;transform:none;filter:none}}
@keyframes spin {to {transform:rotate(360deg)}}
@keyframes blink {50% {opacity:.3}}
@keyframes sheen {0%,100% {background-position:0% 0} 50% {background-position:100% 0}}
@keyframes rot {to {--ang:360deg}}
@keyframes lineIn {from {opacity:0;transform:translateY(6px)}}
@keyframes flash {0% {opacity:0} 16% {opacity:.55} 100% {opacity:0}}
@keyframes hold {50% {opacity:.45}}
@keyframes grain {0% {transform:translate(0,0)} 25% {transform:translate(-3%,2%)} 50% {transform:translate(2%,-3%)} 75% {transform:translate(-2%,-1%)}}
@keyframes beam {0% {opacity:1;transform:scaleY(0)} 45% {opacity:1;transform:scaleY(1)} 100% {opacity:0;transform:scaleY(1)}}
@keyframes cardIn {
  0% {opacity:0;transform:perspective(1100px) translateY(46px) scale(.92);filter:blur(10px) brightness(2)}
  55% {opacity:1;filter:blur(0) brightness(1.35)}
  100% {opacity:1;transform:perspective(1100px) translateY(0) scale(1);filter:none}
}

/* ---------- reduced motion: a still stadium and a calm progress bar (main.js keeps the same run length) ---------- */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .results,.pc {animation:fadeIn .45s ease both !important;animation-delay:0s !important}
  .pc-beam,.l-ring,.hud::before {display:none}
  .grain {animation:none !important}
  .fx-hb,.fx-ab {transform:none}
}
/* the calm progress bar keeps its own linear fill (set inline by hud.js) even under reduced motion */
body.calm .prog-fill {transition-duration:var(--fill-ms,0ms) !important}