:root{
    --bg:            #030812;
    --bg-alt:        #050c1a;
    --panel:         #0a1626;
    --panel-2:       #07101d;
    --line:          #16293f;
    --line-bright:   #2c5578;
    --text:          #e4edf7;
    --text-dim:      #7f97ad;
    --text-faint:    #6d849b;
    --easy:          #3ea6ff;
    --easy-bright:   #8fddff;
    --easy-dim:      #0f2c47;
    --legendary:     #ff4655;
    --legendary-dim: #3a0f14;
    --gold:          #ffcf5c;
    --danger:        #ff5c5c;
    --motion:        #6dffb0;
    --motion-dim:    #0c3323;
  }

  /* ============ SCALE UP FOR LARGER DISPLAYS ============
     Fixed px sizing throughout this sheet was tuned for ~1080p. On bigger,
     higher-res monitors the fixed max-width + fixed px fonts end up
     reading small relative to the screen, so bump the whole page uniformly
     at wider breakpoints rather than hand-tuning every font-size. */
  @media (min-width: 1600px){
    body{ zoom: 1.15; }
  }
  @media (min-width: 2200px){
    body{ zoom: 1.3; }
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  /* Themed scrollbars everywhere a container scrolls (the history modal's
     long record tables, search results, the Recently Broken dropdown, Past
     Explorer's date pickers, the modal overlay itself) -- otherwise these
     show the browser's stock light-gray scrollbar against this dark theme.
     scrollbar-color/-width are inherited, so setting them once on html
     covers every descendant; the ::-webkit-scrollbar rules need the
     universal selector since WebKit doesn't inherit those. */
  html{
    scrollbar-width: thin;
    scrollbar-color: var(--line-bright) var(--panel-2);
  }
  *::-webkit-scrollbar{ width:9px; height:9px; }
  *::-webkit-scrollbar-track{ background:var(--panel-2); }
  *::-webkit-scrollbar-thumb{
    background-color:var(--line-bright);
    border:2px solid var(--panel-2);
  }
  *::-webkit-scrollbar-thumb:hover{ background-color:var(--easy); }
  *::-webkit-scrollbar-corner{ background:var(--panel-2); }

  body{
    background:
      radial-gradient(ellipse 1200px 700px at 50% -10%, #0f2038 0%, transparent 60%),
      radial-gradient(ellipse 900px 500px at 90% 100%, #0a1930 0%, transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Rajdhani',sans-serif;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    background:linear-gradient(180deg, transparent 0%, rgba(62,166,255,0.035) 50%, transparent 100%);
    background-size:100% 6px;
    pointer-events:none;
    z-index:1;
    opacity:0.5;
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }

  /* ============ HEX MEDAL BADGES (Halo 3 medal-inspired) ============ */
  .hex-chip{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:28px; height:24px; padding:0 5px;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px;
    color:var(--easy); background:var(--easy-dim); border:1px solid var(--line-bright);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition:box-shadow 0.2s ease;
  }
  .hex-chip.gold{
    color:#04101c; background:var(--gold); border-color:var(--gold);
    box-shadow:0 0 9px rgba(255,207,92,0.55);
  }
  .hex-chip.empty{ color:var(--text-faint); background:var(--panel-2); border-color:var(--line); }

  /* rank-chip: top-3 leaderboard position badges. Separate from .hex-chip
     since that class's "gold" already means something else (5+ current WRs) */
  .rank-chip{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:24px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border:1px solid var(--line-bright);
  }
  .rank-chip .rank-star{ width:13px; height:13px; }
  .rank-chip.rank-1{ background:var(--gold); border-color:var(--gold); color:#04101c; box-shadow:0 0 9px rgba(255,207,92,0.55); }
  .rank-chip.rank-2{ background:#c9d6e3; border-color:#c9d6e3; color:#04101c; box-shadow:0 0 7px rgba(201,214,227,0.4); }
  .rank-chip.rank-3{ background:#c9803f; border-color:#c9803f; color:#04101c; box-shadow:0 0 7px rgba(201,128,63,0.4); }
  .rank-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:24px; font-family:'JetBrains Mono',monospace;
    font-size:12px; color:var(--text-faint);
  }
  th.rank-cell, td.rank-cell{ text-align:center; width:50px; }

  /* ============ WAYPOINT DIAMOND MARKERS ============ */
  .waypoint{
    display:inline-block; width:6px; height:6px; margin-right:8px;
    background:var(--easy); transform:rotate(45deg); flex-shrink:0;
    box-shadow:0 0 6px rgba(62,166,255,0.6);
  }

  /* ============ FAINT HEX-GRID TEXTURE ============ */
  .hex-grid-bg{ position:relative; }
  .hex-grid-bg::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    opacity:0.05;
    background-image:
      linear-gradient(30deg, var(--easy) 1px, transparent 1px),
      linear-gradient(150deg, var(--easy) 1px, transparent 1px),
      linear-gradient(30deg, var(--easy) 1px, transparent 1px),
      linear-gradient(150deg, var(--easy) 1px, transparent 1px);
    background-size:44px 76px;
    background-position:0 0, 0 0, 22px 38px, 22px 38px;
  }
  .hex-grid-bg > *{ position:relative; z-index:1; }

  /* ============ MOTION-TRACKER LIVE PULSE ============ */
  @keyframes motionPulse{
    0%{ box-shadow:0 0 0 0 rgba(109,255,176,0.55); }
    70%{ box-shadow:0 0 0 6px rgba(109,255,176,0); }
    100%{ box-shadow:0 0 0 0 rgba(109,255,176,0); }
  }
  .live-dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background:var(--motion); margin-right:7px;
    animation:motionPulse 2s infinite;
  }
  .chamfer{
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .chamfer-sm{
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }

  header{
    position:relative; z-index:3;
    padding:30px 24px 40px;
    text-align:center;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  header .beta-ribbon{
    position:absolute; top:26px; right:-42px; z-index:4;
    width:180px; padding:5px 0;
    text-align:center;
    transform:rotate(45deg);
    background:var(--gold); color:#04101c;
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; letter-spacing:0.3em;
    border-top:1px solid rgba(4,16,28,0.3); border-bottom:1px solid rgba(4,16,28,0.3);
    box-shadow:0 3px 12px rgba(0,0,0,0.4);
  }
  @media (max-width:520px){
    header .beta-ribbon{ top:16px; right:-46px; width:160px; font-size:10px; }
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    letter-spacing:0.35em;
    color:var(--easy-bright);
    text-transform:uppercase;
    margin-bottom:14px;
  }
  .eyebrow::before{ content:"// "; color:var(--text-faint); }
  h1{
    font-family:'Chakra Petch',sans-serif;
    font-weight:700;
    font-size:clamp(28px,5vw,52px);
    letter-spacing:0.06em;
    color:#eef6ff;
    text-shadow:0 0 22px rgba(62,166,255,0.28);
  }
  .subtitle{
    margin-top:12px;
    font-size:16px;
    color:var(--text-dim);
    letter-spacing:0.04em;
  }
  .subtitle strong{ color:var(--text); font-weight:600; }

  /* ============ TOP BANNER ============ */
  .top-banner{
    position:sticky; top:0; z-index:30;
    background:rgba(3,8,18,0.96);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-bright);
    border-top:2px solid var(--easy-bright);
  }
  .top-banner-inner{
    max-width:1280px; margin:0 auto; padding:10px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap;
  }
  .banner-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .banner-brand{
    background:transparent; border:none; cursor:pointer;
    font-family:'Chakra Petch',sans-serif; font-size:12.5px; letter-spacing:0.1em;
    color:var(--text-dim); padding:0; white-space:nowrap;
    transition:color 0.15s ease;
  }
  .banner-brand:hover{ color:var(--easy); }
  .banner-controls{ display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
  .banner-controls .search-wrap{ margin:0; max-width:300px; flex:1 1 220px; }
  .banner-link-btn{
    position:relative; overflow:hidden; display:inline-block;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
    background:transparent; border:1px solid var(--line-bright); color:var(--text-dim);
    padding:9px 14px; cursor:pointer; white-space:nowrap; text-decoration:none;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .banner-link-btn::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(62,166,255,0.22), rgba(62,166,255,0.04));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.28s ease; z-index:-1;
  }
  .banner-link-btn:hover::before{ transform:scaleX(1); }
  .banner-link-btn:hover{ border-color:var(--easy); color:var(--easy); }

  .donate-btn{
    position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; font-weight:700;
    background:transparent; border:1px solid var(--gold); color:var(--gold);
    padding:9px 14px; cursor:pointer; white-space:nowrap; text-decoration:none;
    transition:color 0.15s ease, box-shadow 0.15s ease;
  }
  .donate-btn::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(255,207,92,0.28), rgba(255,207,92,0.06));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.28s ease; z-index:-1;
  }
  .donate-btn:hover::before{ transform:scaleX(1); }
  .donate-btn:hover{ color:#ffe6a3; box-shadow:0 0 10px rgba(255,207,92,0.35); }
  .donate-icon{ flex-shrink:0; }

  nav.game-tabs{
    position:sticky; top:45px; z-index:10;
    display:flex; justify-content:center; gap:2px;
    background:rgba(5,12,26,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    padding:0 16px;
    flex-wrap:wrap;
  }
  .game-tab{
    font-family:'Chakra Petch',sans-serif;
    font-size:13px;
    letter-spacing:0.08em;
    background:transparent;
    color:var(--text-dim);
    border:none;
    padding:18px 22px 15px;
    cursor:pointer;
    position:relative;
    transition:color 0.2s ease;
    clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  .game-tab::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(62,166,255,0.22), rgba(62,166,255,0.04));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.28s ease;
    z-index:-1;
  }
  .game-tab:hover::before{ transform:scaleX(1); }
  .game-tab:hover{ color:var(--text); box-shadow:inset 0 2px 0 0 var(--line-bright); }
  .game-tab.active{ color:var(--easy-bright); box-shadow:inset 0 2px 0 0 var(--easy); }
  .game-tab.active::after{
    content:"";
    position:absolute; left:14%; right:14%; bottom:0; height:2px;
    background:var(--easy-bright);
    box-shadow:0 0 10px rgba(62,166,255,0.7);
  }
  .game-tab .tab-index{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    color:var(--text-faint);
    display:block;
    letter-spacing:0.1em;
    margin-bottom:4px;
  }

  main{ max-width:1280px; margin:0 auto; padding:26px 20px 100px; position:relative; z-index:3; }
  .game-panel{ display:none; animation:fadeIn 0.35s ease; }
  .game-panel.active{ display:block; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  .game-meta{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px;
    margin-bottom:34px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
  }
  .game-title-group{ display:flex; align-items:center; gap:14px; }
  .game-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:50px; height:50px; flex-shrink:0;
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:21px;
    color:var(--easy-bright); background:var(--easy-dim);
    border:1px solid var(--line-bright);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  .game-meta h2{
    font-family:'Chakra Petch',sans-serif;
    font-size:22px;
    letter-spacing:0.04em;
    color:#eef6ff;
  }
  .game-meta .platform-tag{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--text-faint);
    text-transform:uppercase;
  }

  /* ============ GLOBAL STATS STRIP (overview page) ============ */
  .global-stats{
    display:grid; grid-template-columns:repeat(6, 1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line); margin:28px 0 34px;
  }
  .gstat{
    grid-column:span 2;
    background:var(--panel); padding:16px 18px; border-top:2px solid var(--line-bright);
    display:flex; flex-direction:column; gap:4px; justify-content:center;
  }
  .gstat-wide{ grid-column:span 3; }
  .gstat-value{
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:26px;
    color:var(--easy-bright); letter-spacing:0.02em; line-height:1;
  }
  .gstat-label{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em;
    color:var(--text-faint); text-transform:uppercase;
  }
  .gstat-wide .gstat-label{ margin-bottom:2px; }
  .gstat-wide .gstat-value{ font-size:20px; color:var(--gold); }
  .gstat-detail{
    font-family:'Rajdhani',sans-serif; font-size:12.5px; color:var(--text-dim);
    margin-top:2px;
  }
  .gstat-clickable{ cursor:pointer; transition:background 0.15s ease; }
  .gstat-clickable:hover{ background:rgba(255,207,92,0.07); }
  @media (max-width:760px){
    .global-stats{ grid-template-columns:1fr; }
    .gstat, .gstat-wide{ grid-column:1 / -1; }
  }

  /* ============ ON THIS DAY ============ */
  .otd-section{
    margin-top:28px; border:1px solid var(--line); border-top:2px solid var(--gold);
    background:var(--panel);
  }
  .otd-head{
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.12em;
    color:var(--gold); border-bottom:1px solid var(--line);
  }
  .otd-head .waypoint{
    background:var(--gold); box-shadow:0 0 6px rgba(255,207,92,0.6); margin-right:0;
  }
  .otd-list{ display:flex; flex-direction:column; }
  .otd-item{
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    border-bottom:1px solid var(--line); transition:background 0.15s ease;
  }
  .otd-item:last-child{ border-bottom:none; }
  .otd-item:hover{ background:rgba(255,207,92,0.07); }
  .otd-item-main{
    display:flex; align-items:center; gap:16px; flex:1; min-width:0; cursor:pointer;
  }
  .otd-year{
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:20px; color:var(--gold);
    min-width:52px; text-align:center; flex-shrink:0;
  }
  .otd-main{ min-width:0; }
  .otd-label{ font-size:14px; color:var(--text); font-weight:600; }
  .otd-meta{
    font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim); margin-top:2px;
  }
  .otd-meta .runner-link:hover{ color:var(--gold); }
  .otd-timewarp{
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    padding:7px 10px; background:var(--panel-2); border:1px solid var(--line-bright);
    color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em;
    cursor:pointer; transition:all 0.15s ease;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }
  .otd-timewarp svg{ width:13px; height:13px; flex-shrink:0; }
  .otd-timewarp:hover{ color:var(--gold); border-color:var(--gold); background:rgba(255,207,92,0.08); }
  .otd-timewarp span{ white-space:nowrap; }
  @media (max-width:560px){
    .otd-timewarp span{ display:none; }
    .otd-timewarp{ padding:8px; }
  }
  .otd-empty{
    padding:20px 16px; text-align:center; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace; font-size:12px;
  }

  .block-title{
    font-family:'Chakra Petch',sans-serif;
    font-size:14px;
    letter-spacing:0.12em;
    color:var(--text-dim);
    margin:38px 0 14px;
    display:flex; align-items:center; gap:12px;
  }
  .block-title::before{
    content:""; display:inline-block; width:7px; height:7px;
    background:var(--easy); transform:rotate(45deg); flex-shrink:0;
    box-shadow:0 0 6px rgba(62,166,255,0.6);
  }
  .block-title::after{ content:""; flex:1; height:1px; background:var(--line); }
  .game-panel > .block-title:first-child{ margin-top:0; }
  .block-title span.num{ color:var(--text-faint); font-family:'JetBrains Mono',monospace; font-weight:400; }

  .table-wrap{
    background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--line-bright);
    margin-bottom:6px;
  }
  table{ width:100%; border-collapse:collapse; }
  thead th{
    text-align:left;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#a9c2d8;
    padding:8px 10px;
    border-bottom:1px solid var(--line-bright);
    background:var(--panel-2);
  }
  tbody td{
    padding:9px 10px;
    font-size:13.5px;
    border-bottom:1px solid var(--line);
    color:var(--text);
  }
  tbody tr:last-child td{ border-bottom:none; }
  /* subtle row banding so a row stays easy to track across many columns --
     placed before the hover rule below so hover (same specificity) still
     wins the cascade tie on even rows. */
  tbody tr.record-row:nth-child(even){ background:rgba(255,255,255,0.018); }
  tbody tr.record-row{ transition:background 0.15s ease, box-shadow 0.15s ease; }
  tbody tr.record-row:hover{
    background:rgba(62,166,255,0.07);
    box-shadow:inset 0 0 0 1px var(--easy);
  }
  tbody tr.no-data{ cursor:default; }

  td.record-cell{ cursor:pointer; transition:background 0.15s ease; }
  /* faint always-on difficulty tint across the whole Runner/Time/Date/History
     block, not just on hover -- reinforces "these 4 columns are one
     difficulty" all the way down a long table, not just at the header. */
  td.record-cell.easy{ background:rgba(62,166,255,0.03); }
  td.record-cell.legendary{ background:rgba(255,70,85,0.03); }
  td.record-cell.easy:hover, td.record-cell.easy.group-hover{ background:rgba(62,166,255,0.12); }
  td.record-cell.legendary:hover, td.record-cell.legendary.group-hover{ background:rgba(255,70,85,0.12); }

  td.time, td.date{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text); }
  .date-row{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:nowrap; }
  .date-text{ white-space:nowrap; }
  /* white-space:nowrap keeps the runner name from wrapping back under the
     difficulty emblem when the column is narrow -- overflow is handled by
     the .combined-wrap horizontal scroll instead */
  td.runner{ font-weight:600; font-size:13.5px; white-space:nowrap; }
  /* Full Campaign and Mission Records are separate <table> elements, so each
     one auto-sizes its first column independently -- a short game title next
     to long mission names left them misaligned. Fixed width + wrapping (not
     nowrap) keeps both tables' first column identical no matter what: a long
     mission name just wraps to a second line instead of growing the column
     (and therefore the whole table) wider than the page, which is what was
     causing an unwanted horizontal scrollbar on the sparser Full Campaign
     table once a long runner name/time landed in its other columns. */
  table.combined-table th:first-child,
  table.combined-table td.level-name{
    width:190px; min-width:190px; max-width:190px;
  }
  td.level-name{ color:var(--text); font-weight:600; white-space:normal; word-break:break-word; }
  /* Overview page's per-game summary rows only (see combinedRow's
     linkToGameTab branch) -- the whole Game-name cell is clickable to that
     game's tab, not just the text inside it, so the pointer cursor needs to
     apply to the cell's full padding box too. */
  td.level-name.goto-game-cell{ cursor:pointer; }
  table.campaign-table td.level-name{ text-align:center; }
  td.hist{ text-align:center; }

  /* keep Runner/Time/Date/History lined up under their centered sub-headers */
  table.combined-table .sub-header-row th{ text-align:center; }
  table.combined-table td.time,
  table.combined-table td.date,
  table.combined-table td.hist{ text-align:center; }

  /* difficulty emblem gets its own fixed-width column so it stays vertically
     aligned down the column regardless of runner-name length. The 3rd track
     is an empty spacer that mirrors the icon's width -- without it the name
     only centers within the leftover space *after* the icon, so it visually
     centers relative to the icon rather than the true cell/header center. */
  table.combined-table td.runner{
    display:grid; grid-template-columns:22px 1fr 22px; align-items:center; column-gap:8px;
  }
  table.combined-table td.runner .runner-link{
    grid-column:2; text-align:center;
  }
  table.combined-table td.runner.empty-cell{ display:flex; align-items:center; gap:8px; justify-content:center; }

  .level-link{
    cursor:pointer;
    border-bottom:1px dashed var(--line-bright);
    padding-bottom:1px;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .level-link:hover{ color:var(--text); border-color:var(--easy); }

  .time-link{
    color:var(--text); text-decoration:none; cursor:pointer;
    border-bottom:1px dashed var(--text-faint);
    padding-bottom:1px;
    transition:color 0.15s ease, border-color 0.15s ease;
    white-space:nowrap;
  }
  .time-link::before{ content:"\25B8"; color:var(--easy); font-size:9px; margin-right:5px; }
  .time-link:hover{ color:var(--easy); border-color:var(--easy); }

  .record-link{
    color:var(--easy); text-decoration:none; cursor:pointer;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.04em;
  }
  .record-link:hover{ text-decoration:underline; }

  .hist-chip{
    display:inline-flex; align-items:center;
    font-family:'JetBrains Mono',monospace;
    font-size:9px; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--easy);
    white-space:nowrap;
    cursor:pointer;
    padding:2px 6px;
    border:1px solid rgba(62,166,255,0.35);
    background:var(--easy-dim);
  }
  .hist-chip.none{ color:var(--text-faint); cursor:default; }
  .hist-chip:not(.none):hover{ text-decoration:underline; }
  td.record-cell.legendary .hist-chip{ color:var(--legendary); border-color:rgba(255,70,85,0.35); background:var(--legendary-dim); }

  /* sparkline history-icon variant of .hist-chip -- a real <button>, so reset UA defaults */
  .hist-chip.spark-chip{
    font:inherit; margin:0; line-height:0;
    padding:1px 4px;
    background:transparent; border-color:rgba(62,166,255,0.25);
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .hist-chip.spark-chip:hover{ text-decoration:none; background:var(--easy-dim); border-color:rgba(62,166,255,0.55); }
  td.record-cell.legendary .hist-chip.spark-chip{ border-color:rgba(255,70,85,0.25); background:transparent; }
  td.record-cell.legendary .hist-chip.spark-chip:hover{ background:var(--legendary-dim); border-color:rgba(255,70,85,0.55); }
  .spark-svg{ display:block; }

  .diff-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
    padding:4px 9px;
    border:1px solid transparent;
  }
  .diff-chip.easy{ color:var(--easy); background:var(--easy-dim); border-color:rgba(62,166,255,0.35); }
  .diff-chip.legendary{ color:var(--legendary); background:var(--legendary-dim); border-color:rgba(255,70,85,0.35); }
  .diff-chip.easy::before{ content:"\276F"; margin-right:5px; font-size:9px; }
  .diff-chip.legendary::before{ content:"\2620"; margin-right:5px; font-size:10px; }

  /* ============ ICON SPRITE ============ */
  .icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
  .diff-icon{ width:12px; height:12px; flex-shrink:0; vertical-align:middle; }
  .diff-icon.easy{ color:var(--easy-bright); }
  .diff-icon.legendary{ color:var(--legendary); }
  .emblem-tile{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; flex-shrink:0;
    border:1px solid var(--line-bright);
    vertical-align:middle;
  }
  .emblem-tile.easy{ background:var(--easy-dim); border-color:rgba(143,221,255,0.4); }
  .emblem-tile.legendary{ background:var(--legendary-dim); border-color:rgba(255,70,85,0.4); }
  .emblem-tile .diff-icon{ width:13px; height:13px; }

  /* ============ COMBINED TABLE (Easy + Legendary on one row) ============ */
  .combined-wrap{ overflow-x:auto; }
  table.combined-table{ border-spacing:0; }
  table.combined-table thead th{ padding:0; background:transparent; }

  /* whitespace gutters separating Mission | Easy | Legendary into distinct blocks.
     The Easy<->Legendary gutter specifically (.gutter-mid) also gets a thin
     vertical rule so that block boundary stays visible down the whole table,
     not just inferred from the header panels above. */
  th.gutter, td.gutter{
    width:14px; min-width:14px; max-width:14px;
    padding:0 !important; background:var(--bg) !important; border:none !important;
  }
  td.gutter-mid{ position:relative; }
  td.gutter-mid::after{
    content:""; position:absolute; top:0; bottom:0; left:50%;
    width:1px; background:var(--line);
  }

  /* diagonal-tab sub-panel headers -- inner wrapper carries the fill/clip, not the <th> itself */
  .header-panel{
    display:flex; align-items:center; justify-content:center; gap:6px;
    height:100%; padding:8px 14px 8px 10px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
    text-transform:uppercase; font-weight:700;
    clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
    border-top:2px solid transparent;
  }
  .header-panel.category{
    background:var(--panel-2); color:#cfe4f5; justify-content:flex-start;
    border-top-color:var(--line-bright);
  }
  .header-panel.easy{
    background:var(--easy-dim); color:var(--easy-bright);
    border-top-color:var(--easy);
  }
  .header-panel.legendary{
    background:var(--legendary-dim); color:var(--legendary);
    border-top-color:var(--legendary);
  }

  table.combined-table .sub-header-row th{
    padding:8px 10px; background:var(--panel-2);
    color:#a9c2d8; font-weight:600; border-bottom:1px solid var(--line-bright);
  }

  .empty-cell{ color:var(--text-faint); font-style:italic; }

  footer{
    text-align:center; padding:34px 20px 50px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px; letter-spacing:0.08em;
    color:var(--text-faint);
    border-top:1px solid var(--line);
  }
  footer span{ color:var(--easy); }

  /* ============ MODAL ============ */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(2,6,15,0.85);
    backdrop-filter:blur(3px);
    display:none; align-items:flex-start; justify-content:center;
    z-index:100; padding:5vh 16px 40px; overflow-y:auto;
  }
  .modal-overlay.open{ display:flex; }
  .modal-panel{
    background:var(--panel); border:1px solid var(--line-bright); border-top:2px solid var(--easy-bright);
    max-width:820px; width:100%;
    position:relative;
    animation:modalIn 0.22s ease;
    transition:max-width 0.2s ease;
  }
  .modal-panel.wide{ max-width:1060px; }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

  .modal-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:22px 24px 18px; border-bottom:1px solid var(--line);
  }
  .modal-head h3{
    font-family:'Chakra Petch',sans-serif; font-size:18px; letter-spacing:0.04em; color:#eef6ff;
  }
  .modal-head .modal-sub{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
    color:var(--text-faint); text-transform:uppercase; margin-top:6px;
  }
  .modal-close{
    background:transparent; border:1px solid var(--line-bright); color:var(--text-dim);
    width:30px; height:30px; font-size:16px; cursor:pointer; flex-shrink:0;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .modal-close:hover{ color:var(--danger); border-color:var(--danger); }

  /* Prev/next-run arrows -- pinned to the true viewport edges (not the modal
     panel), so they stay put regardless of panel width or scroll position.
     Only shown while viewing a record (not the history modal), and only
     enabled in whichever direction actually has an adjacent run. */
  .record-nav-arrow{
    display:none; align-items:center; justify-content:center;
    position:fixed; top:50%; transform:translateY(-50%);
    width:38px; height:38px; z-index:110;
    background:var(--panel); border:1px solid var(--line-bright); color:var(--text-dim);
    cursor:pointer; transition:color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  }
  .record-nav-arrow.visible{ display:flex; }
  .record-nav-arrow:hover{ color:var(--easy-bright); border-color:var(--easy); }
  .record-nav-arrow:disabled{ opacity:0.3; cursor:default; pointer-events:none; }
  .record-nav-arrow.prev{ left:16px; }
  .record-nav-arrow.next{ right:16px; }
  @media (max-width:760px){
    .record-nav-arrow{ width:32px; height:32px; }
    .record-nav-arrow.prev{ left:6px; }
    .record-nav-arrow.next{ right:6px; }
  }

  .modal-body{ padding:22px 24px 28px; }
  .chart-wrap{ margin-bottom:26px; }
  .chart-caption{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em;
    color:var(--text-faint); text-transform:uppercase; margin:0 0 14px; text-align:center;
  }

  .chart-toggle-row{ display:flex; justify-content:center; gap:10px; margin-bottom:6px; }
  circle.chart-dot{ cursor:pointer; }
  circle.chart-dot:hover{ r:5.5; }
  .chart-toggle{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
    background:transparent; border:1px solid var(--line-bright); color:var(--text-faint);
    padding:6px 12px; cursor:pointer; transition:all 0.15s ease; opacity:0.45;
  }
  .chart-toggle .diff-icon{ width:11px; height:11px; }
  .chart-toggle.active{ color:var(--text); border-color:var(--toggle-color); opacity:1; }
  .chart-toggle.active .diff-icon{ color:var(--toggle-color); }
  .chart-toggle:hover{ opacity:0.8; }
  .chart-toggle.active:hover{ opacity:1; }

  .history-subhead{
    display:flex; align-items:center; gap:8px; margin:22px 0 8px;
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:13px;
    letter-spacing:0.04em; color:var(--text-dim); text-transform:uppercase;
  }
  .history-subhead .diff-icon{ width:14px; height:14px; }
  .history-subhead.easy .diff-icon{ color:var(--easy); }
  .history-subhead.legendary .diff-icon{ color:var(--legendary); }
  .history-subhead:first-of-type{ margin-top:2px; }

  .history-columns{ display:flex; gap:20px; align-items:flex-start; }
  .history-col{ flex:1 1 0; min-width:0; }
  .history-col .history-table-wrap{ overflow-x:auto; }
  .history-col .history-subhead:first-of-type{ margin-top:2px; }
  @media (max-width:700px){
    .history-columns{ flex-direction:column; gap:0; }
  }

  .history-table-wrap{ border:1px solid var(--line); max-height:360px; overflow-y:auto; }
  .history-table-wrap table thead th{ position:sticky; top:0; }
  td.days-held{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--text-dim); }
  td.video-cell a{
    color:var(--easy); text-decoration:none; font-family:'JetBrains Mono',monospace; font-size:12px;
    letter-spacing:0.05em;
  }
  td.video-cell a:hover{ text-decoration:underline; }
  tr.current-row td{ background:rgba(255,207,92,0.06); }
  tr.current-row td.runner::before{ content:"\25C6 "; color:var(--gold); }

  /* ============ RECORD DETAIL (rendered inside the shared modal) ============ */
  .record-video-wrap{
    position:relative; width:100%; padding-top:56.25%; margin:0;
    background:#000; border:1px solid var(--line-bright); border-top:2px solid var(--easy-bright);
  }
  .record-video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .record-video-fallback{
    margin:8px 0 20px; text-align:center; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.03em;
  }
  .record-video-fallback a{ color:var(--easy); }
  .record-video-empty{
    padding:60px 20px; text-align:center; color:var(--text-faint);
    background:var(--panel-2); border:1px solid var(--line); margin:0 0 28px;
    font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.8;
  }
  .record-video-empty a{ color:var(--easy); }
  .record-info-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-bottom:28px;
  }
  .record-info-item{
    background:var(--panel); padding:14px 16px; border-top:2px solid var(--line-bright);
    display:flex; flex-direction:column; gap:4px;
  }
  .record-info-item .rii-label{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em;
    color:var(--text-faint); text-transform:uppercase;
  }
  .record-info-item .rii-value{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:16px; color:var(--text);
  }
  .record-links{ display:flex; gap:12px; flex-wrap:wrap; }
  .record-action-btn{
    position:relative; overflow:hidden;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
    background:transparent; border:1px solid var(--line-bright); color:var(--text-dim);
    padding:9px 16px; cursor:pointer;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .record-action-btn::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(62,166,255,0.2), rgba(62,166,255,0.04));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.28s ease; z-index:-1;
  }
  .record-action-btn:hover::before{ transform:scaleX(1); }
  .record-action-btn:hover{ color:var(--easy); border-color:var(--easy); }

  /* ============ RUNNER VIEW ============ */
  .runner-view{ display:none; }
  .runner-view.active{ display:block; }
  .runner-view-inner{ max-width:1280px; margin:0 auto; padding:32px 20px 100px; position:relative; z-index:3; }

  .back-btn{
    position:relative; overflow:hidden;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
    background:transparent; border:1px solid var(--line-bright); color:var(--text-dim);
    padding:9px 16px; cursor:pointer; margin-bottom:28px;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .back-btn::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(62,166,255,0.2), rgba(62,166,255,0.04));
    transform:scaleX(0); transform-origin:left;
    transition:transform 0.28s ease; z-index:-1;
  }
  .back-btn:hover::before{ transform:scaleX(1); }
  .back-btn:hover{ color:var(--easy); border-color:var(--easy); }

  .runner-header{ border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:34px; }
  .runner-header h2{
    font-family:'Chakra Petch',sans-serif; font-size:clamp(24px,4vw,36px);
    letter-spacing:0.04em; color:#eef6ff; margin-top:8px;
  }
  .runner-summary{
    margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
    letter-spacing:0.04em; color:var(--text-dim);
  }
  .runner-summary strong{ color:var(--gold); font-weight:600; }

  .runner-game-section{ margin-bottom:44px; }
  .runner-game-head{
    display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
    margin-bottom:14px;
  }
  .runner-game-head h3{
    font-family:'Chakra Petch',sans-serif; font-size:16px; letter-spacing:0.05em; color:#eef6ff;
  }
  .stat-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .stat-chip{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--text-dim); background:var(--panel-2); border:1px solid var(--line);
    padding:5px 10px; white-space:nowrap;
  }
  .stat-chip b{ color:var(--easy); font-weight:600; }

  .runner-empty{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-faint);
    border:1px dashed var(--line); padding:16px; text-align:center; letter-spacing:0.04em;
  }

  .runner-link{
    cursor:pointer; border-bottom:1px dashed transparent; padding-bottom:1px;
    transition:color 0.15s ease, border-color 0.15s ease;
  }
  .runner-link:hover{ color:var(--gold); border-color:var(--gold); }

  /* ============ STATS PAGE ============ */
  .stats-tiles{
    display:grid; grid-template-columns:repeat(4, 1fr);
    gap:1px; background:var(--line);
    border:1px solid var(--line); margin-bottom:40px;
  }
  @media (max-width:900px){ .stats-tiles{ grid-template-columns:repeat(2, 1fr); } }

  .stats-section{ margin-bottom:44px; }
  .stats-section-head{
    display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px;
    margin-bottom:14px;
  }
  .stats-section-head h3{
    font-family:'Chakra Petch',sans-serif; font-size:16px; letter-spacing:0.05em; color:#eef6ff;
  }
  .stats-section-note{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--text-faint);
  }

  .stats-rank-list{ display:flex; flex-direction:column; border:1px solid var(--line); }
  .stats-rank-row{
    display:grid; grid-template-columns:36px 1fr auto;
    align-items:center; gap:14px; padding:12px 16px;
    border-bottom:1px solid var(--line); background:var(--panel);
  }
  .stats-rank-row:last-child{ border-bottom:none; }
  .stats-rank-row:nth-child(even){ background:var(--panel-2); }
  .stats-rank-num{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:28px;
    font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; color:var(--text-dim);
    background:var(--panel-2); border:1px solid var(--line);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition:box-shadow 0.2s ease;
  }
  .stats-rank-row:nth-child(1) .stats-rank-num{
    color:#04101c; background:var(--gold); border-color:var(--gold);
    box-shadow:0 0 10px rgba(255,207,92,0.55);
  }
  .stats-rank-row:nth-child(2) .stats-rank-num{
    color:#04101c; background:#c9d6e3; border-color:#c9d6e3;
    box-shadow:0 0 8px rgba(201,214,227,0.45);
  }
  .stats-rank-row:nth-child(3) .stats-rank-num{
    color:#04101c; background:#c9803f; border-color:#c9803f;
    box-shadow:0 0 8px rgba(201,128,63,0.45);
  }
  .stats-rank-main{ min-width:0; }
  .stats-rank-title{
    font-family:'Rajdhani',sans-serif; font-size:15.5px; font-weight:600; color:var(--text);
  }
  .stats-rank-title .runner-link, .stats-rank-title .level-link{ color:inherit; }
  .stats-rank-sub{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.03em; color:var(--text-faint);
    margin-top:2px;
  }
  .stats-rank-value{
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:16px; color:var(--easy);
    white-space:nowrap; text-align:right;
  }
  .stats-rank-value small{
    display:block; font-family:'JetBrains Mono',monospace; font-weight:400; font-size:10px;
    color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;
  }
  .stats-rank-row.legendary-accent .stats-rank-value{ color:var(--legendary); }

  .stats-year-chart{ border:1px solid var(--line); padding:18px 20px 6px; background:var(--panel); }
  .stats-bar-row{
    display:grid; grid-template-columns:52px 1fr 34px; align-items:center; gap:12px; margin-bottom:10px;
  }
  .stats-bar-year{
    font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim);
  }
  .stats-bar-track{
    position:relative; overflow:hidden;
    background:var(--panel-2); height:14px; border:1px solid var(--line);
  }
  .stats-bar-fill{
    position:relative; height:100%;
    background:linear-gradient(90deg, var(--easy-dim) 0%, var(--easy) 82%, #d9f0ff 100%);
    box-shadow:0 0 8px rgba(62,166,255,0.45);
  }
  .stats-bar-fill::after{
    content:""; position:absolute; inset:0;
    background-image:repeating-linear-gradient(90deg, rgba(3,8,18,0.5) 0, rgba(3,8,18,0.5) 1px, transparent 1px, transparent 7px);
    pointer-events:none;
  }
  .stats-bar-count{
    font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-faint); text-align:right;
  }

  td.current-badge{ text-align:center; }
  .current-dot{ color:var(--gold); font-size:14px; }
  .current-dot.off{ color:var(--text-faint); opacity:0.4; }

  /* ============ CHART TOOLTIP ============ */
  .chart-tooltip{
    position:fixed; pointer-events:none; z-index:200;
    background:var(--panel-2); border:1px solid var(--line-bright);
    padding:9px 12px; font-family:'JetBrains Mono',monospace; font-size:11px;
    color:var(--text); line-height:1.6; white-space:nowrap;
    opacity:0; transform:translate(-50%,-100%); transition:opacity 0.05s linear;
    box-shadow:0 6px 18px rgba(0,0,0,0.5);
  }
  .chart-tooltip.visible{ opacity:1; }
  .chart-tooltip .tt-series{
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.1em;
    color:var(--text-faint); text-transform:uppercase; margin-bottom:2px;
  }
  .chart-tooltip .tt-runner{ color:var(--gold); font-weight:700; letter-spacing:0.03em; }
  .chart-tooltip .tt-meta{ color:var(--text-dim); }
  .chart-tooltip .tt-delta{ margin-top:2px; }
  .chart-tooltip .tt-delta.improve{ color:var(--easy); }
  .chart-tooltip .tt-delta.worse{ color:var(--legendary); }
  .chart-tooltip .tt-delta.first{ color:var(--text-faint); font-style:italic; }

  /* ============ SEARCH ============ */
  .search-wrap{ position:relative; max-width:420px; margin:20px auto 0; }
  .search-input{
    width:100%; background:var(--panel); border:1px solid var(--line-bright);
    color:var(--text); font-family:'JetBrains Mono',monospace; font-size:12.5px;
    letter-spacing:0.03em; padding:10px 38px 10px 14px; outline:none;
    transition:border-color 0.15s ease;
  }
  .search-input::placeholder{ color:var(--text-faint); }
  .search-input:focus{ border-color:var(--easy); }
  .search-btn{
    position:absolute; top:0; right:0; bottom:0; width:34px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:var(--text-faint); cursor:pointer;
    transition:color 0.15s ease;
  }
  .search-btn:hover, .search-btn:focus-visible{ color:var(--easy); }
  .search-results{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 4px);
    background:var(--panel-2); border:1px solid var(--line-bright);
    max-height:320px; overflow-y:auto; z-index:50; text-align:left;
    box-shadow:0 10px 24px rgba(0,0,0,0.5);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .search-results.open{ display:block; }
  .search-item{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--line);
    font-size:13px;
  }
  .search-item:last-child{ border-bottom:none; }
  .search-item:hover{ background:rgba(62,166,255,0.08); }
  .search-item .si-label{ color:var(--text); }
  .search-item .si-tag{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.06em;
    color:var(--text-faint); text-transform:uppercase; white-space:nowrap;
  }
  .search-item .si-tag.runner-tag{ color:var(--gold); }
  .search-empty{
    padding:12px 14px; color:var(--text-faint); font-family:'JetBrains Mono',monospace;
    font-size:12px; text-align:center;
  }

  /* ============ RECENT RECORDS DROPDOWN (nav popover) ============ */
  .recent-nav-wrap{ position:relative; }
  #recentNavBtn{ display:inline-flex; align-items:center; }
  #recentNavBtn .live-dot{ display:none; }
  #recentNavBtn.has-recent .live-dot{ display:inline-block; }
  .recent-dropdown{
    display:none; position:absolute; left:0; top:calc(100% + 8px);
    width:300px; max-height:380px; overflow-y:auto;
    background:var(--panel-2); border:1px solid var(--line-bright); border-top:2px solid var(--motion);
    z-index:50; box-shadow:0 10px 24px rgba(0,0,0,0.5);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .recent-dropdown.open{ display:block; }
  .recent-dropdown-head{
    padding:10px 14px; border-bottom:1px solid var(--line);
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.14em;
    color:var(--text-faint); text-transform:uppercase;
  }
  .recent-dropdown-list{ display:flex; flex-direction:column; }
  .recent-dropdown-empty{
    padding:16px 14px; color:var(--text-faint); font-family:'JetBrains Mono',monospace;
    font-size:12px; text-align:center;
  }
  .recent-dropdown-item{
    padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line);
    transition:background 0.15s ease;
  }
  .recent-dropdown-item:last-child{ border-bottom:none; }
  .recent-dropdown-item:hover{ background:rgba(62,166,255,0.08); }
  .recent-dropdown-item .ri-game{
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.06em;
    color:var(--text-faint); text-transform:uppercase; margin-bottom:4px;
  }
  .recent-dropdown-item .ri-label{ font-size:12.5px; color:var(--text-dim); margin-bottom:3px; }
  .recent-dropdown-item .ri-meta{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim);
    display:flex; justify-content:space-between; gap:8px;
  }
  .recent-dropdown-item .ri-date{ color:var(--text-faint); font-size:9.5px; margin-top:3px; }

  /* ============ AMBIENT "NEW" BADGE (in-table freshness signal) ============ */
  .new-badge{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.08em;
    color:var(--motion); text-transform:uppercase;
    margin-left:8px; vertical-align:middle;
  }
  .new-badge .live-dot{ margin-right:0; }

  /* ============ CURRENT WR BADGE (runner page: still holds this record) ============ */
  .current-wr-badge{
    display:inline-flex; align-items:center;
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.08em;
    color:var(--gold); text-transform:uppercase;
    white-space:nowrap;
  }


  /* ============ SORTABLE LEADERBOARD HEADERS ============ */
  th.sortable{ cursor:pointer; user-select:none; }
  th.sortable:hover{ color:var(--easy-bright); }
  th.sortable .sort-arrow{ color:var(--easy-bright); margin-left:4px; }

  /* ============ SEARCH / JUMP HIGHLIGHT ============ */
  @keyframes flashRowBg{ 0%{ background:rgba(255,207,92,0.32); } 100%{ background:transparent; } }
  tr.flash-highlight td{ animation:flashRowBg 1.6s ease; }

  @media (max-width:640px){
    .modal-body{ padding:16px; }
    .modal-head{ padding:16px; }
  }

  /* ============ PAST EXPLORER PAGE ============ */
  .past-explorer-panel{
    position:relative; z-index:0; max-width:520px; margin:0 auto; padding:38px 30px 34px; text-align:center;
  }
  .past-explorer-panel::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--gold);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .past-explorer-icon{ width:60px; height:60px; margin:0 auto 18px; color:var(--gold); }
  .past-explorer-icon svg{ width:100%; height:100%; }
  .past-explorer-label{
    display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em;
    color:var(--text-faint); margin-bottom:10px;
  }
  .past-explorer-date-picker{
    display:flex; gap:10px; justify-content:center; margin:0 auto 24px; flex-wrap:wrap;
  }
  .pe-select-group{ display:flex; flex-direction:column; gap:6px; text-align:left; }
  .pe-select-group label{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.08em;
    color:var(--text-faint); text-transform:uppercase;
  }
  .pe-dd{ position:relative; display:inline-block; }
  .pe-dd-trigger{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--text);
    background:var(--panel-2); border:1px solid var(--line-bright); padding:9px 12px;
    cursor:pointer; width:100%; transition:border-color 0.15s ease;
  }
  .pe-dd-trigger::after{
    content:"\25BE"; color:var(--text-faint); font-size:10px; flex-shrink:0;
  }
  .pe-dd-trigger:hover{ border-color:var(--gold); }
  #peYearTrigger{ min-width:82px; }
  #peMonthTrigger{ min-width:122px; }
  #peDayTrigger{ min-width:68px; }
  .pe-dd-list{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 4px);
    max-height:220px; overflow-y:auto; z-index:60; text-align:left;
    background:var(--panel-2); border:1px solid var(--line-bright);
    box-shadow:0 10px 24px rgba(0,0,0,0.5);
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  }
  .pe-dd-list.open{ display:block; }
  .pe-dd-opt{
    padding:8px 12px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:13px;
    color:var(--text-dim); border-bottom:1px solid var(--line);
  }
  .pe-dd-opt:last-child{ border-bottom:none; }
  .pe-dd-opt:hover{ background:rgba(255,207,92,0.08); color:var(--text); }
  .pe-dd-opt.selected{ color:var(--gold); }
  .past-explorer-actions{ display:flex; flex-direction:column; gap:10px; align-items:center; }
  .past-explorer-actions .back-btn{ position:static; }
  .past-explorer-active-note{
    margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim);
  }
  .past-explorer-active-note strong{ color:var(--gold); }

  /* ============ PAST MODE — persistent "you're viewing the archive" chrome ============ */
  .past-mode-frame{
    display:none; position:fixed; inset:0; pointer-events:none; z-index:9998;
    border:3px solid var(--gold);
    box-shadow: inset 0 0 46px rgba(255,207,92,0.22), inset 0 0 0 1px rgba(255,207,92,0.35);
  }
  body.past-mode .past-mode-frame{ display:block; }
  body.past-mode .top-banner{ border-top-color:var(--gold); }

  .past-mode-banner{
    display:none; position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    z-index:9999; background:var(--panel); border:1px solid var(--gold);
    box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(255,207,92,0.18);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  body.past-mode .past-mode-banner{ display:block; }
  /* Shown when a past date has been viewed before but we're currently back on
     current/live records -- a quieter, non-gold treatment (no viewport frame
     either) since nothing archived is actively being viewed right now, just
     offered as a one-click way back into it. */
  body.past-available .past-mode-banner{ display:block; border-color:var(--line-bright); box-shadow:0 8px 24px rgba(0,0,0,0.5); }
  body.past-available .past-mode-icon{ color:var(--text-faint); }
  body.past-available .past-mode-label{ color:var(--text-faint); }
  .past-mode-banner-inner{ display:flex; align-items:center; gap:12px; padding:10px 16px; }
  .past-mode-icon{ width:26px; height:26px; color:var(--gold); flex-shrink:0; }
  .past-mode-text{ display:flex; flex-direction:column; line-height:1.25; }
  .past-mode-label{
    font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.14em; color:var(--gold);
  }
  .past-mode-date{
    font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:14px; color:var(--text);
  }
  /* Secondary action: quick swap between current and the remembered archived
     date, without discarding it. Deliberately small/quiet next to Exit. */
  .past-mode-toggle{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.05em;
    color:var(--text-faint); background:transparent; border:1px solid var(--line-bright);
    padding:5px 9px; cursor:pointer; transition:all 0.15s ease; white-space:nowrap;
  }
  .past-mode-toggle:hover{ color:var(--easy-bright); border-color:var(--easy); }
  /* Primary action: fully leaves the archive experience (forgets the
     remembered date too, unlike the toggle) -- solid fill so it reads as the
     more prominent of the two buttons. */
  .past-mode-exit{
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.06em;
    color:#04101c; background:var(--gold); border:1px solid var(--gold);
    padding:8px 14px; cursor:pointer; transition:all 0.15s ease; white-space:nowrap;
  }
  .past-mode-exit:hover{ background:#ffe6a3; border-color:#ffe6a3; }
  @media (max-width:520px){
    .past-mode-banner{ bottom:10px; width:calc(100% - 20px); }
    .past-mode-banner-inner{ padding:8px 12px; gap:8px; }
    .past-mode-date{ font-size:12px; }
  }

  /* ============ TRICKS ============ */
  /* Chips shown in a run's record modal, under "TRICKS USED" -- visually akin
     to .hist-chip/.diff-chip but intentionally its own color (gold) so a
     trick reads as a distinct kind of tag, not a difficulty or history link. */
  .trick-chip{
    display:inline-flex; align-items:center;
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:0.04em;
    color:var(--gold);
    cursor:pointer;
    padding:5px 10px;
    border:1px solid rgba(255,207,92,0.35);
    background:rgba(255,207,92,0.07);
    transition:background 0.15s ease, border-color 0.15s ease;
  }
  .trick-chip::before{ content:"\26A1"; font-size:9px; margin-right:5px; }
  .trick-chip:hover{ background:rgba(255,207,92,0.16); border-color:var(--gold); }
  .tricks-used-block{ margin-bottom:28px; }
  .tricks-used-label{
    font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.08em;
    color:var(--text-faint); text-transform:uppercase; margin-bottom:10px;
  }
  .tricks-used-list{ display:flex; flex-wrap:wrap; }
  .tricks-used-list .trick-chip{ margin:0 8px 8px 0; }

  /* Trick detail modal -- narrower than the main record/history modal, since
     it's a much smaller amount of content. */
  .trick-panel{ max-width:560px; }
  .trick-video-wrap{ margin-bottom:20px; border-top-color:var(--gold); }
  .trick-info-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:1px;
    background:var(--line); border:1px solid var(--line); margin-bottom:20px;
  }
  .trick-explanation{
    font-family:'Rajdhani',sans-serif; font-size:15px; line-height:1.6; color:var(--text);
    background:var(--panel-2); border:1px solid var(--line); padding:16px 18px;
  }
  .trick-video-note{
    margin-top:14px; text-align:center; color:var(--text-faint);
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.03em;
  }
  .trick-video-note a{ color:var(--easy); }

  /* Tricks nav page (grouped by game, then mission) */
  /* Reuses the Records page's .game-tabs/.game-tab classes for visual
     consistency, scoped to the Tricks page via .tricks-tabs -- not sticky
     the same way the main nav is (that one assumes it's pinned directly
     under the top banner across page scroll; here it just sits inline
     under the page header, so overriding position keeps it from also
     trying to stick while the main nav.game-tabs is hidden). */
  .tricks-tabs{ position:static; background:transparent; backdrop-filter:none; margin-bottom:28px; justify-content:flex-start; padding:0; }
  .tricks-game-panel{ margin-bottom:0; }
  .stats-tabs{ position:static; background:transparent; backdrop-filter:none; margin-bottom:28px; justify-content:flex-start; padding:0; }
  .stats-game-panel{ margin-bottom:0; }
  .runners-tabs{ position:static; background:transparent; backdrop-filter:none; margin-bottom:28px; justify-content:flex-start; padding:0; }
  .tricks-mission-group{ margin-bottom:28px; }
  .tricks-mission-head{
    display:flex; align-items:center; gap:8px; margin-bottom:12px;
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:14px;
    letter-spacing:0.03em; color:var(--text-dim); text-transform:uppercase;
    border-bottom:1px solid var(--line); padding-bottom:8px;
  }
  .tricks-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1px;
    background:var(--line); border:1px solid var(--line);
  }
  .trick-card{
    background:var(--panel); padding:14px 16px; border-top:2px solid var(--line-bright);
    cursor:pointer; transition:background 0.15s ease, border-top-color 0.15s ease;
    display:flex; flex-direction:column; gap:6px;
  }
  .trick-card:hover{ background:var(--panel-2); border-top-color:var(--gold); }
  .trick-card-name{
    font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:14px; color:var(--text);
  }
  .trick-card-meta{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.04em;
    color:var(--text-faint); display:flex; flex-wrap:wrap;
  }
  .trick-card-meta > *{ margin-right:8px; }
  .trick-card-meta .tcm-save{ color:var(--gold); }
  .tricks-empty{
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-faint);
    border:1px dashed var(--line); padding:16px; text-align:center; letter-spacing:0.04em;
  }