/* ==========================================================================
   Arenyze — theme

   The hub of the network: one account and the trackers for every game. Same
   network core as THE FINALS (ui.css), the Arenyze skin: the rank-gem gold on
   near-black with an ember orange as a second voice, cut corners like the
   trackers, hexagon markers from the gem, and a mosaic of the network's games
   (THE FINALS, Arknights: Endfield, Rainbow Six) in gold behind the top of
   every page.
   ========================================================================== */
@layer tokens {
  :root {
    --acc: #f5a623;
    --acc-hi: #ffc04d;
    --acc-lo: #d9831a;
    --acc-ink: #170f02;
    --acc-rgb: 245 166 35;
    --hi: #ff6b35;
    --hi-ink: #1a0802;

    --display-stretch: 110%;
    --num-stretch: 72%;
    --cut: 11px;

    --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    --lean: polygon(6px 0, 100% 0, calc(100% - 6px) 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 trackers' menus. */
  .panel, .kpi { --panel-shape: var(--cut-tr); }
  .kpi { clip-path: var(--cut-tr); }
  .panel.is-round, .modal-panel .panel { --panel-shape: none; }

  /* Primary actions: gold plates with dark ink, two corners cut. */
  .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)); }
  .btn-primary { box-shadow: 0 8px 24px -14px rgb(var(--acc-rgb) / .9); }

  /* Headings stand square; markers are the gem's hexagon. */
  .phead-title, .lt-title, .hero-title { font-style: normal; }
  .lt-title::before { width: 12px; height: 11px; border-radius: 0; background: var(--acc); clip-path: var(--hex); box-shadow: none; }
  .eyebrow { color: var(--acc); }
  .eyebrow::before { width: 11px; height: 10px; border-radius: 0; background: var(--acc); clip-path: var(--hex); }

  .tag-new, .tag-pro, .live { border-radius: 0; clip-path: var(--lean); padding-inline: 8px; }

  .pos.p1, .pos.is-1 { background: linear-gradient(160deg, #fff1c9, var(--acc) 55%, #b86b0c); color: var(--acc-ink); box-shadow: 0 0 18px -4px var(--acc); }

  /* Tile accent: a short gold-to-ember edge on the cut corner. */
  .kpi::after { content: ''; position: absolute; top: -1px; left: calc(100% - var(--cut)); width: calc(var(--cut) * 1.5); height: 3px; background: linear-gradient(90deg, var(--acc), var(--hi)); transform-origin: left top; transform: rotate(45deg); }
  .kpi.no-cut::after { display: none; }

  .hdr-link.is-active::after { box-shadow: 0 0 14px rgb(var(--acc-rgb) / .55); }
  ::selection { background: rgb(var(--acc-rgb) / .3); color: #fff; }

  /* Brand: the gem and a two-line wordmark. */
  .brand .brand-mark { width: 34px; height: 34px; flex: none; }

  /* Head lights: gold from the top right, a little ember on the left. */
  body > main { position: relative; isolation: isolate; }
  body > main::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 480px; z-index: -1; pointer-events: none;
    background:
      radial-gradient(42% 80% at 86% -12%, rgb(var(--acc-rgb) / .16), transparent 70%),
      radial-gradient(28% 60% at 58% -20%, color-mix(in srgb, var(--hi) 8%, transparent), transparent 70%),
      radial-gradient(32% 60% at 0% -10%, rgb(var(--acc-rgb) / .06), transparent 70%),
      var(--stripes);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent);
  }

  /* Page art: the network's games in gold, melted into the page from the left
     and from below. One per page (set on .page-<name> in pages.css). */
  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, 100%) 0 / auto 400px repeat-x;
    opacity: .34;
    -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;
  }
  @media (max-width: 720px) { body > main::after { height: 260px; background-size: auto 280px; opacity: .28; } }
}