:root{
    --bg:#0A0B0D;
    --panel:#15171B;
    --panel-2:#1B1E23;
    --line:#2A2E35;
    --track:#1E2126;
    --text:#ECE9E2;
    --muted:#8A8F98;
    --amber:#D0D0D0;
    --amber-dark:#A0A0A0;
    --red:#FF4D45;
    --blue:#4FA3FF;
    --green:#33CC78;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    /* Site background image — tiled panda-spot texture. */
    background-color:#0A0B0D;
    background-image:url('/background');
    background-repeat:repeat;
    background-size:1650px auto;
    background-attachment:fixed;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  #app{
    flex:1;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:28px 18px 60px;
  }

  .brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:6px;
  }
  .brand h1{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:22px;
    margin:0;
    color:var(--text);
  }
  .brand img.site-logo{
    height:44px;
    width:auto;
    display:block;
  }

  /* ── NAV BAR ─────────────────────────────────── */
  .navbar{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:20px;
    overflow:visible;
    position:relative;
    z-index:100;
  }
  .navbar-race{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--red);
    color:#fff;
    font-family:"Arial Black",Impact,sans-serif;
    font-style:italic;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:0 22px;
    cursor:pointer;
    border:none;
    white-space:nowrap;
    flex:0 0 auto;
    transition:background .12s;
    border-radius:11px 0 0 11px;
  }
  .navbar-race:hover{ background:#e03c35; }
  .navbar-race svg{ flex-shrink:0; }
  .navbar-tabs{
    display:flex;
    align-items:stretch;
    flex:1 1 260px;
    min-width:260px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .navbar-tabs::-webkit-scrollbar{ display:none; }
  .navbar-tab{
    display:flex;
    align-items:center;
    padding:0 20px;
    font-size:14px;
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
    border:none;
    background:none;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    transition:color .12s, border-color .12s, background .12s;
    position:relative;
  }
  .navbar-tab:hover{ color:var(--text); background:rgba(255,255,255,.04); }
  .navbar-tab.active{ color:var(--text); border-bottom-color:var(--amber); background:var(--panel-2); }
  .nav-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:16px;
    height:16px;
    padding:0 4px;
    margin-left:6px;
    border-radius:999px;
    background:var(--danger, #e0455a);
    color:#fff;
    font-size:10px;
    font-weight:800;
    line-height:1;
  }
  .navbar-right{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:10px 14px;
    border-left:1px solid var(--line);
    flex:0 0 auto;
    margin-left:auto;
  }
  /* ── END NAV BAR ──────────────────────────────── */

  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
  }
  .userpill{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 14px;
    font-size:14px;
  }
  .userpill b{ color:var(--amber); }
  .small-btn{
    background:none;
    border:1px solid var(--line);
    color:var(--muted);
    border-radius:8px;
    padding:7px 12px;
    font-size:13px;
    cursor:pointer;
  }
  .small-btn:hover{ border-color:var(--amber); color:var(--amber); }

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
  }

  .btn{
    border:none;
    border-radius:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.6px;
    font-size:14px;
    padding:13px 20px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn:active{ transform:translateY(0); }
  .btn-primary{
    background:var(--amber);
    color:#0A0B0D;
    box-shadow:0 6px 0 var(--amber-dark);
  }
  .btn-primary:hover{ box-shadow:0 8px 0 var(--amber-dark); }
  .btn-primary:active{ box-shadow:0 3px 0 var(--amber-dark); }
  .btn-ghost{
    background:transparent;
    color:var(--text);
    border:1px solid var(--line);
  }
  .btn-ghost:hover{ border-color:var(--muted); }
  .btn-block{ width:100%; }
  .btn-lg{ padding:18px 24px; font-size:16px; }

  /* ---------- AUTH SCREEN ---------- */
  .auth-wrap{
    max-width:380px;
    margin:40px auto 0;
  }
  .tabs{
    display:flex;
    background:var(--panel-2);
    border-radius:999px;
    padding:4px;
    margin-bottom:20px;
  }
  .tab{
    flex:1;
    text-align:center;
    padding:9px 0;
    border-radius:999px;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
  }
  .tab.active{ background:var(--amber); color:#0A0B0D; }
  .field{ margin-bottom:14px; }
  .field label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .field input{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
    padding:11px 12px;
    font-size:15px;
  }
  .field input:focus{ outline:2px solid var(--amber); outline-offset:1px; }
  .error-text{
    color:var(--red);
    font-size:13px;
    margin:-4px 0 14px;
    min-height:16px;
  }
  .notice-text{
    color:var(--amber);
    background:rgba(255,179,0,0.08);
    border:1px solid rgba(255,179,0,0.35);
    border-radius:8px;
    font-size:12.5px;
    line-height:1.5;
    padding:10px 12px;
    margin-bottom:16px;
  }
  .hint-text{
    color:var(--muted);
    font-size:12px;
    margin-top:14px;
    line-height:1.5;
  }

  /* ---------- DASHBOARD ---------- */
  .stat-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:20px 0 26px;
  }
  .stat-card{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px 10px;
    text-align:center;
  }
  .stat-card .num{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:26px;
    color:var(--amber);
  }
  .stat-card .lbl{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--muted);
    margin-top:4px;
  }
  @media (max-width:560px){
    .stat-grid{ grid-template-columns:repeat(2,1fr); }
  }

  /* ---------- GARAGE ---------- */
  .garage-panel{ padding:0 !important; overflow:hidden; }

  /* Premium garage styling -- gold border + small "Premium" ribbon tab,
     applied to specific .panel elements when the account viewed has an
     active premium subscription. See renderGarageCars(),
     garageStatsAndSwitcherHtml(), and renderProfileContent(). */
  .premium-panel{
    position:relative;
    border:2px solid #FFD700 !important;
    box-shadow:0 0 14px rgba(255,215,0,0.35);
  }
  .premium-badge{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    background:linear-gradient(180deg,#FFE47A,#FFC700);
    color:#0A0B0D;
    font-family:'Arial Black',Impact,sans-serif;
    font-style:italic;
    font-weight:900;
    font-size:13px;
    letter-spacing:0.5px;
    padding:5px 20px;
    border-radius:6px;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
    white-space:nowrap;
    z-index:2;
  }
  .garage-header{
    background:var(--panel-2);
    border-bottom:1px solid var(--line);
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .garage-title{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:19px;
    color:var(--text);
  }
  .garage-title .garage-count{ font-style:normal; opacity:0.7; font-weight:400; }
  .garage-floor{
    background:var(--bg);
    padding:20px 0 6px;
  }
  .garage-line{
    height:2px;
    background:var(--amber);
    opacity:0.85;
    margin:0 16px 18px;
  }
  .garage-row{
    display:flex;
    flex-wrap:wrap;
  }
  .garage-slot{
    flex:0 0 128px;
    width:128px;
    height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding-bottom:2px;
    border-right:1px solid var(--line);
  }
  .garage-slot:first-child{ border-left:1px solid var(--line); }
  .garage-slot > *{
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
    transition:transform .15s ease;
  }
  .garage-slot:hover > *{ transform:translateY(-3px) scale(1.04); }
  .garage-slot.equipped{
    background:rgba(255,179,0,0.12);
    box-shadow:inset 0 0 0 2px var(--amber);
  }
  .garage-slot.equipped > *{ transform:none !important; }
  .garage-slot{ position:relative; cursor:pointer; }
  .garage-slot .equip-btn{
    display:none;
    position:absolute;
    bottom:3px;
    left:50%;
    transform:translateX(-50%);
    background:var(--amber);
    color:#0A0B0D;
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border:none;
    border-radius:4px;
    padding:2px 7px;
    cursor:pointer;
    white-space:nowrap;
    z-index:3;
  }
  .garage-slot:hover .equip-btn{ display:block; }
  .garage-slot.equipped .equip-btn{
    display:block;
    background:#0A0B0D;
    color:var(--amber);
    box-shadow:0 0 0 1px var(--amber);
  }
  /* Info button — small circled "i" in the top-right corner of a car slot */
  .info-btn{
    position:absolute;
    top:3px;
    right:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:rgba(0,0,0,0.55);
    color:var(--muted);
    border:1px solid var(--line);
    font-size:10px;
    font-weight:700;
    font-style:normal;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:4;
    padding:0;
  }
  .info-btn:hover{ color:var(--text); border-color:var(--text); }

  /* Quantity badge — sits just left of the info button, shows how many
     copies of this car the player owns. */
  .qty-badge{
    position:absolute;
    top:3px;
    right:23px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:8px;
    background:rgba(0,0,0,0.55);
    color:var(--amber);
    border:1px solid var(--line);
    font-size:10px;
    font-weight:700;
    line-height:14px;
    text-align:center;
    z-index:4;
  }

  /* ---------- GLOBAL MODAL ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
    padding:20px;
  }
  .modal-box{
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:24px;
    max-width:420px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
  }

  .lb-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 0;
    border-bottom:1px solid var(--line);
    font-size:14px;
  }
  .lb-row:last-child{ border-bottom:none; }
  .lb-rank{
    width:24px;
    color:var(--muted);
    font-weight:700;
  }
  .lb-name{ flex:1; padding-left:6px; }
  .lb-wpm{ color:var(--amber); font-weight:700; }

  /* ---------- FULL LEADERBOARD ---------- */
  .lb-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
    margin-top:6px;
  }
  .lb-table th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    padding:0 10px 10px;
    font-weight:700;
    border-bottom:1px solid var(--line);
  }
  .lb-table th:first-child{ padding-left:0; }
  .lb-table th.num{ text-align:right; }
  .lb-table td{
    padding:12px 10px;
    border-bottom:1px solid var(--line);
    vertical-align:middle;
  }
  .lb-table td:first-child{ padding-left:0; }
  .lb-table tr:last-child td{ border-bottom:none; }
  .lb-table .td-num{ text-align:right; color:var(--amber); font-weight:700; font-style:italic; font-family:"Arial Black",Impact,sans-serif; font-size:16px; }
  .lb-table .td-muted{ text-align:right; color:var(--muted); }
  .lb-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:26px; height:26px;
    border-radius:6px;
    font-weight:900;
    font-size:13px;
    background:var(--panel-2);
    color:var(--muted);
  }
  .lb-badge.gold{ background:rgba(200,200,200,.12); color:var(--amber); }
  .lb-badge.silver{ background:rgba(180,180,200,.15); color:#b0b8c8; }
  .lb-badge.bronze{ background:rgba(180,100,40,.15); color:#c87c42; }
  .lb-you{ color:var(--amber); font-weight:700; }
  .lb-you::after{ content:" (you)"; font-weight:400; font-size:11px; opacity:.7; }

  .lb-tabs{
    display:flex;
    gap:4px;
    margin-bottom:20px;
    background:var(--panel-2);
    border-radius:999px;
    padding:4px;
  }
  .lb-tab{
    flex:1;
    text-align:center;
    padding:8px 0;
    border-radius:999px;
    cursor:pointer;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    transition:background .15s, color .15s;
  }
  .lb-tab.active{ background:var(--amber); color:#0A0B0D; }

  /* ---------- GUILDS ---------- */
  .guild-color-swatch{
    width:32px;
    height:32px;
    border-radius:50%;
    cursor:pointer;
    border:3px solid transparent;
    display:inline-block;
    transition:transform .1s, border-color .1s;
  }
  .guild-color-swatch:hover{ transform:scale(1.08); }
  .guild-color-swatch.selected{ border-color:var(--text); }
  .guild-role-badge{
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:2px 6px;
    border-radius:4px;
    margin-left:6px;
  }
  .guild-member-row{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    border-radius:12px;
    background:var(--panel-2);
    border:1px solid var(--line);
    margin-bottom:12px;
  }
  .guild-member-row:last-child{ margin-bottom:0; }
  .guild-member-row.is-leader{
    border-color:var(--amber);
    background:linear-gradient(90deg, rgba(255,193,7,0.10), var(--panel-2) 45%);
  }
  .guild-member-name-col{
    flex:0 1 auto;
    min-width:120px;
  }
  .guild-member-stats{
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-start;
  }
  .guild-member-stat{
    text-align:center;
    min-width:66px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 12px;
  }
  .guild-member-stat .num{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:18px;
    color:var(--amber);
    line-height:1.1;
  }
  .guild-member-stat .lbl{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:0.6px;
    color:var(--muted);
    margin-top:3px;
  }
  .guild-member-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .guild-member-thumb{
    flex:0 0 84px;
    width:84px;
    height:52px;
    border-radius:8px;
    background:var(--panel);
    border:1px solid var(--line);
    padding:6px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .guild-member-thumb > *{ width:100%; height:100%; display:block; }
  @media (max-width:680px){
    .guild-member-row{ flex-wrap:wrap; }
    .guild-member-stats{ flex-basis:100%; }
  }

  .guild-progress-wrap{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:999px;
    height:10px;
    overflow:hidden;
    margin-top:10px;
    max-width:280px;
  }
  .guild-progress-fill{
    height:100%;
    border-radius:999px;
  }

  /* ---------- SEASON ---------- */
  .season-name{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:36px;
    color:var(--text);
  }
  .season-row{
    display:flex;
    align-items:stretch;
  }
  .season-label-col{
    flex:0 0 110px;
    display:flex;
    flex-direction:column;
  }
  .season-label-cell{
    height:192px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    text-align:center;
    padding:8px;
  }
  .season-scroll{
    flex:1;
    overflow-x:auto;
  }
  .season-levels{
    display:flex;
  }
  .season-level-col{
    flex:0 0 168px;
    border-right:1px solid var(--line);
  }
  .season-level-num{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    color:var(--muted);
    border-bottom:1px solid var(--line);
  }
  .season-cell{
    height:192px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
    padding:12px;
  }
  .season-cell.free{ border-bottom:1px solid var(--line); }
  .season-cell.locked{ opacity:0.35; filter:grayscale(0.6); }
  .season-cell-img{ width:92px; height:46px; }
  .season-cell-img img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:pixelated; }
  .season-cell-label{ font-size:14px; color:var(--muted); text-align:center; line-height:1.3; }
  .season-cell-check{
    position:absolute;
    top:6px;
    right:6px;
    color:var(--green);
    font-size:20px;
    font-weight:900;
  }
  .season-bonus-col{
    flex:0 0 200px;
  }
  .season-bonus-cell{
    height:192px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:12px;
    text-align:center;
  }
  .season-bonus-cell.free{ border-bottom:1px solid var(--line); }

  /* ---------- ADMIN NAV ---------- */
  .admin-navbar{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:20px;
    overflow:hidden;
  }
  .admin-navbar-brand{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 20px;
    border-right:1px solid var(--line);
    flex:0 0 auto;
  }
  .admin-navbar-brand span{
    font-family:"Arial Black",Impact,sans-serif;
    font-style:italic;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--amber);
  }
  .admin-navbar-tabs{
    display:flex;
    align-items:stretch;
    flex:1 1 220px;
    min-width:220px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .admin-navbar-tabs::-webkit-scrollbar{ display:none; }
  .admin-navbar-tab{
    display:flex;
    align-items:center;
    padding:0 24px;
    font-size:14px;
    font-weight:700;
    color:var(--muted);
    cursor:pointer;
    border:none;
    background:none;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    transition:color .12s, border-color .12s, background .12s;
  }
  .admin-navbar-tab:hover{ color:var(--text); background:rgba(255,255,255,.04); }
  .admin-navbar-tab.active{ color:var(--text); border-bottom-color:var(--amber); background:var(--panel-2); }
  .admin-navbar-right{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:10px 14px;
    border-left:1px solid var(--line);
    flex:0 0 auto;
    margin-left:auto;
  }

  /* ---------- ADMIN ---------- */
  input[type="color"]{
    width:48px;
    height:40px;
    padding:2px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel-2);
    cursor:pointer;
  }
  .admin-color-row{ display:flex; gap:14px; margin-bottom:14px; }
  .admin-color-field{ flex:1; }
  .admin-color-field label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--muted);
    margin-bottom:6px;
  }
  /* Admin preview is the exact garage slot size so you see the real thing */
  .admin-preview{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
  }
  .admin-preview > *,
  .admin-preview img { display:block; }
  /* The inner preview container is 128x64 - exact garage slot dimensions */
  #carPreview{ width:128px; height:64px; position:relative; }
  #carPreview > *{ width:100%; height:100%; display:block; }
  .admin-car-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .admin-car-row:last-child{ border-bottom:none; }
  /* Catalog row thumbnail — half-size of the garage slot */
  .admin-car-thumb{
    flex:0 0 64px;
    width:64px;
    height:32px;
  }
  .admin-car-thumb > *{ width:100%; height:100%; display:block; }
  .admin-car-name{ flex:1; font-size:14px; }
  .admin-car-pattern{ color:var(--muted); font-size:12px; text-transform:capitalize; }

  /* ---------- ACHIEVEMENT CARDS ---------- */
  .ach-card{
    display:flex;
    align-items:stretch;
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    margin-bottom:10px;
    min-height:100px;
    transition:border-color .15s;
  }
  .ach-card.done{ border-color:rgba(51,204,120,.35); }
  .ach-card-body{
    flex:1;
    padding:18px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    min-width:0;
  }
  .ach-card-title{
    font-family:"Arial Black",Impact,sans-serif;
    font-style:italic;
    font-size:19px;
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:0.3px;
  }
  .ach-card.locked .ach-card-title{ color:var(--muted); }
  .ach-card-desc{
    font-style:italic;
    font-size:13px;
    color:var(--muted);
  }
  .ach-card-complete{
    display:flex;
    align-items:center;
    gap:6px;
    font-style:italic;
    font-size:13px;
    color:var(--green);
    font-weight:700;
  }
  .ach-card-reward{
    flex:0 0 160px;
    width:160px;
    background:rgba(0,0,0,.25);
    border-left:1px solid var(--line);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px;
  }
  .ach-card-reward-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:var(--muted);
  }
  .ach-card-reward-img{
    width:128px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .ach-card-reward-img > *{ width:100%; height:100%; display:block; object-fit:contain; }
  .ach-card-reward-name{
    font-size:13px;
    font-weight:700;
    color:var(--text);
    text-align:center;
  }
  .ach-card-reward-coins{
    font-family:"Arial Black",Impact,sans-serif;
    font-style:italic;
    font-size:22px;
    color:var(--amber);
  }


  /* ---------- RACE SCREEN ---------- */
  .race-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
  }

  /* Gauge is now inline with the timer — one compact row */
  .gauge-wrap{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .gauge-num{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:20px;
    line-height:1;
  }
  .gauge-num small{
    display:inline;
    font-family:-apple-system,sans-serif;
    font-style:normal;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--muted);
    margin-left:4px;
  }

  .race-stage{
    position:relative;
  }
  .countdown-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    pointer-events:none;
  }
  .countdown-num{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:96px;
    color:var(--amber);
    text-shadow:0 0 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.9), 3px 3px 0 rgba(0,0,0,.7);
    animation:countdown-pop .5s ease-out;
  }
  .countdown-num.go{
    color:var(--green);
    font-size:58px;
    letter-spacing:2px;
  }
  @keyframes countdown-pop{
    from{ transform:scale(1.6); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }
  .paste-notice{
    color:var(--amber);
    font-size:12.5px;
    margin-top:8px;
    min-height:16px;
  }


  .track{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 10px;
    margin-bottom:22px;
    position:relative;
  }
  /* When a custom track is active, ONE image spans the entire track
     container (all 4 lanes at once, not repeated per lane) and scrolls
     continuously via a CSS animation applied inline (see startRace()).
     background-origin:content-box keeps the sizing math simple — the
     image only needs to cover the lanes themselves, not the panel padding. */
  .track.has-custom-track{
    background-origin:content-box;
    background-repeat:repeat-x;
    background-size:auto 100%;
  }
  .lane{
    position:relative;
    height:80px;
    margin-bottom:8px;
    background:var(--track);
    border-radius:6px;
    background-image:repeating-linear-gradient(to right, var(--line) 0 14px, transparent 14px 30px);
    background-position:0 center;
    background-repeat:repeat-x;
    background-size:30px 2px;
    overflow:visible;
  }
  .lane:last-child{ margin-bottom:0; }

  /* With a custom track, lanes go edge-to-edge with no gap or rounding —
     they're just rows within the one continuous road image, not separate
     boxes. The background pattern above is also turned off per-lane since
     the shared image on .track shows through instead. */
  .has-custom-track .lane{
    margin-bottom:0;
    border-radius:0;
    background:none;
  }
  .lane-name{
    position:absolute;
    left:6px; top:3px;
    font-size:10px;
    color:var(--muted);
    z-index:2;
    text-transform:uppercase;
    letter-spacing:0.5px;
  }
  /* Track cars render at full native size — same 128x64 image as the
     garage, no scaling down. Lane height (80px) is sized to fit this with
     a little breathing room above and below. */
  .car{
    position:absolute;
    top:8px;
    left:0;
    width:128px;
    height:64px;
    transition:left .08s linear;
    z-index:1;
  }
  /* Scoped to just the car's own visual (img or svg) — NOT the name tag,
     which is also a direct child but needs its own size/position below. */
  .car > img, .car > svg{ width:100%; height:100%; display:block; }

  /* A few simple streaks trailing behind the car (to its left, opposite
     the direction of travel) to sell a sense of speed/wind. Pure CSS,
     loops continuously, no JS involved. */
  .car-wind{
    position:absolute;
    top:0;
    right:100%;
    width:40px;
    height:100%;
    pointer-events:none;
    z-index:0;
    overflow:visible;
  }
  .car-wind .streak{
    position:absolute;
    height:3px;
    border-radius:2px;
    background:linear-gradient(to left, rgba(255,255,255,.6), rgba(255,255,255,0));
    animation:carWindStreak .55s linear infinite;
  }
  .car-wind .streak:nth-child(1){ top:22%; width:30px; animation-delay:0s; }
  .car-wind .streak:nth-child(2){ top:48%; width:40px; animation-delay:.18s; }
  .car-wind .streak:nth-child(3){ top:74%; width:26px; animation-delay:.36s; }
  @keyframes carWindStreak{
    0%{ transform:translateX(14px); opacity:0; }
    25%{ opacity:.85; }
    100%{ transform:translateX(-26px); opacity:0; }
  }

  /* Name tag floats just ahead of the car (to its right, since lanes race
     left-to-right) and moves with it since it's a child of .car. Also
     rendered at full native size (256x64) to match the uploaded tag art. */
  .car-nametag{
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    margin-left:8px;
    width:256px;
    height:64px;
    z-index:2;
    pointer-events:none;
  }
  .car-nametag img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    image-rendering:pixelated;
    display:block;
  }
  .car-nametag-text{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    font-family:-apple-system,sans-serif;
    font-size:14px;
    font-weight:700;
    color:#fff;
    text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    white-space:nowrap;
    letter-spacing:0.2px;
  }

  .nav-dropdown-wrap{ position:relative; z-index:9999; }
  .nav-dropdown-trigger{
    display:flex;align-items:center;gap:8px;
    background:var(--panel-2);border:1px solid var(--line);
    border-radius:20px;padding:6px 12px 6px 8px;
    cursor:pointer;font-size:14px;font-weight:600;color:var(--text);
    transition:border-color .15s;
  }
  .nav-dropdown-trigger:hover{ border-color:var(--text); }
  .nav-dropdown-trigger svg{ flex-shrink:0; }
  .nav-dropdown-arrow{ font-size:9px;color:var(--muted);margin-left:2px; }
  .nav-dropdown-menu{
    display:none;position:absolute;top:calc(100% + 8px);right:0;
    background:var(--panel-2);border:1px solid var(--line);
    border-radius:10px;min-width:170px;z-index:9999;
    box-shadow:0 8px 24px rgba(0,0,0,.4);overflow:hidden;
  }
  .nav-dropdown-menu.open{ display:block; }
  .nav-dropdown-item{
    display:block;width:100%;text-align:left;
    padding:11px 16px;font-size:14px;font-weight:500;
    color:var(--text);background:none;border:none;
    cursor:pointer;border-bottom:1px solid var(--line);
    transition:background .12s;
  }
  .nav-dropdown-item:last-child{ border-bottom:none; }
  .nav-dropdown-item:hover{ background:var(--panel); }
  .nav-dropdown-item.danger{ color:var(--red); }
  .passage-box{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:10px;
    padding:14px 18px;
    font-family:"SFMono-Regular","Roboto Mono","Consolas","Liberation Mono",monospace;
    font-size:18px;
    line-height:1.7;
    letter-spacing:0.3px;
    margin-bottom:14px;
    cursor:default;
    user-select:none;
    /* Fixed to exactly 3 lines: font-size × line-height × 3 + top+bottom padding */
    height:calc(18px * 1.7 * 3 + 28px);
    overflow:hidden;
    position:relative;
  }
  /* The inner div slides up one line at a time as the player progresses */
  .passage-inner{
    transition:transform 0.18s ease;
  }
  .ch{ color:var(--muted); }
  .ch.correct{ color:var(--green); }
  .ch.wrong{ color:#fff; background:var(--red); border-radius:2px; }
  .ch.current{ color:var(--text); background:var(--amber); border-radius:2px; color:#0A0B0D; }
  .ch.wrong-held{ background:var(--red); color:#fff; border-radius:2px; }

  #typeInput{
    width:100%;
    background:var(--panel-2);
    border:1px solid var(--line);
    color:var(--text);
    border-radius:8px;
    padding:13px 14px;
    font-size:16px;
    font-family:"SFMono-Regular","Roboto Mono","Consolas",monospace;
  }
  #typeInput:focus{ outline:2px solid var(--amber); outline-offset:1px; }

  .race-actions{
    margin-top:16px;
    display:flex;
    justify-content:flex-end;
  }

  /* ---------- RESULTS ---------- */
  .results-place{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:48px;
    color:var(--amber);
    text-align:center;
    margin:6px 0 2px;
  }
  .results-sub{
    text-align:center;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-size:12px;
    margin-bottom:22px;
  }
  .results-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:24px;
  }
  .results-actions{
    display:flex;
    gap:12px;
  }
  .results-actions .btn{ flex:1; }

  .coins-earned{
    text-align:center;
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:22px;
    color:var(--amber);
    margin:-8px 0 18px;
    animation:pop-in .3s ease;
  }
  .coins-earned span{ font-style:normal; font-size:14px; opacity:.75; }
  @keyframes pop-in{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }

  .coin-pill{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--panel-2);
    border:1px solid var(--amber);
    border-radius:999px;
    padding:7px 14px;
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:15px;
    color:var(--amber);
  }

  /* ---------- SHOP ---------- */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
    gap:14px;
    margin-top:16px;
  }
  .shop-card{
    background:var(--panel-2);
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .shop-card-img{
    width:100%;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--track);
    padding:8px;
  }
  .shop-card-img > *{ max-width:128px; max-height:64px; width:100%; height:100%; display:block; object-fit:contain; }
  .shop-card-body{ padding:12px; flex:1; display:flex; flex-direction:column; gap:8px; }
  .shop-card-name{ font-weight:700; font-size:14px; }
  .shop-card-price{
    font-family:"Arial Black", Impact, sans-serif;
    font-style:italic;
    font-size:15px;
    color:var(--amber);
  }
  .shop-card-price.free{ color:var(--green); }
  .shop-card .btn{ margin-top:auto; }
  .shop-card.owned{ border-color:var(--green); }
  .shop-card.owned .shop-card-price{ color:var(--green); font-size:13px; font-style:normal; font-family:inherit; font-weight:700; }

  .center-note{
    text-align:center;
    color:var(--muted);
    font-size:13px;
    margin-top:18px;
  }