/* ═══════════════════════════════════════════════════════════════════════════
   LEAGUE OF LEGENDS — the game identity
   ───────────────────────────────────────────────────────────────────────────
   core.css is byte-identical to the Valorant build. This file is the only
   difference between the two dashboards, which is the point: one product, two
   characters.

   RICHER AND MORE ATMOSPHERIC THAN VALORANT (§3), and deliberately stopping
   well short of a fantasy website. What that means concretely:

     · a blue-black ground rather than Valorant's neutral near-black
     · gold as the accent, because gold is the game's own language for rank
     · softer radii and a slower ease — Valorant is sharp, the Rift is heavier
     · one faint hextech glow at the top, no runes, no parchment, no serif
     · numbers stay on the same grotesque and the same tabular figures

   §3 is explicit that the information must remain highly readable, so the
   atmosphere is confined to the page ground and the panel edges. Nothing that
   carries a statistic is decorated.

   ── THE GOLD PROBLEM ─────────────────────────────────────────────────────
   Gold at its brand value (#c8aa6e) is only 7.3:1 on the dark ground but a
   hopeless 2.1:1 on white — and it is the accent, so it carries the active tab
   label, the headline figure and every "best" mark. The light theme therefore
   uses a deepened bronze instead. The identity survives; the contrast is legal.
   ═══════════════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  --bg:        #080b12;
  --bg-blur:   rgba(8, 11, 18, .84);
  --surface:   #101725;
  --sunk:      #0c121d;
  --raised:    #18202f;
  --line:      #1d2739;
  --line-2:    #2d3a51;

  --ink:       #e8edf7;
  --ink-2:     #a6b4cb;
  --ink-3:     #8797b0;

  /* hextech gold. Interaction and rank, never a result. */
  --accent:      #d4af6a;
  --accent-soft: rgba(212, 175, 106, .14);
  --accent-line: rgba(212, 175, 106, .40);
  --on-accent:   #14100a;

  /* Wins take the game's own teal rather than a generic green; losses stay
     quiet grey, exactly as in the Valorant build — colouring both ends makes
     a board of numbers shout. */
  --win:      #35c9b0;
  --win-soft: rgba(53, 201, 176, .14);
  --win-line: rgba(53, 201, 176, .34);
  --bad:      #e0687d;

  --shimmer: rgba(255, 255, 255, .055);
  --shadow:   0 1px 2px rgba(0, 0, 0, .45), 0 14px 34px -22px rgba(0, 0, 0, .92);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .5),  0 28px 58px -26px rgba(0, 0, 0, 1);

  /* the rank ramp, iron through challenger, read off the in-game crests */
  --t-iron: #6b6a67;      --t-bronze: #a9714b;   --t-silver: #9aacb6;
  --t-gold: #e0b352;      --t-plat: #4bb9a6;     --t-emerald: #3fae63;
  --t-diamond: #6f8ce8;   --t-master: #b569d4;   --t-grandmaster: #e05a5a;
  --t-challenger: #f2d580;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:        #f2f4f8;
  --bg-blur:   rgba(242, 244, 248, .86);
  --surface:   #ffffff;
  --sunk:      #edf0f6;
  --raised:    #e5eaf2;
  --line:      #dce2ec;
  --line-2:    #bdc7d7;

  --ink:       #0d131d;
  --ink-2:     #46556b;
  --ink-3:     #5a687e;

  /* Brand gold is 2.1:1 on white — unusable for the role it carries here.
     Deepened to a bronze that keeps the family and clears AA. */
  --accent:      #8a6414;
  --accent-soft: rgba(138, 100, 20, .10);
  --accent-line: rgba(138, 100, 20, .34);
  --on-accent:   #ffffff;

  --win:      #0b7d68;
  --win-soft: rgba(11, 125, 104, .11);
  --win-line: rgba(11, 125, 104, .3);
  --bad:      #bb3448;

  --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: #6f6e6a;      --t-bronze: #8a5730;   --t-silver: #6d7c87;
  --t-gold: #94721a;      --t-plat: #157f70;     --t-emerald: #1c7a3f;
  --t-diamond: #4059b8;   --t-master: #8437a3;   --t-grandmaster: #b03434;
  --t-challenger: #8a7420;

  color-scheme: light;
}

/* The atmosphere: a single wide glow at the top and a very faint vertical
   banding, like light through a window. No texture anywhere a number sits. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(76% 40% at 50% -10%, var(--accent-soft), transparent 70%),
    radial-gradient(40% 30% at 12% 4%, rgba(79, 125, 220, .10), transparent 66%),
    repeating-linear-gradient(90deg,
      transparent 0 62px,
      color-mix(in srgb, var(--ink) 1.2%, transparent) 62px 63px);
  opacity: .6;
}
[data-theme="light"] body::before { opacity: .4; }
/* 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; }

/* Softer than Valorant's angular build — the Rift is heavier, not sharper. */
:root { --r: 15px; --r-sm: 10px; --r-xs: 6px; --ease-out: cubic-bezier(.2, .9, .3, 1); }
[data-density="compact"] { --r: 12px; --r-sm: 8px; }

/* No clipped corner here. Instead the rank colour runs the full left edge of a
   card — the vertical crest bar the client itself uses. */
.pcard::before {
  inset: 0 auto 0 0; height: auto; width: 3px;
  background: var(--card-edge, transparent);
}
.pcard { padding-left: calc(var(--pad) + 4px); }

.brand .mark { filter: drop-shadow(0 0 10px var(--accent-soft)); }
.brand .mark path { fill: var(--accent); }
.brand h1 { font-weight: 700; letter-spacing: .17em; }

/* A hairline of gold along the top of every panel — the only ornament. */
.panel, .summary, .matches, .tablewrap {
  background-image: linear-gradient(var(--accent-line), transparent 1px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.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-emerald     { --tier: var(--t-emerald); }
.t-diamond     { --tier: var(--t-diamond); }
.t-master      { --tier: var(--t-master); }
.t-grandmaster { --tier: var(--t-grandmaster); }
.t-challenger  { --tier: var(--t-challenger); }
.t-unranked    { --tier: var(--line-2); }
.pcard { --card-edge: var(--tier, transparent); }
.tierdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tier, var(--line-2)); flex: none; }
.tiertext { color: var(--tier, var(--ink-2)); }

/* Champion portraits are square with a hard crop; round them a touch so they
   do not fight the softer geometry. */
.match .agent img, .av img { border-radius: inherit; }