/* ==========================================================================
   THE FINALS — theme

   The game is a televised game show: sponsors, a studio, cashouts, a crowd.
   The network core stays the same; this file gives it the broadcast skin —
   hot red on black, the cashout yellow as a second voice, wide display type,
   leaning tags, corners cut like the arena's menus, and stage light behind
   the top of every page.
   ========================================================================== */
@layer tokens {
  :root {
    --acc: #ff2f5c;
    --acc-hi: #ff6585;
    --acc-lo: #d81645;
    --acc-ink: #ffffff;
    --acc-rgb: 255 47 92;
    --hi: #ffd23a;
    --hi-ink: #1a1405;

    --display-stretch: 118%;
    --num-stretch: 70%;
    --cut: 12px;

    --lean: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    --cut-tr: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    --cut-bl: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
    --stripes: repeating-linear-gradient(-60deg, transparent 0 18px, #ffffff05 18px 19px);
  }
}

@layer components {
  /* Panels lose a corner, like the in-game menus. */
  .panel, .kpi { --panel-shape: var(--cut-tr); }
  .kpi { clip-path: var(--cut-tr); }
  .panel.is-round, .modal-panel .panel { --panel-shape: none; }

  /* The primary call to action is a ticket stub. */
  .btn-primary, .btn-hi { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); border-radius: 3px; }
  .btn-primary.btn-sm, .btn-hi.btn-sm { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }

  /* Headings lean into the camera. */
  .phead-title, .lt-title, .hero-title { font-style: normal; }
  .phead-title { transform: skewX(-6deg); transform-origin: left bottom; }
  .lt-title::before { width: 12px; height: 14px; border-radius: 0; clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); box-shadow: none; }
  .eyebrow::before { width: 14px; height: 10px; clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }

  /* Tags are slanted sponsor plates. */
  .tag-new, .tag-pro { border-radius: 0; clip-path: var(--lean); padding-inline: 8px; }
  .live { border-radius: 0; clip-path: var(--lean); padding-inline: 8px; }

  /* Podium in the cashout colours. */
  .pos.p1, .pos.is-1 { background: linear-gradient(160deg, #fff6c2, var(--hi) 55%, #d39a00); box-shadow: 0 0 20px -4px var(--hi); }

  /* Kpi accent edge: a thin red cut at the corner. */
  .kpi::after { content: ''; position: absolute; top: -1px; left: calc(100% - var(--cut)); width: calc(var(--cut) * 1.5); height: 3px; background: var(--acc); transform-origin: left top; transform: rotate(45deg); opacity: .95; }
  .kpi.no-cut::after { display: none; }
}

@layer components {
  /* THE FINALS arena backdrop, one for every page: anchored to the top of the page, same
     height and vanishing point everywhere; page heads stay transparent. */
  .phead::before, .phead::after, .phead[style*="--art"]::before, .phead[style*="--art"]::after { content: none; }
  body > main::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 480px; z-index: -1; pointer-events: none; opacity: 1;
    background:
      radial-gradient(26% 55% at var(--sweep, 70%) 40%, rgb(var(--acc-rgb) / .10), transparent 70%),
      radial-gradient(42% 80% at 86% -12%, rgb(var(--acc-rgb) / .26), transparent 70%),
      radial-gradient(28% 60% at 60% -20%, color-mix(in srgb, var(--hi) 9%, transparent), transparent 70%),
      radial-gradient(32% 60% at 0% -10%, rgb(var(--acc-rgb) / .12), transparent 70%),
      url('/assets/images/arena-floor-soft.svg?v=2') 70% 100% / max(1600px, 110%) 420px no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent), linear-gradient(90deg, #0004 0%, #0008 35%, #000 65%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 45%, transparent), linear-gradient(90deg, #0004 0%, #0008 35%, #000 65%); mask-composite: intersect;
    animation: phead-sweep 14s ease-in-out infinite alternate;
  }
  @media (prefers-reduced-motion: reduce) { body > main::before { animation: none; } }
  @media (max-width: 720px) { body > main::before { height: 380px; background-size: auto, auto, auto, auto, 900px 300px; } }
}
@layer components {
  /* The canvas floor replaces the static grid image; lights stay in CSS. */
  .arena-floor { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 480px; z-index: -1; pointer-events: none; display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent), linear-gradient(90deg, #0005 0%, #0009 35%, #000 65%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 50%, transparent), linear-gradient(90deg, #0005 0%, #0009 35%, #000 65%); mask-composite: intersect; }
  .hero-bg > .arena-floor { top: auto; bottom: 0; height: 75%; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 30%, #000 70%, transparent 100%); }
  .hero-bg .floor { display: none; }
  body > main::before { background:
      radial-gradient(26% 55% at var(--sweep, 70%) 40%, rgb(var(--acc-rgb) / .08), transparent 70%),
      radial-gradient(42% 80% at 86% -12%, rgb(var(--acc-rgb) / .24), transparent 70%),
      radial-gradient(28% 60% at 60% -20%, color-mix(in srgb, var(--hi) 9%, transparent), transparent 70%),
      radial-gradient(32% 60% at 0% -10%, rgb(var(--acc-rgb) / .12), transparent 70%); }
  @media (max-width: 720px) { .arena-floor { height: 360px; } }
}
@layer components { .hero-bg > .arena-floor { z-index: 0; } .hero-bg::after { z-index: 1; } }
@layer components {
  /* The floor ends just above the tab row and melts into the page there, so
     the tabs sit on a calm band of their own. */
  body > main > .arena-floor {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%), linear-gradient(90deg, #0005 0%, #0009 35%, #000 65%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%), linear-gradient(90deg, #0005 0%, #0009 35%, #000 65%);
  }
  .phead .tabs { border-bottom: 1px solid var(--line-3); }
  .phead .tab { color: var(--ink-2); }
  .phead .tab .i { color: var(--ink-3); }
}

@layer components {
  /* Page art: every page opens on a contestant from the rank covers, toned in
     the site red and melted into the page from the left and from below. */
  body > main::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 380px; z-index: -2; pointer-events: none;
    background: var(--page-art, none) var(--art-x, 85%) 18% / auto calc(var(--art-h, 560px) * .7) no-repeat;
    opacity: .42;
    -webkit-mask-image: linear-gradient(180deg, #000 15%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 15%, #0005 45%, #000 78%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 15%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 15%, #0005 45%, #000 78%);
    mask-composite: intersect;
    animation: art-in 1.2s var(--ease-out) both;
  }
  @keyframes art-in { from { opacity: 0; transform: scale(1.03); } }
  .page-player > main::after { display: none; }
  @media (max-width: 720px) { body > main::after { height: 260px; background-size: auto 280px; background-position: 78% 0; opacity: .4; } }
  .page-home { --page-art: url("/assets/bg/gold.webp?v=1"); --art-x: 100%; --art-size: cover; --art-h: 560px; }
  .page-lb { --page-art: url("/assets/bg/platinum.webp?v=1"); --art-x: 85%; --art-size: 1900px; --art-h: 551px; }
  .page-leaderboards { --page-art: url("/assets/bg/platinum.webp?v=1"); --art-x: 100%; --art-size: cover; --art-h: 560px; }
  .page-movers { --page-art: url("/assets/bg/silver.webp?v=1"); --art-x: 80%; --art-size: 1800px; --art-h: 522px; }
  .page-clubs { --page-art: url("/assets/bg/diamond.webp?v=1"); --art-x: 90%; --art-size: 1900px; --art-h: 551px; }
  .page-club { --page-art: url("/assets/bg/diamond.webp?v=1"); --art-x: 70%; --art-size: 2300px; --art-h: 667px; }
  .page-seasons { --page-art: url("/assets/bg/bronze.webp?v=1"); --art-x: 85%; --art-size: 1900px; --art-h: 551px; }
  .page-season { --page-art: url("/assets/bg/bronze.webp?v=1"); --art-x: 65%; --art-size: 2400px; --art-h: 696px; }
  .page-hall-of-fame { --page-art: url("/assets/bg/ruby.webp?v=1"); --art-x: 80%; --art-size: 1900px; --art-h: 551px; }
  .page-badges { --page-art: url("/assets/bg/gold.webp?v=1"); --art-x: 80%; --art-size: 2100px; --art-h: 609px; }
  .page-frames { --page-art: url("/assets/bg/gold.webp?v=1"); --art-x: 60%; --art-size: 2600px; --art-h: 754px; }
  .page-ranks { --page-art: url("/assets/bg/platinum.webp?v=1"); --art-x: 60%; --art-size: 2500px; --art-h: 725px; }
  .page-players { --page-art: url("/assets/bg/unranked.webp?v=1"); --art-x: 80%; --art-size: 1900px; --art-h: 551px; }
  .page-search { --page-art: url("/assets/bg/unranked.webp?v=1"); --art-x: 95%; --art-size: 1700px; --art-h: 520px; }
  .page-compare { --page-art: url("/assets/bg/silver.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-lfg { --page-art: url("/assets/bg/diamond.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-widgets { --page-art: url("/assets/bg/bronze.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-thefinals-overlay { --page-art: url("/assets/bg/bronze.webp?v=1"); --art-x: 70%; --art-size: 2200px; --art-h: 638px; }
  .page-wrapped { --page-art: url("/assets/bg/ruby.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-loadouts { --page-art: url("/assets/bg/gold.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-banned { --page-art: url("/assets/bg/unranked.webp?v=1"); --art-x: 60%; --art-size: 2300px; --art-h: 667px; }
  .page-matches { --page-art: url("/assets/bg/silver.webp?v=1"); --art-x: 60%; --art-size: 2300px; --art-h: 667px; }
  .page-match { --page-art: url("/assets/bg/silver.webp?v=1"); --art-x: 90%; --art-size: 2000px; --art-h: 580px; }
  .page-items { --page-art: url("/assets/bg/diamond.webp?v=1"); --art-x: 60%; --art-size: 2400px; --art-h: 696px; }
  .page-about { --page-art: url("/assets/bg/ruby.webp?v=1"); --art-x: 60%; --art-size: 2400px; --art-h: 696px; }
  .page-privacy { --page-art: url("/assets/bg/unranked.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .page-404 { --page-art: url("/assets/bg/ruby.webp?v=1"); --art-x: 100%; --art-size: 1700px; --art-h: 520px; }
  .arena-floor { display: none; }
}
@layer components {
  /* Home: the art sits behind the hero; the hero keeps only its lights. */
  .page-home > main::after { height: 560px; opacity: .45; }
  .page-home .hero-bg::before { background: radial-gradient(50% 60% at 30% 0%, rgb(var(--acc-rgb) / .18), transparent 70%); }
  .page-home .hero-bg::after { display: none; }
  .hero-bg .beam { opacity: .25; }
}
@layer components {
  /* Home: the art covers the whole hero band from the navbar down */
  .page-home { --page-art: url("/assets/bg/platinum.webp?v=1"); }
  .page-home > main::after { height: 640px; opacity: .5; background-position: 70% 0; background-size: max(1700px, 118%) auto;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, #0004 0%, #0008 35%, #000 70%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%), linear-gradient(90deg, #0004 0%, #0008 35%, #000 70%); }
  @media (max-width: 720px) { .page-home > main::after { height: 420px; background-size: auto 420px; } }
}
@layer components { .page-home > main::after { background-size: cover; background-position: 62% 30%; } @media (max-width: 720px) { .page-home > main::after { background-size: cover; } } }
@layer components {
  /* Home art placed like the other pages: anchored to the top, then melting
     away before the stat strip. */
  .page-home > main::after { height: 520px; background-size: auto 620px; background-position: 72% 0; opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, #0008 60%, transparent 95%), linear-gradient(90deg, #0004 0%, #0008 35%, #000 70%);
    mask-image: linear-gradient(180deg, #000 30%, #0008 60%, transparent 95%), linear-gradient(90deg, #0004 0%, #0008 35%, #000 70%); }
  @media (max-width: 720px) { .page-home > main::after { height: 380px; background-size: auto 420px; background-position: 70% 0; } }
}