/* Rainbow Six tracker — page styles on top of the core and theme: the header
   bits that are R6's own (player search, overlay button, notification tabs),
   the page art per page, then each page's blocks. */

/* ---- header -------------------------------------------------------------- */
@layer components {
  .nt-tabs { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); }
  .nt-tabs button { position: relative; padding: 8px 10px 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; transition: color var(--t-fast); }
  .nt-tabs button:hover { color: var(--ink); }
  .nt-tabs button[aria-selected="true"] { color: var(--ink); }
  .nt-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--acc); }
  .acct-noti[data-kind="usage"] { --nk: var(--acc); }
  .acct-noti[data-kind="reply"] { --nk: var(--hi); }
  .acct-noti[data-kind="ban"] { --nk: var(--down, #ff5d6c); }
  .acct-noti[data-kind="rank"] { --nk: #f5c400; }
  .acct-noti[data-kind="status"] { --nk: #6aa8ff; }
}

/* ---- page art: one map mosaic per page, neighbours never share one ------ */
@layer components {
  body { --page-art: url("/ui/bg/maps-0.webp?v=2"); }
  body[data-r6-page="index"] { --page-art: url("/ui/bg/maps-0.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="stats"] { --page-art: url("/ui/bg/maps-1.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="search"] { --page-art: url("/ui/bg/maps-2.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="operators"] { --page-art: url("/ui/bg/maps-3.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="maps"] { --page-art: url("/ui/bg/maps-4.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="weapons"] { --page-art: url("/ui/bg/maps-5.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="gadgets"] { --page-art: url("/ui/bg/maps-6.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="attachments"] { --page-art: url("/ui/bg/maps-7.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="skins"] { --page-art: url("/ui/bg/maps-8.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="charms"] { --page-art: url("/ui/bg/maps-9.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="ranks"] { --page-art: url("/ui/bg/maps-10.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="seasons"] { --page-art: url("/ui/bg/maps-11.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="bans"] { --page-art: url("/ui/bg/maps-12.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="r6-arenyze-game"] { --page-art: url("/ui/bg/maps-13.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="streaming-widget"] { --page-art: url("/ui/bg/maps-14.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="discord"] { --page-art: url("/ui/bg/maps-15.webp?v=2"); --art-x: 100%; }
  body[data-r6-page="team-builder"] { --page-art: url("/ui/bg/maps-0.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="contact"] { --page-art: url("/ui/bg/maps-1.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="status"] { --page-art: url("/ui/bg/maps-2.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="live-server-globe"] { --page-art: url("/ui/bg/maps-3.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="player-count"] { --page-art: url("/ui/bg/maps-4.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="pricing"] { --page-art: url("/ui/bg/maps-5.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="api-docs"] { --page-art: url("/ui/bg/maps-6.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="r6-data-js"] { --page-art: url("/ui/bg/maps-7.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="r6-overlay"] { --page-art: url("/ui/bg/maps-8.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="r6-streaming-widget"] { --page-art: url("/ui/bg/maps-9.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="r6-replay-viewer"] { --page-art: url("/ui/bg/maps-10.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="replay-viewer"] { --page-art: url("/ui/bg/maps-11.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="game-summary"] { --page-art: url("/ui/bg/maps-12.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="support"] { --page-art: url("/ui/bg/maps-13.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="support-new"] { --page-art: url("/ui/bg/maps-14.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="support-topic"] { --page-art: url("/ui/bg/maps-15.webp?v=2"); --art-x: 70%; }
  body[data-r6-page="support-user"] { --page-art: url("/ui/bg/maps-0.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="privacy"] { --page-art: url("/ui/bg/maps-1.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="terms"] { --page-art: url("/ui/bg/maps-2.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="login"] { --page-art: url("/ui/bg/maps-3.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="register"] { --page-art: url("/ui/bg/maps-4.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="forgot-password"] { --page-art: url("/ui/bg/maps-5.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="resetpassword"] { --page-art: url("/ui/bg/maps-6.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="changeusername"] { --page-art: url("/ui/bg/maps-7.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="verify-email"] { --page-art: url("/ui/bg/maps-8.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="dashboard"] { --page-art: url("/ui/bg/maps-9.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="maintenance"] { --page-art: url("/ui/bg/maps-10.webp?v=2"); --art-x: 40%; }
  body[data-r6-page="r6data-game"] { --page-art: url("/ui/bg/maps-11.webp?v=2"); --art-x: 40%; }
}

/* ---- page heads: the shared banner (js/components/pageHeader.js) --------- */
@layer components {
  /* The banner's own art steps aside: the page art behind main is the one picture. */
  .banner { position: relative; padding-block: 34px 22px; background: none; border: 0; box-shadow: none; }
  .banner::before, .banner::after { content: none; }
  .banner-inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
  .banner-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 12px; }
  .banner h1 { display: flex; align-items: center; gap: 12px; margin: 0; font: 850 clamp(30px, 4.4vw, 52px)/.95 var(--f-display); font-stretch: var(--display-stretch);
    letter-spacing: -.01em; text-transform: uppercase; color: var(--ink); transform: skewX(-5deg); transform-origin: left bottom; }
  .banner h1 mark { background: none; color: var(--acc); padding: 0; }
  .banner h1 .banner-ic { display: none; }
  .banner-lead { margin-top: 12px; max-width: 680px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
  .banner-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
  .banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .banner-inner.has-tabs > .tabs, .banner-inner > .tabs { margin-top: 22px; }

  /* Form fields with a label above the control. */
  .field:has(> label), .field:has(> .field-label) { flex-direction: column; align-items: stretch; gap: 7px; }
  .field > label, .field-label { text-align: left; font: 600 12.5px/1.2 var(--f-ui); color: var(--ink-2); }

  /* Section titles on the old markup take the two-sided marker of .lt-title. */
  .sec-title { align-items: center; }
  .sec-title::before { content: ''; width: 12px; height: 12px; border-radius: 0; flex: none; transform: none;
    background: linear-gradient(135deg, var(--acc) 0 50%, var(--hi) 50% 100%); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }

  /* Phones: a section title's note goes under it instead of beside it. */
  @media (max-width: 720px) {
    .lt-title { flex-wrap: wrap; row-gap: 6px; }
    .lt-title small { flex-basis: 100%; padding-left: 22px; }
  }
}

/* ---- stat tiles on the page scripts' markup (.kpi-label / -value / -sub) --- */
@layer components {
  .kpi-label { display: flex; align-items: center; gap: 7px; font: 600 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
  .kpi-label .i { font-size: 14px; color: var(--acc); }
  .kpi-value { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 800 30px/1 var(--f-display); font-stretch: var(--num-stretch); font-variant-numeric: tabular-nums; letter-spacing: -.005em; white-space: nowrap; color: var(--ink); }
  .kpi-value small { font: 600 12px/1 var(--f-mono); color: var(--ink-3); letter-spacing: 0; }
  .kpi-value img { width: 30px; height: 30px; }
  .kpi-sub { margin-top: 7px; font-size: 12.5px; color: var(--ink-3); }
  .kpi-sub b { color: var(--ink-2); }
  .kpi-meter { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--s4); overflow: hidden; }
  .kpi-meter > * { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--acc), var(--hi)); }
}

/* ---- sign in / register / password pages ---------------------------------- */
@layer components {
  .page-auth .auth-wrap { width: min(420px, 100%); max-width: 420px; }
  .page-auth .auth-card { padding: 28px; }
  .page-auth .auth-head h1, .auth-title { transform: skewX(-5deg); }
}

/* ---- ligature icon spans (drawn by ui-core.js) ----------------------------- */
@layer components {
  .material-icons[data-i], .material-symbols-rounded[data-i], .msr[data-i] { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; line-height: 1; font-family: inherit; overflow: visible; flex: none; vertical-align: -.2em; }
  .material-icons[data-i] > .i, .material-symbols-rounded[data-i] > .i, .msr[data-i] > .i { width: 100%; height: 100%; vertical-align: 0; }
  .mi-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- phones: nothing widens the page --------------------------------------- */
@layer components {
  html, body { overflow-x: clip; }
  @media (max-width: 720px) {
    /* Long filter rows (seasons by year, …) scroll sideways instead of spilling. */
    .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
    .seg::-webkit-scrollbar { display: none; }
    .seg > * { flex: none; }
    main h2 { overflow-wrap: anywhere; }
  }
}

/* ---- inputs with a leading icon (.input-icon) ---------------------------- */
@layer components {
  .input-icon .input, .input-icon input { padding-left: 38px; }
}

/* ---- long labels inside tiles and rows ------------------------------------ */
@layer components {
  /* Text values (a map's location, its rework) wrap; figures never get long enough to. */
  .kpi-value { white-space: normal; overflow-wrap: anywhere; line-height: 1.05; }
  .pk-name small { display: block; overflow: hidden; text-overflow: ellipsis; }
}


/* ---- home ------------------------------------------------------------------ */
@layer components {
  /* "PlayStation" fits its platform box in the wider display face. */
  .no1 { container-type: inline-size; }
  .no1-name { font-size: min(22px, 9.5cqi); font-stretch: 90%; letter-spacing: 0; }
}
@layer components {
  @media (max-width: 720px) { .explore-item b { font-size: 1.05rem; overflow-wrap: anywhere; } }
}

/* ---- contrast and calmer type, site-wide ------------------------------------ */
@layer components {
  /* Every Archivo title sits on the narrower width unless a rule says otherwise
     (Geist, the text face, has no width axis: this changes nothing there). */
  :where(*) { font-stretch: 92%; }
  .lt-title, .tile b, .promo h2, .phead-title { font-stretch: 92%; }
  /* Uppercase display titles: a step less heavy. */
  .card-title, .sec-title, .tool-tile b, .explore-item b { font-weight: 750; letter-spacing: .01em; }



  /* Ranks: divisions on the row colour with hairline dividers; the cells a
     five-division tier leaves empty take the card's colour, not black. */
  .rk-divs { background: var(--s1); gap: 1px; }
  .rk-div { background: var(--row); }
  .rk-tier-head h2 { font-size: 1.55rem; font-stretch: 82%; white-space: nowrap; }
}

@layer components {
  /* A mouse click never leaves a focus ring; the keyboard still gets the orange one. */
  :focus:not(:focus-visible) { outline: none; }
  :focus-visible { outline-color: var(--acc); }
}

/* ---- service status --------------------------------------------------------- */
@layer components {
  /* Five platforms: one row of five on wide screens, never four plus one. */
  .r6-status-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  @media (max-width: 1240px) { .r6-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 860px) { .r6-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .r6-status-grid { grid-template-columns: minmax(0, 1fr); } }

  /* The globe card: centred, icon on top, the button under the copy. */
  .dev-strip .card-body { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 20px; }
  .dev-strip .dev-ic { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgb(var(--acc-rgb) / .12); color: var(--acc); }
  .dev-strip .dev-copy h2 { font: 750 18px/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
  .dev-strip .dev-copy p { margin-top: 4px; color: var(--ink-3); }
  .dev-strip .dev-actions { margin-top: 6px; }
}

/* The old sheet's element defaults (dropped with its other globals), at the
   bottom of the legacy layer: any page rule still wins over them. */
@layer legacy {
  :where(h1, h2, h3, h4) { font-weight: 700; line-height: 1.15; text-wrap: balance; }
  :where(h1) { font: 800 clamp(2.2rem, 4vw, 3.3rem)/.95 var(--f-display); font-stretch: 84%; letter-spacing: -.005em; text-transform: uppercase; }
  :where(h2) { font-size: 1.05rem; }
  :where(h3) { font-size: .95rem; }
  :where(strong, b) { font-weight: 600; color: var(--ink); }
}

/* Uppercase display titles: narrower, closer to the condensed face the site
   had, so they read as titles instead of shouting. */
@layer components {
  :where(*) { font-stretch: 84%; }
  .lt-title, .tile b, .promo h2, .phead-title, .hero-title span { font-stretch: 84%; }
  .gh-title, .banner h1, .promo-copy h2, .mini-title { font-stretch: 82%; font-weight: 800; letter-spacing: 0; }
}
@layer components {
  /* Status cards: the platform name and its chip each stay on one line. */
  .r6-status-card-head { gap: 8px; }
  .r6-status-card-title { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
  .r6-status-chip { white-space: nowrap; flex: none; padding-inline: 7px; font-size: .62rem; }
  .r6-status-chip .material-icons { font-size: 13px !important; }
}
@layer components {
  /* Five across leaves no room for the device glyph: the name keeps it. */
  @media (min-width: 1241px) { .r6-status-card-title > .material-icons { display: none; } .r6-status-card-title { font-stretch: 84%; } }
}
@layer components {
  .page-auth .auth-stage::before { background: radial-gradient(520px 300px at 50% 0%, rgb(var(--acc-rgb) / .1), transparent 70%); }
}

/* ---- replay viewer: the "Login required" dialog ---------------------------- */
@layer components {
  .auth-required-dialog.scoreboard-dialog.stats-modal { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--s1); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px -20px #000; overflow: hidden; }
  .auth-required-dialog::backdrop { background: #000b; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .auth-required-shell { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 28px 26px 24px; text-align: center; background: none; border: 0; }
  .auth-required-header.scoreboard-header { display: block; height: auto; padding: 0; margin: 0; background: none; border: 0; }
  .auth-required-header .scoreboard-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .auth-required-header .scoreboard-brand > .material-icons { width: 52px; height: 52px; padding: 13px; border-radius: 14px; background: rgb(var(--acc-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .25); color: var(--acc); transform: none; }
  .auth-required-header h2 { margin: 0; font: 800 22px/1.1 var(--f-display); font-stretch: 84%; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
  .auth-required-body { padding: 10px 0 0; color: var(--ink-3); font-size: 14px; line-height: 1.55; }
  .auth-required-body p { margin: 0; }
  /* Two equal buttons side by side: same height, same width, same shape. */
  .auth-required-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 22px; padding: 0; border: 0; background: none; }
  .auth-required-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; margin: 0;
    border-radius: var(--r); font: 650 14px/1 var(--f-ui); clip-path: none; box-shadow: none; transform: none; }
  .auth-required-actions > button .material-icons { font-size: 18px; }
  .auth-required-actions > .btn-secondary { background: var(--s3); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
  .auth-required-actions > .btn-secondary:hover { background: var(--s4); }
  .auth-required-actions > .btn-primary { background: var(--acc); color: var(--acc-ink); border: 0; }
  .auth-required-actions > .btn-primary:hover { background: var(--acc-hi); }
}
@layer components {
  .auth-required-dialog { font-family: var(--f-ui); }
  /* The dialog focuses its first button on open: no ring for that. */
  .auth-required-actions > button:focus { outline: none; }
  .auth-required-actions > button:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--line-3); }
}

/* ---- home search panel: Recent / Favorites / Results as slim tabs ---------- */
@layer components {
  .rf-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: none; }
  .rf-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; border-radius: 0;
    background: none; box-shadow: none; color: var(--ink-3); font: 600 13px/1 var(--f-ui); letter-spacing: 0; text-transform: none; transition: color .15s; }
  .rf-tab .material-icons { font-size: 15px; }
  .rf-tab:hover { color: var(--ink); background: none; }
  .rf-tab.is-on { color: var(--ink); background: none; }
  .rf-tab.is-on .material-icons { color: var(--acc); }
  .rf-tab.is-on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--acc); }
  .rf-head { padding: 12px 16px 6px; }
  .rf-label { font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

  /* The leaderboard's PC / Console switch: compact, in proportion with its title. */
  #homeLbSeg { padding: 2px; border-radius: 8px; }
  #homeLbSeg button { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
}

/* ---- sign in / register: plain, no page art, no page-to-page fade ---------- */
@layer components {
  body.page-auth > main::after, body.page-auth > main::before { content: none; }
  .page-auth .auth-stage::before { content: none; }
  /* Moving between login, register and password pages swaps the card in
     place: no cross-fade of the whole page underneath. */
  html:has(body.page-auth)::view-transition-old(root),
  html:has(body.page-auth)::view-transition-new(root) { animation: none; }
}
@layer components { .page-auth .auth-card.rise { animation: none; } }
@layer components {
  /* The panel opens with a fade and a reveal from the top — no scale, so the
     tabs' text and icons never shimmer while it appears. */
  .gsearch-wrap.is-open .rf { animation: rf-reveal .18s var(--ease-out) both; }
  @keyframes rf-reveal { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
  .rf-tab, .rf-tab .material-icons, .rf-tab .i { transition: none; }
}

/* ---- one panel system everywhere -------------------------------------------
   A card is one surface with one hairline edge; everything inside it is split
   by the same hairline (--line). No striped rows, no second borders, no corner
   accents on tiles that already sit in a card. */
@layer components {
  .card { background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
  .card-head { border-bottom: 1px solid var(--line); }
  .card-foot { border-top: 1px solid var(--line); }

  /* Lists: rows on the card, split by hairlines, lit on hover. */
  .card .list { background: none; }
  .card .li, .card .li:nth-child(even) { background: none; }
  .card .li + .li { box-shadow: inset 0 1px 0 var(--line); }
  .card a.li:hover, .card .li[data-href]:hover { background: var(--s2); }

  /* Stat tiles inside a card: a grid of cells split by hairlines. */
  .card > .kpis { gap: 0; background: none; border: 0; }
  .card > .kpis > .kpi { background: none; border: 0; border-radius: 0; clip-path: none; box-shadow: inset -1px -1px 0 var(--line); }
  .card > .kpis > .kpi::after { display: none; }
  .home-live-kpis .kpi:nth-child(-n+3) { border-bottom: 0; }

  /* Twitch: the two lead figures as cells, same hairlines. */
  .tw-lead { gap: 0; background: none; }
  .tw-lead > div { background: none; box-shadow: inset -1px -1px 0 var(--line); }

  /* Toolkit: tiles on the card, split by hairlines. */
  .tool-strip { gap: 0; background: none; }
  .tool-tile { background: none; box-shadow: inset -1px -1px 0 var(--line); }
  .tool-tile:hover { background: var(--s2); }
}

/* Google's consent banner injects its own unlayered `.material-icons` rule
   (24px, its icon font) on the live domain. Unlayered beats every layer, so it
   would override the site's icon sizes: send those properties back to the
   layered cascade. Deliberately outside @layer. */
.material-icons[class], .material-symbols-rounded[class] { all: revert-layer; }

/* ---- site alert (the announcement bar on the home page) --------------------
   A quiet dark strip, not an orange slab: icon, message and action sit
   together in the centre; the close button stays on the right edge. */
@layer components {
  .site-alert { position: relative; border-bottom: 1px solid var(--line); background:
    radial-gradient(60% 140% at 50% 0%, rgb(var(--acc-rgb) / .10), transparent 70%), var(--s1); }
  .site-alert-inner { position: relative; justify-content: center; gap: 14px; min-height: 48px; padding-block: 8px; padding-inline: 56px; }
  .site-alert-inner > .material-icons:first-child { display: grid; place-items: center; width: 28px; height: 28px; padding: 6px; border-radius: 8px;
    background: rgb(var(--acc-rgb) / .14); color: var(--acc); font-size: 16px; flex: none; }
  .site-alert-text { flex: 0 1 auto; color: var(--ink-2); font-size: 13.5px; font-weight: 550; text-align: center; }
  .site-alert-inner > .btn:not(.site-alert-close) { flex: none; height: 30px; padding: 0 12px; gap: 6px; border-radius: 8px; clip-path: none;
    background: rgb(var(--acc-rgb) / .14); color: var(--acc-hi); box-shadow: inset 0 0 0 1px rgb(var(--acc-rgb) / .3); font-size: 12.5px; font-weight: 650; }
  .site-alert-inner > .btn:not(.site-alert-close):hover { background: rgb(var(--acc-rgb) / .22); color: #fff; }
  .site-alert-inner > .btn .material-icons { font-size: 14px; }
  .site-alert-close { position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%); margin: 0; width: 30px; height: 30px; padding: 0;
    display: grid; place-items: center; border-radius: 8px; background: none; color: var(--ink-3); }
  .site-alert-close:hover { background: var(--s3); color: var(--ink); }
  @media (max-width: 720px) {
    .site-alert-inner { flex-wrap: wrap; gap: 8px 10px; padding-inline: 12px 44px; justify-content: flex-start; }
    .site-alert-text { text-align: left; flex: 1 1 60%; }
    .site-alert-close { right: 6px; }
  }
}

/* ---- player page ----------------------------------------------------------- */
@layer components {
  /* The tab band: tabs fill its full height, so the active line sits on the
     card's bottom edge. */
  .pf-band { align-items: stretch; }
  .pf-band .tabs { align-self: stretch; align-items: stretch; }
  .pf-band .tab { height: auto; min-height: 56px; }
  /* Game modes under the chart (Ranked, Casual, …): one row across the full width. */
  .stats-page .pl-modebar { width: 100%; }
  .stats-page .pl-modes { display: flex; flex-wrap: nowrap; width: 100%; }
  .stats-page .pl-modes > button { flex: 1 1 0; min-width: 0; justify-content: center; }
  /* Operator icons are transparent PNGs: no tile, no frame around them. */
  .op-ic { background: none; padding: 0; border-radius: 0; box-shadow: none; }
  @media (max-width: 720px) { .stats-page .pl-modes { overflow-x: auto; } .stats-page .pl-modes > button { flex: 1 0 auto; } }
}
@layer components {
  /* The operator badges carry a grey frame inside the PNG: crop it away and
     scale the badge back to its size. */
  .op-ic { clip-path: inset(17.5% round 4px); transform: scale(1.5); }
}

/* ---- player page: tables, results, name, dropdowns ------------------------- */
@layer components {
  /* The player's name keeps its own case, sized to the avatar and the action
     buttons beside it rather than as a poster headline. */
  .pf-name { text-transform: none; }
  [data-r6-page="stats"] .pf-name { font-size: clamp(24px, 2.6vw, 38px); font-stretch: 110%; line-height: 1.05; overflow-wrap: anywhere; }

  /* Tables in a card sit on the card's colour: one surface, hairline rows,
     the header a step lighter. Always the full width of the card. */
  .card table, .card .table-wrap table { width: 100%; }
  .card td, .card tbody tr:nth-child(even) > td { background: var(--s1); }
  .card tbody tr + tr > td { box-shadow: inset 0 1px 0 var(--line); }
  .card tbody tr:hover > td, .card tbody tr[data-href]:hover > td { background: var(--s2); }
  .card thead th { background: var(--s1); box-shadow: inset 0 -1px 0 var(--line); }

  /* Match result: W green, L red. */
  .chip.chip-up, .chip.chip-down { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; font: 800 12px/1 var(--f-ui); border: 0; }
  .chip.chip-up { background: rgb(54 214 127 / .16); color: #36d67f; box-shadow: inset 0 0 0 1px rgb(54 214 127 / .35); }
  .chip.chip-down { background: rgb(255 93 108 / .16); color: #ff6b6b; box-shadow: inset 0 0 0 1px rgb(255 93 108 / .35); }

  /* Dropdowns: no white ring on focus; the open one gets an orange edge. */
  .sel-btn:focus, .sel-btn:focus-visible { outline: none; box-shadow: none; }
  .sel-btn:focus-visible { border-color: rgb(var(--acc-rgb) / .5); }
  .sel.is-open .sel-btn, .sel-btn[aria-expanded="true"] { border-color: rgb(var(--acc-rgb) / .6); }
}
@layer components {
  /* A clicked dropdown keeps its normal edge — no light ring left behind. */
  .sel-btn:focus:not(:focus-visible) { border-color: var(--line-2); }
}

@layer components {
  .stats-page .season-inline { white-space: nowrap; }
}

/* Override the native popover border on player dropdown menus. */
.stats-page .sel-menu[popover] { border: 1px solid var(--line-2); }

/* ---- legacy page modals (.modal > .modal-content) --------------------------- */
/* ui.css lays every .modal out as a full-screen grid in this layer, which beat
   the legacy `display: none` of the dashboard dialogs: closed, they stayed as an
   invisible overlay over the page and swallowed every click on the sidebar. */
@layer components {
  .modal:has(> .modal-content):not(.active) { display: none; }
  .modal:has(> .modal-content).active { display: flex; padding: 0; }
}

/* ---- dropdown menus opened as popovers ------------------------------------- */
/* The browser gives every [popover] a thick currentColor border (white on this
   theme). style.css cleared it, but the dashboard and the replay workspace don't
   load style.css, so their select menus showed a white frame. */
@layer components {
  .sel-menu[popover], .pop[popover], .search-pop[popover] { border: 0; color: inherit; overflow-x: hidden; }
  .sel-menu[popover]::backdrop, .pop[popover]::backdrop, .search-pop[popover]::backdrop { display: none; }
}

/* Dropdowns show no focus ring or light frame: the open state (caret, accent
   border) and the highlighted option already say where focus is. */
@layer components {
  .sel-btn:focus, .sel-btn:focus-visible, .sel-opt:focus, .sel-opt:focus-visible,
  .sel-menu:focus, .sel-menu:focus-visible, .pop:focus, .pop:focus-visible,
  .ai-site-select-trigger:focus, .ai-site-select-trigger:focus-visible,
  .ai-site-select-menu button:focus, .ai-site-select-menu button:focus-visible,
  .replay-table-filter-btn:focus-visible, .replay-table-filter-close:focus-visible { outline: none; box-shadow: none; }
  .sel-btn:focus-visible { border-color: var(--line-2); }
  .sel-opt:focus-visible, .ai-site-select-menu button:focus-visible { background: var(--s4); }
}

/* ---- API docs: no page-to-page fade --------------------------------------- */
/* The docs have their own header, so the site header (a named transition group
   kept still) lingered over the docs for the whole fade and the two pages were
   blended on top of each other. Arriving on the docs swaps the page at once. */
@layer components {
  html:has(body[data-r6-page="api-docs"])::view-transition-group(*),
  html:has(body[data-r6-page="api-docs"])::view-transition-old(*),
  html:has(body[data-r6-page="api-docs"])::view-transition-new(*) { animation: none; }
}