/* manuscript / typing output — removed from view; kept in DOM only so the
     underlying typing/lesson/trial logic (which writes into it invisibly)
     keeps working without errors */
  .manuscript{
    display:none !important;
  }
  .manuscript::before{
    content:"";
    position:absolute; inset:6px;
    border:1px solid rgba(255,157,46,0.18);
    border-radius:9px;
    pointer-events:none;
  }
  .manuscript-label{
    font-size:0.62rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .manuscript-label button{
    font-family:'JetBrains Mono', monospace;
    font-size:0.62rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    background:none;
    border:1px solid var(--stone-3);
    color:var(--ink-dim);
    padding:3px 9px;
    border-radius:6px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .manuscript-label button:hover{
    color:var(--gold-bright);
    border-color:var(--gold-bright);
  }
  .manuscript-text{
    font-family:'Noto Sans Khmer','Noto Serif Khmer', sans-serif;
    font-size:1.5rem;
    line-height:1.8;
    color:var(--ink);
    min-height:2.2em;
    word-break:break-word;
    white-space:pre-wrap;
  }
  .manuscript-text.ink-flash{
    text-shadow:0 0 16px rgba(255,209,102,0.55);
    transition:text-shadow .5s ease;
  }
  html.anim-mode-minimal .manuscript-text.ink-flash,
  html.anim-mode-off .manuscript-text.ink-flash,
  html.performance-mode .manuscript-text.ink-flash {
    text-shadow: none !important;
    transition: none !important;
  }
  .manuscript-text .cursor{
    display:inline-block;
    width:2.5px;
    height:1.25em;
    background:var(--gold-bright);
    margin-left:1px;
    vertical-align:-0.2em;
    border-radius:1px;
    box-shadow:0 0 8px var(--gold-bright), 0 0 16px rgba(255,209,102,0.45);
    animation:cursor-neon-breathe 1.1s ease-in-out infinite alternate;
  }
  html.anim-mode-minimal .manuscript-text .cursor,
  html.anim-mode-off .manuscript-text .cursor,
  html.performance-mode .manuscript-text .cursor {
    box-shadow: none !important;
    animation: none !important;
    opacity: 0.9 !important;
  }
  @keyframes cursor-neon-breathe{
    0%{ opacity:1; box-shadow:0 0 8px var(--gold-bright), 0 0 16px rgba(255,209,102,0.5); transform:scaleY(1); }
    50%{ opacity:0.85; }
    100%{ opacity:0.18; box-shadow:none; transform:scaleY(0.96); }
  }
  .manuscript-placeholder{
    color:#4d463a;
    font-family:'JetBrains Mono', monospace;
    font-size:0.8rem;
    letter-spacing:0.03em;
  }

  .board-wrap{
    position:relative;
    padding:22px;
    border-radius:22px;
    background:linear-gradient(180deg, #141830, #0c0e1c);
    border:1px solid #2a3155;
    box-shadow:
      0 30px 60px -20px rgba(0,0,0,0.65),
      inset 0 1px 0 rgba(255,255,255,0.04);
    transition:border-color .15s ease, transform .12s ease;
    transform-style:preserve-3d;
    will-change:transform;
  }
  .board-wrap.layer-ctrl{
    border-color: color-mix(in srgb, var(--temple-blue) 55%, #2a3155);
  }
  .board-wrap.layer-altgr{
    border-color: color-mix(in srgb, var(--temple-red) 55%, #2a3155);
  }
  .board-wrap.layer-shift{
    border-color: color-mix(in srgb, var(--gold) 55%, #2a3155);
  }
  .board-wrap::before{
    content:"";
    position:absolute; inset:0;
    border-radius:22px;
    background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,209,102,0.18), transparent 75%);
    opacity:0;
    transition:opacity .18s ease;
    pointer-events:none;
    z-index:1;
  }
  .board-wrap.layer-shift::before{
    opacity:1;
  }
  .board-wrap.layer-ctrl::before{
    background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(45,212,167,0.18), transparent 75%);
    opacity:1;
  }
  .board-wrap.layer-altgr::before{
    background:radial-gradient(ellipse 90% 60% at 50% 0%, rgba(255,90,112,0.18), transparent 75%);
    opacity:1;
  }
  .board-wrap.trial-active{
    animation:trial-pulse 2.2s ease-in-out infinite;
  }
  @keyframes trial-pulse{
    0%,100%{ box-shadow:0 30px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,209,102,0.35), 0 0 30px rgba(255,209,102,0.18), inset 0 1px 0 rgba(255,255,255,0.04); }
    50%{ box-shadow:0 30px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,209,102,0.6), 0 0 46px rgba(255,209,102,0.32), inset 0 1px 0 rgba(255,255,255,0.04); }
  }

  /* ---------- streak heat (Temple Trial) ---------- */
  .board-wrap.heat-1{
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,209,102,0.45), 0 0 36px rgba(255,209,102,0.26), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .board-wrap.heat-2{
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(150,160,255,0.55), 0 0 50px rgba(140,150,255,0.36), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .board-wrap.heat-3{
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,80,150,0.7), 0 0 66px rgba(255,80,150,0.48), inset 0 1px 0 rgba(255,255,255,0.04);
    animation:heat-pulse 1.3s ease-in-out infinite;
  }
  @keyframes heat-pulse{
    0%,100%{ filter:brightness(1) saturate(1); }
    50%{ filter:brightness(1.1) saturate(1.15); }
  }
  .board-wrap.heat-1 .torch .flame{ animation-duration:1.6s; }
  .board-wrap.heat-2 .torch .flame{ animation-duration:1.15s; filter:saturate(1.15); }
  .board-wrap.heat-3 .torch .flame{
    animation-duration:0.75s;
    filter:saturate(1.4) brightness(1.2) hue-rotate(-6deg);
  }
  .board-wrap.heat-2 .torch .glow, .board-wrap.heat-3 .torch .glow{
    background:radial-gradient(circle, rgba(255,110,170,0.4), transparent 70%);
  }


  /* ---------- rune ring (trial correct keystroke) ---------- */
  .rune-ring{
    position:absolute; left:50%; top:50%;
    width:10px; height:10px;
    transform:translate(-50%,-50%);
    border:2px solid var(--gold-bright);
    clip-path:polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    opacity:0.95;
    pointer-events:none;
    z-index:5;
    animation:rune-expand .55s ease-out forwards;
  }
  @keyframes rune-expand{
    to{ width:76px; height:76px; opacity:0; transform:translate(-50%,-50%) rotate(55deg); }
  }

  /* ---------- new-record celebration ---------- */
  .record-flash{
    position:fixed; inset:0; pointer-events:none; z-index:60;
    background:radial-gradient(circle at 50% 40%, rgba(255,209,102,0.4), transparent 62%);
    animation:record-flash-anim .95s ease-out forwards;
  }
  @keyframes record-flash-anim{
    0%{ opacity:0; }
    18%{ opacity:1; }
    100%{ opacity:0; }
  }
  .record-pop{
    position:fixed; left:50%; top:36%;
    transform:translate(-50%,-50%) scale(0.5);
    font-family:'Orbitron', sans-serif;
    font-style:normal; font-weight:700; text-transform:uppercase;
    font-size:2.1rem; letter-spacing:0.04em;
    color:var(--gold-bright);
    text-shadow:0 0 30px rgba(255,209,102,0.85), 0 2px 10px rgba(0,0,0,0.6);
    pointer-events:none; z-index:61;
    white-space:nowrap;
    animation:record-pop-anim 1.4s cubic-bezier(.22,.9,.32,1.2) forwards;
  }
  @keyframes record-pop-anim{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(0.5); }
    22%{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }
    38%{ transform:translate(-50%,-50%) scale(1); }
    78%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%,-62%) scale(1.04); }
  }

  /* ---------- temple trial panel ---------- */
  .trial-panel{
    position:relative;
    z-index:10;
    width:min(90vw, 840px);
    margin:14px auto 18px;
    padding:20px 26px;
    border-radius:18px;
    background:rgba(14, 17, 27, 0.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255, 157, 46, 0.45);
    box-shadow:0 18px 48px rgba(0,0,0,0.82), 0 0 24px rgba(255,157,46,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    animation:panel-in .35s ease;
  }
  .trial-panel[hidden]{ display:none; }
  @keyframes panel-in{
    from{ opacity:0; transform:translateY(-6px);}
    to{ opacity:1; transform:translateY(0);}
  }
  .trial-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:'Orbitron', sans-serif;
    font-size:0.8rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--gold-bright);
    margin-bottom:14px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .trial-stats b{ color:#ffffff; font-weight:700; text-shadow:0 0 10px rgba(255,209,102,0.4); }
  .trial-word{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    font-family:'Noto Sans Khmer','Noto Serif Khmer', sans-serif;
    font-size:2.4rem;
    background:rgba(0,0,0,0.32);
    border:1px solid rgba(255,255,255,0.07);
    border-radius:12px;
    padding:12px 18px;
  }
  .tw-char{
    color:#8c9cb6;
    text-shadow:0 2px 6px rgba(0,0,0,0.85);
    transition:color .2s ease;
  }
  .tw-char.done{ color:var(--gold-bright); text-shadow:0 0 14px rgba(255,209,102,0.6); }
  .tw-char.current{
    color:#ffffff;
    font-weight:700;
    text-shadow:0 0 18px rgba(255,255,255,0.7);
    position:relative;
  }
  .tw-char.current::after{
    content:"";
    position:absolute; left:2px; right:2px; bottom:-7px;
    height:3px;
    border-radius:2px;
    background:var(--gold-bright);
    box-shadow:0 0 8px var(--gold-bright);
    animation:blink 1s step-end infinite;
  }
  .tw-char.shake{ animation:key-shake .3s ease; color:var(--temple-red); }

  /* ---------- typing race ---------- */
  .race-toggle-btn{ position:relative; overflow:hidden; }
  .race-toggle-btn.on{
    color:#241405;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-color:var(--gold-bright);
    box-shadow:0 0 16px rgba(255,209,102,0.45);
  }
  .race-toggle-btn:hover{
    transform:translateY(-1px);
  }
  .race-toggle-btn:active{
    transform:translateY(0) scale(0.97);
  }

  .race-panel{
    position:relative;
    z-index:10;
    width:min(90vw, 840px);
    margin:14px auto 18px;
    padding:20px 26px;
    border-radius:18px;
    background:rgba(14, 17, 27, 0.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,209,102,0.45);
    box-shadow:0 18px 48px rgba(0,0,0,0.82), 0 0 28px rgba(255,209,102,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    animation:panel-in .35s ease;
  }
  .race-panel[hidden]{ display:none; }

  .race-setup-title{
    text-align:center;
    font-family:'Orbitron', sans-serif;
    font-size:1.5rem;
    font-weight:600;
    color:var(--gold-bright);
    text-shadow:0 0 16px rgba(255,209,102,0.4);
    letter-spacing:0.02em;
  }
  .race-setup-sub{
    text-align:center;
    font-size:0.74rem;
    color:var(--ink-dim);
    margin:4px 0 16px;
  }
  .race-setup-group{ margin-bottom:14px; }
  .race-setup-label{
    display:block;
    text-align:center;
    font-size:0.6rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:8px;
  }
  .race-pill-row{
    display:flex;
    gap:8px;
    justify-content:center;
    flex-wrap:wrap;
  }
  .race-pill{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:var(--stone-1);
    border:1px solid var(--stone-3);
    color:var(--ink-dim);
    padding:8px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:all .18s ease;
  }
  .race-pill:hover{
    color:var(--gold-bright);
    border-color:var(--gold-bright);
    box-shadow:0 0 12px rgba(255,209,102,0.25);
  }
  .race-pill:focus-visible, .race-start-btn:focus-visible, .race-toggle-btn:focus-visible,
  #raceExitLiveBtn:focus-visible, .race-result-actions button:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:2px;
  }
  .race-pill[aria-checked="true"]{
    color:#241405;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-color:var(--gold-bright);
    box-shadow:0 0 14px rgba(255,209,102,0.4);
  }
  .race-setup-best{
    text-align:center;
    font-size:0.62rem;
    color:var(--ink-dim);
    min-height:1.4em;
    margin:6px 0 14px;
  }
  .race-setup-best b{ color:var(--gold-bright); }
  .race-start-btn{
    display:block;
    margin:4px auto 0;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#241405;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border:1px solid var(--gold-bright);
    padding:11px 30px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 0 18px rgba(255,209,102,0.35);
    transition:all .18s ease;
  }
  .race-start-btn:hover{ box-shadow:0 0 28px rgba(255,209,102,0.55); transform:translateY(-1px); }
  .race-start-btn:active{ transform:translateY(0) scale(0.98); }

  .race-name-input{
    display:block;
    width:100%;
    max-width:260px;
    margin:0 auto;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.02em;
    text-align:center;
    color:var(--ink);
    background:var(--stone-1);
    border:1px solid var(--stone-3);
    border-radius:999px;
    padding:9px 16px;
    transition:all .18s ease;
  }
  .race-name-input::placeholder{ color:#4a5578; }
  .race-name-input:focus{
    outline:none;
    border-color:var(--gold-bright);
    box-shadow:0 0 14px rgba(255,209,102,0.3);
  }

  .lessons-lb-name-row{
    display:flex; align-items:center; justify-content:center; gap:10px;
    flex-wrap:wrap;
    margin:0 0 16px;
  }
  .lessons-lb-name-row .race-name-input{ margin:0; max-width:200px; }
  .lessons-lb-name-row .secondary-btn{ white-space:nowrap; }

  .race-leaderboard-link{
    display:block;
    margin:12px auto 0;
    background:none;
    border:none;
    font-family:'JetBrains Mono', monospace;
    font-size:0.64rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-dim);
    cursor:pointer;
    padding:4px 8px;
    transition:color .18s ease;
  }
  .race-leaderboard-link:hover{ color:var(--gold-bright); }

  .race-lb-tabs{ margin-bottom:10px; }
  .race-lb-list{
    list-style:none;
    margin:14px 0 0;
    padding:0;
    max-height:280px;
    overflow-y:auto;
  }
  .race-lb-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 12px;
    border-radius:10px;
    background:var(--stone-1);
    border:1px solid var(--stone-3);
    margin-bottom:7px;
    font-size:0.7rem;
    opacity:1; transform:translateX(0);
    animation:stat-bar-in .35s ease backwards;
  }
  .race-lb-row.rank-1{ border-color:var(--gold-bright); box-shadow:0 0 14px rgba(255,209,102,0.25); }
  .race-lb-rank{
    flex:0 0 auto;
    width:22px;
    text-align:center;
    font-family:'JetBrains Mono', monospace;
    font-weight:700;
    color:var(--gold-bright);
  }
  .race-lb-name{
    flex:1;
    min-width:0;
    color:var(--ink);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .race-lb-score{
    flex:0 0 auto;
    font-family:'JetBrains Mono', monospace;
    color:var(--ink-dim);
    text-align:right;
  }
  .race-lb-score b{ color:var(--gold-bright); font-weight:600; }
  .race-lb-empty{
    text-align:center;
    font-size:0.7rem;
    color:var(--ink-dim);
    padding:14px 0 4px;
  }

  .race-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:0.62rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:12px;
  }
  .race-top-label{ color:var(--ink-dim); }
  .race-top-label span{ color:var(--gold-bright); }
  .race-stats{ display:flex; gap:14px; flex-wrap:wrap; }
  .race-stats b{ color:var(--gold-bright); font-weight:600; }

  .race-track{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
    padding:10px 14px;
    border-radius:12px;
    background:rgba(12, 16, 28, 0.75);
    border:1px solid rgba(255, 255, 255, 0.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.4);
  }
  .race-track-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px 4px;
    border-bottom:1px solid rgba(255,255,255,0.06);
    margin-bottom:4px;
  }
  .race-lead-badge{
    font-family:'JetBrains Mono', monospace;
    font-size:0.64rem;
    font-weight:700;
    letter-spacing:0.04em;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:2px 8px;
    border-radius:999px;
    transition:all .2s ease;
  }
  .race-lead-badge.lead-player{
    color:#34d399;
    background:rgba(52, 211, 153, 0.12);
    border:1px solid rgba(52, 211, 153, 0.35);
    box-shadow:0 0 10px rgba(52, 211, 153, 0.25);
  }
  .race-lead-badge.lead-ai{
    color:#f43f5e;
    background:rgba(244, 63, 94, 0.12);
    border:1px solid rgba(244, 63, 94, 0.35);
    box-shadow:0 0 10px rgba(244, 63, 94, 0.25);
  }
  .race-lead-badge.lead-tied{
    color:#ffd166;
    background:rgba(255, 209, 102, 0.1);
    border:1px solid rgba(255, 209, 102, 0.25);
  }
  .race-finish-banner{
    font-family:'JetBrains Mono', monospace;
    font-size:0.6rem;
    font-weight:700;
    letter-spacing:0.06em;
    color:rgba(255,255,255,0.45);
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .race-track-row{ display:flex; align-items:center; gap:10px; }
  .race-track-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:0.66rem;
    font-weight:700;
    letter-spacing:0.04em;
    color:var(--gold-bright);
    min-width:110px;
    max-width:175px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .race-track-tag.ai-tag{
    color:#38bdf8;
  }
  .race-track-bar{
    flex:1;
    height:12px;
    border-radius:999px;
    background:rgba(255, 255, 255, 0.06);
    border:1px solid rgba(255, 255, 255, 0.1);
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
    position:relative;
  }
  .race-track-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg, #ffd166, #ffb703);
    box-shadow:0 0 10px rgba(255,209,102,0.65);
    transition:width .18s ease-out;
    position:relative;
  }
  .race-runner-head{
    position:absolute;
    right:-8px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:transform .15s ease;
  }
  .race-runner-head.player-runner{
    background:#ffd166;
    color:#0a0d18;
    box-shadow:0 0 8px rgba(255,209,102,0.9);
  }
  .race-runner-head.ai-runner{
    background:#38bdf8;
    color:#0a0d18;
    box-shadow:0 0 8px rgba(56,189,248,0.9);
  }
  .race-track-fill.ai-fill{
    background:linear-gradient(90deg, #38bdf8, #0ea5e9);
    box-shadow:0 0 10px rgba(56,189,248,0.65);
  }
  .race-track-fill.race-fast{
    box-shadow:0 0 16px 2px rgba(255,209,102,0.85);
  }
  .race-track-fill.ai-fill.race-fast{
    box-shadow:0 0 16px 2px rgba(56,189,248,0.85);
  }
  .race-ai-pill-row .race-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .race-ai-pill-row .ai-pill-name{
    font-weight:600;
  }
  .race-ai-pill-row .ai-pill-wpm{
    font-size:0.6rem;
    font-family:'JetBrains Mono', monospace;
    opacity:0.75;
    background:rgba(255,255,255,0.08);
    padding:1px 5px;
    border-radius:4px;
  }
  .race-ai-pill-row .race-pill[aria-checked="true"] .ai-pill-wpm{
    background:rgba(0,0,0,0.25);
    opacity:1;
  }
  .race-track-pct{
    font-family:'JetBrains Mono', monospace;
    font-size:0.66rem;
    font-weight:600;
    color:var(--ink-dim);
    width:38px;
    text-align:right;
    flex-shrink:0;
  }
  .race-track-pct.ai-pct{
    color:#7dd3fc;
  }


  .race-text-wrap{ position:relative; }
  .race-text{
    font-family:'Noto Sans Khmer','Noto Serif Khmer', sans-serif;
    font-size:1.7rem;
    line-height:1.9;
    text-align:center;
    padding:10px 6px;
    min-height:3.6em;
  }
  .race-char{ color:#4a5578; transition:color .15s ease; position:relative; }
  .race-char.correct{ color:var(--gold-bright); text-shadow:0 0 10px rgba(255,209,102,0.55); }
  .race-char.wrong{ color:var(--temple-red); text-shadow:0 0 10px rgba(255,59,86,0.5); }
  .race-char.wrong::before{
    content:"";
    position:absolute; left:0; right:0; bottom:-3px;
    height:2px;
    background:var(--temple-red);
  }
  .race-char.current{ color:var(--ink); }
  .race-char.current::after{
    content:"";
    position:absolute; left:1px; right:1px; bottom:-4px;
    height:2px;
    background:var(--gold-bright);
    box-shadow:0 0 8px rgba(255,209,102,0.7);
    animation:blink 1s step-end infinite;
  }

  .race-countdown{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:'Orbitron', sans-serif;
    font-size:4.2rem;
    font-weight:600;
    color:var(--gold-bright);
    text-shadow:0 0 30px rgba(255,209,102,0.7);
    background:rgba(17,16,19,0.86);
    border-radius:10px;
    z-index:2;
  }
  .race-countdown[hidden]{ display:none; }
  .race-countdown.pulse{ animation:race-count-pulse .55s ease; }
  @keyframes race-count-pulse{
    0%{ transform:scale(0.6); opacity:0; }
    50%{ transform:scale(1.08); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }

  .race-live-actions{ display:flex; justify-content:center; margin-top:12px; }
  #raceExitLiveBtn{
    font-family:'JetBrains Mono', monospace;
    font-size:0.64rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    background:var(--stone-1);
    border:1px solid var(--stone-3);
    color:var(--ink-dim);
    padding:7px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:all .18s ease;
  }
  #raceExitLiveBtn:hover{ color:var(--temple-red); border-color:var(--temple-red); }

  .race-ember{
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background:var(--gold-bright);
    box-shadow:0 0 6px 1px rgba(255,209,102,0.7);
    pointer-events:none;
    animation:race-ember-rise .6s ease-out forwards;
  }
  @keyframes race-ember-rise{
    0%{ transform:translate(0,0); opacity:1; }
    100%{ transform:translate(var(--dx,0), var(--dy,-30px)); opacity:0; }
  }

  /* ---------- race results ---------- */
  .race-result-overlay{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:
      radial-gradient(ellipse 70vw 60vh at 50% 42%, rgba(255,209,102,0.16), transparent 70%),
      rgba(6,7,12,0.85);
    backdrop-filter:blur(16px) saturate(180%);
    -webkit-backdrop-filter:blur(16px) saturate(180%);
    z-index:200;
    animation:overlay-in .32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .race-result-overlay.is-closing{
    animation:overlay-out .22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
    pointer-events:none;
  }
  .race-result-overlay.is-closing .race-result-card{
    animation:lesson-card-victory-out .22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  }
  .race-result-card{
    position:relative;
    width:min(90vw, 420px);
    padding:30px 26px 26px;
    border-radius:18px;
    background:linear-gradient(180deg, #141830 0%, #0c0e1c 100%);
    border:1px solid rgba(255,209,102,0.45);
    box-shadow:0 0 60px rgba(255,209,102,0.25), 0 25px 60px rgba(0,0,0,0.7);
    text-align:center;
    overflow:hidden;
    animation:lesson-card-victory-pop .52s cubic-bezier(0.17, 0.89, 0.32, 1.25) both;
    transform-origin:center center;
  }
  .race-result-card h2{
    font-family:'Orbitron', sans-serif;
    font-size:1.7rem;
    font-weight:600;
    color:var(--gold-bright);
    text-shadow:0 0 18px rgba(255,209,102,0.45);
    margin:8px 0 2px;
  }
  .race-result-card .race-badge{
    font-size:2.4rem;
    line-height:1;
    filter:drop-shadow(0 0 14px rgba(255,209,102,0.55));
  }
  .race-result-card .race-pb{
    font-size:0.72rem;
    letter-spacing:0.06em;
    color:var(--gold-bright);
    margin:6px 0 0;
    text-transform:uppercase;
  }
  .race-duel-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:6px 14px;
    border-radius:999px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    margin:8px 0 4px;
    text-transform:uppercase;
  }
  .race-duel-badge.win{
    background:rgba(255, 209, 102, 0.18);
    border:1px solid rgba(255, 209, 102, 0.45);
    color:var(--gold-bright, #ffd166);
    box-shadow:0 0 16px rgba(255, 209, 102, 0.3);
  }
  .race-duel-badge.loss{
    background:rgba(56, 189, 248, 0.18);
    border:1px solid rgba(56, 189, 248, 0.45);
    color:#38bdf8;
    box-shadow:0 0 16px rgba(56, 189, 248, 0.3);
  }
  .race-duel-sub{
    font-size:0.78rem;
    color:var(--ink-dim, #94a3b8);
    margin:2px 0 12px;
  }
  .race-result-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    margin:20px 0 22px;
  }
  .race-result-grid div{ display:flex; flex-direction:column; gap:2px; }
  .race-result-grid b{
    font-family:'JetBrains Mono', monospace;
    font-size:1.25rem;
    color:var(--ink);
    text-shadow:0 0 12px rgba(255,209,102,0.25);
  }
  .race-result-grid span{
    font-size:0.58rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .race-result-actions{
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  }
  .race-result-actions button{
    font-family:'JetBrains Mono', monospace;
    font-size:0.64rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    background:transparent;
    border:1px solid var(--stone-3);
    color:var(--ink-dim);
    padding:9px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:all .18s ease;
  }
  .race-result-actions button:hover{ box-shadow:0 0 16px rgba(255,209,102,0.35); border-color:var(--gold); color:var(--ink); transform:translateY(-1px); }
  .race-result-actions button.primary{
    color:#241405;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-color:var(--gold-bright);
  }
  .race-result-actions button.primary:hover{ box-shadow:0 0 26px rgba(255,209,102,0.6); }

  /* fx canvas fixed overlay */
  .fx-canvas,
  #fxCanvas{
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    pointer-events:none !important;
    z-index:80 !important;
    display:block !important;
  }

  /* ================= Khmer NiDA Layout Switch & Download System ================= */
  .layout-action-btn.nida-guide-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Space Grotesk', 'Noto Sans Khmer', sans-serif;
    font-size:0.75rem;
    font-weight:600;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid rgba(255,209,102,0.4);
    background:rgba(255,209,102,0.08);
    color:var(--gold-bright);
    cursor:pointer;
    transition:all .18s cubic-bezier(.22,1,.36,1);
    margin-left:4px;
    user-select:none;
  }
  .layout-action-btn.nida-guide-btn:hover{
    background:rgba(255,209,102,0.2);
    border-color:var(--gold-bright);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(255,209,102,0.25);
  }
  .layout-action-btn.nida-guide-btn:active{
    transform:scale(0.97);
  }
  .layout-action-btn.nida-guide-btn.highlighted{
    border-color:var(--gold-bright);
    background:rgba(255,209,102,0.16);
    box-shadow:0 0 14px rgba(255,209,102,0.35);
  }

  /* Floating HUD Banner when user strikes English keys on Khmer NiDA */
  .nida-switch-hud{
    position:sticky;
    top:12px;
    margin:0 auto 12px;
    max-width:min(94vw, 680px);
    z-index:99;
    transition:opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
  }
  .nida-switch-hud[hidden]{ display:none !important; }
  .nida-switch-hud.wobble .nida-switch-hud-inner{
    animation:nida-hud-shake .36s cubic-bezier(.36,.07,.19,.97) both;
  }
  @keyframes nida-hud-shake{
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(3px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
  }

  .nida-switch-hud-inner{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px 18px;
    background:linear-gradient(135deg, rgba(38,18,22,0.95), rgba(22,14,24,0.96));
    border:1px solid rgba(255,90,95,0.6);
    border-radius:14px;
    box-shadow:
      0 12px 32px rgba(0,0,0,0.65),
      0 0 24px rgba(255,90,95,0.22),
      inset 0 1px 0 rgba(255,255,255,0.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .nida-switch-hud-icon-wrap{
    width:38px;
    height:38px;
    border-radius:10px;
    background:rgba(255,90,95,0.15);
    border:1px solid rgba(255,90,95,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--temple-red, #ff3b56);
    flex-shrink:0;
  }
  .nida-switch-hud-content{
    flex:1;
    min-width:0;
  }
  .nida-switch-hud-title{
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.92rem;
    font-weight:700;
    color:#fff;
    margin-bottom:2px;
  }
  .nida-switch-hud-desc{
    font-size:0.8rem;
    color:var(--ink-dim);
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .hud-kbd,
  .nida-quick-banner kbd,
  .nida-steps-list kbd{
    display:inline-block;
    padding:2px 7px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    font-weight:700;
    color:var(--gold-bright);
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,209,102,0.35);
    border-radius:6px;
    box-shadow:0 2px 0 rgba(0,0,0,0.3);
  }
  .hud-mac-hint{
    font-size:0.75rem;
    color:var(--ink-muted);
  }
  .nida-switch-hud-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .nida-hud-guide-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.76rem;
    font-weight:600;
    padding:7px 13px;
    border-radius:8px;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border:1px solid var(--gold-bright);
    color:#241405;
    cursor:pointer;
    transition:all .16s ease;
    white-space:nowrap;
  }
  .nida-hud-guide-btn:hover{
    box-shadow:0 0 16px rgba(255,209,102,0.55);
    transform:translateY(-1px);
  }
  .nida-hud-close-btn{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    color:var(--ink-dim);
    width:30px;
    height:30px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .15s ease;
  }
  .nida-hud-close-btn:hover{
    background:rgba(255,255,255,0.14);
    color:#fff;
  }

  /* Khmer NiDA Guide Modal Styles */
  .modal-card.nida-guide-card{
    width:min(94vw, 720px);
    max-height:86vh;
    padding:24px 26px 28px;
  }
  .nida-modal-icon-badge{
    width:42px;
    height:42px;
    border-radius:12px;
    background:rgba(255,209,102,0.12);
    border:1px solid rgba(255,209,102,0.35);
    color:var(--gold-bright);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .modal-title-group{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .modal-subtitle{
    margin:2px 0 0;
    font-size:0.78rem;
    color:var(--ink-dim);
    font-weight:400;
  }

  .nida-quick-banner{
    margin:14px 0 16px;
    padding:12px 16px;
    background:rgba(255,209,102,0.05);
    border:1px solid rgba(255,209,102,0.22);
    border-radius:12px;
  }
  .nida-qb-title{
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.78rem;
    font-weight:700;
    color:var(--gold-bright);
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .nida-qb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:8px 14px;
  }
  .nida-qb-item{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .nida-qb-os{
    font-size:0.72rem;
    color:var(--ink-dim);
    font-weight:600;
  }
  .nida-qb-keys{
    font-size:0.8rem;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:5px;
    flex-wrap:wrap;
  }
  .nida-qb-or{
    font-size:0.72rem;
    color:var(--ink-muted);
  }

  .nida-tab-nav{
    display:flex;
    gap:6px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:8px;
    margin-bottom:16px;
    overflow-x:auto;
  }
  .nida-tab-btn{
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.76rem;
    font-weight:600;
    color:var(--ink-dim);
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    padding:7px 13px;
    cursor:pointer;
    transition:all .16s ease;
    white-space:nowrap;
  }
  .nida-tab-btn:hover{
    color:var(--ink);
    background:rgba(255,255,255,0.08);
  }
  .nida-tab-btn.active{
    color:#241405;
    background:linear-gradient(135deg, var(--gold-bright), var(--gold));
    border-color:var(--gold-bright);
    font-weight:700;
    box-shadow:0 2px 10px rgba(255,209,102,0.3);
  }

  .nida-tab-panel{
    animation:modal-card-spring-in .3s ease both;
  }
  .nida-tab-panel[hidden]{ display:none !important; }

  .nida-step-box{
    padding:12px 16px;
    border-radius:10px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.08);
    margin-bottom:14px;
  }
  .nida-step-box.highlight{
    background:rgba(255,209,102,0.06);
    border-color:rgba(255,209,102,0.25);
  }
  .nida-sb-badge{
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.75rem;
    font-weight:700;
    color:var(--gold-bright);
    margin-bottom:4px;
  }
  .nida-sb-text{
    margin:0;
    font-size:0.82rem;
    line-height:1.55;
    color:var(--ink);
  }

  .nida-steps-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .nida-steps-list li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:10px 14px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;
  }
  .nida-step-num{
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(255,209,102,0.18);
    border:1px solid rgba(255,209,102,0.4);
    color:var(--gold-bright);
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:1px;
  }
  .nida-step-info{
    flex:1;
    min-width:0;
  }
  .nida-step-info strong{
    font-size:0.84rem;
    color:#fff;
    display:block;
    margin-bottom:3px;
  }
  .nida-step-info p{
    margin:0;
    font-size:0.78rem;
    color:var(--ink-dim);
    line-height:1.5;
  }
  .nida-step-info code{
    background:rgba(255,255,255,0.08);
    padding:1px 5px;
    border-radius:4px;
    font-family:'JetBrains Mono', monospace;
    color:var(--gold-bright);
  }

  .nida-download-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:10px;
    margin:12px 0;
  }
  .nida-dl-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,209,102,0.25);
    border-radius:12px;
    text-decoration:none;
    color:inherit;
    transition:all .18s ease;
  }
  .nida-dl-card:hover{
    background:rgba(255,209,102,0.09);
    border-color:var(--gold-bright);
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(0,0,0,0.4);
  }
  .nida-dl-icon{
    width:36px;
    height:36px;
    border-radius:10px;
    background:rgba(255,209,102,0.15);
    border:1px solid rgba(255,209,102,0.3);
    color:var(--gold-bright);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .nida-dl-meta{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .nida-dl-name{
    font-size:0.8rem;
    font-weight:700;
    color:#fff;
  }
  .nida-dl-desc{
    font-size:0.7rem;
    color:var(--ink-dim);
  }
  .nida-dl-badge{
    font-size:0.68rem;
    font-weight:600;
    color:var(--gold-bright);
    background:rgba(255,209,102,0.12);
    padding:4px 8px;
    border-radius:6px;
    white-space:nowrap;
  }

  .nida-mobile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
  }
  .nida-mobile-card{
    padding:14px 16px;
    background:rgba(0,0,0,0.22);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
  }
  .nida-mobile-card h4{
    margin:0 0 10px;
    font-size:0.86rem;
    color:var(--gold-bright);
  }
  .nida-mobile-card ol{
    margin:0;
    padding-left:18px;
    font-size:0.78rem;
    color:var(--ink-dim);
    line-height:1.55;
    display:flex;
    flex-direction:column;
    gap:6px;
  }

  /* Live Test Input Zone */
  .nida-test-zone{
    margin-top:18px;
    padding:14px 16px;
    background:linear-gradient(180deg, rgba(16,21,36,0.8), rgba(12,16,28,0.9));
    border:1px solid rgba(255,209,102,0.25);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .nida-test-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
  }
  .nida-test-title{
    font-family:'Space Grotesk','Noto Sans Khmer',sans-serif;
    font-size:0.76rem;
    font-weight:700;
    color:var(--gold-bright);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .nida-test-clear-btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:0.7rem;
    padding:3px 8px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04);
    color:var(--ink-dim);
    cursor:pointer;
    transition:all .15s ease;
  }
  .nida-test-clear-btn:hover{
    background:rgba(255,255,255,0.1);
    color:#fff;
  }
  .nida-test-input-row{
    margin-bottom:8px;
  }
  .nida-test-input{
    width:100%;
    box-sizing:border-box;
    padding:11px 14px;
    font-family:'Noto Sans Khmer', 'Noto Serif Khmer', 'JetBrains Mono', sans-serif;
    font-size:1.05rem;
    color:#fff;
    background:rgba(0,0,0,0.35);
    border:1px solid rgba(255,209,102,0.3);
    border-radius:10px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .nida-test-input:focus{
    border-color:var(--gold-bright);
    box-shadow:0 0 16px rgba(255,209,102,0.25);
  }
  .nida-test-status{
    min-height:24px;
    display:flex;
    align-items:center;
  }
  .nida-test-badge{
    font-size:0.76rem;
    font-weight:600;
    padding:4px 10px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .nida-test-badge.neutral{
    color:var(--ink-muted);
    background:rgba(255,255,255,0.05);
  }
  .nida-test-badge.good{
    color:#38ef7d;
    background:rgba(56,239,125,0.12);
    border:1px solid rgba(56,239,125,0.3);
    animation:nida-pulse-good .4s ease;
  }
  .nida-test-badge.bad{
    color:#ff5a5f;
    background:rgba(255,90,95,0.14);
    border:1px solid rgba(255,90,95,0.35);
    animation:nida-pulse-bad .3s ease;
  }
  @keyframes nida-pulse-good{
    0%{ transform:scale(0.95); opacity:0.7; }
    50%{ transform:scale(1.03); }
    100%{ transform:scale(1); opacity:1; }
  }
  @keyframes nida-pulse-bad{
    0%, 100%{ transform:translateX(0); }
    25%{ transform:translateX(-3px); }
    75%{ transform:translateX(3px); }
  }