:root{
    --bg: #0a0a0c;
    --bg-elev: #131316;
    --bg-elev-2: #1c1c20;
    --border: #26262b;
    --border-strong: #35353c;
    --text: #eae7e0;
    --text-dim: #55555c;
    --text-faint: #7a7a82;
    --accent: #e0a940;
    --brand: #e0a940;   /* the logo keeps this colour whatever accent the player picks */
    --accent-dim: #a67c30;
    --accent-bg: #241d0e;
    --error: #e2574c;
    --error-bg: #241413;
    --success: #7fc95c;
    --success-bg: #16210f;
    --opponent: #4f8fe0;
    --font-display: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 10px;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    display:flex;
    flex-direction:column;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }
  a{ color: inherit; }
  button{ font-family: inherit; cursor:pointer; }
  ::selection{ background: var(--accent-dim); color:#0a0a0c; }

  .icon{ width:18px; height:18px; display:inline-block; vertical-align:-4px; }
  .icon path, .icon circle, .icon polyline, .icon line{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  /* ---- Header ---- */
  header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 32px;
    border-bottom: 1px solid var(--border);
    transition: opacity .35s ease;
  }
  header.dim{ opacity: .15; }
  .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.logo-mark{
  width: 38px; height: 38px; flex: none;
  display:flex; align-items:center; justify-content:center;
  color: var(--brand);
  filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--brand) 28%, transparent));
}
.logo-mark svg{ width: 100%; height: 100%; }
.logo-wordmark{
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--text); letter-spacing: .2px;
}
.logo-wordmark span{ color: var(--brand); }
  nav{ display:flex; gap:6px; background: var(--bg-elev); border:1px solid var(--border); border-radius: 999px; padding:4px; }
  nav button{
    background:none; border:none; color: var(--text-faint);
    display:flex; align-items:center; gap:6px;
    font-size:13px; font-weight:500; padding:8px 14px; border-radius:999px;
    transition: background .15s ease, color .15s ease;
  }
  nav button:hover{ color: var(--text); }
  nav button.active{ background: var(--bg-elev-2); color: var(--accent); }
  .profile{ display:flex; align-items:center; gap:10px; font-size:13px; color: var(--text-faint); }
  .profile .avatar{
    width:30px; height:30px; border-radius:50%; background: var(--accent-bg); color: var(--accent);
    display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:12px; font-weight:600; flex:none;
  }
  #langSwitcher button{ padding:4px 7px !important; font-size:9px !important; }

  /* ---- connection status dot (text hidden, dot-only indicator; click opens debug log) ---- */
  .fb-status{ display:flex; align-items:center; cursor:pointer; }
  .fb-status-dot{ width:6px; height:6px; border-radius:50%; background: var(--text-dim); flex:none; }

  /* ---- profile pill (header) ---- */
  .profile-pill{
    display:flex; align-items:center; gap:8px; background: var(--bg-elev); border:1px solid var(--border);
    border-radius:999px; padding:4px 12px 4px 4px; color: var(--text); font-size:13px; font-weight:500;
    transition: border-color .15s, background .15s;
  }
  .profile-pill:hover{ border-color: var(--border-strong); background: var(--bg-elev-2); }
  .profile-pill .streak-badge{ padding:2px 6px; font-size:10px; }

  /* ---- name input (profile view) ---- */
  .profile-name-input{
    flex:1; min-width:0; background: var(--bg-elev-2); border:1px solid var(--border); border-radius: var(--radius);
    padding:11px 14px; color: var(--text); font-size:16px; font-weight:600; font-family: var(--font-body);
  }
  .profile-name-input:focus{ outline:none; border-color: var(--accent-dim); }
  /* ---- header "Kirish" button (guests only) ---- */
  .btn-login{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:999px;
    background: var(--accent); color:#1a1305; border:none; font-family: var(--font-body); font-size:13px; font-weight:600;
    cursor:pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .12s, filter .12s; }
  .btn-login svg{ width:16px; height:16px; }
  .btn-login:hover{ filter: brightness(1.08); transform: translateY(-1px); }
  .btn-login:active{ transform: translateY(0); }

  /* ---- auth modal ---- */
  .auth-overlay{ position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:16px;
    background: rgba(5,5,8,.68); backdrop-filter: blur(6px); opacity:0; visibility:hidden; transition: opacity .18s, visibility .18s; }
  .auth-overlay.open{ opacity:1; visibility:visible; }
  .auth-card{ position:relative; width:400px; max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto;
    background: linear-gradient(180deg, var(--bg-elev), var(--bg)); border:1px solid var(--border-strong); border-radius:20px;
    padding:34px 32px 24px; text-align:center; box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transform: translateY(12px) scale(.98); transition: transform .22s cubic-bezier(.2,.9,.3,1.2); }
  .auth-overlay.open .auth-card{ transform:none; }
  .auth-close{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%; border:none;
    background: transparent; color: var(--text-faint); font-size:22px; line-height:1; cursor:pointer; }
  .auth-close:hover{ background: var(--bg-elev-2); color: var(--text); }
  .auth-logo{ width:52px; height:52px; margin:0 auto 14px; color: var(--brand);
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--brand) 35%, transparent)); }
  .auth-logo svg{ width:100%; height:100%; }
  .auth-title{ font-family: var(--font-display); font-size:22px; font-weight:700; margin:0 0 6px; }
  .auth-sub{ font-size:13px; line-height:1.55; color: var(--text-faint); margin:0 auto 22px; max-width:300px; }
  .auth-google #googleBtnWrap{ display:flex; justify-content:center; min-height:44px; }
  .auth-divider{ display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12px; color: var(--text-dim); }
  .auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background: var(--border); }
  .auth-tabs{ display:flex; padding:4px; gap:4px; background: var(--bg-elev-2); border:1px solid var(--border); border-radius:12px; margin-bottom:16px; }
  .auth-tabs button{ flex:1; height:36px; border:none; border-radius:9px; background:transparent; color: var(--text-faint);
    font-family: var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition: background .15s, color .15s; }
  .auth-tabs button.active{ background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 0 var(--border-strong), 0 2px 8px rgba(0,0,0,.3); }
  .auth-field{ display:block; text-align:left; margin-bottom:12px; }
  .auth-field > span:first-child{ display:block; font-size:12px; font-weight:500; color: var(--text-faint); margin:0 0 6px 2px; }
  .auth-field input{ width:100%; height:44px; background: var(--bg-elev-2); border:1px solid var(--border); border-radius:11px;
    padding:0 14px; color: var(--text); font-size:14px; font-family: var(--font-body); transition: border-color .15s, box-shadow .15s; }
  .auth-field input:focus{ outline:none; border-color: var(--accent-dim); box-shadow: 0 0 0 3px var(--accent-bg); }
  .auth-pw{ position:relative; display:block; }
  .auth-pw input{ padding-right:44px; }
  .auth-pw-toggle{ position:absolute; right:6px; top:6px; width:32px; height:32px; border:none; border-radius:8px; background:transparent;
    color: var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .auth-pw-toggle svg{ width:18px; height:18px; }
  .auth-pw-toggle:hover, .auth-pw-toggle.on{ color: var(--accent); }
  .auth-error{ min-height:18px; font-size:12.5px; line-height:1.45; color: var(--error); text-align:left; margin:2px 2px 8px; }
  .auth-submit{ width:100%; height:46px; border:none; border-radius:12px; background: var(--accent); color:#1a1305;
    font-family: var(--font-body); font-size:15px; font-weight:700; cursor:pointer; transition: filter .12s, transform .12s; }
  .auth-submit:hover{ filter: brightness(1.08); }
  .auth-submit:active{ transform: translateY(1px); }
  .auth-submit:disabled{ opacity:.6; cursor:progress; }
  .auth-foot{ font-size:12px; line-height:1.5; color: var(--text-dim); margin:16px 0 0; }
  @media (max-width: 640px){
    .btn-login{ height:34px; padding:0 12px; }
    .btn-login span{ display:none; }
    .auth-card{ padding:28px 20px 20px; }
  }

  /* × in the top-right corner of every page but the test; sits in main's top padding, so it takes no room */
  .view{ position:relative; }
  .view-close-row{ display:flex; justify-content:flex-end; height:0; position:relative; z-index:5; }
  .view-close{ width:40px; height:40px; margin-top:-52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: var(--bg-elev); border:1px solid var(--border-strong); color: var(--text-faint); cursor:pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: color .15s, border-color .15s, transform .15s, background .15s; }
  .view-close svg{ width:18px; height:18px; }
  .view-close:hover{ color: var(--text); border-color: var(--text-faint); background: var(--bg-elev-2); transform: rotate(90deg); }
  .debug-close{ position:sticky; top:0; float:right; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong);
    background: var(--bg-elev-2); color: var(--text); font-size:16px; line-height:1; cursor:pointer; }
  @media (max-width: 640px){ .view-close{ width:34px; height:34px; margin-top:-40px; } }

  main{ flex:1; display:flex; flex-direction:column; align-items:center; padding: 64px 24px; }
  .view{ width:100%; max-width: 960px; display:none; }
  .view.active{ display:block; }
  #view-test{ max-width: 1180px; }

  /* ---- Mode selector ---- */
  .mode-bar{
    display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
    margin-bottom: 56px; transition: opacity .35s ease;
  }
  .mode-bar.dim{ opacity:.12; }
  .seg{ display:flex; gap:2px; background: var(--bg-elev); border:1px solid var(--border); border-radius: 8px; padding:3px; }
  .seg button{
    background:none; border:none; color: var(--text-faint); font-size:13px; padding:7px 13px;
    border-radius:6px; font-family: var(--font-mono); transition: background .15s, color .15s;
  }
  .seg button.active{ background: var(--bg-elev-2); color: var(--accent); }
  .lang-row{ display:flex; gap:8px; align-items:center; }
  .lang-row button{
    background:none; border:1px solid var(--border); color: var(--text-faint); font-size:12px;
    padding:6px 12px; border-radius:6px; font-family: var(--font-mono);
  }
  .lang-row button.active{ border-color: var(--accent-dim); color: var(--accent); }

  /* ---- Typing area ---- */
  .stats-row{ display:flex; justify-content:center; gap:36px; margin-bottom: 22px; font-family: var(--font-mono); font-size:13px; color: var(--text-faint); min-height: 18px; }
  .stats-row span.val{ color: var(--accent); font-weight:600; }

  .type-wrap{ position: relative; }
  .type-text{
    font-family: var(--font-mono); font-size: 44px; line-height: 1.55; letter-spacing: .5px;
    color: var(--text-dim); user-select:none; cursor:text;
    white-space: pre-wrap; word-break: break-word;
    max-height: calc(1.55em * 3); overflow: hidden; scroll-behavior: auto; position: relative;
  }
  @media (max-width: 720px){
    .type-text{ font-size: 30px; }
  }
  .type-text .c.syn-keyword{ color: #5b9dea; }
  .type-text .c.syn-string{ color: #d99a5b; }
  .type-text .c.syn-number{ color: #6fc9c5; }
  .type-text .c.syn-comment{ color: var(--text-faint); font-style: italic; }
  .type-text .c{ transition: color .06s linear; }
  .type-text .c.correct{ color: var(--text); }
  .type-text .c.incorrect{ color: var(--error); background: var(--error-bg); border-radius:2px; }
  .type-text .c.current{ color: var(--text-dim); }
  /* single caret element that slides smoothly between characters, instead of the old approach
     of an ::before pseudo-element re-created on whichever span had .current \u2014 that never
     animated between positions, it just popped from spot to spot. */
  .type-caret{
    position:absolute; width:2px; background: var(--accent); border-radius:1px; pointer-events:none;
    animation: blink 1s step-end infinite; will-change: left, top; z-index:2;
    transition: left .07s linear, top .07s linear;
  }
  .type-caret.typing{ animation: none; opacity:1; }
  @keyframes blink{ 50%{ opacity:0; } }

  .hidden-input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }

  .footer-tip{ text-align:center; padding: 22px; font-size:12px; color: var(--text-dim); font-family: var(--font-mono); }
  .footer-tip kbd{ background: var(--bg-elev-2); border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-family: var(--font-mono); }

  /* ---- Results ---- */
  .results{ text-align:center; padding: 20px 0 0; animation: rise .4s ease; }
  @keyframes rise{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }
  .results .big-row{ display:flex; justify-content:center; gap:64px; margin-bottom: 30px; }
  .results .big{ font-family: var(--font-display); font-size:56px; font-weight:700; color: var(--accent); line-height:1; }
  .results .lbl{ font-size:12px; color: var(--text-faint); margin-top:8px; letter-spacing:.4px; text-transform:lowercase; }
  .btn-row{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
  .btn{
    display:flex; align-items:center; gap:7px; background: var(--bg-elev); border:1px solid var(--border);
    color: var(--text); font-size:13px; font-weight:500; padding:10px 16px; border-radius: var(--radius);
    transition: border-color .15s, background .15s;
  }
  .btn:hover{ border-color: var(--border-strong); background: var(--bg-elev-2); }
  .btn.accent{ border-color: var(--accent-dim); color: var(--accent); }
  .btn.accent:hover{ background: var(--accent-bg); }

  /* ---- Race ---- */
  .race-lobby{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; max-width:640px; margin: 0 auto 32px; }
  @media (max-width:600px){ .race-lobby{ grid-template-columns:1fr; } }
  .race-card{
    background: var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:24px;
    text-align:left; transition: border-color .15s, transform .15s;
  }
  .race-card:hover{ border-color: var(--accent-dim); transform: translateY(-2px); }
  .race-card .icon{ width:26px; height:26px; color: var(--accent); margin-bottom:14px; }
  .race-card h3{ font-family: var(--font-display); font-size:16px; margin:0 0 6px; font-weight:600; }
  .race-card p{ font-size:13px; color: var(--text-faint); margin:0; line-height:1.5; }

  .room-panel{ max-width:520px; margin: 0 auto 32px; text-align:center; }
  .room-panel h3{ font-family: var(--font-display); font-size:15px; margin:0 0 6px; font-weight:600; text-transform:lowercase; }
  .room-code{ font-family: var(--font-mono); font-size:26px; letter-spacing:4px; color: var(--accent); margin: 10px 0 16px; }
  .room-link-row{ display:flex; gap:8px; align-items:center; background: var(--bg-elev-2); border:1px solid var(--border); border-radius: var(--radius); padding:8px 10px; margin-bottom:16px; }
  .room-link-row input{ flex:1; background:none; border:none; color: var(--text-faint); font-family: var(--font-mono); font-size:12px; outline:none; }

  .race-track{ margin: 14px 0 34px; }
  .racer{ margin-bottom: 22px; }
  .racer-head{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size:12px; margin-bottom:6px; }
  .racer-head .name{ color: var(--text-faint); }
  .racer-head .wpm{ font-weight:600; }
  .track{ position:relative; height:26px; background: var(--bg-elev); border:1px solid var(--border); border-radius:999px; overflow:hidden; }
  .track .fill{ position:absolute; inset:0; width:0%; transition: width .25s linear; }
  .track.you .fill{ background: linear-gradient(90deg, transparent, var(--accent-bg)); }
  .track.opp .fill{ background: linear-gradient(90deg, transparent, #10192b); }
  .racer-mark{ position:absolute; top:50%; transform: translate(-50%,-50%); width:20px; height:20px; transition: left .25s linear; }
  .track.you .racer-mark{ color: var(--accent); }
  .track.opp .racer-mark{ color: var(--opponent); }
  .room-player-chip{
    display:flex; align-items:center; gap:6px; background: var(--bg-elev-2); border:1px solid var(--border);
    border-radius: 999px; padding:6px 12px 6px 6px; font-size:12px; font-family: var(--font-mono);
  }
  .room-player-chip .av{ width:20px; height:20px; border-radius:50%; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; }
  .room-player-chip.host::after{ content:'host'; color: var(--accent); font-size:9px; margin-left:2px; }
  .race-result-row{
    display:flex; align-items:center; gap:12px; background: var(--bg-elev-2); border:1px solid var(--border);
    border-radius: var(--radius); padding:10px 14px;
  }
  .race-result-row.winner{ border-color: var(--accent); background: var(--accent-bg); }
  .race-result-row .rr-rank{ font-family: var(--font-mono); font-weight:700; color: var(--text-faint); width:22px; }
  .race-result-row.winner .rr-rank{ color: var(--accent); }
  .race-result-row .rr-name{ flex:1; font-weight:600; }
  .race-result-row .rr-stats{ font-family: var(--font-mono); font-size:12px; color: var(--text-faint); }

  .race-status{ text-align:center; font-family: var(--font-mono); font-size:13px; color: var(--text-faint); margin-bottom:10px; min-height:18px; }
  .race-timer{ text-align:center; font-family: var(--font-mono); font-size:32px; font-weight:600; color: var(--accent); margin-bottom: 16px; }

  /* ---- Coach ---- */
  .coach-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:24px; align-items:start; }
  @media (max-width: 720px){ .coach-grid{ grid-template-columns:1fr; } }
  .panel{ background: var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:20px; }
  .panel h3{ font-family: var(--font-display); font-size:14px; font-weight:600; margin:0 0 16px; color: var(--text-faint); text-transform:lowercase; letter-spacing:.3px; }
  .bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .bar-row .ch{ font-family: var(--font-mono); font-size:13px; width:22px; text-align:center; color:var(--text); background: var(--bg-elev-2); border-radius:4px; padding:2px 0; }
  .bar-row .bar-bg{ flex:1; height:8px; background: var(--bg-elev-2); border-radius:999px; overflow:hidden; }
  .bar-row .bar-fg{ height:100%; background: var(--error); border-radius:999px; }
  .bar-row .cnt{ font-family: var(--font-mono); font-size:11px; color: var(--text-faint); width:18px; text-align:right; }
  .empty-note{ font-size:13px; color: var(--text-faint); line-height:1.6; }

  .coach-side{ display:flex; flex-direction:column; gap:16px; }
  .ask-btn{
    width:100%; justify-content:center; background: var(--accent-bg); border:1px solid var(--accent-dim); color: var(--accent);
    font-weight:600; padding:13px; font-size:14px;
  }
  .ask-btn:hover{ background: #2c2411; }
  .chat-bubble{
    background: var(--bg-elev-2); border:1px solid var(--border); border-radius:12px; padding:16px 18px;
    font-size:13.5px; line-height:1.7; color: var(--text); animation: rise .3s ease;
  }
  .chat-bubble .who{ font-family: var(--font-mono); font-size:11px; color: var(--accent); margin-bottom:8px; letter-spacing:.4px; }
  .typing-dots{ display:flex; gap:4px; padding: 6px 0; justify-content:flex-start; }
  .typing-dots span{ width:6px; height:6px; border-radius:50%; background: var(--text-faint); animation: bounce 1.2s infinite ease-in-out; }
  .typing-dots span:nth-child(2){ animation-delay: .15s; }
  .typing-dots span:nth-child(3){ animation-delay: .3s; }
  @keyframes bounce{ 0%,80%,100%{ transform: translateY(0); opacity:.4; } 40%{ transform: translateY(-4px); opacity:1; } }

  .lb-table{ width:100%; border-collapse:collapse; font-size:13px; }
  .lb-table th{ text-align:left; font-family: var(--font-mono); font-weight:500; color: var(--text-faint); font-size:11px; text-transform:lowercase; padding: 8px 10px; border-bottom:1px solid var(--border); }
  .lb-table td{ padding: 10px; border-bottom:1px solid var(--border); }
  .lb-table tr:last-child td{ border-bottom:none; }
  .lb-table .rank{ font-family: var(--font-mono); color: var(--text-faint); width:30px; }
  .lb-table .rank.top{ color: var(--accent); font-weight:600; }
  .lb-table .u{ display:flex; align-items:center; gap:10px; }
  .lb-table .u .av{ width:26px; height:26px; border-radius:50%; background: var(--bg-elev-2); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:11px; color: var(--text-faint); flex:none; }
  .lb-table .wpm-col{ font-family: var(--font-mono); color: var(--text); }
  .lb-table th.lb-sort:hover{ color: var(--text); }
  .lb-table th.lb-sort.active{ color: var(--accent); }
  .lb-table .sort-arrow{ font-size:9px; }

  .view-title{ font-family: var(--font-display); font-size:20px; font-weight:600; margin: 0 0 22px; text-align:center; }
  .view-sub{ text-align:center; font-size:13px; color: var(--text-faint); margin: -14px 0 30px; }

  /* ---- streak badge ---- */
  .streak-badge{ align-items:center; font-family: var(--font-mono); font-size:11px; color: var(--accent); background: var(--accent-bg); border:1px solid var(--accent-dim); border-radius:999px; padding:3px 8px; }

  /* ---- ad slot: small, muted, non-distracting; fades out while typing ---- */
  /* full-width banner instead of a small floating icon-strip, so it actually fills the space
     under the typing area \u2014 kept unobtrusive via muted colors/opacity/thin border rather than
     via being tiny. Media (image or video) spans the full width at a modest fixed height. */
  [hidden]{ display:none !important; }
  /* ad slot: desktop banner 8:1, phone banner 3:1 when the admin set one (ads.js), creative never see-through */
  .ad-slot{
    display:flex; flex-direction:column; width:100%; max-width:960px; margin: 28px auto 0;
    background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius);
    text-decoration:none; color: var(--text-faint); overflow:hidden; transition: opacity .35s ease, border-color .15s;
  }
  a.ad-slot[href]:hover{ border-color: var(--border-strong); }
  .ad-slot:not([href]){ cursor: default; }
  .ad-slot.dim{ opacity:.05; pointer-events:none; }
  .ad-slot-media-wrap{ position:relative; width:100%; aspect-ratio: 8 / 1; background: var(--bg-elev-2); }
  .ad-slot-media-wrap picture{ display:block; width:100%; height:100%; }
  .ad-slot-img, .ad-slot-video{ width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width: 600px){ .ad-slot.has-mobile .ad-slot-media-wrap{ aspect-ratio: 3 / 1; } }
  .ad-slot-body{ display:flex; align-items:center; gap:10px; padding:8px 12px; }
  .ad-slot-text{ flex:1; font-size:12px; line-height:1.4; }
  .ad-slot-label{
    position:absolute; top:6px; left:6px; font-family: var(--font-mono); font-size:9px; text-transform:lowercase;
    color:#fff; background: rgba(0,0,0,.6); border-radius:4px; padding:2px 6px; pointer-events:none;
  }
  html.has-bg .ad-slot{ background: #131316; }

  /* ---- results: new personal best ---- */
  .new-best-badge{ text-align:center; font-family: var(--font-mono); font-size:12px; color: var(--accent); margin:-16px 0 8px; animation: rise .4s ease; }

  /* ---- achievement toast ---- */
  .achv-toast{
    position:fixed; bottom:24px; right:24px; z-index:70; display:flex; align-items:center; gap:12px;
    background: var(--bg-elev-2); border:1px solid var(--accent-dim); border-radius: var(--radius);
    padding:14px 18px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: rise .3s ease;
  }
  .achv-toast.out{ opacity:0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
  .achv-toast-icon{ font-size:24px; line-height:1; }
  .achv-toast-title{ font-family: var(--font-mono); font-size:10px; color: var(--accent); letter-spacing:.4px; margin-bottom:2px; }
  .achv-toast-label{ font-size:13px; font-weight:500; }

  /* ---- stats view ---- */
  .stat-cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:22px; }
  @media (max-width: 640px){ .stat-cards{ grid-template-columns: repeat(2, 1fr); } }
  .stat-card{
    background: var(--bg-elev); border:1px solid var(--border); border-radius:14px; padding:18px 16px;
    text-align:center; transition: border-color .15s, transform .15s;
  }
  .stat-card.hero{
    background: linear-gradient(155deg, var(--accent-bg), var(--bg-elev));
    border-color: var(--accent-dim);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }
  .stat-card-icon{ font-size:16px; margin-bottom:6px; opacity:.85; }
  .stat-card-val{ font-family: var(--font-display); font-size:26px; font-weight:700; color: var(--accent); }
  .stat-card-lbl{ font-size:11px; color: var(--text-faint); margin-top:4px; text-transform:lowercase; }

  .stats-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:20px; align-items:start; }
  @media (max-width: 780px){ .stats-grid{ grid-template-columns:1fr; } }

  /* small icon prefix on section titles, via ::before so re-running textContent-based
     i18n (which replaces the h3's children) never wipes it \u2014 no real DOM child involved */
  .panel h3{ display:flex; align-items:center; gap:8px; }
  .panel h3.icon-chart::before{ content:'\1F4C8'; font-size:13px; } /* \u{1F4C8} chart-increasing emoji */
  .panel h3.icon-history::before{ content:'\1F553'; font-size:13px; } /* \u{1F553} clock emoji */
  .panel h3.icon-trophy::before{ content:'\1F3C6'; font-size:13px; } /* \u{1F3C6} trophy emoji */

  .chart-box{ position:relative; }
  .wpm-chart{ width:100%; height:auto; display:block; overflow:visible; }
  .chart-grid{ stroke: var(--border); stroke-width:1; }
  .chart-axis-label{ font-family: var(--font-mono); font-size:9px; fill: var(--text-faint); }
  .chart-area{ stroke:none; }
  .chart-line{ stroke: var(--accent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .chart-dot{ fill: var(--bg-elev); stroke: var(--accent); stroke-width:1.5; transition: r .1s; }
  .chart-dot.active{ fill: var(--accent); r:4.5; }
  .chart-overlay{ fill:transparent; cursor:crosshair; }
  .chart-crosshair{ stroke: var(--text-dim); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }
  .chart-tooltip{
    position:absolute; transform: translate(-50%,-130%); background: var(--bg-elev-2); border:1px solid var(--border);
    border-radius:6px; padding:6px 9px; font-size:11px; font-family: var(--font-mono); color: var(--text);
    pointer-events:none; white-space:nowrap;
  }

  .achv-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:12px; }
  .achv-tile{
    background: var(--bg-elev-2); border:1px solid var(--border); border-radius:14px; padding:14px 8px;
    text-align:center; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .achv-tile:not(.locked):hover{ transform: translateY(-3px); border-color: var(--accent-dim); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
  .achv-tile.locked{ opacity:.45; filter: grayscale(1); border-style:dashed; }
  .achv-tile-icon{
    font-size:22px; margin: 0 auto 8px; width:42px; height:42px; display:flex; align-items:center;
    justify-content:center; border-radius:50%; background: linear-gradient(155deg, var(--accent-bg), transparent);
  }
  .achv-tile.locked .achv-tile-icon{ background:none; }
  .achv-tile-label{ font-size:10px; color: var(--text-faint); line-height:1.3; }

  /* ---- profile: level bar + AI analysis ---- */
  .level-bar{ flex:1; max-width:120px; height:6px; border-radius:999px; background: var(--bg-elev-2); border:1px solid var(--border); overflow:hidden; }
  .level-bar-fill{ height:100%; width:0; background: linear-gradient(90deg, var(--accent-dim), var(--accent)); border-radius:999px; transition: width .5s ease; }
  .level-next{ font-family: var(--font-mono); font-size:10px; color: var(--text-dim); white-space:nowrap; }
  .panel h3.icon-ai::before{ content:'\2728'; font-size:13px; } /* sparkles */
  .ai-panel{ margin: 0 0 16px; }
  .ai-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .ai-head h3{ margin:0 !important; }
  .ai-head .btn{ padding:7px 14px; font-size:12px; }
  .ai-summary{ font-size:13.5px; line-height:1.6; color: var(--text); margin:0 0 14px; }
  .ai-sec-title{ font-family: var(--font-mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color: var(--text-dim); margin:14px 0 8px; }
  .ai-weak{ display:flex; gap:10px; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--error); background: var(--bg-elev); border-radius:8px; margin-bottom:8px; }
  .ai-weak b{ display:block; font-size:13px; margin-bottom:2px; }
  .ai-weak span{ font-size:12px; color: var(--text-faint); line-height:1.5; }
  .ai-tips{ margin:0; padding-left:18px; font-size:12.5px; color: var(--text-faint); line-height:1.65; }
  .ai-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; }
  .ai-chip{ font-family: var(--font-mono); font-size:13px; min-width:30px; text-align:center; padding:4px 8px; border-radius:6px; background: var(--error-bg); color: var(--error); border:1px solid var(--border); }
  .ai-chip small{ color: var(--text-faint); font-size:10px; margin-left:4px; }
  .ai-practice{ margin-top:14px; width:100%; justify-content:center; }
  .profile-panel.is-guest .ai-panel{ display:block; }


  /* =====================================================================
     personal background + glass panels (Profile → Settings)
     ===================================================================== */
  html{ background: var(--bg); }
  #bgLayer{ display:none; position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
  html.has-bg #bgLayer{ display:block; }
  #bgLayer .bg-img{
    position:absolute; inset: calc(var(--bg-blur, 0px) * -2);
    background-image: var(--bg-image); background-size: cover; background-position: var(--bg-pos, 50% 50%);
    filter: blur(var(--bg-blur, 0px));
  }
  #bgLayer .bg-dim{ position:absolute; inset:0; background: rgba(6,6,9, var(--bg-dim, .45)); }
  html.has-bg body{ background: transparent; }
  html.has-bg header{ background: rgba(8,8,11,.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-color: rgba(255,255,255,.06); }
  html.has-bg .type-wrap:not(.demo-wrap){ background: rgba(8,8,11,.74); border-radius:16px; padding:18px 24px; }
  /* text that sits directly on the picture */
  html.has-bg .view-title, html.has-bg .view-sub, html.has-bg .lb-rules, html.has-bg .daily-note,
  html.has-bg .stats-row, html.has-bg .footer-tip, html.has-bg .results .lbl, html.has-bg .res-note{ text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
  html.has-bg .view-sub, html.has-bg .lb-rules{ color: #c9c6bf; }
  html.has-bg.glass{
    --bg-elev: rgba(22,22,27,.58); --bg-elev-2: rgba(36,36,42,.62);
    --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.17);
  }
  html.has-bg.glass .panel, html.has-bg.glass nav, html.has-bg.glass .seg, html.has-bg.glass .profile-pill,
  html.has-bg.glass .lb-me, html.has-bg.glass .stat-card, html.has-bg.glass .lb-champion{
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  }
  html.has-bg.glass .type-wrap:not(.demo-wrap){
    background: rgba(8,8,11,.4); border:1px solid rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }

  /* ---- caret styles / motion / blink ---- */
  html.caret-block .type-caret{ width:.6em; opacity:.35; border-radius:3px; }
  html.caret-block .type-caret.typing{ opacity:.35; }
  html.caret-underline .type-caret{ width:.6em; height:3px !important; transform: translateY(calc(1.55em - 10px)); }
  html.caret-off .type-caret{ display:none; }
  html.cmotion-fast .type-caret{ transition: left .03s linear, top .03s linear; }
  html.cmotion-instant .type-caret{ transition: none !important; }
  html.caret-noblink .type-caret{ animation: none !important; }

  /* ---- typed-letter animations ---- */
  html.letter-fade .type-text .c.correct{ animation: klFade .22s ease-out; }
  @keyframes klFade{ from{ opacity:.15; } }
  html.letter-glow .type-text .c.correct{ animation: klGlow .45s ease-out; }
  @keyframes klGlow{ from{ color: var(--accent); text-shadow: 0 0 14px var(--accent); } }
  html.letter-rise .type-text .c{ position:relative; }
  html.letter-rise .type-text .c.correct{ animation: klRise .18s ease-out; }
  @keyframes klRise{ from{ top:.3em; opacity:.3; } to{ top:0; opacity:1; } }

  /* ---- mistake effects ---- */
  html.errfx-underline .type-text .c.incorrect{ background:none; text-decoration: underline wavy var(--error); text-underline-offset: 6px; }
  .kfx-shake{ animation: klShake .18s linear; }
  @keyframes klShake{ 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }

  .confetti-canvas{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:80; }
  .kl-toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:90;
    background: #1c1c20; border:1px solid var(--border-strong); color: var(--text);
    padding:10px 16px; border-radius:10px; font-size:13px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: rise .25s ease; transition: opacity .3s;
  }
  .kl-toast.out{ opacity:0; }
  .err{ color: var(--error) !important; }

  /* ---- test view additions ---- */
  .daily-note{ text-align:center; font-size:13px; color: var(--accent); margin: -14px auto 20px; max-width:620px; line-height:1.5; }
  .res-note{ font-size:12px; color: var(--text-faint); margin: -10px 0 22px; min-height:16px; }
  .new-best-badge + .res-note{ margin-top:0; }
  .res-note.ok{ color: var(--success); }
  .res-note.warn{ color: var(--accent); }

  /* ---- tiers ---- */
  .tier-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; line-height:1.6;
    padding:1px 9px 1px 7px; border-radius:999px; color: var(--tc); white-space:nowrap; font-family: var(--font-body);
    background: color-mix(in srgb, var(--tc) 14%, transparent); border:1px solid color-mix(in srgb, var(--tc) 38%, transparent);
  }
  .tier-gem{ width:7px; height:7px; transform: rotate(45deg); background: var(--tc); border-radius:1.5px; box-shadow: 0 0 8px var(--tc); flex:none; }
  .profile .avatar.tiered{ box-shadow: 0 0 0 2px var(--tc); color: var(--tc); }
  .profile-pill.active{ border-color: var(--accent-dim); }

  /* =====================================================================
     profile view
     ===================================================================== */
  #view-profile{ max-width: 1000px; }
  #profileOverview > .panel, #profileOverview > .stats-grid, #profileOverview > .stat-cards{ margin-bottom:16px; }
  .pf-tabs{ width:fit-content; margin: 0 auto 20px; }
  .pf-tabs button{ padding:7px 16px; }
  .pf-head{ display:grid; grid-template-columns: auto 1fr auto; gap:22px; align-items:center; position:relative; overflow:hidden; }
  .pf-head::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(620px 220px at 0% 0%, color-mix(in srgb, var(--tc, var(--accent)) 20%, transparent), transparent 70%);
  }
  .pf-head > *{ position:relative; }
  .pf-avatar{
    width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:30px; font-weight:700; color: var(--tc, var(--accent));
    background: linear-gradient(155deg, color-mix(in srgb, var(--tc, var(--accent)) 26%, var(--bg-elev-2)), var(--bg-elev-2));
    box-shadow: 0 0 0 3px var(--tc, var(--accent)), 0 0 34px color-mix(in srgb, var(--tc, var(--accent)) 35%, transparent);
  }
  .pf-id{ min-width:0; }
  .pf-name{ font-family: var(--font-display); font-size:28px; margin:0 0 10px; overflow-wrap:anywhere; }
  .pf-name-row{ display:flex; gap:8px; margin-bottom:12px; max-width:440px; }
  .pf-name-row .btn{ padding:0 16px; }
  .pf-chips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px; }
  .pf-chip{ font-size:12px; padding:2px 10px; border-radius:999px; background: var(--bg-elev-2); border:1px solid var(--border); color: var(--text); line-height:1.6; }
  .pf-chip small{ color: var(--text-faint); }
  .pf-chip-dim{ color: var(--text-faint); }
  .pf-level{ display:flex; align-items:center; gap:10px; font-size:12px; color: var(--text-faint); flex-wrap:wrap; }
  .pf-level-bar{ width:170px; height:6px; border-radius:999px; background: var(--bg-elev-2); overflow:hidden; border:1px solid var(--border); }
  .pf-level-bar div{ height:100%; background: var(--tc, var(--accent)); border-radius:999px; box-shadow: 0 0 10px var(--tc, var(--accent)); }
  .pf-actions{ display:flex; flex-direction:column; gap:8px; }
  .pf-actions .btn{ justify-content:flex-start; padding:8px 12px; font-size:12px; white-space:nowrap; }
  .pf-actions-inline{ display:flex; gap:8px; flex-wrap:wrap; }
  .pf-guest-note{ color: var(--text-faint); font-size:13px; line-height:1.6; margin: 0 0 14px; max-width:520px; }
  .pf-empty{ text-align:center; color: var(--text-faint); }
  .pf-empty .btn{ display:inline-flex; }
  @media (max-width: 720px){
    .pf-head{ grid-template-columns: auto 1fr; gap:16px; }
    .pf-actions{ grid-column: 1 / -1; flex-direction:row; flex-wrap:wrap; }
    .pf-avatar{ width:64px; height:64px; font-size:22px; }
    .pf-name{ font-size:22px; }
  }
  .pf-cards{ grid-template-columns: repeat(6, 1fr); }
  @media (max-width: 900px){ .pf-cards{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 520px){ .pf-cards{ grid-template-columns: repeat(2, 1fr); } }
  .stat-card-val.small{ font-size:18px; padding-top:6px; }
  .stat-card.up .stat-card-val{ color: var(--success); }
  .stat-card.down .stat-card-val{ color: var(--error); }
  .pf-panel-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .pf-panel-head h3{ margin:0; }
  .pf-range button{ font-size:11px; }
  .chart-legend{ display:flex; gap:16px; font-size:11px; color: var(--text-faint); margin: 10px 0 8px; font-family: var(--font-mono); }
  .chart-legend span::before{ content:''; display:inline-block; width:16px; height:0; border-top:2px solid var(--accent); vertical-align:middle; margin-right:6px; }
  .chart-legend .lg-acc::before{ border-top:2px dashed var(--opponent); }
  .chart-line-acc{ fill:none; stroke: var(--opponent); stroke-width:1.5; stroke-dasharray: 4 4; opacity:.85; }
  .chart-axis-label.acc{ fill: var(--opponent); opacity:.75; }
  .mode-cell{ color: var(--text-faint); font-family: var(--font-mono); font-size:12px; }
  .acc-col{ color: var(--text-faint); }

  .hm-scroll{ overflow-x:auto; padding-bottom:4px; }
  .hm-inner{ width:max-content; }
  .hm-months{ display:flex; gap:3px; font-size:10px; color: var(--text-faint); margin-bottom:4px; height:13px; }
  .hm-months span{ width:11px; flex:none; white-space:nowrap; overflow:visible; }
  .hm-grid{ display:flex; gap:3px; }
  .hm-col{ display:flex; flex-direction:column; gap:3px; }
  .hm-cell{ display:inline-block; width:11px; height:11px; border-radius:2px; background: var(--bg-elev-2); }
  .hm-1{ background: color-mix(in srgb, var(--accent) 28%, var(--bg-elev-2)); }
  .hm-2{ background: color-mix(in srgb, var(--accent) 52%, var(--bg-elev-2)); }
  .hm-3{ background: color-mix(in srgb, var(--accent) 76%, var(--bg-elev-2)); }
  .hm-4{ background: var(--accent); }
  .hm-future{ background: transparent; }
  .hm-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color: var(--text-faint); margin-top:10px; }
  .hm-legend{ display:inline-flex; gap:3px; align-items:center; }

  .pf-modes{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
  .pf-mode{
    display:flex; justify-content:space-between; align-items:center; gap:8px; background: var(--bg-elev-2);
    border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12px; color: var(--text-faint);
  }
  .pf-mode b{ font-family: var(--font-display); font-size:18px; color: var(--accent); }
  .achv-prog{ height:4px; border-radius:999px; background: var(--bg-elev-2); margin-top:6px; overflow:hidden; }
  .achv-prog div{ height:100%; background: var(--accent); border-radius:999px; }
  .achv-prog-txt{ font-size:9px; color: var(--text-faint); margin-top:3px; font-family: var(--font-mono); }
  .achv-tile.locked{ opacity:.6; }

  /* =====================================================================
     leaderboard
     ===================================================================== */
  .lb-champion{
    display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin: -10px auto 20px;
    padding:8px 18px; border-radius:999px; width:fit-content; max-width:100%; font-size:13px;
    background: linear-gradient(90deg, var(--accent-bg), var(--bg-elev)); border:1px solid var(--accent-dim);
  }
  .lb-champion a{ color: var(--accent); font-weight:600; text-decoration:none; }
  .lb-champion b{ font-family: var(--font-mono); font-weight:500; }
  .lb-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:24px; }
  .lb-filters .seg{ flex-wrap:wrap; justify-content:center; }
  .seg.locked{ opacity:.4; pointer-events:none; }
  .lb-podium{ display:flex; justify-content:center; align-items:flex-end; gap:14px; margin: 6px 0 0; }
  .lb-podium:empty{ display:none; }
  .podium-col{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color: var(--text); width:180px; min-width:0; }
  .podium-medal{ font-size:26px; line-height:1; }
  .podium-col .lb-av{ width:58px; height:58px; font-size:18px; box-shadow: 0 0 0 2.5px var(--tc), 0 0 22px color-mix(in srgb, var(--tc) 40%, transparent); }
  .podium-name{ font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .podium-col:hover .podium-name, .podium-col.me .podium-name{ color: var(--accent); }
  .podium-wpm{ font-family: var(--font-display); font-size:26px; font-weight:700; color: var(--accent); line-height:1.1; }
  .podium-wpm small{ font-size:12px; color: var(--text-faint); font-weight:500; }
  .podium-acc{ font-size:12px; color: var(--text-faint); }
  .podium-block{
    width:100%; margin-top:4px; border-radius:12px 12px 0 0; border:1px solid var(--border); border-bottom:none;
    display:flex; align-items:flex-start; justify-content:center; padding-top:10px;
    font-family: var(--font-display); font-size:24px; font-weight:700; color: var(--text-faint);
    background: linear-gradient(180deg, var(--bg-elev-2), transparent);
  }
  .podium-col.p1 .podium-block{ height:112px; color:#e8b647; border-color:#e8b64766; background: linear-gradient(180deg, #e8b64726, transparent); }
  .podium-col.p2 .podium-block{ height:84px; color:#b9c3cf; border-color:#b9c3cf55; background: linear-gradient(180deg, #b9c3cf1f, transparent); }
  .podium-col.p3 .podium-block{ height:62px; color:#c58a5c; border-color:#c58a5c55; background: linear-gradient(180deg, #c58a5c1f, transparent); }
  @media (max-width: 560px){
    .lb-podium{ gap:6px; }
    .podium-col{ width:32%; }
    .podium-col .lb-av{ width:44px; height:44px; font-size:14px; }
    .podium-wpm{ font-size:19px; }
    .podium-col .tier-badge{ display:none; }
  }
  #lbTableWrap{ border-top-left-radius:12px; border-top-right-radius:12px; }
  .lb-av{
    width:28px; height:28px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:11px; color: var(--tc); background: var(--bg-elev-2); box-shadow: 0 0 0 1.5px var(--tc);
  }
  .lb-table a.u{ display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--text); min-width:0; }
  .lb-table a.u:hover .lb-name{ color: var(--accent); }
  .lb-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
  .lb-table tr.me td{ background: var(--accent-bg); }
  .lb-main .acc-col, .lb-main .date-col{ color: var(--text-faint); font-size:12px; }
  .lb-main td.mode-col{ color: var(--text-faint); font-family: var(--font-mono); font-size:12px; }
  @media (max-width: 640px){
    .lb-main .mode-col, .lb-main .date-col{ display:none; }
    .lb-main .tier-badge{ display:none; }
    .lb-name{ max-width:140px; }
  }
  .lb-msg{ text-align:center; color: var(--text-faint); padding:26px !important; font-family: var(--font-mono); font-size:12px; }
  .lb-msg.err{ color: var(--error); }
  .lb-me{
    position:sticky; bottom:12px; margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:12px 16px; border-radius:12px; background: var(--bg-elev-2); border:1px solid var(--accent-dim);
    box-shadow: 0 10px 30px rgba(0,0,0,.45); z-index:5; font-size:13px;
  }
  .lb-me-rank{ font-family: var(--font-display); font-weight:700; font-size:18px; color: var(--accent); }
  .lb-me-rank small{ font-size:12px; color: var(--text-faint); font-weight:500; }
  .lb-me-goal{ color: var(--text-faint); margin-left:auto; }
  .lb-me .btn{ margin-left:auto; padding:7px 14px; }
  .lb-rules{ font-size:11px; color: var(--text-faint); text-align:center; line-height:1.6; margin: 18px auto 0; max-width:680px; }

  /* =====================================================================
     settings tab
     ===================================================================== */
  .set-panel{ margin-bottom:16px; }
  .bg-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-bottom:6px; }
  .bg-tile{
    position:relative; padding:0; border:2px solid var(--border); border-radius:12px; overflow:hidden;
    background: var(--bg-elev-2); aspect-ratio: 16/10; color: var(--text);
    display:flex; flex-direction:column; justify-content:flex-end; transition: border-color .15s, transform .15s;
  }
  .bg-tile:hover{ transform: translateY(-2px); border-color: var(--border-strong); }
  .bg-tile.active{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
  .bg-tile-img{ position:absolute; inset:0; background-size:cover; background-position:center; }
  .bg-tile-none{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color: var(--text-faint); }
  .bg-tile-label{ position:relative; font-size:11px; padding:10px 8px 5px; background: linear-gradient(transparent, rgba(0,0,0,.78)); text-align:left; color:#fff; }
  .bg-tile-del{
    position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; z-index:1;
    background: rgba(0,0,0,.7); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1;
  }
  .bg-tile-del:hover{ background: var(--error); }
  .bg-tile-add{ border-style:dashed; }
  .set-note{ font-size:12px; color: var(--text-faint); line-height:1.5; margin: 6px 0 12px; }
  .set-note.err{ color: var(--error); }
  .bg-tune{ display:grid; grid-template-columns: 260px 1fr; gap:20px; align-items:start; margin: 10px 0 6px; transition: opacity .15s; }
  .bg-tune.disabled{ opacity:.35; pointer-events:none; }
  @media (max-width: 640px){ .bg-tune{ grid-template-columns: 1fr; } }
  .bg-focus{
    position:relative; aspect-ratio:16/9; border-radius:10px; border:1px solid var(--border);
    background-size:cover; background-color: var(--bg-elev-2); cursor:crosshair; touch-action:none;
  }
  .bg-focus-dot{ position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55); pointer-events:none; }
  .set-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
  .bg-sliders .set-row:first-child, .demo-wrap + .set-row{ border-top:none; }
  .set-label{ font-size:13px; color: var(--text); }
  .set-label small{ display:block; font-size:11px; color: var(--text-faint); margin-top:2px; max-width:320px; }
  .set-ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .set-ctl input[type=range]{ width:160px; accent-color: var(--accent); }
  .range-val{ font-family: var(--font-mono); font-size:12px; color: var(--text-faint); width:44px; }
  .set-seg{ flex-wrap:wrap; }
  .set-seg button{ font-size:12px; }
  .switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
  .switch input{ opacity:0; width:0; height:0; }
  .switch span{ position:absolute; inset:0; background: var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:999px; transition: background .15s; cursor:pointer; }
  .switch span::before{ content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; border-radius:50%; background: var(--text-faint); transition: transform .15s, background .15s; }
  .switch input:checked + span{ background: var(--accent-bg); border-color: var(--accent-dim); }
  .switch input:checked + span::before{ transform: translateX(18px); background: var(--accent); }
  .switch input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
  .accent-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
  .accent-sw{ width:26px; height:26px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  .accent-sw.active{ border-color: var(--text); }
  .accent-auto{ width:auto; padding:0 10px; border-radius:999px; background: var(--bg-elev-2); color: var(--text); font-size:11px; border:1px solid var(--border); }
  .accent-auto.active{ border-color: var(--accent); color: var(--accent); }
  .accent-custom{ position:relative; overflow:hidden; display:inline-block; background: conic-gradient(#f05252, #e8b647, #7fc95c, #4fd1d9, #5b9dea, #b794ff, #f05252); }
  .accent-custom input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
  .demo-wrap{ background: var(--bg-elev-2); border-radius:12px; padding:14px 18px; margin-bottom:8px; }
  .demo-text{ font-size:24px !important; max-height: calc(1.55em * 2) !important; cursor:default; }
  .set-footer{ text-align:center; margin-top:6px; }
  .set-footer .btn{ display:inline-flex; }

  /* =====================================================================
     phones: header wraps into two rows (logo + profile, then the nav), nothing overflows sideways
     ===================================================================== */
  /* five nav items don't fit beside the logo and profile on small laptops: the nav gets its own row */
  @media (max-width: 960px){
    header{ flex-wrap: wrap; gap: 12px; }
    .profile{ margin-left:auto; }
    nav{ order:3; width:100%; justify-content:center; }
  }
  @media (max-width: 760px){
    header{ flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
    .logo-mark{ width:34px; height:34px; }
    .logo-wordmark{ font-size:17px; }
    .profile{ margin-left:auto; gap:8px; }
    nav{ order:3; width:100%; justify-content:space-between; }
    nav button{ flex:1; justify-content:center; padding:7px 4px; font-size:12px; gap:5px; white-space:nowrap; }
    main{ padding: 44px 14px 40px; }
    .view-title{ font-size:22px; }
  }
  @media (max-width: 440px){
    nav{ gap:2px; }
    nav button{ font-size:11px; padding:7px 2px; }
    nav button .icon{ display:none; }
    #playerNameDisplay{ display:none; }
    .profile-pill{ padding:3px; }
    #langSwitcher button{ padding:3px 5px !important; }
    .fb-status{ display:none; }
  }

  /* =====================================================================
     lessons (js/lessons.js): zigzag map + guided drill with a finger-coloured keyboard
     ===================================================================== */
  #view-lessons{
    --ls-lp:#ef6f6c; --ls-lr:#f0a35e; --ls-lm:#e8c547; --ls-li:#6cc36c; --ls-ri:#4fb8c9;
    --ls-rm:#6c8ef0; --ls-rr:#a17cf0; --ls-rp:#e57ac9; --ls-th:#9aa0a6;
    --ls-gold-hi: color-mix(in srgb, var(--accent) 72%, #fff);
    --ls-gold-lo: color-mix(in srgb, var(--accent) 70%, #000);
  }
  .ls-map{ max-width:720px; margin:0 auto; }
  .ls-overview{ display:flex; align-items:center; gap:16px; background: var(--bg-elev); border:1px solid var(--border); border-radius:16px; padding:14px 18px; }
  .ls-ring{ flex:none; }
  .ls-ring circle:last-of-type{ transition: stroke-dashoffset .6s ease; }
  .ls-ring text{ fill: var(--text); font-family: var(--font-display); font-weight:700; font-size:14px; }
  .ls-ov-text{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
  .ls-ov-text b{ font-family: var(--font-display); font-size:15px; font-weight:600; }
  .ls-ov-text span{ color: var(--text-faint); font-size:12px; font-family: var(--font-mono); }
  #lsContinue, #lsStart, #lsBtnNext{ background: var(--accent); border-color: var(--accent); color:#14100a; font-weight:600; }
  #lsContinue:hover, #lsStart:hover, #lsBtnNext:hover{ background: var(--ls-gold-hi); }
  #view-lessons kbd{ font-family: var(--font-mono); font-size:10px; opacity:.65; }

  .ls-unit{ display:flex; align-items:center; gap:14px; margin:34px 0 4px; padding:13px 18px; border-radius:16px; border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background: linear-gradient(120deg, var(--accent-bg), var(--bg-elev) 70%); }
  .ls-unit-num{ width:42px; height:42px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:19px; color:#14100a;
    background: linear-gradient(160deg, var(--ls-gold-hi), var(--accent)); box-shadow: 0 4px 0 var(--ls-gold-lo); }
  .ls-unit-text{ min-width:0; }
  .ls-unit h3{ margin:0; font-family: var(--font-display); font-size:16px; font-weight:600; }
  .ls-unit p{ margin:2px 0 0; color: var(--text-faint); font-size:12px; font-family: var(--font-mono); }
  .ls-unit-stars{ margin-left:auto; font-family: var(--font-mono); font-size:12px; color: var(--accent); white-space:nowrap; }
  .ls-path{ position:relative; padding:30px 0 4px; overflow-x:clip; }
  .ls-trail{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .ls-trail .bg, .ls-trail .fg{ fill:none; stroke-width:6; stroke-linecap:round; stroke-dasharray:2 14; }
  .ls-trail .bg{ stroke: var(--border-strong); }
  .ls-trail .fg{ stroke: var(--accent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
  .ls-node-wrap{ position:relative; height:142px; width:max-content; margin:0 auto; display:flex; flex-direction:column; align-items:center;
    transform: translateX(calc(var(--o) * var(--ls-k, 1))); }
  .ls-node{ position:relative; z-index:1; width:76px; height:76px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-size:27px; font-weight:700; transition: transform .12s; }
  .ls-node svg{ width:30px; height:30px; }
  .ls-node.done{ color:#14100a; background: radial-gradient(circle at 35% 30%, var(--ls-gold-hi), var(--accent) 60%, var(--accent-dim));
    box-shadow: 0 7px 0 var(--ls-gold-lo), 0 10px 22px rgba(0,0,0,.45); }
  .ls-node.done:hover{ transform: translateY(-2px); }
  .ls-node.current{ color: var(--accent); background: var(--bg-elev-2); border:3px solid var(--accent);
    box-shadow: 0 7px 0 var(--accent-bg), 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 35%, transparent);
    animation: ls-bob 1.8s ease-in-out infinite; }
  .ls-node.current::after{ content:''; position:absolute; inset:-14px; border-radius:50%; border:2px solid color-mix(in srgb, var(--accent) 45%, transparent); animation: ls-ping 1.8s ease-out infinite; }
  .ls-node.locked{ color: var(--text-dim); background: var(--bg-elev); border:2px solid var(--border); box-shadow: 0 6px 0 rgba(0,0,0,.35); cursor:not-allowed; }
  @keyframes ls-bob{ 50%{ transform: translateY(-6px); } }
  @keyframes ls-ping{ from{ transform: scale(.85); opacity:1; } to{ transform: scale(1.25); opacity:0; } }
  .ls-tag{ position:absolute; top:-32px; left:50%; transform: translateX(-50%); z-index:2; background: var(--accent); color:#14100a; font-family: var(--font-display); font-weight:700;
    font-size:11px; letter-spacing:.8px; padding:5px 10px; border-radius:8px; white-space:nowrap; animation: ls-bob 1.8s ease-in-out infinite; }
  .ls-tag::after{ content:''; position:absolute; bottom:-5px; left:50%; margin-left:-5px; border:5px solid transparent; border-bottom:0; border-top-color: var(--accent); }
  .ls-node-label, .ls-node-stars{ position:relative; z-index:1; background: var(--bg); border-radius:6px; }
  .ls-node-label{ margin-top:10px; padding:2px 8px; font-size:13px; font-weight:500; white-space:nowrap; }
  .ls-node-wrap.is-locked .ls-node-label{ color: var(--text-dim); }
  .ls-node-stars{ padding:0 6px; font-size:13px; letter-spacing:2px; color: var(--accent); min-height:17px; }
  .ls-node-stars:empty{ background:none; }
  .ls-node-stars .off{ color: var(--border-strong); }
  html.has-bg .ls-node-label, html.has-bg .ls-node-stars:not(:empty){ background: rgba(8,8,11,.78); }
  .ls-finish{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:26px; color: var(--text-faint); font-size:13px; text-align:center; }
  .ls-trophy{ width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; background: var(--bg-elev); border:1px dashed var(--border-strong); filter: grayscale(1); opacity:.55; }
  .ls-finish.won .ls-trophy{ filter:none; opacity:1; border:1px solid var(--accent); background: var(--accent-bg); }
  .ls-note{ text-align:center; color: var(--text-faint); font-size:12px; margin-top:26px; }

  .ls-lesson{ max-width:1040px; margin:0 auto; }
  .ls-panel{ position:relative; padding:22px 28px 28px; border-radius:18px; }
  .ls-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .ls-back{ display:inline-flex; align-items:center; gap:6px; background: var(--bg-elev-2); border:1px solid var(--border-strong); color: var(--text-faint); border-radius:10px; padding:7px 12px; font-size:13px; }
  .ls-back:hover{ color: var(--text); }
  .ls-panel h3{ text-transform:none; letter-spacing:normal; color: var(--text); display:block; }
  .ls-top h3{ margin:0; font-family: var(--font-display); font-size:21px; font-weight:600; }
  .ls-of{ color: var(--text-faint); font-size:13px; }
  .ls-bar{ height:6px; background: var(--bg-elev-2); border-radius:999px; overflow:hidden; margin:16px 0 22px; }
  .ls-bar div{ height:100%; width:0; background: linear-gradient(90deg, var(--accent), var(--ls-gold-hi)); border-radius:999px; transition: width .2s; }
  .ls-intro{ font-size:16px; line-height:1.7; color: color-mix(in srgb, var(--text) 85%, transparent); max-width:760px; margin:0 0 20px; }
  .ls-line{ font-family: var(--font-mono); font-size:32px; letter-spacing:1px; line-height:1.6; background: var(--bg); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; white-space:pre-wrap; word-break:normal; overflow-wrap:normal; user-select:none; min-height:106px; }
  .ls-line span{ color: var(--text-dim); border-radius:4px; }
  .ls-line span.ok{ color: var(--text); }
  .ls-line span.fixed{ color: var(--error); }
  .ls-line span.cur{ color: var(--accent); background: var(--accent-bg); box-shadow: inset 0 -3px 0 var(--accent); }
  .ls-line span.cur.bad{ background: var(--error-bg); box-shadow: inset 0 -3px 0 var(--error); animation: ls-shake .18s; }
  @keyframes ls-shake{ 25%{ transform: translateX(-3px); } 75%{ transform: translateX(3px); } }
  .ls-hint-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
  .ls-hint{ font-size:15px; }
  .ls-hint b{ color: var(--accent); font-family: var(--font-mono); font-size:17px; }
  .ls-hint i{ font-style:normal; padding:2px 8px; border-radius:6px; color:#0a0a0c; font-weight:600; font-size:13px; }
  .ls-stats{ margin-left:auto; display:flex; gap:20px; font-family: var(--font-mono); font-size:13px; color: var(--text-faint); }
  .ls-stats b{ color: var(--text); font-size:16px; }
  /* every key is --w units wide; a unit is one key plus one gap, so all rows end at the same edge */
  .ls-kb{ --ku:44px; --kg:6px; display:flex; flex-direction:column; gap:var(--kg); align-items:center; margin:6px auto 18px; user-select:none; }
  .ls-kb-row{ display:flex; gap:var(--kg); }
  .ls-key{ width: calc(var(--w, 1) * (var(--ku) + var(--kg)) - var(--kg)); height:42px; border-radius:9px; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-mono); font-size:14px; font-weight:600; color:#0a0a0c;
    opacity:.34; position:relative; transition: transform .08s, opacity .1s, box-shadow .1s, filter .1s; }
  .ls-key.wide{ font-size:11px; }
  .ls-key.held{ opacity:1; filter: brightness(1.18); transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
  .ls-key.hit{ animation: ls-hit .18s ease-out; }
  @keyframes ls-hit{ 40%{ transform: translateY(3px) scale(.92); filter: brightness(1.35); } }
  .ls-key.home::after{ content:''; position:absolute; bottom:6px; width:12px; height:2px; border-radius:2px; background:#0a0a0c; opacity:.6; }
  .ls-key.lit{ opacity:.75; }
  .ls-key.next{ opacity:1; transform: translateY(-3px); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 8px 18px rgba(0,0,0,.5); }
  .ls-key.miss{ animation: ls-shake .18s; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--error); }
  /* hands lying over the keyboard (drawn by lessons.js); the stage leaves room below for the palms */
  .ls-kb-stage{ position:relative; width:max-content; max-width:100%; margin:6px auto 0; padding-bottom:150px; }
  .ls-kb-stage .ls-kb{ margin:0; }
  .ls-hands-ov{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
  .ls-palm2{ fill: rgba(28,28,34,.6); stroke: rgba(234,231,224,.42); stroke-width:1.6; stroke-linejoin:round; transition: stroke .2s; }
  .ls-f2 .shape{ fill: rgba(46,46,54,.38); stroke: rgba(234,231,224,.55); stroke-width:1.6; stroke-linejoin:round; transition: fill .15s, stroke .15s; }
  .ls-f2 .nail{ fill: rgba(255,255,255,.13); }
  .ls-f2.on .shape{ fill: color-mix(in srgb, var(--fc, #9aa0a6) 70%, transparent); stroke: rgba(255,255,255,.92); stroke-width:2; }
  .ls-f2.on .nail{ fill: rgba(255,255,255,.42); }
  .ls-hands-ov.oops .ls-palm2{ stroke: var(--error); }
  .ls-ripple{ fill:none; stroke: var(--accent); stroke-width:3; transform-box: fill-box; transform-origin:center; animation: ls-ripple .45s ease-out forwards; }
  .ls-ripple.bad{ stroke: var(--error); }
  @keyframes ls-ripple{ from{ transform: scale(.55); opacity:.95; } to{ transform: scale(1.7); opacity:0; } }
  .ls-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin-top:12px; font-size:11px; color: var(--text-faint); }
  .ls-legend span::before{ content:''; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; background: var(--c); }
  .ls-intro-btns{ display:flex; justify-content:center; margin-top:22px; }
  .ls-result{ position:absolute; inset:0; z-index:3; display:none; align-items:center; justify-content:center; border-radius:18px; background: rgba(10,10,12,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .ls-result.show{ display:flex; }
  .ls-result-card{ background: var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:18px; padding:28px 36px; text-align:center; min-width:340px; animation: ls-pop .25s ease; }
  @keyframes ls-pop{ from{ transform: scale(.92); opacity:0; } }
  .ls-result-card h3{ margin:0; font-family: var(--font-display); font-size:22px; font-weight:600; }
  .ls-result-stars{ font-size:44px; letter-spacing:6px; margin:6px 0 4px; }
  .ls-result-stars span{ display:inline-block; color: var(--border-strong); }
  .ls-result-stars span.on{ color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 50%, transparent); animation: ls-star .45s ease backwards; }
  .ls-result-stars span:nth-child(2){ animation-delay:.12s; } .ls-result-stars span:nth-child(3){ animation-delay:.24s; }
  @keyframes ls-star{ from{ transform: scale(0) rotate(-40deg); } 70%{ transform: scale(1.25); } }
  .ls-result-nums{ display:flex; justify-content:center; gap:28px; margin:16px 0 8px; font-family: var(--font-mono); color: var(--text-faint); font-size:12px; }
  .ls-result-nums b{ display:block; color: var(--text); font-size:26px; font-family: var(--font-display); }
  .ls-unlock{ min-height:20px; margin:4px 0 18px; font-size:13px; color: var(--accent); }
  .ls-result-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .ls-sparks{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:70; }
  .ls-sparks i{ position:absolute; width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: ls-spark .9s ease-out forwards; }
  @keyframes ls-spark{ to{ transform: translate(var(--dx), var(--dy)) scale(.2); opacity:0; } }
  /* shortcut drills: a row of chips instead of a line of letters */
  .ls-line.combos{ display:flex; flex-wrap:wrap; gap:10px; font-size:15px; letter-spacing:0; line-height:1.3; padding:16px; max-height:220px; overflow-y:auto; }
  .ls-chip{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:112px; padding:10px 12px; border-radius:12px;
    border:1px solid var(--border); background: var(--bg-elev); transition: transform .15s, border-color .15s, background .15s; }
  .ls-line .ls-chip-keys{ font-family: var(--font-mono); font-weight:700; font-size:16px; color: var(--text-dim); }
  .ls-line .ls-chip-name{ font-family: var(--font-body); font-size:11px; color: var(--text-dim); }
  .ls-line .ls-chip.cur{ border-color: var(--accent); background: var(--accent-bg); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
  .ls-line .ls-chip.cur .ls-chip-keys{ color: var(--accent); }
  .ls-line .ls-chip.cur .ls-chip-name{ color: var(--text); }
  .ls-line .ls-chip.cur.bad{ border-color: var(--error); background: var(--error-bg); animation: ls-shake .18s; }
  .ls-line .ls-chip.ok{ border-color: color-mix(in srgb, var(--success, #4caf7a) 45%, var(--border)); }
  .ls-line .ls-chip.ok .ls-chip-keys{ color: var(--text); }
  .ls-line .ls-chip.fixed .ls-chip-keys{ color: var(--error); }
  .ls-hint .ls-act{ font-family: var(--font-body); font-size:16px; }
  .ls-hint .ls-cap{ display:inline-block; font-family: var(--font-mono); font-size:13px; font-weight:700; padding:2px 8px; margin:0 3px;
    border-radius:6px; border:1px solid var(--border-strong); border-bottom-width:3px; background: var(--bg-elev-2); color: var(--text); }
  .ls-hint .ls-quiz{ color: var(--text-faint); font-style:italic; }
  /* track switch on the map */
  .ls-tracks{ display:flex; gap:6px; padding:5px; margin:0 auto 22px; width:max-content; max-width:100%;
    background: var(--bg-elev); border:1px solid var(--border); border-radius:999px; }
  .ls-tracks button{ height:38px; padding:0 18px; border:none; border-radius:999px; background:transparent; color: var(--text-faint);
    font-family: var(--font-body); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition: background .15s, color .15s; }
  .ls-tracks button.active{ background: var(--accent); color:#14100a; }
  .ls-tracks button:not(.active):hover{ color: var(--text); }
  .ls-new{ font-size:9px; text-transform:uppercase; letter-spacing:.6px; padding:2px 6px; border-radius:999px; margin-left:4px; vertical-align:2px;
    background: var(--accent-bg); color: var(--accent); border:1px solid var(--accent-dim); }
  .ls-tracks button.active .ls-new{ background: rgba(0,0,0,.18); color:#14100a; border-color: transparent; }
  @media (max-width: 1080px){ .ls-kb{ --ku:38px; --kg:5px; } .ls-key{ height:38px; } }
  @media (max-width: 900px){ .ls-panel{ padding:18px; } .ls-line{ font-size:24px; } .ls-stats{ margin-left:0; } }
  @media (max-width: 640px){
    .ls-hands-ov{ display:none; } .ls-kb-stage{ padding-bottom:0; }
    .ls-kb{ --ku:19px; --kg:3px; gap:3px; }
    .ls-key{ height:30px; font-size:9px; border-radius:5px; } .ls-key.wide{ font-size:7px; }
    .ls-tracks button{ padding:0 12px; font-size:12px; } .ls-chip{ min-width:92px; }
    .ls-overview{ flex-wrap:wrap; } .ls-ring{ display:none; } #lsContinue{ width:100%; justify-content:center; }
    .ls-unit-stars{ display:none; }
    .ls-result-card{ min-width:0; width:calc(100% - 24px); padding:22px 16px; }
  }