/* ==========================================================================
   Rainbow Six Siege — theme

   Attack and defense: the network core (ui.css) in R6 Arenyze's skin. Breach
   orange is the voice, defender blue the second one; panels lose a corner
   like the in-game menus, headings lean a little, section markers carry both
   sides, and the maps — in orange — sit behind the top of every page.
   ========================================================================== */
@layer tokens {
  :root {
    --acc: #ff8a3d;
    --acc-hi: #ffa766;
    --acc-lo: #e46a1c;
    --acc-ink: #1d0c02;
    --acc-rgb: 255 138 61;
    --hi: #4aa3ff;
    --hi-ink: #031225;

    --cut: 11px;

    --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)));
    /* No oblique lines anywhere: only the faded page art. */
    --stripes: linear-gradient(#0000, #0000);

    /* Three clear steps: the page, the cards on it, and the rows / tiles
       inside a card — each one visibly lighter, so nothing sits black on
       black and the 2px gaps between tiles read as dividers. */
    --bg: #0b0b0f;
    --bg-2: #101015;
    --s1: #17181e;
    --s2: #1f2028;
    --s3: #282a33;
    --s4: #32343e;
    --s5: #3d404b;
    --row: #1f2028;
    --row-alt: #23252d;
    --row-hover: #2a2c36;
    --band: #22232b;
    --line: #ffffff17;
    --line-2: #ffffff26;
    --line-3: #ffffff3a;
    --glass: #131419e8;
    --ink: #ececf1;
    --ink-2: #c9c9d3;
    --ink-3: #a0a0ae;
    --ink-4: #7c7c8a;

    /* Display type a little narrower and calmer than THE FINALS' — closer
       to the condensed titles the site had. */
    --display-stretch: 92%;
    --num-stretch: 72%;
  }
}

@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; }

  /* Primary actions: breach-orange plates, 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 lean like the game's titles; markers show both sides. */
  .phead-title, .lt-title, .hero-title { font-style: normal; }
  .phead-title, .phead h1:not(.phead-title) { transform: skewX(-5deg); transform-origin: left bottom; }
  .lt-title::before { width: 12px; height: 12px; border-radius: 0; box-shadow: none;
    background: linear-gradient(135deg, var(--acc) 0 50%, var(--hi) 50% 100%); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
  .eyebrow { color: var(--acc); }
  .eyebrow::before { width: 14px; height: 10px; border-radius: 0; background: linear-gradient(90deg, var(--acc) 0 55%, var(--hi) 55% 100%); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }

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

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

  /* Tile accent: an orange-to-blue 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 img { width: 34px; height: 34px; border-radius: 8px; flex: none; }

  /* Head lights: orange from the top right, a breath of blue 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(30% 60% at 4% -14%, color-mix(in srgb, var(--hi) 9%, transparent), transparent 70%),
      var(--stripes);
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent);
  }

  /* Page art: R6 maps in orange, melted into the page from the left and from
     below. One per page (set on body[data-r6-page] 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: .3;
    -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: .26; } }
}