/* Trade Corp Live Trading Battle: the trader vs trader competition landing page.
   Dark-only on purpose (a night arena); same Space Grotesk face and
   red-orange accent as the main site. Each city owns one neon colour. */
@layer reset, tokens, base, layout, components, responsive, motion;

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/SpaceGrotesk-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/SpaceGrotesk-var.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  ul[role="list"], ol[role="list"], .ranks, .feed { list-style: none; padding: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  input, button, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #05050b; --bg-2: #0a0a14; --panel: rgb(14 14 28 / .72); --panel-2: rgb(22 22 40 / .8);
    --line: rgb(255 255 255 / .08); --line-2: rgb(255 255 255 / .16);
    --ink: #f5f2ec; --ink-2: #cbc8d8; --muted: #9592aa;
    --fire: #ff4f2e; --fire-2: #ff8a3d; --gold: #ffc83d; --good: #34e89e; --bad: #ff5d6c;
    --cyan: #29e3ff; --amber: #ffb24a; --blue: #4f7dff; --violet: #b07cff; --mint: #2fe69a;
    --f-display: "Space Grotesk", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
    --f-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --gutter: clamp(16px, 4vw, 44px); --hdr: 64px;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --grain: 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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  [data-city="jim-corbett"] { --c: var(--mint); }
  [data-city="goa"] { --c: var(--cyan); }
  [data-city="odisha"] { --c: var(--amber); }
  [data-city="siliguri"] { --c: var(--violet); }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 12px); -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  body::after { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .05; pointer-events: none; z-index: 60; mix-blend-mode: overlay; }
  h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; letter-spacing: -.03em; }
  h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.04; font-weight: 700; }
  h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
  p { text-wrap: pretty; }
  a { color: inherit; }
  b { font-weight: 650; color: var(--ink); }
  .mono { font-family: var(--f-mono); letter-spacing: .02em; }
  .dim { color: var(--muted); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fire); color: #140703; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
  .skip:focus { top: 12px; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
  ::selection { background: var(--fire); color: #140703; }
}

@layer layout {
  .wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .wrap-wide { width: min(1440px, 100% - 2 * var(--gutter)); margin-inline: auto; }
  .narrow { width: min(820px, 100% - 2 * var(--gutter)); }
  .sec { position: relative; isolation: isolate; padding-block: clamp(64px, 8vw, 112px); }
  .sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgb(255 255 255 / .09) 1px, transparent 1.5px) 0 0 / 26px 26px; -webkit-mask: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask: radial-gradient(70% 60% at 50% 40%, #000, transparent); opacity: .6; }
  #rules { background: radial-gradient(50% 60% at 0% 60%, rgb(255 79 46 / .12), transparent 70%); }
  #cities { background: radial-gradient(40% 50% at 15% 30%, rgb(41 227 255 / .08), transparent 70%), radial-gradient(40% 50% at 85% 70%, rgb(176 124 255 / .1), transparent 70%); }
  #round { background: radial-gradient(45% 55% at 100% 30%, rgb(255 200 61 / .08), transparent 70%); }
  #register { background: radial-gradient(60% 60% at 50% 50%, rgb(255 79 46 / .1), transparent 70%); }
  .sec-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 64px); }
  .sec-head h2 .dim { display: block; font-weight: 500; font-size: .52em; letter-spacing: -.01em; line-height: 1.3; margin-top: .55em; }
  .idx { color: var(--fire-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
  .idx::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--fire), transparent); }
}

@layer components {
  /* ---------- header ---------- */
  .ah { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
  .ah.scrolled { background: rgb(5 5 11 / .72); backdrop-filter: blur(16px) saturate(1.4); border-color: var(--line); }
  .ah-in { height: 100%; display: flex; align-items: center; gap: 18px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand-word { font: 700 1.18rem/1 var(--f-display); letter-spacing: -.02em; }
  .brand-word b { color: var(--fire); }
  .brand-badge { font: 600 .66rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; padding: 5px 8px; border-radius: 99px; color: var(--gold); border: 1px solid rgb(255 200 61 / .4); background: rgb(255 200 61 / .08); }
  .ah-nav { display: flex; gap: 4px; margin-left: auto; }
  .ah-nav a { text-decoration: none; color: var(--ink-2); font-size: .92rem; padding: 8px 12px; border-radius: 99px; transition: color .2s, background .2s; }
  .ah-nav a:hover { color: var(--ink); background: rgb(255 255 255 / .06); }
  .menu { display: none; width: 40px; height: 40px; border-radius: 12px; place-items: center; border: 1px solid var(--line-2); }
  .menu svg { width: 22px; }

  /* ---------- buttons ---------- */
  .btn { --h: 52px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 24px; border-radius: 99px; font: 650 1rem/1 var(--f-display); text-decoration: none; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; white-space: nowrap; }
  .btn svg { width: 18px; transition: transform .25s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }
  .btn-sm { --h: 40px; padding: 0 16px; font-size: .9rem; }
  .btn-fire { color: #160703; background: linear-gradient(100deg, #ff3d24, var(--fire-2) 55%, var(--gold)); box-shadow: 0 0 0 1px rgb(255 160 90 / .5) inset, 0 10px 34px -8px rgb(255 79 46 / .75), 0 0 60px -10px rgb(255 120 50 / .55); }
  .btn-fire::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.6s var(--ease) infinite; }
  .btn-fire:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(255 200 120 / .7) inset, 0 16px 44px -8px rgb(255 79 46 / .9), 0 0 90px -6px rgb(255 120 50 / .7); }
  .btn-glass { color: var(--ink); background: rgb(255 255 255 / .05); border: 1px solid var(--line-2); backdrop-filter: blur(10px); }
  .btn-glass:hover { transform: translateY(-2px); border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .09); }

  /* ---------- hero ---------- */
  .hero { position: relative; padding-top: calc(var(--hdr) + clamp(40px, 7vw, 96px)); overflow: clip; background:
      radial-gradient(60% 50% at 50% 0%, rgb(255 79 46 / .16), transparent 70%),
      radial-gradient(40% 40% at 12% 30%, rgb(79 125 255 / .12), transparent 70%),
      radial-gradient(40% 40% at 88% 30%, rgb(176 124 255 / .12), transparent 70%), var(--bg); }
  .floor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .beams { position: absolute; inset: -10% 0 auto; height: 120vh; z-index: 0; pointer-events: none; }
  .beams i { position: absolute; top: -10%; width: 34vw; height: 120%; filter: blur(18px); opacity: .5; transform-origin: 50% 0; background: linear-gradient(180deg, rgb(255 236 210 / .22), transparent 70%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
  .beams i:nth-child(1) { left: 6%; animation: sweep 11s ease-in-out infinite alternate; }
  .beams i:nth-child(2) { left: 33%; animation: sweep 13s ease-in-out infinite alternate-reverse; opacity: .35; }
  .beams i:nth-child(3) { right: 6%; animation: sweep 12s ease-in-out -4s infinite alternate; }
  .hero-in { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 99px; font: 600 .78rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); background: rgb(255 200 61 / .07); border: 1px solid rgb(255 200 61 / .3); box-shadow: 0 0 30px -6px rgb(255 200 61 / .35); }
  .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--fire); box-shadow: 0 0 0 0 rgb(255 79 46 / .7); animation: ping 1.8s infinite; }
  .vs { display: flex; align-items: baseline; justify-content: center; gap: .12em; margin-top: 14px; font: 700 clamp(2.6rem, .6rem + 8.4vw, 8.6rem)/.86 var(--f-display); letter-spacing: -.06em; text-transform: uppercase; user-select: none; }
  .vs span { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .55); background: linear-gradient(180deg, rgb(255 255 255 / .2), transparent 85%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 40px rgb(255 120 60 / .25); }
  .vs span:first-child { animation: glitch 6s steps(1) infinite; }
  .vs em { font-style: normal; font-size: .42em; letter-spacing: -.02em; color: var(--fire); -webkit-text-stroke: 0; text-shadow: 0 0 18px rgb(255 79 46 / .9), 0 0 60px rgb(255 79 46 / .6); transform: translateY(-.35em) skewX(-8deg); }
  .hero h1 { font-size: clamp(2.3rem, 1rem + 4.6vw, 5rem); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; margin-top: clamp(4px, 1vw, 14px); }
  .hero h1 .gold { display: block; }
  .gold { background: linear-gradient(95deg, #ffe9a6, var(--gold) 35%, var(--fire-2) 70%, var(--fire)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgb(255 160 60 / .35)); }
  .lede { max-width: 62ch; margin-top: 20px; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); color: var(--ink-2); }
  .ctabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(26px, 3.4vw, 38px); }
  .ctabs-l { flex-basis: 100%; font-size: .74rem; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); }
  .ctabs button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 99px; font: 650 1rem/1 var(--f-display); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 9%, rgb(5 5 11 / .6)); backdrop-filter: blur(8px); transition: background .25s, color .25s, box-shadow .25s, transform .25s var(--ease); }
  .ctabs button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
  .ctabs button:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 20%, transparent); }
  .ctabs button[aria-pressed="true"] { background: var(--c); color: #07070d; box-shadow: 0 0 34px -4px var(--c); }
  .ctabs button[aria-pressed="true"]::before { background: #07070d; box-shadow: none; }

  .clock { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .clock-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .24em; color: var(--muted); }
  .clock.live .clock-label { color: var(--good); }
  .clock-tiles { display: flex; align-items: center; gap: clamp(6px, 1.2vw, 14px); }
  .tile { position: relative; width: clamp(68px, 13vw, 116px); padding: 14px 0 10px; border-radius: 18px; text-align: center; background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .02)); border: 1px solid var(--line-2); box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 20px 40px -20px rgb(0 0 0 / .9), inset 0 1px 0 rgb(255 255 255 / .12); overflow: hidden; }
  .tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .55); box-shadow: 0 1px 0 rgb(255 255 255 / .05); }
  .tile b { display: block; font: 700 clamp(2rem, 1rem + 4vw, 3.6rem)/1 var(--f-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #ffd9b8); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .tile b.tick { animation: roll .45s var(--ease); }
  .tile span { display: block; margin-top: 8px; font: 600 .62rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
  .colon { width: 6px; height: 22px; background: radial-gradient(circle, var(--fire) 2.5px, transparent 3px) 0 0 / 6px 11px repeat-y; filter: drop-shadow(0 0 6px var(--fire)); animation: blink 1s steps(2) infinite; }
  .when { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: .82rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .14em; }
  .when .sep, .sep { color: var(--fire); }
  .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

  /* ---------- the stage: big screen ---------- */
  .stage { position: relative; z-index: 2; margin-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(40px, 6vw, 80px); perspective: 1600px; }
  .board { --tilt: 18deg; position: relative; border-radius: 26px; padding: clamp(14px, 2vw, 26px); background: linear-gradient(180deg, rgb(16 16 32 / .92), rgb(8 8 18 / .96)); transform: rotateX(var(--tilt)) scale(var(--sc, .94)); transform-origin: 50% 100%; box-shadow: 0 60px 120px -40px rgb(0 0 0 / .9), 0 0 120px -40px rgb(255 79 46 / .5); outline: none; }
  .board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a), var(--cyan), var(--violet), var(--fire), var(--amber), var(--mint), var(--blue), var(--cyan)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin 8s linear infinite; opacity: .9; pointer-events: none; }
  .board-glow { position: absolute; inset: 10% 6% -6%; z-index: -1; border-radius: 40px; background: conic-gradient(from var(--a), rgb(41 227 255 / .4), rgb(176 124 255 / .4), rgb(255 79 46 / .5), rgb(47 230 154 / .35), rgb(41 227 255 / .4)); filter: blur(70px); opacity: .55; animation: spin 8s linear infinite; }
  .board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
  .board-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 600 clamp(1rem, .8rem + .8vw, 1.45rem)/1.2 var(--f-display); letter-spacing: -.02em; }
  .tag-sim { font: 600 .64rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; padding: 5px 9px; border-radius: 99px; color: var(--gold); border: 1px solid rgb(255 200 61 / .45); background: rgb(255 200 61 / .1); white-space: nowrap; }
  .board-hint { font-size: .74rem; color: var(--muted); }
  .hud { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; gap: 14px 22px; margin-top: 18px; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / .03); border: 1px solid var(--line); }
  .hud dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
  .hud dd { margin: 4px 0 0; font-size: .92rem; font-weight: 600; color: var(--ink); }
  .board-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 18px; }
  .chart-wrap { position: relative; min-height: 340px; border-radius: 16px; background: radial-gradient(100% 80% at 50% 100%, rgb(255 79 46 / .06), transparent), rgb(0 0 0 / .35); border: 1px solid var(--line); overflow: hidden; }
  .chart-wrap::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgb(255 255 255 / .07) 1px, transparent 1.4px) 0 0 / 18px 18px; pointer-events: none; }
  .chart { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lead-big { position: absolute; left: 18px; top: 14px; z-index: 1; pointer-events: none; }
  .lead-pct { display: block; font: 700 clamp(1.8rem, 1rem + 2.4vw, 2.8rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--lead, var(--ink)); text-shadow: 0 0 24px var(--lead, transparent); }
  .lead-who { display: block; margin-top: 6px; font-size: .74rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
  .ranks { position: relative; display: grid; gap: 8px; align-content: start; }
  .rank { position: relative; display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgb(255 255 255 / .035); border: 1px solid var(--line); transition: background .3s, border-color .3s, opacity .3s; cursor: default; }
  .rank.hot, .rank:hover { background: color-mix(in srgb, var(--c) 12%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
  .ranks.focus .rank:not(.hot) { opacity: .45; }
  .rank .pos { font: 700 .8rem/1 var(--f-mono); color: var(--muted); text-align: center; }
  .rank:first-child .pos { color: var(--gold); }
  .rank .em { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font: 700 .9rem/1 var(--f-display); color: var(--c); background: color-mix(in srgb, var(--c) 14%, #0b0b16); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 0 16px -4px var(--c); }
  .rank .em img { width: 22px; }
  .rank .nm { min-width: 0; font: 600 .82rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rank .nm small { display: block; font: 500 .8rem/1.3 var(--f-mono); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .rank .pc { font: 700 .82rem/1 var(--f-mono); }
  .up { color: var(--good); } .dn { color: var(--bad); }
  .rank:first-child::after { content: "\265B"; position: absolute; right: -6px; top: -10px; font-size: 1.05rem; color: var(--gold); text-shadow: 0 0 10px var(--gold); }

  /* ---------- the stage: pods + crown ---------- */
  .pods { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(8px, 2vw, 28px); margin-top: clamp(-10px, -1vw, 0px); }
  .pods-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vw, 22px); }
  .pod { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
  .pod-em { position: relative; z-index: 1; width: clamp(56px, 6.6vw, 88px); aspect-ratio: 1; display: grid; place-items: center; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 40%, color-mix(in srgb, var(--c) 40%, #05050b)); font: 700 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1 var(--f-display); color: #07070d; animation: bob 4s ease-in-out infinite; animation-delay: var(--dl, 0s); filter: drop-shadow(0 0 18px var(--c)); }
  .pod-em img { width: 58%; filter: brightness(0) invert(.04); }
  .pod-nm { margin-top: 12px; font: 650 clamp(.62rem, .5rem + .4vw, .82rem)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 7px 10px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #0b0b16), #0b0b16); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 22px -6px var(--c), inset 0 1px 0 rgb(255 255 255 / .12); white-space: nowrap; }
  .pod-base { width: 110%; height: 22px; margin-top: 10px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, transparent), transparent); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 80%, transparent); filter: blur(.3px); animation: glowpulse 3s ease-in-out infinite; animation-delay: var(--dl, 0s); }
  .crown { position: relative; width: clamp(110px, 12vw, 170px); display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; }
  .crown-rays { position: absolute; left: 50%; top: 34%; width: 260%; aspect-ratio: 1; translate: -50% -50%; background: repeating-conic-gradient(from var(--a), rgb(255 200 61 / .22) 0 6deg, transparent 6deg 22deg); -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); animation: spin 18s linear infinite; pointer-events: none; }
  .crown-svg { position: relative; width: 100%; filter: drop-shadow(0 0 22px rgb(255 200 61 / .75)); animation: bob 3.4s ease-in-out infinite; }
  .crown-txt { position: relative; margin-top: 10px; font-size: clamp(.58rem, .5rem + .3vw, .74rem); text-transform: uppercase; letter-spacing: .18em; color: var(--gold); text-align: center; text-shadow: 0 0 12px rgb(255 200 61 / .6); }

  /* ---------- ticker ---------- */
  .ticker { position: relative; z-index: 3; overflow: hidden; border-block: 1px solid rgb(255 79 46 / .35); background: linear-gradient(90deg, rgb(255 79 46 / .14), rgb(255 200 61 / .1), rgb(255 79 46 / .14)); transform: rotate(-1.2deg) scale(1.03); box-shadow: 0 0 60px -20px rgb(255 79 46 / .6); }
  .ticker-run { display: flex; width: max-content; animation: marquee 32s linear infinite; }
  .ticker span { padding: 16px 28px; font: 700 clamp(.95rem, .8rem + .6vw, 1.35rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; display: flex; align-items: center; gap: 28px; }
  .ticker span::after { content: "\2726"; color: var(--fire); font-size: .8em; }

  /* ---------- panels shared ---------- */
  .rule, .fighter, .term, .ticket, .faq details { --mx: 50%; --my: 0%; position: relative; border-radius: 22px; background: radial-gradient(500px circle at var(--mx) var(--my), rgb(255 255 255 / .06), transparent 40%), var(--panel); border: 1px solid var(--line); backdrop-filter: blur(8px); }

  /* ---------- rules ---------- */
  .rules { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
  .rule { padding: 28px; overflow: hidden; transition: border-color .3s, transform .3s var(--ease); }
  .rule:hover { border-color: rgb(255 138 61 / .45); transform: translateY(-3px); }
  .rule h3 { margin-top: 18px; font-size: 1.35rem; }
  .rule p { margin-top: 8px; color: var(--ink-2); }
  .ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--fire-2); background: rgb(255 79 46 / .1); box-shadow: 0 0 0 1px rgb(255 79 46 / .35), 0 0 24px -6px rgb(255 79 46 / .6); }
  .ico svg { width: 24px; }
  .r-cap { grid-row: span 2; display: flex; flex-direction: column; background: radial-gradient(120% 70% at 0% 100%, rgb(255 79 46 / .22), transparent 60%), var(--panel); }
  .r-cap .big { margin-top: auto; padding-top: 30px; font-size: clamp(3rem, 2rem + 4vw, 5.4rem); font-weight: 700; letter-spacing: -.06em; line-height: 1; background: linear-gradient(180deg, #fff, rgb(255 138 61 / .55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .r-win { background: radial-gradient(120% 90% at 100% 0%, rgb(255 200 61 / .18), transparent 60%), var(--panel); }
  .r-win .ico { color: var(--gold); background: rgb(255 200 61 / .1); box-shadow: 0 0 0 1px rgb(255 200 61 / .4), 0 0 24px -6px rgb(255 200 61 / .7); }

  /* ---------- cities ---------- */
  .fighters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .fighter { padding: 22px; display: flex; flex-direction: column; overflow: hidden; transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
  .fighter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); opacity: .7; transition: opacity .3s; pointer-events: none; }
  .fighter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .1) 48%, color-mix(in srgb, var(--c) 30%, transparent) 52%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; transition: background-position .9s var(--ease); pointer-events: none; }
  .fighter:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c) 70%, transparent); }
  .fighter:hover::before { opacity: 1; }
  .fighter:hover::after { background-position: -20% 0; }
  .f-top { position: relative; display: flex; justify-content: space-between; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .f-top span:first-child { color: var(--c); }
  .f-emblem { position: relative; width: 104px; aspect-ratio: 1; margin: 22px auto 0; display: grid; place-items: center; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 75%, #fff), var(--c) 42%, color-mix(in srgb, var(--c) 35%, #05050b)); font: 700 2.8rem/1 var(--f-display); color: #07070d; filter: drop-shadow(0 0 26px var(--c)); transition: transform .5s var(--ease); }
  .fighter:hover .f-emblem { transform: scale(1.06) rotate(-4deg); }
  .f-emblem img { width: 58%; filter: brightness(0) invert(.04); }
  .f-name { position: relative; margin-top: 20px; text-align: center; font-size: 1.45rem; }
  .f-stats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgb(0 0 0 / .25); }
  .f-stats div { padding: 10px 6px; text-align: center; }
  .f-stats div + div { border-left: 1px solid var(--line); }
  .f-stats dt { font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .f-stats dd { margin: 4px 0 0; font-size: .86rem; font-weight: 700; }
  .f-pick { position: relative; margin-top: 16px; min-height: 46px; border-radius: 99px; font: 650 .92rem/1 var(--f-display); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); transition: background .25s, color .25s, box-shadow .25s; }
  .f-pick:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
  .fighter.picked { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 30px 70px -26px var(--c); }
  .fighter.picked .f-pick { background: var(--c); color: #07070d; box-shadow: 0 0 30px -4px var(--c); }
  .fighter.picked .f-top span:last-child { color: var(--gold); }
  .pick-note { margin-top: 22px; text-align: center; font-size: .86rem; color: var(--ink-2); }
  .pick-note b { color: var(--pc, var(--gold)); }

  /* ---------- round ---------- */
  .round { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; }
  .cycle { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; }
  .cycle-ring { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 16px rgb(255 79 46 / .55)); }
  .cycle-ring circle { fill: none; stroke-width: 7; }
  .ring-bg { stroke: rgb(255 255 255 / .07); }
  .ring-fg { stroke: var(--fire); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--off, 0); transition: stroke-dashoffset 1s linear; }
  .cycle-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; }
  .cycle-in p { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
  .cycle-t { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgb(255 79 46 / .6); }
  .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; counter-reset: s; }
  .step { display: flex; gap: 16px; padding: 22px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
  .step .n { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-weight: 700; color: var(--fire-2); border: 1px solid rgb(255 79 46 / .45); background: rgb(255 79 46 / .08); }
  .step p { margin-top: 4px; color: var(--ink-2); font-size: .95rem; }
  .term { grid-column: 1 / -1; overflow: hidden; }
  .term-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .76rem; color: var(--muted); }
  .term-top .tag-sim { margin-left: auto; }
  .lights { display: flex; gap: 6px; }
  .lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
  .lights i:nth-child(2) { background: var(--gold); } .lights i:nth-child(3) { background: var(--good); }
  .feed { height: 238px; overflow: hidden; padding: 12px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: .82rem; -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); }
  .feed li { display: flex; flex-wrap: wrap; gap: 4px 12px; white-space: nowrap; animation: feedin .45s var(--ease); }
  .feed .t { color: var(--muted); }
  .feed .who { color: var(--c); font-weight: 700; min-width: 8ch; }
  .feed .act { font-weight: 700; }
  .feed .why { color: var(--ink-2); white-space: normal; }

  /* ---------- ticket ---------- */
  .ticket { display: grid; grid-template-columns: 380px 1fr; overflow: hidden; background: radial-gradient(80% 120% at 0% 0%, rgb(255 79 46 / .2), transparent 60%), var(--panel); }
  .stub { position: relative; padding: 34px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(160deg, rgb(255 79 46 / .28), rgb(255 200 61 / .12) 60%, transparent); border-right: 2px dashed rgb(255 255 255 / .18); }
  .stub::before, .stub::after { content: ""; position: absolute; right: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
  .stub::before { top: -14px; } .stub::after { bottom: -14px; }
  .stub > .mono { font-size: .72rem; text-transform: uppercase; letter-spacing: .3em; }
  .stub-title { font: 700 clamp(2rem, 1.4rem + 2vw, 2.8rem)/1 var(--f-display); letter-spacing: -.04em; }
  .stub-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .stub-meta dt { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
  .stub-meta dd { margin: 4px 0 0; font-weight: 700; }
  .stub-city { color: var(--pc, var(--gold)); }
  .barcode { margin-top: auto; height: 46px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .85) 0 2px, transparent 2px 5px, rgb(255 255 255 / .85) 5px 6px, transparent 6px 10px, rgb(255 255 255 / .85) 10px 13px, transparent 13px 15px); opacity: .55; }
  .remind { padding: clamp(26px, 4vw, 48px); display: grid; gap: 16px; align-content: start; }
  .remind h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
  .field { display: grid; gap: 6px; }
  .field label { font-size: .84rem; font-weight: 600; color: var(--ink-2); }
  .field input, .field select { min-height: 50px; padding: 0 16px; border-radius: 14px; background: rgb(0 0 0 / .35); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; }
  .field select option { background: #12121f; }
  .field input:focus, .field select:focus { outline: none; border-color: var(--fire-2); box-shadow: 0 0 0 4px rgb(255 79 46 / .2); }
  .field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--bad); }
  .remind .btn { justify-self: start; margin-top: 4px; }
  .form-msg { min-height: 1.4em; font-size: .92rem; }
  .form-msg.ok { color: var(--good); } .form-msg.err { color: var(--bad); }

  /* ---------- faq ---------- */
  .faq { display: grid; gap: 10px; }
  .faq details { padding: 0 22px; border-radius: 18px; }
  .faq summary { list-style: none; cursor: pointer; padding: 20px 34px 20px 0; position: relative; font: 600 1.08rem/1.35 var(--f-display); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--f-display); color: var(--fire-2); transition: rotate .3s var(--ease); }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details[open] { border-color: rgb(255 138 61 / .35); }
  .faq details p { padding-bottom: 20px; color: var(--ink-2); }
  .faq a { color: var(--fire-2); }

  /* ---------- footer ---------- */
  .af { position: relative; overflow: hidden; padding: 70px 0 30px; border-top: 1px solid var(--line); background: radial-gradient(60% 80% at 50% 120%, rgb(255 79 46 / .2), transparent 70%), var(--bg-2); }
  .af-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
  .af-tag { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
  .af-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
  .af-links a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
  .af-links a:hover { color: var(--ink); }
  .risk { margin-top: 30px; max-width: 900px; font-size: .82rem; color: var(--muted); }
  .af-wm { margin-top: 20px; font: 700 clamp(4rem, 2rem + 13vw, 15rem)/.8 var(--f-display); letter-spacing: -.06em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .1); background: linear-gradient(180deg, rgb(255 79 46 / .25), transparent 80%); -webkit-background-clip: text; background-clip: text; user-select: none; }
  .af-c { margin-top: 16px; font-size: .78rem; text-align: center; }
}

/* ---------- responsive ---------- */
@layer responsive {
  @media (max-width: 1080px) {
    .board-body { grid-template-columns: 1fr; }
    .ranks { grid-template-columns: repeat(2, 1fr); }
    .hud { grid-template-columns: repeat(3, auto); }
    .rules { grid-template-columns: 1fr 1fr; }
    .r-cap { grid-row: auto; grid-column: 1 / -1; }
    .fighters { grid-template-columns: repeat(2, 1fr); }
    .round { grid-template-columns: 1fr; }
    .ticket { grid-template-columns: 1fr; }
    .stub { border-right: 0; border-bottom: 2px dashed rgb(255 255 255 / .18); }
    .stub::before, .stub::after { top: auto; bottom: -15px; right: auto; }
    .stub::before { left: -14px; } .stub::after { right: -14px; }
    .barcode { display: none; }
  }
  @media (max-width: 860px) {
    .ah-nav { position: fixed; inset: var(--hdr) 0 auto; flex-direction: column; padding: 12px var(--gutter) 20px; background: rgb(5 5 11 / .96); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
    .ah-nav.open { opacity: 1; visibility: visible; transform: none; }
    .ah-nav a { padding: 14px 12px; font-size: 1.05rem; }
    .menu { display: grid; }
    .ah .btn-sm { margin-left: auto; }
    .pods { grid-template-columns: 1fr; justify-items: center; }
    .crown { order: -1; margin-bottom: 8px; }
    .pods-side { width: 100%; }
  }
  @media (max-width: 600px) {
    .brand-badge { display: none; }
    .ah .btn-sm { padding: 0 12px; }
    .board { --tilt: 0deg !important; --sc: 1 !important; }
    .board-hint { display: none; }
    .hud { grid-template-columns: repeat(2, 1fr); }
    .chart-wrap { min-height: 250px; }
    .ranks { grid-template-columns: 1fr; }
    .rules, .steps { grid-template-columns: 1fr; }
    .fighters { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fighter { padding: 14px; }
    .f-emblem { width: 72px; font-size: 2rem; margin-top: 14px; }
    .f-name { font-size: 1.02rem; margin-top: 14px; }
    .f-stats { grid-template-columns: 1fr; }
    .f-stats div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; }
    .f-stats div + div { border-left: 0; border-top: 1px solid var(--line); }
    .f-stats dd { margin: 0; font-size: .78rem; }
    .f-pick { font-size: .78rem; min-height: 44px; padding: 0 6px; }
    .f-top { font-size: .6rem; letter-spacing: .08em; }
    .pod-nm { white-space: normal; padding: 6px; }
    .feed { font-size: .74rem; }
    .stub, .remind { padding: 24px 20px; }
    .remind .btn { justify-self: stretch; }
  }
}

@layer motion {
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
  .rv[data-d="1"] { --d: 1; } .rv[data-d="2"] { --d: 2; } .rv[data-d="3"] { --d: 3; } .rv[data-d="4"] { --d: 4; }
  .rv.in { opacity: 1; transform: none; }
  @keyframes spin { to { --a: 360deg; } }
  @keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(255 79 46 / .7); } 80%, 100% { box-shadow: 0 0 0 12px rgb(255 79 46 / 0); } }
  @keyframes sweep { from { rotate: -14deg; } to { rotate: 14deg; } }
  @keyframes blink { 50% { opacity: .25; } }
  @keyframes roll { from { transform: translateY(-40%); opacity: 0; filter: blur(4px); } }
  @keyframes bob { 50% { transform: translateY(-8px); } }
  @keyframes glowpulse { 50% { opacity: .55; } }
  @keyframes marquee { to { transform: translateX(-50%); } }
  @keyframes feedin { from { opacity: 0; transform: translateY(10px); } }
  @keyframes glitch {
    0%, 91%, 100% { text-shadow: 0 0 40px rgb(255 120 60 / .25); transform: none; }
    92% { text-shadow: -4px 0 rgb(41 227 255 / .8), 4px 0 rgb(255 79 46 / .8); transform: translateX(3px) skewX(-6deg); }
    94% { text-shadow: 3px 0 rgb(176 124 255 / .8), -3px 0 rgb(47 230 154 / .8); transform: translateX(-4px); }
    96% { text-shadow: -2px 0 rgb(255 200 61 / .8), 2px 0 rgb(41 227 255 / .8); transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .rv { opacity: 1; transform: none; }
    .board { --tilt: 0deg !important; --sc: 1 !important; }
  }
}