* { margin:0; padding:0; box-sizing:border-box; }
html,body {
    width:100%; height:100%; overflow:hidden;
    background:
      radial-gradient(circle at 50% 20%, rgba(255,209,102,.20), transparent 28%),
      radial-gradient(circle at 64% 42%, rgba(239,71,111,.22), transparent 34%),
      linear-gradient(145deg, #171119 0%, #101522 42%, #07080c 100%);
    font-family:'Segoe UI', Arial, sans-serif; user-select:none; -webkit-user-select:none;
  }
  #menuLayer,
  #gameplayHost,
  #editorHost { position:fixed; inset:0; }
  #menuBgHost {
    position:fixed; inset:0; z-index:8; overflow:hidden; pointer-events:none;
    background:#000;
    transition:opacity .42s ease, visibility .42s ease;
  }
  #menuBgFrame {
    width:100%; height:100%; border:0; display:block;
    background:#000;
  }
  #landingSettingsBtn {
    position:fixed; top:18px; right:22px; z-index:72; width:52px; height:52px;
    border-radius:8px; border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(180deg, rgba(78,84,96,.95), rgba(34,38,46,.95));
    color:#e8ecf5; font-size:26px; font-weight:800; line-height:1; cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .28s cubic-bezier(.2,.9,.25,1), border-color .18s, color .18s, opacity .18s;
  }
  #landingSettingsBtn:hover,
  body.landing-options-open #landingSettingsBtn {
    transform:rotate(120deg) scale(1.04);
    border-color:#ffd166;
    color:#ffd166;
  }
  body.landing-options-open #menuBgHost { z-index:71; pointer-events:auto; }
  body.showing-gameplay #landingSettingsBtn,
  body.showing-editor #landingSettingsBtn,
  body.menu-leaving #landingSettingsBtn { opacity:0; pointer-events:none; }
  body.lk-editor-ui-open #menuBgHost {
    opacity:0;
    visibility:hidden;
  }
  #gameplayHost {
    pointer-events:none;
    transform:translateX(100%);
    opacity:0;
    filter:blur(10px);
    transition:transform .58s cubic-bezier(.25, .9, .2, 1), opacity .42s ease, filter .5s ease;
    z-index:25;
  }
  #gameplayFrame {
    width:100%; height:100%; border:0;
    background:#000;
  }
  #editorHost {
    pointer-events:none;
    transform:translateX(100%);
    opacity:0;
    filter:blur(8px);
    transition:transform .58s cubic-bezier(.25, .9, .2, 1), opacity .42s ease, filter .5s ease;
    z-index:60;
  }
  #editorFrame {
    width:100%; height:100%; border:0; display:block;
    background:#000;
  }
  body.showing-editor #editorHost {
    pointer-events:auto;
    transform:translateX(0);
    opacity:1;
    filter:blur(0);
  }
  body.showing-gameplay #gameplayHost {
    pointer-events:auto;
    transform:translateX(0);
    opacity:1;
    filter:blur(0);
  }
  body.showing-gameplay #menuLayer {
    transform:translateX(-14vw) scale(.98);
    filter:blur(5px);
    transition:transform .58s cubic-bezier(.25, .9, .2, 1), filter .58s ease;
    pointer-events:none;
  }
  #menuLayer {
    transition:transform .58s cubic-bezier(.25, .9, .2, 1), filter .58s ease, opacity .58s ease;
    transform:translateX(0) scale(1);
    filter:blur(0);
    opacity:1;
    will-change:transform, filter;
    z-index:20;
  }
  body.showing-gameplay #menuLayer #overlay {
    opacity:0;
  }
  body.menu-leaving #menuLayer #overlay {
    opacity:0;
  }
  body.showing-editor #menuLayer,
  body.showing-editor #landingSignature {
    opacity:0;
    pointer-events:none;
  }
  #landingSignature {
    position:fixed;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    z-index:70;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:8px 10px;
    color:#c6cddd;
    pointer-events:auto;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-shadow:0 2px 12px rgba(0,0,0,.72);
  }
  .landing-signature-main {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:6px;
    background:rgba(8,11,18,.48);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
  }
  .landing-version { color:#ffd166; font-weight:800; }
  #landingSignature a {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#9db4ff;
    text-decoration:none;
    font-weight:800;
    transition:color .15s, transform .15s;
  }
  #landingSignature a:hover { color:#e8ecf5; transform:translateY(-1px); }
  #landingSignature svg { width:14px; height:14px; display:block; }
  #landingMusicMute {
    padding:8px 12px;
    border-radius:6px;
    border:1px solid rgba(75,227,160,.4);
    color:#4be3a0;
    background:rgba(8,11,18,.52);
    font-size:11px;
    letter-spacing:1px;
    font-weight:800;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:all .15s;
  }
  #landingMusicMute:hover { border-color:#4be3a0; transform:translateY(-1px); }
  #landingMusicMute.off {
    color:#c6cddd;
    border-color:rgba(255,255,255,.22);
    opacity:.86;
  }
  .landing-welcome-overlay {
    position:fixed;
    inset:0;
    z-index:90;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    color:#e8ecf5;
    background:rgba(4,6,10,.72);
    backdrop-filter:blur(10px) saturate(1.05);
  }
  .landing-welcome-overlay.open { display:flex; }
  .landing-welcome-card {
    width:min(760px, calc(100vw - 32px));
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:24px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:8px;
    background:
      linear-gradient(150deg, rgba(17,22,34,.94), rgba(10,12,18,.97) 56%, rgba(20,11,17,.96));
    box-shadow:0 28px 80px rgba(0,0,0,.46);
  }
  .landing-welcome-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
  }
  .landing-welcome-kicker {
    display:block;
    color:#ffd166;
    font-size:11px;
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:8px;
  }
  #landingWelcomeTitle {
    color:#fff5d5;
    font-size:30px;
    line-height:1.12;
    font-weight:900;
    letter-spacing:0;
  }
  .landing-welcome-icon-btn {
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:6px;
    color:#c6cddd;
    background:rgba(255,255,255,.06);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:color .15s, border-color .15s, transform .15s;
  }
  .landing-welcome-icon-btn:hover {
    color:#fff;
    border-color:rgba(255,209,102,.62);
    transform:translateY(-1px);
  }
  .landing-welcome-lang {
    display:flex;
    gap:8px;
    margin-top:18px;
  }
  .landing-welcome-lang button {
    min-width:44px;
    padding:7px 10px;
    border:1px solid rgba(157,180,255,.35);
    border-radius:6px;
    color:#9db4ff;
    background:rgba(8,11,18,.56);
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    cursor:pointer;
  }
  .landing-welcome-lang button.on {
    color:#10131b;
    border-color:#ffd166;
    background:#ffd166;
  }
  .landing-welcome-intro {
    margin-top:18px;
    color:#d8deec;
    font-size:15px;
    line-height:1.55;
  }
  .landing-welcome-features {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
  }
  .landing-welcome-features span {
    min-height:62px;
    display:flex;
    align-items:center;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    color:#edf1fa;
    background:rgba(255,255,255,.055);
    font-size:13px;
    line-height:1.35;
  }
  .landing-welcome-features span::before {
    content:"";
    width:3px;
    height:26px;
    flex:0 0 3px;
    margin-right:10px;
    border-radius:2px;
    background:#4be3a0;
  }
  .landing-welcome-notice {
    margin-top:18px;
    padding:12px 14px;
    border-left:3px solid #ef476f;
    color:#f1c9d1;
    background:rgba(239,71,111,.09);
    font-size:13px;
    line-height:1.45;
  }
  .landing-welcome-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:20px;
  }
  .landing-welcome-check {
    display:flex;
    align-items:center;
    gap:10px;
    color:#b8c0d3;
    font-size:12px;
    line-height:1.35;
    cursor:pointer;
  }
  .landing-welcome-check input { accent-color:#ffd166; }
  .landing-welcome-continue {
    flex:0 0 auto;
    padding:10px 24px;
    border:0;
    border-radius:6px;
    color:#0b0d12;
    background:linear-gradient(90deg,#ffd166,#ef476f);
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    cursor:pointer;
    transition:transform .15s, filter .15s;
  }
  .landing-welcome-continue:hover {
    transform:translateY(-1px);
    filter:saturate(1.08);
  }
  @media (max-width:720px){
    .landing-welcome-overlay { padding:14px; align-items:flex-start; }
    .landing-welcome-card {
      width:100%;
      max-height:calc(100vh - 28px);
      padding:18px;
    }
    #landingWelcomeTitle { font-size:24px; }
    .landing-welcome-features { grid-template-columns:1fr; }
    .landing-welcome-features span { min-height:auto; }
    .landing-welcome-actions {
      align-items:stretch;
      flex-direction:column;
    }
    .landing-welcome-continue { width:100%; }
  }
  input, textarea, select { user-select:text; -webkit-user-select:text; }
  #c { display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }

  /* ---------- Start / Loading overlay ---------- */
  #overlay {
    position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:18px;
    box-sizing:border-box;
    padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow:auto;
    overscroll-behavior:contain;
    background:
      linear-gradient(rgba(6,8,13,.54), rgba(6,8,13,.82)),
      radial-gradient(circle at 50% 22%, rgba(255,209,102,.24), transparent 30%),
      radial-gradient(circle at 62% 44%, rgba(239,71,111,.26), transparent 36%),
      linear-gradient(145deg, #171119 0%, #101522 42%, #07080c 100%);
    background-size:cover, auto, auto, auto;
    background-position:center, center, center, center;
    transition:opacity .6s ease; color:#e8ecf5;
  }
  body.lk-menu-role-bg #overlay {
    background:
      linear-gradient(rgba(5,7,11,.26), rgba(5,7,11,.64)),
      radial-gradient(circle at 50% 20%, rgba(255,209,102,.13), transparent 32%),
      radial-gradient(circle at 64% 44%, rgba(239,71,111,.14), transparent 40%);
    backdrop-filter:blur(2px) saturate(1.05);
  }
  body.lk-menu-role-bg #overlay h1 {
    text-shadow:0 14px 42px rgba(0,0,0,.72);
  }
  body.lk-menu-role-bg #overlay .sub,
  body.lk-menu-role-bg #loadTxt {
    color:#d4d9e8;
    text-shadow:0 4px 22px rgba(0,0,0,.7);
  }
  #overlay.hidden { opacity:0; pointer-events:none; }
  #overlay.loading { z-index:80; backdrop-filter:blur(7px); }
  #overlay.menu-preloading .menu-main,
  #overlay.menu-preloading .level-select { opacity:0; pointer-events:none; transform:translateY(10px); }
  #overlay.menu-preloading #loadBarWrap,
  #overlay.menu-preloading #loadTxt { opacity:1; }
  body.lk-prebenchmark-running #overlay { opacity:0 !important; pointer-events:none !important; }
  #lkPreBenchmark {
    position:fixed; inset:0; z-index:10020; display:flex; align-items:flex-end; justify-content:center;
    padding:0 20px 34px; pointer-events:none; opacity:0; visibility:hidden;
    background:
      radial-gradient(circle at 50% 18%, rgba(35,53,76,.34), transparent 36%),
      linear-gradient(180deg,#070b12 0%,#050811 62%,#03050a 100%);
    transition:opacity .28s ease, visibility 0s linear .28s;
  }
  #lkPreBenchmark.on { opacity:1; visibility:visible; pointer-events:auto; transition:none; }
  .lk-prebench-card {
    width:min(680px,calc(100vw - 32px)); padding:14px 16px 13px; border:1px solid rgba(102,217,255,.34);
    border-radius:10px; background:rgba(7,11,18,.9); color:#dfe7f5; backdrop-filter:blur(10px) saturate(1.15);
    box-shadow:0 20px 58px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .lk-prebench-head,.lk-prebench-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .lk-prebench-head span { color:#66d9ff; font-size:10px; font-weight:900; letter-spacing:2px; }
  .lk-prebench-head b { color:#ffd166; font:800 12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  .lk-prebench-stage { margin-top:7px; color:#fff; font-size:14px; font-weight:800; }
  .lk-prebench-track { height:6px; margin:9px 0 7px; overflow:hidden; border-radius:99px; background:#172131; }
  .lk-prebench-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#4be3a0,#66d9ff,#ffd166); transition:width .12s linear; }
  .lk-prebench-meta { color:#91a0b8; font-size:10px; }
  .lk-prebench-meta strong { flex:none; color:#4be3a0; font:800 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  #overlay h1 { font-size:56px; letter-spacing:8px; font-weight:800;
    background:linear-gradient(180deg,#ffd166,#ef476f); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  #overlay .sub { color:#8b93a7; letter-spacing:3px; font-size:13px; text-transform:uppercase; }
  .menu-main {
    display:flex; flex-direction:column; align-items:center; gap:18px;
    flex:0 0 auto;
    max-width:100%;
    transition:transform .48s cubic-bezier(.22,.9,.18,1), opacity .32s ease, filter .32s ease;
    will-change:transform, opacity;
  }
  .landing-performance-advisory {
    width:min(900px,calc(100vw - 36px)); display:block;
    padding:15px 18px; border:1px solid rgba(255,209,102,.3); border-radius:8px;
    background:rgba(7,10,16,.7); color:#d2d9e7; font-size:20px; line-height:1.45;
    backdrop-filter:blur(7px); box-shadow:0 14px 38px rgba(0,0,0,.2);
  }
  .landing-performance-advisory b {
    display:block; margin-bottom:6px; color:#ffd166; font-size:18px; letter-spacing:1.5px;
  }
  #overlay.menu-preloading .landing-performance-advisory { opacity:.78; }
  @media (max-width:680px){
    .landing-performance-advisory { width:calc(100vw - 28px); padding:12px 14px; font-size:20px; }
    .landing-performance-advisory b { font-size:18px; }
  }
  #controlsToggleBtn {
    padding: 8px 18px;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #9db4ff;
    background: transparent;
    border: 1px solid rgba(157,180,255,.4);
    border-radius: 5px;
    cursor: pointer;
    transition: all .15s;
  }
  #controlsToggleBtn:hover { border-color:#9db4ff; color:#e8ecf5; transform: translateY(-1px); }
  .controls-panel {
    overflow: hidden;
    transition: max-height .24s ease, opacity .18s ease, margin .2s ease, transform .18s ease;
    max-height: 420px;
    opacity: 1;
    margin-top: 2px;
    transform: translateY(0);
  }
  .controls-panel.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transform: translateY(-6px);
  }
  #overlay.choosing-level .menu-main {
    transform:translateX(-42vw) scale(.96); opacity:0; pointer-events:none; filter:blur(2px);
  }
  #controls-list { display:grid; grid-template-columns:auto auto; gap:6px 18px; font-size:14px; color:#c6cddd; margin-top:6px; }
  #controls-list b { color:#ffd166; font-weight:600; }
  #controls-list.editor-loading-controls { grid-template-columns:minmax(280px,1fr) minmax(280px,1fr); gap:18px; align-items:start; }
  .loading-controls-column { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; padding:12px 15px; border:1px solid rgba(157,180,255,.25); border-radius:7px; background:rgba(8,11,18,.42); }
  .loading-controls-column > strong { grid-column:1 / -1; padding-bottom:6px; color:#9db4ff; letter-spacing:2px; font-size:11px; }
  .loading-controls-column.gameplay-controls > strong { color:#ef9caf; }
  @media (max-width:760px){ #controls-list.editor-loading-controls { grid-template-columns:1fr; max-height:48vh; overflow:auto; } }
  #startBtn {
    margin-top:14px; padding:14px 46px; font-size:18px; letter-spacing:3px; font-weight:700;
    color:#0b0d12; background:linear-gradient(90deg,#ffd166,#ef476f); border:none; border-radius:6px;
    cursor:pointer; opacity:1; pointer-events:auto; transition:transform .15s, opacity .3s, filter .15s;
  }
  #playBtn,
  #quickPlayBtn,
  #startBtn {
    font-family: 'Segoe UI', Arial, sans-serif;
    letter-spacing: 3px;
    font-weight: 800;
    border-radius: 6px;
    border: 0;
    cursor: pointer;
  }
  #playBtn,
  #quickPlayBtn {
    padding: 10px 32px;
    font-size: 16px;
    color: #0b0d12;
    background: linear-gradient(90deg,#ffd166,#ef476f);
    transition: transform .15s, opacity .3s, filter .15s;
  }
  #playBtn:hover,
  #quickPlayBtn:hover,
  #startBtn:hover { transform:scale(1.06); }
  #playBtn:hover,
  #quickPlayBtn:hover { filter:saturate(1.08); }
  #startBtn.loading, #playBtn.loading, #quickPlayBtn.loading, #editorBtn.loading { opacity:.55; pointer-events:none; filter:saturate(.55); }
  #editorBtn {
    padding:10px 30px; font-size:13px; letter-spacing:2px; font-weight:700;
    color:#9db4ff; background:transparent; border:1px solid rgba(157,180,255,.4);
    border-radius:5px; cursor:pointer; transition:all .15s;
  }
  #editorBtn:hover { background:rgba(157,180,255,.12); border-color:#9db4ff; transform:scale(1.04); }

  .lk-workspace-entry {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:6px;
    border:1px solid rgba(75,227,160,.38);
    background:rgba(75,227,160,.08);
    color:#a8ffd4;
    font-weight:900;
    cursor:pointer;
    transition:all .15s;
  }
  .lk-workspace-entry b,
  .lk-workspace-entry span {
    font-size:12px;
    letter-spacing:1px;
  }
  .lk-workspace-entry small {
    padding:2px 6px;
    border-radius:4px;
    background:rgba(255,255,255,.08);
    color:#bfd0dd;
    font-size:10px;
    font-weight:900;
    letter-spacing:0;
    text-transform:uppercase;
  }
  .lk-workspace-entry:hover {
    background:rgba(75,227,160,.14);
    border-color:#4be3a0;
    transform:translateY(-1px);
  }
  .lk-workspace-entry.demo {
    color:#ffe0a0;
    border-color:rgba(255,209,102,.5);
    background:rgba(255,209,102,.1);
  }
  .lk-workspace-entry.demo small { color:#ffe0a0; background:rgba(255,209,102,.14); }
  .lk-workspace-entry.demo:hover {
    border-color:#ffd166;
    background:rgba(255,209,102,.16);
  }
  #workspaceBtn.lk-workspace-entry {
    min-height:42px;
    padding:9px 20px;
  }
  #lkAppMenuBar #lkWorkspaceBtn.lk-workspace-entry {
    height:22px;
    max-width:220px;
    padding:0 10px;
    margin-left:auto;
    border-radius:5px;
    background:rgba(75,227,160,.08);
    flex:none;
  }
  #lkAppMenuBar #lkWorkspaceBtn.lk-workspace-entry span {
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    letter-spacing:.6px;
  }
  #lkAppMenuBar #lkWorkspaceBtn.lk-workspace-entry.demo {
    background:rgba(255,209,102,.1);
  }
  #lkAppMenuBar #lkWorkspaceBtn.lk-workspace-entry.folder {
    background:rgba(75,227,160,.11);
  }
  #lkTopbar #lkWorkspaceBtn.lk-workspace-entry {
    height:32px;
    max-width:190px;
    padding:0 11px;
    margin-left:8px;
    margin-right:4px;
    background:rgba(75,227,160,.08);
    box-shadow:inset 0 0 0 1px rgba(75,227,160,.08);
    flex:none;
  }
  #lkTopbar #lkWorkspaceBtn.lk-workspace-entry span {
    max-width:150px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #lkTopbar #lkWorkspaceBtn.lk-workspace-entry.demo {
    background:rgba(255,209,102,.1);
  }
  #lkTopbar #lkWorkspaceBtn.lk-workspace-entry.folder {
    background:rgba(75,227,160,.11);
  }

  #lkWorkspaceBadge {
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:80;
    min-width:150px;
    height:30px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(11,15,24,.88);
    color:#dfe5f1;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,.32);
  }
  #lkWorkspaceBadge.folder {
    border-color:rgba(75,227,160,.45);
    color:#a8ffd4;
    background:rgba(12,32,27,.9);
  }
  #lkWorkspaceBadge.demo {
    border-color:rgba(255,209,102,.5);
    color:#ffe0a0;
    background:rgba(38,29,11,.92);
  }
  .lk-online-demo .lk-demo-locked,
  .lk-online-demo button.lk-demo-locked,
  .lk-online-demo .lk-demo-locked:hover {
    opacity:.42;
    cursor:not-allowed;
    border-color:rgba(255,255,255,.12);
    color:#7d8798;
    transform:none;
  }
  .lk-online-demo #lkStatus:before {
    content:"ONLINE DEMO";
    display:inline-flex;
    align-items:center;
    height:20px;
    padding:0 7px;
    margin-right:8px;
    border-radius:4px;
    border:1px solid rgba(255,209,102,.38);
    color:#ffe0a0;
    background:rgba(255,209,102,.1);
    font-size:11px;
    font-weight:900;
  }

  .lk-workspace-overlay {
    display:none;
    position:fixed;
    inset:0;
    z-index:130;
    align-items:center;
    justify-content:center;
    padding:26px;
    color:#e8ecf5;
    background:
      linear-gradient(rgba(6,8,13,.54), rgba(6,8,13,.86)),
      radial-gradient(circle at 50% 22%, rgba(255,209,102,.24), transparent 30%),
      radial-gradient(circle at 62% 44%, rgba(239,71,111,.26), transparent 36%),
      linear-gradient(145deg, #171119 0%, #101522 42%, #07080c 100%);
    background-size:cover, auto, auto, auto;
    background-position:center, center, center, center;
    backdrop-filter:blur(5px);
  }
  .lk-workspace-overlay.open { display:flex; }
  .lk-workspace-panel {
    width:min(760px, 100%);
    max-height:min(760px, calc(100vh - 44px));
    overflow:auto;
    border:0;
    border-radius:0;
    background:transparent;
    color:#e8ecf5;
    box-shadow:none;
  }
  .lk-workspace-head {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:0 42px 18px;
    border-bottom:0;
    background:transparent;
    text-align:center;
    position:relative;
  }
  .lk-workspace-kicker {
    color:#8b93a7;
    font-size:12px;
    font-weight:900;
    letter-spacing:3px;
    text-transform:uppercase;
  }
  .lk-workspace-head h2 {
    margin:8px 0 0;
    font-size:42px;
    line-height:1.02;
    letter-spacing:5px;
    font-weight:900;
    text-transform:uppercase;
    background:linear-gradient(180deg,#ffd166,#ef476f);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  #lkWorkspaceClose {
    position:absolute;
    right:0;
    top:0;
    width:38px;
    height:38px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(8,11,18,.46);
    color:#c6cddd;
    cursor:pointer;
    font-weight:900;
    font-size:15px;
    backdrop-filter:blur(10px);
  }
  #lkWorkspaceClose:hover { border-color:#ff6b7a; color:#ff9db1; }
  .lk-workspace-grid {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding:8px 0 12px;
  }
  .lk-workspace-card {
    width:min(540px, 100%);
    min-height:72px;
    padding:13px 20px;
    border-radius:6px;
    border:1px solid rgba(157,180,255,.32);
    background:rgba(8,11,18,.46);
    color:#c6cddd;
    text-align:center;
    cursor:pointer;
    backdrop-filter:blur(10px);
    transition:transform .15s, border-color .15s, background .15s, filter .15s;
  }
  #lkWorkspaceFile { order:1; }
  #lkWorkspaceBrowser { order:2; }
  #lkWorkspaceGuide { order:3; }
  .lk-online-demo #lkWorkspaceBrowser { order:1; }
  .lk-online-demo #lkWorkspaceFile { order:2; }
  .lk-workspace-card.primary {
    color:#0b0d12;
    border:0;
    background:linear-gradient(90deg,#ffd166,#ef476f);
  }
  .lk-workspace-card b {
    display:block;
    color:inherit;
    font-size:15px;
    letter-spacing:2px;
    margin-bottom:5px;
    text-transform:uppercase;
  }
  .lk-workspace-card span {
    display:block;
    color:inherit;
    opacity:.82;
    font-size:13px;
    line-height:1.45;
  }
  .lk-workspace-card:hover {
    transform:scale(1.035);
    border-color:#9db4ff;
    background:rgba(157,180,255,.12);
  }
  .lk-workspace-card.primary:hover { filter:saturate(1.08); background:linear-gradient(90deg,#ffd166,#ef476f); }
  .lk-workspace-card.disabled,
  .lk-workspace-card:disabled {
    opacity:.55;
    cursor:not-allowed;
    transform:none;
  }
  .lk-workspace-status {
    width:min(540px, 100%);
    margin:6px auto 0;
    padding:10px 13px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(8,11,18,.48);
    color:#8b93a7;
    font-size:13px;
    line-height:1.45;
    text-align:center;
    backdrop-filter:blur(10px);
  }
  .lk-workspace-actions {
    display:flex;
    justify-content:center;
    gap:8px;
    padding:14px 0 0;
  }
  .lk-workspace-actions button {
    height:34px;
    padding:0 12px;
    border-radius:6px;
    border:1px solid rgba(157,180,255,.32);
    background:rgba(8,11,18,.46);
    color:#9db4ff;
    cursor:pointer;
    font-weight:800;
    backdrop-filter:blur(10px);
  }
  .lk-workspace-actions button:hover:not(:disabled) {
    border-color:#9db4ff;
    color:#e8ecf5;
    transform:translateY(-1px);
  }
  .lk-workspace-actions button:disabled {
    opacity:.45;
    cursor:not-allowed;
  }
  #lkWorkspaceToast {
    position:fixed;
    left:50%;
    bottom:54px;
    z-index:160;
    max-width:min(560px, calc(100vw - 30px));
    padding:10px 14px;
    border-radius:7px;
    border:1px solid rgba(75,227,160,.35);
    background:rgba(10,18,27,.94);
    color:#dfe5f1;
    font-size:13px;
    font-weight:800;
    opacity:0;
    transform:translate(-50%, 10px);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease;
  }
  #lkWorkspaceToast.show {
    opacity:1;
    transform:translate(-50%, 0);
  }

  @media (max-width: 760px) {
    .lk-workspace-grid { grid-template-columns:1fr; }
    #lkWorkspaceBadge { right:10px; bottom:10px; min-width:130px; }
    .lk-workspace-head h2 { font-size:19px; }
  }
  #menuMusicBtn {
    padding:8px 22px; font-size:12px; letter-spacing:2px; font-weight:600;
    color:#c6cddd; background:transparent; border:1px solid rgba(255,255,255,.25);
    border-radius:5px; cursor:pointer; transition:all .15s;
  }
  #menuMusicBtn:hover { border-color:#4be3a0; color:#4be3a0; }
  #menuMusicBtn.off { opacity:.45; }
  #backToMenuBtn {
    margin-top: 6px;
    padding: 8px 22px; font-size:12px; letter-spacing:2px; font-weight:600;
    color:#c6cddd; background:transparent; border:1px solid rgba(255,255,255,.25);
    border-radius:5px; cursor:pointer; transition:all .15s;
  }
  #backToMenuBtn:hover {
    border-color:#ffd166; color:#ffd166; transform:translateY(-1px);
  }
  .level-select {
    position:absolute; width:min(940px, calc(100vw - 34px)); max-height:min(72vh, 680px); max-height:min(72dvh, 680px);
    opacity:0; pointer-events:none; transform:translateX(42vw) scale(.97);
    transition:transform .52s cubic-bezier(.22,.9,.18,1), opacity .34s ease;
    will-change:transform, opacity;
  }
  #overlay.choosing-level .level-select { opacity:1; pointer-events:auto; transform:translateX(0) scale(1); }
  .level-shell {
    padding:22px; border-radius:8px;
    background:rgba(11,14,22,.78); border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
  }
  .level-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
  .level-kicker { color:#ffd166; font-size:11px; letter-spacing:3px; font-weight:800; }
  .level-head h2 { margin-top:4px; font-size:32px; line-height:1; letter-spacing:1px; }
  #levelBackBtn {
    min-width:92px; padding:10px 16px; border-radius:5px; border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.06); color:#dfe6f5; font-size:12px; letter-spacing:2px; font-weight:800; cursor:pointer;
    transition:background .15s, border-color .15s, transform .15s;
  }
  #levelBackBtn:hover { background:rgba(255,255,255,.11); border-color:#ffd166; transform:translateY(-1px); }
  .level-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:16px; overflow:auto; overscroll-behavior:contain; max-height:calc(min(72vh, 680px) - 88px); max-height:calc(min(72dvh, 680px) - 88px); padding-right:4px; }
  .level-card {
    display:grid; grid-template-rows:150px auto auto; min-height:362px; overflow:hidden;
    border-radius:8px; border:1px solid rgba(255,255,255,.13); background:rgba(17,22,34,.86);
  }
  .level-preview {
    position:relative; overflow:hidden;
    background:
      linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.22) 18% 19%, transparent 19% 48%, rgba(255,209,102,.75) 48% 50%, transparent 50% 81%, rgba(255,255,255,.22) 81% 82%, transparent 82%),
      linear-gradient(0deg, rgba(75,227,160,.12), rgba(239,71,111,.18)),
      #171c25;
  }
  .level-preview:before {
    content:""; position:absolute; inset:18px 22px;
    border:2px solid rgba(255,255,255,.18); transform:skewX(-8deg) rotate(-2deg);
  }
  .level-preview:after {
    content:""; position:absolute; left:11%; right:11%; bottom:22px; height:18px;
    background:linear-gradient(90deg, transparent, rgba(75,227,160,.8), transparent);
    filter:blur(10px); opacity:.7;
  }
  .level-body { padding:16px 16px 12px; }
  .level-tag { display:inline-block; margin-bottom:10px; color:#4be3a0; font-size:10px; letter-spacing:2px; font-weight:900; }
  .level-title { font-size:21px; line-height:1.1; font-weight:900; margin-bottom:8px; }
  .level-desc { color:#aeb8cc; font-size:14px; line-height:1.45; }
  .level-meta { display:flex; justify-content:space-between; gap:10px; color:#7d879e; font-size:12px; letter-spacing:1px; margin-top:12px; }
  .level-launch {
    margin:0 16px 16px; align-self:end; padding:12px 16px; border:0; border-radius:6px; cursor:pointer;
    color:#0b0d12; background:linear-gradient(90deg,#ffd166,#ef476f); font-size:13px; letter-spacing:2px; font-weight:900;
    transition:transform .15s, filter .15s, opacity .2s;
  }
  .level-launch:hover { transform:translateY(-1px) scale(1.01); filter:saturate(1.12); }
  #overlay.loading .level-launch { opacity:.55; pointer-events:none; filter:saturate(.6); }
  #loadTxt { font-size:12px; color:#6b7590; letter-spacing:2px; }
  #menuMusicAudio { position:fixed; width:0; height:0; opacity:0; pointer-events:none; }

  @media (max-width: 720px) {
    #overlay { gap:12px; padding:18px; }
    #overlay h1 { font-size:40px; letter-spacing:5px; }
    #landingSignature {
      width:calc(100vw - 18px);
      bottom:10px;
      gap:8px;
      font-size:10px;
      flex-wrap:wrap;
    }
    .landing-signature-main {
      max-width:100%;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      padding:7px 10px;
    }
    #landingMusicMute { padding:7px 10px; font-size:10px; }
    #controls-list { font-size:12px; gap:5px 12px; }
    .level-select { width:calc(100vw - 20px); max-height:76vh; }
    .level-shell { padding:16px; }
    .level-head h2 { font-size:26px; }
    .level-grid { grid-template-columns:1fr; max-height:calc(76vh - 82px); }
  }
  @media (max-height: 700px) {
    #overlay:not(.choosing-level) { justify-content:flex-start; }
    .menu-main { margin:auto 0; }
    .controls-panel { max-height:min(420px, 42dvh); overflow:auto; overscroll-behavior:contain; }
    .level-select { max-height:calc(100dvh - 24px); }
    .level-grid { max-height:calc(100dvh - 122px); }
  }

  /* ---------- HUD ---------- */
  #hud {
    position:fixed; inset:0; pointer-events:none; z-index:30; display:none;
    --hud-safe-x: max(20px, env(safe-area-inset-left));
    --hud-safe-right: max(20px, env(safe-area-inset-right));
    --hud-safe-bottom: max(20px, env(safe-area-inset-bottom));
    --touch-reserve-bottom: 124px;
    --ui-mask-top: 0px;
    --ui-mask-right: 0px;
    --ui-mask-bottom: 0px;
    --ui-mask-left: 0px;
    clip-path: inset(var(--ui-mask-top) var(--ui-mask-right) var(--ui-mask-bottom) var(--ui-mask-left));
    -webkit-clip-path: inset(var(--ui-mask-top) var(--ui-mask-right) var(--ui-mask-bottom) var(--ui-mask-left));
    overflow:hidden;
  }
  #radioViewport {
    position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:15;
  }
  #radioViewport.interactive { pointer-events:auto; }
  #radioViewport.player-hover { cursor:pointer; }
  #radioViewport.editor-preview {
    overflow:visible; pointer-events:none; z-index:120;
  }
  body.lk-editor-simulate-preview #radioViewport.interactive,
  body.lk-editor-simulate-preview #radioViewport.editor-preview {
    pointer-events:none;
  }
  body.lk-editor-simulate-preview #radio.open,
  body.lk-editor-simulate-preview #radio.editor-preview,
  body.lk-editor-simulate-preview #radio .radioPlayerHit,
  body.lk-editor-simulate-preview #radio .radioKnob,
  body.lk-editor-simulate-preview #radio .radioEditBox {
    pointer-events:none;
  }
  #score {
    position:absolute; top:18px; left:50%; transform:translateX(-50%); text-align:center; color:#fff;
  }
  #score .total { font-size:34px; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.7); }
  #score .label { font-size:11px; letter-spacing:3px; color:#9aa3b8; }
  #driftBox {
    position:absolute; top:96px; left:50%; transform:translateX(-50%); text-align:center;
    opacity:0; transition:opacity .2s;
  }
  #driftBox.on { opacity:1; }
  #driftPts { font-size:26px; font-weight:800; color:#ffd166; text-shadow:0 0 14px rgba(255,209,102,.6); }
  #driftMult { font-size:16px; font-weight:700; color:#ef476f; }
  #speedo {
    display:none; position:absolute; right:var(--hud-safe-right); bottom:var(--hud-safe-bottom); text-align:right; color:#fff;
  }
  #speedo .speedReadout { display:flex; align-items:flex-end; justify-content:flex-end; gap:14px; }
  #speedo .kmh { font-size:44px; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.8); font-variant-numeric:tabular-nums; }
  #speedo .unit { font-size:12px; letter-spacing:3px; color:#9aa3b8; }
  #speedo .gearBox {
    min-width:54px; padding:6px 8px 5px; border-radius:6px; text-align:center;
    background:rgba(10,13,20,.72); border:1px solid rgba(255,255,255,.14);
    box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  }
  #speedo .gearBox span { display:block; font-size:9px; font-weight:800; letter-spacing:2px; color:#9aa3b8; }
  #speedo .gearBox b { display:block; font-size:28px; line-height:1; color:#ffd166; font-variant-numeric:tabular-nums; text-shadow:0 0 12px rgba(255,209,102,.35); }
  #vehicleHud {
    position:absolute; right:var(--hud-safe-right); bottom:var(--hud-safe-bottom); width:min(258px, calc(100% - var(--hud-safe-x) - var(--hud-safe-right))); color:#f6fbff; text-align:right;
    padding:13px 14px 12px; border-radius:16px; overflow:hidden;
    background:
      radial-gradient(circle at 88% 16%, rgba(75,227,160,.24), transparent 34%),
      linear-gradient(145deg, rgba(10,14,23,.88), rgba(18,23,35,.74));
    border:1px solid rgba(159,244,255,.22);
    box-shadow:0 18px 42px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter:blur(8px);
  }
  #vehicleHud::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform:skewX(-18deg) translateX(-70%); opacity:.55;
  }
  #vehicleHud .vhTop { position:relative; display:grid; grid-template-columns:1fr 74px; gap:8px; align-items:stretch; }
  #vehicleHud .vhMode, #vehicleHud .vhGear {
    border-radius:10px; padding:8px 9px 7px; background:rgba(3,6,12,.48);
    border:1px solid rgba(255,255,255,.11);
  }
  #vehicleHud span { display:block; font-size:9px; line-height:1; letter-spacing:1.8px; font-weight:900; color:#8fa1b9; }
  #vehicleHud b { font-variant-numeric:tabular-nums; }
  #driveTypeHud { display:block; margin-top:5px; font-size:16px; line-height:1; letter-spacing:1.2px; color:#ff4f89; text-shadow:0 0 18px rgba(255,79,137,.48); }
  #vehicleHud.race #driveTypeHud { color:#4be3a0; text-shadow:0 0 18px rgba(75,227,160,.48); }
  #vehicleHud.custom #driveTypeHud { color:#ffd166; text-shadow:0 0 18px rgba(255,209,102,.42); }
  #gearHud2 { display:block; margin-top:3px; font-size:28px; line-height:.95; color:#ffd166; text-shadow:0 0 15px rgba(255,209,102,.4); }
  #vehicleHud .vhSpeed { position:relative; display:flex; justify-content:flex-end; align-items:flex-end; gap:9px; margin:8px 0 6px; }
  #vehicleHud .vhSpeed b { font-size:54px; line-height:.88; letter-spacing:0; text-shadow:0 8px 22px rgba(0,0,0,.72); }
  #vehicleHud .vhSpeed span { padding-bottom:7px; color:#d4deee; }
  #vehicleHud .vhRpmMeta { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
  #rpmHud { font-size:13px; color:#d4deee; letter-spacing:1px; }
  #vehicleHud .vhRpmTrack {
    height:8px; border-radius:999px; padding:1px; background:rgba(255,255,255,.10);
    box-shadow:inset 0 1px 4px rgba(0,0,0,.65);
  }
  #vehicleHud .vhRpmTrack i {
    display:block; height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg, #4be3a0, #ffd166 58%, #ff4f89);
    box-shadow:0 0 16px rgba(255,79,137,.32);
  }
  #soccerHud {
    display:none; position:absolute; top:18px; left:50%; transform:translateX(-50%);
    min-width:260px; padding:12px 18px 11px; color:#f7fbff; text-align:center;
    border:1px solid rgba(255,255,255,.2); border-radius:15px;
    background:linear-gradient(145deg,rgba(5,24,18,.9),rgba(8,37,28,.76));
    box-shadow:0 18px 42px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
  }
  #soccerHud .soccerMode {font-size:9px;font-weight:900;letter-spacing:2.5px;color:#7bf0b3;}
  #soccerHud .soccerScore {display:flex;align-items:center;justify-content:center;gap:16px;margin:3px 0 4px;font-variant-numeric:tabular-nums;}
  #soccerHud .soccerScore b {font-size:34px;line-height:1;color:#fff;text-shadow:0 5px 16px rgba(0,0,0,.7);}
  #soccerHud .soccerScore span {font-size:19px;color:#789388;}
  #soccerHud .soccerKicks {display:flex;justify-content:space-between;gap:18px;min-height:12px;margin:-1px 3px 4px;}
  #soccerHud .soccerKicks>span {display:flex;gap:4px;}
  #soccerHud .soccerKicks i {font-style:normal;font-size:10px;color:#ff667d;text-shadow:0 1px 5px #000;}
  #soccerHud .soccerKicks i[data-result="goal"] {color:#7bf0b3;}
  #soccerHud .soccerMeta {display:flex;justify-content:space-between;gap:20px;font-size:9px;font-weight:900;letter-spacing:1.6px;color:#a9bbb4;}
  #soccerHud .soccerResult {min-height:16px;margin-top:4px;text-align:center;font-size:13px;font-weight:1000;letter-spacing:2px;color:#ff667d;}
  #soccerHud .soccerResult[data-result="goal"] {color:#7bf0b3;}
  #soccerHud .soccerResult[data-result="saved"] {color:#ffd166;}
  #soccerHud .soccerShotMeter {display:none;margin-top:9px;text-align:left;font-size:8px;font-weight:900;letter-spacing:1.5px;color:#a9bbb4;}
  #soccerHud .soccerShotMeter.on {display:block;}
  #soccerHud .soccerShotMeter>div {position:relative;height:8px;margin-top:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 4px rgba(0,0,0,.55);}
  #soccerHud .soccerShotMeter i {display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4be3a0 0 58%,#ffd166 76%,#ff4f70 100%);transition:width 35ms linear;}
  #soccerHud .soccerShotMeter b {position:absolute;top:-2px;left:50%;width:2px;height:12px;border-radius:2px;background:#fff;box-shadow:0 0 8px #fff;transform:translateX(-50%);}

  /* Power / height / curve are three separate decisions, so the meter shows
     three separate readouts. The sweet-spot window matches SWEET_MIN/MAX in
     js/runtime/game-hud.js. */
  #soccerHud .soccerShotMeter .ssmPower {position:relative;}
  #soccerHud .soccerShotMeter u {position:absolute;top:0;left:62%;width:26%;height:100%;background:rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);pointer-events:none;}
  #soccerHud .soccerShotMeter[data-power="sweet"] u {background:rgba(75,227,160,.3);box-shadow:0 0 10px rgba(75,227,160,.55);}
  #soccerHud .soccerShotMeter[data-power="over"] u {background:rgba(255,79,112,.22);}
  #soccerHud .soccerShotMeter.slowmo {color:#8affc4;}
  #soccerHud .soccerShotMeter.slowmo .ssmPower {box-shadow:inset 0 1px 4px rgba(0,0,0,.55),0 0 12px rgba(138,255,196,.35);}
  #soccerHud .ssmAxes {display:flex;gap:8px;margin-top:6px;align-items:stretch;}
  #soccerHud .ssmAxes label {display:flex;align-items:center;gap:5px;font-size:7.5px;letter-spacing:1.2px;color:#8fa39c;}
  #soccerHud .ssmAxes label>span {flex:0 0 auto;}
  #soccerHud .ssmHeight {flex:0 0 auto;}
  #soccerHud .ssmHeight>div {position:relative;width:8px;height:26px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 4px rgba(0,0,0,.55);overflow:hidden;}
  #soccerHud .ssmHeight i {position:absolute;left:0;bottom:0;display:block;width:100%;height:50%;background:linear-gradient(0deg,#4be3a0,#8ad7ff);transition:height 35ms linear;}
  #soccerHud .ssmCurve {flex:1 1 auto;}
  #soccerHud .ssmCurve>div {position:relative;flex:1 1 auto;width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 4px rgba(0,0,0,.55);overflow:hidden;}
  #soccerHud .ssmCurve>div:before {content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:rgba(255,255,255,.45);}
  #soccerHud .ssmCurve i {position:absolute;top:0;left:50%;display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd166,#ff8bd0);transition:width 35ms linear,left 35ms linear;}
  #soccerAimReticle {display:none;position:fixed;left:50%;top:46%;width:42px;height:42px;z-index:34;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 5px rgba(0,0,0,.9));transition:left 45ms linear,top 45ms linear;}
  #soccerAimReticle.on {display:block;}
  #soccerAimReticle:before,#soccerAimReticle:after {content:"";position:absolute;background:rgba(255,255,255,.92);border-radius:2px;}
  #soccerAimReticle:before {left:20px;top:0;width:2px;height:42px;}
  #soccerAimReticle:after {left:0;top:20px;width:42px;height:2px;}
  #soccerAimReticle i {position:absolute;inset:8px;border:2px solid #7bf0b3;border-radius:50%;box-shadow:0 0 12px rgba(123,240,179,.65);}
  #soccerAimReticle b {position:absolute;left:18px;top:18px;width:6px;height:6px;border-radius:50%;background:#ffd166;box-shadow:0 0 8px #ffd166;}
  #soccerAimReticle span {position:absolute;left:50%;top:47px;width:54px;height:3px;border-radius:3px;background:linear-gradient(90deg,#4be3a0,#ffd166 68%,#ff4f70);transform:translateX(-50%) scaleX(var(--shot-charge,0));transform-origin:left;}
  #soccerPhaseHud {color:#ffd166;}
  #hud[data-context="soccer"] #soccerHud {display:block;}
  #hud[data-context="soccer"] #score,
  #hud[data-context="soccer"] #driftBox,
  #hud[data-context="soccer"] #speedo,
  #hud[data-context="soccer"] #vehicleHud,
  #hud[data-context="soccer"] #tuneDock {display:none!important;}
  #hud[data-context="character"] #score,
  #hud[data-context="character"] #driftBox,
  #hud[data-context="character"] #speedo,
  #hud[data-context="character"] #vehicleHud,
  #hud[data-context="character"] #tuneDock {display:none!important;}
  #hud[data-context="none"] #score,
  #hud[data-context="none"] #driftBox,
  #hud[data-context="none"] #speedo,
  #hud[data-context="none"] #vehicleHud,
  #hud[data-context="none"] #soccerHud,
  #hud[data-context="none"] #soccerAimReticle,
  #hud[data-context="none"] #tuneDock,
  #hud[data-context="none"] #legend,
  #hud[data-context="none"] #hint {display:none!important;}
  body.lk-touch-active #speedo,
  body.lk-touch-active #vehicleHud {
    bottom:calc(var(--hud-safe-bottom) + var(--touch-reserve-bottom));
  }
  #hint { position:absolute; left:var(--hud-safe-x); bottom:var(--hud-safe-bottom); font-size:12px; color:#7d879e; letter-spacing:1px; line-height:1.7; }
  #popup {
    position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) scale(.8); font-size:38px; font-weight:800;
    color:#fff; opacity:0; text-shadow:0 0 20px rgba(255,209,102,.8); transition:all .35s; white-space:nowrap;
  }
  #popup.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

  /* ---------- controls legend ---------- */
  #legend {
    position:absolute; left:var(--hud-safe-x); bottom:var(--hud-safe-bottom); font-size:11.5px; color:#aab3c8;
    background:rgba(10,13,20,.72); border:1px solid rgba(255,255,255,.08); border-radius:8px;
    padding:10px 14px; line-height:1.75; backdrop-filter:blur(4px);
  }
  #legend .lg-title { color:#ffd166; font-weight:700; letter-spacing:2px; font-size:11px; margin-bottom:4px; cursor:pointer; }
  #legend.collapsed .lg-body { display:none; }
  #legend b { color:#e8ecf5; }

  /* ---------- driving setup ---------- */
  #tuneDock {
    position:absolute; top:18px; right:84px; width:min(360px, calc(100vw - 28px));
    display:flex; justify-content:flex-end; pointer-events:auto;
  }
  #tuneBtn {
    width:52px; height:52px; border-radius:8px; border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(180deg, rgba(78,84,96,.95), rgba(34,38,46,.95));
    color:#e8ecf5; font-size:26px; font-weight:800; line-height:1; cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .28s cubic-bezier(.2,.9,.25,1), border-color .18s, color .18s;
    z-index:2;
  }
  #tuneDock.open #tuneBtn { transform:rotate(180deg) scale(1.04); border-color:#4be3a0; color:#4be3a0; }
  #tunePanel {
    position:absolute; top:62px; right:0; width:100%; max-height:min(72vh, 620px); overflow:auto;
    padding:14px; border-radius:8px; color:#dfe6f2;
    background:linear-gradient(180deg, rgba(19,24,35,.96), rgba(9,12,18,.96));
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 18px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
    transform-origin:top right; transform:scale(.72); opacity:0; pointer-events:none;
    transition:transform .28s cubic-bezier(.2,.9,.25,1), opacity .2s ease;
    backdrop-filter:blur(6px);
  }
  #tuneDock.open #tunePanel { transform:scale(1); opacity:1; pointer-events:auto; }
  .tuneHead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .tuneTitle { font-size:12px; font-weight:800; letter-spacing:2px; color:#ffd166; }
  .tuneHint { font-size:10px; color:#7f8aa1; letter-spacing:1px; }
  .tunePresetBar { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
  .tunePreset {
    appearance:none; border:1px solid rgba(255,255,255,.14); border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    color:#dfe8ff; padding:8px 10px; font-size:11px; font-weight:900; letter-spacing:.8px;
    cursor:pointer; transition:transform .12s ease, border-color .12s ease, color .12s ease;
  }
  .tunePreset:hover, .tunePreset.active { transform:translateY(-1px); border-color:#4be3a0; color:#4be3a0; }
  .tuneCurveBtn {
    width:100%; margin:0 0 10px; padding:9px 10px; border-radius:8px;
    border:1px solid rgba(75,227,160,.38);
    background:linear-gradient(180deg, rgba(75,227,160,.16), rgba(255,209,102,.07));
    color:#dfffee; font-size:11px; font-weight:900; letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; transition:border-color .12s ease, transform .12s ease, color .12s ease;
  }
  .tuneCurveBtn:hover { transform:translateY(-1px); border-color:#ffd166; color:#ffd166; }
  .tuneExportBtn {
    border-color:rgba(157,180,255,.38);
    background:linear-gradient(180deg, rgba(157,180,255,.15), rgba(75,227,160,.06));
    color:#dfe8ff;
  }
  .tuneRow { padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
  .tuneMeta { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; margin-bottom:7px; }
  .tuneName { font-size:12px; font-weight:800; letter-spacing:1px; color:#fff; }
  .tuneDesc { grid-column:1 / -1; font-size:11px; line-height:1.35; color:#9aa3b8; }
  .tuneVal { min-width:34px; text-align:right; font-size:12px; color:#4be3a0; font-weight:800; font-variant-numeric:tabular-nums; }
  .tuneControl { display:grid; grid-template-columns:28px 1fr 28px; gap:8px; align-items:center; }
  .tuneMin, .tuneMax { font-size:10px; color:#6f7a91; font-variant-numeric:tabular-nums; }
  .tuneMax { text-align:right; }
  .tuneRow input[type="range"] {
    width:100%; accent-color:#4be3a0; cursor:pointer;
  }
  #tuneCurveOverlay {
    position:fixed; inset:0; z-index:180; display:flex; align-items:center; justify-content:center;
    padding:20px; background:rgba(3,6,10,.62); opacity:0; pointer-events:none;
    transition:opacity .18s ease; backdrop-filter:blur(5px);
  }
  #tuneCurveOverlay.open { opacity:1; pointer-events:auto; }
  .tuneCurvePanel {
    width:min(720px, calc(100vw - 32px)); max-height:calc(100vh - 36px); overflow:auto;
    padding:16px; border-radius:8px; color:#dfe8ff;
    background:linear-gradient(180deg, rgba(18,24,34,.98), rgba(8,12,18,.98));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .tuneCurveTop { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
  .tuneCurveTop b { display:block; color:#ffd166; font-size:12px; letter-spacing:2px; }
  .tuneCurveTop span { display:block; margin-top:4px; color:#8f9ab0; font-size:11px; letter-spacing:.6px; }
  .tuneCurveTop button {
    width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.07); color:#dfe8ff; font-size:22px; font-weight:800; cursor:pointer;
  }
  .tuneCurveSelect {
    display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:center; margin-bottom:12px;
    color:#9aa6bc; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  }
  .tuneCurveSelect select {
    width:100%; min-height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.14);
    background:#101723; color:#dfe8ff; padding:0 10px; font-weight:800;
  }
  .tuneCurvePanel canvas {
    display:block; width:100%; aspect-ratio:640 / 260; height:auto; border-radius:8px;
    border:1px solid rgba(255,255,255,.12); background:#091019;
  }
  .tuneCurveSliders { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:12px; }
  .tuneCurveSliders label {
    display:grid; grid-template-columns:48px 1fr 52px; gap:8px; align-items:center;
    color:#9aa6bc; font-size:10px; font-weight:900; letter-spacing:1px;
  }
  .tuneCurveSliders input { width:100%; accent-color:#4be3a0; }
  .tuneCurveSliders output { color:#4be3a0; font-weight:900; text-align:right; font-variant-numeric:tabular-nums; }
  #settingsBtn {
    position:absolute; top:18px; right:22px; width:52px; height:52px; z-index:2;
    border-radius:8px; border:1px solid rgba(255,255,255,.22);
    background:linear-gradient(180deg, rgba(78,84,96,.95), rgba(34,38,46,.95));
    color:#e8ecf5; font-size:26px; font-weight:800; line-height:1; cursor:pointer;
    pointer-events:auto; box-shadow:0 8px 22px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .28s cubic-bezier(.2,.9,.25,1), border-color .18s, color .18s;
  }
  #settingsBtn:hover, #settingsBtn.open { transform:rotate(120deg) scale(1.04); border-color:#ffd166; color:#ffd166; }
  #settingsOverlay {
    position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
    box-sizing:border-box;
    padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow:auto;
    overscroll-behavior:contain;
    background:rgba(4,6,10,.48); opacity:0; pointer-events:none; transition:opacity .22s ease;
  }
  #settingsOverlay.editor { background:rgba(4,6,10,.58); }
  #settingsOverlay.open { opacity:1; pointer-events:auto; }
  #settingsPanel {
    position:relative; width:min(520px, 100%); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px);
    overflow:auto; padding:18px; border-radius:8px;
    background:linear-gradient(180deg, rgba(20,25,37,.98), rgba(8,11,17,.98));
    border:1px solid rgba(255,255,255,.13); color:#dfe6f2;
    box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
    transform:scale(.78); transition:transform .28s cubic-bezier(.2,.9,.25,1);
    scrollbar-width:thin;
    scrollbar-color:rgba(157,180,255,.52) transparent;
  }
  #settingsPanel::-webkit-scrollbar { width:10px; height:10px; }
  #settingsPanel::-webkit-scrollbar-track {
    background:transparent;
    margin:9px 0;
  }
  #settingsPanel::-webkit-scrollbar-thumb {
    min-height:38px;
    border:3px solid transparent;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(157,180,255,.62), rgba(75,227,160,.45)) padding-box;
  }
  #settingsPanel::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, rgba(183,199,255,.82), rgba(75,227,160,.68)) padding-box;
  }
  #settingsPanel::-webkit-scrollbar-corner { background:transparent; }
  #settingsOverlay.open #settingsPanel { transform:scale(1); }
  .settingsHead { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
  .settingsEyebrow { color:#7f8aa1; font-size:10px; font-weight:800; letter-spacing:2px; margin-bottom:3px; }
  .settingsTitle { color:#ffd166; font-size:13px; font-weight:800; letter-spacing:2px; }
  #settingsClose {
    width:38px; height:38px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.04); color:#e8ecf5; font-size:24px; cursor:pointer;
  }
  #settingsClose:hover { border-color:#ef476f; color:#ef476f; }
  .pauseActions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  .pauseActions button, .settingsInlineBtn {
    min-height:38px; padding:0 14px; border-radius:7px; border:1px solid rgba(255,255,255,.16);
    background:#1b2130; color:#e8ecf5; font-weight:800; letter-spacing:1px; cursor:pointer;
  }
  .pauseActions button:hover, .settingsInlineBtn:hover { border-color:#4be3a0; color:#4be3a0; background:#222b3e; }
  body.lk-gamepad-menu-nav #settingsOverlay button:focus,
  body.lk-gamepad-menu-nav #settingsOverlay input:focus,
  body.lk-gamepad-menu-nav #settingsOverlay select:focus {
    outline:2px solid #ffd166;
    outline-offset:2px;
    box-shadow:0 0 0 4px rgba(255,209,102,.16);
  }
  #pauseResume { background:linear-gradient(90deg, rgba(47,158,95,.9), rgba(39,179,113,.9)); border-color:transparent; color:#fff; }
  .settingsTabs { display:flex; gap:6px; margin-bottom:8px; }
  .settingsTabs button {
    flex:1; height:32px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04); color:#9aa3b8; cursor:pointer; font-weight:800; letter-spacing:1px;
  }
  .settingsTabs button.on { color:#fff; border-color:#ffd166; background:rgba(255,209,102,.12); }
  .settingsSection { display:none; }
  .settingsSection.on { display:block; }
  .settingsRow { padding:12px 0; border-top:1px solid rgba(255,255,255,.08); }
  .settingsRow.hidden { display:none; }
  #lkVideoApplyOverlay {
    position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; background:rgba(4,7,12,.58); backdrop-filter:blur(5px);
    transition:opacity .16s ease;
  }
  #lkVideoApplyOverlay.on { opacity:1; pointer-events:auto; }
  .lk-video-apply-card {
    min-width:min(330px,calc(100vw - 36px)); padding:22px 26px; border-radius:10px;
    display:grid; grid-template-columns:34px 1fr; column-gap:14px; align-items:center;
    color:#eef3ff; background:rgba(12,17,27,.94); border:1px solid rgba(157,180,255,.3);
    box-shadow:0 24px 80px rgba(0,0,0,.55);
  }
  .lk-video-apply-card b { font-size:14px; letter-spacing:.5px; }
  .lk-video-apply-card small { grid-column:2; color:#9aa7bf; margin-top:3px; }
  .lk-video-apply-spinner {
    grid-row:1 / span 2; width:28px; height:28px; border-radius:50%;
    border:3px solid rgba(157,180,255,.2); border-top-color:#ffd166;
    animation:lk-video-spin .72s linear infinite;
  }
  @keyframes lk-video-spin { to { transform:rotate(360deg); } }
  .settingsMeta { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start; margin-bottom:8px; }
  .settingsName { font-size:12px; font-weight:800; color:#fff; letter-spacing:1px; }
  .settingsDesc { grid-column:1 / -1; font-size:11px; line-height:1.35; color:#9aa3b8; }
  .settingsVal { min-width:42px; text-align:right; color:#4be3a0; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
  .settingsControl { display:grid; grid-template-columns:28px 1fr 34px; gap:8px; align-items:center; }
  .settingsControl span { font-size:10px; color:#6f7a91; font-variant-numeric:tabular-nums; }
  .settingsControl span:last-child { text-align:right; }
  .settingsRow input[type="range"] { width:100%; accent-color:#ffd166; cursor:pointer; }
  .settingsSelect {
    width:100%; height:34px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:#12161f; color:#dfe5f1; padding:0 10px;
  }
  .settingsToggle { display:flex; align-items:center; gap:8px; color:#dfe5f1; font-size:12px; font-weight:700; }
  .settingsToggle input { width:16px; height:16px; accent-color:#4be3a0; }
  #settingsOverlay.editor [data-settings-tab="gameplay"],
  #settingsOverlay.editor [data-settings-section="gameplay"],
  #settingsOverlay.editor [data-audio-row="car"],
  #settingsOverlay.editor [data-audio-row="sfx"] { display:none; }
  #settingsOverlay.editor .settingsTabs { grid-template-columns:1fr 1fr; }
  #settingsOverlay.options-only .pauseActions,
  #settingsOverlay.options-only [data-settings-tab="controls"],
  #settingsOverlay.options-only [data-settings-tab="gameplay"],
  #settingsOverlay.options-only [data-settings-section="controls"],
  #settingsOverlay.options-only [data-settings-section="gameplay"] { display:none!important; }
  #settingsOverlay.options-only .settingsTabs { max-width:340px; margin-inline:auto; }
  body.lk-menu-presentation #hud {
    display:block!important;
    clip-path:none;
    -webkit-clip-path:none;
    overflow:visible;
  }
  body.lk-menu-presentation #hud > :not(#settingsBtn) { display:none!important; }
  body.lk-menu-presentation #settingsBtn { display:block!important; pointer-events:auto; }

  /* ---------- preload bar ---------- */
  #loadBarWrap { width:280px; height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; opacity:1; transition:opacity .18s ease; }
  #loadBarWrap.complete { opacity:0; transition:opacity .42s ease .22s; }
  #loadBar { width:0%; height:100%; background:linear-gradient(90deg,#ffd166,#ef476f); transition:width .2s; }

  /* ---------- slow-mo blur ---------- */
  #c { transition:filter .45s ease; }
  #c.slowmo { filter:blur(5px) saturate(.75) brightness(.85); }

  /* ---------- radio (soundhud) ---------- */
  #radio {
    --radio-width: min(92vw, 880px);
    --radio-scale-x: 1;
    --radio-scale-y: 1;
    --radio-img-z: 1;
    --radio-screen-z: 2;
    --radio-x: 50%;
    --radio-y: 2vh;
    --radio-open-offset: 5%;
    position:absolute;
    left:var(--radio-x);
    bottom:var(--radio-bottom, 0px);
    transform:translate(-50%, calc(100% + var(--radio-open-offset)));
    width:var(--radio-width); z-index:15; transition:transform .55s cubic-bezier(.2,.9,.25,1);
    pointer-events:none;
  }
  #radio.open, #radio.editor-preview { transform:translate(-50%, calc(-1 * var(--radio-y))); pointer-events:auto; }
  #radio.editor-preview {
    z-index:120; filter:drop-shadow(0 22px 38px rgba(0,0,0,.5)); user-select:none;
  }
  #radio.disabled { display:none; }
  #radio.editor-preview.disabled { display:block; opacity:.42; }
  .radioEditBox {
    position:absolute; display:none; border:2px solid #4be3a0; border-radius:6px;
    box-shadow:0 0 0 1px rgba(0,0,0,.65), 0 0 18px rgba(75,227,160,.35);
    z-index:60; cursor:move; pointer-events:auto;
  }
  .radioEditBox::before {
    content:attr(data-label); position:absolute; left:8px; top:-25px; padding:3px 7px;
    border-radius:5px; background:rgba(8,12,18,.92); color:#4be3a0;
    font-size:10px; font-weight:800; letter-spacing:1px; white-space:nowrap;
    border:1px solid rgba(75,227,160,.45);
  }
  .radioEditHandle {
    position:absolute; right:-7px; bottom:-7px; width:15px; height:15px;
    border-radius:3px; background:#4be3a0; border:2px solid #071016;
    cursor:nwse-resize;
  }
  #radio.hud-edit-frame, #radio.hud-edit-screen, #radio.hud-edit-buttons { transition:none; }
  #radio.hud-edit-frame #radioFrameEdit { display:block; inset:0; }
  #radio.hud-edit-screen #radioScreenEdit {
    display:block; left:var(--scr-left); top:var(--scr-top); width:var(--scr-w); height:var(--scr-h);
  }
  /* cerchietti VOL− / VOL+ / BASS: z-index runtime sempre sopra PNG/screen per mantenere hit target cliccabili */
  #radioKnobs { position:absolute; inset:0; z-index:var(--radio-buttons-z,8); pointer-events:none; }
  #radioPlayerHits { position:absolute; inset:0; z-index:var(--radio-player-z,20); pointer-events:none; }
  .radioPlayerHit {
    position:absolute; display:none; padding:0; border:0; border-radius:50%; background:transparent;
    cursor:pointer; pointer-events:none;
  }
  #radio.open .radioPlayerHit, #radio.editor-preview .radioPlayerHit { display:block; pointer-events:auto; }
  .radioKnob {
    position:absolute; transform:translate(-50%,-50%);
    aspect-ratio:1/1; border-radius:50%; padding:0;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02) 70%);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 0 calc(4px + 16px*var(--k-on,0)) rgba(255,125,84, calc(.85*var(--k-on,0))), inset 0 0 6px rgba(0,0,0,.5);
    opacity:var(--knob-alpha,.22); cursor:pointer;
    transition:opacity .15s, box-shadow .2s; pointer-events:none;
  }
  #radio.open .radioKnob, #radio.editor-preview .radioKnob { pointer-events:auto; }
  .radioKnob:hover { opacity:1; }
  .radioKnob:active { transform:translate(-50%,-50%) scale(.9); }
  .radioKnob .radioKnobHandle {
    display:none; position:absolute; right:-6px; bottom:-6px; width:13px; height:13px;
    border-radius:3px; background:#4be3a0; border:2px solid #071016; cursor:nwse-resize;
  }
  #radio.hud-edit-buttons .radioKnob {
    opacity:1; border:2px dashed #4be3a0; background:rgba(75,227,160,.14); cursor:move;
  }
  #radio.hud-edit-buttons .radioKnob::before {
    content:attr(data-label); position:absolute; left:50%; top:-24px; transform:translateX(-50%);
    padding:2px 7px; border-radius:4px; background:rgba(8,12,18,.92); color:#4be3a0;
    font-size:9px; font-weight:800; letter-spacing:1px; white-space:nowrap;
    border:1px solid rgba(75,227,160,.45);
  }
  #radio.hud-edit-buttons .radioKnob .radioKnobHandle { display:block; }
  #radio img {
    position:relative; z-index:var(--radio-img-z); width:100%; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none;
    transform:scale(var(--radio-scale-x), var(--radio-scale-y)); transform-origin:center bottom;
  }
  /* screen inside the PNG cutout.
     ALLINEAMENTO: regola SOLO queste 4 variabili finché il pannello combacia
     col ritaglio interno di soundhud.png (percentuali relative all'immagine). */
  #radioScreen {
    --scr-left:5.5%; --scr-top:7%; --scr-w:89%; --scr-h:84%;
    z-index:var(--radio-screen-z);
    position:absolute; left:var(--scr-left); top:var(--scr-top); width:var(--scr-w); height:var(--scr-h);
    background:
      radial-gradient(130% 80% at 50% -10%, rgba(46,60,86,.5), rgba(0,0,0,0) 60%),
      linear-gradient(180deg, #151b28 0%, #0e1220 55%, #0a0d16 100%);
    border-radius: 2.5% / 4.5%;
    box-shadow: inset 0 0 26px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
    display:flex; flex-direction:column; color:#dfe6f2; font-family:'Segoe UI',Arial,sans-serif;
    padding:2% 2.5%; overflow:hidden;
  }
  .rs-head { color:#4be3a0; font-weight:800; letter-spacing:3px; font-size:clamp(10px,1.7vw,17px);
    display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; }
  .rs-np { display:flex; align-items:center; gap:8px; }
  .rs-head .tri { color:#4be3a0; text-shadow:0 0 10px #4be3a0; }
  .rs-clockdate { display:flex; flex-direction:column; align-items:center; line-height:1.05; letter-spacing:1px; }
  #rsClock { font-size:clamp(13px,2vw,22px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
  #rsDate { font-size:clamp(7px,1vw,11px); color:#8b93a7; letter-spacing:2px; font-weight:600; }
  .rs-main { flex:1; display:flex; gap:3%; margin-top:1.5%; min-height:0; }
  .rs-left { width:26%; display:flex; flex-direction:column; gap:4px; min-width:0; }
  #albumArt { width:100%; aspect-ratio:1; border-radius:6px; background:#0a0e16; box-shadow:0 0 14px rgba(80,200,255,.15); }
  .rs-g { font-size:clamp(8px,1.1vw,12px); color:#9aa3b8; white-space:nowrap; }
  .rs-g b { color:#fff; }
  #gGraph { width:100%; height:14%; background:rgba(255,255,255,.03); border-radius:3px; }
  .rs-center { flex:1; display:flex; flex-direction:column; min-width:0; }
  #rsTitle { font-size:clamp(15px,2.8vw,30px); font-weight:800; color:#fff; letter-spacing:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #rsArtist { font-size:clamp(10px,1.6vw,16px); color:#8b93a7; letter-spacing:2px; }
  .rs-controls { display:flex; align-items:center; gap:6%; margin:auto 0; justify-content:center; }
  .rs-controls button {
    background:none; border:none; color:#e8ecf5; cursor:pointer; font-size:clamp(16px,2.6vw,26px);
    transition:transform .12s, color .12s; line-height:1; pointer-events:auto;
  }
  .rs-controls button:hover, .rs-controls button.radio-hover { transform:scale(1.15); color:#4be3a0; }
  #btnPlay { border:2px solid #e8ecf5; border-radius:50%; width:clamp(34px,5.4vw,54px); height:clamp(34px,5.4vw,54px); }
  #btnShuffle.on { color:#4be3a0; text-shadow:0 0 8px #4be3a0; }
  .rs-progress { display:flex; align-items:center; gap:8px; font-size:clamp(9px,1.3vw,13px); color:#9aa3b8; }
  .rs-progress .bar { flex:1; height:5px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; cursor:pointer; }
  #tFill { width:0%; height:100%; background:#4be3a0; border-radius:3px; }
  .rs-vol { display:flex; align-items:center; gap:8px; margin-top:1.5%; font-size:clamp(9px,1.3vw,13px); color:#9aa3b8; }
  .rs-vol .lbl { letter-spacing:2px; font-weight:700; }
  .rs-vol input[type=range] { flex:1; height:5px; accent-color:#4be3a0; cursor:pointer; background:transparent; }
  .rs-vol b { color:#fff; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; }
  .rs-right { width:15%; text-align:right; display:flex; flex-direction:column; gap:1%; font-variant-numeric:tabular-nums; }
  .rs-right .lbl { font-size:clamp(7px,1vw,11px); color:#8b93a7; letter-spacing:1px; margin-top:4%; }
  .rs-right .val { font-size:clamp(12px,1.8vw,20px); font-weight:800; color:#fff; }

  /* ---------- Controls settings tab (in-game) ---------- */
  .lk-controls-body { display:flex; flex-direction:column; gap:14px; }
  .lk-ctrl-block { border-top:1px solid rgba(255,255,255,.08); padding-top:12px; }
  .lk-ctrl-block:first-child { border-top:none; padding-top:0; }
  .lk-ctrl-h { font-size:12px; font-weight:800; letter-spacing:1px; color:#fff; margin-bottom:8px; }
  .lk-ctrl-sub { font-size:10px; font-weight:800; letter-spacing:1px; color:#8b93a7; margin:8px 0 4px; text-transform:uppercase; }
  .lk-ctrl-empty { font-size:11px; color:#8b93a7; }
  .lk-ctrl-dev { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; color:#dfe5f1; }
  .lk-ctrl-dot { width:9px; height:9px; border-radius:50%; background:#4be3a0; flex:none; }
  .lk-ctrl-dot.lk-dev-gamepad { background:#9db4ff; }
  .lk-ctrl-dot.lk-dev-touch { background:#ffd166; }
  .lk-ctrl-devname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lk-ctrl-tag { font-size:10px; font-weight:800; color:#07080c; background:#4be3a0; border-radius:5px; padding:1px 7px; }
  .lk-ctrl-player, .lk-ctrl-bind, .lk-ctrl-dev { min-height:30px; }
  .lk-ctrl-player, .lk-ctrl-bind { display:flex; align-items:center; gap:10px; padding:5px 0; }
  .lk-ctrl-plabel, .lk-ctrl-bindname { flex:1; font-size:12px; color:#dfe5f1; }
  .lk-ctrl-select {
    height:32px; min-width:150px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:#12161f; color:#dfe5f1; padding:0 10px;
  }
  .lk-ctrl-toggle { display:flex; align-items:center; gap:8px; color:#dfe5f1; font-size:12px; font-weight:700; }
  .lk-ctrl-toggle input { width:16px; height:16px; accent-color:#4be3a0; }
  .lk-ctrl-key {
    min-width:96px; height:30px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05); color:#fff; font-weight:800; letter-spacing:1px; cursor:pointer;
  }
  .lk-ctrl-key:hover { border-color:#ffd166; }
  .lk-ctrl-key.capturing { border-color:#4be3a0; color:#4be3a0; animation:lkCapPulse 1s ease-in-out infinite; }
  @keyframes lkCapPulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
  .lk-ctrl-note { font-size:11px; color:#8b93a7; padding:5px 0; }
  .lk-ctrl-reset {
    margin-top:10px; width:100%; height:34px; border-radius:7px; cursor:pointer;
    border:1px solid rgba(239,71,111,.4); background:rgba(239,71,111,.12); color:#ff9db1; font-weight:800; letter-spacing:1px;
  }
  .lk-ctrl-reset:hover { background:rgba(239,71,111,.2); }

  /* ---------- On-screen touch controls ---------- */
  #lkTouchControls {
    position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:58; display:none;
    --touch-safe-x: max(20px, env(safe-area-inset-left));
    --touch-safe-right: max(20px, env(safe-area-inset-right));
    --touch-safe-bottom: max(18px, env(safe-area-inset-bottom));
    justify-content:space-between; align-items:flex-end; gap:16px;
    padding:0 var(--touch-safe-right) var(--touch-safe-bottom) var(--touch-safe-x); pointer-events:none;
    overflow:hidden;
  }
  #lkTouchControls.on { display:flex; }
  #lkTouchControls .lk-touch-steer, #lkTouchControls .lk-touch-btn { pointer-events:auto; touch-action:none; }
  .lk-touch-steer {
    width:min(42%,320px); height:clamp(78px,18%,96px); border-radius:16px;
    background:rgba(12,16,24,.5); border:1px solid rgba(255,255,255,.14);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; backdrop-filter:blur(4px);
  }
  .lk-touch-steer-track {
    position:relative; width:82%; height:34px; border-radius:17px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  }
  .lk-touch-steer-thumb {
    position:absolute; left:50%; top:50%; width:44px; height:26px; margin:-13px 0 0 -22px; border-radius:13px;
    background:linear-gradient(180deg,#ffd166,#ef476f); transition:transform .04s linear;
  }
  .lk-touch-hint { font-size:10px; font-weight:800; letter-spacing:2px; color:#9aa3b8; }
  .lk-touch-pedals { display:flex; align-items:flex-end; gap:12px; }
  .lk-touch-btn {
    width:clamp(58px,9%,74px); height:clamp(58px,16%,74px); border-radius:50%; border:1px solid rgba(255,255,255,.16);
    background:rgba(12,16,24,.55); color:#fff; font-weight:800; letter-spacing:1px; text-transform:uppercase;
    font-size:11px; cursor:pointer; backdrop-filter:blur(4px);
  }
  .lk-touch-btn.on { transform:scale(.94); }
  .lk-touch-gas { border-color:rgba(75,227,160,.5); color:#4be3a0; }
  .lk-touch-gas.on { background:rgba(75,227,160,.25); }
  .lk-touch-brake { border-color:rgba(239,71,111,.5); color:#ff9db1; }
  .lk-touch-brake.on { background:rgba(239,71,111,.25); }
  .lk-touch-hb { width:clamp(50px,8%,60px); height:clamp(50px,13%,60px); font-size:10px; border-color:rgba(255,209,102,.5); color:#ffd166; }
  .lk-touch-hb.on { background:rgba(255,209,102,.22); }

  /* ================= Window manager ================= */
  .lk-win-layer { position:fixed; inset:0; z-index:3999; pointer-events:none; }
  .lk-win, .lk-movable { pointer-events:auto; }
  .lk-win {
    position:fixed; display:none; flex-direction:column; min-width:300px; min-height:200px;
    max-width:calc(100vw - 12px); max-height:calc(100vh - 12px); max-height:calc(100dvh - 12px);
    background:linear-gradient(180deg,#141924,#0d1017); border:1px solid rgba(255,255,255,.14);
    border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.55); overflow:hidden; color:#dfe5f1;
  }
  .lk-win.open { display:flex; }
  .lk-win.dragging, .lk-movable.dragging { opacity:.96; }
  .lk-win-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:move;
    padding:10px 12px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.09);
    user-select:none; touch-action:none;
  }
  .lk-win-title { font-size:12px; font-weight:800; letter-spacing:1.5px; color:#fff; text-transform:uppercase; }
  .lk-win-close {
    width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05); color:#dfe5f1; cursor:pointer; font-size:16px; line-height:1;
  }
  .lk-win-close:hover { border-color:#ef476f; color:#ff9db1; }
  .lk-win-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px; scrollbar-width:thin; scrollbar-color:rgba(157,180,255,.45) rgba(255,255,255,.05); }
  .lk-win-body::-webkit-scrollbar,
  .lk-map-actions::-webkit-scrollbar { width:9px; height:9px; }
  .lk-win-body::-webkit-scrollbar-track,
  .lk-map-actions::-webkit-scrollbar-track { background:rgba(255,255,255,.04); border-radius:9px; }
  .lk-win-body::-webkit-scrollbar-thumb,
  .lk-map-actions::-webkit-scrollbar-thumb { background:rgba(157,180,255,.38); border-radius:9px; border:2px solid rgba(13,16,23,.95); }
  .lk-win-body::-webkit-scrollbar-thumb:hover,
  .lk-map-actions::-webkit-scrollbar-thumb:hover { background:rgba(157,180,255,.58); }
  .lk-win-resize {
    position:absolute; right:2px; bottom:2px; width:16px; height:16px; cursor:nwse-resize; touch-action:none;
    background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 62%,transparent 62%);
  }

  /* ================= Mapping overlay ================= */
  .lk-map { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; overflow:hidden; }
  .lk-map-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .lk-map-ctx { font-size:11px; color:#9aa3b8; font-weight:700; letter-spacing:.5px; display:flex; align-items:center; gap:6px; }
  .lk-map-ctxsel, .lk-map-instsel {
    height:30px; border-radius:7px; border:1px solid rgba(255,255,255,.14); background:#12161f; color:#dfe5f1; padding:0 8px;
  }
  .lk-map-tabs { display:flex; gap:6px; }
  .lk-map-tab {
    height:30px; padding:0 14px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.04); color:#9aa3b8; cursor:pointer; font-weight:800; letter-spacing:1px;
  }
  .lk-map-tab.on { color:#fff; background:rgba(120,150,255,.16); border-color:#5a74b8; box-shadow:inset 0 0 0 1px rgba(120,150,255,.25); }
  .lk-map-instrow { display:flex; align-items:center; gap:8px; }
  .lk-map-inst-add, .lk-map-inst-rm {
    height:30px; padding:0 10px; border-radius:7px; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05); color:#dfe5f1; cursor:pointer; font-weight:700;
  }
  .lk-map-inst-add:hover { border-color:#4be3a0; color:#4be3a0; }
  .lk-map-work { flex:1; min-height:0; display:grid; grid-template-rows:auto minmax(0, 1fr); gap:10px; }
  .lk-map-stage {
    display:flex; align-items:center; justify-content:center; padding:12px; background:rgba(0,0,0,.22);
    border-radius:8px; border:1px solid rgba(255,255,255,.06); min-height:170px; max-height:290px; overflow:hidden;
  }
  .lk-map-actions {
    min-height:0; overflow:auto; display:flex; flex-direction:column; gap:4px; padding:2px 8px 2px 0;
    scrollbar-width:thin; scrollbar-color:rgba(157,180,255,.45) rgba(255,255,255,.05);
  }
  .lk-map-arow { display:flex; align-items:center; gap:10px; padding:5px 4px; border-radius:7px; min-width:0; }
  .lk-map-arow.conflict { background:rgba(239,71,111,.12); }
  .lk-map-adot { width:10px; height:10px; border-radius:3px; flex:none; }
  .lk-map-aname { flex:1 1 160px; min-width:120px; font-size:12px; color:#dfe5f1; }
  .lk-map-bindings { flex:0 1 56%; min-width:230px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
  .lk-map-keywrap { display:inline-flex; align-items:center; min-width:0; }
  .lk-map-chip {
    min-width:92px; height:30px; padding:0 12px; border-radius:7px; border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.05); color:#fff; font-weight:800; letter-spacing:1px; cursor:pointer;
  }
  .lk-map-keychip { min-width:48px; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:7px 0 0 7px; }
  .lk-map-bind-remove, .lk-map-addbind {
    height:30px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
    color:#cfd6e4; font-weight:800; cursor:pointer;
  }
  .lk-map-bind-remove { width:24px; border-left:none; border-radius:0 7px 7px 0; color:#ff9db1; }
  .lk-map-bind-remove:hover { border-color:#ef476f; background:rgba(239,71,111,.16); }
  .lk-map-addbind { min-width:30px; padding:0 9px; border-radius:7px; color:#9db4ff; }
  .lk-map-addbind:hover:not(:disabled) { border-color:#9db4ff; background:rgba(157,180,255,.12); color:#dbe6ff; }
  .lk-map-addbind:disabled { opacity:.4; cursor:not-allowed; }
  .lk-map-emptybind { height:30px; display:inline-flex; align-items:center; color:#6f7a91; font-weight:800; padding:0 4px; }
  .lk-map-chip:hover { border-color:#ffd166; }
  .lk-map-chip.capturing { border-color:#4be3a0; color:#4be3a0; animation:lkCapPulse 1s ease-in-out infinite; }
  .lk-map-addbind.capturing { border-color:#4be3a0; color:#4be3a0; animation:lkCapPulse 1s ease-in-out infinite; }
  .lk-map-note, .lk-map-hint { font-size:11px; color:#8b93a7; }
  .lk-map-hint { margin-top:auto; padding-top:6px; border-top:1px solid rgba(255,255,255,.07); }

  /* ================= Device visuals ================= */
  .lk-dv { --dv:transparent; }
  .lk-dv-keyboard { display:flex; align-items:flex-end; justify-content:center; gap:14px; width:100%; flex-wrap:wrap; }
  .lk-dv-kb-main, .lk-dv-kb-arrows { display:flex; flex-direction:column; gap:5px; }
  .lk-dv-kb-row { display:grid; grid-auto-flow:column; grid-auto-columns:27px; gap:4px; }
  .lk-dv-kb-extra { margin-top:3px; grid-auto-columns:minmax(40px, auto); }
  .lk-dv-key {
    position:relative; height:35px; min-width:27px; border-radius:6px; cursor:pointer;
    border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#cfd6e4;
    font-size:9px; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:2px 2px;
    overflow:hidden;
  }
  .lk-dv-key.ghost { border:none; background:transparent; cursor:default; }
  .lk-dv-key.bound { border-color:var(--dv); box-shadow:inset 0 0 0 1px var(--dv), 0 0 10px -3px var(--dv); color:#fff; }
  .lk-dv-key.conflict { border-color:#ef476f; box-shadow:inset 0 0 0 1px #ef476f; }
  .lk-dv-key.active { background:var(--dv); color:#0b0e14; transform:translateY(1px); }
  .lk-dv-keytag {
    display:block; max-width:100%; min-height:9px; overflow:hidden; text-overflow:ellipsis;
    font-size:6px; line-height:1; letter-spacing:.2px; color:var(--dv); font-weight:800; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  }
  .lk-dv-gamepad { padding:4px; }
  .lk-dv-gp-body {
    position:relative; width:320px; height:214px; border-radius:64px/54px;
    background:radial-gradient(circle at 50% 30%, #232a38, #12161f); border:1px solid rgba(255,255,255,.14);
  }
  .lk-dv-gp-btn {
    position:absolute; transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%; cursor:pointer; padding:0;
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#cfd6e4; font-size:10px; font-weight:800;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; overflow:hidden;
  }
  .lk-dv-gp-btn.bound { border-color:var(--dv); box-shadow:0 0 10px -2px var(--dv), inset 0 0 0 1px var(--dv); color:#fff; }
  .lk-dv-gp-btn.conflict { border-color:#ef476f; }
  .lk-dv-gp-btn.active { background:var(--dv); color:#0b0e14; }
  .lk-dv-gp-lbl { pointer-events:none; }
  .lk-dv-gp-tag {
    display:block; max-width:32px; min-height:8px; overflow:hidden; text-overflow:ellipsis;
    font-size:7px; line-height:1; color:var(--dv); font-weight:800; text-transform:uppercase; white-space:nowrap; pointer-events:none;
  }
  .lk-dv-gp-stick {
    position:absolute; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; cursor:pointer; padding:0;
    border:1px solid rgba(255,255,255,.2); background:radial-gradient(circle,#2a3245,#171c27);
    overflow:visible;
  }
  .lk-dv-gp-stick.bound { border-color:var(--dv); box-shadow:0 0 12px -2px var(--dv); }
  .lk-dv-gp-stickdot { position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--dv); }
  .lk-dv-gp-stick .lk-dv-gp-tag {
    position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:2px; max-width:74px;
  }
  .lk-dv-layout-edit .lk-dv-gp-btn,
  .lk-dv-layout-edit .lk-dv-gp-stick {
    border-style:dashed;
    cursor:grab;
  }
  .lk-dv-layout-edit .lk-dv-gp-btn:active,
  .lk-dv-layout-edit .lk-dv-gp-stick:active { cursor:grabbing; }
  .lk-map-inst-add.on { border-color:#4be3a0; color:#4be3a0; background:rgba(75,227,160,.12); }
  .lk-dv-touch { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(100%,360px); }
  .lk-dv-touch-pad {
    width:150px; height:64px; border-radius:12px; border:1px dashed rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center; color:#8b93a7; font-size:10px; font-weight:800; letter-spacing:2px;
  }
  .lk-dv-touch-btns { display:flex; gap:8px; align-items:center; }
  .lk-dv-touch-b { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; text-transform:uppercase; border:1px solid rgba(255,255,255,.18); }
  .lk-dv-touch-b.ga { color:#4be3a0; border-color:rgba(75,227,160,.5); }
  .lk-dv-touch-b.br { color:#ff9db1; border-color:rgba(239,71,111,.5); }
  .lk-dv-touch-b.hb { color:#ffd166; border-color:rgba(255,209,102,.5); width:44px; height:44px; }

  /* extra control-tab buttons — neutral engine style (works in game + editor) */
  .lk-ctrl-map, .lk-is-map {
    margin-top:6px; width:100%; height:34px; border-radius:7px; cursor:pointer; font-weight:700; letter-spacing:.5px;
    border:1px solid rgba(120,150,255,.35); background:rgba(120,150,255,.10); color:#cfe0ff; transition:all .12s;
  }
  .lk-ctrl-map:hover, .lk-is-map:hover { background:rgba(120,150,255,.18); border-color:rgba(120,150,255,.55); }
  .lk-ctrl-dev.off { opacity:.5; }
  .lk-ctrl-tag.off { background:#3a4152; color:#aab; }
  .lk-is-add { margin-top:8px; height:32px; width:100%; border-radius:6px; cursor:pointer; border:1px dashed rgba(255,255,255,.2); background:rgba(255,255,255,.03); color:#9db4ff; font-weight:600; transition:all .12s; }
  .lk-is-add:hover { border-color:rgba(157,180,255,.5); background:rgba(157,180,255,.08); }
  .lk-is-rm, .lk-map-inst-rm { color:#ff9db1; }

  /* in-game controls hint */
  .lk-ctrl-hint { font-size:11px; color:#ffb454; padding:6px 0 2px; line-height:1.35; }

  /* portrait / phone frame: hide the controls legend (touch UI takes over) */
  body.lk-portrait #hud { --touch-reserve-bottom: 134px; }
  body.lk-portrait #legend { display:none !important; }
  body.lk-free-camera-cursor-hidden,
  body.lk-free-camera-cursor-hidden *,
  body.lk-free-camera-cursor-hidden canvas { cursor:none !important; }
  body.lk-game-ui-cursor,
  body.lk-game-ui-cursor canvas { cursor:crosshair; }
  body.lk-game-ui-cursor #settingsOverlay,
  body.lk-game-ui-cursor #settingsPanel { cursor:default; }
  body.lk-game-ui-cursor button,
  body.lk-game-ui-cursor input,
  body.lk-game-ui-cursor select,
  body.lk-game-ui-cursor textarea,
  body.lk-game-ui-cursor [role="button"] { cursor:pointer; }
  body.lk-portrait #lkTouchControls {
    gap:10px;
    --touch-safe-x: max(10px, env(safe-area-inset-left));
    --touch-safe-right: max(10px, env(safe-area-inset-right));
    --touch-safe-bottom: max(14px, env(safe-area-inset-bottom));
    align-items:flex-end;
  }
  body.lk-portrait .lk-touch-steer {
    width:clamp(132px,38vw,190px);
    height:82px;
    border-radius:14px;
  }
  body.lk-portrait .lk-touch-steer-track { height:30px; }
  body.lk-portrait .lk-touch-steer-thumb { width:38px; height:24px; margin:-12px 0 0 -19px; }
  body.lk-portrait .lk-touch-pedals {
    display:grid;
    grid-template-columns:54px 64px;
    grid-template-rows:54px 54px;
    grid-template-areas:
      "hb gas"
      "brake gas";
    gap:8px;
    align-items:stretch;
  }
  body.lk-portrait .lk-touch-btn {
    width:auto;
    height:auto;
    min-width:54px;
    min-height:54px;
    font-size:9px;
  }
  body.lk-portrait .lk-touch-gas { grid-area:gas; border-radius:24px; }
  body.lk-portrait .lk-touch-brake { grid-area:brake; }
  body.lk-portrait .lk-touch-hb { grid-area:hb; width:auto; height:auto; font-size:8px; }
  @media (max-height: 420px){
    body.lk-touch-active #hud { --touch-reserve-bottom: 96px; }
    body.lk-touch-active #vehicleHud {
      padding:9px 10px 8px;
      width:min(220px, calc(100% - var(--hud-safe-x) - var(--hud-safe-right)));
    }
    body.lk-touch-active #vehicleHud .vhTop { grid-template-columns:1fr 56px; gap:6px; }
    body.lk-touch-active #driveTypeHud { font-size:13px; }
    body.lk-touch-active #gearHud2 { font-size:22px; }
    body.lk-touch-active #vehicleHud .vhSpeed b { font-size:40px; }
  }
  @media (max-width: 360px) and (orientation: portrait){
    body.lk-portrait #lkTouchControls { padding-left:6px; padding-right:6px; gap:6px; }
    body.lk-portrait .lk-touch-steer { width:126px; height:74px; }
    body.lk-portrait .lk-touch-pedals {
      grid-template-columns:48px 58px;
      grid-template-rows:48px 48px;
      gap:6px;
    }
    body.lk-portrait .lk-touch-btn { min-width:48px; min-height:48px; letter-spacing:.3px; }
  }

/* ================================================================
   FIRST / THIRD PERSON SHOOTER HUD
   Crosshair, hit marker, ammo, vitals, radar, prompts and toasts for
   a possessed character Pawn. Owned by js/runtime/fps-hud.js; removing
   that script removes every rule below from play.

   The overlay lives INSIDE #hud, which lot-king.js already positions
   onto the rendered camera rectangle. Everything here is therefore
   absolute to that frame, which is what keeps the crosshair on the
   optical centre in split screen and inside the editor viewport.
   ================================================================ */
.lk-fps-hud {
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
  font-family:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color:#e9f2ff;
}
.lk-fps-hud.on { opacity:1; }

/* ---------------------------------------------- crosshair */
.lk-fps-crosshair,
.lk-fps-marker {
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
}
.lk-fps-crosshair { --lk-fps-gap:8px; }
/* Third person aims down the same ray, so it keeps the full reticle and only
   softens it. An unarmed character has nothing to aim, so it loses the ticks. */
.lk-fps-hud.third-person .lk-fps-crosshair .lk-fps-tick { opacity:.7; }
.lk-fps-hud.unarmed .lk-fps-crosshair .lk-fps-tick { opacity:0; }
.lk-fps-hud.unarmed .lk-fps-crosshair .lk-fps-dot { opacity:.4; }
.lk-fps-crosshair .lk-fps-tick {
  position:absolute;
  background:rgba(233, 242, 255, .88);
  box-shadow:0 0 4px rgba(0, 0, 0, .85);
  transition:transform .06s linear, opacity .12s ease;
}
.lk-fps-crosshair .lk-fps-tick-t,
.lk-fps-crosshair .lk-fps-tick-b { width:2px; height:9px; left:-1px; }
.lk-fps-crosshair .lk-fps-tick-l,
.lk-fps-crosshair .lk-fps-tick-r { width:9px; height:2px; top:-1px; }
.lk-fps-crosshair .lk-fps-tick-t { top:calc(-1 * (var(--lk-fps-gap) + 9px)); }
.lk-fps-crosshair .lk-fps-tick-b { top:var(--lk-fps-gap); }
.lk-fps-crosshair .lk-fps-tick-l { left:calc(-1 * (var(--lk-fps-gap) + 9px)); }
.lk-fps-crosshair .lk-fps-tick-r { left:var(--lk-fps-gap); }
.lk-fps-crosshair .lk-fps-dot {
  position:absolute;
  width:2px;
  height:2px;
  left:-1px;
  top:-1px;
  border-radius:50%;
  background:rgba(233, 242, 255, .95);
  box-shadow:0 0 4px rgba(0, 0, 0, .9);
}
.lk-fps-hud.aiming .lk-fps-crosshair .lk-fps-tick { opacity:.35; }
.lk-fps-hud.empty .lk-fps-crosshair .lk-fps-tick,
.lk-fps-hud.empty .lk-fps-crosshair .lk-fps-dot { background:rgba(255, 138, 128, .9); }

/* hit marker: four short diagonals that flash on a confirmed hit */
.lk-fps-marker { opacity:0; transition:opacity .09s ease; }
.lk-fps-marker.on { opacity:1; }
.lk-fps-marker i {
  position:absolute;
  width:10px;
  height:2px;
  background:rgba(255, 255, 255, .95);
  box-shadow:0 0 5px rgba(0, 0, 0, .9);
}
.lk-fps-marker-a { transform:translate(-16px, -16px) rotate(45deg); }
.lk-fps-marker-b { transform:translate(6px, -16px) rotate(-45deg); }
.lk-fps-marker-c { transform:translate(-16px, 14px) rotate(-45deg); }
.lk-fps-marker-d { transform:translate(6px, 14px) rotate(45deg); }
.lk-fps-marker.kill i { background:rgba(255, 120, 108, .98); height:3px; }

/* ---------------------------------------------- ammo / loadout */
.lk-fps-ammo {
  position:absolute;
  right:calc(22px + env(safe-area-inset-right, 0px));
  bottom:calc(22px + env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  padding:8px 14px;
  border-radius:10px;
  background:rgba(10, 12, 17, .58);
  border:1px solid rgba(150, 175, 210, .18);
  backdrop-filter:blur(6px);
}
.lk-fps-ammo strong {
  font-size:12px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:.68;
}
.lk-fps-ammo-counts { display:flex; align-items:baseline; gap:8px; }
.lk-fps-ammo b { font-size:30px; font-weight:700; line-height:1; letter-spacing:1px; }
.lk-fps-ammo span { font-size:15px; opacity:.62; }
.lk-fps-ammo span:not(:empty)::before { content:'/'; margin-right:5px; opacity:.5; }
.lk-fps-ammo em {
  font-style:normal;
  font-size:11px;
  letter-spacing:1.4px;
  color:#ffd27f;
  min-width:64px;
  text-align:right;
}
.lk-fps-hud.empty .lk-fps-ammo b { color:#ff8a80; }
.lk-fps-hud.reloading .lk-fps-ammo em { color:#8ecbff; }
.lk-fps-loadout { display:flex; gap:6px; margin-top:2px; }
.lk-fps-loadout span {
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(150, 175, 210, .12);
  opacity:.55;
}
.lk-fps-loadout span.on { background:rgba(140, 200, 255, .26); opacity:1; }

/* Backpack contents. Present only in 'backpack' inventory mode, so the row is
   empty and hidden in every other project shape. */
.lk-fps-pack { display:none; gap:6px; margin-top:3px; }
.lk-fps-pack.on { display:flex; }
.lk-fps-pack span {
  font-size:10px;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:2px 6px;
  border-radius:4px;
  background:rgba(10, 12, 17, .5);
  border:1px solid rgba(150, 175, 210, .16);
  opacity:.8;
}
.lk-fps-pack span.health { color:#ff8a80; }
.lk-fps-pack span.armor { color:#8ecbff; }
.lk-fps-pack span.ammo { color:#ffd27f; }

/* ---------------------------------------------- vitals */
/* Top left, not bottom left: the bottom of the frame is where the game HUD puts
   its instructions and popups, and two stacks of text fighting for the same
   corner is unreadable. */
.lk-fps-vitals {
  position:absolute;
  left:calc(22px + env(safe-area-inset-left, 0px));
  top:calc(22px + env(safe-area-inset-top, 0px));
  display:flex;
  flex-direction:column;
  gap:5px;
  width:210px;
}
.lk-fps-hud.no-vitals .lk-fps-vitals { display:none; }
.lk-fps-bar {
  position:relative;
  height:12px;
  border-radius:6px;
  background:rgba(10, 12, 17, .6);
  border:1px solid rgba(150, 175, 210, .18);
  overflow:hidden;
}
.lk-fps-bar i {
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  transition:width .16s ease;
}
.lk-fps-bar b {
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-shadow:0 1px 3px rgba(0, 0, 0, .9);
}
.lk-fps-health { height:16px; border-radius:8px; }
.lk-fps-health i { background:linear-gradient(90deg, #45c98a, #7ee0ad); }
.lk-fps-health.critical i { background:linear-gradient(90deg, #d34b46, #ff8a80); }
.lk-fps-armor i { background:linear-gradient(90deg, #4a8fd9, #8ecbff); }
.lk-fps-stamina { height:6px; }
.lk-fps-stamina i { background:linear-gradient(90deg, #c9a648, #ffd27f); }
.lk-fps-ability {
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  opacity:0;
  color:#8ecbff;
  transition:opacity .14s ease;
}
.lk-fps-ability.on { opacity:.85; }

/* ---------------------------------------------- radar */
.lk-fps-radar {
  position:absolute;
  left:calc(22px + env(safe-area-inset-left, 0px));
  top:50%;
  transform:translateY(-50%);
  width:130px;
  height:130px;
  border-radius:50%;
  opacity:.92;
}

/* Editable vehicle / level radar. It is a Canvas 2D overlay, so enabling it
   does not allocate another scene camera or WebGL render target. */
.lk-vehicle-radar {
  position:absolute;
  z-index:42;
  display:none;
  box-sizing:border-box;
  pointer-events:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));
}
.lk-vehicle-radar.on { display:block; }
.lk-vehicle-radar.round { border-radius:50%; }
.lk-vehicle-radar.editor-preview {
  position:fixed;
  z-index:100035;
  outline:1px dashed rgba(109,213,255,.75);
  outline-offset:5px;
}

/* ---------------------------------------------- prompts */
.lk-fps-prompt {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 11px;
  border-radius:8px;
  background:rgba(10, 12, 17, .62);
  border:1px solid rgba(150, 175, 210, .2);
  font-size:13px;
  letter-spacing:.4px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s ease;
}
.lk-fps-prompt.on { opacity:1; }
.lk-fps-prompt kbd {
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  text-align:center;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(140, 200, 255, .22);
  border:1px solid rgba(140, 200, 255, .4);
}
/* Hold-to-take: a ring fills around the key while Use is held. The angle is a
   custom property written by the HUD from the Pawn's own hold timer, so what
   fills here and what fires the pickup are the same number. */
.lk-fps-prompt kbd.lk-fps-hold {
  --lk-hold:0%;
  position:relative;
  overflow:hidden;
}
.lk-fps-prompt kbd.lk-fps-hold::before {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:conic-gradient(rgba(140, 200, 255, .95) var(--lk-hold), transparent 0);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%);
  mask:radial-gradient(circle, transparent 62%, #000 64%);
  opacity:0;
  transition:opacity .08s linear;
}
.lk-fps-prompt kbd.lk-fps-hold.holding { overflow:visible; }
.lk-fps-prompt kbd.lk-fps-hold.holding::before { opacity:1; }

.lk-fps-prompt-take { top:calc(50% + 44px); }
.lk-fps-prompt-use { top:calc(50% + 76px); }

/* ---------------------------------------------- telescopic sight
   Four stacked layers, all pure CSS, so a scope costs no render target:

     .lk-fps-scope        the opaque surround with the lens cut out of it
     -glass               edge darkening and the chromatic ring that reads
                          as glass curvature — the "distortion"
     -edge                the ocular housing, a hard black ring
     -reticle             mil-dot cross drawn from two lines and eight dots

   Every number the rig owns arrives as a custom property, so the weapon
   decides how big the lens is and how hard the glass bends. */
.lk-fps-scope {
  --lk-scope-lens:82%;
  --lk-scope-distortion:.6;
  --lk-scope-vignette:.72;
  --lk-scope-rise:1;
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .08s linear;
}
.lk-fps-scope.on { opacity:1; }
/* The surround. `min(...)` keeps the lens circular on any aspect ratio, and the
   hard colour stop is what makes it a cut-out rather than a gradient. */
.lk-fps-scope::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0) calc(min(50vw, 50vh) * var(--lk-scope-rise) * 0.99),
    rgba(0, 0, 0, .985) calc(min(50vw, 50vh) * var(--lk-scope-rise)));
  background-size:100% 100%;
}
/* The glass: darkening toward the rim plus a faint blue/amber fringe, which is
   how a real ocular reads without a distortion shader. */
.lk-fps-scope-glass,
.lk-fps-scope-edge {
  position:absolute;
  left:50%;
  top:50%;
  width:calc(min(100vw, 100vh) * var(--lk-scope-lens) * var(--lk-scope-rise));
  height:calc(min(100vw, 100vh) * var(--lk-scope-lens) * var(--lk-scope-rise));
  transform:translate(-50%, -50%);
  border-radius:50%;
}
.lk-fps-scope-glass {
  background:radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0) 52%,
    rgba(8, 12, 20, calc(var(--lk-scope-vignette) * .55)) 84%,
    rgba(4, 6, 10, var(--lk-scope-vignette)) 100%);
  box-shadow:
    inset 0 0 calc(24px * var(--lk-scope-distortion)) rgba(120, 170, 255, calc(.30 * var(--lk-scope-distortion))),
    inset 0 0 calc(60px * var(--lk-scope-distortion)) rgba(255, 196, 120, calc(.16 * var(--lk-scope-distortion)));
}
/* The ocular housing, and the thin bright ring of the coated lens edge. */
.lk-fps-scope-edge {
  border:calc(6px + 10px * var(--lk-scope-distortion)) solid rgba(0, 0, 0, .96);
  box-shadow:
    0 0 0 2px rgba(150, 178, 214, .16),
    inset 0 0 0 1px rgba(180, 210, 255, .22);
}

.lk-fps-scope-reticle {
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
}
.lk-fps-scope-line {
  position:absolute;
  background:rgba(12, 16, 22, .88);
}
/* The lines stop short of the centre so the aiming point stays readable. */
.lk-fps-scope-line-v {
  left:-1px;
  top:calc(-1 * min(50vw, 50vh) * .8);
  width:2px;
  height:calc(min(100vw, 100vh) * .8);
  -webkit-mask-image:linear-gradient(to bottom, #000 0 46%, transparent 46% 54%, #000 54% 100%);
  mask-image:linear-gradient(to bottom, #000 0 46%, transparent 46% 54%, #000 54% 100%);
}
.lk-fps-scope-line-h {
  top:-1px;
  left:calc(-1 * min(50vw, 50vh) * .8);
  height:2px;
  width:calc(min(100vw, 100vh) * .8);
  -webkit-mask-image:linear-gradient(to right, #000 0 46%, transparent 46% 54%, #000 54% 100%);
  mask-image:linear-gradient(to right, #000 0 46%, transparent 46% 54%, #000 54% 100%);
}
.lk-fps-scope-dot {
  position:absolute;
  width:3px;
  height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:rgba(12, 16, 22, .9);
}
/* Mil dots: four below the cross for holdover, two each side for windage. */
.lk-fps-scope-dot-0 { top:4%; }
.lk-fps-scope-dot-1 { top:8%; }
.lk-fps-scope-dot-2 { top:12%; }
.lk-fps-scope-dot-3 { top:16%; }
.lk-fps-scope-dot-4 { left:-8%; }
.lk-fps-scope-dot-5 { left:-4%; }
.lk-fps-scope-dot-6 { left:4%; }
.lk-fps-scope-dot-7 { left:8%; }

.lk-fps-scope-zoom {
  position:absolute;
  left:50%;
  bottom:calc(50% - min(50vw, 50vh) * .62);
  transform:translateX(-50%);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  color:rgba(210, 228, 250, .8);
  text-shadow:0 1px 3px rgba(0, 0, 0, .9);
}

/* Nothing else competes with the sight picture. */
.lk-fps-hud.scoped .lk-fps-crosshair,
.lk-fps-hud.scoped .lk-fps-radar,
.lk-fps-hud.scoped .lk-fps-prompt { opacity:0; }
@media (prefers-reduced-motion: reduce){
  .lk-fps-scope { transition:none; }
}

/* ---------------------------------------------- toasts + damage */
.lk-fps-toasts {
  position:absolute;
  left:50%;
  top:calc(14% + env(safe-area-inset-top, 0px));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.lk-fps-toast {
  padding:3px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  white-space:nowrap;
  background:rgba(10, 12, 17, .6);
  border:1px solid rgba(150, 175, 210, .2);
  animation:lk-fps-toast-in .22s ease;
}
.lk-fps-toast.health { color:#ff8a80; }
.lk-fps-toast.armor { color:#8ecbff; }
.lk-fps-toast.ammo { color:#ffd27f; }
.lk-fps-toast.weapon { color:#cfe2f7; }
.lk-fps-toast.drop { opacity:.6; }
@keyframes lk-fps-toast-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.lk-fps-vignette {
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 42%, rgba(150, 12, 12, .95) 100%);
  transition:opacity .12s linear;
}
.lk-fps-hud.dead .lk-fps-vignette { opacity:.7 !important; }

@media (max-width: 720px){
  .lk-fps-ammo { right:14px; bottom:14px; padding:6px 10px; }
  .lk-fps-ammo b { font-size:22px; }
  .lk-fps-ammo em { display:none; }
  .lk-fps-vitals { left:14px; top:14px; width:150px; }
  .lk-fps-radar { width:92px; height:92px; left:14px; top:50%; }
  .lk-fps-loadout { display:none; }
}
@media (prefers-reduced-motion: reduce){
  .lk-fps-hud,
  .lk-fps-marker,
  .lk-fps-bar i,
  .lk-fps-prompt,
  .lk-fps-crosshair .lk-fps-tick { transition:none; }
  .lk-fps-toast { animation:none; }
}

/* ================================================================
   INVENTORY: WEAPON WHEEL AND BACKPACK
   Owned by js/runtime/inventory-ui.js. Mounted inside #hud like the
   rest of the shooter overlay, so the wheel is centred on the view
   rather than on the window — which is the only thing that makes it
   land on the crosshair inside the editor viewport.
   ================================================================ */
.lk-inv {
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease;
  font-family:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color:#e9f2ff;
}
.lk-inv.on { opacity:1; }
/* The backdrop is a vignette rather than a flat wash: the game stays readable
   underneath, which matters because the wheel does not pause it. */
.lk-inv.on::before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(6, 9, 14, .35) 20%, rgba(6, 9, 14, .78) 90%);
}

/* ---------------------------------------------- wheel */
.lk-inv-wheel {
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  display:none;
}
.lk-inv.wheel-view .lk-inv-wheel { display:block; }

.lk-inv-slot {
  --lk-inv-x:0px;
  --lk-inv-y:0px;
  position:absolute;
  left:0;
  top:0;
  width:132px;
  margin:-42px 0 0 -66px;
  transform:translate(var(--lk-inv-x), var(--lk-inv-y));
  padding:8px 10px;
  border-radius:12px;
  background:rgba(12, 16, 23, .74);
  border:1px solid rgba(150, 175, 210, .18);
  backdrop-filter:blur(6px);
  text-align:center;
  transition:border-color .1s ease, background .1s ease, transform .12s ease;
}
.lk-inv-slot kbd {
  position:absolute;
  top:-9px;
  left:-9px;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  min-width:20px;
  padding:1px 5px;
  border-radius:5px;
  background:rgba(12, 16, 23, .95);
  border:1px solid rgba(150, 175, 210, .28);
}
.lk-inv-slot em {
  display:block;
  font-style:normal;
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  opacity:.55;
}
.lk-inv-slot strong {
  display:block;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  margin-top:2px;
}
.lk-inv-slot span {
  display:block;
  font-size:11px;
  opacity:.6;
  margin-top:1px;
}
/* An empty role still shows, so the layout never reflows and slot 5 is in the
   same place whether or not anything is in it. */
.lk-inv-slot.empty { opacity:.4; }
.lk-inv-slot.empty strong { opacity:.5; }
/* What is in hand right now, versus what the pointer is currently over. */
.lk-inv-slot.equipped { border-color:rgba(140, 200, 255, .45); }
.lk-inv-slot.on {
  background:rgba(24, 42, 62, .9);
  border-color:rgba(140, 200, 255, .95);
  transform:translate(var(--lk-inv-x), var(--lk-inv-y)) scale(1.09);
}
.lk-inv-slot.on.empty { opacity:.75; }

.lk-inv-centre {
  position:absolute;
  left:0;
  top:0;
  width:150px;
  margin:-11px 0 0 -75px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  opacity:.7;
}

/* ---------------------------------------------- backpack */
.lk-inv-pack {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(420px, 76%);
  max-height:70%;
  display:none;
  flex-direction:column;
  gap:8px;
  padding:16px 18px;
  border-radius:14px;
  background:rgba(12, 16, 23, .88);
  border:1px solid rgba(150, 175, 210, .2);
  backdrop-filter:blur(8px);
}
.lk-inv.pack-view .lk-inv-pack { display:flex; }
.lk-inv-pack h4 {
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:2.4px;
  text-transform:uppercase;
  opacity:.6;
}
.lk-inv-empty,
.lk-inv-hint {
  margin:0;
  font-size:12px;
  opacity:.5;
  line-height:1.5;
}
.lk-inv-list { display:flex; flex-direction:column; gap:5px; }
.lk-inv-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 9px;
  border-radius:8px;
  background:rgba(150, 175, 210, .08);
}
.lk-inv-row kbd {
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  text-align:center;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(140, 200, 255, .2);
  border:1px solid rgba(140, 200, 255, .35);
}
.lk-inv-row strong { flex:1; font-size:13px; font-weight:600; }
.lk-inv-row span { font-size:12px; opacity:.7; }
.lk-inv-row.health span { color:#ff8a80; }
.lk-inv-row.armor span { color:#8ecbff; }
.lk-inv-row.ammo span { color:#ffd27f; }

@media (max-width: 720px){
  .lk-inv-slot { width:104px; margin:-34px 0 0 -52px; padding:6px 8px; }
  .lk-inv-slot strong { font-size:12px; }
}
@media (prefers-reduced-motion: reduce){
  .lk-inv,
  .lk-inv-slot { transition:none; }
}

/* Interactive material surfaces: the official YouTube player stays a real
   iframe (and therefore keeps its controls, consent and origin boundaries)
   while the selected vehicle display acts as its in-world launcher. */
.lk-dynamic-youtube-player {
  position:fixed;
  inset:0;
  z-index:200000;
  display:grid;
  place-items:center;
  padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:rgba(2, 5, 10, .76);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}
.lk-dynamic-youtube-player[hidden] { display:none !important; }
.lk-dynamic-youtube-panel {
  width:min(1100px, 94vw);
  max-height:94vh;
  overflow:hidden;
  border:1px solid rgba(135, 174, 215, .28);
  border-radius:14px;
  background:#080c13;
  box-shadow:0 28px 90px rgba(0, 0, 0, .62);
}
.lk-dynamic-youtube-bar {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 8px 0 16px;
  color:#eaf3ff;
  background:linear-gradient(90deg, rgba(255,0,51,.16), rgba(81,245,199,.07));
  border-bottom:1px solid rgba(135, 174, 215, .18);
}
.lk-dynamic-youtube-bar strong {
  font-size:11px;
  letter-spacing:1.8px;
}
.lk-dynamic-youtube-close {
  width:34px;
  height:34px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:rgba(255,255,255,.08);
  font:500 25px/1 Arial, sans-serif;
  cursor:pointer;
}
.lk-dynamic-youtube-close:hover,
.lk-dynamic-youtube-close:focus-visible { background:rgba(255, 0, 51, .34); outline:1px solid rgba(255,255,255,.42); }
.lk-dynamic-youtube-panel iframe {
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  max-height:calc(94vh - 44px);
  border:0;
  background:#000;
}
body.lk-dynamic-player-open canvas { cursor:default !important; }

/* ================================================================
   OBJECTIVE / MISSION HUD  (js/runtime/objective-hud.js)

   Same contract as the FPS HUD: it lives INSIDE #hud, which
   lot-king.js positions onto the rendered camera rectangle, so the
   panel stays inside the correct frame in split screen and inside
   the editor viewport. Removing that script removes every rule here.
   ================================================================ */
.lk-objectives {
  position:absolute;
  z-index:8;
  min-width:210px;
  max-width:min(340px, 42%);
  padding:10px 12px 11px;
  border:1px solid rgba(150,190,235,.22);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(10,16,26,.78), rgba(8,12,20,.62));
  backdrop-filter:blur(6px);
  pointer-events:none;
  font-family:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color:#e9f2ff;
  animation:lkObjIn .28s ease both;
}
.lk-objectives.pos-top-right { top:14px; right:14px; }
.lk-objectives.pos-top-left { top:14px; left:14px; }
.lk-objectives.pos-bottom-right { bottom:14px; right:14px; }
.lk-objectives.pos-bottom-left { bottom:14px; left:14px; }
@keyframes lkObjIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.lk-objTitle {
  font-size:13px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9fd0ff;
}
.lk-objMeta {
  margin-top:2px;
  font-size:11px;
  letter-spacing:.08em;
  color:rgba(200,220,245,.66);
  font-variant-numeric:tabular-nums;
}
.lk-objMeta.is-urgent { color:#ff8f7a; }

.lk-objList { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.lk-objRow {
  display:grid;
  grid-template-columns:14px 1fr auto;
  grid-template-areas:'mark label count' 'bar bar bar';
  align-items:center;
  gap:2px 7px;
  font-size:12.5px;
  line-height:1.25;
  transition:opacity .22s ease, color .22s ease;
}
.lk-objMark {
  grid-area:mark;
  width:10px; height:10px;
  border:1.5px solid rgba(160,200,240,.5);
  border-radius:3px;
  transition:background .22s ease, border-color .22s ease;
}
.lk-objLabel { grid-area:label; }
.lk-objCount { grid-area:count; font-variant-numeric:tabular-nums; color:rgba(200,220,245,.7); font-weight:600; }
.lk-objBar {
  grid-area:bar;
  height:2px;
  margin:3px 0 1px;
  border-radius:2px;
  background:rgba(150,190,235,.14);
  overflow:hidden;
}
.lk-objBar > i { display:block; height:100%; width:0; background:#5cc4ff; transition:width .25s ease; }

.lk-objRow.is-optional { opacity:.72; }
.lk-objRow.is-optional .lk-objLabel::after { content:' (optional)'; font-size:10.5px; opacity:.6; }
.lk-objRow.is-complete { color:rgba(180,240,205,.82); }
.lk-objRow.is-complete .lk-objMark { background:#54e0a0; border-color:#54e0a0; }
.lk-objRow.is-complete .lk-objLabel { text-decoration:line-through; text-decoration-color:rgba(84,224,160,.5); }
.lk-objRow.is-complete .lk-objBar > i { background:#54e0a0; }
.lk-objRow.is-failed { color:rgba(255,160,140,.8); }
.lk-objRow.is-failed .lk-objMark { background:#ff6f57; border-color:#ff6f57; }
.lk-objRow.is-failed .lk-objBar > i { background:#ff6f57; }
.lk-objRow.is-locked { opacity:.45; }

.lk-objBanner {
  position:absolute;
  top:24%;
  left:50%;
  transform:translate(-50%, -6px);
  z-index:9;
  padding:8px 22px;
  border-radius:6px;
  font-family:'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  font-size:26px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.lk-objBanner.show { opacity:1; transform:translate(-50%, 0); }
.lk-objBanner.is-complete { color:#8affc4; text-shadow:0 0 22px rgba(84,224,160,.45); }
.lk-objBanner.is-fail { color:#ff8f7a; text-shadow:0 0 22px rgba(255,111,87,.42); }
.lk-objBanner.is-objective { font-size:17px; letter-spacing:.18em; color:#9fd0ff; text-shadow:0 0 16px rgba(92,196,255,.4); }

@media (prefers-reduced-motion: reduce) {
  .lk-objectives { animation:none; }
  .lk-objBar > i, .lk-objBanner, .lk-objRow { transition:none; }
}
/* Shared vehicle damage HUD. Kept outside the FPS HUD so native, Logic and
   imported DollBody vehicles expose the same energy contract. */
.lk-vehicle-energy{position:fixed;left:18px;bottom:118px;z-index:1180;display:none;grid-template-columns:minmax(150px,260px) auto;gap:5px 10px;align-items:center;padding:9px 11px;border:1px solid rgba(148,163,184,.34);border-radius:7px;background:rgba(5,10,18,.82);box-shadow:0 8px 30px rgba(0,0,0,.32);color:#dbeafe;font:700 10px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;pointer-events:none;backdrop-filter:blur(5px)}
.lk-vehicle-energy.on{display:grid}
.lk-vehicle-energy>strong{grid-column:1/3;color:#93c5fd}
.lk-vehicle-energy>div{height:7px;overflow:hidden;border-radius:999px;background:rgba(71,85,105,.68)}
.lk-vehicle-energy>div>i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#a3e635);transition:width .16s linear,background .16s}
.lk-vehicle-energy.critical>div>i{background:linear-gradient(90deg,#dc2626,#fb923c)}
.lk-vehicle-energy.destroyed{border-color:rgba(239,68,68,.62);color:#fecaca}
.lk-vehicle-energy.destroyed>strong{color:#f87171}
.lk-vehicle-energy>b{white-space:nowrap;font-size:10px;color:inherit}