/* PredictDL analytics theme. Reuses the visual language of the original home,
   hero and player pages: Cinzel headlines, square corners, amber/emerald
   accents, stone panels, and the site's animated city background. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Space+Grotesk:wght@400;500;700&family=Share+Tech+Mono&display=swap');
/* Local aliases keep exported canvases independent of Google Fonts loading. */
@font-face {font-family:CaptureCinzel;src:url('/static/fonts/Cinzel.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face {font-family:CaptureMono;src:url('/static/fonts/ShareTechMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root {
  --primary:#00d48a;
  --soul-amber:#f59e0b;
  --deadlock-dark:#0c0d10;
  --blue:#75aafc;
  --scrollbar-track:#101216;
  --scrollbar-thumb:color-mix(in srgb,var(--profile-hero-accent,var(--soul-amber)) 30%,#45464d);
}
/* Match the dark panels; player pages inherit their hero's accent. */
* {scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
::-webkit-scrollbar {width:10px;height:10px}
::-webkit-scrollbar-track {background:var(--scrollbar-track)}
::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border:2px solid var(--scrollbar-track);
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover {
  background:color-mix(in srgb,var(--profile-hero-accent,var(--soul-amber)) 50%,#62636b);
}
::-webkit-scrollbar-corner {background:var(--scrollbar-track)}
@media (forced-colors:active) {
  * {scrollbar-color:auto}
}
.logo-font,.display {font-family:'Cinzel',serif;letter-spacing:.05em}
.mono-font,.mono {font-family:'Share Tech Mono',monospace}
/* Navbar is used on the homepage as well as the two redesigned views. */
.site-nav {isolation:isolate}
.site-nav a:focus-visible {outline:2px solid var(--soul-amber);outline-offset:4px}
@media(max-width:767px) {
  .site-nav__inner {flex-wrap:wrap;row-gap:12px}
  .site-nav__links {order:3;width:100%;justify-content:space-around;margin:0;gap:10px;padding-top:8px;border-top:1px solid #252525;font-size:10px}
  .site-nav__login {margin-left:auto;padding:9px 13px}
}
@media(max-width:359px) {
  .site-nav .logo-font {font-size:1.1rem}
  .site-nav__login {padding:7px 9px}
}
body.analytics-page {
  font-family:'Space Grotesk',system-ui,sans-serif;
  background-color:var(--deadlock-dark);
  background-image:linear-gradient(180deg,rgba(12,13,16,.83) 0%,rgba(20,21,26,.94) 48%,rgba(12,13,16,.99) 100%),url('/static/images/background-lite.webp');
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
  min-height:100vh;
}
/* No animation for readers who explicitly request reduced motion. */
@media(prefers-reduced-motion:reduce) {
  body.analytics-page {background-image:linear-gradient(180deg,rgba(12,13,16,.83),rgba(12,13,16,.99)),url('/static/images/background.png')}
  .match-card,.leader-row {transition:none!important;transform:none!important}
}
.panel,.match-card {
  position:relative;
  background:linear-gradient(135deg,rgba(24,26,32,.91),rgba(16,18,22,.96));
  border:2px solid rgba(245,158,11,.15);
  box-shadow:inset 0 0 20px rgba(0,0,0,.6),0 10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);
}
.panel::before,.match-card::before {
  content:'';position:absolute;pointer-events:none;z-index:1;
  left:-2px;top:-2px;width:10px;height:10px;
  border-top:2px solid var(--soul-amber);border-left:2px solid var(--soul-amber);
}
.panel::after,.match-card::after {
  content:'';position:absolute;pointer-events:none;z-index:1;
  right:-2px;bottom:-2px;width:10px;height:10px;
  border-right:2px solid var(--primary);border-bottom:2px solid var(--primary);
}
.panel--quiet {background:linear-gradient(135deg,rgba(18,20,25,.95),rgba(11,13,17,.97))}
.panel--highlight {border-color:rgba(245,158,11,.33)}
.section-kicker {font:700 11px/1.5 'Share Tech Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--soul-amber)}
.metric-label {font:500 10px/1.55 'Share Tech Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#8b8b91}
.amber {color:var(--soul-amber)}
.blue {color:var(--blue)}
/* Homepage metrics use amber figures and subtle separators rather than boxed tiles. */
.stat {background:rgba(9,10,13,.52);border:1px solid rgba(120,113,108,.23);box-shadow:inset 0 0 18px rgba(0,0,0,.25)}
.stat .metric-label+div {font-family:'Share Tech Mono',monospace;color:#fbbf24}
.live-dot {display:inline-block;width:8px;height:8px;background:var(--primary);box-shadow:0 0 0 3px rgba(0,212,138,.12);border-radius:50%;vertical-align:middle;animation:live-pulse 2.3s infinite}
@keyframes live-pulse {50%{opacity:.45}}
.tab {display:inline-flex;align-items:center;justify-content:center;min-height:38px;background:#0b0c0f;border:1px solid #44403c;color:#c0b9b2;padding:.65rem .95rem;font:700 11px/1.2 'Share Tech Mono',monospace;letter-spacing:.08em;text-transform:uppercase;transition:border-color .15s,background .15s,color .15s}
.tab:hover {color:#fff;border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.07)}
.tab.active {border-color:rgba(245,158,11,.8);background:rgba(245,158,11,.13);color:#fbbf24}
.control {display:block;width:100%;min-height:45px;background:#0b0c0f;color:#e7e5e4;border:1px solid #44403c;padding:11px 13px;font-size:13px;border-radius:0}
.control:disabled {opacity:.55;cursor:not-allowed}
.control:focus {border-color:var(--soul-amber);outline:none}
.action-button {min-height:44px;background:#f59e0b;color:#16110b;padding:11px 20px;font:700 11px/1.3 'Share Tech Mono',monospace;letter-spacing:.1em;text-transform:uppercase;border:1px solid #e09a08;transition:background .15s,box-shadow .15s}
.action-button:hover {background:#fbbf24;box-shadow:0 0 18px rgba(245,158,11,.14)}
.action-button--outline {background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.45);color:#fbbf24}
.action-button--outline:hover {background:rgba(245,158,11,.17)}
.pill {display:inline-flex;align-items:center;gap:4px;border:1px solid #44403c;background:#0c0d10;padding:4px 7px;font:10px/1.4 'Share Tech Mono',monospace;color:#b5b2af;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.match-card {transition:transform .2s,border-color .2s,box-shadow .2s;min-width:0}
.match-card:hover {transform:translateY(-2px);border-color:rgba(245,158,11,.46);box-shadow:inset 0 0 20px #0009,0 15px 36px #0009,0 0 20px rgba(245,158,11,.06)}
.match-card--featured {border-color:rgba(245,158,11,.36)}
.leader-row {border-top:1px solid rgba(120,113,108,.18);background:linear-gradient(90deg,rgba(20,22,28,.4),rgba(14,15,19,.55));transition:background .18s,box-shadow .18s}
.leader-row:hover {background:linear-gradient(90deg,rgba(36,31,26,.7),rgba(17,18,22,.8));box-shadow:inset 2px 0 var(--soul-amber)}
.leader-row td {vertical-align:middle}
.analytics-page input:focus-visible,.analytics-page select:focus-visible,.analytics-page button:focus-visible,.analytics-page a:focus-visible {outline:2px solid var(--soul-amber);outline-offset:3px}
.modal-backdrop {background:rgba(4,5,7,.88);backdrop-filter:blur(8px)}
.modal-backdrop .panel {background:linear-gradient(135deg,#1a1c22,#101216)}
.analytics-footer {background:rgba(5,6,8,.96);border-top:2px solid rgba(245,158,11,.1);margin-top:56px}
/* Large readable rows on desktop, no horizontal overflow on small phones. */
@media(max-width:640px) {
  .analytics-main {padding-top:22px}
  .match-card {padding:16px}
  .panel::before,.panel::after {width:8px;height:8px}
  .match-card .display {font-size:1rem}
}

/* Every page uses the same amber/stone select treatment. Native menu remains
   keyboard and assistive-technology accessible. */
select, .control:is(select) {
  color-scheme: dark;
  -webkit-appearance:none;appearance:none;
  background-color:#111318!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23f59e0b' stroke-width='2'/%3E%3C/svg%3E")!important;
  background-size:12px 12px!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  border:1px solid #57534e!important;
  color:#e7e5e4!important;
  border-radius:0!important;
  padding:10px 34px 10px 12px!important;
  min-height:39px;
  font:600 12px 'Share Tech Mono',monospace;
  cursor:pointer;
}
select:hover {border-color:#d97706!important}
select:focus-visible {outline:2px solid #f59e0b;outline-offset:2px}
select:disabled {opacity:.5;cursor:not-allowed}
select option,select optgroup {background:#15171b;color:#e7e5e4}
.site-nav__inner {gap:12px}
.site-nav__links {flex-shrink:0;gap:clamp(8px,2vw,28px);white-space:nowrap}
@media(max-width:1050px){.site-nav__search {display:none!important}}
@media(max-width:767px){.site-nav__inner{gap:8px;flex-wrap:wrap}.site-nav__links{order:3;width:100%;margin:0;justify-content:space-between;overflow-x:auto;padding:3px 0 4px}.site-nav__account{margin-left:auto}.site-nav__username{max-width:85px}}