@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap');

:root {
    --bg: #0b0e13;
    --surface: rgba(16, 20, 28, .74);
    --surface-2: #10141c;
    --line: rgba(212, 175, 55, .22);
    --line-faint: rgba(212, 175, 55, .08);
    --text: #e6dfd3;
    --muted: #8c98a8;
    --ice: #88a0c0;
    --violet: #c5a059;
    --mint: #91b4a5;
    --amber: #c5a059;
    --font-title: 'Cinzel', serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at 50% -10%, rgba(136,160,192,.1), transparent 70%), radial-gradient(circle at 80% 90%, rgba(197,160,89,.04), transparent 50%);
    background-attachment: fixed;
    font-family: var(--font-sans);
    font-weight: 300;
    position: relative;
    overflow-x: hidden;
}
a { color: inherit; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .13; }
.ambient-one { width: 28rem; height: 28rem; right: -12rem; top: 18%; background: var(--violet); }
.ambient-two { width: 22rem; height: 22rem; left: -12rem; bottom: 5%; background: var(--ice); }

.frost-nav { background: rgba(8, 13, 24, .82); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.navbar-brand .brand-mark { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; color: var(--ice); background: linear-gradient(145deg, rgba(143,220,255,.18), rgba(155,140,255,.1)); border: 1px solid rgba(143,220,255,.28); border-radius: .8rem; }
.navbar-brand strong { display: block; font-size: .96rem; letter-spacing: .18em; }
.navbar-brand small { display: block; color: var(--muted); font-size: .58rem; letter-spacing: .36em; }
.navbar .nav-link { color: var(--muted); border-radius: .65rem; padding: .6rem .85rem !important; font-size: .9rem; font-weight: 600; }
.navbar .nav-link i { margin-right: .38rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--text); background: rgba(143,220,255,.08); }

.section-kicker { color: var(--ice); font-size: .68rem; font-weight: 800; letter-spacing: .18em; }
.presence { display: inline-block; width: .46rem; height: .46rem; margin-right: .3rem; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(105,221,189,.1); }

.metric-card, .panel, .training-card, .member-card, .callout { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1rem 3rem rgba(0,0,0,.12); backdrop-filter: blur(12px); }
.metric-card { display: flex; min-height: 7.2rem; align-items: center; gap: 1rem; padding: 1.2rem; border-radius: 1rem; }
.metric-card > i { display: grid; flex: 0 0 2.75rem; height: 2.75rem; place-items: center; border-radius: .8rem; font-size: 1.15rem; background: rgba(255,255,255,.05); }
.metric-card strong { display: block; font-size: 1.65rem; line-height: 1; }
.metric-card span { display: block; margin-top: .4rem; color: var(--muted); font-size: .76rem; }
.tone-ice > i { color: var(--ice); }.tone-violet > i { color: var(--violet); }.tone-mint > i { color: var(--mint); }.tone-amber > i { color: var(--amber); }

.panel { overflow: hidden; border-radius: 1.15rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1.35rem 1.4rem 1rem; }
.panel-head h2 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 750; }
.soft-link { color: var(--muted); text-decoration: none; font-size: .8rem; }
.soft-link:hover { color: var(--ice); }
.score-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
.rank { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid rgba(143,220,255,.22); border-radius: .75rem; color: var(--ice); background: rgba(143,220,255,.07); font-size: .78rem; font-weight: 900; }
.rank-s, .rank-ss, .rank-x, .rank-xh, .rank-sh { color: var(--amber); border-color: rgba(240,200,117,.25); background: rgba(240,200,117,.08); }
.rank-sm { display: inline-grid; width: 2rem; height: 2rem; border-radius: .55rem; }
.score-main { min-width: 0; }
.score-main strong, .score-main span, .score-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-main span, .score-main small { color: var(--muted); }
.score-main span { margin-top: .12rem; font-size: .8rem; }
.score-main small { margin-top: .3rem; font-size: .68rem; }
.score-stats { text-align: right; }
.score-stats strong { display: block; font-size: 1.05rem; }
.score-stats strong small, .score-stats span { color: var(--muted); font-size: .7rem; }
.score-stats .bi-star-fill, .score-table .bi-star-fill, .training-map .bi-star-fill { margin-left: .15rem; color: var(--amber); font-size: .62rem; }

.leader-list { padding: 0 .65rem; }
.leader-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .65rem; align-items: center; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.leader-place { color: var(--muted); font-weight: 800; text-align: center; }
.leader-row div strong, .leader-row div small { display: block; }
.leader-row div small, .leader-row > span:last-child small { color: var(--muted); font-size: .68rem; }
.leader-row > span:last-child { color: var(--ice); font-weight: 700; }
.panel-note { margin: 1rem 1.4rem 1.3rem; color: var(--muted); font-size: .68rem; line-height: 1.5; }

.search-bar { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.search-bar > i { color: var(--muted); }
.search-bar .form-control { color: var(--text); background: transparent; border: 0; box-shadow: none; }
.search-bar .form-control::placeholder { color: #65728a; }
.btn-ghost { color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.score-table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); font-size: .82rem; }
.score-table th { padding: .8rem 1rem; color: var(--muted); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.score-table td { padding: .9rem 1rem; }
.score-table td strong, .score-table td small { display: block; }
.score-table td small { margin-top: .18rem; color: var(--muted); font-size: .68rem; }
.mod-badge, .status { display: inline-flex; padding: .3rem .5rem; color: var(--ice); background: rgba(143,220,255,.08); border: 1px solid rgba(143,220,255,.14); border-radius: .45rem; font-size: .65rem; font-weight: 800; }
.empty-state { padding: 3rem !important; color: var(--muted) !important; text-align: center; }

.callout { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; }
.callout > i { color: var(--ice); font-size: 1.4rem; }
.callout strong, .callout span { display: block; }
.callout span { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.training-card { display: flex; flex-direction: column; padding: 1.15rem; border-radius: 1rem; }
.plan-id { color: var(--muted); font-size: .66rem; }
.status-completed { color: var(--mint); border-color: rgba(105,221,189,.18); background: rgba(105,221,189,.08); }
.status-replaced, .status-skipped { color: var(--muted); }
.training-map { padding: 1.4rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.training-map > span { color: var(--violet); font-size: .7rem; font-weight: 750; }
.training-map h2 { margin: .25rem 0; font-size: 1.15rem; }
.training-map p { margin: 0; color: var(--muted); font-size: .74rem; }
.training-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0 0; }
.training-meta dt { color: var(--muted); font-size: .63rem; font-weight: 600; }
.training-meta dd { margin: .2rem 0 0; font-size: .76rem; overflow-wrap: anywhere; }

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .8rem; }
.member-card { position: relative; display: flex; align-items: center; gap: .85rem; padding: .9rem; border-radius: 1rem; transition: transform .18s ease, border-color .18s ease; }
.member-card:hover { transform: translateY(-2px); border-color: rgba(143,220,255,.28); }
.avatar-wrap { position: relative; flex: 0 0 3rem; }
.avatar-wrap img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .8rem; }
.avatar-wrap .presence { position: absolute; right: -.1rem; bottom: -.1rem; width: .62rem; height: .62rem; margin: 0; background: #49576c; border: 2px solid var(--surface-2); box-shadow: none; }
.avatar-wrap .presence.online { background: var(--mint); }
.member-body { min-width: 0; flex: 1; }
.member-body h2 { overflow: hidden; margin: 0; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.member-body p, .member-body small { display: block; margin: .25rem 0 0; color: var(--muted); font-size: .68rem; }
.member-body p i { color: var(--violet); }
.country { color: var(--muted); font-size: .65rem; }
.member-card > a { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: .6rem; text-decoration: none; }
.member-card > a:hover { color: var(--ice); }
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--ice); }

.profile-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem; background: linear-gradient(120deg, rgba(143,220,255,.09), rgba(155,140,255,.06)), var(--surface); border: 1px solid var(--line); border-radius: 1.15rem; }
.profile-identity { display: flex; align-items: center; gap: 1.15rem; min-width: 0; }
.profile-avatar { position: relative; flex: 0 0 5rem; }
.profile-avatar img { width: 5rem; height: 5rem; object-fit: cover; border: 1px solid rgba(143,220,255,.28); border-radius: 1.15rem; }
.profile-avatar .presence { position: absolute; right: -.15rem; bottom: -.1rem; width: .8rem; height: .8rem; border: 3px solid #121b2e; }
.profile-identity h2 { margin: .2rem 0; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800; letter-spacing: -.035em; }
.profile-identity p { margin: 0; color: var(--muted); font-size: .76rem; }
.profile-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.profile-badges span { padding: .3rem .5rem; color: var(--mint); background: rgba(105,221,189,.07); border: 1px solid rgba(105,221,189,.14); border-radius: .45rem; font-size: .65rem; }
.osu-button { flex: none; color: var(--bg); background: var(--ice); border: 0; font-size: .78rem; font-weight: 800; }
.osu-button:hover { color: var(--bg); background: #b7e9ff; }
.profile-metric { height: 100%; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; }
.profile-metric strong, .profile-metric span { display: block; }
.profile-metric strong { color: var(--ice); font-size: 1.05rem; }
.profile-metric span { margin-top: .3rem; color: var(--muted); font-size: .65rem; line-height: 1.3; }

.skill-list { padding: 0 .65rem; }
.skill-row { padding: .85rem .75rem; border-top: 1px solid var(--line); }
.skill-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.skill-head strong, .skill-head small { display: block; }
.skill-head small, .confidence { color: var(--muted); font-size: .63rem; }
.skill-head > span { color: var(--ice); font-size: .9rem; font-weight: 800; }
.skill-head > span small { display: inline; margin-left: .1rem; }
.skill-track { height: .35rem; margin: .65rem 0 .38rem; overflow: hidden; background: rgba(143,220,255,.08); border-radius: 99px; }
.skill-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--ice)); border-radius: inherit; }
.confidence { display: block; }

.weakness-list { padding: 0 .65rem; }
.weakness-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.weakness-rank { color: var(--violet); font-size: .72rem; font-weight: 900; text-align: center; }
.weakness-row strong, .weakness-row small { display: block; }
.weakness-row strong { font-size: .8rem; }
.weakness-row small { margin-top: .15rem; color: var(--muted); font-size: .62rem; }
.priority { padding: .25rem .42rem; border-radius: .4rem; color: var(--muted); background: rgba(255,255,255,.04); font-size: .58rem; font-weight: 800; }
.priority-high { color: #ff9b9b; background: rgba(255,110,110,.08); }
.priority-medium { color: var(--amber); background: rgba(240,200,117,.08); }
.priority-low { color: var(--mint); background: rgba(105,221,189,.08); }
.profile-training-list { padding: 0 .65rem .5rem; }
.profile-training-list article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.profile-training-list strong, .profile-training-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-training-list strong { font-size: .78rem; }
.profile-training-list small { margin-top: .18rem; color: var(--muted); font-size: .62rem; }

.detail-link { color: inherit; text-decoration: none; }
.detail-link:hover { color: var(--ice); }
.detail-hero { position: relative; min-height: 15rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--surface-2); }
.detail-cover, .detail-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.detail-cover { object-fit: cover; }
.detail-shade { background: linear-gradient(90deg, rgba(8,13,24,.96) 0%, rgba(8,13,24,.78) 48%, rgba(8,13,24,.28) 100%), linear-gradient(0deg, rgba(8,13,24,.72), transparent); }
.detail-content { position: relative; z-index: 1; display: flex; min-height: 15rem; align-items: center; gap: 1.2rem; padding: 2rem; }
.rank-large { flex: 0 0 4.5rem; width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; font-size: 1.3rem; }
.detail-title { min-width: 0; flex: 1; }
.detail-title > span { color: var(--ice); font-size: .72rem; font-weight: 800; letter-spacing: .08em; }
.detail-title h2 { margin: .25rem 0; font-size: clamp(1.65rem, 4vw, 2.65rem); font-weight: 850; letter-spacing: -.045em; }
.detail-title p { margin: 0; color: #b6c3d8; font-size: .78rem; }
.map-difficulties { display: flex; max-width: min(47rem,65vw); gap: .4rem; margin-top: .9rem; padding: .18rem 0 .4rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(197,160,89,.4) transparent; }
.map-difficulty { --difficulty-color: #8aa4c7; display: inline-grid; grid-template-columns: auto minmax(0,auto) auto; flex: 0 0 auto; align-items: center; gap: .4rem; min-height: 2rem; padding: .35rem .55rem; color: #b7c1d1; text-decoration: none; background: rgba(8,12,18,.72); border: 1px solid rgba(136,160,192,.2); border-radius: 2px; transition: color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease; }
.map-difficulty > i { color: var(--difficulty-color); font-size: .48rem; filter: drop-shadow(0 0 5px var(--difficulty-color)); }
.map-difficulty span { max-width: 12rem; overflow: hidden; font-size: .63rem; font-weight: 650; letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; }
.map-difficulty small { display: inline-flex; align-items: center; gap: .15rem; color: #78869b; font-size: .55rem; white-space: nowrap; }
.map-difficulty small i { color: var(--difficulty-color); font-size: .48rem; }
.map-difficulty:hover,.map-difficulty:focus-visible { color: var(--text); background: rgba(20,27,38,.88); border-color: color-mix(in srgb,var(--difficulty-color) 58%,transparent); transform: translateY(-1px); }
.map-difficulty.active { color: #f2eee4; background: color-mix(in srgb,var(--difficulty-color) 12%,rgba(8,12,18,.9)); border-color: var(--difficulty-color); box-shadow: inset 0 -2px 0 var(--difficulty-color),0 0 14px color-mix(in srgb,var(--difficulty-color) 18%,transparent); }
.score-open-link { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: var(--ice); text-decoration: none; background: rgba(136,160,192,.07); border: 1px solid rgba(136,160,192,.22); border-radius: 2px; transition: color .16s ease,background-color .16s ease,border-color .16s ease,transform .16s ease; }
.score-open-link:hover,.score-open-link:focus-visible { color: var(--amber); background: rgba(197,160,89,.09); border-color: rgba(197,160,89,.55); transform: translateY(-1px); }
.score-history-panel { position: relative; overflow: hidden; }
.score-history-panel::before { position: absolute; top: -5rem; right: 8%; width: 18rem; height: 10rem; content: ''; pointer-events: none; background: radial-gradient(ellipse,rgba(136,160,192,.1),transparent 68%); filter: blur(12px); }
.score-history-table { position: relative; }
.score-history-row { cursor: pointer; outline: none; }
.score-history-row td { position: relative; background: transparent; border-color: rgba(136,160,192,.1); transition: color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.score-history-row td:first-child::before { position: absolute; inset: 0 auto 0 0; width: 2px; content: ''; background: linear-gradient(180deg,transparent,var(--ice),var(--amber),transparent); opacity: 0; transform: scaleY(.35); transition: opacity .2s ease,transform .2s ease; }
.score-history-row:hover td,.score-history-row:focus-visible td { color: #f0eee8; background: linear-gradient(90deg,rgba(136,160,192,.1),rgba(197,160,89,.035)); border-color: rgba(136,160,192,.25); box-shadow: inset 0 1px rgba(255,255,255,.018),inset 0 -1px rgba(136,160,192,.08); }
.score-history-row:hover td:first-child::before,.score-history-row:focus-visible td:first-child::before,.score-history-row.selected td:first-child::before { opacity: 1; transform: scaleY(1); }
.score-history-row.selected td { background: linear-gradient(90deg,rgba(197,160,89,.105),rgba(136,160,192,.045)); border-color: rgba(197,160,89,.28); }
.score-history-row.selected td:first-child { box-shadow: inset 3px 0 rgba(197,160,89,.72); }
.score-history-date { display: grid; gap: .28rem; min-width: 9.5rem; }
.score-history-date strong { color: var(--text); font-family: var(--font-serif); font-weight: 500; }
.selected-score-marker { display: inline-flex; width: max-content; align-items: center; gap: .25rem; color: var(--amber); font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.selected-score-marker i { filter: drop-shadow(0 0 6px rgba(197,160,89,.7)); }
.score-history-open { display: inline-grid; width: 1.85rem; height: 1.85rem; place-items: center; color: #718098; text-decoration: none; border: 1px solid rgba(136,160,192,.18); border-radius: 50%; transition: color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease; }
.score-history-row:hover .score-history-open,.score-history-row:focus-visible .score-history-open { color: var(--amber); background: rgba(197,160,89,.08); border-color: rgba(197,160,89,.5); transform: translateX(2px); }
.map-requirement-card { position: relative; overflow: hidden; background-image: radial-gradient(circle at 88% 8%,rgba(197,160,89,.11),transparent 26%),linear-gradient(145deg,rgba(136,160,192,.045),transparent 58%); }
.map-requirement-card::after { position: absolute; right: -2.5rem; bottom: -3rem; width: 9rem; height: 9rem; content: ''; pointer-events: none; border: 1px solid rgba(197,160,89,.08); transform: rotate(45deg); }
.requirement-sigil { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; width: 2.2rem; height: 2.2rem; place-items: center; color: var(--amber); border: 1px solid rgba(197,160,89,.24); transform: rotate(45deg); }
.requirement-sigil i { filter: drop-shadow(0 0 7px rgba(197,160,89,.55)); transform: rotate(-45deg); }
.map-requirement-card .panel-head { padding-right: 3.8rem; }
.requirement-state { display: inline-flex; align-items: center; gap: .3rem; color: #9dc8b0; font-size: .68rem; letter-spacing: .055em; text-transform: uppercase; }
.requirement-intro { margin: -.28rem 1.1rem .9rem; color: rgba(213,218,224,.68); font-family: var(--font-serif); font-size: .86rem; font-style: italic; line-height: 1.5; }
.requirement-basics { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 1.1rem .9rem; border: 1px solid rgba(197,160,89,.19); background: linear-gradient(90deg,rgba(136,160,192,.025),rgba(197,160,89,.025),rgba(136,160,192,.02)); box-shadow: inset 0 0 18px rgba(197,160,89,.02); }
.requirement-basics div { display: grid; gap: .18rem; padding: .62rem .35rem; text-align: center; background: rgba(8,12,18,.34); border-right: 1px solid rgba(197,160,89,.12); }
.requirement-basics div:last-child { border-right: 0; }.requirement-basics span { color: #8f9caf; font-size: .66rem; letter-spacing: .085em; text-transform: uppercase; }.requirement-basics strong { color: #e3ddd0; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; }
.requirement-list { display: grid; gap: .42rem; padding: 0 1.1rem 1.1rem; }
.requirement-row { position: relative; display: grid; grid-template-columns: minmax(8.4rem,1.15fr) minmax(5rem,2fr) 2.6rem minmax(9rem,1.2fr); align-items: center; gap: .65rem; min-width: 0; min-height: 2.82rem; padding: .42rem .62rem .42rem .72rem; overflow: hidden; border: 1px solid rgba(136,160,192,.12); border-left-color: rgba(197,160,89,.32); background: linear-gradient(90deg,rgba(136,160,192,.055),rgba(20,24,30,.5) 38%,rgba(197,160,89,.028)); box-shadow: inset 0 1px rgba(255,255,255,.015),inset 0 -1px rgba(0,0,0,.16); }
.requirement-row::before { position: absolute; top: .38rem; bottom: .38rem; left: 0; width: 2px; content: ''; pointer-events: none; background: linear-gradient(180deg,transparent,rgba(136,160,192,.72),rgba(216,179,99,.72),transparent); box-shadow: 0 0 8px rgba(197,160,89,.16); }
.requirement-row:hover { border-color: rgba(197,160,89,.24); background: linear-gradient(90deg,rgba(136,160,192,.075),rgba(23,27,33,.56) 38%,rgba(197,160,89,.045)); }
.requirement-name { min-width: 0; overflow: hidden; color: #d7dee7; font-family: var(--font-serif); font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.requirement-value { color: #e5c985; font-family: var(--font-serif); font-size: 1rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(197,160,89,.16); }
.requirement-track { position: relative; height: 8px; overflow: hidden; border: 1px solid rgba(136,160,192,.13); border-radius: 999px; background: rgba(4,8,13,.58); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.requirement-track::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(180deg,rgba(255,255,255,.08),transparent 48%); }
.requirement-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6f849f 0%,var(--ice) 58%,#d8b66c 100%); box-shadow: 0 0 9px rgba(136,160,192,.42),0 0 5px rgba(197,160,89,.18); }
.requirement-evidence { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: .28rem; overflow: hidden; color: #8290a3; font-family: var(--font-serif); font-size: .74rem; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.requirement-evidence span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }.requirement-evidence em { color: #a3adba; font-style: normal; }.requirement-evidence b { color: rgba(197,160,89,.5); font-weight: 400; }
@media (max-width:575.98px){ .requirement-list { gap: .34rem; padding-inline: .7rem; }.requirement-row { grid-template-columns: minmax(5.7rem,1.15fr) minmax(3rem,1.7fr) 2rem minmax(5.8rem,1fr); gap: .32rem; min-height: 2.45rem; padding: .36rem .42rem .36rem .52rem; }.requirement-name { font-size: .72rem; }.requirement-value { font-size: .78rem; }.requirement-evidence { gap: .18rem; font-size: .58rem; }.requirement-evidence em { display: none; }.requirement-track { height: 6px; } }
.requirement-missing { display: flex; align-items: flex-start; gap: .65rem; margin: 0 1.1rem 1.1rem; padding: .8rem; background: rgba(8,12,18,.38); border: 1px solid rgba(136,160,192,.12); }
.requirement-missing > i { color: var(--ice); filter: drop-shadow(0 0 6px rgba(136,160,192,.55)); }.requirement-missing div { display: grid; gap: .25rem; }.requirement-missing strong { color: #d5d9df; font-family: var(--font-serif); font-size: .74rem; font-weight: 500; }.requirement-missing span { color: var(--muted); font-size: .54rem; line-height: 1.5; }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.btn-frost { color: var(--bg); background: var(--ice); border: 0; font-size: .76rem; font-weight: 800; }
.btn-frost:hover { color: var(--bg); background: #b7e9ff; }
.map-star { display: grid; flex: 0 0 4.5rem; height: 4.5rem; place-items: center; color: var(--amber); background: rgba(8,13,24,.72); border: 1px solid rgba(240,200,117,.25); border-radius: 1.1rem; }
.map-star strong { align-self: end; font-size: 1.15rem; }
.map-star i { align-self: start; font-size: .72rem; }

.hit-stack { padding: 0 1.35rem 1.2rem; }
.hit-row { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 3.5rem; align-items: center; gap: .75rem; margin-top: .75rem; }
.hit-row > span { color: var(--muted); font-size: .72rem; }
.hit-row > strong { font-size: .72rem; text-align: right; }
.hit-track { height: .48rem; overflow: hidden; background: rgba(255,255,255,.04); border-radius: 99px; }
.hit-track span { display: block; height: 100%; min-width: .2rem; border-radius: inherit; }
.hit-300 { background: var(--ice); }.hit-100 { background: var(--mint); }.hit-50 { background: var(--amber); }.hit-miss { background: #ff7c8a; }
.detail-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.detail-grid > div { padding: 1rem 1.15rem; border-right: 1px solid var(--line); }
.detail-grid > div:last-child { border-right: 0; }
.detail-grid span, .detail-grid strong { display: block; }
.detail-grid span { color: var(--muted); font-size: .62rem; }
.detail-grid strong { margin-top: .25rem; font-size: .82rem; }
.detail-grid.compact { grid-template-columns: repeat(2,1fr); }
.detail-grid.compact > div { border-bottom: 1px solid var(--line); }
.timing-primary { padding: 1rem 1.35rem 1.25rem; }
.timing-primary span, .timing-primary strong { display: block; }
.timing-primary span { color: var(--muted); font-size: .65rem; }
.timing-primary strong { margin-top: .1rem; color: var(--ice); font-size: 2.2rem; letter-spacing: -.04em; }
.status-analyzed { color: var(--mint); border-color: rgba(105,221,189,.18); background: rgba(105,221,189,.08); }

.repeat-list { padding: 0 .65rem; }
.repeat-list article { display: grid; grid-template-columns: 1.6rem minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .8rem .75rem; border-top: 1px solid var(--line); }
.repeat-list article > span { color: var(--violet); font-size: .68rem; font-weight: 800; text-align: center; }
.repeat-list article div strong, .repeat-list article div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repeat-list article div strong { font-size: .76rem; }
.repeat-list article div small { margin-top: .15rem; color: var(--muted); font-size: .6rem; }
.repeat-list article > strong { color: var(--ice); font-size: .78rem; }
.map-params { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 1rem; border-top: 1px solid var(--line); }
.map-params div { padding: .85rem .5rem; text-align: center; border-right: 1px solid var(--line); }
.map-params div:last-child { border-right: 0; }
.map-params span, .map-params strong { display: block; }
.map-params span { color: var(--muted); font-size: .58rem; }
.map-params strong { margin-top: .15rem; font-size: .8rem; }


.achievement-list { padding: 0 .65rem .5rem; }
.achievement-list article { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) auto; align-items: center; gap: .8rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.achievement-icon { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; background: rgba(143,220,255,.06); border: 1px solid var(--line); border-radius: .75rem; font-size: 1rem; }
.achievement-list strong, .achievement-list p, .achievement-list small { display: block; margin: 0; }
.achievement-list strong { font-size: .8rem; }
.achievement-list p { overflow: hidden; margin-top: .12rem; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.achievement-list small { margin-top: .22rem; color: var(--muted); font-size: .6rem; }
.rarity-label { padding: .25rem .4rem; border-radius: .4rem; background: rgba(255,255,255,.04); font-size: .56rem; font-weight: 800; }
.rarity-text-common { color: var(--muted); }.rarity-text-uncommon { color: var(--mint); }.rarity-text-rare { color: var(--ice); }.rarity-text-epic { color: var(--violet); }.rarity-text-legendary { color: var(--amber); }.rarity-text-mythic { color: #ff9fcf; }
.rarity-uncommon { border-color: rgba(105,221,189,.22); }.rarity-rare { border-color: rgba(143,220,255,.25); }.rarity-epic { border-color: rgba(155,140,255,.28); }.rarity-legendary { border-color: rgba(240,200,117,.3); }.rarity-mythic { border-color: rgba(255,159,207,.32); }

.highlight-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; padding: 0 1rem 1rem; }
.highlight-list article { min-width: 0; padding: .85rem; background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .75rem; }
.highlight-type { color: var(--violet); font-size: .56rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.highlight-list h3 { overflow: hidden; margin: .3rem 0 .12rem; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.highlight-list p { overflow: hidden; margin: 0; color: var(--muted); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.highlight-list article > div { display: flex; justify-content: space-between; gap: .5rem; margin-top: .6rem; color: var(--muted); font-size: .58rem; }
.table-note { color: var(--muted); font-size: .62rem; }
.community-rank { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--muted); border-radius: .5rem; font-size: .68rem; font-weight: 850; }
.community-rank.top { color: var(--amber); background: rgba(240,200,117,.08); border: 1px solid rgba(240,200,117,.15); }
.delta { color: var(--muted); font-size: .62rem; }
.delta.positive { color: var(--mint); }

.decision-list { padding: 0 .65rem .5rem; }
.decision-list article { display: grid; grid-template-columns: 2.3rem minmax(0,1fr) auto; align-items: center; gap: .75rem; padding: .85rem .75rem; border-top: 1px solid var(--line); }
.decision-direction { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--violet); background: rgba(155,140,255,.07); border-radius: .65rem; }
.decision-list strong, .decision-list p, .decision-list small { display: block; margin: 0; }
.decision-list strong { font-size: .77rem; }
.decision-list p { margin-top: .14rem; color: var(--muted); font-size: .61rem; }
.decision-list small { margin-top: .22rem; color: #78879e; font-size: .57rem; }
.decision-result { text-align: right; }
.decision-result span, .decision-result a { display: block; font-size: .59rem; }
.decision-result span { color: var(--mint); }
.decision-result a { margin-top: .3rem; color: var(--ice); text-decoration: none; }
.event-list { padding: 0 .8rem .8rem; }
.event-list article { display: grid; grid-template-columns: .7rem minmax(0,1fr); gap: .65rem; padding: .8rem .4rem; border-top: 1px solid var(--line); }
.event-list article > span { width: .5rem; height: .5rem; margin-top: .2rem; background: var(--ice); border-radius: 50%; box-shadow: 0 0 0 .25rem rgba(143,220,255,.07); }
.event-list strong, .event-list p, .event-list small { display: block; margin: 0; }
.event-list strong { font-size: .73rem; }
.event-list p { margin-top: .15rem; color: var(--muted); font-size: .61rem; }
.event-list small { margin-top: .25rem; color: #6f7e94; font-size: .57rem; }

.filter-panel { padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.filter-panel .form-label { color: var(--muted); font-size: .62rem; font-weight: 700; }
.filter-panel .form-control, .filter-panel .form-select, .filter-panel .input-group-text { min-height: 2.7rem; color: var(--text); background: rgba(255,255,255,.035); border-color: var(--line); font-size: .72rem; }
.filter-panel .form-control:focus, .filter-panel .form-select:focus { border-color: rgba(143,220,255,.45); box-shadow: 0 0 0 .2rem rgba(143,220,255,.08); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }.pager > span { color: var(--muted); font-size: .62rem; text-align: center; }.pager > :last-child { justify-self: end; }
.history-track { height: .38rem; overflow: hidden; background: rgba(143,220,255,.07); border-radius: 99px; }.history-track > span { display: block; height: 100%; background: linear-gradient(90deg,var(--violet),var(--ice)); border-radius: inherit; }
.progress-list { padding: 0 .8rem .8rem; }.progress-list article { padding: .7rem .25rem; border-top: 1px solid var(--line); }
.progress-list article > div:first-child { display: grid; grid-template-columns: 2.3rem minmax(0,1fr); align-items: center; gap: .7rem; margin-bottom: .55rem; }.progress-list strong, .progress-list small { display: block; }.progress-list strong { font-size: .69rem; }.progress-list small { margin-top: .14rem; color: var(--muted); font-size: .56rem; }

.replay-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.3rem; background: linear-gradient(120deg,rgba(143,220,255,.09),rgba(155,140,255,.05)),var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; }.replay-hero h2 { margin: .25rem 0; font-size: clamp(1.25rem,3vw,1.85rem); }.replay-hero p { margin: 0; color: var(--muted); font-size: .66rem; }.replay-actions { display: flex; align-items: center; gap: .55rem; }
.analysis-state { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .65rem; color: var(--muted); background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: .65rem; font-size: .61rem; font-weight: 800; white-space: nowrap; }.analysis-state.state-complete { color: var(--mint); }.analysis-state.state-warning, .analysis-state.state-pending { color: var(--amber); }.analysis-state.state-error, .analysis-state.state-blocked { color: #ff879b; }
.analysis-notice { display: grid; grid-template-columns: 2.3rem minmax(0,1fr); align-items: center; gap: .8rem; padding: .9rem 1rem; background: rgba(143,220,255,.045); border: 1px solid var(--line); border-radius: .9rem; }.analysis-notice > i { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; color: var(--ice); background: rgba(143,220,255,.07); border-radius: .65rem; }.analysis-notice strong, .analysis-notice span, .analysis-notice small { display: block; }.analysis-notice strong { font-size: .72rem; }.analysis-notice span { margin-top: .12rem; color: var(--muted); font-size: .62rem; }.analysis-notice small { margin-top: .24rem; color: #718098; font-size: .55rem; }.analysis-notice.notice-error, .analysis-notice.notice-blocked { border-color: rgba(255,120,145,.2); }.analysis-notice.notice-pending { border-color: rgba(240,200,117,.2); }
.replay-metric-grid { display: grid; grid-template-columns: repeat(3,1fr); padding: 0 1rem 1rem; }.replay-metric-grid div { padding: .75rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.replay-metric-grid div:nth-child(3n+1) { border-left: 0; }.replay-metric-grid span, .replay-metric-grid strong { display: block; }.replay-metric-grid span { color: var(--muted); font-size: .55rem; }.replay-metric-grid strong { margin-top: .18rem; font-size: .69rem; }
.judgment-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem; padding: 0 1rem 1rem; }.judgment-strip span { padding: .5rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .55rem; font-size: .53rem; text-align: center; }.judgment-strip strong { display: block; margin-bottom: .12rem; color: var(--text); font-size: .67rem; }
.skill-comparison-list { padding: 0 1rem 1rem; }.skill-comparison-list article { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: .65rem 1rem; padding: .8rem .25rem; border-top: 1px solid var(--line); }.comparison-title strong, .comparison-title small { display: block; }.comparison-title strong { font-size: .7rem; }.comparison-title small { margin-top: .15rem; color: var(--muted); font-size: .54rem; }.comparison-bars { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }.comparison-bars > div { display: grid; grid-template-columns: 2.7rem minmax(0,1fr) 1.7rem; align-items: center; gap: .35rem; }.comparison-bars span, .comparison-bars strong { color: var(--muted); font-size: .53rem; }.comparison-bars strong { color: var(--text); text-align: right; }.comparison-track { height: .38rem; overflow: hidden; background: rgba(255,255,255,.045); border-radius: 99px; }.comparison-track i { display: block; height: 100%; background: var(--muted); border-radius: inherit; }.comparison-track.player i { background: var(--ice); }.comparison-track.replay i { background: var(--violet); }.comparison-evidence { grid-column: 2; color: #718098; font-size: .52rem; }
.replay-object-table th, .replay-object-table td { white-space: nowrap; }.judgment { padding: .2rem .35rem; color: var(--muted); background: rgba(255,255,255,.035); border-radius: .35rem; font-size: .55rem; }.judgment-miss { color: #ff879b; }.judgment-hit300 { color: var(--mint); }
.pattern-error-list, .analysis-event-list { padding: 0 .75rem .7rem; }.pattern-error-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.pattern-error-list strong, .pattern-error-list small { display: block; }.pattern-error-list strong { font-size: .66rem; }.pattern-error-list small { margin-top: .12rem; color: var(--muted); font-size: .54rem; }.pattern-error-list article > span { color: var(--ice); font-size: .67rem; }
.analysis-event-list article { display: grid; grid-template-columns: .7rem minmax(0,1fr); align-items: start; gap: .7rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.event-state { width: .5rem; height: .5rem; margin-top: .18rem; background: #ff879b; border-radius: 50%; }.event-state.success { background: var(--mint); }.analysis-event-list strong, .analysis-event-list small { display: block; }.analysis-event-list strong { font-size: .66rem; }.analysis-event-list small { margin-top: .15rem; color: var(--muted); font-size: .55rem; }

.highlight-type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.highlight-type-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .35rem .8rem; padding: 1rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; }
.highlight-type-card:hover, .highlight-type-card.active { color: var(--text); border-color: rgba(143,220,255,.32); transform: translateY(-1px); }
.highlight-type-card > span { align-self: end; color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }.highlight-type-card > strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--ice); font-size: 1.4rem; }.highlight-type-card > small { color: var(--muted); font-size: .57rem; }
.highlight-type-card.type-hall_of_fame { background: linear-gradient(135deg,rgba(240,200,117,.08),transparent),var(--surface); }.highlight-type-card.type-hall_of_shame { background: linear-gradient(135deg,rgba(255,120,145,.08),transparent),var(--surface); }
.highlight-candidate-list { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; }
.candidate-row { display: grid; grid-template-columns: 2.6rem minmax(0,1fr) auto 2rem; align-items: center; gap: .85rem; padding: .85rem 1rem; border-top: 1px solid var(--line); }.candidate-row:first-child { border-top: 0; }
.candidate-mark { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; color: var(--violet); background: rgba(155,140,255,.08); border: 1px solid rgba(155,140,255,.14); border-radius: .75rem; }.type-hall_of_fame .candidate-mark { color: var(--amber); background: rgba(240,200,117,.08); border-color: rgba(240,200,117,.16); }.type-hall_of_shame .candidate-mark { color: #ff7891; background: rgba(255,120,145,.08); border-color: rgba(255,120,145,.16); }
.candidate-main { min-width: 0; }.candidate-main > div { display: flex; align-items: center; gap: .45rem; }.candidate-main h2 { overflow: hidden; margin: .28rem 0 .12rem; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.candidate-main p { overflow: hidden; margin: 0; color: var(--muted); font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.posting-status { display: inline-flex; padding: .22rem .4rem; color: var(--amber); background: rgba(240,200,117,.07); border: 1px solid rgba(240,200,117,.13); border-radius: .4rem; font-size: .55rem; font-weight: 800; }.posting-status.posted { color: var(--mint); background: rgba(105,221,189,.07); border-color: rgba(105,221,189,.13); }
.candidate-stats { display: flex; gap: .9rem; }.candidate-stats span { color: var(--muted); font-size: .55rem; text-align: right; }.candidate-stats strong { display: block; color: var(--text); font-size: .66rem; }.candidate-open { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: .55rem; text-decoration: none; }
.highlight-detail-hero { display: grid; grid-template-columns: 3rem minmax(0,1fr) auto; align-items: center; gap: 1rem; padding: 1.3rem; background: linear-gradient(120deg,rgba(155,140,255,.09),transparent),var(--surface); border: 1px solid var(--line); border-radius: 1.1rem; }.highlight-detail-hero.type-hall_of_fame { background: linear-gradient(120deg,rgba(240,200,117,.1),transparent),var(--surface); }.highlight-detail-hero h2 { margin: .25rem 0; font-size: clamp(1.25rem,3vw,1.8rem); }.highlight-detail-hero p { margin: 0; color: var(--muted); font-size: .66rem; }
.message-preview { min-height: 13rem; margin: 0 1rem 1rem; padding: 1rem; color: var(--text); background: rgba(5,9,17,.55); border: 1px solid var(--line); border-radius: .8rem; font: .7rem/1.75 ui-monospace,SFMono-Regular,Consolas,monospace; white-space: pre-wrap; }
.highlight-meta { margin: 0; padding: 0 1rem; }.highlight-meta div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }.highlight-meta dt { color: var(--muted); font-size: .61rem; }.highlight-meta dd { margin: 0; font-size: .64rem; text-align: right; }.detail-link-stack { display: grid; gap: .5rem; padding: 1rem; }
.team-history-chart { display: flex; height: 12rem; align-items: end; gap: 2px; padding: 1rem 1rem 0; }.team-history-chart article { display: flex; height: 100%; min-width: 2px; flex: 1; align-items: end; }.team-history-chart article > span { display: block; width: 100%; min-height: .45rem; background: linear-gradient(0deg,var(--violet),var(--ice)); border-radius: .2rem .2rem 0 0; opacity: .72; }.team-history-chart article:hover > span { opacity: 1; }
.team-history-legend { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 1rem .9rem; color: var(--muted); font-size: .57rem; }.team-history-legend strong { color: var(--text); font-size: .62rem; }
.team-long-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }.team-long-metrics div { padding: .85rem 1rem; border-left: 1px solid var(--line); }.team-long-metrics div:first-child { border-left: 0; }.team-long-metrics span, .team-long-metrics strong { display: block; }.team-long-metrics span { color: var(--muted); font-size: .56rem; }.team-long-metrics strong { margin-top: .2rem; font-size: .72rem; }
.membership-events { padding: 0 .75rem .6rem; }.membership-events article { display: grid; grid-template-columns: 2rem minmax(0,1fr); align-items: center; gap: .7rem; padding: .7rem .25rem; border-top: 1px solid var(--line); }.event-type { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--mint); background: rgba(105,221,189,.07); border-radius: .55rem; }.event-type.event-left { color: #ff7891; background: rgba(255,120,145,.07); }.membership-events strong, .membership-events small { display: block; }.membership-events strong { font-size: .68rem; }.membership-events small { margin-top: .12rem; color: var(--muted); font-size: .56rem; }
.registration-groups { display: flex; flex-wrap: wrap; gap: .45rem; }.registration-groups span { padding: .35rem .55rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .55rem; font-size: .57rem; }.registration-groups strong { color: var(--ice); }
.member-grid-detailed { grid-template-columns: repeat(auto-fill,minmax(22rem,1fr)); }.member-card-detailed { align-items: flex-start; }.member-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }.member-tags span { padding: .2rem .35rem; color: var(--muted); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: .38rem; font-size: .53rem; }.member-tags .linked { color: var(--mint); }.member-tags .unlinked { color: var(--amber); }.member-tags .role-leader { color: var(--violet); }
.member-contribution { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; margin: .7rem 0; padding: .6rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.member-contribution strong, .member-contribution span { display: block; }.member-contribution strong { font-size: .67rem; }.member-contribution span { margin-top: .1rem; color: var(--muted); font-size: .51rem; }

/* Grimoire design language adapted from the supplied reference. */
.frost-nav, main, body > footer { position: relative; z-index: 2; }
.archive-container { max-width: 1320px; }
.ambient { opacity: .035; filter: blur(120px); }

h1, h2, h3, .navbar-brand strong { color: var(--text); font-family: var(--font-serif); font-weight: 400 !important; letter-spacing: .035em !important; }
.frost-nav { background: rgba(11,14,19,.88); border-bottom-color: var(--line); backdrop-filter: blur(14px); }
.navbar-brand .brand-mark { color: var(--amber); background: rgba(197,160,89,.045); border-color: rgba(197,160,89,.32); border-radius: 2px; transform: rotate(45deg); }
.navbar-brand .brand-mark i { transform: rotate(-45deg); }
.navbar-brand strong { font-family: var(--font-title); font-size: .88rem; letter-spacing: .18em !important; }
.navbar-brand small { color: var(--amber); font-family: var(--font-serif); font-size: .62rem; font-style: italic; letter-spacing: .28em; }
.navbar .nav-link { color: var(--muted); border: 1px solid transparent; border-radius: 2px; font-family: var(--font-serif); font-size: .94rem; font-weight: 400; letter-spacing: .035em; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--text); background: rgba(197,160,89,.045); border-color: var(--line-faint); }
.navbar .nav-link.active { border-bottom-color: var(--amber); }

.section-kicker { color: var(--amber); font-family: var(--font-serif); font-size: .72rem; font-style: italic; font-weight: 400; letter-spacing: .15em; text-transform: none; }
.presence { background: var(--mint); box-shadow: 0 0 0 .2rem rgba(145,180,165,.08); }

.metric-card, .panel, .training-card, .member-card, .callout, .filter-panel, .profile-hero, .profile-metric, .detail-hero, .highlight-candidate-list, .highlight-detail-hero, .replay-hero, .analysis-notice { background-color: var(--surface); border-color: var(--line); border-right-color: var(--line-faint); border-left-color: var(--line-faint); border-radius: 2px; box-shadow: 0 10px 30px rgba(0,0,0,.32); backdrop-filter: blur(8px); }
.panel, .filter-panel { position: relative; }
.panel::before, .filter-panel::before { content: '✦'; position: absolute; z-index: 3; top: 6px; left: 8px; color: var(--amber); font-size: .55rem; opacity: .42; pointer-events: none; }
.panel::after, .filter-panel::after { content: '✦'; position: absolute; z-index: 3; right: 8px; bottom: 6px; color: var(--amber); font-size: .55rem; opacity: .32; pointer-events: none; }
.metric-card { border-top-color: var(--line); border-bottom-color: var(--line); }
.metric-card > i, .achievement-icon, .candidate-mark, .event-type { color: var(--ice); background: rgba(136,160,192,.055); border-color: rgba(136,160,192,.2); border-radius: 2px; }
.metric-card strong, .profile-metric strong { color: var(--text); font-family: var(--font-serif); font-weight: 600; }
.metric-card span, .profile-metric span { font-family: var(--font-serif); font-size: .78rem; }
.panel-head { padding-top: 1.55rem; }
.panel-head h2, .section-caption { color: var(--text); font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; letter-spacing: .04em; }
.panel-note { font-family: var(--font-serif); font-size: .78rem; font-style: italic; }

.score-row, .leader-row, .skill-row, .weakness-row, .achievement-list article, .membership-events article, .pattern-error-list article, .analysis-event-list article { border-top-color: var(--line-faint); transition: color .25s ease, background .25s ease; }
.score-row:hover, .leader-row:hover, .skill-row:hover, .weakness-row:hover { background: rgba(136,160,192,.035); }
.rank, .mod-badge, .status, .rune-tag, .posting-status, .rarity-label, .priority, .member-tags span, .registration-groups span { border-radius: 2px; }
.rank { color: var(--ice); background: rgba(136,160,192,.055); border-color: rgba(136,160,192,.23); font-family: var(--font-serif); }
.rank-s, .rank-ss, .rank-x, .rank-xh, .rank-sh { color: var(--amber); background: rgba(197,160,89,.055); border-color: rgba(197,160,89,.25); }
.score-main strong, .training-map h2, .member-body h2, .detail-title h2 { font-family: var(--font-serif); font-weight: 600 !important; }
.score-main span, .score-main small, .score-stats, .table-note { font-family: var(--font-serif); }
.soft-link, .detail-link:hover, .player-link:hover { color: var(--ice); }

.score-table { --bs-table-bg: transparent; --bs-table-color: var(--muted); --bs-table-border-color: var(--line-faint); font-family: var(--font-sans); }
.score-table th { color: var(--amber); font-family: var(--font-serif); font-size: .83rem; font-weight: 400; letter-spacing: .05em; text-transform: none; }
.score-table tbody tr:hover td { color: var(--text); background: rgba(136,160,192,.035); }
.score-table td strong, .val-highlight { color: var(--text); font-family: var(--font-serif); font-size: .92rem; font-weight: 600; }

.filter-panel { padding: 1.5rem 1.35rem; }
.filter-panel .form-label { color: var(--amber); font-family: var(--font-serif); font-size: .76rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; }
.filter-panel .form-control, .filter-panel .form-select, .search-bar .form-control { color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-family: var(--font-serif); font-size: 1rem; box-shadow: none; }
.filter-panel .input-group-text { color: var(--amber); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.filter-panel .form-control:focus, .filter-panel .form-select:focus { border-color: var(--ice); box-shadow: none; }
.filter-panel .form-select option { color: var(--text); background: var(--surface-2); }
.btn-frost, .osu-button { color: var(--amber); background: transparent; border: 1px solid var(--line); border-radius: 2px; font-family: var(--font-serif); font-size: .88rem; font-weight: 400; letter-spacing: .06em; }
.btn-frost:hover, .osu-button:hover { color: var(--text); background: rgba(197,160,89,.065); border-color: var(--text); box-shadow: 0 0 15px rgba(197,160,89,.1); }
.btn-ghost { border-color: var(--line-faint); border-radius: 2px; font-family: var(--font-serif); }
.btn-ghost:hover { color: var(--text); border-color: var(--line); }

.skill-track, .history-track, .comparison-track { background: rgba(136,160,192,.055); border-radius: 0; }
.skill-track span, .history-track > span, .team-history-chart article > span { background: linear-gradient(90deg,var(--amber),var(--ice)); border-radius: 0; opacity: .72; }
.team-development-panel .panel-head { align-items: end; padding-bottom: 1.2rem; }
.team-history-range { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .58rem; color: var(--text); background: rgba(197,160,89,.045); border: 1px solid var(--line); font-family: var(--font-serif); font-size: .76rem; letter-spacing: .025em; white-space: nowrap; }
.team-history-range i { color: var(--amber); font-size: .68rem; }
.team-history-chart { height: 10rem; align-items: end; gap: 3px; margin: 0 1rem; padding: .85rem .35rem 0; background-image: repeating-linear-gradient(0deg,transparent 0,transparent calc(25% - 1px),rgba(212,175,55,.055) 25%); border-top: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint); }
.team-history-chart article { justify-content: center; }
.team-history-chart article > span { width: min(100%,7px); min-height: .45rem; background: linear-gradient(180deg,rgba(197,160,89,.82),rgba(197,160,89,.18)); border: 0; box-shadow: 0 0 8px rgba(197,160,89,.06); opacity: .78; }
.team-history-chart article:last-child > span { background: linear-gradient(180deg,rgba(230,223,211,.92),rgba(197,160,89,.3)); box-shadow: 0 0 10px rgba(230,223,211,.12); opacity: 1; }
.team-history-chart article:hover > span { background: var(--text); box-shadow: 0 0 12px rgba(197,160,89,.2); opacity: 1; }
.team-history-legend { padding-top: .75rem; font-family: var(--font-serif); font-size: .68rem; }.team-history-legend strong { color: var(--amber); font-size: .76rem; font-weight: 400; }
.profile-avatar img, .avatar-wrap img, .detail-cover { border-radius: 2px; }
.profile-hero, .replay-hero, .highlight-detail-hero { background-image: linear-gradient(120deg,rgba(136,160,192,.045),rgba(197,160,89,.025)); }
.detail-shade { background: linear-gradient(90deg,rgba(11,14,19,.97),rgba(11,14,19,.78) 52%,rgba(11,14,19,.35)),linear-gradient(0deg,rgba(11,14,19,.72),transparent); }
.detail-title > span, .training-map > span, .weakness-rank, .highlight-type { color: var(--amber); }
.training-card, .member-card { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.training-card:hover, .member-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.32); }

footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.2rem; font-family: var(--font-serif); }
footer span, footer small { display: block; }
footer span { color: var(--text); font-size: .78rem; font-weight: 700; }
footer small { margin-top: .2rem; font-size: .63rem; }
footer > i { color: var(--ice); }

@media (max-width: 767.98px) {
    .score-row { grid-template-columns: 2.3rem minmax(0, 1fr); padding: .9rem 1rem; }
    .score-stats { grid-column: 2; display: flex; gap: .65rem; align-items: baseline; text-align: left; }
    .score-stats strong, .score-stats span { display: inline; }
    .metric-card { min-height: 6.3rem; padding: .9rem; }
    .metric-card > i { display: none; }
    .metric-card strong { font-size: 1.35rem; }
    .profile-hero { align-items: flex-start; }
    .profile-avatar { flex-basis: 3.8rem; }
    .profile-avatar img { width: 3.8rem; height: 3.8rem; }
    .profile-identity p { line-height: 1.55; }
    .osu-button { width: 2.6rem; overflow: hidden; white-space: nowrap; color: transparent; }
    .osu-button i { color: var(--bg); }
    .detail-content { align-items: flex-start; flex-wrap: wrap; padding: 1.2rem; }
    .rank-large, .map-star { flex-basis: 3.7rem; width: 3.7rem; height: 3.7rem; }
    .detail-title { flex-basis: calc(100% - 5rem); }
    .map-difficulties { max-width: calc(100vw - 7rem); }
    .detail-actions { flex-basis: 100%; justify-content: flex-start; }
    .detail-grid { grid-template-columns: repeat(2,1fr); }
    .detail-grid > div:nth-child(2) { border-right: 0; }
    .detail-grid > div { border-bottom: 1px solid var(--line); }
    .achievement-list article { grid-template-columns: 2.4rem minmax(0,1fr); }
    .rarity-label { display: none; }
    .highlight-list { grid-template-columns: 1fr; }
    .decision-list article { grid-template-columns: 2rem minmax(0,1fr); }
    .decision-result { grid-column: 2; display: flex; justify-content: space-between; text-align: left; }
    .highlight-type-grid { grid-template-columns: repeat(2,1fr); }
    .candidate-row { grid-template-columns: 2.4rem minmax(0,1fr) 2rem; }.candidate-stats { grid-column: 2 / -1; justify-content: flex-start; }.candidate-stats span { text-align: left; }.candidate-open { grid-column: 3; grid-row: 1; }
    .highlight-detail-hero { grid-template-columns: 2.6rem minmax(0,1fr); }.highlight-detail-hero > .posting-status { grid-column: 2; justify-self: start; }
    .team-long-metrics { grid-template-columns: repeat(2,1fr); }.team-long-metrics div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.team-long-metrics div:nth-child(4) { border-top: 1px solid var(--line); }
    .replay-hero { display: block; }.replay-actions { flex-wrap: wrap; margin-top: 1rem; }.replay-metric-grid { grid-template-columns: repeat(2,1fr); }.replay-metric-grid div:nth-child(3n+1) { border-left: 1px solid var(--line); }.replay-metric-grid div:nth-child(odd) { border-left: 0; }
    .skill-comparison-list article { grid-template-columns: 1fr; }.comparison-bars { grid-template-columns: 1fr; }.comparison-evidence { grid-column: 1; }
    .team-development-panel .panel-head { align-items: flex-start; gap: .75rem; }.team-history-range { font-size: .68rem; }.team-history-chart { height: 8rem; gap: 2px; margin: 0 .65rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* WOSU-only additions. Original webview3 CSS above remains untouched. */
.realtime-toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:1080;display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border:1px solid var(--line);border-radius:13px;background:rgba(8,13,24,.94);backdrop-filter:blur(18px);box-shadow:0 18px 44px rgba(0,0,0,.35);color:var(--text);opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s ease}.realtime-toast.show{opacity:1;transform:none}.realtime-toast i{color:var(--mint)}.realtime-toast small{display:block;color:var(--muted)}

/* WOSU 0.7.0 — overview ranking, performance snapshot and language switcher. */
.language-switcher { display:flex; align-items:center; gap:.28rem; }
.language-switcher a { min-width:2.15rem; padding:.28rem .42rem; color:var(--muted); border:1px solid var(--line-faint); text-align:center; font-family:var(--font-serif); font-size:.68rem; letter-spacing:.08em; text-decoration:none; }
.language-switcher a:hover,.language-switcher a.active { color:var(--text); border-color:var(--line); background:rgba(197,160,89,.07); }
.overview-rank-table .rank-player { display:flex; flex-direction:column; gap:.12rem; min-width:9rem; }
.overview-rank-table .rank-player small { color:var(--muted); font-size:.62rem; }
.overview-rank-table .rank-player-inactive { opacity:.42; filter:saturate(.35); }
.overview-rank-table .rank-player-inactive:hover { opacity:.68; }
.rank-change { display:inline-flex; min-width:3.6rem; align-items:center; gap:.15rem; font-family:var(--font-serif); font-weight:600; }
.rank-change i { font-size:1.2rem; line-height:1; }
.rank-change.up,.metric-delta.up { color:#86cba8; }
.rank-change.down,.metric-delta.down { color:#d68383; }
.rank-change.flat,.metric-delta.flat { color:var(--muted); }
.performance-snapshot .panel-head { gap:1rem; }
.performance-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.performance-metric-grid article { padding:1rem 1.15rem; border-left:1px solid var(--line-faint); }
.performance-metric-grid article:first-child { border-left:0; }
.performance-metric-grid span,.performance-metric-grid strong,.performance-metric-grid small { display:block; }
.performance-metric-grid > article > span { color:var(--muted); font-family:var(--font-serif); font-size:.72rem; }
.performance-metric-grid strong { margin-top:.25rem; color:var(--text); font-family:var(--font-serif); font-size:1.28rem; font-weight:600; }
.performance-metric-grid small { margin-top:.25rem; font-size:.62rem; }
@media (max-width:991.98px){ .language-switcher{margin-left:0!important;padding-bottom:.5rem}.performance-metric-grid{grid-template-columns:repeat(2,1fr)}.performance-metric-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line-faint)}.performance-metric-grid article:nth-child(4){border-top:1px solid var(--line-faint)}.performance-snapshot .panel-head{align-items:flex-start} }
@media (max-width:575.98px){ .performance-metric-grid{grid-template-columns:1fr}.performance-metric-grid article{border-left:0!important;border-top:1px solid var(--line-faint)} }

/* WOSU 0.7.1 — unified readable typography + compact overview density. */
:root {
  --text-xs: .78rem;
  --text-sm: .9rem;
  --text-base: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.6rem;
  --line-compact: 1.25;
  --line-normal: 1.45;
  --space-card-x: 1rem;
  --space-card-y: .8rem;
}

/* Shared typography hierarchy: fewer component-specific microscopic sizes. */
body { font-size: var(--text-base); line-height: var(--line-normal); }
.navbar .nav-link { font-size: var(--text-base); }
.section-kicker { font-size: var(--text-sm); }
.panel-head h2, .section-caption { font-size: var(--text-xl); }
.soft-link, .panel-note, .table-note { font-size: var(--text-sm); }
.metric-card span, .profile-metric span { font-size: var(--text-sm); }
.metric-card strong { font-size: var(--text-2xl); }
.score-main span, .score-main small,
.leader-row div small, .leader-row > span:last-child small,
.score-table td small { font-size: var(--text-sm); }
.score-stats strong { font-size: var(--text-lg); }
.score-stats strong small, .score-stats span { font-size: var(--text-sm); }
.score-table { font-size: var(--text-base); }
.score-table th { font-size: var(--text-sm); }
.score-table td strong, .val-highlight { font-size: var(--text-base); }
.language-switcher a { font-size: var(--text-sm); }
.performance-metric-grid > article > span,
.performance-metric-grid small { font-size: var(--text-sm); }
.performance-metric-grid strong { font-size: var(--text-xl); }

/* Overview: cards fit their content instead of reserving decorative height. */
body[data-page="overview"] .metric-card {
  min-height: 0;
  padding: var(--space-card-y) var(--space-card-x);
}
body[data-page="overview"] .metric-card > i {
  flex-basis: 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
}
body[data-page="overview"] .panel-head {
  padding: 1rem var(--space-card-x) .75rem;
}
body[data-page="overview"] .score-row {
  gap: .75rem;
  padding: .68rem var(--space-card-x);
}
body[data-page="overview"] .leader-row {
  gap: .55rem;
  padding: .55rem .75rem;
}
body[data-page="overview"] .panel-note {
  margin: .7rem var(--space-card-x) .85rem;
  line-height: var(--line-normal);
}

/* Performance snapshot belongs first and stays compact/readable. */
body[data-page="overview"] .performance-snapshot {
  margin-bottom: 1rem !important;
}
body[data-page="overview"] .performance-metric-grid article {
  padding: .72rem var(--space-card-x);
}
body[data-page="overview"] .performance-metric-grid strong {
  margin-top: .12rem;
}
body[data-page="overview"] .performance-metric-grid small {
  margin-top: .12rem;
}

/* Ranking: readable type, but one compact row per player. */
body[data-page="overview"] .overview-rank-table {
  line-height: var(--line-compact);
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table th {
  padding: .5rem .72rem;
}
body[data-page="overview"] .overview-rank-table td {
  padding: .42rem .72rem;
  vertical-align: middle;
}
body[data-page="overview"] .overview-rank-table .community-rank {
  width: 1.55rem;
  height: 1.55rem;
  font-size: var(--text-sm);
}
body[data-page="overview"] .overview-rank-table .rank-player {
  display: inline-flex;
  min-width: 0;
  flex-direction: row;
  align-items: baseline;
  gap: .5rem;
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table .rank-player small {
  margin: 0;
  font-size: var(--text-sm);
  white-space: nowrap;
}
body[data-page="overview"] .overview-rank-table .rank-change {
  min-width: 2.8rem;
}
body[data-page="overview"] .overview-rank-table .rank-change i {
  font-size: var(--text-lg);
}

@media (max-width: 991.98px) {
  :root {
    --text-xs: .76rem;
    --text-sm: .86rem;
    --text-base: .96rem;
    --text-lg: 1.08rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.45rem;
  }
  body[data-page="overview"] .overview-rank-table { min-width: 64rem; }
}

/* Canonical page shell: navigation, content and footer share one responsive width contract. */
:root {
  --wosu-shell-inline-gap: 2rem;
  --wosu-shell-max-width: clamp(1320px, 65vw, 2200px);
}
.archive-container,
.frost-nav > .container,
.site-footer-shell {
  width: calc(100% - var(--wosu-shell-inline-gap));
  max-width: var(--wosu-shell-max-width);
}

/* On very large displays reduce dead vertical space rather than scaling text endlessly. */
@media (min-width: 2200px) {
  .archive-container {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }
}

@media (max-width: 1399.98px) {
  :root {
    --wosu-shell-inline-gap: 1.5rem;
    --wosu-shell-max-width: 1320px;
  }
}

/* Large high-density monitors need modest type scaling as well as more width. */
@media (min-width: 2200px) {
  html { font-size: 17px; }
  body[data-page="overview"] .overview-rank-table th { padding-top: .42rem; padding-bottom: .42rem; }
  body[data-page="overview"] .overview-rank-table td { padding-top: .32rem; padding-bottom: .32rem; }
}
@media (min-width: 3200px) {
  html { font-size: 18px; }
  body[data-page="overview"] .overview-rank-table th { padding-top: .38rem; padding-bottom: .38rem; }
  body[data-page="overview"] .overview-rank-table td { padding-top: .28rem; padding-bottom: .28rem; }
}

/* WOSU 0.8.0 — progress sparklines + flowing cached map browser. */
.overview-rank-table .spark-cell { width: 10.5rem; min-width: 8.5rem; }
.rank-sparkline { display:block; width:100%; max-width:9.5rem; height:1.55rem; overflow:visible; }
.rank-sparkline polyline { fill:none; stroke:var(--ice); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(136,160,192,.18)); }
.rank-sparkline.up polyline { stroke:var(--mint); }
.rank-sparkline.down polyline { stroke:#c77f86; }
.rank-sparkline.flat polyline { stroke:var(--muted); }
.rank-sparkline.spark-pp polyline { stroke:var(--amber); }
.spark-empty { color:var(--muted); }

@media (max-width: 767.98px) {
  .overview-rank-table .spark-cell { min-width:7.5rem; }
}

/* WOSU 0.8.1 — compact period leaderboard. */
.overview-rank-compact { max-width:100%; }
.compact-rank-head { align-items:flex-start; gap:1rem; }
.compact-rank-tools { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
.compact-rank-tabs { display:flex; gap:.25rem; padding:.2rem; border:1px solid var(--line-faint); background:rgba(255,255,255,.018); }
.compact-rank-tabs button,.compact-rank-limit { border:0; background:transparent; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); line-height:1; padding:.55rem .7rem; white-space:nowrap; }
.compact-rank-tabs button.active { color:var(--text); background:rgba(197,160,89,.09); box-shadow:inset 0 -1px 0 var(--amber); }
.compact-rank-limit { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--line-faint); }
.compact-rank-list { display:grid; gap:.18rem; }
.compact-rank-row { display:grid; grid-template-columns:2.25rem minmax(10rem,1fr) minmax(7rem,.7fr); align-items:center; min-height:2.5rem; padding:.25rem .65rem; border-top:1px solid var(--line-faint); transition:opacity .2s ease,transform .2s ease; }
.compact-rank-row:first-child { border-top-color:var(--line); }
.compact-rank-row.rank-player-inactive { opacity:.45; filter:saturate(.35); }
.compact-rank-place { font-family:var(--font-title); color:var(--muted); text-align:center; }
.compact-rank-place.top { color:var(--amber); }
.compact-rank-player { min-width:0; display:flex; align-items:baseline; gap:.55rem; }
.compact-rank-player a { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-rank-player small { color:var(--muted); white-space:nowrap; }
.compact-rank-value { justify-self:end; display:flex; align-items:center; gap:.5rem; min-width:0; }
.compact-rank-value strong { font-size:var(--text-base); font-weight:500; }
.compact-rank-value .mini-bar { width:5.25rem; height:.22rem; background:rgba(255,255,255,.045); overflow:hidden; }
.compact-rank-value .mini-bar i { display:block; height:100%; background:var(--ice); transform-origin:left center; }
.compact-rank-row[data-metric="skill_change"] .mini-bar i.positive { background:var(--mint); }
.compact-rank-row[data-metric="skill_change"] .mini-bar i.negative { background:#c77f86; }
.compact-rank-foot { display:flex; justify-content:space-between; gap:1rem; padding:.6rem .7rem .05rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); }
.compact-rank-foot i { color:var(--mint); }
@media (max-width: 767.98px) {
  .compact-rank-head { flex-direction:column; }
  .compact-rank-tools { justify-content:flex-start; width:100%; }
  .compact-rank-tabs { width:100%; overflow-x:auto; }
  .compact-rank-row { grid-template-columns:2rem minmax(8rem,1fr) auto; padding-inline:.35rem; }
  .compact-rank-player small,.compact-rank-value .mini-bar { display:none; }
}

/* Generic UI composition primitives — Section -> Header -> Grid -> Cards. */
.ui-section {
  position:relative;
  display:grid;
  gap:.85rem;
  padding:.8rem;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-right-color:var(--line-faint);
  border-left-color:var(--line-faint);
  border-radius:2px;
  box-shadow:0 10px 30px rgba(0,0,0,.32);
  backdrop-filter:blur(8px);
}
.ui-section::before { content:'✦'; position:absolute; z-index:3; top:6px; left:8px; color:var(--amber); font-size:.55rem; opacity:.42; pointer-events:none; }
.ui-section::after { content:'✦'; position:absolute; z-index:3; right:8px; bottom:6px; color:var(--amber); font-size:.55rem; opacity:.32; pointer-events:none; }
.ui-section__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; min-width:0; padding:.35rem .35rem .1rem; border-bottom:1px solid var(--line-faint); }
.ui-section__header > div { min-width:0; }
.ui-section__header h2 { margin:.08rem 0 0; color:var(--text); font-family:var(--font-title); font-size:var(--text-xl); font-weight:400; }
.ui-section__meta { display:inline-flex; flex:0 0 auto; align-items:center; gap:.35rem; padding:.28rem .45rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-sm); border:1px solid var(--line-faint); background:rgba(255,255,255,.018); }
.ui-section__meta i { color:var(--mint); }
.ui-section__grid { display:grid; gap:.8rem; min-width:0; }
.ui-section__grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ui-section__grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ui-section__grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ui-section__grid--3-1 { grid-template-columns:minmax(0,3fr) minmax(15rem,1fr); }
@media (max-width:1399.98px) { .ui-section__grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991.98px) { .ui-section__grid--3,.ui-section__grid--2,.ui-section__grid--3-1 { grid-template-columns:1fr; } }
@media (max-width:767.98px) {
  .ui-section { padding:.65rem; }
  .ui-section__header { align-items:flex-start; flex-direction:column; }
  .ui-section__grid--4 { grid-template-columns:1fr; }
}

/* WOSU 0.8.2 — four-card Frieren-style adventurer chronicle. */
.period-rank-card { min-width:0; padding:.8rem .75rem .65rem; overflow:hidden; }
.period-rank-head { display:flex; align-items:center; justify-content:space-between; min-height:3.15rem; margin-bottom:.35rem; }
.period-rank-head > div { display:flex; align-items:center; gap:.65rem; min-width:0; }
.period-rank-icon { display:grid; place-items:center; flex:0 0 2.25rem; width:2.25rem; height:2.25rem; border:1px solid var(--line); color:var(--amber); background:rgba(197,160,89,.045); }
.period-rank-head h3 { margin:.08rem 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-title); font-size:var(--text-base); font-weight:400; }
.period-rank-card .compact-rank-list { gap:0; }
.period-rank-card .compact-rank-row { grid-template-columns:1.75rem minmax(0,1fr) auto; min-height:2.25rem; padding:.18rem .15rem; }
.period-rank-card .compact-rank-place { font-size:var(--text-sm); }
.period-rank-card .compact-rank-player { min-width:0; display:block; }
.period-rank-card .compact-rank-player a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.period-rank-card .compact-rank-value { gap:.35rem; }
.period-rank-card .compact-rank-value strong { min-width:3.2rem; text-align:right; font-size:var(--text-sm); }
.period-rank-card .compact-rank-value .mini-bar { width:2.75rem; }
.period-rank-card footer { min-height:2.35rem; margin-top:.35rem; padding:.45rem .15rem 0; border-top:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); line-height:1.25; }
.compact-rank-empty { display:grid; min-height:11.25rem; place-items:center; color:var(--muted); }
@media (max-width: 767.98px) {
  .period-rank-card .compact-rank-value .mini-bar { width:3.5rem; }
}

/* WOSU 0.8.3 — latest scores stay on one line whenever possible. */
body[data-page="overview"] .overview-score-wrap { overflow-x:auto; }
body[data-page="overview"] .overview-score-table {
  width:100%;
  min-width:58rem;
  table-layout:auto;
  line-height:var(--line-compact);
  white-space:nowrap;
}
body[data-page="overview"] .overview-score-table th {
  padding:.45rem .55rem;
}
body[data-page="overview"] .overview-score-table td {
  padding:.42rem .55rem;
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-table tbody tr {
  cursor:pointer;
}
body[data-page="overview"] .overview-score-table .rank {
  width:1.65rem;
  height:1.65rem;
  font-size:var(--text-sm);
}
body[data-page="overview"] .overview-score-map {
  min-width:13rem;
  max-width:22rem;
}
body[data-page="overview"] .overview-score-map a,
body[data-page="overview"] .overview-score-map span,
body[data-page="overview"] .overview-score-diff {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="overview"] .overview-score-map a {
  display:inline-block;
  max-width:13rem;
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-map span {
  display:inline-block;
  max-width:7.5rem;
  margin-left:.4rem;
  color:var(--muted);
  vertical-align:middle;
}
body[data-page="overview"] .overview-score-map span::before { content:'· '; }
body[data-page="overview"] .overview-score-diff { max-width:10rem; }
body[data-page="overview"] .overview-score-table td strong { display:inline; }
@media (max-width: 767.98px) {
  body[data-page="overview"] .overview-score-table { min-width:54rem; }
}
body[data-page="overview"] .overview-score-table th,
body[data-page="overview"] .overview-score-table td { padding-left:.4rem; padding-right:.4rem; }

/* WOSU 0.8.4 — encouraging metric magic + footer shell parity. */
.performance-encouragement {
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:2.65rem;
  padding:.62rem var(--space-card-x) .72rem;
  overflow:hidden;
  border-top:1px solid var(--line-faint);
  color:var(--text);
  font-family:var(--font-serif);
  font-size:var(--text-base);
}
.performance-encouragement::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(145,180,165,.055),transparent 42%,rgba(197,160,89,.035));
}
.performance-encouragement i {
  position:relative;
  flex:0 0 auto;
  color:var(--amber);
  filter:drop-shadow(0 0 6px rgba(197,160,89,.22));
}
.performance-encouragement span { position:relative; }
.performance-encouragement.mood-rising i,
.performance-encouragement.mood-growing i { color:var(--mint); }

/* Footer width is owned by the canonical shell contract above. */

/* WOSU 0.9.0 — living grimoire companion. */
.grimoire-companion {
  --grimoire-home-right:clamp(1rem,2vw,2.5rem);
  --grimoire-peek-offset:3rem;
  position:fixed;
  z-index:1060;
  right:calc(var(--grimoire-home-right) - var(--grimoire-peek-offset));
  bottom:clamp(1rem,2vw,2rem);
  width:min(24rem,calc(100vw - 1.5rem));
  pointer-events:none;
  transition:right .32s cubic-bezier(.22,.61,.36,1);
}
.grimoire-companion:hover,
.grimoire-companion:focus-within,
.grimoire-companion.demon-mode,
.grimoire-companion:has(.grimoire-bubble:not([hidden])) {
  right:var(--grimoire-home-right);
}
.grimoire-companion.demon-mode { transition:none; }
.grimoire-spirit {
  position:relative;
  display:grid;
  width:4.4rem;
  height:4.4rem;
  margin-left:auto;
  place-items:center;
  border:1px solid rgba(197,160,89,.38);
  border-radius:50%;
  background:radial-gradient(circle at 42% 35%,rgba(136,160,192,.18),rgba(11,14,19,.94) 68%);
  color:var(--amber);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.42),0 0 24px rgba(136,160,192,.10);
  pointer-events:auto;
  cursor:pointer;
}
.grimoire-book { position:relative; z-index:3; display:grid; place-items:center; width:2.5rem; height:2.5rem; }
.grimoire-book .bi-book-half { font-size:1.85rem; filter:drop-shadow(0 0 7px rgba(197,160,89,.24)); }
.grimoire-book .bi-stars { position:absolute; right:-.2rem; top:-.25rem; color:var(--ice); font-size:.72rem; }
.grimoire-pulse { position:absolute; inset:.48rem; border:1px solid rgba(136,160,192,.28); border-radius:50%; opacity:.42; }
.grimoire-orbit { position:absolute; inset:.2rem; border-radius:50%; border:1px solid transparent; pointer-events:none; }
.grimoire-orbit::before { content:''; position:absolute; width:.3rem; height:.3rem; border-radius:50%; background:var(--ice); box-shadow:0 0 8px rgba(136,160,192,.8); }
.orbit-a { border-top-color:rgba(136,160,192,.16); }
.orbit-a::before { top:-.13rem; left:50%; }
.orbit-b { inset:.65rem; border-bottom-color:rgba(197,160,89,.15); }
.orbit-b::before { bottom:-.12rem; right:22%; background:var(--amber); box-shadow:0 0 8px rgba(197,160,89,.8); }
.grimoire-bubble {
  position:relative;
  margin:0 1rem .8rem 0;
  padding:.9rem 2.45rem .85rem 1rem;
  border:1px solid var(--line);
  border-left:2px solid rgba(197,160,89,.62);
  background:linear-gradient(145deg,rgba(18,23,31,.97),rgba(10,13,18,.96));
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 0 28px rgba(136,160,192,.06);
  backdrop-filter:blur(12px);
  pointer-events:auto;
  transform-origin:calc(100% - 2rem) 100%;
}
.grimoire-bubble::after { content:''; position:absolute; right:1.4rem; bottom:-.48rem; width:.85rem; height:.85rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#0d1117; transform:rotate(45deg); }
.grimoire-bubble-kicker { display:block; margin-bottom:.35rem; color:var(--amber); font-family:var(--font-serif); font-size:var(--text-xs); letter-spacing:.08em; text-transform:uppercase; }
.grimoire-bubble p { margin:0; color:var(--text); font-family:var(--font-serif); font-size:var(--text-base); line-height:1.4; }
.grimoire-bubble-close { position:absolute; right:.55rem; top:.5rem; display:grid; width:1.8rem; height:1.8rem; place-items:center; border:0; background:transparent; color:var(--muted); }
.grimoire-quest-detail { display:grid; gap:.35rem; margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--line-faint); }
.grimoire-quest-map { color:var(--text); font-family:var(--font-serif); font-size:var(--text-sm); }
.grimoire-quest-meta { display:flex; flex-wrap:wrap; gap:.4rem .7rem; color:var(--muted); font-size:var(--text-sm); }
.grimoire-quest-detail a { justify-self:start; color:var(--amber); font-family:var(--font-serif); font-size:var(--text-sm); text-decoration:none; }
.grimoire-progress { margin-top:.6rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); }
.grimoire-companion.kind-quest .grimoire-spirit { border-color:rgba(197,160,89,.72); box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 32px rgba(197,160,89,.18); }
.grimoire-companion.kind-rare .grimoire-spirit { border-color:rgba(170,145,210,.62); color:#bfa8dd; box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 32px rgba(170,145,210,.2); }
@media (max-width:767.98px) {
  .grimoire-companion { --grimoire-home-right:.75rem; --grimoire-peek-offset:2.45rem; bottom:.75rem; width:calc(100vw - 1.5rem); }
  .grimoire-spirit { width:3.8rem; height:3.8rem; }
  .grimoire-bubble { margin-right:.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .grimoire-companion { transition:none; }
  .grimoire-pulse,.grimoire-orbit { transition:none; }
}
.grimoire-companion.has-active-quest .grimoire-book::after {
  content:'!';
  position:absolute;
  right:-.7rem;
  bottom:-.35rem;
  display:grid;
  width:1rem;
  height:1rem;
  place-items:center;
  border:1px solid rgba(197,160,89,.55);
  border-radius:50%;
  background:#15120c;
  color:var(--amber);
  font-family:var(--font-title);
  font-size:.65rem;
  box-shadow:0 0 8px rgba(197,160,89,.18);
}

/* WOSU 0.9.1 — provoked grimoire demon escape game. */
.grimoire-demon-icon { display:none; font-size:2rem; line-height:1; filter:drop-shadow(0 0 8px rgba(190,82,120,.45)); }
.grimoire-companion.demon-mode .grimoire-normal-icon,
.grimoire-companion.demon-mode .grimoire-book .bi-stars { display:none; }
.grimoire-companion.demon-mode .grimoire-demon-icon { display:block; }
.grimoire-companion.demon-mode .grimoire-spirit {
  z-index:1095;
  border-color:rgba(190,82,120,.72);
  background:radial-gradient(circle at 42% 35%,rgba(128,58,104,.28),rgba(15,8,17,.96) 68%);
  color:#d6769d;
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.5),0 0 34px rgba(190,82,120,.22);
  cursor:crosshair;
}
.grimoire-companion.demon-mode .grimoire-pulse { border-color:rgba(190,82,120,.38); }
.grimoire-companion.demon-mode .orbit-a::before { background:#c55b86; box-shadow:0 0 10px rgba(197,91,134,.9); }
.grimoire-companion.demon-mode .orbit-b::before { background:#8f6ac2; box-shadow:0 0 10px rgba(143,106,194,.9); }
.grimoire-demon-taunt {
  position:fixed;
  z-index:1100;
  max-width:15rem;
  padding:.42rem .68rem;
  border:1px solid rgba(190,82,120,.42);
  border-radius:.45rem;
  background:rgba(16,9,18,.94);
  color:#e5b1c6;
  box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 18px rgba(190,82,120,.12);
  font-family:var(--font-serif);
  font-size:var(--text-sm);
  line-height:1.2;
  text-align:center;
  white-space:normal;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce) {
  .grimoire-companion.demon-mode .grimoire-pulse { transition:none; }
}

/* WOSU 0.9.2 — demon rage on successful catches. */
.grimoire-companion.demon-mode .grimoire-spirit {
  transform-origin:center;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.grimoire-companion.demon-mode .grimoire-demon-icon {
  filter:drop-shadow(0 0 calc(8px + var(--demon-rage-level,0) * 2px) rgba(235,75,84,.68));
}
.grimoire-companion.demon-mode .grimoire-spirit {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025),
    0 12px 34px rgba(0,0,0,.5),
    0 0 calc(34px + var(--demon-rage-level,0) * 5px) rgba(215,67,91,.28);
}

/* WOSU 0.9.3 — dense readable overview metrics + osu!-inspired score grades. */
body[data-page="overview"] .performance-metric-grid article {
  display:grid;
  gap:.34rem;
  padding:.62rem .85rem .58rem;
}
body[data-page="overview"] .performance-metric-main {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  min-width:0;
}
body[data-page="overview"] .performance-metric-main > span {
  min-width:0;
  color:var(--muted);
  font-family:var(--font-serif);
  font-size:clamp(.88rem,.76rem + .12vw,1.02rem);
  line-height:1.15;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-main > strong {
  margin:0;
  color:var(--text);
  font-family:var(--font-serif);
  font-size:clamp(1.22rem,1.05rem + .22vw,1.55rem);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-grid .metric-delta {
  display:flex;
  align-items:center;
  gap:.16rem;
  min-width:0;
  margin:0;
  font-size:clamp(.72rem,.65rem + .07vw,.82rem);
  line-height:1.1;
  white-space:nowrap;
}
body[data-page="overview"] .performance-metric-grid .metric-delta i {
  flex:0 0 auto;
  font-size:1rem;
  line-height:.8;
}

body[data-page="overview"] .overview-stat-card {
  min-height:0;
  gap:.72rem;
  padding:.62rem .78rem;
}
body[data-page="overview"] .overview-stat-card > i {
  flex:0 0 2.15rem;
  width:2.15rem;
  height:2.15rem;
  font-size:1rem;
}
body[data-page="overview"] .overview-stat-copy {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
}
body[data-page="overview"] .overview-stat-copy > span {
  margin:0;
  overflow:hidden;
  color:var(--muted);
  font-size:clamp(.86rem,.78rem + .09vw,.98rem);
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="overview"] .overview-stat-copy > strong {
  margin:0;
  color:var(--text);
  font-size:clamp(1.18rem,1.05rem + .18vw,1.48rem);
  line-height:1;
  white-space:nowrap;
}

.osu-rank-badge {
  position:relative;
  isolation:isolate;
  width:1.9rem;
  height:1.9rem;
  border-radius:.34rem;
  border-width:1px;
  font-family:var(--font-title);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 7px currentColor;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 0 10px color-mix(in srgb,currentColor 22%,transparent);
}
.osu-rank-badge::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:3px;
  border-radius:.18rem;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.16),transparent 54%);
  opacity:.85;
}
.rank.osu-rank-badge.rank-x {
  color:#f6d56f;
  border-color:rgba(246,213,111,.58);
  background:linear-gradient(145deg,rgba(104,82,24,.48),rgba(30,25,14,.86));
}
.rank.osu-rank-badge.rank-xh {
  color:#d9f3ff;
  border-color:rgba(198,231,244,.62);
  background:linear-gradient(145deg,rgba(112,145,158,.34),rgba(18,28,34,.9));
}
.rank.osu-rank-badge.rank-s {
  color:#ffd76a;
  border-color:rgba(255,215,106,.5);
  background:linear-gradient(145deg,rgba(100,72,19,.42),rgba(31,24,12,.88));
}
.rank.osu-rank-badge.rank-sh {
  color:#d6ecf6;
  border-color:rgba(204,228,238,.52);
  background:linear-gradient(145deg,rgba(96,126,140,.3),rgba(19,28,33,.9));
}
.rank.osu-rank-badge.rank-a {
  color:#9eea7d;
  border-color:rgba(158,234,125,.48);
  background:linear-gradient(145deg,rgba(52,98,43,.36),rgba(16,34,18,.88));
}
.rank.osu-rank-badge.rank-b {
  color:#6ec9ff;
  border-color:rgba(110,201,255,.46);
  background:linear-gradient(145deg,rgba(31,79,108,.4),rgba(12,28,39,.9));
}
.rank.osu-rank-badge.rank-c {
  color:#d399ff;
  border-color:rgba(211,153,255,.45);
  background:linear-gradient(145deg,rgba(79,43,105,.4),rgba(29,15,38,.9));
}
.rank.osu-rank-badge.rank-d,
.rank.osu-rank-badge.rank-f {
  color:#ff7d8d;
  border-color:rgba(255,125,141,.46);
  background:linear-gradient(145deg,rgba(111,39,51,.4),rgba(40,15,20,.9));
}
tr:hover .osu-rank-badge {
  filter:brightness(1.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 0 15px color-mix(in srgb,currentColor 34%,transparent);
}
@media (max-width:767.98px) {
  body[data-page="overview"] .performance-metric-main > span,
  body[data-page="overview"] .performance-metric-main > strong,
  body[data-page="overview"] .performance-metric-grid .metric-delta { white-space:nowrap; }
  body[data-page="overview"] .overview-stat-card { padding:.58rem .65rem; }
  body[data-page="overview"] .overview-stat-card > i { display:grid; }
  body[data-page="overview"] .overview-stat-copy { gap:.4rem; }
}

/* WOSU 0.9.4 — centered Fire Frieren background with a restrained nostalgic veil. */
html {
  min-height:100%;
  background-color:#080a0e;
  background-image:url('/assets/images/fire-frieren-bg.jpeg');
  background-image:image-set(url('/assets/images/fire-frieren-bg-960.webp') type('image/webp'),url('/assets/images/fire-frieren-bg.jpeg') type('image/jpeg'));
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:fixed;
}
@media (min-width:576px) {
  html {
    background-image:url('/assets/images/fire-frieren-bg.jpeg');
    background-image:image-set(url('/assets/images/fire-frieren-bg-1920.webp') type('image/webp'),url('/assets/images/fire-frieren-bg.jpeg') type('image/jpeg'));
  }
}
@media (min-width:1800px) {
  html {
    background-image:url('/assets/images/fire-frieren-bg.jpeg');
    background-image:image-set(url('/assets/images/fire-frieren-bg-2400.webp') type('image/webp'),url('/assets/images/fire-frieren-bg.jpeg') type('image/jpeg'));
  }
}
body {
  background-color:rgba(8,10,14,.30);
  background-image:
    radial-gradient(ellipse at 50% 42%,rgba(224,183,124,.055) 0%,rgba(82,59,46,.045) 32%,rgba(8,10,14,.30) 67%,rgba(5,7,10,.64) 100%),
    linear-gradient(180deg,rgba(12,15,20,.20) 0%,rgba(10,11,15,.34) 54%,rgba(7,8,11,.52) 100%),
    repeating-linear-gradient(0deg,rgba(255,239,214,.012) 0 1px,transparent 1px 3px);
  background-attachment:fixed;
  background-blend-mode:normal,normal,soft-light;
}
body::before {
  content:'';
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,transparent 0 36%,rgba(10,8,9,.08) 58%,rgba(4,5,8,.42) 100%),
    linear-gradient(110deg,rgba(139,92,60,.045),transparent 31%,rgba(181,139,90,.028) 56%,transparent 77%);
  mix-blend-mode:soft-light;
}
body > nav,
body > main,
body > footer { position:relative; z-index:2; }
body > .grimoire-companion { position:fixed; z-index:1060; }
.ambient { z-index:1; opacity:.10; }

/* Keep the glass surfaces readable while allowing the scene to remain visible. */
body .panel,
body .metric-card,
body .training-card,
body .member-card,
body .callout,
body .filter-panel,
body .profile-hero,
body .detail-hero,
body .highlight-detail-hero,
body .replay-hero,
body .analysis-notice {
  background-color:rgba(13,17,23,.78);
  backdrop-filter:blur(10px) saturate(.88);
}
body .frost-nav {
  background:rgba(7,10,15,.78);
  backdrop-filter:blur(17px) saturate(.86);
}
@media (max-width:767.98px) {
  html { background-position:center center; background-attachment:scroll; }
  body { background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce) {
  html,body { background-attachment:scroll; }
}


/* WOSU 0.9.6 — overview Progress + Precision rankings. */
.core-ranking-card { min-width:0; padding:.9rem .85rem .75rem; overflow:hidden; }
.core-ranking-head { display:flex; align-items:center; justify-content:space-between; gap:.9rem; min-height:3.15rem; margin-bottom:.35rem; }
.core-ranking-head > div { display:flex; align-items:center; gap:.65rem; min-width:0; }
.core-ranking-head h3 { margin:.08rem 0 0; font-family:var(--font-title); font-size:var(--text-lg); font-weight:400; }
.core-ranking-badge { flex:0 0 auto; padding:.26rem .45rem; border:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); letter-spacing:.06em; }
.core-ranking-list { display:grid; }
.core-ranking-row { display:grid; grid-template-columns:2rem minmax(8rem,1fr) auto; align-items:center; gap:.65rem; min-height:3.2rem; padding:.38rem .2rem; border-top:1px solid var(--line-faint); }
.core-ranking-row:first-child { border-top-color:var(--line); }
.core-ranking-row.rank-player-inactive { opacity:.45; filter:saturate(.35); }
.core-ranking-place { font-family:var(--font-title); color:var(--muted); text-align:center; }
.core-ranking-place.top { color:var(--amber); }
.core-ranking-player { min-width:0; display:flex; align-items:center; gap:.45rem; }
.core-ranking-player a { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.core-ranking-country { color:var(--muted); font-size:var(--text-xs); }
.core-ranking-value { min-width:12rem; text-align:right; }
.core-ranking-value > strong { display:block; font-family:var(--font-title); font-size:var(--text-lg); font-weight:400; color:var(--ice); }
.core-ranking-value > small { display:block; margin-top:.1rem; color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); white-space:nowrap; }
.core-ranking-card[data-core-ranking="precision"] .core-ranking-value > strong { color:var(--mint); }
.core-ranking-card footer { margin-top:.35rem; padding:.5rem .2rem 0; border-top:1px solid var(--line-faint); color:var(--muted); font-family:var(--font-serif); font-size:var(--text-xs); line-height:1.3; }
@media (max-width: 575.98px) {
  .core-ranking-row { grid-template-columns:1.7rem minmax(0,1fr) auto; gap:.4rem; }
  .core-ranking-value { min-width:0; }
  .core-ranking-value > small { display:none; }
  .core-ranking-badge { display:none; }
}


/* WOSU 0.12.0 — personal Achievements belong to Progress; Community is team-scoped social context. */
body[data-page="analytics"] .progress-achievement-section { scroll-margin-top:6rem; }
body[data-page="analytics"] .progress-achievement-section .ui-section__meta strong { color:var(--text); font-family:var(--font-serif); font-size:.92rem; }
body[data-page="analytics"] .progress-achievement-titles { overflow:hidden; padding:1rem 1.05rem; }
body[data-page="analytics"] .progress-achievement-titles-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-titles-head > span { display:flex; align-items:center; gap:.5rem; font-family:var(--font-serif); font-size:1rem; }
body[data-page="analytics"] .progress-achievement-titles-head i { color:var(--amber); }
body[data-page="analytics"] .progress-achievement-titles-head small { color:rgba(230,223,211,.58); font-size:.72rem; text-align:right; }
body[data-page="analytics"] .progress-title-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; padding-top:.85rem; }
body[data-page="analytics"] .progress-title-list article { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; padding:.7rem; background:rgba(136,160,192,.025); border:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-title-list .achievement-icon { width:2.55rem; height:2.55rem; }
body[data-page="analytics"] .progress-title-list strong,body[data-page="analytics"] .progress-title-list small { display:block; overflow:hidden; text-overflow:ellipsis; }
body[data-page="analytics"] .progress-title-list strong { font-family:var(--font-serif); font-size:.82rem; white-space:nowrap; }
body[data-page="analytics"] .progress-title-list small { margin-top:.18rem; color:rgba(230,223,211,.58); font-size:.64rem; line-height:1.35; }
body[data-page="analytics"] .progress-achievement-section .panel-head h3 { margin:.18rem 0 0; font-family:var(--font-serif); font-size:1.15rem; font-weight:400; }
body[data-page="analytics"] .progress-achievement-list article { min-height:4.7rem; }
body[data-page="analytics"] .progress-achievement-list strong { font-size:.86rem; }
body[data-page="analytics"] .progress-achievement-list p,body[data-page="analytics"] .progress-achievement-list small { font-size:.7rem; }
body[data-page="analytics"] .progress-achievement-next article > div:first-child { grid-template-columns:2.4rem minmax(0,1fr) auto; }
body[data-page="analytics"] .progress-achievement-next article > div:first-child > b { font-family:var(--font-serif); font-size:.8rem; font-weight:600; }
body[data-page="analytics"] .progress-achievement-next .achievement-icon { width:2.4rem; height:2.4rem; }
body[data-page="analytics"] .progress-achievement-next strong { font-size:.78rem; }
body[data-page="analytics"] .progress-achievement-next small { font-size:.66rem; }
body[data-page="analytics"] .progress-achievement-catalog { overflow:hidden; scroll-margin-top:6rem; }
body[data-page="analytics"] .progress-achievement-catalog > summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; cursor:pointer; list-style:none; font-family:var(--font-serif); }
body[data-page="analytics"] .progress-achievement-catalog > summary::-webkit-details-marker { display:none; }
body[data-page="analytics"] .progress-achievement-catalog > summary > span { display:flex; align-items:center; gap:.55rem; }
body[data-page="analytics"] .progress-achievement-catalog > summary i { color:var(--amber); }
body[data-page="analytics"] .progress-achievement-catalog > summary strong { color:rgba(230,223,211,.62); font-size:.8rem; }
body[data-page="analytics"] .progress-achievement-catalog[open] > summary { background:rgba(197,160,89,.025); border-bottom:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-page="analytics"] .progress-achievement-catalog-item { display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:.75rem; min-width:0; padding:.9rem 1rem; border-top:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(odd) { border-right:1px solid var(--line-faint); }
body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(-n+2) { border-top:0; }
body[data-page="analytics"] .progress-achievement-catalog-item.open { opacity:.76; }
body[data-page="analytics"] .progress-achievement-catalog-item > div { min-width:0; }
body[data-page="analytics"] .progress-achievement-catalog-item strong,body[data-page="analytics"] .progress-achievement-catalog-item p { display:block; }
body[data-page="analytics"] .progress-achievement-catalog-item strong { margin-top:.15rem; font-family:var(--font-serif); font-size:.82rem; }
body[data-page="analytics"] .progress-achievement-catalog-item p { margin:.2rem 0 0; color:rgba(230,223,211,.58); font-size:.66rem; line-height:1.4; }
body[data-page="analytics"] .progress-achievement-catalog-item footer { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.55rem; padding-top:.5rem; color:rgba(230,223,211,.58); border-top:1px solid var(--line-faint); font-size:.62rem; }
body[data-page="analytics"] .progress-achievement-catalog-item footer span { color:var(--text); font-size:.66rem; }
body[data-page="analytics"] .achievement-state.unlocked { color:var(--mint); }

body[data-page="community"] .community-chronicle { overflow:hidden; }
body[data-page="community"] .community-event { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.7rem; min-height:3.2rem; padding:.38rem .8rem; border-top:1px solid var(--line-faint); }
body[data-page="community"] .community-event:first-child { border-top:0; }
body[data-page="community"] .community-event:hover { background:rgba(136,160,192,.025); }
body[data-page="community"] .community-event-icon { display:grid; width:2rem; height:2rem; place-items:center; color:var(--ice); background:rgba(136,160,192,.05); border:1px solid var(--line-faint); font-size:var(--text-sm); }
body[data-page="community"] .community-event.event-personal_best .community-event-icon { color:var(--amber); }
body[data-page="community"] .community-event.event-hall .community-event-icon { color:var(--violet); }
body[data-page="community"] .community-event-copy { display:grid; grid-template-columns:minmax(7.5rem,.7fr) minmax(12rem,1fr) minmax(0,1.55fr) auto; grid-template-areas:'player event detail time'; align-items:center; gap:.8rem; min-width:0; }
body[data-page="community"] .community-event-player { grid-area:player; min-width:0; overflow:hidden; font-family:var(--font-serif); font-size:var(--text-base); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy h3 { grid-area:event; overflow:hidden; margin:0; font-family:var(--font-serif); font-size:var(--text-base); font-weight:500; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy p { grid-area:detail; min-width:0; overflow:hidden; margin:0; color:rgba(230,223,211,.65); font-size:var(--text-sm); line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
body[data-page="community"] .community-event-copy time { grid-area:time; color:rgba(230,223,211,.52); font-size:var(--text-sm); text-align:right; white-space:nowrap; }
body[data-page="community"] .community-ranking-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-bottom:.7rem; }
body[data-page="community"] .community-ranking-tab { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:2.75rem; padding:.55rem .75rem; color:rgba(230,223,211,.62); background:rgba(8,12,18,.46); border:1px solid var(--line-faint); font-family:var(--font-serif); }
body[data-page="community"] .community-ranking-tab:hover,body[data-page="community"] .community-ranking-tab.active { color:var(--text); background:rgba(197,160,89,.05); border-color:rgba(197,160,89,.27); }
body[data-page="community"] .community-ranking-tab span { font-size:.82rem; }
body[data-page="community"] .community-ranking-tab small { color:var(--amber); font-size:.68rem; }
body[data-page="community"] .community-ranking-panel { overflow:hidden; }
body[data-page="community"] .community-ranking-panel[hidden] { display:none!important; }
body[data-page="community"] .community-ranking-panel .panel-head h3 { margin:.18rem 0 0; font-family:var(--font-serif); font-size:1.15rem; font-weight:400; }
body[data-page="community"] .community-table td { vertical-align:middle; }
body[data-page="community"] .community-table td:nth-child(2) small { display:block; margin-top:.12rem; color:var(--muted); font-size:.62rem; }
body[data-page="community"] .ranking-ineligible { opacity:.54; }
body[data-page="community"] .official-rank-delta { font-family:var(--font-serif); font-weight:600; }
body[data-page="community"] .official-rank-delta.up { color:var(--mint); }
body[data-page="community"] .official-rank-delta.down { color:#caa7a7; }
body[data-page="community"] .official-rank-delta.flat { color:var(--muted); }
body[data-page="community"] .community-hall-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
body[data-page="community"] .community-highlight-list { grid-template-columns:repeat(3,minmax(0,1fr)); padding:1rem; }
body[data-page="community"] .community-highlight-list article { margin:0; }

@media (max-width:991.98px) {
  body[data-page="analytics"] .progress-title-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="community"] .community-highlight-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767.98px) {
  body[data-page="analytics"] .progress-achievement-titles-head { align-items:flex-start; flex-direction:column; }
  body[data-page="analytics"] .progress-achievement-titles-head small { text-align:left; }
  body[data-page="analytics"] .progress-achievement-catalog-grid { grid-template-columns:1fr; }
  body[data-page="analytics"] .progress-achievement-catalog-item { border-right:0!important; }
  body[data-page="analytics"] .progress-achievement-catalog-item:nth-child(2) { border-top:1px solid var(--line-faint); }
  body[data-page="community"] .community-ranking-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="community"] .community-hall-summary { grid-template-columns:1fr; }
  body[data-page="community"] .community-highlight-list { grid-template-columns:1fr; }
}
@media (max-width:575.98px) {
  body[data-page="analytics"] .progress-title-list { grid-template-columns:1fr; }
  body[data-page="community"] .community-event { grid-template-columns:1.9rem minmax(0,1fr); gap:.55rem; min-height:0; padding:.48rem .6rem; }
  body[data-page="community"] .community-event-icon { width:1.9rem; height:1.9rem; }
  body[data-page="community"] .community-event-copy { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'player time' 'event detail'; gap:.16rem .55rem; }
  body[data-page="community"] .community-event-player,body[data-page="community"] .community-event-copy h3,body[data-page="community"] .community-event-copy p { font-size:var(--text-sm); }
  body[data-page="community"] .community-event-copy h3,body[data-page="community"] .community-event-copy p { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}


/* WOSU authentication/backend foundation */
.auth-page { min-height:100vh; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:2rem 1rem; }
.auth-card { width:min(100%,31rem); padding:1.6rem; }
.auth-brand { display:flex; align-items:center; gap:.8rem; padding-bottom:1.25rem; border-bottom:1px solid var(--line); }
.auth-brand .brand-mark { display:grid; width:2.8rem; height:2.8rem; place-items:center; color:var(--amber); border:1px solid var(--line); border-radius:.8rem; background:rgba(197,160,89,.08); }
.auth-brand strong,.auth-brand small { display:block; }.auth-brand strong { font-family:var(--font-title); letter-spacing:.18em; }.auth-brand small { color:var(--muted); font-size:.58rem; letter-spacing:.35em; }
.auth-copy { padding:1.5rem 0 1rem; }.auth-copy h1,.error-card h1,.admin-foundation h1 { margin:.3rem 0 .45rem; font-family:var(--font-title); font-size:clamp(1.45rem,5vw,2rem); }.auth-copy p { margin:0; color:var(--muted); }
.auth-form { display:grid; gap:1rem; margin-top:1rem; }.auth-form label>span { display:block; margin-bottom:.4rem; color:var(--muted); font-size:.76rem; font-weight:600; }.auth-form .form-control { min-height:2.8rem; color:var(--text); background:rgba(4,7,12,.55); border:1px solid var(--line); }.auth-form .form-control:focus { color:var(--text); background:rgba(4,7,12,.72); border-color:rgba(136,160,192,.55); box-shadow:0 0 0 .2rem rgba(136,160,192,.08); }.auth-submit { min-height:2.8rem; margin-top:.2rem; }
.auth-alert { display:flex; gap:.7rem; align-items:flex-start; margin:.3rem 0 1rem; padding:.8rem .9rem; color:#e8c7b9; background:rgba(186,92,66,.09); border:1px solid rgba(186,92,66,.22); border-radius:.7rem; font-size:.8rem; }.auth-alert i { margin-top:.08rem; }
.auth-oauth-button { display:flex; align-items:center; justify-content:center; gap:.7rem; width:100%; min-height:2.9rem; color:var(--text); background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:.55rem; font-family:var(--font-serif); font-size:.9rem; text-decoration:none; }.auth-oauth-button:hover { color:var(--text); background:rgba(197,160,89,.07); border-color:rgba(197,160,89,.48); }.auth-osu-mark { display:inline-grid; place-items:center; min-width:2.25rem; height:1.7rem; padding:0 .35rem; color:var(--text); background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:999px; font-family:var(--font-title); font-size:.7rem; letter-spacing:.02em; }.auth-divider { display:flex; align-items:center; gap:.75rem; margin:1.05rem 0 .15rem; color:var(--muted); font-size:.68rem; text-align:center; }.auth-divider::before,.auth-divider::after { content:''; flex:1; height:1px; background:var(--line); }.auth-divider span { max-width:75%; }
.auth-languages { display:flex; justify-content:center; gap:.45rem; margin-top:1.4rem; }.auth-languages a { padding:.25rem .5rem; color:var(--muted); border:1px solid transparent; border-radius:.4rem; font-size:.68rem; font-weight:700; text-decoration:none; }.auth-languages a.active,.auth-languages a:hover { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.025); }
.error-card { text-align:left; }.error-reference { margin:1rem 0; padding:.65rem .75rem; color:var(--muted); border-left:2px solid var(--amber); background:rgba(197,160,89,.05); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; overflow-wrap:anywhere; }
.admin-foundation { max-width:68rem; margin:0 auto; }.admin-foundation .panel-head h1 { font-size:1.45rem; }.admin-foundation-body { padding:0 1.4rem 1.4rem; }.admin-foundation-body>p:first-child { color:var(--muted); }
.navbar-auth-actions { display:flex; align-items:center; gap:.35rem; }.nav-auth-link { display:inline-flex; align-items:center; gap:.35rem; min-height:2rem; padding:.35rem .55rem; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:.45rem; font:inherit; font-size:.7rem; text-decoration:none; }
button.nav-auth-link { cursor:pointer; }
.nav-auth-link:hover { color:var(--text); border-color:var(--line); background:rgba(255,255,255,.025); }
@media (max-width:991.98px) { .navbar-auth-actions { padding-top:.35rem; border-top:1px solid var(--line-faint); } }

/* WOSU 0.14.4 — compact authenticated navbar utilities. */
@media (min-width:992px) {
  .frost-nav .navbar-nav { gap:.12rem !important; }
  .frost-nav .navbar-nav .nav-link { padding-left:.62rem; padding-right:.62rem; white-space:nowrap; }
}
.navbar-utility { display:flex; align-items:center; gap:.22rem; flex:0 0 auto; }
.nav-auth-form { margin:0; }
.nav-language { position:relative; }
.nav-language > summary,
.nav-utility-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:2rem;
  color:var(--muted);
  background:rgba(255,255,255,.012);
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-serif);
  font-size:.72rem;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.nav-language > summary { min-width:3.45rem; padding:.42rem .48rem; list-style:none; }
.nav-language > summary::-webkit-details-marker { display:none; }
.nav-language > summary::marker { display:none; content:''; }
.nav-language > summary > span { color:var(--text); letter-spacing:.08em; }
.nav-language > summary > i:first-child { color:var(--amber); font-size:.76rem; }
.nav-language-chevron { color:var(--muted); font-size:.52rem; transition:transform .16s ease; }
.nav-language[open] .nav-language-chevron { transform:rotate(180deg); }
.nav-language > summary:hover,
.nav-language[open] > summary,
.nav-utility-action:hover,
.nav-utility-action:focus-visible { color:var(--text); border-color:var(--line); background:rgba(197,160,89,.055); }
.nav-language-menu {
  position:absolute;
  top:calc(100% + .45rem);
  right:0;
  z-index:1050;
  min-width:9.5rem;
  padding:.3rem;
  background:rgba(8,11,16,.97);
  border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(0,0,0,.38);
  backdrop-filter:blur(18px);
}
.nav-language-menu a { display:grid; grid-template-columns:2rem minmax(0,1fr); align-items:center; gap:.45rem; padding:.48rem .55rem; color:var(--muted); text-decoration:none; border:1px solid transparent; }
.nav-language-menu a:hover,.nav-language-menu a.active { color:var(--text); border-color:var(--line-faint); background:rgba(197,160,89,.055); }
.nav-language-menu a > span { font-family:var(--font-serif); font-size:.72rem; letter-spacing:.08em; }
.nav-language-menu a > small { color:inherit; font-size:.65rem; white-space:nowrap; }
.nav-utility-action { width:2rem; padding:0; appearance:none; }
button.nav-utility-action { cursor:pointer; }
.nav-utility-action > i { font-size:.76rem; }
.nav-utility-action > span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:991.98px) {
  .navbar-utility { margin-left:0 !important; padding:.65rem 0 .15rem; border-top:1px solid var(--line-faint); }
  .nav-language { flex:0 0 auto; }
  .nav-language-menu { left:0; right:auto; }
  .nav-utility-action { width:auto; padding:.42rem .58rem; }
  .nav-utility-action > span { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
}

/* WOSU 0.14.5 — navbar dropdowns must paint above page content. */
body .frost-nav {
  z-index:1040;
  overflow:visible;
}
body .frost-nav > .container,
body .frost-nav .navbar-collapse,
body .navbar-utility,
body .nav-language {
  overflow:visible;
}

/* WOSU 0.16.0 — public legal documents, admin content publishing and authenticated project chronicle. */
.auth-legal-footer{position:relative;z-index:5;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;padding:0 1rem 1.2rem;color:var(--muted);font-size:.72rem}.auth-legal-footer a,.site-legal-links a,.legal-footer-links a{color:var(--muted);text-decoration:none}.auth-legal-footer a:hover,.site-legal-links a:hover,.legal-footer-links a:hover{color:var(--gold)}
.site-footer-shell>div{display:flex;flex-direction:column;gap:.3rem}.site-legal-links{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.68rem}.legal-page{min-height:100vh;background:var(--bg);color:var(--text)}.legal-shell{position:relative;z-index:2;max-width:980px}.legal-back{display:inline-flex;margin-bottom:1rem}.legal-document{padding:clamp(1.4rem,4vw,3rem)}.legal-document header{border-bottom:1px solid var(--line);padding-bottom:1.2rem;margin-bottom:1.5rem}.legal-document header h1{font-family:var(--font-title);margin:.35rem 0}.legal-document header small{color:var(--muted)}.legal-prose{font-family:var(--font-serif);font-size:1.05rem;line-height:1.8;color:var(--text-soft)}.legal-prose h2,.legal-prose h3,.legal-prose h4{font-family:var(--font-title);color:var(--text);margin:1.8rem 0 .75rem}.legal-prose ul{padding-left:1.3rem}.legal-prose a{color:var(--gold)}.legal-footer-links{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;font-size:.76rem}.legal-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.legal-admin-card{padding:1rem}.legal-admin-language-list{display:grid;gap:.55rem}.legal-admin-language-list a{display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;gap:.7rem;padding:.75rem;border:1px solid var(--line);border-radius:.6rem;text-decoration:none;color:var(--text)}.legal-admin-language-list a:hover{border-color:rgba(197,160,89,.45);background:rgba(197,160,89,.05)}.legal-admin-language-list small{color:var(--muted);font-size:.65rem}.legal-admin-editor{min-height:560px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.55}.legal-admin-actions{display:flex;gap:.75rem;flex-wrap:wrap}.chronicle-hero{padding:1.2rem 0}.chronicle-hero h2{font-family:var(--font-title)}.chronicle-hero p,.chronicle-hero small{color:var(--muted)}.chronicle-timeline{display:grid;gap:1rem}.chronicle-day{padding:1.2rem}.chronicle-day>header{display:flex;align-items:center;gap:.9rem;border-bottom:1px solid var(--line);padding-bottom:.8rem;margin-bottom:.5rem}.chronicle-day>header>i{color:var(--gold)}.chronicle-day>header div{flex:1}.chronicle-day h3{font-size:1rem;margin:.1rem 0 0}.chronicle-day>header>strong{color:var(--muted)}.chronicle-entry-list{display:grid}.chronicle-entry{display:grid;grid-template-columns:4.4rem 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.04)}.chronicle-entry:last-child{border-bottom:0}.chronicle-entry strong{display:block;font-size:.88rem}.chronicle-entry small{display:block;color:var(--muted);margin-top:.18rem}.chronicle-project{align-self:start;text-align:center;padding:.25rem .35rem;border:1px solid var(--line);border-radius:999px;font-size:.62rem;letter-spacing:.08em}.project-wosu{color:#d7b76e}.project-losu{color:#9ebedd}.project-dosu{color:#b9a6dd}.project-analyzer{color:#9fcdb9}@media(max-width:900px){.legal-admin-grid{grid-template-columns:1fr}.legal-admin-language-list a{grid-template-columns:2.2rem 1fr}.legal-admin-language-list small{grid-column:2}.chronicle-entry{grid-template-columns:1fr}.chronicle-project{justify-self:start}}

/* WOSU 0.16.1 — centralized reusable legal operator settings. */
.legal-admin-card code,.admin-form-panel code{color:var(--gold);font-size:.78em}.admin-form-panel .panel-note code{white-space:nowrap}


/* WOSU 0.16.2 — read-only LOSU/DOSU service health mirror. */
.admin-service-panel { margin-bottom:1rem; }
.admin-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; padding:0 1.4rem 1.4rem; }
.admin-service-card { min-width:0; padding:1rem; border:1px solid var(--line-faint); background:rgba(5,8,12,.48); }
.admin-service-card.is-healthy { border-top-color:rgba(105,221,189,.35); }
.admin-service-card.is-offline { border-top-color:rgba(210,120,90,.42); }
.admin-service-card-head { display:flex; align-items:center; justify-content:space-between; gap:.65rem; }
.admin-service-card-head>div { display:flex; align-items:center; gap:.55rem; min-width:0; }
.admin-service-card-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-serif); font-size:.95rem; font-weight:500; }
.admin-service-dot { flex:0 0 .55rem; width:.55rem; height:.55rem; border-radius:50%; background:#b86b59; box-shadow:0 0 .8rem rgba(184,107,89,.35); }
.admin-service-card.is-healthy .admin-service-dot { background:var(--mint); box-shadow:0 0 .8rem rgba(105,221,189,.32); }
.admin-service-card .status { flex:0 0 auto; padding:.2rem .42rem; border:1px solid var(--line); border-radius:.3rem; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; }
.admin-service-meta { display:grid; grid-template-columns:1fr 1fr; gap:.65rem .8rem; margin-top:.9rem; }
.admin-service-meta span { color:var(--muted); font-size:.62rem; }
.admin-service-meta strong { display:block; margin-top:.15rem; color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; font-weight:500; }
.admin-service-card p { margin:.8rem 0 0; color:var(--muted); font-size:.66rem; }
.admin-service-card p i { margin-right:.25rem; }
@media (max-width:1199.98px){ .admin-service-grid{grid-template-columns:1fr 1fr}.admin-service-card:last-child{grid-column:1/-1} }
@media (max-width:767.98px){ .admin-service-grid{grid-template-columns:1fr}.admin-service-card:last-child{grid-column:auto} }


/* WOSU 0.16.3 — authentication/security event history. */
.admin-auth-filter { display:grid; grid-template-columns:minmax(10rem,.7fr) minmax(10rem,.7fr) minmax(16rem,1.5fr) auto; gap:.75rem; align-items:end; padding:1rem 1.2rem; }
.admin-auth-filter label>span { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.65rem; }
.admin-auth-filter .form-control,.admin-auth-filter .form-select { color:var(--text); background:rgba(5,8,12,.55); border-color:var(--line); }
.admin-auth-table td { max-width:24rem; }
.admin-auth-table code { color:var(--ice); font-size:.66rem; }
.admin-auth-method { white-space:nowrap; font-size:.7rem; }
.admin-auth-client { min-width:18rem; max-width:30rem!important; color:var(--muted); font-size:.64rem; overflow-wrap:anywhere; }
.auth-outcome-success { color:var(--mint); border-color:rgba(105,221,189,.18); background:rgba(105,221,189,.08); }
.auth-outcome-failure { color:#e8b7a6; border-color:rgba(210,120,90,.3); background:rgba(210,120,90,.07); }
.auth-outcome-blocked { color:#e3d09a; border-color:rgba(210,180,90,.3); background:rgba(210,180,90,.07); }
@media (max-width:991.98px){ .admin-auth-filter{grid-template-columns:1fr 1fr}.admin-auth-filter-search{grid-column:1/-1}.admin-auth-filter button{justify-self:start} }
@media (max-width:575.98px){ .admin-auth-filter{grid-template-columns:1fr}.admin-auth-filter-search{grid-column:auto} }


/* Development chronicle — repository-neutral project list and Git-derived DB migration metadata. */
.chronicle-db-changes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}.chronicle-db-label,.chronicle-db-change{display:inline-flex;align-items:center;gap:.28rem;border:1px solid var(--line-faint);border-radius:999px;padding:.18rem .42rem;font-size:.58rem;line-height:1.2}.chronicle-db-label{color:var(--mint);letter-spacing:.07em}.chronicle-db-change{color:var(--muted);background:rgba(255,255,255,.018)}.chronicle-db-change code{color:var(--ice);font-size:inherit}

/* Score PP source presentation stays compact; calculation details are collapsed by default. */
.profile-metric-note{display:block;margin-top:.18rem;font-size:.62rem;line-height:1.2;letter-spacing:.025em;text-transform:uppercase;color:var(--muted);opacity:.78}
.score-pp-value{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.12rem}
.pp-source-badge{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:.1rem .38rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:.62rem;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;opacity:.78}
.score-attempt-pp{display:flex;flex-direction:column;align-items:flex-start}
.score-pp-details{margin-top:-.35rem;border-top:1px solid var(--line-faint);border-bottom:1px solid var(--line-faint)}
.score-pp-details>summary{display:flex;align-items:center;gap:.45rem;padding:.55rem .15rem;cursor:pointer;color:var(--muted);font-size:.76rem;list-style:none}
.score-pp-details>summary::-webkit-details-marker{display:none}
.score-pp-details>summary span{margin-left:auto;font-size:.64rem;letter-spacing:.03em;text-transform:uppercase;opacity:.72}
.score-pp-details[open]>summary{color:var(--text)}
.score-pp-details-body{display:grid;gap:.65rem;padding:.2rem .15rem .8rem;color:var(--muted);font-size:.76rem}
.score-pp-details-body p{margin:0;max-width:78ch}
.score-pp-details-grid{display:flex;flex-wrap:wrap;gap:.45rem 1rem}
.score-pp-details-grid span{display:grid;gap:.06rem}
.score-pp-details-grid small{font-size:.64rem;text-transform:uppercase;letter-spacing:.03em;opacity:.72}
.score-pp-details-grid strong{color:var(--text);font-size:.78rem;font-variant-numeric:tabular-nums}
.score-pp-details-body code{overflow-wrap:anywhere}