/* ═══════════════════════════════════════════════════════════════════════════
   VALORANT — the game identity
   ───────────────────────────────────────────────────────────────────────────
   core.css is the product. This file is the only thing that makes it Valorant:
   palette, edge treatment, texture, and the small geometric marks. Swapping
   this file for league.css gives the same application a different character
   without touching a single component.

   TACTICAL, SHARP, MINIMAL (§3). Tighter radii than the framework default,
   hairline rules, a single red accent used sparingly, and one faint diagonal
   scan in the background — no neon, no glow on text, no glass stacked on glass.

   ── THE RED PROBLEM, and how it is resolved ──────────────────────────────
   Valorant's brand colour is red, and red is also the obvious colour for a
   loss. Using it for both makes every losing row shout the brand at you and
   makes the accent meaningless.

   So: red is reserved for BRAND AND INTERACTION — the active tab, the primary
   figure, a leader. Results use teal for a win and DELIBERATE GREY for a loss.
   A loss is not a failure state to be alarmed about; it is the other half of a
   win rate. Red returns only for a genuinely negative delta, where it is rare
   enough to mean something. Every result also carries its W/L letter, so none
   of this depends on colour at all (§48).
   ═══════════════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  --bg:        #0a0d12;
  --bg-blur:   rgba(10, 13, 18, .82);
  --surface:   #11161d;
  --sunk:      #0d1218;
  --raised:    #1a212b;
  --line:      #1e2732;
  --line-2:    #2e3a49;

  --ink:       #e9eef6;
  --ink-2:     #a6b3c4;
  --ink-3:     #8595a8;

  --accent:      #ff4655;          /* the brand. interaction only. */
  --accent-soft: rgba(255, 70, 85, .13);
  --accent-line: rgba(255, 70, 85, .40);
  /* NOT white: white on this red is 3.36:1, under AA, and it is the active
     tab's label. Near-black on the same red is 5.93:1 and keeps the brand. */
  --on-accent:   #1a0206;

  --win:      #2fd8a4;
  --win-soft: rgba(47, 216, 164, .14);
  --win-line: rgba(47, 216, 164, .34);
  --bad:      #ff6b78;             /* negative deltas only, never a loss row */

  --shimmer: rgba(255, 255, 255, .055);
  --shadow:   0 1px 2px rgba(0, 0, 0, .45), 0 14px 32px -22px rgba(0, 0, 0, .9);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .5),  0 26px 54px -26px rgba(0, 0, 0, 1);

  /* the rank ramp — iron through radiant, used for card edges and the
     leaderboard's rank column. Read off the in-game tier colours. */
  --t-iron: #5c6672;  --t-bronze: #9a7b52;  --t-silver: #c6ced6;
  --t-gold: #e3c04d;  --t-plat: #4cc4d6;    --t-diamond: #b06ee0;
  --t-asc: #2f9e63;   --t-immortal: #d4353f; --t-radiant: #fff5b8;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:        #f3f5f8;
  --bg-blur:   rgba(243, 245, 248, .85);
  --surface:   #ffffff;
  --sunk:      #eef1f6;
  --raised:    #e7ecf3;
  --line:      #dde3ec;
  --line-2:    #bfc9d8;

  --ink:       #0e141c;
  --ink-2:     #47566a;
  --ink-3:     #5b6a7e;

  /* The brand red fails on white at its display value — 3.4:1 against #fff,
     under AA for the text and label roles it carries. Darkened for the light
     theme only; the identity survives, the contrast is legal. */
  --accent:      #d0212f;
  --accent-soft: rgba(208, 33, 47, .09);
  --accent-line: rgba(208, 33, 47, .34);
  --on-accent:   #ffffff;

  /* darkened from #0f8f68, which was 4.08:1 on a white panel */
  --win:      #0c7d5b;
  --win-soft: rgba(12, 125, 91, .11);
  --win-line: rgba(12, 125, 91, .3);
  --bad:      #c0392f;

  --shimmer: rgba(15, 25, 45, .05);
  --shadow:   0 1px 2px rgba(18, 28, 45, .06), 0 10px 26px -18px rgba(18, 28, 45, .3);
  --shadow-2: 0 2px 6px rgba(18, 28, 45, .09), 0 26px 52px -26px rgba(18, 28, 45, .4);

  --t-iron: #6b7684;  --t-bronze: #8a6a40;  --t-silver: #8e99a5;
  --t-gold: #a8891f;  --t-plat: #1f8fa3;    --t-diamond: #8244b5;
  --t-asc: #1c7a4a;   --t-immortal: #b3202a; --t-radiant: #97862f;

  color-scheme: light;
}

/* One faint diagonal scan across the page — the entire "futuristic" budget.
   Fixed so it never scrolls, and far too quiet to compete with a number. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(62% 44% at 50% -8%, var(--accent-soft), transparent 68%),
    repeating-linear-gradient(115deg,
      transparent 0 3px,
      color-mix(in srgb, var(--ink) 1.5%, transparent) 3px 4px);
  opacity: .55;
}
[data-theme="light"] body::before { opacity: .38; }
/* ONLY .shell. It is the one unpositioned element here, and a z-index needs a
   positioned box to apply to. The others — .top (sticky), .mobnav (fixed),
   .tip (fixed), .menu (absolute) — are positioned by core.css and already sit
   above the texture on their own z-index. Including them in this rule reset
   `position` to relative and broke all four: the header stopped sticking, the
   mobile bar scrolled away with the page, and the tooltip and the preferences
   menu lost their anchoring. */
.shell { position: relative; z-index: 1; }

/* Sharper than the framework default: Valorant is angular. */
:root { --r: 10px; --r-sm: 7px; --r-xs: 4px; }
[data-density="compact"] { --r: 8px; --r-sm: 6px; }

/* A clipped corner on the player card — one geometric mark, not a theme. */
.pcard {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}
[data-density="compact"] .pcard { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }

.brand .mark path { fill: var(--accent); }
.brand h1 { font-weight: 800; }

/* the rank ramp as utility classes, applied by the renderer */
.t-iron     { --tier: var(--t-iron); }
.t-bronze   { --tier: var(--t-bronze); }
.t-silver   { --tier: var(--t-silver); }
.t-gold     { --tier: var(--t-gold); }
.t-platinum { --tier: var(--t-plat); }
.t-diamond  { --tier: var(--t-diamond); }
.t-ascendant{ --tier: var(--t-asc); }
.t-immortal { --tier: var(--t-immortal); }
.t-radiant  { --tier: var(--t-radiant); }
.t-unranked { --tier: var(--line-2); }
.pcard { --card-edge: var(--tier, transparent); }
.tierdot { width: 7px; height: 7px; border-radius: 2px; background: var(--tier, var(--line-2)); flex: none; }
.tiertext { color: var(--tier, var(--ink-2)); }