/* Light is the base palette; dark is selected, not an automatic inversion. Three theme states are handled: an explicit choice stamps data-theme on , and the default follows the operating system. Chart colours come from a CVD-validated palette in both modes; brand red is chrome only, never a data colour, so it can never be misread as "loss". */ :root { color-scheme: light; --brand: #ff4655; --good: #0ca30c; --critical: #d03b3b; --r: 8px; --page: #f2f4f7; --surface: #ffffff; --surface-2: #fbfcfd; --raised: #eceff3; --line: #dde2e9; --line-soft: #e8ecf1; --grid: #e6eaef; --glow: #e2e8f0; --hover: rgba(11, 11, 11, 0.028); --hover-strong: rgba(11, 11, 11, 0.05); --edge: #c3ccd8; --edge-2: #a9b5c4; --tipbg: #1b2029; --ink: #0b0b0b; --ink-2: #3d444e; --muted: #626c78; --faint: #8a939f; --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --meter: #9ec5f4; --gold: #b8860b; --silver: #7c8896; --bronze: #a06235; --heat-1: #86b6ef; --heat-2: #5598e7; --heat-3: #2a78d6; --heat-4: #1c5cab; --shadow: 0 1px 2px rgba(11, 11, 11, 0.06), 0 8px 24px -12px rgba(11, 11, 11, 0.25); } @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --page: #0d1116; --surface: #171d25; --surface-2: #1e252f; --raised: #232b36; --line: #2b3542; --line-soft: #222a34; --grid: #232c37; --glow: #1e2a36; --hover: rgba(255, 255, 255, 0.022); --hover-strong: rgba(255, 255, 255, 0.04); --edge: #384555; --edge-2: #45536a; --tipbg: #0a0e13; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #8b97a6; --faint: #5d6a79; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --meter: #2f5f96; --gold: #ffd166; --silver: #c8d2dc; --bronze: #cd8a52; --heat-1: #1c5cab; --heat-2: #3987e5; --heat-3: #6da7ec; --heat-4: #9ec5f4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { color-scheme: dark; --page: #0d1116; --surface: #171d25; --surface-2: #1e252f; --raised: #232b36; --line: #2b3542; --line-soft: #222a34; --grid: #232c37; --glow: #1e2a36; --hover: rgba(255, 255, 255, 0.022); --hover-strong: rgba(255, 255, 255, 0.04); --edge: #384555; --edge-2: #45536a; --tipbg: #0a0e13; --ink: #ffffff; --ink-2: #c3c2b7; --muted: #8b97a6; --faint: #5d6a79; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --meter: #2f5f96; --gold: #ffd166; --silver: #c8d2dc; --bronze: #cd8a52; --heat-1: #1c5cab; --heat-2: #3987e5; --heat-3: #6da7ec; --heat-4: #9ec5f4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6); } * { box-sizing: border-box; } /* A class that sets `display` beats the browser's own [hidden] rule, so `el.hidden = true` on .board (display:grid) would silently do nothing. One global rule makes hiding work everywhere. */ [hidden] { display: none !important; } body { margin: 0; padding: 28px 18px 56px; background: radial-gradient(900px 420px at 50% -180px, var(--glow), transparent 70%), var(--page); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1120px; margin-inline: auto; } /* ------------------------------------------------------------------ header */ .top { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; } h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; } h1::after { content: ""; display: block; width: 46px; height: 3px; margin-top: 8px; background: var(--brand); border-radius: 2px; } .sub { margin: 9px 0 0; color: var(--muted); font-size: 14px; } .controls { display: flex; align-items: center; gap: 12px; } .stamp { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .refresh { display: inline-flex; align-items: center; gap: 8px; background: var(--brand); color: #fff; border: 0; border-radius: 5px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: filter 0.15s ease, opacity 0.15s ease; } .refresh:hover { filter: brightness(1.12); } .refresh:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .refresh[disabled] { opacity: 0.55; cursor: progress; } .refresh .spin { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; display: none; } .refresh[disabled] .spin { display: block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* progress line shown while a fetch fills players in */ .progress { height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 18px; } .progress i { display: block; height: 100%; background: var(--brand); transition: width 0.4s ease; } .progress[hidden] { display: none; } /* ------------------------------------------------------------ lobby tiles */ .lobby { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 20px; } .tile { padding: 15px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .tile .k { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .tile .v { margin-top: 6px; font-size: 27px; font-weight: 650; line-height: 1.05; } .tile .who { margin-top: 4px; font-size: 13px; color: var(--ink-2); } /* ---------------------------------------------------------------- toolbar */ .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .toolbar .lead { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .segs { display: flex; gap: 2px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; } .segs button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 4px; cursor: pointer; } .segs button:hover { color: var(--ink-2); } .segs button[aria-pressed="true"], .segs button[aria-selected="true"] { background: var(--raised); color: var(--ink); } /* The view switch is the page's main mode, so it says so plainly: a filled tab, a brand underline, and a dot - not colour alone. */ .segs.big { position: relative; } .segs.big button { font-size: 13px; padding: 7px 15px 8px; } .segs.big button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); } .segs.big button[aria-selected="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-right: 7px; vertical-align: 1px; } .segs button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } .toolbar .hint { margin-left: auto; } /* ------------------------------------------------------------ player rows */ .board { display: grid; gap: 10px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color 0.15s ease; } .card:hover { border-color: var(--edge); } .card.open { border-color: var(--edge-2); box-shadow: var(--shadow); } .card.rank1 { border-left: 3px solid var(--gold); } .card.rank2 { border-left: 3px solid var(--silver); } .card.rank3 { border-left: 3px solid var(--bronze); } .card.stale { opacity: 0.5; } .rowwrap { display: grid; grid-template-columns: 38px 1fr; align-items: stretch; } .pick { display: grid; place-items: center; cursor: pointer; border-right: 1px solid var(--line-soft); } .pick input { width: 15px; height: 15px; accent-color: var(--series-1); cursor: pointer; } .pick:hover { background: var(--hover-strong); } .row { display: grid; grid-template-columns: 30px 44px minmax(146px, 1fr) minmax(330px, 1.9fr) 70px 20px; align-items: center; gap: 16px; width: 100%; padding: 14px 18px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; } .row:hover { background: var(--hover); } .row:focus-visible { outline: 2px solid var(--series-1); outline-offset: -3px; } .pos { font-size: 17px; font-weight: 700; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; } .card.rank1 .pos { color: var(--gold); } .card.rank2 .pos { color: var(--silver); } .card.rank3 .pos { color: var(--bronze); } .badge { width: 44px; height: 44px; object-fit: contain; } .who { min-width: 0; } .name { font-weight: 650; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .name span { color: var(--faint); font-weight: 400; } .tier { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; } .tier .rr { color: var(--muted); } /* Eight stats, four across and two down. Each carries a bar showing where the player sits against the lobby best for that stat. */ .stats { display: grid; grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 11px 16px; } .stat { min-width: 0; } .stat .v { font-size: 15.5px; font-weight: 650; line-height: 1.15; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; } .stat .d { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .stat .meter { display: block; position: relative; height: 3px; margin: 5px 0 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; } .stat .meter i { display: block; height: 100%; background: var(--meter); border-radius: 2px; } .card.rank1 .stat .meter i { background: var(--series-1); } .stat .k { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); font-weight: 600; white-space: nowrap; } /* zero-anchored bar for damage delta, which can go either way */ .stat .meter.div { overflow: visible; } .stat .meter.div i { position: absolute; top: 0; bottom: 0; height: auto; } .stat .meter.div i.pos { background: var(--series-1); border-radius: 0 2px 2px 0; } .stat .meter.div i.neg { background: var(--critical); border-radius: 2px 0 0 2px; } .stat .meter.div i.mid { left: 50%; width: 1px; background: var(--faint); border-radius: 0; } .up { color: var(--good); } .down { color: var(--critical); } .form { display: flex; gap: 3px; justify-content: flex-end; } .form i { width: 8px; height: 22px; border-radius: 2px; background: var(--line); } .form i.w { background: var(--good); } .form i.l { background: var(--critical); } .chev { color: var(--faint); text-align: center; font-size: 18px; transition: transform 0.25s ease; } .card.open .chev { transform: rotate(90deg); color: var(--ink-2); } /* ------------------------------------------------------------------ drawer */ .drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; } .card.open .drawer { grid-template-rows: 1fr; } .drawer-inner { overflow: hidden; min-height: 0; } .drawer-pad { padding: 2px 18px 18px; border-top: 1px solid var(--line-soft); } .banner { position: relative; height: 74px; margin: 14px 0 16px; border-radius: 6px; overflow: hidden; background: var(--surface-2); } .banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .banner .over { position: absolute; inset: 0; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: linear-gradient(90deg, rgba(23, 29, 37, 0.94) 30%, rgba(23, 29, 37, 0.3)); } .banner .over strong { font-size: 17px; } .banner .over em { font-style: normal; color: var(--ink-2); font-size: 13px; } .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; margin-bottom: 16px; } .panel { padding: 15px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; } .panel > h3 { margin: 0 0 12px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .panel > h3 em { font-style: normal; color: var(--faint); letter-spacing: 0.04em; text-transform: none; } .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 14px; margin: 0; } .facts dt { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; } .facts dd { margin: 3px 0 0; font-weight: 600; font-size: 14px; } .facts dd em { font-style: normal; color: var(--muted); font-weight: 400; font-size: 12.5px; } /* charts */ .spark { width: 100%; height: auto; display: block; overflow: visible; } .spark .gridline { stroke: var(--grid); stroke-width: 1; } .spark .line { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .spark .area { fill: var(--series-1); opacity: 0.13; } .spark .dot { fill: var(--series-1); stroke: var(--surface-2); stroke-width: 2; } .acc { display: flex; height: 24px; border-radius: 4px; overflow: hidden; background: var(--grid); gap: 2px; } .acc span { display: block; height: 100%; } .acc .s1 { background: var(--series-1); } .acc .s2 { background: var(--series-2); } .acc .s3 { background: var(--series-3); } .keys { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; font-size: 12px; color: var(--ink-2); } .keys b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .keys .s1 { background: var(--series-1); } .keys .s2 { background: var(--series-2); } .keys .s3 { background: var(--series-3); } .keys em { font-style: normal; color: var(--muted); } /* win-rate meters: the track is the full 0-100%, the fill is the rate itself, so 50% reads as exactly half a bar and every track is the same length. */ .bars { display: grid; gap: 9px; } .bars .b { display: grid; grid-template-columns: 76px 1fr 64px; align-items: center; gap: 10px; font-size: 12.5px; } .bars .b.thin { opacity: 0.55; } .bars .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); } .bars .track { position: relative; height: 10px; background: var(--grid); border-radius: 3px; overflow: hidden; } .bars .fill { display: block; height: 100%; background: var(--series-1); border-radius: 3px; } .bars .half { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hover-strong); } .bars .n { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 12px; } .bars .n b { color: var(--ink-2); font-weight: 600; } /* match table */ .tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 6px; } table.matches { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } table.matches th { text-align: left; padding: 9px 11px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--raised); border-bottom: 1px solid var(--line); } table.matches td { padding: 9px 11px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; } table.matches tr:last-child td { border-bottom: 0; } table.matches tbody tr:hover { background: var(--hover); } table.matches .num { text-align: right; } .res { font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; } .res.w { color: var(--good); } .res.l { color: var(--critical); } .score { color: var(--muted); font-variant-numeric: tabular-nums; } .when { color: var(--faint); white-space: nowrap; } /* ---------------------------------------------------------------- tooltip */ .tip { position: fixed; z-index: 30; padding: 8px 11px; background: var(--tipbg); border: 1px solid var(--line); border-radius: 5px; font-size: 12px; line-height: 1.5; color: #ffffff; pointer-events: none; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); max-width: 230px; } .tip em { font-style: normal; color: var(--muted); } .note { padding: 22px; border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); } .note code { color: var(--ink); } .hint { font-size: 12px; color: var(--faint); margin: 0; } .foot { margin-top: 26px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--faint); font-size: 12px; } /* ----------------------------------------------------------------- narrow */ @media (max-width: 560px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { body { padding: 20px 12px 40px; } .row { grid-template-columns: 26px 38px 1fr 20px; grid-template-areas: "pos badge who chev" "stats stats stats stats" "form form form form"; gap: 10px 12px; } .pos { grid-area: pos; } .badge { grid-area: badge; width: 38px; height: 38px; } .who { grid-area: who; } .chev { grid-area: chev; align-self: start; padding-top: 6px; } .stats { grid-area: stats; grid-template-columns: repeat(4, 1fr); gap: 11px 10px; } .form { grid-area: form; justify-content: flex-start; } .bars .b { grid-template-columns: 64px 1fr 60px; } h1 { font-size: 24px; } .toolbar .hint { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------ comparison */ .compare { display: grid; gap: 14px; } .compare[hidden] { display: none; } /* the Board / Compare switch sits first in the toolbar */ .segs.big button { font-size: 13px; padding: 7px 15px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .chip:hover { color: var(--ink-2); border-color: var(--edge-2); } .chip.on { color: var(--ink); border-color: var(--edge-2); background: var(--raised); } .chip:not(.on) .dot { opacity: 0.3; } .chip:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } .chip.alltoggle { color: var(--faint); } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; } /* headline: who leads how many stats */ .leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .ld { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 13px; } .ld .nm { color: var(--ink-2); font-weight: 600; margin-right: auto; } .ld b { font-size: 20px; font-weight: 700; } .ld em { font-style: normal; font-size: 10.5px; color: var(--faint); } /* one small chart per stat - same player order in every card, so a row can be tracked across the grid without relying on colour */ .smgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .sm { padding: 13px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .sm h4 { margin: 0 0 11px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .smrow { display: grid; grid-template-columns: 84px 1fr 56px; align-items: center; gap: 9px; padding: 3px 0; font-size: 12.5px; } .smrow .who { display: flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smrow.lead .who { color: var(--ink-2); } .smrow .track { height: 9px; background: var(--grid); border-radius: 3px; overflow: hidden; } .smrow .fill { display: block; height: 100%; background: var(--meter); border-radius: 3px; } .smrow.lead .fill { background: var(--series-1); } .smrow .fill.neg { background: var(--critical); } .smrow .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; } .smrow.lead .val { color: var(--ink); font-weight: 650; } /* N-line elo chart */ .multi { width: 100%; height: auto; display: block; overflow: visible; } .multi .gridline { stroke: var(--grid); stroke-width: 1; } .multi path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .multi circle[fill]:not([fill="transparent"]) { stroke: var(--surface-2); stroke-width: 2; } .multi .endlbl { font-size: 10px; font-weight: 600; } /* maps / agents matrix */ /* Fixed layout so every player column is the same width. Without it the columns size themselves to the longest name, which makes the grid ragged and hard to read across. */ table.mx { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; min-width: 460px; } /* The row-header column is the only one with a set width; the rest divide the remainder evenly on their own. */ table.mx th.rh, table.mx thead th:first-child { width: 116px; } /* Names can be longer than their column, so clip rather than stretch it. */ table.mx th, table.mx td { overflow: hidden; text-overflow: ellipsis; } /* Ruled lines both ways, so a cell can be traced back to its row and column. */ table.mx th, table.mx td { border: 1px solid var(--line-soft); } table.mx thead th { border-color: var(--line); } table.mx th { text-align: left; padding: 9px 11px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--raised); border-bottom: 1px solid var(--line); white-space: nowrap; } table.mx th.rh { background: none; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); } table.mx td { padding: 8px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; } table.mx .mv { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); margin-right: 7px; } table.mx .mtrack { display: inline-block; width: 46px; height: 7px; background: var(--grid); border-radius: 3px; overflow: hidden; vertical-align: middle; } table.mx .mfill { display: block; height: 100%; background: var(--series-1); border-radius: 3px; } table.mx .mg { color: var(--faint); font-size: 11px; margin-left: 7px; } table.mx td.na { color: var(--faint); } @media (max-width: 700px) { .smrow { grid-template-columns: 72px 1fr 48px; } .leaders { grid-template-columns: 1fr; } } /* ------------------------------------------------- duos & extra panels */ .duos { margin-bottom: 18px; } .duos:empty { display: none; } .duos .panel { background: var(--surface); border-color: var(--line); } .duos .bars .b { grid-template-columns: 210px 1fr 92px; } .bars .lbl.wide { color: var(--ink-2); } /* second series for the party/solo pair, which is two labelled categories */ .bars .fill.c1 { background: var(--series-1); } .bars .fill.c2 { background: var(--series-2); } /* activity heatmap: one hue, brighter with more games (dark-surface ramp) */ .heat { display: grid; grid-template-columns: repeat(21, 1fr); gap: 3px; } .heat .cell { aspect-ratio: 1; border-radius: 2px; background: var(--grid); min-height: 12px; } /* Validated ordinal ramp for the dark panel: monotone lightness, adjacent steps at least 0.06 apart, darkest step still clearing 2:1 on the surface. */ .heat .cell.s1, .keys .ramp i.s1 { background: var(--heat-1); } .heat .cell.s2, .keys .ramp i.s2 { background: var(--heat-2); } .heat .cell.s3, .keys .ramp i.s3 { background: var(--heat-3); } .heat .cell.s4, .keys .ramp i.s4 { background: var(--heat-4); } .keys .ramp { display: inline-flex; align-items: center; gap: 3px; } .keys .ramp i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--grid); } .keys .ramp em { margin: 0 3px; } @media (max-width: 700px) { .duos .bars .b { grid-template-columns: 1fr; gap: 4px; } .duos .bars .n { text-align: left; } .heat .cell { min-height: 10px; } } /* ------------------------------------------------------------- preferences */ .menuwrap { position: relative; } .iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 16px; cursor: pointer; } .iconbtn:hover { color: var(--ink); border-color: var(--edge); } .iconbtn[aria-expanded="true"] { color: var(--ink); background: var(--raised); border-color: var(--edge-2); } .iconbtn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; } .menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 35; width: 268px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; gap: 15px; } .menu[hidden] { display: none; } .mgroup > h4 { margin: 0 0 8px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .mrow { display: flex; gap: 4px; } .mrow button { flex: 1; padding: 6px 4px; background: var(--raised); border: 1px solid transparent; border-radius: 5px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .mrow button:hover { color: var(--ink-2); } .mrow button[aria-pressed="true"] { background: var(--surface); border-color: var(--edge-2); color: var(--ink); } .mrow button:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; } .mstats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .mstats button { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: none; border: 1px solid transparent; border-radius: 5px; color: var(--faint); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: left; } .mstats button::before { content: ""; width: 12px; height: 12px; flex: none; border: 1px solid var(--edge); border-radius: 3px; } .mstats button[aria-pressed="true"] { color: var(--ink-2); } .mstats button[aria-pressed="true"]::before { background: var(--series-1); border-color: var(--series-1); box-shadow: inset 0 0 0 2px var(--surface); } .mstats button:hover { border-color: var(--line); } .menu .foot-note { font-size: 11px; color: var(--faint); margin: 0; } /* -------------------------------------------------------------- density */ :root[data-density="compact"] .row { padding: 9px 14px; gap: 12px; } :root[data-density="compact"] .stats { gap: 7px 12px; } :root[data-density="compact"] .stat .v { font-size: 14px; } :root[data-density="compact"] .stat .meter { margin: 4px 0 3px; } :root[data-density="compact"] .badge { width: 34px; height: 34px; } :root[data-density="compact"] .row { grid-template-columns: 26px 34px minmax(130px, 1fr) minmax(320px, 1.9fr) 62px 18px; } :root[data-density="compact"] .name { font-size: 14.5px; } :root[data-density="compact"] .tier { font-size: 11.5px; } :root[data-density="compact"] .board { gap: 7px; } :root[data-density="compact"] .tile { padding: 11px 13px; } :root[data-density="compact"] .tile .v { font-size: 22px; } :root[data-density="compact"] .form i { height: 18px; } :root[data-density="compact"] table.matches td { padding: 6px 9px; } :root[data-density="compact"] .panel { padding: 12px; } /* ------------------------------------------------------ league additions */ /* counts, not rates - plain figures rather than a chart */ .figs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; } .fig .v { font-size: 22px; font-weight: 650; line-height: 1.1; } .fig .k { margin-top: 3px; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .fig .n { margin-top: 2px; font-size: 11px; color: var(--faint); } /* champion portraits beside their win-rate bars */ .bars .b.champ .lbl { display: flex; align-items: center; gap: 7px; } .bars .b.champ .lbl img { width: 20px; height: 20px; border-radius: 3px; flex: none; } table.matches .champ-cell { display: flex; align-items: center; gap: 7px; white-space: nowrap; } table.matches .champ-cell img { width: 22px; height: 22px; border-radius: 3px; flex: none; } /* the profile icon is a small square, so it sits rather than stretches */ .banner.profile img { width: auto; height: 100%; object-fit: contain; opacity: 0.85; margin-left: auto; } @media (max-width: 700px) { .figs { grid-template-columns: 1fr 1fr; } } .demo { max-width: 1120px; margin: 0 auto 18px; padding: 11px 14px; border: 1px solid var(--brand); border-radius: var(--r); background: color-mix(in srgb, var(--brand) 10%, transparent); font-size: 13px; color: var(--ink-2); } .demo[hidden] { display: none; } .demo strong { color: var(--ink); } /* The tab row is the page's top-level control, so it sits above everything it governs; the tiles and the sort row belong to the Board and follow it. */ .tabbar { margin-bottom: 16px; } .sortbar { margin-bottom: 12px; } .tabbar .hint { margin-left: auto; } /* ------------------------------------------------------------- squad view */ .squad { display: grid; gap: 12px; } .squad[hidden] { display: none; } /* one row per lineup, however many people are in it */ .lineups { display: grid; gap: 8px; } .lu { display: grid; grid-template-columns: 32px minmax(150px, 1.3fr) 1fr 82px; align-items: center; gap: 10px; font-size: 12.5px; } .lu.thin { opacity: 0.55; } .lu .sz { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: center; border: 1px solid var(--line); border-radius: 3px; padding: 2px 0; } .lu .who { display: flex; flex-wrap: wrap; gap: 4px; } .lu .chipname { background: var(--raised); border-radius: 3px; padding: 2px 7px; color: var(--ink-2); white-space: nowrap; } .lu .track { position: relative; height: 10px; background: var(--grid); border-radius: 3px; overflow: hidden; } .lu .fill { display: block; height: 100%; background: var(--series-1); border-radius: 3px; } .lu .half { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hover-strong); } .lu .n { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .lu .n b { color: var(--ink-2); } /* every pair as a grid - ten pairs is an unreadable list but a fine 5x5 grid. Colour diverges around 50%; the number is always shown, so colour is a cue and never the only one. */ table.mx.pairs td { text-align: center; padding: 8px 6px; } /* Square corners so the fill meets the ruled lines and the grid reads as one surface rather than a scatter of separate chips. */ table.mx.pairs td.cell { border-radius: 0; } table.mx.pairs td b { display: block; font-size: 13px; font-weight: 650; color: var(--ink); } table.mx.pairs td em { font-style: normal; font-size: 10.5px; color: var(--ink-2); opacity: 0.75; } table.mx.pairs td.self { background: var(--line-soft); } table.mx.pairs td.thin { opacity: 0.5; } .cell.up2, .keys .sw.up2 { background: #3987e5; } .cell.up1, .keys .sw.up1 { background: #2f5f96; } .cell.mid, .keys .sw.mid { background: #383835; } .cell.dn1, .keys .sw.dn1 { background: #9e4040; } .cell.dn2, .keys .sw.dn2 { background: #d03b3b; } .keys .sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; margin-right: 2px; vertical-align: middle; } @media (max-width: 700px) { .lu { grid-template-columns: 28px 1fr; row-gap: 5px; } .lu .track, .lu .n { grid-column: 2; } .lu .n { text-align: left; } } /* ------------------------------------------------- analysis panel extras */ /* a third bar colour, for the neutral baseline in entry impact */ .bars .fill.c3 { background: var(--meter); } /* best / worst teammate */ .mates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .mate { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 5px; } .mate.best { border-left: 2px solid var(--good); } .mate.worst { border-left: 2px solid var(--critical); } .mate .k { display: block; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 600; } .mate .who { display: block; margin-top: 3px; font-size: 14px; font-weight: 650; color: var(--ink); } .mate .v { font-size: 13px; font-weight: 650; } .mate .g { font-size: 11px; color: var(--faint); margin-left: 5px; } /* stack-effect table: highlight the best cell per column */ table.stackfx { min-width: 380px; } table.stackfx td.peak { color: var(--ink); font-weight: 650; } table.stackfx tr.thin { opacity: 0.55; } /* agent contention rows carry a chip list of the contested agents */ .bars .b.contend { grid-template-columns: 150px 1fr 52px; row-gap: 5px; } .bars .b.contend .shared { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; } .bars .b.contend .ag { background: var(--raised); border-radius: 3px; padding: 2px 7px; font-size: 11px; color: var(--ink-2); } @media (max-width: 700px) { .mates { grid-template-columns: 1fr; } .bars .b.contend { grid-template-columns: 1fr; } } /* The tab row is the page's top-level control, so it sits above everything it governs; the tiles and the sort row belong to the Board and follow it. */ .tabbar { margin-bottom: 16px; } .sortbar { margin-bottom: 12px; } .tabbar .hint { margin-left: auto; } /* ------------------------------------------------------------ manage tab */ .manage { display: grid; gap: 14px; } .manage[hidden] { display: none; } .segs button .lock { font-size: 11px; opacity: 0.8; margin-left: 4px; } /* --- locked screen: one centred card, not a bare input in a panel ------- */ .mgate { max-width: 460px; margin: 26px auto; padding: 34px 30px 28px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); } .mgate.hosted { max-width: 560px; text-align: left; } .mgicon { width: 54px; height: 54px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 23px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); } .mgate.hosted .mgicon { margin: 0 0 16px; } .mgate h2 { margin: 0 0 8px; font-size: 19px; font-weight: 650; letter-spacing: 0.01em; } .mgate > p { margin: 0 auto; max-width: 40ch; color: var(--muted); font-size: 13.5px; line-height: 1.6; } .mgate.hosted > p { margin: 0; max-width: none; } .pwform { display: grid; gap: 10px; margin: 22px 0 0; } .pwwrap { position: relative; display: flex; } .pwwrap input { flex: 1; padding: 11px 42px 11px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; font-size: 14px; } .pwwrap input::placeholder { color: var(--faint); } .pwwrap input:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; border-color: transparent; } .pweye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; border-radius: 5px; color: var(--faint); font-size: 14px; cursor: pointer; } .pweye:hover { color: var(--ink-2); background: var(--hover-strong); } .pwform .refresh { width: 100%; justify-content: center; padding: 11px; } .mgfoot { margin: 18px 0 0; font-size: 12px; color: var(--faint); line-height: 1.6; } .mgfoot code, .steps code { color: var(--ink-2); } /* --- unlocked ---------------------------------------------------------- */ .adminbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; background: color-mix(in srgb, var(--good) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 32%, var(--line)); border-radius: var(--r); font-size: 13px; } .adminbar .who { color: var(--ink-2); font-weight: 600; } .adminbar .lock { margin-right: 5px; } .mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 17px 18px; } .mcard.subtle { background: var(--surface-2); } .mcard > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .mcard h3 { margin: 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .mcard .count { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } /* --- buttons ------------------------------------------------------------ Measured against the panel they sit on. White on the brand red is 3.36:1, which fails for 13px text, so the primary action uses a darker step of the same red (6.52:1) and the danger text a lighter one (6.80:1). The brand colour still owns the Refresh button up in the header. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 7px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: default; } .btn.wide { width: 100%; } .btn.primary { background: #b3252f; color: #ffffff; } .btn.primary:hover:not(:disabled) { background: #c72b36; } .btn.quiet { background: var(--raised); color: var(--ink-2); border-color: var(--line); } .btn.quiet:hover:not(:disabled) { border-color: var(--edge); color: var(--ink); } .btn.quiet.danger-text { color: #ff8a8a; } .btn.quiet.danger-text:hover:not(:disabled) { border-color: #ff8a8a; color: #ff8a8a; } .btn.danger { background: #b3252f; color: #ffffff; } .btn.danger:hover:not(:disabled) { background: #c72b36; } /* --- add form ----------------------------------------------------------- Fields in one grid, the action in its own row underneath. Previously the button was a grid item too, so it wrapped with the fields and never shared a baseline with the inputs. */ .addform { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 14px; align-items: start; } .fld { display: grid; gap: 6px; min-width: 0; } .fld > span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .fld input, .fld select { height: 38px; padding: 0 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 13px; width: 100%; } .fld select { padding-right: 8px; } .fld input::placeholder { color: var(--faint); } .fld input:focus-visible, .fld select:focus-visible { outline: 2px solid var(--series-1); outline-offset: 1px; border-color: transparent; } .fld input:disabled, .fld select:disabled { opacity: 0.5; } /* Reserved even when empty, so every input sits on the same line. */ .fld > em { font-style: normal; font-size: 10.5px; color: var(--faint); min-height: 14px; line-height: 14px; } .addfoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 2px; border-top: 1px solid var(--line-soft); margin-top: 2px; } .addfoot .preview { margin: 0; flex: 1 1 220px; } .addfoot .btn { flex: 0 0 auto; } .preview { padding: 9px 12px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 6px; font-size: 12.5px; color: var(--muted); } .preview[hidden] { display: none; } .preview b { color: var(--ink); font-weight: 650; } .preview.dup { border-color: #ff8a8a; color: #ff8a8a; } .preview.dup b { color: #ff8a8a; } /* --- roster ------------------------------------------------------------- A fixed action column so every Remove button lines up down the list. With an auto column each row's button moved with the width of its chips. */ .roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 168px; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 13px; } .rrow.confirming { border-color: #ff8a8a; background: color-mix(in srgb, #b3252f 12%, var(--surface-2)); } .rrow .av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--raised); border: 1px solid var(--line); color: var(--ink-2); font-weight: 650; font-size: 13px; } .rrow .nm { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rrow .nm span { color: var(--faint); font-weight: 400; } .rrow .chips { display: flex; gap: 6px; justify-self: end; } .chip2 { background: var(--raised); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* The action column keeps its width whether it holds one button or two, so rows never shift as you move between them. */ .rrow > .btn, .rrow .confirm { justify-self: end; } .rrow .confirm { display: flex; gap: 8px; } .rrow .confirm .btn { height: 34px; padding: 0 13px; } .rrow > .btn { height: 34px; padding: 0 14px; } .empty { margin: 0; color: var(--faint); font-size: 13px; } @media (max-width: 780px) { .rrow { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 10px; } .rrow .chips { grid-column: 2 / -1; justify-self: start; } .rrow > .btn, .rrow .confirm { grid-column: 1 / -1; justify-self: stretch; } .rrow .confirm .btn { flex: 1; } .addfoot { flex-direction: column; align-items: stretch; } .addfoot .btn { width: 100%; } } /* --- request budget ---------------------------------------------------- */ .budget { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 9px 12px; border-radius: 6px; font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-soft); } .budget .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--good); } .budget.near { color: var(--ink-2); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } .budget.near .dot { background: var(--gold); } .budget.over { color: var(--ink-2); border-color: color-mix(in srgb, var(--critical) 45%, var(--line)); } .budget.over .dot { background: var(--critical); } /* --- next steps -------------------------------------------------------- */ .steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); } .steps li { line-height: 1.6; } .cmd { display: inline-block; padding: 2px 7px; background: var(--raised); border: 1px solid var(--line-soft); border-radius: 4px; font-size: 12px; color: var(--ink); } .err { margin: 13px 0 0; color: var(--critical); font-size: 13px; } .ok { margin: 13px 0 0; color: var(--good); font-size: 13px; } @media (max-width: 700px) { .mgate { margin: 12px auto; padding: 26px 20px 22px; } .rrow { grid-template-columns: 30px 1fr auto; row-gap: 8px; } .rrow .chips { grid-column: 2 / -1; } .rrow .confirm { grid-column: 1 / -1; justify-content: flex-end; } .addbtn { grid-column: 1 / -1; } }