/* Layout of the global shell; colors, type and shared controls use the canonical tokens. */
:root { color-scheme: dark; --bg:var(--bg-canvas); --surface:var(--bg-surface); --raised:var(--bg-card); --line:var(--border-subtle); --text:var(--text-primary); --muted:var(--text-secondary); --font:var(--font-sans); }
body { background:var(--bg-canvas); }
html { scroll-padding-top:145px; }
.portal-header { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border-subtle); background:color-mix(in srgb, var(--bg-surface) 88%, transparent); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.portal-bar { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:85px; }
.portal-brand { display:flex; align-items:center; gap:14px; }
.portal-logo { width:54px; height:54px; object-fit:contain; }
.portal-brand strong { display:block; font-size:24px; letter-spacing:.08em; }
.portal-kicker { color:var(--text-secondary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; }
.portal-season-control { display:flex; align-items:center; gap:12px; margin-left:auto; }
.portal-season-control .input { min-width:225px; }
.portal-status { color:var(--status-success); background:var(--status-success-bg); border:1px solid var(--status-success); border-radius:var(--radius-full); padding:4px 10px; font-size:11px; white-space:nowrap; }
.season-finished { color:var(--text-secondary); background:var(--bg-card); border-color:var(--border-light); }
.portal-utilities { display:flex; align-items:center; gap:18px; color:var(--text-secondary); font-size:12px; }
.portal-utilities a:hover { color:var(--color-hud-cyan); }
.portal-nav { display:flex; gap:24px; overflow-x:auto; scrollbar-width:thin; }
.portal-tab { background:none; border:0; border-bottom:2px solid transparent; padding:15px 0; font-size:12px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.portal-tab:hover { color:var(--text-primary); }
.portal-tab[aria-pressed="true"] { color:var(--color-hud-cyan); border-color:var(--color-hud-cyan); }
.portal-tab:disabled { opacity:.5; cursor:not-allowed; }
.portal-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:40px 0 22px; }
.portal-heading h1 { font-size:clamp(36px, 5vw, 54px); margin:8px 0; }
.portal-heading p { color:var(--text-secondary); }
.portal-sync-group { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.portal-sync-group small { color:var(--text-secondary); font-size:10px; }
.portal-feedback { border-left:2px solid var(--color-hud-cyan); background:var(--status-info-bg); padding:10px 14px; margin-bottom:28px; color:var(--text-secondary); font-size:12px; }
.portal-error { border-color:var(--status-warning); background:var(--status-warning-bg); }
.portal-podium { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; align-items:end; margin:34px 0 38px; }
.portal-podium-card { padding:22px; min-height:285px; }
.portal-podium-card:first-child { grid-column:2; grid-row:1; min-height:315px; }
.portal-podium-card:nth-child(2) { grid-column:1; grid-row:1; }
.podium-top { display:flex; align-items:center; justify-content:space-between; }
.podium-rank { font-size:40px; color:var(--text-primary); }
.podium-1st .podium-rank, .podium-1st .podium-score strong { color:var(--color-faceit-orange); }
.portal-knife { display:block; width:100%; height:70px; object-fit:contain; margin:5px 0 10px; }
.portal-podium-card:first-child .portal-knife { height:90px; }
.portal-player { display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--text-primary); }
.portal-player:hover { color:var(--color-hud-cyan); }
.portal-avatar { width:32px; height:32px; border-radius:var(--radius-full); border:1px solid var(--border-light); object-fit:cover; background:var(--bg-elevated); flex-shrink:0; }
.portal-podium-card .portal-player { font-size:18px; }
.podium-details { display:flex; align-items:center; gap:10px; margin:12px 0; color:var(--text-secondary); font-size:11px; }
.podium-score { display:flex; align-items:baseline; gap:10px; }
.podium-score strong { font-size:40px; }
.podium-score span { color:var(--text-secondary); font-size:10px; }
.podium-metrics { display:flex; justify-content:space-between; border-top:1px solid var(--border-subtle); padding-top:12px; margin-top:12px; font-size:11px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.podium-metrics b { color:var(--text-primary); margin-left:4px; }
.portal-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; }
.portal-section-heading p { color:var(--text-secondary); font-size:12px; }
.portal-filters { display:flex; flex-wrap:wrap; gap:14px; align-items:center; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-xl); background:var(--bg-surface); margin-bottom:18px; }
.portal-search { flex:1; min-width:180px; }
.portal-search .input { padding-left:38px; background-image:url('../assets/icons/search.svg'); background-repeat:no-repeat; background-position:12px center; background-size:16px; }
.portal-pot-select { min-width:135px; }
.portal-toggle { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text-secondary); cursor:pointer; }
.portal-toggle input { accent-color:var(--color-hud-cyan); width:18px; height:18px; }
.portal-table { margin-bottom:40px; }
.portal-table table { min-width:1320px; }
.portal-table th button { padding:0; border:0; background:none; color:inherit; text-transform:inherit; font:inherit; letter-spacing:inherit; white-space:nowrap; }
.portal-table th[aria-sort="ascending"], .portal-table th[aria-sort="descending"] { color:var(--color-hud-cyan); }
.portal-table td { font-variant-numeric:tabular-nums; white-space:nowrap; }
.portal-table tbody tr { transition:transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); }
.portal-table tbody tr:hover { transform:translateY(-2px); background:var(--bg-card-hover); box-shadow:0 0 15px var(--color-primary-glow); }
.portal-table td.portal-points { color:var(--color-faceit-orange); font-weight:700; }
.portal-paid { color:var(--status-success); font-size:11px; }
.portal-pending { color:var(--status-warning); font-size:11px; }
.portal-empty { padding:45px 20px; border:1px dashed var(--border-light); border-radius:var(--radius-xl); text-align:center; color:var(--text-secondary); margin-bottom:40px; }
.portal-maps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-bottom:38px; }
.portal-map { min-height:190px; padding:18px; background-size:cover; background-position:center; display:flex; flex-direction:column; justify-content:flex-end; }
.portal-map-label { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-primary); margin-bottom:auto; }
.most-played { color:var(--color-faceit-orange); font-weight:700; }
.portal-map > div:not(.portal-map-track) { display:flex; justify-content:space-between; align-items:baseline; }
.portal-map h3 { font-size:28px; }
.portal-map strong { font-size:22px; }
.portal-map strong small { font-size:12px; }
.portal-map p { font-size:11px; color:var(--text-secondary); margin:6px 0 12px; }
.portal-map-track { height:3px; background:var(--border-light); }
.portal-map-track span { display:block; height:100%; background:var(--color-hud-cyan); }
.portal-heatmap-card { padding:24px; margin-bottom:40px; }
.portal-heatmap-scroll { overflow-x:auto; padding:6px 0; }
.portal-heatmap { display:grid; grid-template-columns:48px repeat(24, minmax(22px, 1fr)); gap:5px; min-width:760px; }
.heatmap-hour, .heatmap-day { color:var(--text-secondary); font-size:10px; font-variant-numeric:tabular-nums; align-self:center; }
.heatmap-hour { text-align:center; }
.heatmap-cell { min-height:24px; border:1px solid var(--border-subtle); border-radius:4px; background:color-mix(in srgb, var(--color-hud-cyan) calc(var(--heat) * 100%), var(--bg-surface)); }
.heatmap-cell:hover, .heatmap-cell:focus-visible { border-color:var(--text-primary); }
.heatmap-legend { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:16px; color:var(--text-secondary); font-size:10px; }
.heatmap-legend i { width:16px; height:16px; background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:3px; }
.heatmap-legend i:nth-of-type(2) { background:color-mix(in srgb, var(--color-hud-cyan) 35%, var(--bg-surface)); }
.heatmap-legend i:nth-of-type(3) { background:color-mix(in srgb, var(--color-hud-cyan) 65%, var(--bg-surface)); }
.heatmap-legend i:nth-of-type(4) { background:var(--color-hud-cyan); }
.portal-footer { display:flex; justify-content:space-between; gap:16px; padding:24px 0; border-top:1px solid var(--border-subtle); color:var(--text-secondary); font-size:11px; }
@media (max-width:1000px) { .portal-bar { flex-wrap:wrap; gap:12px; padding:14px 0; } .portal-utilities { width:100%; } .portal-nav { gap:20px; } .portal-maps { grid-template-columns:repeat(3, minmax(0, 1fr)); } .podium-metrics { flex-wrap:wrap; gap:8px; } }
@media (max-width:680px) {
  .portal-header .shell, .portal-main.shell { width:calc(100% - 32px); }
  .portal-bar { gap:16px; } .portal-brand { flex:1; } .portal-brand strong { font-size:22px; }
  .portal-season-control { margin:0; width:100%; } .portal-season-control label { flex:1; } .portal-season-control .input { min-width:0; }
  .portal-utilities { gap:16px; flex-wrap:wrap; } .portal-tab { padding:12px 0; }
  .portal-heading { padding:28px 0 20px; flex-direction:column; align-items:flex-start; gap:16px; }
  .portal-sync-group { align-items:flex-start; } .portal-heading h1 { font-size:38px; }
  .portal-podium { grid-template-columns:1fr; margin:24px 0; gap:14px; }
  .portal-podium-card:first-child, .portal-podium-card:nth-child(2) { grid-column:auto; grid-row:auto; min-height:0; }
  .portal-podium-card { min-height:0; } .portal-knife, .portal-podium-card:first-child .portal-knife { height:65px; }
  .portal-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .portal-maps { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } .portal-map { padding:14px; min-height:180px; }
  .portal-map h3 { font-size:24px; } .portal-map strong { font-size:18px; }
  .portal-filters { gap:12px; } .portal-search { flex-basis:100%; } .portal-pot-select { flex:1; }
  .portal-heatmap-card { padding:16px; } .portal-footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .portal-main *, .portal-nav * { transition:none !important; transform:none !important; } }