:root { --gold:#c89b3c; --gold-light:#f0e6d2; --blue:#0ac8b9; --blue-dark:#005a82; --ink:#010a13; --panel:rgba(5,20,26,.91); --muted:#a09b8c; }
* { box-sizing:border-box; }
html, body { min-height:100%; margin:0; }
body { color:var(--gold-light); background:var(--ink); font-family:Inter,sans-serif; overflow-x:hidden; }
.background { position:fixed; inset:0; z-index:-2; background:#010a13 url('assets/league-of-mancos-v2.png') center center/cover no-repeat; }
.background::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(1,10,19,.06),rgba(1,10,19,.28)),radial-gradient(circle at 50% 42%,transparent 30%,rgba(1,10,19,.22) 100%); }
main { min-height:100vh; padding:32px; }
.view { min-height:calc(100vh - 64px); }
.invite-view { display:grid; place-items:center; }
.panel { border:1px solid rgba(200,155,60,.48); background:linear-gradient(145deg,rgba(7,24,31,.82),rgba(1,10,19,.78)); box-shadow:0 22px 70px rgba(0,0,0,.48),inset 0 1px rgba(240,230,210,.1); backdrop-filter:blur(8px); }
.invite-card { position:relative; width:min(560px,100%); min-height:480px; padding:48px; text-align:center; overflow:hidden; }
.invite-card::before,.section-card::before { content:""; position:absolute; width:70px; height:2px; top:-1px; left:50%; transform:translateX(-50%); background:var(--gold); box-shadow:0 0 14px var(--gold); }
.eyebrow { color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.28em; }
h1,h2 { margin:0; color:var(--gold-light); font-family:Cinzel,serif; text-transform:uppercase; }
.invite-card h1 { margin-top:14px; font-size:clamp(3rem,9vw,5.3rem); line-height:1; text-shadow:0 3px 22px #000; }
.subtitle { color:var(--muted); line-height:1.55; }
.name-field { display:grid; gap:8px; text-align:left; color:var(--gold); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.name-field { width:min(370px,100%); margin:34px auto 0; }
.invite-code-field { margin-top:14px; }
.secret-input { position:relative; display:block; }.secret-input input { padding-right:92px; }.secret-input button { position:absolute; top:50%; right:7px; border:0; padding:8px 9px; color:var(--gold); background:transparent; font:inherit; font-size:.62rem; font-weight:800; letter-spacing:.06em; transform:translateY(-50%); cursor:pointer; }.secret-input button:focus-visible { outline:1px solid var(--gold); outline-offset:1px; }
.riot-id-fields { display:grid; grid-template-columns:minmax(0,1fr) auto 90px; align-items:center; gap:9px; }.riot-id-fields>span { color:var(--gold); font-size:1.2rem; }
input { width:100%; border:1px solid #3c3c41; border-radius:0; outline:none; padding:14px 16px; color:#fff; background:rgba(1,10,19,.8); font:inherit; }
input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,155,60,.15); }
.answer-zone { position:relative; min-height:145px; margin-top:20px; }
.button { min-width:128px; border:1px solid; padding:14px 24px; font-weight:800; letter-spacing:.08em; cursor:pointer; transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
.button:disabled { cursor:not-allowed; opacity:.42; filter:saturate(.35); box-shadow:none; }
.button-primary { color:#061c25; border-color:#0ad5c5; background:linear-gradient(#19d3c5,#0a9c98); box-shadow:inset 0 0 0 2px #052c3c,0 4px 20px rgba(10,200,185,.2); }
.button-primary:hover { box-shadow:inset 0 0 0 2px #052c3c,0 0 25px rgba(10,200,185,.45); }
.button-secondary { position:absolute; top:0; left:calc(50% + 22px); color:var(--gold-light); border-color:#785a28; background:#1e2328; transition:left .32s ease,top .32s ease; }
#yes-button { position:absolute; top:0; right:calc(50% + 22px); transform-origin:center; z-index:2; }
.taunt { min-height:24px; margin:0; color:var(--gold); font-weight:700; }
.install-button { font-family:inherit; }
.companion-download { display:inline-flex; align-items:center; justify-content:center; margin:8px auto 0; border:1px solid rgba(200,155,60,.62); padding:9px 12px; color:var(--gold-light); background:rgba(200,155,60,.08); font-size:.62rem; font-weight:800; letter-spacing:.08em; text-decoration:none; cursor:pointer; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }.companion-download:hover { border-color:var(--gold); background:rgba(200,155,60,.16); box-shadow:0 0 18px rgba(200,155,60,.15); }.companion-download[hidden] { display:none; }
.error { min-height:19px; margin:7px 0 0; color:#ff6b6b; font-size:.8rem; }
.hidden { display:none!important; }
.lobby-view { width:min(1180px,100%); margin:auto; }
.lobby-header { display:block; padding:0; overflow:hidden; }
.lobby-header-main { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 22px; }
.lobby-header h1 { margin-top:4px; font-size:clamp(1.35rem,3vw,2rem); line-height:1.05; }
.lobby-header .subtitle { margin:5px 0 0; font-size:.76rem; }
.lobby-header .eyebrow { font-size:.62rem; }
.clash-notice { display:flex; align-items:center; gap:12px; margin:0; padding:10px 22px; border-top:1px solid rgba(10,200,185,.82); background:linear-gradient(90deg,rgba(10,200,185,.28),rgba(200,155,60,.13),rgba(5,20,26,.94)); box-shadow:inset 0 1px rgba(240,230,210,.12),0 -5px 22px rgba(10,200,185,.14); }.clash-notice>span { color:var(--blue); font-size:1.3rem; filter:drop-shadow(0 0 7px var(--blue)); }.clash-notice strong,.clash-notice small { display:block; }.clash-notice strong { color:#fff; font-family:Cinzel,serif; font-size:.78rem; text-transform:uppercase; }.clash-notice small { margin-top:2px; color:var(--gold-light); font-size:.7rem; }
.online-pill { flex:none; border:1px solid rgba(10,200,185,.35); padding:10px 14px; color:#c8d1cf; font-size:.82rem; }
.lobby-header-actions { display:flex; align-items:center; gap:9px; flex:none; }.lobby-header-actions .companion-download { margin:0; }.companion-download-compact { white-space:nowrap; }
.online-pill span { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); }
.app-tabs { display:flex; flex-wrap:nowrap; gap:8px; margin-top:18px; }.app-tab { min-width:0; flex:1 1 0; border:1px solid rgba(120,90,40,.45); padding:13px 16px; overflow:hidden; color:var(--muted); background:rgba(1,10,19,.78); font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }.app-tab.active { border-color:var(--gold); color:var(--gold-light); background:linear-gradient(180deg,rgba(200,155,60,.2),rgba(1,10,19,.8)); box-shadow:inset 0 -2px var(--gold); }.tab-panel { min-width:0; }.tab-panel>.manco-card,.availability-card,.calendar-stats-card { margin-top:18px; }
.app-tabs { display:flex; flex-wrap:nowrap; gap:8px; margin-top:18px; }.app-tab { min-width:0; flex:1 1 0; border:1px solid rgba(120,90,40,.45); padding:13px 16px; overflow:hidden; color:var(--muted); background:rgba(1,10,19,.78); font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }.app-tab.active { border-color:var(--gold); color:var(--gold-light); background:linear-gradient(180deg,rgba(200,155,60,.2),rgba(1,10,19,.8)); box-shadow:inset 0 -2px var(--gold); }.tab-panel { min-width:0; }.tab-panel>.recent-games-card,.availability-card,.calendar-card { margin-top:18px; }
.app-tabs { margin-top:10px; }
.availability-card { margin-bottom:16px; padding:20px 22px; }.availability-card .section-heading { margin-bottom:12px; }.availability-card .day-tabs { margin-bottom:10px; }.availability-card .selected-day-label { margin-bottom:7px; }
.lobby-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; margin-top:18px; padding-bottom:32px; }
.section-card { position:relative; padding:28px; }
.schedule-card { grid-row:span 2; }
.section-heading { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:22px; }
.section-heading>div { display:flex; align-items:center; gap:12px; }
.section-heading h2 { font-size:1.05rem; }
.section-heading p { margin:0; color:var(--muted); font-size:.78rem; }
.shared-games-balance { display:inline-flex; align-items:center; gap:6px; border:1px solid currentColor; border-radius:3px; padding:5px 8px; font-size:.62rem; font-weight:900; letter-spacing:.04em; line-height:1; text-transform:uppercase; white-space:nowrap; box-shadow:inset 0 0 0 1px rgba(240,230,210,.06),0 0 12px color-mix(in srgb,currentColor 12%,transparent); }
.shared-games-balance small { color:var(--muted); font-size:.52rem; font-weight:800; letter-spacing:.08em; }
.shared-games-balance b { color:currentColor; font-size:inherit; }
.shared-games-balance.positive { color:#46d39a; background:rgba(70,211,154,.12); box-shadow:0 0 12px rgba(70,211,154,.12); }
.shared-games-balance.negative { color:#ff6b6b; background:rgba(255,107,107,.12); box-shadow:0 0 12px rgba(255,107,107,.12); }
.shared-games-balance.neutral { color:var(--gold); background:rgba(200,155,60,.1); }
.recent-games-card .section-heading>div { flex-wrap:wrap; }
.step { color:var(--gold); font-family:Cinzel,serif; font-size:.72rem; }
.players-list { display:grid; gap:10px; }
.player { display:flex; align-items:center; gap:12px; padding:12px; border:1px solid rgba(120,90,40,.35); background:rgba(30,35,40,.55); }
.player-card { --rank:#5b5a56; border-color:color-mix(in srgb,var(--rank) 48%,transparent); }
.profile-icon { display:grid; place-items:center; width:46px; height:46px; flex:none; overflow:hidden; border:2px solid var(--rank); border-radius:50%; color:var(--gold-light); background:#071a20; box-shadow:0 0 11px color-mix(in srgb,var(--rank) 45%,transparent); font-family:Cinzel,serif; font-weight:800; }.profile-icon img { width:100%; height:100%; object-fit:cover; }
.player-details { min-width:0; flex:1; }.player-name-line { display:flex; align-items:center; justify-content:space-between; gap:8px; }.player-name-line strong { overflow:hidden; color:var(--rank); text-overflow:ellipsis; white-space:nowrap; }
.rank-emblem { display:grid; place-items:center; width:25px; height:28px; flex:none; color:var(--rank); filter:drop-shadow(0 0 4px color-mix(in srgb,var(--rank) 48%,transparent)); }.rank-emblem svg { width:100%; height:100%; overflow:visible; }.emblem-wings { fill:color-mix(in srgb,var(--rank) 22%,#071a20); stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; }.emblem-core { fill:currentColor; opacity:.92; }.emblem-cut { fill:none; stroke:var(--gold-light); stroke-width:1.2; stroke-linecap:round; opacity:.72; }
.has-tooltip { position:relative; outline:none; }.has-tooltip::after { content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 9px); z-index:20; width:max-content; max-width:240px; padding:7px 9px; border:1px solid rgba(200,155,60,.5); color:var(--gold-light); background:#071a20; box-shadow:0 8px 20px rgba(0,0,0,.45); font-size:.68rem; font-style:normal; font-weight:600; line-height:1.35; letter-spacing:0; text-align:center; text-transform:none; transform:translate(-50%,4px); opacity:0; visibility:hidden; pointer-events:none; transition:.16s ease; }.has-tooltip:hover::after,.has-tooltip:focus-visible::after { transform:translate(-50%,0); opacity:1; visibility:visible; }
.rank-iron { --rank:#71655b; }.rank-bronze { --rank:#a66b43; }.rank-silver { --rank:#9cb3bd; }.rank-gold { --rank:#d5a93d; }.rank-platinum { --rank:#4fc0a8; }.rank-emerald { --rank:#36c66f; }.rank-diamond { --rank:#66a7ff; }.rank-master { --rank:#b478ed; }.rank-grandmaster { --rank:#e45a5a; }.rank-challenger { --rank:#65d5ed; }
.player-color { width:6px; height:36px; flex:none; border-radius:4px; background:var(--player-color); box-shadow:0 0 9px var(--player-color); }
.player small { display:block; margin-top:3px; color:var(--muted); }
.empty { padding:22px; color:var(--muted); text-align:center; border:1px dashed #3c3c41; }
.time-slots { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; margin-bottom:12px; }
.day-tabs { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:20px; }
.day-tab { display:grid; gap:4px; border:1px solid #3c3c41; padding:9px 3px; color:var(--muted); background:rgba(1,10,19,.7); cursor:pointer; }
.day-tab span { font-size:.62rem; font-weight:700; text-transform:uppercase; }.day-tab strong { color:var(--gold-light); }
.day-tab.active { border-color:var(--gold); color:var(--gold); background:rgba(200,155,60,.14); }
.selected-day-label { margin:0 0 12px; color:var(--gold); font-family:Cinzel,serif; font-size:.9rem; text-transform:uppercase; }
.slot { min-height:34px; border:1px solid #3c3c41; padding:4px 2px; color:#c8d1cf; background:rgba(1,10,19,.65); text-align:center; cursor:pointer; }
.slot.selected { border-color:var(--blue); color:#fff; background:rgba(10,200,185,.18); box-shadow:inset 0 0 14px rgba(10,200,185,.12); }
.slot strong { display:block; font-size:.7rem; line-height:1.1; }.slot small { display:block; margin-top:2px; color:var(--muted); font-size:.5rem; line-height:1.05; }
.full-width { width:100%; }.save-message { min-height:20px; margin:10px 0 0; color:var(--blue); font-size:.8rem; text-align:center; }
.overlap-list { display:grid; gap:10px; }.overlap-item { display:flex; align-items:center; gap:16px; padding:12px 14px; border:1px solid rgba(10,200,185,.28); border-left:3px solid var(--blue); background:linear-gradient(100deg,rgba(10,200,185,.08),rgba(30,35,40,.68)); }.overlap-item>strong { min-width:48px; color:var(--gold-light); font-family:Cinzel,serif; }.overlap-details { min-width:0; flex:1; }.overlap-details>span { display:block; margin-bottom:8px; color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.overlap-players { display:flex; flex-wrap:wrap; gap:8px 14px; }.overlap-player { display:flex; align-items:center; gap:7px; min-width:0; }.overlap-player>strong { overflow:hidden; color:#f0e6d2; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.overlap-avatar { display:grid; place-items:center; width:28px; height:28px; flex:none; overflow:hidden; border:1px solid var(--gold); border-radius:50%; color:var(--gold-light); background:#071a20; box-shadow:0 0 7px rgba(200,155,60,.25); font-family:Cinzel,serif; font-size:.65rem; font-weight:800; }.overlap-avatar img { width:100%; height:100%; object-fit:cover; }
.week-card { grid-column:1/-1; }.week-calendar { display:grid; gap:12px; }
.calendar-stats-card { padding:14px 18px 10px; }.calendar-stats-card+.calendar-card { margin-top:10px; }.calendar-stats-card .section-heading { margin-bottom:7px; }.calendar-stats-card .section-heading h2 { font-size:.88rem; }.calendar-stats-card .section-heading p { font-size:.66rem; }.games-by-hour-chart { min-width:0; }.hour-line-chart { min-width:0; border:1px solid rgba(120,90,40,.2); background:linear-gradient(to top,rgba(10,200,185,.06),transparent 58%); }.hour-line-chart svg { display:block; width:100%; height:120px; overflow:visible; }.chart-grid line { stroke:rgba(160,155,140,.12); stroke-width:1; vector-effect:non-scaling-stroke; }.chart-axis { stroke:rgba(200,155,60,.58); stroke-width:1; vector-effect:non-scaling-stroke; }.hour-area { fill:rgba(10,200,185,.1); }.hour-line { fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 3px rgba(10,200,185,.36)); }.hour-dots circle { fill:#071a20; stroke:var(--blue); stroke-width:1.5; vector-effect:non-scaling-stroke; cursor:help; }.hour-dots circle:hover { fill:var(--blue); }.chart-ticks text { fill:var(--muted); font-size:9px; text-anchor:middle; }.axis-label { fill:var(--gold); font-size:13px; font-weight:800; letter-spacing:.08em; text-anchor:middle; }.hour-chart-meta { display:flex; justify-content:flex-end; margin-top:3px; color:var(--muted); font-size:.52rem; }
.week-day { min-width:0; overflow:hidden; border:1px solid rgba(120,90,40,.35); background:rgba(1,10,19,.64); }
.week-day>header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(120,90,40,.28); background:rgba(30,35,40,.45); }
.week-day>header>div { display:flex; align-items:baseline; gap:9px; }.week-day>header strong { color:var(--gold-light); font-family:Cinzel,serif; font-size:.84rem; text-transform:uppercase; }.week-day>header small { color:var(--gold); font-weight:800; }.week-day>header>span { color:var(--muted); font-size:.68rem; }
.day-timeline { overflow-x:auto; scrollbar-color:#785a28 rgba(1,10,19,.5); }
.timeline-axis,.availability-lane { display:grid; grid-template-columns:minmax(88px,16%) minmax(520px,1fr); }
.timeline-axis { padding:9px 14px 5px; color:#74756f; font-size:.56rem; font-weight:700; letter-spacing:.04em; }
.timeline-axis>b { align-self:end; font-size:.54rem; }.timeline-axis>div,.availability-track { display:grid; grid-template-columns:repeat(24,minmax(0,1fr)); }
.timeline-axis span { grid-column:var(--column); transform:translateX(-50%); }.timeline-axis span:last-child { transform:translateX(-100%); text-align:right; }
.availability-lanes { padding:0 14px 12px; }
.availability-lanes>p { margin:8px 0 3px; padding:8px; color:var(--muted); font-size:.72rem; text-align:center; }
.availability-lane { min-height:28px; align-items:center; }
.availability-lane>strong { overflow:hidden; padding-right:12px; color:var(--lane-color); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.availability-track { position:relative; height:16px; background:repeating-linear-gradient(90deg,rgba(160,155,140,.14) 0 1px,transparent 1px calc(100% / 24)); }
.availability-track::after { content:""; position:absolute; inset:7px 0 auto; height:1px; background:rgba(160,155,140,.13); }
.availability-track i { position:relative; z-index:1; grid-column:var(--start)/var(--end); height:6px; align-self:center; border-radius:999px; background:var(--lane-color); box-shadow:0 0 8px color-mix(in srgb,var(--lane-color) 70%,transparent); }
.availability-track i::before,.availability-track i::after { content:""; position:absolute; top:50%; width:6px; height:6px; border:2px solid #071a20; border-radius:50%; background:var(--lane-color); transform:translateY(-50%); }.availability-track i::before { left:-1px; }.availability-track i::after { right:-1px; }
.shared-game-card { margin-bottom:18px; }
.shared-game-banner { position:relative; display:grid; grid-template-columns:minmax(220px,.75fr) minmax(320px,1.25fr); gap:24px; overflow:hidden; padding:25px 28px; border:1px solid var(--result-color); background:linear-gradient(120deg,color-mix(in srgb,var(--result-color) 24%,#071a20),rgba(1,10,19,.94) 66%); box-shadow:inset 4px 0 var(--result-color),0 12px 32px rgba(0,0,0,.28); }
.shared-game-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 45%,color-mix(in srgb,var(--result-color) 8%,transparent)); pointer-events:none; }
.shared-game-banner.is-win { --result-color:#22c997; }.shared-game-banner.is-loss { --result-color:#e04f4f; }
.shared-game-copy,.shared-players { position:relative; z-index:1; }.shared-game-copy { align-self:center; }.shared-game-copy>span { color:var(--result-color); font-size:.66rem; font-weight:800; letter-spacing:.16em; }.shared-game-copy h2 { margin:7px 0 8px; color:#f0e6d2; font-family:Cinzel,serif; font-size:clamp(1.2rem,2.7vw,1.8rem); line-height:1.15; }.shared-game-copy p { margin:0; color:var(--muted); font-size:.75rem; }.shared-game-copy p strong { color:var(--gold-light); font-family:Cinzel,serif; font-size:1rem; }
.shared-players { display:grid; gap:7px; }.shared-player { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--result-color) 28%,transparent); background:rgba(1,10,19,.5); }.shared-avatar { display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border:1px solid var(--result-color); border-radius:50%; color:var(--gold-light); background:#071a20; font-family:Cinzel,serif; font-weight:800; }.shared-avatar img { width:100%; height:100%; object-fit:cover; }.shared-player>div:nth-child(2) { min-width:0; }.shared-player strong,.shared-player small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.shared-player strong { color:#f0e6d2; font-size:.78rem; }.shared-player small { margin-top:2px; color:var(--muted); font-size:.65rem; }.shared-player>b { color:var(--result-color); font-family:Cinzel,serif; font-size:.78rem; white-space:nowrap; }
.lobby-view>.manco-card { margin-top:18px; }
.manco-card { grid-column:1/-1; }.manco-ranking { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }.manco-row { display:grid; grid-template-columns:24px 34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(120,90,40,.35); background:rgba(30,35,40,.55); }.manco-row>strong { color:var(--muted); font-family:Cinzel,serif; text-align:center; }.manco-row>span { overflow:hidden; color:var(--gold-light); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.manco-row>small { color:#e76a62; font-size:.7rem; }.manco-row.is-manco { border-color:rgba(224,79,79,.62); background:linear-gradient(90deg,rgba(224,79,79,.15),rgba(30,35,40,.55)); box-shadow:inset 3px 0 #e04f4f; }.manco-row.is-manco>strong { color:#e04f4f; }.manco-avatar { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border:1px solid #785a28; border-radius:50%; color:var(--gold); background:#071a20; font-family:Cinzel,serif; font-size:.75rem; font-weight:800; }.manco-avatar img { width:100%; height:100%; object-fit:cover; }
.top-manco-card { margin-top:10px; padding:16px 20px; }.top-manco-card .section-heading { margin-bottom:12px; }.top-manco-card .section-heading h2 { font-size:.92rem; }.top-manco-card .manco-row { padding:7px 10px; }.top-manco-card .manco-avatar { width:29px; height:29px; }.top-manco-card .manco-ranking { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.manco-card { grid-column:1/-1; }.manco-ranking { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }.manco-row { display:grid; grid-template-columns:24px 34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(120,90,40,.35); background:rgba(30,35,40,.55); }.manco-row>strong { color:var(--muted); font-family:Cinzel,serif; text-align:center; }.manco-row>span { overflow:hidden; color:var(--gold-light); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.manco-row>small { color:#e76a62; font-size:.7rem; }.manco-row.is-manco { border-color:rgba(224,79,79,.62); background:linear-gradient(90deg,rgba(224,79,79,.15),rgba(30,35,40,.55)); box-shadow:inset 3px 0 #e04f4f; }.manco-row.is-manco>strong { color:#e04f4f; }.manco-avatar { display:grid; place-items:center; width:34px; height:34px; overflow:hidden; border:1px solid #785a28; border-radius:50%; color:var(--gold); background:#071a20; font-family:Cinzel,serif; font-size:.75rem; font-weight:800; }.manco-avatar img { width:100%; height:100%; object-fit:cover; }
.collapsible-manco-card { margin-top:12px; padding:0; }.manco-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; padding:13px 18px; color:var(--gold-light); background:rgba(30,35,40,.5); cursor:pointer; text-align:left; }.manco-toggle>span { display:flex; align-items:center; gap:11px; }.manco-toggle strong { font-family:Cinzel,serif; font-size:.86rem; text-transform:uppercase; }.manco-toggle i { width:9px; height:9px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease; }.is-collapsed .manco-toggle i { transform:rotate(-45deg); }.manco-content { padding:0 18px 16px; }.manco-content>p { margin:10px 0; color:var(--muted); font-size:.7rem; }.collapsible-manco-card .manco-ranking { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }.collapsible-manco-card .manco-row { padding:7px 9px; }.collapsible-manco-card .manco-avatar { width:29px; height:29px; }
.shared-games { display:grid; grid-template-columns:minmax(210px,.32fr) minmax(0,1fr); gap:18px; align-items:start; }.match-history { display:grid; max-height:680px; overflow:auto; border:1px solid rgba(120,90,40,.36); background:rgba(1,10,19,.58); scrollbar-width:thin; scrollbar-color:#c89b3c rgba(1,10,19,.72); scrollbar-gutter:stable; }.match-history::-webkit-scrollbar { width:9px; height:9px; }.match-history::-webkit-scrollbar-track { border-left:1px solid rgba(120,90,40,.22); background:rgba(1,10,19,.72); }.match-history::-webkit-scrollbar-thumb { border:2px solid #071a20; border-radius:999px; background:linear-gradient(#d5b259,#785a28); box-shadow:inset 0 0 0 1px rgba(240,230,210,.18); }.match-history::-webkit-scrollbar-thumb:hover { background:linear-gradient(#f0cf75,#9b7432); }.match-history::-webkit-scrollbar-corner { background:#071a20; }.match-summary { --summary-result:#e04f4f; display:grid; gap:4px; width:100%; border:0; border-bottom:1px solid rgba(120,90,40,.24); border-left:3px solid transparent; padding:12px 14px; color:var(--muted); background:transparent; font:inherit; text-align:left; cursor:pointer; }.match-summary:last-child { border-bottom:0; }.match-summary.win { --summary-result:var(--blue); }.match-summary:hover,.match-summary:focus-visible { background:rgba(200,155,60,.08); outline:none; }.match-summary.active { border-left-color:var(--summary-result); background:linear-gradient(90deg,color-mix(in srgb,var(--summary-result) 14%,transparent),rgba(30,35,40,.56)); }.match-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }.match-summary-heading>span { color:var(--summary-result); font-size:.64rem; font-weight:900; letter-spacing:.08em; }.match-summary-heading>b { border:1px solid rgba(200,155,60,.45); border-radius:999px; padding:2px 6px; color:var(--gold-light); background:rgba(200,155,60,.1); font-size:.5rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }.match-summary time { color:var(--gold-light); font-size:.72rem; font-weight:700; text-transform:capitalize; }.match-summary small { overflow:hidden; font-size:.63rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.match-detail { min-width:0; }.shared-game { --game-result:#e04f4f; position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--game-result) 52%,#785a28); border-radius:4px; background:rgba(1,10,19,.88); box-shadow:inset 4px 0 var(--game-result),0 8px 20px rgba(0,0,0,.34),0 0 0 1px rgba(1,10,19,.7); }.shared-game.win { --game-result:var(--blue); }.shared-game>header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 14px 11px 16px; border-bottom:1px solid color-mix(in srgb,var(--game-result) 30%,rgba(120,90,40,.3)); background:linear-gradient(90deg,color-mix(in srgb,var(--game-result) 13%,rgba(30,35,40,.8)),rgba(12,24,29,.88)); }.shared-game>header>div { display:flex; align-items:center; gap:10px; min-width:0; }.shared-game h3 { overflow:hidden; margin:0; color:var(--gold-light); font-family:Cinzel,serif; font-size:.83rem; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.shared-game>header>small { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; color:#a9aaa4; font-size:.65rem; }.game-queue { border:1px solid rgba(200,155,60,.5); border-radius:999px; padding:3px 7px; color:var(--gold-light); background:rgba(200,155,60,.1); font-size:.56rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }.game-outcome { flex:none; color:#e76a62; font-size:.62rem; font-weight:900; letter-spacing:.08em; }.shared-game.win .game-outcome { color:var(--blue); }.match-teams { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(120,90,40,.32); }.match-team { background:rgba(5,20,26,.98); }.team-label { display:flex; justify-content:space-between; padding:6px 9px; color:var(--muted); background:rgba(224,79,79,.07); font-size:.61rem; text-transform:uppercase; }.winning-team .team-label { color:var(--blue); background:rgba(10,200,185,.07); }.team-label b { color:inherit; }.match-player { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:34px; padding:4px 8px; border-top:1px solid rgba(160,155,140,.08); }.match-player.our-boy { background:linear-gradient(90deg,rgba(200,155,60,.18),rgba(10,200,185,.06)); box-shadow:inset 2px 0 var(--gold); }.champion-icon { display:grid; place-items:center; width:26px; height:26px; overflow:hidden; border-radius:3px; color:var(--gold); background:#071a20; font-size:.65rem; }.champion-icon img { width:100%; height:100%; object-fit:cover; }.our-boy .champion-icon { outline:1px solid var(--gold); }.match-player-copy { min-width:0; }.match-player-copy strong,.match-player-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.match-player-copy strong { color:#c8d1cf; font-size:.68rem; }.our-boy .match-player-copy strong { color:var(--gold-light); }.match-player-copy small { margin-top:1px; color:#74756f; font-size:.56rem; }.match-player>b { color:var(--muted); font-size:.65rem; font-variant-numeric:tabular-nums; }
@media (min-width:761px) {
  body.games-tab-active { overflow:hidden; }
  body.games-tab-active main { height:100vh; min-height:0; overflow:hidden; }
  body.games-tab-active .lobby-view { display:flex; height:100%; min-height:0; flex-direction:column; }
  body.games-tab-active #games-tab { display:flex; min-height:0; flex:1; flex-direction:column; }
  body.games-tab-active #games-tab>.manco-card { flex:none; }
  body.games-tab-active .recent-games-card { display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }
  body.games-tab-active .recent-games-card>.section-heading { flex:none; }
  body.games-tab-active .shared-games { min-height:0; flex:1; }
  body.games-tab-active .match-history { height:100%; max-height:none; }
  body.games-tab-active .match-detail { min-height:0; max-height:100%; overflow:auto; scrollbar-width:thin; scrollbar-color:#c89b3c rgba(1,10,19,.72); }
}
.match-detail::-webkit-scrollbar { width:9px; height:9px; }
.match-detail::-webkit-scrollbar-track { border-left:1px solid rgba(120,90,40,.22); background:rgba(1,10,19,.72); }
.match-detail::-webkit-scrollbar-thumb { border:2px solid #071a20; border-radius:999px; background:linear-gradient(#d5b259,#785a28); }
.match-detail::-webkit-scrollbar-thumb:hover { background:linear-gradient(#f0cf75,#9b7432); }
.live-game-popup { position:fixed; right:18px; bottom:18px; z-index:50; width:min(350px,calc(100vw - 36px)); overflow:hidden; border:1px solid rgba(10,200,185,.75); border-radius:5px; color:#f0e6d2; background:rgba(1,10,19,.97); box-shadow:0 14px 42px rgba(0,0,0,.62),0 0 22px rgba(10,200,185,.16); backdrop-filter:blur(10px); }.live-game-popup>header { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid rgba(10,200,185,.28); background:linear-gradient(90deg,rgba(10,200,185,.2),rgba(200,155,60,.08)); }.live-game-popup>header>i { width:9px; height:9px; flex:none; border-radius:50%; background:var(--blue); box-shadow:0 0 10px var(--blue); animation:live-pulse 1.6s ease-in-out infinite; }.live-game-popup>header strong,.live-game-popup>header small { display:block; }.live-game-popup>header strong { color:var(--blue); font-family:Cinzel,serif; font-size:.72rem; letter-spacing:.09em; }.live-game-popup>header small { margin-top:1px; color:var(--muted); font-size:.61rem; }.live-game-players { max-height:45vh; overflow-y:auto; }.live-game-player { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; padding:9px 12px; border-top:1px solid rgba(160,155,140,.1); }.live-game-player:first-child { border-top:0; }.live-game-player.has-live-stats { background:linear-gradient(90deg,rgba(10,200,185,.08),transparent); }.live-champion { display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border:1px solid var(--gold); border-radius:5px; color:var(--gold-light); background:#071a20; font-family:Cinzel,serif; font-size:.7rem; font-weight:800; }.live-champion img { width:100%; height:100%; object-fit:cover; }.live-game-player>div:nth-child(2) { min-width:0; }.live-game-player strong,.live-game-player small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.live-game-player strong { color:#fff; font-size:.76rem; }.live-game-player small { margin-top:3px; color:#a9aaa4; font-size:.61rem; }.desktop-live-badge { display:inline-block; margin-left:6px; border:1px solid rgba(10,200,185,.65); border-radius:2px; padding:1px 3px; color:var(--blue); font-size:.47rem; letter-spacing:.07em; vertical-align:1px; }.live-game-player time { color:var(--gold-light); font-family:Cinzel,serif; font-size:.66rem; white-space:nowrap; }@keyframes live-pulse { 50% { opacity:.45; transform:scale(.78); } }
.live-game-stage { margin-top:18px; overflow:hidden; border-color:rgba(10,200,185,.55); background:radial-gradient(circle at 85% 0,rgba(10,200,185,.12),transparent 42%),rgba(1,10,19,.9); box-shadow:0 16px 45px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.025); }.live-stage-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid rgba(10,200,185,.25); }.live-stage-header>div { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.live-stage-header h2 { width:100%; margin:0; font-size:1.35rem; }.live-stage-header>strong { color:var(--blue); font-family:Cinzel,serif; font-size:.82rem; white-space:nowrap; }.live-stage-pulse { width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue); animation:live-pulse 1.6s ease-in-out infinite; }.live-stage-players { display:grid; gap:9px; }.live-stage-player { position:relative; display:grid; grid-template-columns:58px minmax(145px,1fr) minmax(120px,.7fr) 60px 70px auto; align-items:center; gap:14px; min-height:76px; padding:9px 14px 9px 9px; border:1px solid rgba(160,155,140,.18); border-left:3px solid var(--blue); background:linear-gradient(90deg,rgba(10,200,185,.1),rgba(5,20,26,.72) 35%,rgba(1,10,19,.86)); }.live-stage-player.no-live-stats { grid-template-columns:58px minmax(145px,1fr) auto; border-left-color:#53565a; opacity:.72; }.live-stage-champion { display:grid; place-items:center; width:58px; height:58px; overflow:hidden; border:1px solid var(--gold); border-radius:5px; color:var(--gold-light); background:#071a20; font-family:Cinzel,serif; font-weight:800; }.live-stage-champion img { width:100%; height:100%; object-fit:cover; }.live-stage-identity { min-width:0; }.live-stage-identity>span,.live-stage-identity>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.live-stage-identity>span { color:var(--gold-light); font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.live-stage-identity>strong { margin-top:4px; color:#fff; font-size:.9rem; }.live-stage-kda span,.live-stage-stat span { display:block; color:var(--muted); font-size:.52rem; font-weight:900; letter-spacing:.1em; }.live-stage-kda>strong { display:block; margin-top:5px; color:#81878b; font-family:Cinzel,serif; font-size:1rem; }.live-stage-kda b:first-child { color:#32d6c7; }.live-stage-kda b:nth-child(2) { color:#e36a6a; }.live-stage-kda b:last-child { color:#dfbd66; }.live-stage-stat { text-align:center; }.live-stage-stat strong { display:block; margin-top:5px; color:#f0e6d2; font-family:Cinzel,serif; font-size:.93rem; }.live-stage-player>.desktop-live-badge { margin:0; }.live-stage-missing { text-align:right; }.live-stage-missing strong,.live-stage-missing span { display:block; }.live-stage-missing strong { color:#a09b8c; font-size:.72rem; }.live-stage-missing span { margin-top:3px; color:#72756f; font-size:.58rem; }.live-stage-note { margin:13px 0 0; color:var(--muted); font-size:.64rem; text-align:right; }.live-action-messages { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; }.live-action-messages span { border:1px solid; border-radius:2px; padding:3px 6px; font-size:.58rem; font-weight:900; animation:live-action-in .25s ease-out; }.live-action-messages .kill { border-color:rgba(10,200,185,.55); color:#42ddd0; background:rgba(10,200,185,.1); }.live-action-messages .death { border-color:rgba(224,79,79,.58); color:#ef8585; background:rgba(224,79,79,.1); }@keyframes live-action-in { from { opacity:0; transform:translateY(4px); } }
.live-game-outcome { position:relative; display:grid; place-items:center; min-height:430px; overflow:hidden; margin:-22px; padding:38px 20px; isolation:isolate; text-align:center; background:radial-gradient(circle,rgba(17,76,91,.52),rgba(1,10,19,.96) 62%); }.live-game-outcome.defeat { background:radial-gradient(circle,rgba(91,26,35,.48),rgba(1,10,19,.97) 62%); }.live-game-outcome>*:not(.outcome-rays) { position:relative; z-index:1; }.outcome-rays { position:absolute; inset:-55%; z-index:-1; opacity:.22; background:repeating-conic-gradient(from 0deg,transparent 0 10deg,currentColor 10deg 11deg,transparent 11deg 24deg); color:#2ce2d3; animation:outcome-turn 38s linear infinite; }.defeat .outcome-rays { color:#cf5362; }.live-game-outcome svg { width:150px; margin-bottom:-2px; overflow:visible; filter:drop-shadow(0 0 20px rgba(10,200,185,.38)); }.live-game-outcome.defeat svg { filter:drop-shadow(0 0 20px rgba(190,55,71,.35)); }.outcome-wing { fill:#071c25; stroke:#c9a852; stroke-width:3; }.victory .outcome-core { fill:#0ac8b9; stroke:#e4c36c; stroke-width:3; }.defeat .outcome-core { fill:#8f2e3b; stroke:#bda05a; stroke-width:3; }.outcome-cut { fill:#f0d27b; }.live-game-outcome>span { color:#a09b8c; font-size:.62rem; font-weight:900; letter-spacing:.25em; }.live-game-outcome>strong { margin-top:9px; color:#d9bd67; font-family:Cinzel,serif; font-size:clamp(2.3rem,7vw,4.3rem); letter-spacing:.12em; line-height:1; text-shadow:0 2px #000,0 0 22px rgba(217,189,103,.3); }.live-game-outcome.defeat>strong { color:#c55b66; text-shadow:0 2px #000,0 0 22px rgba(197,91,102,.3); }.live-game-outcome>small { margin-top:12px; color:#c8c4b7; font-size:.72rem; }@keyframes outcome-turn { to { transform:rotate(360deg); } }
@media (max-width:760px) { main{padding:14px}.view{min-height:calc(100vh - 28px)}.invite-card{min-height:540px;padding:38px 20px;background:linear-gradient(145deg,rgba(7,24,31,.78),rgba(1,10,19,.73))}.answer-zone{min-height:180px}.button{min-width:112px;padding:13px 18px}#yes-button{right:calc(50% + 8px)}.button-secondary{left:calc(50% + 8px)}.lobby-header{padding:0}.lobby-header-main{align-items:flex-start}.lobby-header-actions{align-items:flex-end;flex-direction:column}.companion-download-compact{padding:7px 9px;font-size:.54rem}.lobby-grid{grid-template-columns:1fr}.schedule-card{grid-row:auto}.section-card{padding:22px}.section-heading{display:block}.section-heading p{margin-top:10px}.time-slots{grid-template-columns:repeat(6,minmax(0,1fr))}.day-tabs{gap:3px}.day-tab{padding:8px 1px}.day-tab span{font-size:.54rem}.week-card{grid-column:auto}.background{background-position:50% top}.background::after{background:linear-gradient(180deg,rgba(1,10,19,.02),rgba(1,10,19,.3))}.day-timeline{overflow-x:hidden}.timeline-axis,.availability-lane{grid-template-columns:58px minmax(0,1fr)}.timeline-axis{padding:8px 7px 4px;font-size:.48rem}.timeline-axis>b{font-size:.43rem}.timeline-axis span{letter-spacing:-.04em}.availability-lanes{width:auto;padding:0 7px 10px}.availability-lane{min-height:23px}.availability-lane>strong{padding-right:5px;font-size:.55rem}.availability-track{height:13px}.availability-track::after{top:6px}.availability-track i{height:5px}.availability-track i::before,.availability-track i::after{width:5px;height:5px;border-width:1px} }
@media (max-width:760px) {
  html,body { width:100%; max-width:100%; overflow-x:clip; }
  main,.view,.lobby-view,.lobby-header,.app-tabs,.tab-panel,.lobby-grid,.section-card { width:100%; max-width:100%; min-width:0; }
  .lobby-grid>* ,.player,.player-name-line,.overlap-item { min-width:0; }
  .time-slots { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .day-tabs { grid-template-columns:repeat(7,minmax(0,1fr)); }
  .week-calendar { grid-template-columns:minmax(0,1fr); }
  .manco-ranking { grid-template-columns:minmax(0,1fr); }
  .shared-game-banner { grid-template-columns:minmax(0,1fr); gap:18px; padding:22px 18px; }
  .shared-player { grid-template-columns:34px minmax(0,1fr) auto; padding:8px; }
  .shared-avatar { width:34px; height:34px; }
  .shared-player>b { font-size:.7rem; }
  .slot,.day-tab,.week-day { min-width:0; }
  .slot small { overflow-wrap:anywhere; }
  .has-tooltip::after { max-width:calc(100vw - 36px); }
  .app-tab { padding:12px 5px; font-size:.61rem; letter-spacing:.04em; }
  .app-tabs { display:grid; grid-template-columns:1fr 1fr; }
  .availability-card { padding:14px; }.availability-card .section-heading { margin-bottom:9px; }.availability-card .section-heading p { margin-top:5px; font-size:.64rem; }.availability-card .day-tab { padding:5px 1px; }.availability-card .selected-day-label { font-size:.76rem; }
  .live-game-popup { right:10px; bottom:10px; width:calc(100vw - 20px); }.live-game-players { max-height:38vh; }
  .live-game-stage { margin-top:12px; padding:15px 12px; }.live-stage-header { align-items:flex-start; }.live-stage-header h2 { font-size:1.05rem; }.live-stage-player,.live-stage-player.no-live-stats { grid-template-columns:48px minmax(0,1fr) auto; gap:9px; min-height:66px; padding:8px; }.live-stage-champion { width:48px; height:48px; }.live-stage-kda { grid-column:2; }.live-stage-stat { align-self:end; }.live-stage-player>.desktop-live-badge { position:absolute; right:8px; top:8px; }.live-stage-missing { grid-column:2/-1; text-align:left; }.live-stage-note { text-align:left; }
  .live-game-outcome { min-height:350px; margin:-15px -12px; }.live-game-outcome svg { width:125px; }
  .shared-game>header { align-items:flex-start; flex-direction:column; gap:4px; }.match-teams { grid-template-columns:1fr; }.match-team+ .match-team { border-top:1px solid rgba(120,90,40,.38); }
  .shared-games { grid-template-columns:minmax(0,1fr); }.match-history { display:flex; max-height:none; overflow-x:auto; scroll-snap-type:x proximity; }.match-summary { min-width:170px; border-bottom:0; border-left:0; border-right:1px solid rgba(120,90,40,.24); border-top:3px solid transparent; scroll-snap-align:start; }.match-summary.active { border-top-color:var(--summary-result); border-left:0; }
  .top-manco-card { padding:14px; }.top-manco-card .section-heading p { display:none; }
  .lobby-header-main { align-items:flex-start; padding:14px 16px; flex-direction:column; gap:10px; }.clash-notice { padding:10px 16px; }.collapsible-manco-card .manco-ranking { grid-template-columns:minmax(0,1fr); }
}
.post-game-report { --report-result:#b44755; }
.post-game-report.victory { --report-result:#0ac8b9; }
.report-result { position:relative; display:flex; align-items:center; justify-content:center; gap:18px; min-height:118px; overflow:hidden; margin:-8px -8px 18px; padding:14px 24px; border:1px solid color-mix(in srgb,var(--report-result) 58%,#c89b3c); background:radial-gradient(circle at 38% 50%,color-mix(in srgb,var(--report-result) 25%,transparent),transparent 32%),linear-gradient(110deg,color-mix(in srgb,var(--report-result) 14%,#071a20),rgba(1,10,19,.96)); box-shadow:inset 0 0 38px rgba(0,0,0,.44),0 8px 26px rgba(0,0,0,.25); isolation:isolate; }
.report-result::before { content:""; position:absolute; inset:-100%; z-index:-1; opacity:.13; background:repeating-conic-gradient(from 0deg,transparent 0 11deg,var(--report-result) 11deg 12deg,transparent 12deg 25deg); animation:outcome-turn 55s linear infinite; }
.report-result::after { content:""; position:absolute; inset:auto 12% 0; height:1px; background:linear-gradient(90deg,transparent,var(--report-result),#d6b85d,var(--report-result),transparent); box-shadow:0 0 13px var(--report-result); }
.report-result img { width:94px; height:94px; flex:none; object-fit:contain; filter:drop-shadow(0 0 16px color-mix(in srgb,var(--report-result) 58%,transparent)); }
.report-result>div { display:grid; gap:5px; }
.report-result span { color:#a09b8c; font-size:.57rem; font-weight:900; letter-spacing:.2em; }
.report-result strong { color:var(--report-result); font-family:Cinzel,serif; font-size:clamp(1.8rem,5vw,3rem); letter-spacing:.13em; line-height:1; text-shadow:0 2px #000,0 0 20px color-mix(in srgb,var(--report-result) 36%,transparent); }
.post-game-report-shell { margin:-22px; padding:22px; background:radial-gradient(circle at 15% 0,rgba(10,200,185,.12),transparent 38%),rgba(1,10,19,.96); }.post-game-report>header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(200,155,60,.35); }.post-game-report>header span { color:var(--blue); font-size:.6rem; font-weight:900; letter-spacing:.16em; }.post-game-report>header h2 { margin:4px 0 0; color:var(--gold-light); font-family:Cinzel,serif; font-size:1.25rem; }.post-game-report>header small { color:var(--muted); }.report-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:16px; align-items:start; }.report-map { border:1px solid rgba(200,155,60,.4); padding:8px; background:#071a20; }.report-map svg { display:block; width:100%; aspect-ratio:1; }.report-map .map-river { fill:none; stroke:rgba(60,160,185,.38); stroke-width:11; }.report-map .map-lane { fill:none; stroke:rgba(200,185,135,.2); stroke-width:4; }.report-map polyline.route-line { fill:none; stroke:var(--player-color); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:.1 4; opacity:.9; filter:drop-shadow(0 0 2px var(--player-color)); }.report-map circle { fill:var(--player-color); stroke:#fff; stroke-width:.6; }.report-map circle.route-start { fill:#071a20; stroke:var(--player-color); stroke-width:1.2; }.report-map circle.route-end { stroke-width:.9; filter:drop-shadow(0 0 2px var(--player-color)); }.report-map>small { display:block; margin-top:7px; color:#777; font-size:.54rem; text-align:right; }.report-map-legend { display:flex; gap:8px 12px; margin-top:8px; flex-wrap:wrap; }.report-map-legend span { color:#bbb; font-size:.58rem; }.report-map-legend i,.report-player>header>i { display:inline-block; width:8px; height:8px; margin-right:4px; border-radius:50%; background:var(--player-color); box-shadow:0 0 6px var(--player-color); }.report-players { display:grid; gap:8px; }.report-player { border:1px solid rgba(160,155,140,.18); padding:9px 10px; background:rgba(5,20,26,.8); }.report-player>header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:5px; }.report-player>header>div strong,.report-player>header>div small { display:block; }.report-player>header strong { color:#fff; font-size:.75rem; }.report-player>header small { color:var(--muted); font-size:.56rem; }.report-player>header>b { color:var(--gold-light); font-family:Cinzel,serif; font-size:.73rem; }.report-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:8px; }.report-stats span { min-width:0; border-left:1px solid rgba(200,155,60,.2); padding-left:6px; }.report-stats small,.report-stats b { display:block; }.report-stats small { overflow:hidden; color:#737873; font-size:.46rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; }.report-stats b { margin-top:3px; color:#d7d4c8; font-size:.67rem; }.report-badges { display:flex; gap:4px; margin-top:7px; flex-wrap:wrap; }.report-badges em { border:1px solid rgba(200,155,60,.45); border-radius:999px; padding:2px 6px; color:var(--gold-light); background:rgba(200,155,60,.08); font-size:.5rem; font-style:normal; font-weight:800; }.report-player>p { margin:6px 0 0; color:#d87575; font-size:.56rem; }
@media (max-width:760px) { .post-game-report-shell { margin:-15px -12px; padding:14px 12px; }.report-result { justify-content:flex-start; gap:10px; min-height:96px; padding:10px 12px; }.report-result img { width:72px; height:72px; }.report-result strong { font-size:1.55rem; }.report-layout { grid-template-columns:minmax(0,1fr); }.report-stats { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:8px; } }
.report-map polyline.route-line { stroke-linecap:butt; stroke-dasharray:4 2.5; }
.report-map circle.heat-point { opacity:.12; stroke:none; }
.live-empty-state { margin-top:18px; padding:52px 24px; text-align:center; }.live-empty-state h2 { margin:10px 0 8px; color:var(--gold-light); font-family:Cinzel,serif; font-size:1.25rem; }.live-empty-state p { max-width:620px; margin:0 auto; color:var(--muted); font-size:.74rem; line-height:1.6; }