:root {
    --cream: #fbf8f2;
    --cream-deep: #f2ece2;
    --white: #fffdfa;
    --ink: #2b2925;
    --ink-soft: #5d554c;
    --muted: #8e857b;
    --faint: #b6aea5;
    --gold: #c19b57;
    --gold-deep: #8b6b36;
    --gold-bright: #ead49b;
    --gold-border: rgba(193, 155, 87, 0.24);
    --gold-faint: rgba(193, 155, 87, 0.12);
    --win: #2f7d34;
    --win-soft: rgba(47, 125, 52, 0.08);
    --loss: #bb3d34;
    --loss-soft: rgba(187, 61, 52, 0.08);
    --panel: rgba(255, 253, 250, 0.82);
    --shadow-sm: 0 6px 18px rgba(67, 49, 21, 0.06);
    --shadow-md: 0 14px 30px rgba(67, 49, 21, 0.09);
    --shadow-lg: 0 22px 46px rgba(67, 49, 21, 0.12);
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Playfair Display', serif;
    color: var(--ink);
    min-height: 100vh;
    background:
        radial-gradient(circle at top, rgba(234, 212, 155, 0.22), transparent 25%),
        radial-gradient(circle at bottom right, rgba(193, 155, 87, 0.10), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.85), rgba(251,248,242,0.96)),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.94) 0px, rgba(255,255,255,0.94) 46px, rgba(244,238,228,0.88) 46px, rgba(244,238,228,0.88) 92px);
    overflow-x: hidden;
}
.page-aura {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(193,155,87,0.06), transparent 12%, transparent 88%, rgba(193,155,87,0.06)),
        radial-gradient(circle at 50% 10%, rgba(234,212,155,0.14), transparent 30%);
}
.grand-hall {
    position: relative;
    z-index: 1;
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 16px 48px;
}
.section-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,244,236,0.92));
    border: 1px solid rgba(193,155,87,0.18);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.pantheon-header {
    padding: 18px 22px;
    margin-bottom: 14px;
    display: grid;
    gap: 10px;
    text-align: center;
}
.compact-header { margin-bottom: 18px; }
.hero-crest, .section-header-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hero-crest { justify-content: center; }
.crest-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.crest-mark, .section-kicker, .section-hint, .eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.crest-mark, .section-kicker { color: var(--gold-deep); }
.section-hint, .eyebrow { color: var(--muted); }
.title-block h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(34px, 5.3vw, 58px);
    line-height: 0.94;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.title-block .subtitle {
    max-width: 660px;
    margin: 8px auto 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-soft);
}
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-link, .refresh-all-btn, .reload-btn, .view-archives-btn, .close-profile-btn {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.hero-link, .refresh-all-btn, .close-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--gold-border);
    background: rgba(255,255,255,0.68);
    color: var(--gold-deep);
}
.refresh-all-btn:hover:not(:disabled), .hero-link:hover, .close-profile-btn:hover { background: rgba(255,255,255,0.92); }
.refresh-all-btn:disabled { opacity: 0.55; cursor: default; }
.refresh-icon { display: inline-block; font-size: 13px; }
.last-refresh-label { color: var(--muted); font-size: 12px; font-style: italic; }

.build-badge {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(193,155,87,0.18);
    background: rgba(255, 253, 250, 0.86);
    box-shadow: var(--shadow-sm);
    color: var(--ink-soft);
    backdrop-filter: blur(10px);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.build-badge strong {
    color: var(--gold-deep);
    font-weight: 700;
}

.hero-grid, .season-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.hero-grid-solo { grid-template-columns: 1fr; }
.throne-shell { padding: 18px 20px; margin-bottom: 14px; }
.throne-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.throne-entry {
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(193,155,87,0.16);
    background: rgba(255,255,255,0.56);
    min-height: 126px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.throne-entry::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(234,212,155,0.08), transparent 40%); pointer-events: none; }
.throne-entry-featured { grid-column: span 2; min-height: 148px; }
.throne-entry-current { border-color: rgba(193,155,87,0.28); box-shadow: 0 14px 28px rgba(193,155,87,0.12); }
.throne-meta-line, .throne-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.throne-reign, .throne-gap { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.throne-reign { color: var(--gold-deep); background: rgba(234,212,155,0.22); }
.throne-gap { color: var(--ink); background: rgba(255,255,255,0.7); border: 1px solid rgba(193,155,87,0.12); }
.throne-entry strong { font-size: 18px; color: var(--ink); }
.throne-entry p { font-size: 12px; color: var(--ink-soft); line-height: 1.42; flex: 1; }
.throne-standing {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.throne-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.throne-combatant { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,0.58); border: 1px solid rgba(193,155,87,0.12); }
.throne-combatant-deposed { background: rgba(255,249,248,0.66); border-color: rgba(187,61,52,0.12); }
.throne-combatant-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.throne-combatant-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.throne-combatant-standing { font-size: 10px; color: var(--ink-soft); }
.season-ribbon {
    margin-top: 14px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1.1fr auto auto;
    gap: 14px;
    align-items: center;
}
.season-ribbon-copy h2 {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    color: var(--ink);
    margin-top: 4px;
}
.season-ribbon-copy p {
    margin-top: 5px;
    font-size: 12px;
    color: var(--ink-soft);
}
.season-ribbon-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 8px;
}
.season-ribbon-stat {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.58);
    min-width: 0;
}
.season-ribbon-stat strong {
    display: block;
    font-size: 15px;
    color: var(--ink);
}
.season-ribbon-link { white-space: nowrap; }
.season-teaser, .announcements-panel, .honors-shell, .leaderboard-shell, .codex-table-panel { padding: 18px 20px; }
.season-metrics, .honors-grid, .season-summary-grid, .codex-stat-grid {
    display: grid;
    gap: 10px;
}
.season-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.season-teaser { display: grid; gap: 12px; }
.hero-grid-solo .season-teaser { padding: 20px 22px; }
.hero-grid-solo .season-teaser p { max-width: 760px; }
.season-teaser h2 { font-family: 'Cinzel', serif; font-size: clamp(22px, 3.3vw, 34px); color: var(--ink); }
.season-callouts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 2px;
}
.season-callout {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(193,155,87,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(251,248,242,0.54));
}
.season-callout-label, .season-inline-link {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.season-callout-label {
    display: block;
    color: var(--muted);
    margin-bottom: 7px;
}
.season-callout strong {
    display: block;
    font-size: 20px;
    color: var(--ink);
    margin-bottom: 4px;
}
.season-callout p {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
}
.season-teaser-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    border-top: 1px solid rgba(193,155,87,0.14);
}
.season-inline-link {
    color: var(--gold-deep);
    text-decoration: none;
}
.season-inline-link:hover { color: var(--gold); }
.metric-card, .honor-card, .codex-hero-card, .codex-stat-card {
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-border);
    background: rgba(255,255,255,0.64);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.metric-card { padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(249,244,236,0.72)); }
.metric-label { display: block; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); font-family: 'Cinzel', serif; margin-bottom: 7px; }
.metric-card strong { font-size: 17px; color: var(--ink); }
.announcement-list { display: flex; flex-direction: column; gap: 10px; }
.announcement-item { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid transparent; background: rgba(255,255,255,0.58); }
.announcement-item strong { display: block; font-size: 15px; margin-bottom: 4px; }
.announcement-item p { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.announcement-time { display: inline-block; font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.accent-gold { border-color: rgba(193,155,87,0.22); }
.accent-win { border-color: rgba(47,125,52,0.22); background: rgba(47,125,52,0.04); }
.accent-loss { border-color: rgba(187,61,52,0.22); background: rgba(187,61,52,0.04); }

.honors-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.honor-card { padding: 14px; min-height: 144px; display: flex; flex-direction: column; gap: 7px; }
.honor-label { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-deep); }
.honor-card h3 { font-family: 'Cinzel', serif; font-size: 23px; color: var(--ink); }
.honor-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.4; flex: 1; }
.honor-player { font-family: 'Cinzel', serif; font-size: 11px; color: var(--muted); letter-spacing: 1.1px; text-transform: uppercase; }
.debt-shell { padding: 18px 20px; margin-bottom: 14px; }
.debt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.debt-card {
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(193,155,87,0.14);
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,245,236,0.72));
    min-height: 138px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.debt-label, .debt-meta {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.debt-label { color: var(--gold-deep); }
.debt-card h3 { font-family: 'Cinzel', serif; font-size: 23px; color: var(--ink); }
.debt-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.42; flex: 1; }
.debt-meta { color: var(--muted); }
.debt-volatile { border-color: rgba(187,61,52,0.18); background: linear-gradient(180deg, rgba(255,249,248,0.82), rgba(255,242,239,0.74)); }
.debt-tight { border-color: rgba(193,155,87,0.2); background: linear-gradient(180deg, rgba(255,251,245,0.84), rgba(250,244,230,0.74)); }
.debt-steady { border-color: rgba(47,125,52,0.14); background: linear-gradient(180deg, rgba(249,255,250,0.82), rgba(241,248,241,0.72)); }

.leaderboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(193,155,87,0.18); }
.leaderboard-intro h2 { font-family: 'Cinzel', serif; font-size: clamp(20px, 2.7vw, 29px); color: var(--gold-deep); margin-top: 5px; }
.leaderboard-intro p { max-width: 520px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.leaderboard-columns { display: grid; grid-template-columns: 104px minmax(0, 1fr) 186px; gap: 12px; padding: 12px 10px 9px; }
.leaderboard-columns span { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--faint); }
.leaderboard { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.player-row { border: 1px solid rgba(193,155,87,0.16); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(246,241,233,0.92)); box-shadow: var(--shadow-sm); overflow: hidden; }
.player-row:hover, .player-row.expanded { box-shadow: var(--shadow-md); border-color: rgba(193,155,87,0.3); }
.player-row.seat-first { border-color: rgba(193,155,87,0.28); box-shadow: 0 16px 30px rgba(193,155,87,0.11); }
.player-row.seat-top-three .row-rank { border-color: rgba(193,155,87,0.34); }
.player-row.replaying-live {
    border-color: rgba(193,155,87,0.44);
    box-shadow: 0 16px 34px rgba(193,155,87,0.16), 0 0 0 1px rgba(234,212,155,0.22);
}
.player-row.seat-shifting {
    position: relative;
    z-index: 3;
    box-shadow: 0 22px 38px rgba(193,155,87,0.18), 0 0 0 1px rgba(234,212,155,0.18);
}
.player-row.replaying-live .activity-pill,
.player-row.replaying-live .streak-badge,
.player-row.replaying-live .friend-chip { opacity: 0.58; }
.player-row.replaying-live .lp-text {
    color: var(--gold-deep);
    text-shadow: 0 0 22px rgba(234,212,155,0.35);
}
.row-header { display: grid; grid-template-columns: 104px minmax(0, 1fr) 186px 80px; align-items: center; gap: 12px; padding: 14px 16px 14px 12px; cursor: pointer; }
.row-rank-column { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.row-rank { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700; color: var(--gold-deep); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(244,239,231,0.98)); border: 1px solid rgba(193,155,87,0.24); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 8px 18px rgba(193,155,87,0.1); }
.row-rank-caption { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); text-align: center; }
.row-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-halo { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(234,212,155,0.42), transparent 70%); filter: blur(3px); }
.seat-first .avatar-halo { background: radial-gradient(circle, rgba(234,212,155,0.6), transparent 68%); }
.avatar { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--gold-bright); box-shadow: 0 0 0 3px rgba(255,255,255,0.84), 0 8px 18px rgba(67,49,21,0.12); display: block; }
.name-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.identity-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.summoner-name { font-size: clamp(18px, 2.4vw, 24px); line-height: 0.98; font-weight: 600; color: var(--ink); }
.summoner-tag { font-size: 13px; color: var(--muted); }
.identity-overline { display: flex; align-items: center; gap: 6px; min-height: 14px; flex-wrap: wrap; }
.identity-honorific, .identity-status { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.identity-honorific { color: var(--gold-deep); }
.identity-status { color: var(--muted); }
.identity-divider { color: rgba(193,155,87,0.45); font-size: 10px; }
.name-meta { display: flex; align-items: center; gap: 7px; min-height: 18px; flex-wrap: wrap; }
.friend-chip, .activity-pill, .streak-badge, .lp-pill, .event-seal, .dm-multikill { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; transition: opacity 0.2s ease, transform 0.2s ease; }
.meta-hidden { display: none; }
.friend-chip { color: var(--cream); background: linear-gradient(135deg, var(--gold), var(--gold-deep)); }
.season-record-badge {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-end;
    gap: 6px;
    padding: 4px 8px 5px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: rgba(93, 85, 76, 0.78);
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(193,155,87,0.14);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.season-record-kicker {
    font-size: 7px;
    letter-spacing: 1.3px;
    color: var(--faint);
}
.season-record-badge strong {
    color: inherit;
    font-size: 10px;
}
.season-record-positive {
    color: rgba(47, 125, 52, 0.86);
    background: rgba(47,125,52,0.06);
    border-color: rgba(47,125,52,0.12);
}
.season-record-negative {
    color: rgba(187, 61, 52, 0.78);
    background: rgba(187,61,52,0.05);
    border-color: rgba(187,61,52,0.10);
}
.season-record-pending {
    color: rgba(141, 133, 123, 0.82);
    background: rgba(141,133,123,0.06);
    border-color: rgba(141,133,123,0.12);
}
.activity-pill, .streak-badge { border: 1px solid rgba(193,155,87,0.1); }
.activity-pill { color: rgba(43,41,37,0.7); background: rgba(255,255,255,0.58); }
.activity-fresh { color: var(--win); background: rgba(47,125,52,0.08); border-color: rgba(47,125,52,0.16); }
.activity-warm { color: #94611a; background: rgba(193,155,87,0.10); border-color: rgba(193,155,87,0.16); }
.activity-quiet { color: var(--muted); background: rgba(141,133,123,0.08); border-color: rgba(141,133,123,0.12); }
.activity-dormant, .activity-unknown { color: #7a7066; background: rgba(93,85,76,0.06); border-color: rgba(93,85,76,0.08); }
.activity-pulse { box-shadow: 0 0 0 6px rgba(47,125,52,0.07); }
.streak-fire { color: #8d5414; background: linear-gradient(135deg, rgba(232,204,138,0.48), rgba(255,241,209,0.42)); border-color: rgba(193,155,87,0.18); }
.streak-tilted { color: #8a2f28; background: linear-gradient(135deg, rgba(239,83,80,0.12), rgba(255,243,241,0.54)); border-color: rgba(187,61,52,0.12); }
.streak-hidden { opacity: 0; pointer-events: none; }
.row-center { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.standing-label { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--faint); }
.rank-text { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.lp-text { font-family: 'Cinzel', serif; font-size: clamp(23px, 2.9vw, 31px); line-height: 1; font-weight: 700; color: var(--ink); }
.live-delta-strip { min-height: 18px; display: flex; justify-content: flex-end; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 1px; }
.live-delta-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.live-delta-show { opacity: 1; transform: translateY(0) scale(1); }
.live-delta-exit { opacity: 0; transform: translateY(-7px) scale(0.94); }
.delta-win { color: var(--win); background: rgba(47,125,52,0.12); border-color: rgba(47,125,52,0.16); box-shadow: 0 8px 18px rgba(47,125,52,0.12); }
.delta-loss { color: var(--loss); background: rgba(187,61,52,0.10); border-color: rgba(187,61,52,0.16); box-shadow: 0 8px 18px rgba(187,61,52,0.10); }
.row-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.card-refresh-btn { width: 31px; height: 31px; border-radius: 50%; border: 1px solid rgba(193,155,87,0.22); background: rgba(255,255,255,0.72); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: opacity 0.2s ease; opacity: 0; }
.player-row:hover .card-refresh-btn, .player-row.expanded .card-refresh-btn { opacity: 1; }
.chevron { min-width: 44px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gold-deep); transition: transform 0.24s ease, color 0.24s ease; }
.chevron::after { content: '›'; display: inline-block; margin-left: 4px; font-size: 15px; line-height: 0; transform: translateY(2px); }
.chevron.open { color: var(--gold); }
.chevron.open::after { transform: translateY(2px) rotate(90deg); }

.match-panel { max-height: 0; overflow: hidden; transition: max-height 0.42s ease; border-top: 0 solid transparent; }
.player-row.expanded .match-panel { border-top: 1px solid rgba(193,155,87,0.18); }
.match-panel-inner { padding: 18px; background: linear-gradient(180deg, rgba(248,244,238,0.54), rgba(255,255,255,0.5)); }
.match-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.summary-wr { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.wr-num { font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700; color: var(--gold-deep); line-height: 1; }
.wr-pct { font-size: 14px; }
.wr-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.summary-record { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; }
.record-wins { color: var(--win); }
.record-sep { color: var(--muted); }
.record-losses { color: var(--loss); }
.wr-bar-track { flex: 1; height: 5px; background: rgba(187,61,52,0.16); border-radius: 999px; overflow: hidden; min-width: 80px; }
.wr-bar-fill { height: 100%; background: linear-gradient(90deg, #54b25c, var(--win)); border-radius: 999px; }
.match-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(193,155,87,0.28), transparent); margin-bottom: 12px; }
.loading-ritual {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(249,245,238,0.84));
    border: 1px solid rgba(193,155,87,0.14);
}
.loading-ritual-copy {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.loading-ritual-copy strong {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 600;
}
.loading-ritual-bar {
    position: relative;
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: rgba(193,155,87,0.12);
}
.loading-ritual-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(193,155,87,0.12), rgba(193,155,87,0.8), rgba(234,212,155,0.95));
    animation: marbleSweep 1.35s ease-in-out infinite;
}
.chronicle-refresh-strip {
    display: grid;
    gap: 7px;
    margin: 0 0 12px;
    padding: 8px 11px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.56), rgba(249,245,238,0.66));
    border: 1px solid rgba(193,155,87,0.12);
}
.chronicle-refresh-strip .loading-ritual-copy strong {
    font-size: 12px;
}
.chronicle-refresh-strip .loading-ritual-bar {
    height: 4px;
}
@keyframes marbleSweep {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(290%); }
}
.story-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); gap: 14px; margin-bottom: 18px; align-items: start; }
.story-panel { margin-bottom: 0; }
.chart-wrapper { padding: 14px 14px 10px; background: rgba(255,255,255,0.8); border: 1px solid rgba(193,155,87,0.18); border-radius: var(--radius-sm); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); height: 170px; position: relative; }
.story-chart-panel { display: flex; flex-direction: column; gap: 10px; min-height: 286px; max-height: 286px; overflow: hidden; }
.story-chart-panel canvas { flex: none; height: 176px !important; max-height: 176px; }
.story-panel-head, .story-panel-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.story-panel-head h3 { font-family: 'Cinzel', serif; font-size: 18px; color: var(--ink); margin-top: 4px; }
.story-panel-foot { font-size: 11px; color: var(--muted); padding-top: 2px; }
.story-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 1px solid rgba(193,155,87,0.12); font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-deep); }
.story-asides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.story-mini-card {
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.62);
}
.story-mini-card strong { display: block; margin-top: 6px; font-size: 14px; color: var(--ink); }
.story-mini-card p { margin-top: 5px; font-size: 12px; line-height: 1.42; color: var(--ink-soft); }
.story-mini-main { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.story-mini-avatar { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(193,155,87,0.18); object-fit: cover; }
.story-mini-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.story-mini-meta span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.66);
    border: 1px solid rgba(193,155,87,0.12);
    color: var(--gold-deep);
}
.debt-mini-leading { border-color: rgba(193,155,87,0.2); }
.debt-mini-chasing { border-color: rgba(187,61,52,0.12); background: rgba(255,250,248,0.7); }
.match-list-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.match-list-header h3 { font-family: 'Cinzel', serif; font-size: 18px; color: var(--ink); margin-top: 4px; }
.match-list { display: flex; flex-direction: column; gap: 7px; }
.match-row { display: grid; grid-template-columns: 28px 160px 1fr 1fr minmax(86px, 104px) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border-left: 4px solid transparent; transition: background 0.18s; }
.match-win { background: var(--win-soft); border-left-color: #5ab85b; }
.match-loss { background: var(--loss-soft); border-left-color: #ef6d62; }
.match-event-ascend { box-shadow: inset 0 0 0 1px rgba(193,155,87,0.12); }
.match-event-fall { box-shadow: inset 0 0 0 1px rgba(187,61,52,0.12); }
.match-event-peak { box-shadow: inset 0 0 0 1px rgba(47,125,52,0.12); }
.match-event-aegis { box-shadow: inset 0 0 0 1px rgba(193,155,87,0.16); }
.match-verdict { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; text-align: center; }
.match-win .match-verdict { color: var(--win); }
.match-loss .match-verdict { color: var(--loss); }
.match-champ { display: flex; align-items: center; gap: 9px; min-width: 0; }
.champ-icon, .dm-champ-img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(193,155,87,0.2); object-fit: cover; }
.champ-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-kda, .match-cs, .dm-stats { display: flex; flex-direction: column; gap: 3px; }
.kda-nums, .cs-num { font-size: 13px; font-weight: 600; color: var(--ink); }
.kda-ratio, .cs-label, .dm-sub, .dm-time { font-size: 11px; color: var(--muted); }
.match-duration { font-size: 12px; color: var(--muted); text-align: center; font-style: italic; }
.match-time-stack,
.match-timebox {
    display: grid;
    justify-items: end;
    gap: 2px;
    min-width: 86px;
    line-height: 1.08;
}
.match-time-stack {
    gap: 2px;
}
.match-time-stack .match-duration {
    width: auto;
    justify-self: end;
}
.match-time-kicker {
    display: none;
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(151, 113, 47, 0.72);
}
.match-time-relative {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.match-time-exact {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
}
.match-lp { text-align: right; min-width: 72px; }
.lp-pill { padding: 4px 8px; font-size: 10px; }
.lp-win { background: rgba(47,125,52,0.12); color: var(--win); }
.lp-loss { background: rgba(187,61,52,0.10); color: var(--loss); }
.lp-neutral { background: rgba(193,155,87,0.12); color: var(--gold-deep); }
.lp-note { display: block; margin-top: 5px; font-size: 9px; color: var(--gold-deep); text-transform: uppercase; font-family: 'Cinzel', serif; letter-spacing: 0.8px; }
.win-note { color: var(--win); }
.decay-note { color: #7b6d5b; }
.match-events { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.event-seal { background: rgba(255,255,255,0.72); color: var(--gold-deep); border: 1px solid rgba(193,155,87,0.16); }
.event-ascend { color: var(--gold-deep); background: rgba(234,212,155,0.26); }
.event-fall { color: var(--loss); background: rgba(187,61,52,0.08); border-color: rgba(187,61,52,0.12); }
.event-peak { color: var(--win); background: rgba(47,125,52,0.09); border-color: rgba(47,125,52,0.12); }
.event-aegis { color: #8d5414; background: rgba(193,155,87,0.16); }
.match-omen {
    margin-top: 8px;
    padding: 8px 9px;
    border-radius: 10px;
    background: rgba(255,255,255,0.76);
    border: 1px solid rgba(193,155,87,0.14);
    text-align: left;
}
.match-omen strong {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
}
.match-omen span {
    display: block;
    font-size: 10px;
    color: var(--ink-soft);
    line-height: 1.35;
}
.omen-ascend { border-color: rgba(193,155,87,0.2); }
.omen-fall { border-color: rgba(187,61,52,0.16); }
.omen-peak { border-color: rgba(47,125,52,0.16); }
.omen-aegis { border-color: rgba(193,155,87,0.24); background: rgba(250,245,231,0.84); }
.milestone-ledger { padding: 14px; border: 1px solid rgba(193,155,87,0.16); border-radius: var(--radius-md); background: rgba(255,255,255,0.58); min-height: 286px; }
.quiet-ledger { display: flex; flex-direction: column; justify-content: space-between; }
.ledger-hero { margin-top: 12px; padding: 12px 12px 10px; border-radius: 12px; border: 1px solid rgba(193,155,87,0.14); background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(248,244,238,0.74)); }
.ledger-hero-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ledger-hero-kicker { display: inline-block; margin-bottom: 7px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ledger-hero strong { display: block; font-size: 15px; margin-bottom: 5px; color: var(--ink); }
.ledger-hero p { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.ledger-hero-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.ledger-hero-meta span { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; background: rgba(255,255,255,0.68); border: 1px solid rgba(193,155,87,0.12); color: var(--gold-deep); }
.ledger-hero-figure { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ledger-hero-avatar { width: 68px; height: 68px; border-radius: 50%; border: 2px solid rgba(193,155,87,0.22); box-shadow: 0 10px 20px rgba(67,49,21,0.12); object-fit: cover; background: rgba(255,255,255,0.8); }
.ledger-hero-ascend { border-color: rgba(193,155,87,0.2); background: linear-gradient(180deg, rgba(255,251,243,0.92), rgba(250,244,227,0.78)); }
.ledger-hero-fall { border-color: rgba(187,61,52,0.16); background: linear-gradient(180deg, rgba(255,248,247,0.92), rgba(255,240,238,0.76)); }
.ledger-hero-peak { border-color: rgba(47,125,52,0.16); background: linear-gradient(180deg, rgba(247,255,249,0.92), rgba(237,249,239,0.76)); }
.ledger-hero-aegis { border-color: rgba(193,155,87,0.22); background: linear-gradient(180deg, rgba(255,250,242,0.94), rgba(250,244,226,0.78)); }
.ledger-hero-quiet { border-style: dashed; }
.ledger-row { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding-top: 10px; margin-top: 10px; border-top: 1px solid rgba(193,155,87,0.12); }
.ledger-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 12px; }
.ledger-seal {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.ledger-ascend .ledger-seal, .ledger-ascend .ledger-standing { color: var(--gold-deep); background: rgba(234,212,155,0.24); }
.ledger-fall .ledger-seal, .ledger-fall .ledger-standing { color: var(--loss); background: rgba(187,61,52,0.08); }
.ledger-peak .ledger-seal, .ledger-peak .ledger-standing { color: var(--win); background: rgba(47,125,52,0.08); }
.ledger-aegis .ledger-seal, .ledger-aegis .ledger-standing { color: #8d5414; background: rgba(193,155,87,0.14); }
.ledger-time { font-size: 11px; color: var(--muted); }
.ledger-row strong { font-size: 13px; display: block; margin-bottom: 4px; }
.ledger-row p { font-size: 12px; color: var(--ink-soft); }
.ledger-standing { display: inline-flex; margin-top: 8px; padding: 4px 8px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.view-archives-btn, .reload-btn { width: 100%; margin-top: 14px; padding: 11px; border-radius: var(--radius-sm); border: 1px solid rgba(193,155,87,0.22); background: rgba(255,255,255,0.58); color: var(--gold-deep); }
.reload-btn { background: var(--gold); color: var(--cream); border: 0; }
.match-error, .empty-state { text-align: center; color: var(--muted); font-style: italic; padding: 22px 0; }
.match-error.compact { padding: 10px 0 14px; }
.decay-verdict {
    color: #7b6d5b;
    font-size: 13px;
}
.history-verdict {
    color: var(--gold-deep);
    font-size: 13px;
}
.decay-champ {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.decay-title {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ink);
}
.decay-detail {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.35;
}
.decay-lp {
    min-width: 152px;
}
.empty-title { font-size: 18px; margin-bottom: 8px; }
.empty-sub { font-size: 14px; margin-bottom: 18px; }

.profile-overlay { position: fixed; inset: 0; background: var(--cream); z-index: 2000; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.profile-overlay.active { opacity: 1; pointer-events: auto; }
.close-profile-btn { position: absolute; top: 20px; right: 28px; backdrop-filter: blur(8px); z-index: 2010; }
.profile-hero { width: 100%; height: 380px; background-size: cover; background-position: center 20%; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 34px; }
.profile-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(251,248,242,0.08) 0%, rgba(251,248,242,0.74) 58%, var(--cream) 100%); }
.hero-content { position: relative; z-index: 1; text-align: center; }
.profile-avatar-large { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: var(--shadow-lg); margin-bottom: 14px; }
.hero-content h1 { font-family: 'Cinzel', serif; font-size: 36px; color: var(--ink); }
.profile-rank-large { font-family: 'Cinzel', serif; font-size: 16px; color: var(--gold-deep); margin-bottom: 10px; }
.hero-stats { font-size: 15px; font-weight: 600; color: var(--muted); }
.hero-record { margin-left: 12px; color: var(--ink); }
.detailed-match { display: grid; grid-template-columns: 52px 210px 120px 140px 1fr; align-items: center; gap: 14px; padding: 14px; margin-bottom: 8px; background: var(--white); border-radius: var(--radius-sm); border-left: 4px solid transparent; box-shadow: var(--shadow-sm); }
.detailed-match.w { border-left-color: #54b25c; background: rgba(47,125,52,0.05); }
.detailed-match.l { border-left-color: #ef6d62; background: rgba(187,61,52,0.05); }
.dm-type { font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700; text-align: center; }
.detailed-match.w .dm-type { color: var(--win); }
.detailed-match.l .dm-type { color: var(--loss); }
.dm-time { display: block; margin-top: 4px; font-style: italic; }
.dm-champ-block, .dm-items { display: flex; align-items: center; gap: 10px; }
.dm-hero-name { font-weight: 700; }
.dm-meta { font-size: 11px; color: var(--muted); }
.dm-item { width: 26px; height: 26px; border-radius: 4px; background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08); }
.dm-multikill { background: #e6a817; color: white; padding: 3px 6px; }
.danger-pill { background: var(--loss); }

.season-page { max-width: 1180px; }
.season-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px 22px; margin-bottom: 16px; }
.codex-hero-card { padding: 16px; }
.codex-hero-card h2 { font-family: 'Cinzel', serif; font-size: 30px; color: var(--gold-deep); margin-top: 8px; }
.codex-hero-card p { margin-top: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.codex-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 18px 22px; margin-bottom: 16px; }
.codex-stat-card { padding: 14px 15px; }
.codex-stat-card h3 { font-family: 'Cinzel', serif; font-size: 18px; color: var(--ink); margin-top: 8px; }
.codex-stat-card p { margin-top: 6px; color: var(--ink-soft); font-size: 13px; }
.season-side-rail { display: flex; flex-direction: column; gap: 14px; }
.codex-table-wrap { overflow-x: auto; margin-top: 14px; }
.codex-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.codex-table th, .codex-table td { padding: 11px 10px; text-align: left; border-bottom: 1px solid rgba(193,155,87,0.14); font-size: 12px; vertical-align: top; }
.codex-table th { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.table-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.good-cell { color: var(--win); }
.bad-cell { color: var(--loss); }
.mini-honor-list { display: flex; flex-direction: column; gap: 10px; }
.mini-honor-item { padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid rgba(193,155,87,0.16); background: rgba(255,255,255,0.56); }
.mini-honor-item strong { display: block; margin-bottom: 4px; }
.mini-honor-item p { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.mini-honor-item span { display: inline-block; margin-top: 8px; font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold-deep); }
.records-vault-panel { padding: 18px 20px; margin-bottom: 16px; }
.records-vault-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.records-vault-card {
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(193,155,87,0.16);
    background: rgba(255,255,255,0.66);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 138px;
}
.records-vault-card h3 { font-family: 'Cinzel', serif; font-size: 22px; color: var(--ink); }
.records-vault-card p { color: var(--ink-soft); font-size: 12px; line-height: 1.42; flex: 1; }
.records-vault-card strong { font-family: 'Cinzel', serif; font-size: 11px; color: var(--gold-deep); letter-spacing: 1.1px; text-transform: uppercase; }
.records-vault-card.accent-loss { background: rgba(255,248,247,0.92); }
.records-vault-card.accent-aegis { background: rgba(255,250,242,0.92); border-color: rgba(193,155,87,0.22); }
.records-vault-card.accent-peak { background: rgba(247,255,249,0.92); border-color: rgba(47,125,52,0.16); }
.records-vault-card.accent-muted { background: rgba(250,248,244,0.92); }
.codex-table-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(193,155,87,0.18); }
.codex-table-link:hover { color: var(--gold-deep); border-bottom-color: rgba(193,155,87,0.36); }

.codex-page { max-width: 1180px; }
.codex-hero-shell { padding: 20px 22px; margin-bottom: 16px; display: grid; gap: 14px; }
.codex-hero-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.codex-hero-identity { display: flex; gap: 14px; align-items: center; }
.codex-avatar-wrap { flex: 0 0 auto; }
.codex-avatar { width: 72px; height: 72px; }
.codex-name-block { display: grid; gap: 6px; }
.codex-hero-standing { display: grid; justify-items: end; gap: 4px; text-align: right; }
.codex-hero-standing strong { font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold-deep); }
.codex-hero-lp { font-family: 'Cinzel', serif; font-size: 34px; color: var(--ink); line-height: 0.92; }
.codex-hero-recordline { font-size: 12px; color: var(--ink-soft); }
.codex-hero-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.codex-hero-chip {
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.62);
}
.codex-hero-chip strong { display: block; margin-top: 7px; font-size: 15px; color: var(--ink); }
.codex-owned-records { display: flex; gap: 8px; flex-wrap: wrap; }

.codex-chronicle-layout, .codex-bottom-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
    gap: 14px;
    margin-bottom: 16px;
}
.codex-pulse-panel, .codex-records-panel, .codex-match-panel, .codex-side-card, .codex-arcs-panel { padding: 18px 20px; }
.codex-pulse-chart-wrap {
    margin-top: 12px;
    height: 310px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(193,155,87,0.16);
    background: rgba(255,255,255,0.72);
}
.codex-pulse-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--muted); }
.codex-arc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.codex-arc-card {
    padding: 13px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.64);
    display: grid;
    gap: 6px;
}
.codex-arc-head, .codex-arc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.codex-arc-swing, .codex-arc-window {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(193,155,87,0.12);
}
.codex-arc-card strong { font-size: 15px; color: var(--ink); }
.codex-arc-card p { font-size: 12px; line-height: 1.46; color: var(--ink-soft); }
.codex-arc-foot { font-size: 10px; color: var(--muted); }
.codex-arc-ascend { background: linear-gradient(180deg, rgba(255,251,243,0.94), rgba(250,244,227,0.78)); }
.codex-arc-fall { background: linear-gradient(180deg, rgba(255,248,247,0.94), rgba(255,240,238,0.78)); border-color: rgba(187,61,52,0.12); }
.codex-arc-aegis { background: linear-gradient(180deg, rgba(255,250,242,0.94), rgba(250,244,226,0.78)); }

.codex-records-panel { margin-bottom: 16px; }
.codex-record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.codex-record-card {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.62);
}
.codex-record-card strong { display: block; margin-top: 7px; font-family: 'Cinzel', serif; font-size: 20px; color: var(--ink); }
.codex-record-card p { margin-top: 5px; color: var(--ink-soft); font-size: 12px; line-height: 1.42; }

.codex-match-list, .codex-event-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.codex-match-card {
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(193,155,87,0.14);
    background: rgba(255,255,255,0.68);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) auto;
    gap: 10px 12px;
    align-items: center;
}
.codex-match-win { border-left: 4px solid #54b25c; background: rgba(47,125,52,0.05); }
.codex-match-loss { border-left: 4px solid #ef6d62; background: rgba(187,61,52,0.05); }
.codex-match-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.codex-match-avatar { width: 42px; height: 42px; }
.codex-match-left strong { display: block; font-size: 15px; }
.codex-match-left p { font-size: 11px; color: var(--muted); }
.codex-match-mid { display: grid; gap: 3px; }
.codex-match-right { display: grid; justify-items: end; gap: 6px; }
.codex-match-events { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.codex-match-decay {
    border-left: 4px solid rgba(141, 133, 123, 0.42);
    background: rgba(120, 103, 80, 0.05);
}
.codex-match-history {
    background: rgba(255,252,247,0.74);
}
.codex-decay-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.74);
    border: 1px solid rgba(155,115,48,0.18);
    color: #7b6d5b;
    font-size: 16px;
}
.codex-side-rail { display: grid; gap: 14px; align-content: start; }
.codex-side-card strong { display: block; font-size: 15px; color: var(--ink); }
.codex-side-card p { margin-top: 6px; font-size: 12px; line-height: 1.44; color: var(--ink-soft); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 0.85s linear infinite; }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel, .skeleton-summary { background: linear-gradient(90deg, #f0ece6 25%, #e8e3dc 50%, #f0ece6 75%); background-size: 400px 100%; animation: shimmer 1.4s infinite linear; border-radius: 6px; }
.skeleton-summary { height: 38px; margin-bottom: 14px; }
.skeleton-row { border-left-color: transparent !important; }
.skel-verdict { width: 18px; height: 15px; }
.skel-champ { width: 130px; height: 34px; }
.skel-kda { width: 86px; height: 30px; }
.skel-cs { width: 68px; height: 30px; }
.skel-dur { width: 42px; height: 16px; }

#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--gold-deep); color: var(--cream); padding: 9px 22px; border-radius: 999px; font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 1.3px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 2100; }
#toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.milestone-feed { position: fixed; right: 24px; bottom: 28px; display: flex; flex-direction: column; gap: 10px; z-index: 2095; pointer-events: none; }
.milestone-toast {
    width: min(320px, calc(100vw - 28px));
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(193,155,87,0.18);
    background: rgba(255,252,247,0.96);
    box-shadow: 0 18px 36px rgba(67,49,21,0.14);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}
.milestone-toast.visible { opacity: 1; transform: translateY(0); }
.milestone-kicker { display: inline-block; margin-bottom: 6px; font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-deep); }
.milestone-toast strong { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
.milestone-toast p { font-size: 12px; line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 980px) {
    .hero-grid, .season-layout, .season-summary-grid, .codex-stat-grid, .codex-chronicle-layout, .codex-bottom-layout { grid-template-columns: 1fr; }
    .throne-timeline { grid-template-columns: 1fr; }
    .throne-entry-featured { grid-column: span 1; }
    .throne-duel { grid-template-columns: 1fr; }
    .season-callouts { grid-template-columns: 1fr; }
    .season-ribbon { grid-template-columns: 1fr; }
    .season-ribbon-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .story-grid { grid-template-columns: 1fr; }
    .debt-grid, .story-asides, .records-vault-grid, .codex-record-grid, .codex-hero-rail { grid-template-columns: 1fr; }
    .ledger-hero-main { align-items: flex-start; }
    .codex-hero-main { grid-template-columns: 1fr; }
    .codex-hero-standing { justify-items: start; text-align: left; }
    .row-header { grid-template-columns: 1fr; gap: 16px; }
    .leaderboard-columns { display: none; }
    .row-rank-column { flex-direction: row; justify-content: space-between; align-items: center; }
    .row-center { align-items: flex-start; text-align: left; }
    .season-record-badge { align-self: flex-start; }
    .live-delta-strip { justify-content: flex-start; }
    .row-right { justify-content: space-between; }
    .card-refresh-btn { opacity: 1; }
}

@media (max-width: 680px) {
    .grand-hall { padding: 14px 10px 34px; }
    .pantheon-header, .season-teaser, .announcements-panel, .honors-shell, .leaderboard-shell, .codex-table-panel, .throne-shell { padding: 14px; }
    .title-block h1 { font-size: 34px; }
    .title-block .subtitle, .leaderboard-intro p { font-size: 13px; }
    .hero-actions { width: 100%; }
    .hero-link, .refresh-all-btn { flex: 1 1 180px; }
    .season-metrics, .honors-grid, .debt-grid, .records-vault-grid, .codex-record-grid { grid-template-columns: 1fr; }
    .season-teaser-footer { flex-direction: column; align-items: flex-start; }
    .season-ribbon-stats { grid-template-columns: 1fr; }
    .season-ribbon-link { width: 100%; justify-content: center; }
    .leaderboard-intro { flex-direction: column; align-items: flex-start; }
    .last-refresh-label { display: none; }
    .row-rank-caption { display: none; }
    .row-header {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        grid-template-areas:
            "rank identity standing"
            "rank identity actions";
        align-items: start;
        padding: 12px;
        gap: 10px;
    }
    .row-rank-column { grid-area: rank; align-self: center; justify-content: center; gap: 4px; }
    .row-left { grid-area: identity; align-items: flex-start; gap: 10px; }
    .row-center {
        grid-area: standing;
        align-items: flex-end;
        text-align: right;
        width: auto;
        padding-top: 0;
        border-top: 0;
        gap: 2px;
    }
    .season-record-badge { align-self: flex-end; }
    .row-right {
        grid-area: actions;
        width: auto;
        padding-top: 0;
        justify-content: flex-end;
        align-self: end;
    }
    .standing-label { display: none; }
    .identity-line { gap: 4px; }
    .identity-overline { gap: 5px; }
    .summoner-name { font-size: 18px; }
    .summoner-tag { font-size: 11px; }
    .name-meta { gap: 5px; }
    .friend-chip { padding-inline: 6px; }
    .season-record-badge { font-size: 8px; gap: 4px; padding: 3px 7px 4px; }
    .season-record-kicker { font-size: 6px; }
    .season-record-badge strong { font-size: 9px; }
    .activity-pill, .streak-badge { font-size: 8px; }
    .lp-text { font-size: 26px; }
    .rank-text { font-size: 11px; letter-spacing: 1.2px; }
    .chevron { min-width: auto; font-size: 9px; }
    .card-refresh-btn { width: 28px; height: 28px; }
    .match-panel-inner { padding: 14px; }
    .match-summary { gap: 10px; }
    .match-list-header { flex-direction: column; align-items: flex-start; }
    .ledger-hero-main { flex-direction: column; }
    .ledger-hero-avatar { width: 58px; height: 58px; }
    .story-asides { grid-template-columns: 1fr; }
    .codex-match-card { grid-template-columns: 1fr; }
    .codex-match-right { justify-items: start; }
    .codex-pulse-chart-wrap { height: 260px; }
    .match-row { grid-template-columns: 28px 1fr 1fr; grid-template-rows: auto auto auto; gap: 8px 10px; }
    .match-champ { grid-column: 2 / 4; }
    .match-kda { grid-column: 2; }
    .match-cs { grid-column: 3; }
    .match-duration { display: none; }
    .match-time-stack,
    .match-history-row .match-timebox {
        grid-column: 2 / 4;
        justify-items: start;
    }
    .match-timebox {
        justify-items: start;
    }
    .match-lp { grid-column: 2 / 4; }
    .detailed-match { grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; gap: 10px; }
    .dm-type { grid-column: 1; grid-row: 1 / 4; }
    .dm-champ-block { grid-column: 2; grid-row: 1; }
    .dm-stats { grid-column: 2; grid-row: auto; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
    .dm-items { grid-column: 2; grid-row: 3; }
    .profile-hero { height: 320px; }
    .milestone-feed { right: 12px; left: 12px; bottom: 18px; }
    .milestone-toast { width: auto; }
}

/* Massive art-direction rewrite */
:root {
    --bg-ivory: #f6f1e7;
    --bg-stone: #e8dece;
    --panel-luminous: rgba(255, 252, 247, 0.84);
    --panel-heavy: rgba(252, 248, 241, 0.92);
    --outline: rgba(116, 88, 40, 0.22);
    --outline-strong: rgba(116, 88, 40, 0.34);
    --shadow-temple: 0 30px 60px rgba(67, 49, 21, 0.12);
    --shadow-soft-2: 0 14px 24px rgba(67, 49, 21, 0.08);
    --gold-rich: #9b7330;
    --gold-pale: #e7cf97;
    --wine: #8d3f35;
    --olive: #4d7752;
}

body {
    font-family: 'Cormorant Garamond', serif;
    background:
        radial-gradient(circle at 50% 0%, rgba(231, 207, 151, 0.34), transparent 28%),
        radial-gradient(circle at 100% 24%, rgba(193, 155, 87, 0.10), transparent 22%),
        radial-gradient(circle at 0% 80%, rgba(193, 155, 87, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(246,241,231,0.98)),
        repeating-linear-gradient(115deg, rgba(255,255,255,0.88) 0px, rgba(255,255,255,0.88) 36px, rgba(240,233,220,0.84) 36px, rgba(240,233,220,0.84) 72px);
}

.page-aura {
    background:
        linear-gradient(90deg, rgba(155,115,48,0.10), transparent 8%, transparent 92%, rgba(155,115,48,0.10)),
        radial-gradient(circle at 50% 9%, rgba(231,207,151,0.2), transparent 34%);
}

.grand-hall {
    max-width: 1220px;
    padding: 24px 20px 64px;
}

.section-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.80), rgba(248,243,235,0.94)),
        radial-gradient(circle at top right, rgba(231,207,151,0.10), transparent 34%);
    border: 1px solid var(--outline);
    box-shadow: var(--shadow-temple);
}

.section-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.34), transparent 26%),
        linear-gradient(90deg, rgba(255,255,255,0.18), transparent 18%, transparent 82%, rgba(255,255,255,0.18));
    opacity: 0.9;
}

.section-panel > * {
    position: relative;
    z-index: 1;
}

.temple-masthead {
    padding: 26px 30px;
    margin-bottom: 18px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 50% 0%, rgba(231,207,151,0.18), transparent 28%),
        linear-gradient(180deg, rgba(255,252,247,0.88), rgba(248,242,233,0.92));
}

.crest-mark, .section-kicker, .section-hint, .eyebrow, .metric-label, .honor-label, .debt-label, .debt-meta, .podium-seat, .sanctum-note, .podium-friend {
    font-family: 'Cinzel', serif;
}

.title-block h1 {
    font-size: clamp(44px, 7vw, 88px);
    letter-spacing: 4px;
    color: var(--gold-rich);
    text-shadow: 0 10px 26px rgba(155,115,48,0.08);
}

.title-block .subtitle {
    max-width: 760px;
    font-size: 21px;
    line-height: 1.38;
    color: #645948;
}

.hero-link, .refresh-all-btn, .close-profile-btn, .view-archives-btn, .reload-btn {
    font-size: 11px;
    letter-spacing: 1.6px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.74);
    border-color: rgba(155,115,48,0.22);
    box-shadow: 0 8px 18px rgba(67,49,21,0.06);
}

.hero-sanctum {
    display: grid;
    gap: 20px;
    padding: 26px 30px;
    margin-bottom: 18px;
}

.sanctum-copy h2 {
    margin-top: 8px;
    font-size: clamp(32px, 4.2vw, 52px);
    line-height: 0.98;
    color: #2d241c;
}

.sanctum-copy p {
    max-width: 780px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.34;
    color: #6a5d4e;
}

.sanctum-note-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.sanctum-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.56);
    border: 1px solid rgba(155,115,48,0.12);
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--gold-rich);
}

.sanctum-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
    gap: 16px;
    align-items: stretch;
}

.crown-chamber, .podium-chamber {
    padding: 20px;
    border-radius: 22px;
    border: 1px solid rgba(155,115,48,0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(248,242,233,0.82));
}

.crown-chamber {
    display: grid;
    gap: 14px;
}

.crown-chamber-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crown-mark {
    font-size: 28px;
    color: var(--gold-rich);
}

.crown-chamber strong {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.95;
    color: #2c251d;
}

.crown-chamber p {
    font-size: 18px;
    color: #6b5f51;
}

.sanctum-stat-ribbon {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sanctum-stat {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(155,115,48,0.12);
}

.sanctum-stat strong {
    display: block;
    margin-top: 6px;
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: #2a241d;
}

.podium-chamber h2 {
    margin-top: 4px;
    font-family: 'Cinzel', serif;
    font-size: 20px;
    color: #2e261f;
}

.podium-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.podium-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 196px;
    padding: 16px 14px;
    border-radius: 20px;
    border: 1px solid rgba(155,115,48,0.14);
    background: rgba(255,255,255,0.62);
    justify-content: flex-end;
}

.podium-1 {
    background: linear-gradient(180deg, rgba(255,249,236,0.94), rgba(249,239,212,0.82));
    border-color: rgba(155,115,48,0.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.52), 0 18px 30px rgba(155,115,48,0.10);
    transform: translateY(-8px);
}

.podium-2, .podium-3 {
    background: linear-gradient(180deg, rgba(255,255,255,0.76), rgba(245,238,226,0.84));
}

.podium-mark {
    font-size: 26px;
    color: var(--gold-rich);
}

.podium-seat, .podium-friend {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8c7a61;
}

.podium-card strong {
    font-size: 23px;
    line-height: 0.98;
    color: #2c251d;
}

.podium-card p {
    font-size: 14px;
    color: #6b5d4f;
    line-height: 1.34;
}

.frontispiece-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, 0.94fr);
    gap: 16px;
    margin-bottom: 16px;
}

.throne-shell, .honors-shell, .debt-shell, .leaderboard-shell {
    padding: 20px 22px;
}

.throne-shell, .honors-shell {
    margin-bottom: 0;
}

.throne-timeline {
    grid-template-columns: 1fr;
    gap: 12px;
}

.throne-entry,
.honor-card,
.debt-card,
.story-mini-card,
.codex-record-card,
.records-vault-card,
.codex-arc-card,
.codex-match-card,
.codex-hero-chip,
.mini-honor-item,
.codex-hero-card,
.codex-stat-card {
    border-radius: 20px;
}

.throne-entry-featured {
    grid-column: span 1;
    min-height: 184px;
}

.throne-entry strong {
    font-size: 24px;
}

.throne-entry p {
    font-size: 15px;
}

.throne-combatant {
    border-radius: 16px;
}

.honors-grid, .debt-grid, .records-vault-grid, .codex-record-grid {
    gap: 10px;
}

.honor-card, .debt-card {
    min-height: 152px;
    padding: 15px 14px;
}

.honor-card h3, .debt-card h3, .records-vault-card h3 {
    font-size: 27px;
}

.honor-card p, .debt-card p, .records-vault-card p {
    font-size: 14px;
}

.debt-shell {
    margin-bottom: 16px;
}

.leaderboard-shell {
    padding-top: 22px;
}

.leaderboard-intro {
    align-items: flex-end;
    padding-bottom: 14px;
}

.leaderboard-intro h2 {
    font-size: clamp(28px, 3vw, 40px);
    color: #8c6526;
}

.leaderboard-intro p {
    font-size: 18px;
    max-width: 720px;
}

.leaderboard-columns {
    grid-template-columns: 90px minmax(0, 1fr) 210px;
    padding: 10px 10px 8px;
}

.player-row {
    border-radius: 22px;
    border: 1px solid rgba(155,115,48,0.14);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.82), rgba(248,242,233,0.90)),
        radial-gradient(circle at right center, rgba(231,207,151,0.08), transparent 28%);
    box-shadow: 0 14px 24px rgba(67,49,21,0.05);
}

.player-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, rgba(155,115,48,0.2), rgba(155,115,48,0.06));
}

.player-row.seat-first::before {
    background: linear-gradient(180deg, rgba(155,115,48,0.95), rgba(231,207,151,0.24));
}

.player-row.seat-top-three:not(.seat-first)::before {
    background: linear-gradient(180deg, rgba(155,115,48,0.5), rgba(231,207,151,0.18));
}

.row-header {
    grid-template-columns: 88px minmax(0, 1fr) 210px 90px;
    padding: 15px 16px 15px 12px;
    gap: 14px;
}

.row-rank {
    width: 52px;
    height: 52px;
    font-size: 16px;
}

.row-rank-caption {
    font-size: 9px;
}

.avatar {
    width: 56px;
    height: 56px;
}

.summoner-name {
    font-size: clamp(24px, 2.5vw, 31px);
    font-weight: 600;
}

.summoner-tag {
    font-size: 15px;
}

.identity-honorific, .identity-status {
    font-size: 10px;
    letter-spacing: 1.8px;
}

.friend-chip, .activity-pill, .streak-badge, .lp-pill, .event-seal, .dm-multikill {
    font-size: 9px;
    padding: 4px 9px;
    letter-spacing: 1.05px;
}

.row-center {
    gap: 4px;
}

.standing-label {
    font-size: 9px;
}

.rank-text {
    font-size: 14px;
}

.lp-text {
    font-size: clamp(30px, 3vw, 38px);
}

.card-refresh-btn {
    width: 32px;
    height: 32px;
}

.chevron {
    font-size: 10px;
    letter-spacing: 1.8px;
}

.match-panel-inner {
    padding: 15px 16px 17px;
}

.match-summary {
    grid-template-columns: auto auto 1fr;
    gap: 14px;
}

.wr-num {
    font-size: 46px;
}

.story-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 14px;
}

.chart-wrapper,
.milestone-ledger {
    border-radius: 20px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(155,115,48,0.12);
}

.chart-wrapper {
    padding: 15px 15px 10px;
    min-height: 292px;
    height: auto;
}

.story-chart-panel {
    min-height: 292px;
    max-height: none;
    overflow: visible;
}

.story-chart-panel canvas {
    height: 188px !important;
    max-height: 188px;
}

.story-panel-head h3,
.match-list-header h3 {
    font-size: 21px;
}

.story-panel-foot {
    font-size: 12px;
}

.story-asides {
    gap: 10px;
}

.match-row {
    grid-template-columns: 34px 170px minmax(104px, 0.95fr) minmax(104px, 0.95fr) minmax(96px, 116px) minmax(220px, 248px);
    padding: 11px 12px;
    border-radius: 16px;
    gap: 10px 12px;
}

.match-decay-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    background: rgba(120, 103, 80, 0.05);
    border-left-color: rgba(141, 133, 123, 0.32);
    padding-top: 8px;
    padding-bottom: 8px;
}
.match-history-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(96px, 116px) auto;
}

.champ-name,
.kda-nums,
.cs-num {
    font-size: 16px;
}

.kda-ratio,
.cs-label,
.match-duration {
    font-size: 12px;
}

.match-duration {
    width: 64px;
    justify-self: end;
    text-align: right;
}

.match-time-stack .match-duration {
    width: auto;
}

.match-time-relative {
    font-size: 14px;
}

.match-time-exact {
    font-size: 10.5px;
}

.match-lp {
    width: min(100%, 248px);
    min-width: 0;
    justify-self: end;
    display: grid;
    justify-items: end;
    align-content: start;
}

.match-lp > * {
    max-width: 100%;
}

.lp-note,
.match-events,
.match-omen {
    width: 100%;
}

.story-mini-card {
    padding: 11px 12px;
}

.story-mini-card strong {
    font-size: 13px;
}

.story-mini-card p {
    font-size: 11px;
}

.story-mini-avatar {
    width: 40px;
    height: 40px;
}

.podium-card {
    min-height: 176px;
    padding: 14px 12px;
}

.podium-card strong {
    font-size: 21px;
}

.podium-card p {
    font-size: 13px;
}

.match-omen {
    border-radius: 14px;
}

.season-ribbon {
    padding: 18px 22px;
    gap: 16px;
    margin-top: 18px;
}

.season-ribbon-copy h2 {
    font-size: 26px;
}

.season-ribbon-copy p {
    font-size: 16px;
}

.season-ribbon-stat {
    border-radius: 16px;
}

.season-frontispiece {
    display: grid;
    gap: 18px;
    padding: 26px 30px;
    margin-bottom: 18px;
}

.season-frontispiece-copy h2 {
    margin-top: 8px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 0.98;
    color: #2f261f;
}

.season-frontispiece-copy p {
    max-width: 860px;
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.36;
    color: #6a5d4f;
}

.season-summary-grid {
    padding: 0;
}

.codex-hero-card {
    padding: 18px 18px 20px;
}

.codex-hero-card h2 {
    font-size: 34px;
}

.codex-hero-card p,
.codex-stat-card p {
    font-size: 15px;
}

.codex-stat-grid {
    gap: 12px;
    padding: 0 0 18px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.codex-stat-card {
    min-height: 146px;
    padding: 18px 16px;
    background: rgba(255,255,255,0.64);
    border: 1px solid rgba(155,115,48,0.12);
}

.records-vault-panel {
    padding: 24px 26px;
}

.season-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 18px;
}

.codex-table-panel {
    padding: 24px 26px;
}

.codex-table {
    min-width: 1040px;
}

.codex-table th,
.codex-table td {
    padding: 13px 11px;
    font-size: 13px;
}

.codex-table th {
    font-size: 10px;
}

.codex-page {
    max-width: 1260px;
}

.codex-hero-shell {
    padding: 30px 32px;
    background-size: cover;
    background-position: center;
}

.codex-hero-shell::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 54%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(246,241,231,0.68) 38%, rgba(246,241,231,0.96));
}

.codex-hero-shell > * {
    position: relative;
    z-index: 1;
}

.codex-hero-main {
    gap: 24px;
}

.codex-hero-standing strong {
    font-size: 24px;
}

.codex-hero-lp {
    font-size: 46px;
}

.codex-chronicle-layout,
.codex-bottom-layout {
    gap: 18px;
}

.codex-pulse-panel,
.codex-match-panel,
.codex-side-card,
.codex-arcs-panel,
.codex-records-panel {
    padding: 24px 26px;
}

.codex-pulse-chart-wrap {
    height: 360px;
    border-radius: 22px;
}

.codex-record-card strong {
    font-size: 24px;
}

.codex-match-card {
    border-radius: 18px;
    padding: 14px 15px;
}

.codex-match-left strong {
    font-size: 18px;
}

.milestone-feed {
    right: 28px;
    bottom: 28px;
}

.milestone-toast {
    width: min(360px, calc(100vw - 36px));
    backdrop-filter: blur(10px);
}

.profile-overlay {
    display: none !important;
}

@media (max-width: 1100px) {
    .sanctum-stage,
    .frontispiece-grid,
    .season-layout,
    .codex-chronicle-layout,
    .codex-bottom-layout {
        grid-template-columns: 1fr;
    }

    .podium-grid,
    .sanctum-stat-ribbon {
        grid-template-columns: 1fr;
    }

    .podium-1 {
        transform: none;
    }
}

@media (max-width: 780px) {
    .grand-hall {
        padding: 14px 10px 34px;
    }

    .temple-masthead,
    .hero-sanctum,
    .throne-shell,
    .honors-shell,
    .debt-shell,
    .leaderboard-shell,
    .season-frontispiece,
    .records-vault-panel,
    .codex-table-panel,
    .codex-pulse-panel,
    .codex-match-panel,
    .codex-side-card,
    .codex-arcs-panel,
    .codex-records-panel,
    .codex-hero-shell {
        padding: 18px 16px;
    }

    .title-block h1 {
        font-size: 40px;
        letter-spacing: 2px;
    }

    .title-block .subtitle,
    .sanctum-copy p,
    .season-frontispiece-copy p,
    .leaderboard-intro p {
        font-size: 16px;
    }

    .sanctum-copy h2,
    .season-frontispiece-copy h2 {
        font-size: 30px;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-link,
    .refresh-all-btn {
        flex: 1 1 180px;
    }

    .frontispiece-grid,
    .podium-grid,
    .honors-grid,
    .debt-grid,
    .records-vault-grid,
    .codex-record-grid {
        grid-template-columns: 1fr;
    }

    .row-header {
        grid-template-columns: 60px minmax(0, 1fr);
        grid-template-areas:
            "rank identity"
            "standing standing"
            "actions actions";
        gap: 12px;
    }

    .row-rank-column { grid-area: rank; }
    .row-left { grid-area: identity; }
    .row-center { grid-area: standing; align-items: flex-start; text-align: left; }
    .season-record-badge { align-self: flex-start; }
    .row-right { grid-area: actions; justify-content: space-between; }
    .standing-label { display: block; }
    .summoner-name { font-size: 22px; }
    .lp-text { font-size: 30px; }
    .story-grid,
    .story-asides {
        grid-template-columns: 1fr;
    }

    .chart-wrapper {
        min-height: 290px;
    }

    .story-chart-panel canvas {
        height: 188px !important;
        max-height: 188px;
    }

    .match-row,
    .codex-match-card {
        grid-template-columns: 1fr;
    }

    .match-duration {
        display: none;
    }

    .match-time-stack,
    .match-timebox {
        justify-items: start;
    }

    .codex-match-right {
        justify-items: start;
    }

    .codex-pulse-chart-wrap {
        height: 280px;
    }

    .season-ribbon {
        grid-template-columns: 1fr;
    }

    .season-ribbon-stats {
        grid-template-columns: 1fr;
    }

    .build-badge {
        right: 10px;
        bottom: 10px;
        padding: 7px 10px;
        font-size: 9px;
    }
}