:root {
    --paper: #f1efe5;
    --white: #fffef5;
    --ink: #0b0b0b;
    --acid: #dfff00;
    --yellow: #ffd900;
    --red: #ff3b30;
    --blue: #00a8ff;
    --grey: #c9c7bc;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

a { color: inherit; }

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--white);
    border-bottom: 4px solid var(--ink);
}

.nav-inner {
    width: min(1400px, calc(100% - 32px));
    min-height: 72px;
    margin: auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 22px;
    text-decoration: none;
    font-family: "Arial Black", Arial, sans-serif;
    text-transform: uppercase;
}

.brand-mark {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--acid);
    color: var(--ink);
    border: 3px solid var(--white);
    transform: none;
    font-family: "Arial Black", Arial, sans-serif;
}

.nav-links {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
}

.nav-links a {
    display: flex;
    align-items: center;
    padding: 0 18px;
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    border-left: 2px solid #444;
    font-size: 13px;
    letter-spacing: .04em;
}

.nav-links a:hover,
.nav-links a.active {
    background: var(--acid);
    color: var(--ink);
}

.page {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3,
.record-pill strong,
.stat strong,
.objective-feature strong,
.metric-strip strong,
.minute-stamp,
.state-row strong {
    font-family: "Arial Black", Arial, sans-serif;
}

h1 {
    margin-bottom: 10px;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: .82;
    letter-spacing: -.075em;
    text-transform: uppercase;
}

h2 {
    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: .95;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.page-header {
    position: relative;
    border-bottom: 6px solid var(--ink);
    padding-bottom: 30px;
    margin-bottom: 36px;
}

.page-header p {
    margin-bottom: 0;
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}

.kicker-block,
.eyebrow,
.panel-label {
    display: inline-block;
    background: var(--acid);
    color: var(--ink);
    border: 3px solid var(--ink);
    padding: 5px 9px;
    margin-bottom: 20px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero {
    border-bottom: 6px solid var(--ink);
    padding: 20px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
}

.hero .eyebrow { margin-bottom: 14px; }
.muted, small, .section-note { color: #3d3d3d; }

.record-pill {
    min-width: 220px;
    border: 4px solid var(--ink);
    background: var(--yellow);
    box-shadow: 8px 8px 0 var(--ink);
    padding: 18px;
    text-align: left;
}
.record-pill strong { display: block; font-size: 42px; line-height: 1; }
.record-pill span { color: var(--ink); }

.recent-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 26px 0 0;
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}
.result {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 3px solid var(--ink);
    color: var(--ink);
}
.result.win { background: var(--acid); }
.result.loss { background: var(--red); color: white; }

.cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 28px;
}
.cards.three { grid-template-columns: repeat(3, 1fr); }

.card,
.brutal-panel,
.timeline-brutal-card,
.objective-feature,
.player-card {
    border: 4px solid var(--ink);
    border-radius: 0;
    background: var(--white);
    box-shadow: 8px 8px 0 var(--ink);
}

.card { padding: 20px; }
.stat span { font-family: "Courier New", monospace; text-transform: uppercase; }
.stat strong { display: block; margin-top: 5px; font-size: 36px; }

.section { margin-top: 48px; }

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 4px solid var(--ink);
    padding-bottom: 12px;
}
.section-title h2 { margin-bottom: 0; }
.text-link { font-family: "Courier New", monospace; font-weight: 900; }

.table-wrap {
    padding: 0;
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
th, td {
    padding: 14px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    text-align: right;
}
th:last-child, td:last-child { border-right: 0; }
th:first-child, td:first-child { text-align: left; }
th {
    background: var(--ink);
    color: var(--white);
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}
tbody tr:nth-child(even) { background: #e6e3d8; }

.grid-two,
.brutal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.objective-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.objective-grid div {
    border: 3px solid var(--ink);
    padding: 12px;
    background: var(--white);
}
.objective-grid strong {
    display: block;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 28px;
}

/* Champion / Draft */
.splash-hero {
    min-height: 420px;
    position: relative;
    display: flex;
    align-items: end;
    background-size: cover;
    background-position: center 22%;
    border-bottom: 8px solid var(--ink);
    filter: contrast(1.15) saturate(.75);
}
.splash-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 55%, transparent 100%);
}
.splash-content {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - 32px));
    margin: auto;
    padding: 70px 0 50px;
    color: white;
}
.splash-content h1 { font-size: clamp(4rem, 8vw, 8rem); }
.splash-content p:last-child {
    display: inline-block;
    background: var(--acid);
    color: var(--ink);
    border: 4px solid var(--ink);
    padding: 10px;
}

.champion-card-grid,
.pair-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.champion-card {
    display: flex;
    gap: 12px;
    align-items: center;
}
.champion-card p { margin: 5px 0; }
.champion-icon,
.champion-cell img,
.pair-icons img,
.champ-strip img {
    border-radius: 0;
    border: 3px solid var(--ink);
    width: 44px;
    height: 44px;
    object-fit: cover;
}
.champion-icon.large { width: 64px; height: 64px; }
.pair-card { text-align: center; }
.pair-icons { display: flex; justify-content: center; align-items: center; gap: 8px; }
.pair-card > strong { display: block; font-size: 34px; margin-top: 8px; }
.champion-cell { display: flex; gap: 10px; align-items: center; }

/* Players */
.player-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.player-card { overflow: hidden; padding: 0; }
.player-card-splash {
    height: 200px;
    background-size: cover;
    background-position: center 25%;
    border-bottom: 4px solid var(--ink);
    filter: grayscale(.25) contrast(1.2);
}
.player-card-splash::after { display: none; }
.player-card-body { padding: 20px; }
.player-role { font-family: "Courier New", monospace; text-transform: uppercase; }
.mini-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 3px solid var(--ink);
}
.mini-stats div {
    border: 0;
    border-right: 2px solid var(--ink);
    padding: 10px;
}
.mini-stats div:last-child { border-right: 0; }
.mini-stats span, .mini-stats strong { display: block; }
.champ-strip {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 8px;
    margin-top: 18px;
}
.champ-strip-item { text-align: center; font-size: 11px; }
.champ-strip-item img { display: block; margin: auto auto 5px; }

/* Early game */
.timeline-brutal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.timeline-brutal-card { overflow: hidden; }
.minute-stamp {
    background: var(--ink);
    color: var(--white);
    font-size: 72px;
    line-height: .8;
    padding: 24px 18px 18px;
}
.minute-stamp small {
    display: block;
    color: var(--acid);
    font-size: 14px;
    letter-spacing: .15em;
    margin-top: 10px;
}
.state-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 18px;
    border-top: 3px solid var(--ink);
}
.state-row span { font-family: "Courier New", monospace; }
.state-row strong { font-size: 30px; }
.state-row small { grid-column: 1 / -1; }
.state-row.good { background: var(--acid); }
.state-row.even { background: var(--yellow); }
.state-row.bad { background: var(--red); color: white; }
.state-row.bad small { color: white; }

.metric-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--white);
}
.metric-strip > div {
    padding: 20px;
    border-right: 4px solid var(--ink);
}
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span,
.metric-strip small {
    display: block;
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}
.metric-strip strong { display: block; font-size: 42px; }
.huge-strip { grid-template-columns: 1fr 1fr; }
.huge-strip strong { font-size: 80px; }
.black-metric { background: var(--ink); color: white; }
.black-metric small, .black-metric span { color: white; }

.brutal-empty {
    border: 6px solid var(--ink);
    padding: 50px;
    background: var(--red);
    color: white;
    box-shadow: 12px 12px 0 var(--ink);
}
.brutal-empty strong { font-family: "Arial Black"; font-size: 28px; }

/* Objectives */
.objective-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.objective-feature {
    min-height: 150px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.objective-feature.acid { background: var(--acid); }
.objective-icon {
    width: 92px;
    height: 92px;
    object-fit: contain;
    flex: 0 0 auto;
}
.objective-icon.pixel-icon {
    width: 70px;
    height: 70px;
    image-rendering: pixelated;
}
.objective-feature span {
    display: block;
    font-family: "Courier New", monospace;
    font-size: 12px;
}
.objective-feature strong {
    display: block;
    font-size: 46px;
    line-height: 1;
    margin: 6px 0;
}
.objective-feature small { display: block; }

.brutal-panel { padding: 22px; }
.black-panel { background: var(--ink); color: white; }
.panel-label.invert { background: white; }
.brutal-list { border: 3px solid var(--ink); }
.brutal-list > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 14px;
    border-bottom: 2px solid var(--ink);
}
.brutal-list > div:last-child { border-bottom: 0; }
.brutal-list span { font-family: "Courier New", monospace; }
.brutal-list strong { font-family: "Arial Black"; font-size: 26px; }
.brutal-list small { grid-column: 1 / -1; }
.brutal-list.dark { border-color: white; }
.brutal-list.dark > div { border-color: white; }
.brutal-list.dark small { color: #ccc; }

.grub-banner {
    border: 5px solid var(--ink);
    background: var(--acid);
    box-shadow: 10px 10px 0 var(--ink);
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    align-items: center;
}
.grub-banner > div {
    min-height: 115px;
    padding: 18px;
    border-left: 4px solid var(--ink);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.grub-banner img { width: 110px; margin: 10px 18px; }
.grub-banner span { font-family: "Courier New", monospace; font-size: 12px; }
.grub-banner strong { font-family: "Arial Black"; font-size: 24px; }

.warning-panel { background: var(--yellow); }

/* Sessions */
.stack-list { border: 3px solid var(--ink); }
.stack-list div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 12px;
    padding: 12px;
    border-bottom: 2px solid var(--ink);
}
.stack-list div:last-child { border-bottom: 0; }
.stack-list small { grid-column: 1 / -1; }

/* Charts */
canvas {
    background: var(--white);
    border: 3px solid var(--ink);
    padding: 10px;
}

.footer {
    width: min(1240px, calc(100% - 32px));
    margin: auto;
    padding: 22px 0 34px;
    border-top: 5px solid var(--ink);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    text-transform: uppercase;
}

@media (max-width: 1000px) {
    .champion-card-grid, .pair-grid { grid-template-columns: repeat(3,1fr); }
    .timeline-brutal-grid, .objective-feature-grid { grid-template-columns: 1fr 1fr; }
    .grub-banner { grid-template-columns: auto 1fr; }
    .grub-banner > div { border-top: 4px solid var(--ink); }
}

@media (max-width: 820px) {
    .cards, .cards.three { grid-template-columns: 1fr 1fr; }
    .grid-two, .brutal-grid, .player-grid { grid-template-columns: 1fr; }
    .nav-inner { flex-direction: column; }
    .nav-links a { min-height: 44px; }
    .hero { flex-direction: column; align-items: stretch; }
    .record-pill { min-width: 0; }
}

@media (max-width: 600px) {
    .page { width: min(100% - 18px, 1240px); padding-top: 30px; }
    h1 { font-size: 4rem; }
    .cards, .cards.three,
    .timeline-brutal-grid,
    .objective-feature-grid,
    .champion-card-grid,
    .pair-grid { grid-template-columns: 1fr; }
    .metric-strip, .huge-strip { grid-template-columns: 1fr; }
    .metric-strip > div { border-right: 0; border-bottom: 4px solid var(--ink); }
    .metric-strip > div:last-child { border-bottom: 0; }
    .mini-stats { grid-template-columns: 1fr 1fr; }
    .champ-strip { grid-template-columns: repeat(3,1fr); }
    .objective-feature { min-height: 120px; }
    .grub-banner { grid-template-columns: 1fr; }
    .grub-banner img { margin: 12px auto; }
    .grub-banner > div { border-left: 0; border-top: 4px solid var(--ink); }
    .footer { width: min(100% - 18px,1240px); flex-direction: column; }
}


/* ==========================================================
   v4.1 layout fixes
   ========================================================== */

/* All objective cards should carry equal visual weight. */
.objective-feature {
    background: var(--white);
}

.objective-feature.acid {
    background: var(--white);
}

/* Old standalone Void Grub banner is intentionally retired. */
.grub-banner {
    display: none !important;
}

/* Comfort pick cards: fixed internal grid prevents long names
   from changing icon alignment or making individual cards wonky. */
.champion-card-grid {
    align-items: stretch;
}

.champion-card {
    min-width: 0;
    min-height: 230px;
    height: 100%;
    padding: 22px;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    text-align: left;
}

.champion-card-icon {
    width: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.champion-card .champion-icon.large {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
}

.champion-card-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

.champion-card .player-label {
    display: block;
    min-height: 2.5em;
    margin-bottom: 7px;
    color: var(--ink);
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.champion-card .champion-name {
    display: block;
    margin: 0 0 10px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 20px;
    line-height: 1;
}

.champion-record {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 8px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.15;
}

.champion-record span {
    color: var(--ink);
}

.champion-card small {
    display: block;
    margin-top: auto;
    padding-top: 8px;
    color: #333;
    font-family: "Courier New", monospace;
    font-weight: 900;
    text-transform: uppercase;
}

/* Keep five cards evenly distributed on wide screens. */
@media (min-width: 1180px) {
    .champion-card-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Give cards more room before collapsing to a single column. */
@media (max-width: 1179px) and (min-width: 761px) {
    .champion-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .champion-card {
        min-height: 190px;
    }
}

@media (max-width: 760px) {
    .champion-card-grid {
        grid-template-columns: 1fr;
    }

    .champion-card {
        min-height: 0;
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .champion-card .champion-icon.large {
        width: 64px;
        height: 64px;
    }

    .champion-card-icon {
        width: 72px;
    }
}


/* v4.2 MATCHES */
.match-list{display:grid;gap:18px}
.match-row{display:grid;grid-template-columns:150px minmax(0,1fr) 54px;min-height:155px;border:4px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--ink);color:var(--ink);text-decoration:none}
.match-row:hover{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--ink)}
.match-result-block{padding:18px;border-right:4px solid var(--ink);display:flex;flex-direction:column;justify-content:center}
.match-win .match-result-block{background:var(--acid)}
.match-loss .match-result-block{background:var(--red);color:#fff}
.match-result-block>span,.match-meta,.match-objective-strip{font-family:"Courier New",monospace}
.match-result-block strong{font-family:"Arial Black",Arial,sans-serif;font-size:44px;line-height:1;margin:7px 0}
.match-main{min-width:0;padding:14px 18px}
.match-meta{display:flex;justify-content:space-between;font-size:11px;margin-bottom:12px}
.comp-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.comp{display:flex;gap:7px}.comp.enemy{justify-content:flex-end}
.comp img{width:48px;height:48px;object-fit:cover;border:3px solid var(--ink)}
.match-objective-strip{display:flex;flex-wrap:wrap;gap:8px 18px;border-top:2px solid var(--ink);padding-top:10px;margin-top:12px;font-size:11px}
.match-arrow{display:grid;place-items:center;border-left:4px solid var(--ink);background:var(--yellow);font-family:"Arial Black";font-size:28px}
.positive{color:#13762d!important}.negative{color:#c30000!important}
.back-link{display:inline-block;margin-bottom:24px;font-family:"Courier New",monospace;font-weight:900}
.match-detail-header{border:6px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:28px;display:flex;justify-content:space-between;align-items:end;gap:30px}
.detail-win{background:var(--acid)}.detail-loss{background:var(--red);color:#fff}
.match-detail-header h1{margin:0;font-size:clamp(5rem,12vw,10rem)}
.match-detail-header p{font-family:"Courier New",monospace;margin:0}
.final-gold{min-width:220px;border:4px solid var(--ink);background:var(--white);color:var(--ink);padding:18px}
.final-gold span,.final-gold small{display:block;font-family:"Courier New",monospace}
.final-gold strong{display:block;font-family:"Arial Black";font-size:34px;margin:5px 0}
.scoreboard{padding:0}.score-player{display:flex;align-items:center;gap:10px}.score-player img{width:44px;height:44px;object-fit:cover;border:3px solid var(--ink)}.score-player strong,.score-player small{display:block}
.match-detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px}
.gold-state-list{border:3px solid var(--ink)}.gold-state-list>div{display:flex;justify-content:space-between;padding:15px;border-bottom:2px solid var(--ink)}.gold-state-list>div:last-child{border-bottom:0}.gold-state-list span{font-family:"Courier New",monospace}.gold-state-list strong{font-family:"Arial Black";font-size:24px}
.objective-versus{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--ink)}.objective-versus>div{text-align:center;padding:12px;border-right:2px solid var(--ink)}.objective-versus>div:last-child{border-right:0}.objective-versus img{display:block;width:58px;height:58px;object-fit:contain;margin:0 auto 7px}.objective-versus span,.objective-versus strong{display:block}.objective-versus span{font-family:"Courier New",monospace;font-size:10px}.objective-versus strong{font-family:"Arial Black";font-size:24px}
.event-timeline{border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}.event-row{display:grid;grid-template-columns:75px 42px 1fr;align-items:center;min-height:56px;border-bottom:2px solid var(--ink)}.event-row:last-child{border-bottom:0}.event-row time{height:100%;display:grid;place-items:center;border-right:2px solid var(--ink);font-family:"Arial Black"}.event-row img{width:34px;height:34px;object-fit:contain;margin:auto}.event-dot{width:14px;height:14px;margin:auto;border:3px solid var(--ink);background:var(--yellow)}.event-row>span{padding:0 12px;font-family:"Courier New",monospace;font-size:12px}.event-us{background:#e8ffc4}.event-enemy{background:#ffd9d7}
@media(max-width:850px){.match-row{grid-template-columns:110px 1fr}.match-arrow{display:none}.match-detail-header{flex-direction:column;align-items:stretch}.match-detail-grid{grid-template-columns:1fr}.objective-versus{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.match-row{grid-template-columns:1fr}.match-result-block{border-right:0;border-bottom:4px solid var(--ink)}.comp-row{grid-template-columns:1fr}.comp.enemy{justify-content:flex-start}.comp-row>b{display:none}}


/* ==========================================================
   v4.3 USERNAME DISPLAY
   ========================================================== */

/* Riot tags are removed in app.py; this keeps long game names
   contained inside the brutalist player cards. */
.player-card-body h2 {
    max-width: 100%;
    margin: 4px 0 16px;
    font-size: clamp(1.9rem, 3vw, 3.25rem);
    line-height: .9;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Comfort-pick player labels should remain compact even with
   naturally long game names. */
.champion-card .player-label {
    min-height: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Match scoreboard names should never force the table wider
   than the champion/stat content requires. */
.score-player > div {
    min-width: 0;
}

.score-player strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ==========================================================
   v4.4 MATCH DETAIL SCORE
   ========================================================== */

.hero-score {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(.12em, 1.3vw, .28em);
    margin: 14px 0 6px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: clamp(5rem, 11vw, 9.5rem);
    font-weight: 900;
    line-height: .78;
    letter-spacing: -.065em;
    white-space: nowrap;
}

.hero-score span {
    display: block;
    letter-spacing: -.065em;
}

.hero-score b {
    display: block;
    flex: 0 0 auto;
    margin: 0 .02em;
    font: inherit;
    font-size: .72em;
    line-height: 1;
    letter-spacing: 0;
}

/* The old generic H1 rule is no longer responsible for the match score. */
.match-detail-header .hero-score + p {
    margin-top: 16px;
}

@media (max-width: 650px) {
    .hero-score {
        font-size: clamp(4rem, 21vw, 7rem);
        gap: .12em;
    }
}


/* ==========================================================
   v4.5 OBJECTIVE QUANTITY + DIFFERENTIAL
   ========================================================== */

.quantity-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:24px;
}

.quantity-table{padding:0;overflow:hidden}
.quantity-head,.quantity-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    align-items:center;
}
.quantity-head{
    background:var(--ink);
    color:#fff;
    font-family:"Courier New",monospace;
    font-size:11px;
}
.quantity-head span,.quantity-row span,.quantity-row strong{
    padding:14px;
    border-right:2px solid var(--ink);
}
.quantity-head span:last-child,.quantity-row strong:last-child{border-right:0}
.quantity-row{border-bottom:2px solid var(--ink)}
.quantity-row:last-child{border-bottom:0}
.quantity-row strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:24px;
}
.chart-panel{display:flex;align-items:center}

.three-analysis-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.two-analysis-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.compact-objective-list{
    border:3px solid var(--ink);
}
.compact-objective-list>div{
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-bottom:2px solid var(--ink);
}
.compact-objective-list>div:last-child{border-bottom:0}
.compact-objective-list span{
    font-family:"Courier New",monospace;
}
.compact-objective-list b{
    font-family:"Courier New",monospace;
    font-size:11px;
}
.compact-objective-list strong{
    min-width:68px;
    text-align:right;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:22px;
}

.combo-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}
.combo-card{
    min-height:150px;
    border:4px solid var(--ink);
    background:var(--white);
    box-shadow:7px 7px 0 var(--ink);
    padding:16px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.combo-card span{
    font-family:"Courier New",monospace;
    font-size:11px;
}
.combo-card strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:42px;
}
.combo-card small{
    font-family:"Courier New",monospace;
}

.secondary-section{
    opacity:.85;
}
.first-objective-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:3px solid var(--ink);
}
.first-objective-grid article{
    padding:16px;
    border-right:2px solid var(--ink);
}
.first-objective-grid article:last-child{border-right:0}
.first-objective-grid span,.first-objective-grid small{
    display:block;
    font-family:"Courier New",monospace;
}
.first-objective-grid strong{
    display:block;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:32px;
    margin:5px 0;
}

@media(max-width:1000px){
    .quantity-layout{grid-template-columns:1fr}
    .three-analysis-grid{grid-template-columns:1fr}
    .combo-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
    .two-analysis-grid{grid-template-columns:1fr}
    .combo-grid{grid-template-columns:1fr}
    .first-objective-grid{grid-template-columns:1fr 1fr}
    .first-objective-grid article:nth-child(2){border-right:0}
    .first-objective-grid article:nth-child(-n+2){border-bottom:2px solid var(--ink)}
}


/* ==========================================================
   v4.6 ROLE IMPACT
   ========================================================== */

.role-impact-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:16px;
}

.role-impact-card{
    border:4px solid var(--ink);
    background:var(--white);
    box-shadow:7px 7px 0 var(--ink);
    padding:17px;
}

.role-impact-card>span{
    display:block;
    font-family:"Courier New",monospace;
    font-size:12px;
}

.role-impact-card>strong{
    display:block;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:46px;
    line-height:1;
    margin:12px 0 18px;
}

.role-impact-card>strong small{
    font-size:14px;
    color:var(--ink);
}

.role-impact-card>div{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:8px;
    padding:8px 0;
    border-top:2px solid var(--ink);
}

.role-impact-card b{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:20px;
}

.role-impact-card small{
    font-family:"Courier New",monospace;
    font-size:10px;
}

.role-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}

.role-detail-card{
    min-width:0;
}

.role-detail-header{
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:18px;
}

.role-detail-header h2{
    margin:0;
}

.role-detail-header>small{
    max-width:180px;
    font-family:"Courier New",monospace;
    text-align:right;
}

.role-state-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:20px;
}

.role-state-columns h3{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:18px;
    margin-bottom:8px;
}

.role-state-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:3px 10px;
    padding:11px;
    border:3px solid var(--ink);
    border-bottom:0;
}

.role-state-row:last-child{
    border-bottom:3px solid var(--ink);
}

.role-state-row span{
    font-family:"Courier New",monospace;
}

.role-state-row strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:22px;
}

.role-state-row small{
    grid-column:1/-1;
}

.role-state-row.ahead{background:var(--acid)}
.role-state-row.even{background:var(--yellow)}
.role-state-row.behind{background:#ffd0cd}

.role-objective-impact{
    margin-top:24px;
    padding-top:18px;
    border-top:4px solid var(--ink);
}

.role-objective-impact h3{
    margin:14px 0 8px;
    font-family:"Courier New",monospace;
    font-size:12px;
}

.role-objective-impact>div{
    display:grid;
    grid-template-columns:repeat(6,auto);
    gap:0;
    border:3px solid var(--ink);
    background:var(--acid);
}

.role-objective-impact>div.behind-objectives{
    background:#ffd0cd;
}

.role-objective-impact span,
.role-objective-impact strong{
    padding:9px 7px;
    text-align:center;
    border-right:1px solid var(--ink);
}

.role-objective-impact span{
    font-family:"Courier New",monospace;
    font-size:9px;
}

.role-objective-impact strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:16px;
}

@media(max-width:1100px){
    .role-impact-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:850px){
    .role-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:650px){
    .role-impact-grid{
        grid-template-columns:1fr;
    }

    .role-state-columns{
        grid-template-columns:1fr;
    }

    .role-objective-impact>div{
        grid-template-columns:repeat(3,1fr);
    }
}


/* ==========================================================
   v4.7 LEAGUE ROLE ICONS
   ========================================================== */

.role-icon{
    display:block;
    object-fit:contain;
    flex:0 0 auto;
}

/* Riot's role SVGs are naturally dark; white card backgrounds
   keep them crisp and readable. */
.role-icon-small{
    width:30px;
    height:30px;
}

.role-icon-table{
    width:28px;
    height:28px;
}

.role-icon-large{
    width:58px;
    height:58px;
}

.role-card-title{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:32px;
}

.role-card-title span{
    font-family:"Courier New",monospace;
    font-size:12px;
    font-weight:900;
}

.role-table-label{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:125px;
}

.role-detail-title{
    display:flex;
    align-items:center;
    gap:14px;
}

.role-detail-title .role-icon-large{
    padding:8px;
    border:3px solid var(--ink);
    background:var(--white);
    box-shadow:4px 4px 0 var(--ink);
}

.role-detail-title .panel-label{
    margin-bottom:4px;
}

@media(max-width:650px){
    .role-icon-large{
        width:50px;
        height:50px;
    }

    .role-table-label{
        min-width:105px;
    }
}


/* ==========================================================
   v4.8 SPORTS-BROADCAST BRUTALISM
   ========================================================== */

:root{
    --ink:#050505;
    --paper:#0b0b0b;
    --white:#f1efe6;
    --acid:#d9ff00;
    --yellow:#f1d83a;
    --red:#ff3b30;
    --blue:#65b8ff;
    --purple:#b45cff;
    --muted:#a7a7a7;
    --panel:#111111;
    --line:#3a3a3a;
}

html,body{
    background:#060606 !important;
    color:var(--white);
}

body{
    margin:0;
}

.app-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:205px minmax(0,1fr);
    background:#060606;
}

.app-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    border-right:2px solid var(--line);
    background:#050505;
    display:flex;
    flex-direction:column;
    z-index:20;
}

.brand-block{
    display:block;
    padding:20px 20px 18px;
    border-bottom:2px solid var(--line);
    color:var(--white);
    text-decoration:none;
}

.brand-block strong{
    display:block;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:54px;
    line-height:.82;
    letter-spacing:-.08em;
}

.brand-block span{
    display:block;
    margin-top:12px;
    color:var(--acid);
    font-family:"Arial Black",Arial,sans-serif;
    font-size:21px;
    letter-spacing:.03em;
}

.brand-block small{
    display:block;
    margin-top:8px;
    font-family:"Courier New",monospace;
    color:var(--muted);
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
}

.sidebar-nav a{
    position:relative;
    padding:20px 18px 20px 24px;
    border-bottom:1px solid var(--line);
    color:var(--white);
    text-decoration:none;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:14px;
    letter-spacing:.02em;
}

.sidebar-nav a:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0;
    background:var(--acid);
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
    background:#111;
}

.sidebar-nav a.active{
    color:#050505;
    background:var(--acid);
}

.sidebar-nav a.active:before{
    width:10px;
    background:#fff;
}

.sidebar-stamp{
    margin-top:auto;
    border-top:2px solid var(--line);
    padding:18px;
}

.sidebar-stamp span{
    display:block;
    color:var(--acid);
    font-family:"Arial Black",Arial,sans-serif;
    font-size:17px;
}

.sidebar-stamp small{
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-family:"Courier New",monospace;
    font-size:9px;
}

.app-stage{
    min-width:0;
}

.mobile-bar{
    display:none;
}

.page{
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:26px 26px 60px !important;
}

.page-header{
    margin-bottom:24px !important;
    padding:0 0 18px !important;
    border-bottom:2px solid var(--line) !important;
    background:transparent !important;
    box-shadow:none !important;
}

.page-header h1{
    margin:4px 0 0 !important;
    color:var(--white) !important;
    font-family:"Arial Black",Arial,sans-serif !important;
    font-size:clamp(3.2rem,7vw,6.8rem) !important;
    line-height:.8 !important;
    letter-spacing:-.055em !important;
}

.page-header p{
    color:var(--muted) !important;
    font-family:"Courier New",monospace !important;
}

.kicker-block,
.panel-label{
    display:inline-block;
    padding:6px 10px;
    border:2px solid var(--acid) !important;
    background:transparent !important;
    color:var(--acid) !important;
    font-family:"Courier New",monospace !important;
    font-weight:900;
    letter-spacing:.08em;
}

.section{
    margin-top:28px !important;
}

.section-title{
    margin-bottom:12px !important;
    padding:10px 0 10px !important;
    border-top:2px solid var(--line);
    border-bottom:1px solid var(--line);
}

.section-title h2{
    margin:0 !important;
    color:var(--white) !important;
    font-family:"Arial Black",Arial,sans-serif !important;
    font-size:clamp(1.55rem,3vw,2.8rem) !important;
    line-height:.95 !important;
    letter-spacing:-.035em;
}

.card,
.brutal-panel,
.objective-feature,
.combo-card,
.role-impact-card,
.match-row,
.event-timeline,
.final-gold,
.quantity-table,
.chart-panel{
    border:1px solid var(--line) !important;
    border-radius:0 !important;
    background:var(--panel) !important;
    color:var(--white) !important;
    box-shadow:none !important;
}

.brutal-panel{
    padding:18px !important;
}

table{
    color:var(--white) !important;
}

table th{
    background:#0a0a0a !important;
    color:var(--muted) !important;
    border-color:var(--line) !important;
    font-family:"Courier New",monospace !important;
    font-size:10px !important;
}

table td{
    border-color:var(--line) !important;
}

table tbody tr:nth-child(odd){
    background:#111 !important;
}

table tbody tr:nth-child(even){
    background:#0b0b0b !important;
}

.objective-feature-grid{
    gap:0 !important;
    border:1px solid var(--line);
}

.objective-feature{
    min-height:118px !important;
    border:0 !important;
    border-right:1px solid var(--line) !important;
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    align-items:center;
    padding:15px !important;
}

.objective-feature:last-child{
    border-right:0 !important;
}

.objective-icon{
    width:48px !important;
    height:48px !important;
    filter:saturate(1.2) contrast(1.15);
}

.objective-feature span{
    color:var(--muted) !important;
    font-family:"Courier New",monospace !important;
    font-size:10px !important;
}

.objective-feature strong{
    color:var(--acid) !important;
    font-family:"Arial Black",Arial,sans-serif !important;
    font-size:34px !important;
    line-height:1 !important;
}

.objective-feature small{
    color:var(--muted) !important;
    font-family:"Courier New",monospace !important;
}

.quantity-head{
    background:#070707 !important;
    color:var(--muted) !important;
}

.quantity-row{
    border-color:var(--line) !important;
    background:#0c0c0c;
}

.quantity-row strong{
    color:var(--acid);
}

.compact-objective-list{
    border:1px solid var(--line) !important;
}

.compact-objective-list>div{
    border-color:var(--line) !important;
    background:#0c0c0c;
}

.compact-objective-list>div:nth-child(even){
    background:#111;
}

.compact-objective-list strong{
    color:var(--acid);
}

.combo-grid{
    gap:0 !important;
    border:1px solid var(--line);
}

.combo-card{
    min-height:140px !important;
    border:0 !important;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    padding:15px !important;
}

.combo-card strong{
    color:var(--acid);
    font-size:38px !important;
}

.first-objective-grid{
    border:1px solid var(--line) !important;
}

.first-objective-grid article{
    border-color:var(--line) !important;
    background:#0d0d0d;
}

.first-objective-grid strong{
    color:var(--white);
}

.secondary-section{
    opacity:.68 !important;
}

/* ROLE PAGE */
.role-impact-grid{
    gap:0 !important;
    border:1px solid var(--line);
}

.role-impact-card{
    border:0 !important;
    border-right:1px solid var(--line) !important;
    min-height:210px;
}

.role-impact-card:last-child{
    border-right:0 !important;
}

.role-card-title{
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
}

.role-card-title span{
    color:var(--white) !important;
    font-family:"Arial Black",Arial,sans-serif !important;
    font-size:20px !important;
}

.role-impact-card>strong{
    color:var(--acid);
    font-size:54px !important;
}

.role-impact-card>div{
    border-color:var(--line) !important;
}

.role-icon-large,
.role-detail-title .role-icon-large{
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:invert(1);
}

.role-icon-small,
.role-icon-table{
    filter:invert(1);
}

.role-state-row{
    border:1px solid var(--line) !important;
    background:#0c0c0c !important;
}

.role-state-row.ahead strong{color:var(--acid)}
.role-state-row.even strong{color:var(--yellow)}
.role-state-row.behind strong{color:var(--red)}

.role-objective-impact{
    border-color:var(--line) !important;
}

.role-objective-impact>div,
.role-objective-impact>div.behind-objectives{
    border:1px solid var(--line) !important;
    background:#0b0b0b !important;
}

.role-objective-impact strong{
    color:var(--acid);
}

/* MATCHES */
.match-row{
    grid-template-columns:130px minmax(0,1fr) 48px !important;
}

.match-result-block{
    border-color:var(--line) !important;
}

.match-win .match-result-block{
    background:var(--acid) !important;
    color:#050505 !important;
}

.match-loss .match-result-block{
    background:var(--red) !important;
    color:#fff !important;
}

.match-arrow{
    border-color:var(--line) !important;
    background:#0b0b0b !important;
    color:var(--acid) !important;
}

.comp img,
.score-player img{
    border:1px solid var(--line) !important;
}

.match-detail-header{
    border:1px solid var(--line) !important;
    box-shadow:none !important;
}

.detail-win{
    background:var(--acid) !important;
    color:#050505 !important;
}

.detail-loss{
    background:var(--red) !important;
}

.final-gold{
    background:#050505 !important;
}

.hero-score{
    color:inherit !important;
}

.gold-state-list,
.objective-versus{
    border:1px solid var(--line) !important;
}

.gold-state-list>div,
.objective-versus>div{
    border-color:var(--line) !important;
}

.event-row{
    border-color:var(--line) !important;
}

.event-us{
    background:#101710 !important;
}

.event-enemy{
    background:#1b0d0d !important;
}

/* Draft / champion cards */
.champion-card{
    background:#101010 !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
}

.champion-card .player-label,
.champion-card .champion-name,
.champion-record span{
    color:var(--white) !important;
}

.champion-card small{
    color:var(--muted) !important;
}

.champion-card .champion-icon.large{
    border:1px solid var(--line) !important;
}

/* Charts */
canvas{
    filter:saturate(1.15);
}

/* footer */
.broadcast-footer{
    border-top:2px solid var(--line);
    background:#050505 !important;
    color:var(--white) !important;
    padding:18px 24px !important;
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center;
    gap:28px;
}

.broadcast-footer strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:28px;
}

.broadcast-footer span{
    color:var(--acid);
    font-family:"Courier New",monospace;
    text-align:center;
}

.broadcast-footer small{
    color:var(--muted);
    font-family:"Courier New",monospace;
}

/* override legacy pale backgrounds */
.pre-season,
.container,
.sub-container,
.heading-container,
main,
section{
    background:transparent;
}

@media(max-width:1050px){
    .app-shell{
        grid-template-columns:170px minmax(0,1fr);
    }

    .brand-block strong{
        font-size:43px;
    }

    .sidebar-nav a{
        padding:16px 14px 16px 20px;
        font-size:12px;
    }

    .role-impact-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}

@media(max-width:780px){
    .app-shell{
        display:block;
    }

    .app-sidebar{
        display:none;
    }

    .mobile-bar{
        position:sticky;
        top:0;
        z-index:50;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        padding:12px 14px;
        border-bottom:2px solid var(--line);
        background:#050505;
    }

    .mobile-brand{
        color:var(--acid);
        text-decoration:none;
        font-family:"Arial Black",Arial,sans-serif;
        font-size:24px;
    }

    .mobile-bar nav{
        display:flex;
        gap:10px;
    }

    .mobile-bar nav a{
        color:var(--white);
        text-decoration:none;
        font-family:"Courier New",monospace;
        font-size:9px;
    }

    .page{
        padding:18px 14px 42px !important;
    }

    .objective-feature-grid{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
    }

    .objective-feature{
        border-bottom:1px solid var(--line) !important;
    }

    .broadcast-footer{
        grid-template-columns:1fr !important;
        text-align:center;
    }
}

@media(max-width:520px){
    .objective-feature-grid{
        grid-template-columns:1fr !important;
    }

    .role-impact-grid{
        grid-template-columns:1fr !important;
    }

    .page-header h1{
        font-size:3.4rem !important;
    }
}


/* ==========================================================
   v4.9 LIGHT-FIRST BRUTALISM + CLEANUP
   ========================================================== */

:root,
html[data-theme="light"]{
    --ink:#0b0b0b;
    --paper:#efede3;
    --white:#fffdf5;
    --acid:#d9ff00;
    --yellow:#f3d934;
    --red:#ff4438;
    --blue:#4b95dc;
    --purple:#9d5fe8;
    --muted:#575757;
    --panel:#fffdf5;
    --line:#111111;
    --sidebar:#0b0b0b;
    --sidebar-text:#fffdf5;
}

html[data-theme="dark"]{
    --ink:#f2efe6;
    --paper:#070707;
    --white:#101010;
    --acid:#d9ff00;
    --yellow:#f3d934;
    --red:#ff4438;
    --blue:#65b8ff;
    --purple:#b45cff;
    --muted:#a7a7a7;
    --panel:#111111;
    --line:#3a3a3a;
    --sidebar:#050505;
    --sidebar-text:#f2efe6;
}

html,body{
    background:var(--paper) !important;
    color:var(--ink) !important;
}

.app-shell{
    background:var(--paper) !important;
}

.app-sidebar{
    background:var(--sidebar) !important;
    color:var(--sidebar-text) !important;
}

.brand-block,
.sidebar-nav a{
    color:var(--sidebar-text) !important;
}

.sidebar-nav a.active{
    color:#050505 !important;
}

.sidebar-stamp{
    color:var(--sidebar-text);
}

.unified-page-header{
    margin:0 0 24px !important;
    padding:12px 0 18px !important;
    min-height:0 !important;
    border:0 !important;
    border-bottom:4px solid var(--ink) !important;
    background:transparent !important;
    box-shadow:none !important;
}

.unified-page-header .kicker-block{
    margin-bottom:16px;
}

.unified-page-header h1{
    margin:0 !important;
    color:var(--ink) !important;
    font-size:clamp(3.5rem,6vw,6rem) !important;
    line-height:.86 !important;
}

.unified-page-header p{
    margin:10px 0 0 !important;
    color:var(--muted) !important;
    font-family:"Courier New",monospace !important;
    font-weight:900;
}

.section-title h2{
    color:var(--ink) !important;
}

.card,
.brutal-panel,
.objective-feature,
.combo-card,
.role-impact-card,
.match-row,
.event-timeline,
.final-gold,
.quantity-table,
.chart-panel,
.champion-card{
    background:var(--panel) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}

/* Theme controls */
.theme-toggle{
    width:100%;
    margin-bottom:18px;
    padding:10px 0;
    border:1px solid #444;
    background:transparent;
    color:var(--sidebar-text);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-family:"Courier New",monospace;
    font-weight:900;
}

.theme-toggle-switch{
    width:28px;
    height:14px;
    border:2px solid currentColor;
    position:relative;
}

.theme-toggle-switch:after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    top:1px;
    left:1px;
    background:currentColor;
}

html[data-theme="dark"] .theme-toggle-switch:after{
    left:15px;
}

.mobile-theme-toggle{
    border:0;
    background:transparent;
    color:var(--sidebar-text);
    font-size:18px;
    cursor:pointer;
}

/* FIX: Map control cards */
.objective-feature-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
    border:0 !important;
}

.objective-feature{
    min-height:128px !important;
    border:4px solid var(--ink) !important;
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:center !important;
    padding:18px !important;
    overflow:visible !important;
}

.objective-feature .objective-icon{
    display:block !important;
    width:64px !important;
    height:64px !important;
    object-fit:contain !important;
    visibility:visible !important;
    opacity:1 !important;
}

.objective-feature-copy{
    min-width:0;
}

.objective-feature-copy span,
.objective-feature-copy small{
    display:block !important;
    color:var(--muted) !important;
    font-family:"Courier New",monospace !important;
    font-weight:900;
}

.objective-feature-copy strong{
    display:block !important;
    margin:4px 0 !important;
    color:var(--ink) !important;
    font-family:"Arial Black",Arial,sans-serif !important;
    font-size:38px !important;
    line-height:1 !important;
}

/* First objectives same visual weight as other sections */
.secondary-section{
    opacity:1 !important;
}

.first-objective-grid article{
    background:var(--panel) !important;
    color:var(--ink) !important;
}

.first-objective-grid strong{
    color:var(--ink) !important;
}

/* Early game: compact, legible, no oversized WR blocks */
.compact-early-grid,
.early-grid{
    gap:20px !important;
}

.early-grid > article,
.early-column{
    min-width:0;
}

.early-grid h2,
.early-grid .minute-number{
    font-size:clamp(2.4rem,4vw,4rem) !important;
}

.early-state-row,
.gold-state-row{
    min-height:0 !important;
    padding:14px 16px !important;
}

.early-state-row strong,
.gold-state-row strong{
    font-size:clamp(1.7rem,2.5vw,2.7rem) !important;
    line-height:1 !important;
}

.early-state-row span,
.early-state-row small,
.gold-state-row span,
.gold-state-row small{
    font-size:11px !important;
}

.early-summary,
.comeback-throw-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;
}

.early-summary .card,
.comeback-throw-grid .card,
.comeback-throw-grid article{
    min-height:150px !important;
    padding:18px !important;
    background:var(--panel) !important;
    color:var(--ink) !important;
}

.early-summary strong,
.comeback-throw-grid strong{
    color:var(--ink) !important;
    font-size:clamp(2.6rem,5vw,4.5rem) !important;
}

/* generic readable stat colors */
.positive{color:#157a32 !important}
.negative{color:#c91910 !important}

html[data-theme="dark"] .positive{color:#7dff9b !important}
html[data-theme="dark"] .negative{color:#ff665d !important}

/* player banner splash focal point support */
.player-splash,
.player-card-splash,
.champion-splash,
.player-card img[src*="/splash/"]{
    object-fit:cover !important;
}

/* Tables */
table{
    color:var(--ink) !important;
}

table th{
    background:var(--ink) !important;
    color:var(--paper) !important;
}

table tbody tr:nth-child(odd){
    background:var(--panel) !important;
}

table tbody tr:nth-child(even){
    background:color-mix(in srgb, var(--panel) 94%, var(--ink) 6%) !important;
}

/* Restore light neutral fills for charts/stat canvases */
.chart-panel{
    background:var(--panel) !important;
}

.broadcast-footer{
    background:var(--sidebar) !important;
    color:var(--sidebar-text) !important;
}

@media(max-width:1000px){
    .objective-feature-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .objective-feature-grid{
        grid-template-columns:1fr !important;
    }

    .early-summary,
    .comeback-throw-grid{
        grid-template-columns:1fr !important;
    }
}


/* ==========================================================
   v4.9.1 PERMANENT LIGHT THEME
   ========================================================== */

:root{
    --ink:#0a0a0a;
    --paper:#efede3;
    --white:#fffdf5;
    --acid:#d9ff00;
    --yellow:#f3d934;
    --red:#ff4438;
    --blue:#4b95dc;
    --purple:#9d5fe8;
    --muted:#505050;
    --panel:#fffdf5;
    --line:#111111;
    --sidebar:#0a0a0a;
    --sidebar-text:#fffdf5;
}

html,
body{
    background:var(--paper) !important;
    color:var(--ink) !important;
}

.app-shell,
.app-stage,
.page,
main,
section{
    background:var(--paper) !important;
    color:var(--ink) !important;
}

.app-sidebar,
.mobile-bar,
.broadcast-footer{
    background:var(--sidebar) !important;
    color:var(--sidebar-text) !important;
}

.brand-block,
.sidebar-nav a,
.mobile-brand,
.mobile-bar nav a{
    color:var(--sidebar-text) !important;
}

.sidebar-nav a.active{
    background:var(--acid) !important;
    color:#050505 !important;
}

.page-header h1,
.section-title h2,
h1,h2,h3,h4,h5,h6{
    color:var(--ink) !important;
}

.page-header p,
small,
.muted{
    color:var(--muted) !important;
}

/* All content cards and panels are light. */
.card,
.brutal-panel,
.objective-feature,
.combo-card,
.role-impact-card,
.match-row,
.event-timeline,
.final-gold,
.quantity-table,
.chart-panel,
.champion-card,
.first-objective-grid article,
.role-state-row,
.role-objective-impact > div,
.role-objective-impact > div.behind-objectives{
    background:var(--panel) !important;
    color:var(--ink) !important;
    border-color:var(--line) !important;
}

/* Make sure old dark-theme table overrides cannot leak through. */
table{
    color:var(--ink) !important;
    background:var(--panel) !important;
}

table th{
    background:var(--ink) !important;
    color:var(--paper) !important;
    border-color:var(--ink) !important;
}

table td{
    color:var(--ink) !important;
    border-color:var(--line) !important;
}

table tbody tr:nth-child(odd){
    background:#fffdf5 !important;
}

table tbody tr:nth-child(even){
    background:#f3f0e6 !important;
}

/* Objective cards */
.objective-feature-copy span,
.objective-feature-copy small,
.compact-objective-list span,
.compact-objective-list b,
.first-objective-grid span,
.first-objective-grid small{
    color:var(--muted) !important;
}

.objective-feature-copy strong,
.compact-objective-list strong,
.first-objective-grid strong,
.quantity-row strong{
    color:var(--ink) !important;
}

/* Roles */
.role-card-title span,
.role-impact-card > span,
.role-impact-card b,
.role-table-label strong,
.role-detail-card,
.role-detail-card h2,
.role-detail-card h3{
    color:var(--ink) !important;
}

.role-impact-card > strong{
    color:var(--ink) !important;
}

.role-state-row.ahead{
    background:var(--acid) !important;
    color:#050505 !important;
}

.role-state-row.even{
    background:var(--yellow) !important;
    color:#050505 !important;
}

.role-state-row.behind{
    background:#ffd0cd !important;
    color:#050505 !important;
}

/* Match colors */
.match-win .match-result-block{
    background:var(--acid) !important;
    color:#050505 !important;
}

.match-loss .match-result-block{
    background:var(--red) !important;
    color:#fff !important;
}

.match-arrow{
    background:var(--yellow) !important;
    color:#050505 !important;
}

.detail-win{
    background:var(--acid) !important;
    color:#050505 !important;
}

.detail-loss{
    background:var(--red) !important;
    color:#fff !important;
}

.final-gold{
    background:var(--panel) !important;
    color:var(--ink) !important;
}

/* Early-game state blocks */
.early-state-row.ahead,
.gold-state-row.ahead{
    background:var(--acid) !important;
    color:#050505 !important;
}

.early-state-row.even,
.gold-state-row.even{
    background:var(--yellow) !important;
    color:#050505 !important;
}

.early-state-row.behind,
.gold-state-row.behind{
    background:var(--red) !important;
    color:#fff !important;
}

/* Ensure any old theme-toggle elements stay gone if cached markup exists. */
.theme-toggle,
.mobile-theme-toggle{
    display:none !important;
}

/* Neutralize dark-only selectors if browser still has data-theme set. */
html[data-theme="dark"],
html[data-theme="light"]{
    --ink:#0a0a0a !important;
    --paper:#efede3 !important;
    --white:#fffdf5 !important;
    --panel:#fffdf5 !important;
    --line:#111111 !important;
    --muted:#505050 !important;
    --sidebar:#0a0a0a !important;
    --sidebar-text:#fffdf5 !important;
    background:var(--paper) !important;
    color:var(--ink) !important;
}


/* ==========================================================
   v4.9.2 COMPLETE LIGHT OVERRIDE
   Remove leftover hard-coded dark fills from v4.8
   ========================================================== */

/* Objective quantity / differential lists */
.compact-objective-list,
.compact-objective-list > div,
.compact-objective-list > div:nth-child(odd),
.compact-objective-list > div:nth-child(even),
.quantity-table,
.quantity-row,
.quantity-row:nth-child(odd),
.quantity-row:nth-child(even),
.quantity-head + .quantity-row,
.role-objective-impact > div,
.role-objective-impact > div.behind-objectives,
.gold-state-list,
.gold-state-list > div,
.objective-versus,
.objective-versus > div,
.event-timeline,
.event-row,
.event-row.event-us,
.event-row.event-enemy {
    background: var(--panel) !important;
    color: var(--ink) !important;
}

/* Keep deliberate semantic state colors only where they mean something. */
.role-state-row.ahead,
.early-state-row.ahead,
.gold-state-row.ahead {
    background: var(--acid) !important;
    color: #050505 !important;
}

.role-state-row.even,
.early-state-row.even,
.gold-state-row.even {
    background: var(--yellow) !important;
    color: #050505 !important;
}

.role-state-row.behind,
.early-state-row.behind,
.gold-state-row.behind {
    background: #ffd0cd !important;
    color: #050505 !important;
}

/* Objective labels and values */
.compact-objective-list span,
.compact-objective-list b,
.quantity-row span,
.quantity-head span,
.role-objective-impact span,
.role-objective-impact strong,
.gold-state-list span,
.gold-state-list strong,
.objective-versus span,
.objective-versus strong,
.event-row time,
.event-row > span {
    color: var(--ink) !important;
}

.compact-objective-list strong,
.quantity-row strong {
    color: var(--ink) !important;
}

/* Header row can remain black for contrast. */
.quantity-head {
    background: var(--ink) !important;
    color: var(--paper) !important;
}

.quantity-head span {
    color: var(--paper) !important;
}

/* Remove accidental opacity/dimming anywhere in objective analysis. */
.objectives-page,
.secondary-section,
.first-objective-grid,
.first-objective-grid article,
.compact-objective-list,
.quantity-table {
    opacity: 1 !important;
}

/* Chart wrappers stay cream rather than dark. */
.chart-panel,
.chart-panel canvas,
canvas {
    background: var(--panel) !important;
}

/* Player / draft cards should never inherit dark panel fill. */
.player-card,
.player-card-body,
.champion-card,
.champion-card-copy,
.scoreboard,
.table-wrap {
    background: var(--panel) !important;
    color: var(--ink) !important;
}

/* Force body copy inside light cards to remain readable. */
.card p,
.card span,
.card small,
.brutal-panel p,
.brutal-panel span,
.brutal-panel small,
.objective-feature p,
.objective-feature span,
.objective-feature small,
.combo-card span,
.combo-card small {
    color: var(--muted) !important;
}

.card strong,
.brutal-panel strong,
.objective-feature strong,
.combo-card strong {
    color: var(--ink) !important;
}


/* ==========================================================
   v4.9.3 NEON LABEL LEGIBILITY
   Keep the acid green, but use it as a filled label.
   ========================================================== */

.kicker-block,
.panel-label,
.role-card-title .panel-label,
.role-detail-title .panel-label {
    background: var(--acid) !important;
    color: #050505 !important;
    border: 3px solid #050505 !important;
    box-shadow: 3px 3px 0 #050505 !important;
    padding: 6px 10px !important;
    font-family: "Courier New", monospace !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-shadow: none !important;
}

/* Small objective/card category labels */
.brutal-panel > .panel-label,
.combo-card > span:first-child,
.role-impact-card > span:first-child {
    background: var(--acid) !important;
    color: #050505 !important;
}

/* Keep neon text only where it is large enough to read comfortably. */
.sidebar-stamp span,
.brand-block span,
.broadcast-footer span {
    color: var(--acid) !important;
}

/* Prevent old outline-only rules from fighting the filled label style. */
.kicker-block:hover,
.panel-label:hover {
    background: var(--acid) !important;
    color: #050505 !important;
}


/* ==========================================================
   v4.9.4 SITE LOGO + FAVICON
   ========================================================== */

.brand-block{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}

.site-logo{
    display:block;
    width:118px;
    height:118px;
    object-fit:contain;
    background:#fff;
    border:4px solid #fff;
}

.brand-block span{
    margin-top:4px !important;
}

.mobile-brand{
    display:flex;
    align-items:center;
    gap:8px;
}

.mobile-brand img{
    width:34px;
    height:34px;
    object-fit:contain;
    background:#fff;
    border:2px solid #fff;
}

@media(max-width:1050px){
    .site-logo{
        width:92px;
        height:92px;
    }
}


/* ==========================================================
   v4.9.5 DRAFT HEADER + TRANSPARENT LOGO
   ========================================================== */

/* Draft uses the same page header system as every other page. */
.draft-hero,
.draft-page-hero,
.hero-draft,
.draft-header-hero {
    display: none !important;
}

body .unified-page-header {
    background: transparent !important;
    background-image: none !important;
    min-height: 0 !important;
}

/* Remove any old draft-only giant title overrides. */
.draft-page .unified-page-header h1,
.draft .unified-page-header h1,
body .unified-page-header h1 {
    font-size: clamp(3.5rem, 6vw, 6rem) !important;
    line-height: .86 !important;
    letter-spacing: -.045em !important;
}

/* Logo itself has transparent outside area; do not add a box behind it. */
.site-logo,
.mobile-brand img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Keep enough spacing around the circular mark. */
.site-logo {
    width: 118px !important;
    height: 118px !important;
    object-fit: contain !important;
}

.mobile-brand img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
}


/* ==========================================================
   v4.10 BAN ANALYTICS
   ========================================================== */

.ban-board-grid{
    display:grid;
    grid-template-columns:1.4fr .8fr;
    gap:22px;
}

.ban-ranking{
    margin-top:16px;
    border:3px solid var(--ink);
}

.ban-ranking-row{
    display:grid;
    grid-template-columns:44px 48px minmax(0,1fr) 54px 145px;
    align-items:center;
    gap:10px;
    min-height:64px;
    padding:8px 10px;
    border-bottom:2px solid var(--ink);
    background:var(--panel);
}

.ban-ranking-row:last-child{
    border-bottom:0;
}

.ban-ranking-row img{
    width:44px;
    height:44px;
    object-fit:cover;
    border:2px solid var(--ink);
}

.ban-ranking-row .ban-rank{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:20px;
}

.ban-ranking-row > strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:18px;
}

.ban-ranking-row > b{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:28px;
    text-align:center;
}

.ban-ranking-row > small{
    color:var(--muted) !important;
    font-family:"Courier New",monospace;
    font-size:9px;
    text-align:right;
}

.ban-habit-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:16px;
    border:3px solid var(--ink);
}

.ban-habit-stats > div{
    min-height:118px;
    padding:14px;
    border-right:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.ban-habit-stats > div:nth-child(even){
    border-right:0;
}

.ban-habit-stats > div:nth-last-child(-n+2){
    border-bottom:0;
}

.ban-habit-stats strong{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:38px;
    color:var(--ink) !important;
}

.ban-habit-stats span{
    font-family:"Courier New",monospace;
    font-size:10px;
    color:var(--muted) !important;
}

.ban-recommendation-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.ban-recommendation-card{
    position:relative;
    min-height:220px;
    padding:16px;
    border:4px solid var(--ink);
    background:var(--panel);
    box-shadow:7px 7px 0 var(--ink);
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto;
    gap:10px 14px;
}

.ban-recommendation-card.low-value{
    background:#fff1a8;
}

.ban-rec-label{
    grid-column:1/-1;
    justify-self:start;
    padding:5px 8px;
    border:2px solid var(--ink);
    background:var(--acid);
    color:#050505 !important;
    font-family:"Courier New",monospace;
    font-weight:900;
    font-size:10px;
}

.ban-recommendation-card.low-value .ban-rec-label{
    background:var(--yellow);
}

.ban-recommendation-card img{
    width:64px;
    height:64px;
    object-fit:cover;
    border:3px solid var(--ink);
}

.ban-recommendation-card > strong{
    align-self:center;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:22px;
    color:var(--ink) !important;
}

.ban-rec-score{
    grid-column:1/-1;
    font-family:"Arial Black",Arial,sans-serif;
    font-size:52px;
    line-height:.9;
}

.ban-recommendation-card > small{
    grid-column:1/-1;
    color:var(--muted) !important;
    font-family:"Courier New",monospace;
}

.ban-recommendation-card p{
    grid-column:1/-1;
    margin:0;
    font-family:"Courier New",monospace;
    font-size:11px;
    color:var(--muted) !important;
}

.ban-empty-state{
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

@media(max-width:1000px){
    .ban-board-grid{
        grid-template-columns:1fr;
    }

    .ban-recommendation-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .ban-recommendation-grid{
        grid-template-columns:1fr;
    }

    .ban-ranking-row{
        grid-template-columns:34px 42px minmax(0,1fr) 44px;
    }

    .ban-ranking-row > small{
        display:none;
    }
}


/* ==========================================================
   v4.10.2 BRUTALISM REFRESH + READABILITY PASS
   ========================================================== */

:root{
    --ink:#050505;
    --paper:#efede3;
    --panel:#fffdf5;
    --acid:#d9ff00;
    --yellow:#f3d934;
    --red:#ff4438;
    --blue:#1488ff;
    --muted:#4a4a4a;
    --line:#050505;
}

/* ---------- Global readability ---------- */

body,
main,
section,
article,
div,
p,
span,
small,
strong,
b,
td,
th,
li,
a,
label{
    text-shadow:none !important;
}

.page,
.section,
.card,
.brutal-panel,
.champion-card,
.pair-card,
.ban-recommendation-card,
.table-wrap,
.objective-feature,
.role-impact-card,
.match-row{
    color:var(--ink) !important;
}

/* Explicitly force readable foregrounds on light panels. */
.card *,
.brutal-panel *,
.champion-card *,
.pair-card *,
.ban-recommendation-card *,
.table-wrap *,
.objective-feature *,
.role-impact-card *,
.match-row *{
    color:var(--ink);
}

/* Muted/supporting copy */
.card small,
.card p,
.brutal-panel small,
.brutal-panel p,
.section-note,
.player-label,
.champion-card-copy small,
.pair-card > span,
.ban-recommendation-card small,
.ban-recommendation-card p{
    color:var(--muted) !important;
}

/* Semantic dark backgrounds keep white text. */
table th,
.match-loss .match-result-block,
.detail-loss,
.app-sidebar,
.app-sidebar *,
.mobile-bar,
.mobile-bar *,
.broadcast-footer,
.broadcast-footer *{
    color:#fffdf5 !important;
}

/* Semantic accent backgrounds use black text. */
.kicker-block,
.panel-label,
.eyebrow,
.ban-rec-label,
.role-state-row.ahead,
.role-state-row.even,
.early-state-row.ahead,
.early-state-row.even,
.gold-state-row.ahead,
.gold-state-row.even{
    color:#050505 !important;
}

/* ---------- Stronger brutalist base ---------- */

.page{
    padding-top:26px !important;
}

.section{
    border-top:4px solid var(--ink) !important;
    padding-top:18px !important;
    margin-top:28px !important;
}

.first-section{
    border-top:0 !important;
    margin-top:14px !important;
}

.section-title{
    align-items:flex-end !important;
    gap:18px !important;
    margin-bottom:16px !important;
}

.section-title h2{
    font-family:"Arial Black", Impact, sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:-.04em !important;
    line-height:.92 !important;
    font-size:clamp(2.4rem,4.2vw,4.8rem) !important;
    margin:4px 0 0 !important;
    color:var(--ink) !important;
}

.unified-page-header{
    border-bottom:5px solid var(--ink) !important;
    padding:8px 0 22px !important;
    margin-bottom:20px !important;
}

.unified-page-header h1{
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:clamp(4rem,7vw,8rem) !important;
    line-height:.82 !important;
    letter-spacing:-.055em !important;
    text-transform:uppercase !important;
    color:var(--ink) !important;
}

/* ---------- Labels ---------- */

.eyebrow,
.kicker-block,
.panel-label{
    display:inline-block !important;
    width:auto !important;
    background:var(--acid) !important;
    color:#050505 !important;
    border:3px solid var(--ink) !important;
    box-shadow:4px 4px 0 var(--ink) !important;
    padding:6px 10px !important;
    font-family:"Courier New", monospace !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    line-height:1 !important;
    text-transform:uppercase !important;
}

/* ---------- Cards ---------- */

.card,
.brutal-panel,
.champion-card,
.pair-card,
.objective-feature,
.role-impact-card,
.ban-recommendation-card{
    background:var(--panel) !important;
    border:4px solid var(--ink) !important;
    box-shadow:7px 7px 0 var(--ink) !important;
    border-radius:0 !important;
}

.champion-card,
.pair-card{
    min-height:250px !important;
}

.champion-card{
    padding:18px !important;
    display:grid !important;
    grid-template-columns:96px 1fr !important;
    gap:18px !important;
    align-items:center !important;
}

.champion-card-icon{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.champion-icon.large,
.champion-card img{
    width:88px !important;
    height:88px !important;
    border:4px solid var(--ink) !important;
    object-fit:cover !important;
    box-shadow:4px 4px 0 var(--ink) !important;
}

.champion-card-copy{
    background:transparent !important;
    color:var(--ink) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
}

.player-label{
    font-family:"Courier New", monospace !important;
    font-size:11px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

.champion-name{
    color:var(--ink) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:28px !important;
    line-height:.95 !important;
    text-transform:uppercase !important;
}

.champion-record{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:2px !important;
}

.champion-record span{
    display:inline-block !important;
    background:var(--acid) !important;
    color:#050505 !important;
    border:3px solid var(--ink) !important;
    padding:5px 8px !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:16px !important;
    line-height:1 !important;
}

.champion-card-copy small{
    color:var(--muted) !important;
    font-family:"Courier New", monospace !important;
    font-weight:900 !important;
    margin-top:8px !important;
}

/* ---------- Pair cards ---------- */

.pair-card{
    padding:18px !important;
}

.pair-icons img{
    border:4px solid var(--ink) !important;
    box-shadow:3px 3px 0 var(--ink) !important;
}

.pair-card > strong{
    color:var(--ink) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:34px !important;
}

.pair-names{
    color:var(--ink) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    text-transform:uppercase !important;
}

/* ---------- Tables ---------- */

.table-wrap{
    border:4px solid var(--ink) !important;
    box-shadow:7px 7px 0 var(--ink) !important;
}

table{
    border-collapse:collapse !important;
    background:var(--panel) !important;
}

table th{
    background:var(--ink) !important;
    color:#fffdf5 !important;
    font-family:"Courier New", monospace !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
    border:2px solid var(--ink) !important;
}

table td{
    color:var(--ink) !important;
    border:2px solid var(--ink) !important;
    font-weight:700 !important;
}

table tbody tr:nth-child(even){
    background:#f3f0e6 !important;
}

table tbody tr:nth-child(odd){
    background:var(--panel) !important;
}

/* ---------- Stat/metric panels ---------- */

.metric-card,
.stat-card,
.summary-card{
    border:4px solid var(--ink) !important;
    box-shadow:6px 6px 0 var(--ink) !important;
    background:var(--panel) !important;
}

.metric-card strong,
.stat-card strong,
.summary-card strong{
    color:var(--ink) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
}

/* ---------- Sidebar stronger brutalism ---------- */

.app-sidebar{
    border-right:5px solid var(--ink) !important;
}

.sidebar-nav a{
    border-bottom:2px solid #181818 !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    text-transform:uppercase !important;
    letter-spacing:.01em !important;
}

.sidebar-nav a.active{
    background:var(--acid) !important;
    color:#050505 !important;
    box-shadow:inset -5px 0 0 var(--ink) !important;
}

/* ---------- Prevent accidental blue/white inherited text ---------- */

.champion-card-copy span:not(.champion-record span),
.champion-card-copy strong,
.champion-card-copy small,
.pair-card span,
.pair-card strong,
.pair-card div,
.ban-ranking-row span,
.ban-ranking-row strong,
.ban-ranking-row b,
.ban-ranking-row small{
    color:var(--ink) !important;
}

.champion-card-copy small,
.pair-card > span,
.ban-ranking-row small{
    color:var(--muted) !important;
}

/* ---------- Mobile ---------- */

@media(max-width:760px){
    .champion-card{
        grid-template-columns:72px 1fr !important;
        min-height:190px !important;
    }

    .champion-icon.large,
    .champion-card img{
        width:64px !important;
        height:64px !important;
    }

    .section-title h2{
        font-size:clamp(2rem,10vw,3.2rem) !important;
    }
}


/* ==========================================================
   v4.10.3 UNIFIED DESIGN SYSTEM
   This block is the final source of truth for shared styling.
   Page-specific layout rules may remain above, but colours,
   typography, cards, headers and tables are normalised here.
   ========================================================== */

:root{
    --bg:#efede3;
    --surface:#fffdf5;
    --surface-alt:#f4f1e8;
    --text:#050505;
    --text-muted:#4b4b4b;
    --border:#050505;
    --acid:#d9ff00;
    --yellow:#f3d934;
    --danger:#ff4438;
    --blue:#168bf8;

    --border-thick:4px;
    --border-medium:3px;
    --shadow-hard:7px 7px 0 var(--border);
    --shadow-small:4px 4px 0 var(--border);
    --page-gap:28px;
}

/* ---------- Universal light theme / text safety ---------- */

html,
body{
    background:var(--bg) !important;
    color:var(--text) !important;
}

body{
    font-family:Arial, Helvetica, sans-serif;
}

/*
   Important: do not use a global "* { color: ... !important }".
   Instead, explicitly define readable text for every light UI surface
   and then define the handful of dark/accent surfaces separately.
*/
.page,
.app-stage,
main,
.section{
    background:var(--bg) !important;
    color:var(--text) !important;
}

.ui-card,
.card,
.brutal-panel,
.table-wrap,
.chart-panel,
.objective-feature,
.combo-card,
.role-impact-card,
.match-row,
.player-card,
.champion-card,
.pair-card,
.ban-recommendation-card,
.ban-list-panel,
.ban-habits-panel,
.event-timeline,
.final-gold,
.quantity-table,
.scoreboard{
    background:var(--surface) !important;
    color:var(--text) !important;
}

.ui-card h1,
.ui-card h2,
.ui-card h3,
.ui-card h4,
.ui-card strong,
.ui-card b,
.card h1,
.card h2,
.card h3,
.card h4,
.card strong,
.card b,
.brutal-panel h1,
.brutal-panel h2,
.brutal-panel h3,
.brutal-panel h4,
.brutal-panel strong,
.brutal-panel b,
.table-wrap td,
.table-wrap td strong,
.table-wrap td b{
    color:var(--text) !important;
}

.ui-card p,
.ui-card small,
.ui-card .muted,
.ui-card .section-note,
.card p,
.card small,
.card .muted,
.brutal-panel p,
.brutal-panel small,
.section-note{
    color:var(--text-muted) !important;
}

/* Make normal spans readable by default inside light cards. */
.ui-card span,
.card span,
.brutal-panel span{
    color:var(--text) !important;
}

/* Re-apply muted semantic spans where appropriate. */
.player-label,
.meta,
.meta-text,
.subtle,
.caption,
.section-note,
.champion-card-copy small,
.pair-card > span,
.ban-ranking-row small,
.objective-feature-copy span,
.objective-feature-copy small{
    color:var(--text-muted) !important;
}

/* ---------- Shared page headers ---------- */

.unified-page-header{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    padding:8px 0 22px !important;
    margin:0 0 22px !important;
    min-height:0 !important;
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-bottom:5px solid var(--border) !important;
    color:var(--text) !important;
}

.unified-page-header h1{
    margin:0 !important;
    color:var(--text) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:clamp(4rem,7vw,7.5rem) !important;
    line-height:.84 !important;
    letter-spacing:-.055em !important;
    text-transform:uppercase !important;
}

.unified-page-header p{
    margin:0 !important;
    color:var(--text-muted) !important;
    font-family:"Courier New", monospace !important;
    font-size:12px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

/* ---------- Shared section headers ---------- */

.section{
    margin-top:var(--page-gap) !important;
    padding-top:20px !important;
    border-top:4px solid var(--border) !important;
}

.first-section{
    margin-top:0 !important;
    border-top:0 !important;
}

.section-title{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-end !important;
    gap:18px !important;
    margin:0 0 18px !important;
}

.section-title h2{
    margin:4px 0 0 !important;
    color:var(--text) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:clamp(2.25rem,4vw,4.6rem) !important;
    line-height:.9 !important;
    letter-spacing:-.045em !important;
    text-transform:uppercase !important;
}

.section-note{
    padding-bottom:4px !important;
    font-family:"Courier New", monospace !important;
    font-size:10px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
}

/* ---------- Shared labels ---------- */

.eyebrow,
.kicker-block,
.panel-label{
    display:inline-block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 !important;
    padding:6px 10px !important;
    background:var(--acid) !important;
    color:var(--text) !important;
    border:var(--border-medium) solid var(--border) !important;
    box-shadow:var(--shadow-small) !important;
    font-family:"Courier New", monospace !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

/* ---------- Shared brutalist cards ---------- */

.ui-card,
.card,
.brutal-panel,
.objective-feature,
.combo-card,
.role-impact-card,
.player-card,
.champion-card,
.pair-card,
.ban-recommendation-card{
    border:var(--border-thick) solid var(--border) !important;
    border-radius:0 !important;
    box-shadow:var(--shadow-hard) !important;
}

.ui-card{
    overflow:visible;
}

/* ---------- Tables ---------- */

.table-wrap{
    border:var(--border-thick) solid var(--border) !important;
    border-radius:0 !important;
    box-shadow:var(--shadow-hard) !important;
    overflow:auto !important;
}

table{
    width:100% !important;
    border-collapse:collapse !important;
    background:var(--surface) !important;
    color:var(--text) !important;
}

table thead,
table th{
    background:var(--border) !important;
    color:var(--surface) !important;
}

table th{
    padding:11px 12px !important;
    border:2px solid var(--border) !important;
    font-family:"Courier New", monospace !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
}

table td{
    padding:11px 12px !important;
    background:transparent !important;
    color:var(--text) !important;
    border:2px solid var(--border) !important;
}

table tbody tr:nth-child(odd){
    background:var(--surface) !important;
}

table tbody tr:nth-child(even){
    background:var(--surface-alt) !important;
}

/* ---------- Metric/stat boxes ---------- */

.metric-card,
.stat-card,
.summary-card,
.dashboard-stat,
.hero-stat{
    background:var(--surface) !important;
    color:var(--text) !important;
    border:var(--border-thick) solid var(--border) !important;
    border-radius:0 !important;
    box-shadow:6px 6px 0 var(--border) !important;
}

.metric-card strong,
.stat-card strong,
.summary-card strong,
.dashboard-stat strong,
.hero-stat strong{
    color:var(--text) !important;
    font-family:"Arial Black", Impact, sans-serif !important;
}

/* ---------- Champion/player cards ---------- */

.champion-card-copy,
.player-card-copy,
.champion-card-copy *,
.player-card-copy *{
    background:transparent !important;
}

.champion-card-copy strong,
.player-card-copy strong,
.champion-name{
    color:var(--text) !important;
}

.champion-record span{
    background:var(--acid) !important;
    color:var(--text) !important;
    border:3px solid var(--border) !important;
}

/* ---------- Objective / role / early game list rows ---------- */

.compact-objective-list,
.compact-objective-list > div,
.quantity-table,
.quantity-row,
.gold-state-list,
.gold-state-list > div,
.role-objective-impact > div,
.event-row{
    background:var(--surface) !important;
    color:var(--text) !important;
}

.compact-objective-list > div,
.quantity-row,
.gold-state-list > div,
.role-objective-impact > div{
    border-color:var(--border) !important;
}

.compact-objective-list span,
.compact-objective-list strong,
.quantity-row span,
.quantity-row strong,
.gold-state-list span,
.gold-state-list strong,
.role-objective-impact span,
.role-objective-impact strong,
.event-row span,
.event-row strong{
    color:var(--text) !important;
}

/* ---------- Semantic states ---------- */

.role-state-row.ahead,
.early-state-row.ahead,
.gold-state-row.ahead,
.match-win .match-result-block,
.detail-win{
    background:var(--acid) !important;
    color:var(--text) !important;
}

.role-state-row.even,
.early-state-row.even,
.gold-state-row.even{
    background:var(--yellow) !important;
    color:var(--text) !important;
}

.role-state-row.behind,
.early-state-row.behind,
.gold-state-row.behind{
    background:#ffd2cf !important;
    color:var(--text) !important;
}

.match-loss .match-result-block,
.detail-loss{
    background:var(--danger) !important;
    color:#fff !important;
}

.match-loss .match-result-block *,
.detail-loss *{
    color:#fff !important;
}

/* ---------- Dark navigation/footer ---------- */

.app-sidebar,
.mobile-bar,
.broadcast-footer{
    background:var(--border) !important;
    color:var(--surface) !important;
}

.app-sidebar a,
.app-sidebar span,
.app-sidebar small,
.app-sidebar strong,
.mobile-bar a,
.mobile-bar span,
.mobile-bar small,
.mobile-bar strong,
.broadcast-footer,
.broadcast-footer *{
    color:var(--surface) !important;
}

.sidebar-nav a.active{
    background:var(--acid) !important;
    color:var(--text) !important;
}

.sidebar-nav a.active *{
    color:var(--text) !important;
}

/* ---------- Charts ---------- */

.chart-panel,
.chart-panel canvas,
canvas{
    background:var(--surface) !important;
}

/* ---------- Remove residual theme/dimming behaviours ---------- */

.secondary-section,
.first-objective-grid,
.objectives-page,
.quantity-table,
.compact-objective-list{
    opacity:1 !important;
}

/* ---------- Uniform spacing ---------- */

.page{
    padding-top:24px !important;
    padding-bottom:42px !important;
}

.page > .section:first-of-type{
    margin-top:0 !important;
}

.page .section + .section{
    margin-top:34px !important;
}

/* ---------- Mobile ---------- */

@media(max-width:800px){
    .unified-page-header h1{
        font-size:clamp(3rem,14vw,5rem) !important;
    }

    .section-title{
        align-items:flex-start !important;
        flex-direction:column !important;
    }

    .section-title h2{
        font-size:clamp(2rem,10vw,3.4rem) !important;
    }

    .ui-card,
    .card,
    .brutal-panel{
        box-shadow:5px 5px 0 var(--border) !important;
    }
}


/* ==========================================================
   v4.10.4 CONTRAST + FUN STATS + ACID VISUALS
   ========================================================== */

/* Champion names: explicit literal foreground prevents any variable
   or legacy theme rule from making the title disappear. */
.champion-card .champion-card-copy .champion-name,
.champion-card .champion-name,
.champion-name{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#050505 !important;
    -webkit-text-fill-color:#050505 !important;
    background:transparent !important;
    mix-blend-mode:normal !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:28px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-transform:uppercase !important;
}

/* Role icons use the same acid-green visual language as the site. */
.role-icon{
    filter:
        brightness(0)
        saturate(100%)
        invert(90%)
        sepia(99%)
        saturate(1593%)
        hue-rotate(19deg)
        brightness(111%)
        contrast(105%) !important;
}

/* Add a hard black backing where role icons sit on light surfaces. */
.role-table-label .role-icon,
.role-card-title .role-icon,
.role-detail-title .role-icon{
    background:#050505 !important;
    border:3px solid #050505 !important;
    padding:5px !important;
    box-sizing:border-box !important;
}

/* Fun stats */
.fun-theme-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.fun-theme-card{
    padding:18px;
    min-height:280px;
}

.fun-theme-top{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.fun-theme-top > strong{
    color:#050505 !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:30px;
    line-height:.95;
    text-transform:uppercase;
}

.fun-theme-record{
    display:flex;
    align-items:center;
    gap:10px;
    margin:22px 0 10px;
}

.fun-theme-record b,
.fun-theme-record span{
    display:inline-block;
    padding:7px 10px;
    border:3px solid #050505;
    background:var(--acid);
    color:#050505 !important;
    font-family:"Arial Black", Impact, sans-serif;
    font-size:20px;
}

.fun-theme-card > small{
    color:var(--text-muted) !important;
    font-family:"Courier New", monospace;
    font-weight:900;
}

.fun-examples{
    margin-top:20px;
    padding-top:12px;
    border-top:3px solid #050505;
}

.fun-examples > span{
    color:#050505 !important;
    font-family:"Courier New", monospace;
    font-size:10px;
    font-weight:900;
}

.fun-examples p{
    margin:7px 0 0;
    color:var(--text-muted) !important;
    font-family:"Courier New", monospace;
    font-size:11px;
}

.fun-record-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.fun-record-card{
    padding:18px;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.fun-record-card > span{
    color:#050505 !important;
    font-family:"Courier New", monospace;
    font-weight:900;
    font-size:11px;
}

.fun-record-card > strong{
    color:#050505 !important;
    font-family:"Arial Black", Impact, sans-serif;
    font-size:48px;
    line-height:1;
}

.fun-record-card > b{
    color:#050505 !important;
    font-family:"Arial Black", Impact, sans-serif;
    font-size:22px;
}

.fun-record-card > small{
    color:var(--text-muted) !important;
    font-family:"Courier New", monospace;
    font-weight:900;
}

.fun-empty-card{
    padding:22px !important;
}

.fun-empty-card strong{
    color:#050505 !important;
    font-family:"Arial Black", Impact, sans-serif !important;
    font-size:24px;
}

.fun-empty-card p{
    max-width:780px;
    color:var(--text-muted) !important;
}

/* Keep Chart.js canvases on the light surface. */
.chart-panel canvas,
canvas{
    background:var(--surface) !important;
}

@media(max-width:1050px){
    .fun-theme-grid,
    .fun-record-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .fun-theme-grid,
    .fun-record-grid{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   v4.10.8 FUN STATS EXPANSION
   ========================================================== */

.fun-record-link{
    text-decoration:none !important;
}

.fun-record-link:hover{
    transform:translate(-2px,-2px);
    box-shadow:10px 10px 0 var(--border) !important;
}

.fun-record-card strong{
    color:#050505 !important;
    font-size:clamp(2rem,3.4vw,3.8rem) !important;
}

.fun-record-card small{
    color:var(--text-muted) !important;
    line-height:1.35;
}

.fun-comp-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.fun-comp-card{
    padding:18px;
}

.fun-comp-icons{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
    margin-bottom:16px;
}

.fun-comp-icons img{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    border:3px solid #050505;
}

.fun-comp-card > strong{
    display:block;
    color:#050505 !important;
    font-family:"Arial Black",Impact,sans-serif;
    font-size:34px;
}

.fun-comp-card > span{
    color:var(--text-muted) !important;
    font-family:"Courier New",monospace;
    font-weight:900;
}

@media(max-width:1000px){
    .fun-comp-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .fun-comp-grid{
        grid-template-columns:1fr;
    }
}


/* ==========================================================
   v4.10.9 COMMUNITYDRAGON SKIN METADATA
   ========================================================== */

.skin-cell{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:190px;
}

.skin-cell img{
    width:46px;
    height:46px;
    object-fit:cover;
    border:3px solid var(--border);
    flex:0 0 auto;
}

.skin-cell strong{
    color:var(--text) !important;
    font-family:"Arial Black",Impact,sans-serif;
    line-height:1;
}

.fun-theme-card .panel-label{
    background:var(--acid) !important;
    color:#050505 !important;
}


/* ==========================================================
   v4.11.0 SIDEBAR + ROLE ICON CLEANUP
   ========================================================== */

/* Center logo and sidebar brand treatment. */
.brand-block{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
}

.site-logo{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.brand-block span,
.brand-block small{
    width:100% !important;
    text-align:center !important;
}

/* Restore Riot role icons to their native appearance. */
.role-icon{
    filter:none !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* Explicitly neutralize the previous acid-green backing rules. */
.role-table-label .role-icon,
.role-card-title .role-icon,
.role-detail-title .role-icon{
    filter:none !important;
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* Full role-objective labels need a little more breathing room. */
.role-objective-impact > div{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px 14px !important;
}

.role-objective-impact > div span{
    font-size:10px !important;
    line-height:1.1 !important;
    letter-spacing:.02em !important;
    white-space:normal !important;
}

.role-objective-impact > div strong{
    font-size:24px !important;
}


/* ==========================================================
   v4.11.1 MATCH LIST SCORE / ROW CLEANUP
   ========================================================== */

.match-list{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
}

.match-row{
    display:grid !important;
    grid-template-columns:150px minmax(0,1fr) 54px !important;
    min-height:154px !important;
    background:var(--surface) !important;
    border:3px solid var(--border) !important;
    box-shadow:6px 6px 0 var(--border) !important;
    color:var(--text) !important;
    text-decoration:none !important;
    overflow:hidden !important;
}

.match-result-block{
    min-width:0 !important;
    width:auto !important;
    padding:18px 16px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:6px !important;
    border-right:4px solid var(--border) !important;
}

.match-result-block > span{
    font-family:"Courier New",monospace !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1 !important;
}

.match-result-block > strong{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    color:inherit !important;
    font-family:"Arial Black",Impact,sans-serif !important;
    font-size:46px !important;
    font-weight:900 !important;
    line-height:.9 !important;
    letter-spacing:-.055em !important;
}

.match-result-block > small{
    margin-top:4px !important;
    color:inherit !important;
    font-family:"Courier New",monospace !important;
    font-size:13px !important;
    font-weight:900 !important;
}

.match-main{
    min-width:0 !important;
    padding:16px 20px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:12px !important;
}

.match-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px 18px !important;
    color:var(--text) !important;
    font-family:"Courier New",monospace !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.comp-row{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-width:0 !important;
}

.comp{
    display:flex !important;
    gap:6px !important;
}

.comp img{
    width:52px !important;
    height:52px !important;
    object-fit:cover !important;
    border:3px solid var(--border) !important;
}

.comp-row > b{
    flex:0 0 auto !important;
    color:var(--text) !important;
    font-family:"Arial Black",Impact,sans-serif !important;
    font-size:15px !important;
}

.match-objective-strip{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 22px !important;
    padding-top:10px !important;
    border-top:3px solid var(--border) !important;
    font-family:"Courier New",monospace !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.match-objective-strip span,
.match-objective-strip b{
    color:var(--text) !important;
}

.match-arrow{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:54px !important;
    background:var(--yellow) !important;
    color:var(--text) !important;
    border-left:4px solid var(--border) !important;
    font-family:"Arial Black",Impact,sans-serif !important;
    font-size:28px !important;
}

/* Loss panels keep strong contrast. */
.match-loss .match-result-block{
    background:var(--danger) !important;
    color:#fff !important;
}

.match-loss .match-result-block > span,
.match-loss .match-result-block > strong,
.match-loss .match-result-block > small{
    color:#fff !important;
}

.match-win .match-result-block{
    background:var(--acid) !important;
    color:var(--text) !important;
}

/* The enemy comp is useful but should not dominate the list. */
.comp.enemy{
    opacity:.62 !important;
}

/* Hover keeps the brutalist feel without changing layout. */
@media (hover:hover) and (pointer:fine){
    .match-row:hover{
        transform:translate(-2px,-2px);
        box-shadow:9px 9px 0 var(--border) !important;
    }
}

@media(max-width:900px){
    .match-row{
        grid-template-columns:125px minmax(0,1fr) !important;
    }

    .match-arrow{
        display:none !important;
    }

    .match-result-block > strong{
        font-size:38px !important;
    }

    .comp.enemy,
    .comp-row > b{
        display:none !important;
    }
}

@media(max-width:600px){
    .match-row{
        grid-template-columns:1fr !important;
    }

    .match-result-block{
        border-right:0 !important;
        border-bottom:4px solid var(--border) !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:14px !important;
    }

    .match-result-block > strong{
        width:auto !important;
        font-size:34px !important;
    }

    .match-result-block > small{
        margin-top:0 !important;
        margin-left:auto !important;
    }

    .comp img{
        width:44px !important;
        height:44px !important;
    }
}


/* ==========================================================
   v4.11.2 MATCH SCORE REBALANCE
   ========================================================== */

.match-row{
    grid-template-columns:175px minmax(0,1fr) 44px !important;
    min-height:138px !important;
}

.match-result-block{
    padding:14px 16px !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
}

.match-result-block > span{
    width:100% !important;
    text-align:center !important;
    font-size:13px !important;
    letter-spacing:.04em !important;
}

.match-result-block > strong{
    width:100% !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:38px !important;
    line-height:.95 !important;
    letter-spacing:-.035em !important;
}

.match-result-block > small{
    width:100% !important;
    margin-top:0 !important;
    text-align:center !important;
    font-size:11px !important;
}

.match-main{
    padding:14px 18px !important;
    gap:10px !important;
}

.comp img{
    width:48px !important;
    height:48px !important;
}

.match-arrow{
    min-width:44px !important;
    font-size:22px !important;
}

/* Give the score a little extra room on medium widths. */
@media(max-width:1100px) and (min-width:901px){
    .match-row{
        grid-template-columns:165px minmax(0,1fr) 42px !important;
    }

    .match-result-block > strong{
        font-size:35px !important;
    }
}

@media(max-width:900px){
    .match-row{
        grid-template-columns:145px minmax(0,1fr) !important;
    }

    .match-result-block > strong{
        font-size:32px !important;
    }
}

@media(max-width:600px){
    .match-result-block{
        text-align:left !important;
        justify-content:flex-start !important;
    }

    .match-result-block > span,
    .match-result-block > strong,
    .match-result-block > small{
        width:auto !important;
        text-align:left !important;
    }

    .match-result-block > strong{
        font-size:30px !important;
    }
}


/* ==========================================================
   v4.11.3 ICON / ORDER / CHART CONSISTENCY
   ========================================================== */

.icon-text{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    vertical-align:middle !important;
}

.inline-objective-icon,
.inline-role-icon,
.inline-champion-icon{
    display:inline-block !important;
    width:22px !important;
    height:22px !important;
    object-fit:contain !important;
    flex:0 0 22px !important;
}

.inline-champion-icon{
    border:2px solid var(--border) !important;
    object-fit:cover !important;
}

.inline-role-icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
    filter:none !important;
}

/* Icons inside black table headers need a simple readable treatment. */
table th .inline-objective-icon{
    background:#fffdf5 !important;
    border:1px solid #fffdf5 !important;
}

/* Player splash focal point is supplied per champion from splashpos. */
.player-card-splash{
    background-repeat:no-repeat !important;
    background-size:cover !important;
}

/* Make the Gold State chart readable rather than vertically huge. */
.timeline-brutal-grid + .metric-strip + .section.brutal-panel canvas,
#earlyChart{
    display:block !important;
    width:100% !important;
    height:360px !important;
    max-height:360px !important;
}

.quantity-layout .table-wrap{
    box-shadow:7px 7px 0 var(--border) !important;
}

/* Full labels + icons in role objective panels. */
.role-objective-impact .icon-text{
    justify-content:flex-start !important;
}

.role-objective-impact h3 .inline-role-icon{
    width:28px !important;
    height:28px !important;
    flex-basis:28px !important;
}


/* ==========================================================
   v4.11.4 PLAYER BOOKENDS + CLEAN ICONS
   ========================================================== */

.player-card.player-card-bookend{
    display:grid !important;
    grid-template-columns:190px minmax(0,1fr) !important;
    min-height:330px !important;
    padding:0 !important;
    overflow:hidden !important;
}

.player-card-portrait{
    min-width:0 !important;
    min-height:100% !important;
    overflow:hidden !important;
    background:#050505 !important;
    border-right:4px solid var(--border) !important;
}

.player-card-portrait img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:330px !important;
    object-fit:cover !important;
    object-position:center top !important;
}

.player-card-body{
    min-width:0 !important;
    padding:20px !important;
}

/* Old horizontal splash is intentionally retired for roster cards. */
.player-card-splash{
    display:none !important;
}

/* Ban list champions get actual champion icons. */
.compact-objective-list .inline-champion-icon{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
    border:2px solid var(--border) !important;
}

/* Objective icons should not get a white square background in dark headers. */
table th .inline-objective-icon,
.inline-objective-icon.invert-on-dark{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    box-shadow:none !important;
}

/* Preserve visibility on black table headers without drawing a box. */
table th .inline-objective-icon{
    filter:drop-shadow(0 0 1px rgba(255,255,255,.9)) !important;
}

@media(max-width:900px){
    .player-card.player-card-bookend{
        grid-template-columns:145px minmax(0,1fr) !important;
        min-height:300px !important;
    }

    .player-card-portrait img{
        min-height:300px !important;
    }
}

@media(max-width:620px){
    .player-card.player-card-bookend{
        grid-template-columns:105px minmax(0,1fr) !important;
        min-height:280px !important;
    }

    .player-card-portrait img{
        min-height:280px !important;
    }

    .player-card-body{
        padding:14px !important;
    }
}


/* ==========================================================
   v4.11.5 BAN LIST ICON FIX
   ========================================================== */

.ban-icon-list > div{
    min-height:58px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
    padding:8px 12px !important;
}

.ban-champion-label{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    min-width:0 !important;
    color:var(--text) !important;
}

.ban-champion-label img{
    display:block !important;
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    object-fit:cover !important;
    border:3px solid var(--border) !important;
    background:transparent !important;
}

.ban-champion-label strong{
    color:var(--text) !important;
    font-family:"Courier New",monospace !important;
    font-size:12px !important;
    font-weight:900 !important;
}

.ban-count{
    color:var(--text) !important;
    font-family:"Arial Black",Impact,sans-serif !important;
    font-size:22px !important;
}

/* ==========================================================
   Skin Cabinet — compact Miscellaneous skin stats
   ========================================================== */

.skin-cabinet-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 18px;
    align-items: stretch;
}

.skin-top-card {
    padding: 0;
    overflow: hidden;
}

.skin-card-heading {
    min-height: 86px;
    padding: 14px 16px 12px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 3px solid var(--ink);
    background: var(--white);
}

.skin-card-heading .panel-label {
    margin-bottom: 7px;
    padding: 3px 7px;
    font-size: 10px;
}

.skin-card-heading h3 {
    margin: 0;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: .95;
    text-transform: uppercase;
}

.skin-card-heading small {
    flex: 0 0 auto;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.skin-top-list {
    display: grid;
}

.skin-top-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: 40px 118px minmax(0, 1fr) 78px;
    border-bottom: 2px solid var(--ink);
    background: var(--white);
}

.skin-top-row:last-child {
    border-bottom: 0;
}

.skin-top-rank {
    display: grid;
    place-items: center;
    border-right: 2px solid var(--ink);
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 20px;
}

.skin-top-art {
    border-right: 2px solid var(--ink);
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.02), rgba(0,0,0,.14)),
        var(--skin-art);
    background-size: cover;
    background-position: 50% 25%;
}

.skin-top-copy {
    min-width: 0;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skin-top-copy strong,
.skin-top-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skin-top-copy strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.05;
}

.skin-top-copy span {
    margin-top: 4px;
    color: #464646;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.skin-top-numbers {
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-left: 2px solid var(--ink);
}

.skin-top-numbers strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.skin-top-numbers span {
    margin-top: 4px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
}

.skin-award-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.skin-mini-award {
    min-width: 0;
    min-height: 112px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.skin-award-label {
    display: block;
    margin-bottom: auto;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.skin-mini-award > strong,
.skin-art-overlay > strong {
    display: block;
    margin-top: 12px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.28rem);
    line-height: .98;
    overflow-wrap: anywhere;
}

.skin-mini-award > small,
.skin-art-overlay > small {
    display: block;
    margin-top: 6px;
    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.skin-art-award {
    padding: 0;
    background-image: var(--skin-art);
    background-size: cover;
    background-position: 50% 24%;
}

.skin-art-overlay {
    width: 100%;
    min-height: 112px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    background: linear-gradient(
        0deg,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.58) 54%,
        rgba(0,0,0,.12) 100%
    );
}

.skin-art-overlay .skin-award-label {
    color: var(--acid);
}

.skin-art-overlay small {
    color: rgba(255,255,255,.85);
}

.skin-wide-award {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .skin-cabinet-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .skin-top-row {
        grid-template-columns: 32px 76px minmax(0, 1fr) 60px;
    }

    .skin-top-copy {
        padding: 8px;
    }

    .skin-top-numbers {
        padding: 8px 7px;
    }

    .skin-top-numbers strong {
        font-size: 20px;
    }

    .skin-award-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================
   Trends / records
   ========================================================== */

.trends-page-header {
    margin-bottom: 30px;
}

.trend-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--white);
}

.trend-tab {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-right: 3px solid var(--ink);
    text-align: center;
    text-decoration: none;
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.trend-tab:last-child {
    border-right: 0;
}

.trend-tab:hover,
.trend-tab.active {
    background: var(--acid);
}

.trend-tab.disabled {
    color: #666;
    background: #dedbd0;
}

.trend-change-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.trend-change-card {
    min-height: 188px;
    padding: 18px;
    display: flex;
    flex-direction: column;
}

.trend-change-card.good {
    background: var(--acid);
}

.trend-change-card.bad {
    background: var(--white);
    border-top: 10px solid var(--red);
}

.trend-change-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.trend-change-top > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 3px solid var(--ink);
    background: var(--white);
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 20px;
}

.trend-change-top small {
    color: var(--ink);
    font-family: "Courier New", monospace;
    font-weight: 900;
    text-align: right;
    text-transform: uppercase;
}

.trend-change-card > strong {
    margin-bottom: 8px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: .95;
    text-transform: uppercase;
}

.trend-change-card p {
    margin: auto 0 6px;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.trend-change-card b {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 17px;
}

.trend-table-wrap {
    padding: 0;
}

.trend-table td:first-child {
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}

.trend-delta {
    display: inline-block;
    padding: 5px 8px;
    border: 2px solid var(--ink);
    font-family: "Courier New", monospace;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.trend-delta.good {
    background: var(--acid);
}

.trend-delta.bad {
    background: var(--red);
    color: white;
}

.trend-delta.flat {
    background: var(--grey);
}

.trend-empty,
.overview-trend-empty {
    padding: 22px;
}

.trend-empty > strong,
.overview-trend-empty > strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 24px;
}

.trend-empty p,
.overview-trend-empty small {
    margin: 0;
    font-family: "Courier New", monospace;
}

.objective-control-card .eyebrow,
.first-objective-card .eyebrow {
    margin-bottom: 20px;
}

.record-feed {
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--white);
}

.record-feed-item {
    min-height: 88px;
    display: grid;
    grid-template-columns: 190px 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 3px solid var(--ink);
    box-shadow: none;
    text-decoration: none;
}

.record-feed-item:last-child {
    border-bottom: 0;
}

.record-feed-item:hover {
    background: var(--acid);
}

.record-feed-date {
    min-width: 0;
}

.record-feed-date strong,
.record-feed-date span {
    display: block;
}

.record-feed-date strong {
    margin-bottom: 5px;
    font-family: "Courier New", monospace;
    font-size: 11px;
    line-height: 1.2;
}

.record-feed-date span {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
}

.record-feed-champ {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ink);
    object-fit: cover;
}

.record-feed-copy {
    min-width: 0;
}

.record-feed-copy strong,
.record-feed-copy span {
    display: block;
}

.record-feed-copy strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
}

.record-feed-copy span {
    margin-top: 5px;
    font-family: "Courier New", monospace;
    font-size: 12px;
}

.record-feed-value {
    padding-left: 14px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 22px;
    text-align: right;
    white-space: nowrap;
}


/* Overview trends teaser */

.overview-trend-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.overview-trend-card,
.overview-record-card {
    min-height: 132px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-trend-card.good {
    background: var(--acid);
}

.overview-trend-card.bad {
    background: var(--white);
    border-top: 8px solid var(--red);
}

.overview-trend-card > span,
.overview-record-card > span {
    margin-bottom: 8px;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.overview-trend-card > strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
}

.overview-trend-card > small {
    margin-top: 8px;
    color: var(--ink);
    font-family: "Courier New", monospace;
}

.overview-record-card {
    background: var(--ink);
    color: var(--white);
    text-decoration: none;
}

.overview-record-card > span {
    color: var(--acid);
}

.overview-record-card > strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
}

.overview-record-card > small {
    margin-top: 8px;
    color: var(--white);
    font-family: "Courier New", monospace;
}

.overview-record-card:hover {
    background: var(--acid);
    color: var(--ink);
}

.overview-record-card:hover > span,
.overview-record-card:hover > small {
    color: var(--ink);
}

@media (max-width: 1050px) {
    .trend-tabs,
    .trend-change-grid,
    .overview-trend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trend-tab:nth-child(2) {
        border-right: 0;
    }

    .trend-tab:nth-child(-n+2) {
        border-bottom: 3px solid var(--ink);
    }

    .record-feed-item {
        grid-template-columns: 150px 54px minmax(0, 1fr) auto;
    }
}

@media (max-width: 700px) {
    .trend-tabs,
    .trend-change-grid,
    .overview-trend-grid {
        grid-template-columns: 1fr;
    }

    .trend-tab,
    .trend-tab:nth-child(2) {
        border-right: 0;
        border-bottom: 3px solid var(--ink);
    }

    .trend-tab:last-child {
        border-bottom: 0;
    }

    .record-feed-item {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .record-feed-date {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .record-feed-champ {
        grid-column: 1;
        grid-row: 2;
    }

    .record-feed-copy {
        grid-column: 2;
        grid-row: 2;
    }

    .record-feed-value {
        grid-column: 1 / -1;
        padding: 8px 0 0;
        border-top: 2px solid var(--ink);
        text-align: left;
    }
}

/* ==========================================================
   Overview clarity overhaul
   ========================================================== */

.overview-page .section-title {
    align-items: end;
}

.overview-page .section-title .eyebrow {
    margin-bottom: 10px;
}

.overview-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.overview-snapshot-card {
    min-height: 138px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-snapshot-card > span,
.overview-snapshot-card > small,
.overview-panel-heading > small,
.overview-objective-values small,
.overview-duration-copy p {
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}

.overview-snapshot-card > span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

.overview-snapshot-card > strong {
    display: block;
    margin: 7px 0 6px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 36px;
    line-height: 1;
}

.overview-snapshot-card > small {
    font-size: 10px;
    line-height: 1.25;
}

.overview-objective-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
    gap: 20px;
    align-items: stretch;
}

.overview-objective-panel,
.overview-first-objective-panel {
    padding: 20px;
}

.overview-panel-heading {
    min-height: 76px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--ink);
}

.overview-panel-heading h3 {
    margin: 14px 0 0;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.overview-panel-heading .panel-label {
    margin-bottom: 9px;
}

.overview-panel-heading > small {
    max-width: 170px;
    padding-top: 7px;
    font-size: 10px;
    line-height: 1.25;
    text-align: right;
}

.overview-objective-average-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.overview-objective-card {
    display: grid;
    grid-template-columns: minmax(155px, .8fr) minmax(0, 1.5fr);
    border: 3px solid var(--ink);
    background: var(--white);
}

.overview-objective-name {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border-right: 3px solid var(--ink);
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.1;
}

.overview-objective-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
}

.overview-objective-icon.small {
    width: 30px;
    height: 30px;
}

.overview-objective-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-objective-values > div {
    min-width: 0;
    padding: 11px 12px;
    border-right: 2px solid var(--ink);
}

.overview-objective-values > div:last-child {
    border-right: 0;
}

.overview-objective-values small,
.overview-objective-values strong {
    display: block;
}

.overview-objective-values small {
    margin-bottom: 4px;
    font-size: 9px;
    font-weight: 900;
}

.overview-objective-values strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 23px;
    line-height: 1;
}

.overview-objective-values .positive {
    background: var(--acid);
}

.overview-objective-values .negative {
    background: var(--red);
    color: var(--white);
}

.overview-objective-values .negative small {
    color: var(--white);
}

.overview-objective-values .neutral {
    background: #e6e3d8;
}

.overview-first-objective-list {
    margin-top: 14px;
    border: 3px solid var(--ink);
}

.overview-first-objective-list > div {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 2px solid var(--ink);
}

.overview-first-objective-list > div:last-child {
    border-bottom: 0;
}

.overview-first-objective-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Courier New", monospace;
    font-size: 11px;
    font-weight: 900;
}

.overview-first-objective-list strong {
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
}

.overview-player-table-wrap {
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    background: var(--white);
}

.overview-player-table {
    min-width: 800px;
}

.overview-player-table th {
    font-size: 11px;
}

.overview-player-table td,
.overview-player-table th {
    padding-top: 12px;
    padding-bottom: 12px;
}

.overview-duration-card {
    display: grid;
    grid-template-columns: minmax(230px, .55fr) minmax(0, 1.45fr);
    gap: 22px;
    padding: 20px;
    align-items: stretch;
}

.overview-duration-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overview-duration-copy .panel-label {
    align-self: flex-start;
    margin-bottom: 12px;
}

.overview-duration-copy h3 {
    margin: 0 0 10px;
    font-family: "Arial Black", Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
}

.overview-duration-copy p {
    margin: 0;
    max-width: 36ch;
    font-size: 11px;
    line-height: 1.45;
}

.overview-duration-chart-wrap {
    min-width: 0;
    min-height: 260px;
}

.overview-duration-chart-wrap canvas {
    width: 100% !important;
    height: 260px !important;
}

@media (max-width: 1050px) {
    .overview-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-objective-layout,
    .overview-duration-card {
        grid-template-columns: 1fr;
    }

    .overview-duration-copy p {
        max-width: none;
    }
}

@media (max-width: 700px) {
    .overview-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .overview-objective-card {
        grid-template-columns: 1fr;
    }

    .overview-objective-name {
        border-right: 0;
        border-bottom: 3px solid var(--ink);
    }

    .overview-panel-heading {
        flex-direction: column;
    }

    .overview-panel-heading > small {
        max-width: none;
        padding-top: 0;
        text-align: left;
    }

    .overview-objective-values strong {
        font-size: 20px;
    }

    .overview-first-objective-list strong {
        font-size: 25px;
    }
}