html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#1a120c; }
  #app { position:fixed; inset:0; }
  canvas { display:block; }
  .hud { position:fixed; z-index:10; color:#fff; font-family:"Courier New", ui-monospace, monospace;
         text-shadow:0 1px 3px rgba(0,0,0,.65); user-select:none; -webkit-user-select:none; }
  #title { top:15px; left:20px; max-width:calc(100vw - 40px); }
  #title .dev { font-family:"Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
                font-size:15px; letter-spacing:0; line-height:1.25; opacity:.89; }
  #title h1 { margin:2px 0 0; font-family:Georgia, "Times New Roman", serif; font-weight:normal;
              font-size:clamp(17px, 2.6vw, 27px); letter-spacing:clamp(1px, .20vw, 3px); white-space:nowrap; }
  #title p { margin:5px 0 0 1px; font-size:10px; letter-spacing:2.3px; text-transform:uppercase; opacity:.82; }
  @media (max-width:480px) { #title { top:10px; left:12px; } #title .dev { font-size:12px; }
    #title h1 { font-size:17px; letter-spacing:1px; } #title p { font-size:9px; letter-spacing:1.6px; } }
  #speedo { right:26px; bottom:22px; text-align:right; }
  #speedo .num { font-family:Georgia, serif; font-size:64px; line-height:.95; }
  #speedo .unit { font-size:11px; letter-spacing:3px; text-transform:uppercase; opacity:.85; }
  #speedo .gear { font-size:15px; letter-spacing:2px; margin-top:2px; opacity:.95; }
  #hint { left:20px; bottom:20px; font-size:11px; letter-spacing:1.6px; text-transform:uppercase; line-height:1.9; opacity:.9; }
  #vig { position:fixed; inset:0; z-index:5; pointer-events:none;
         background:radial-gradient(ellipse at center, transparent 58%, rgba(10,5,2,.42) 100%); }
  #load { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; gap:12px;
          align-items:center; justify-content:center; padding:16px; box-sizing:border-box; text-align:center;
          background:#1a120c; color:#e8d9c4; font-family:Georgia, serif; transition:opacity .5s;
          opacity:1; pointer-events:auto; }
  #load.tj-ready { opacity:0; pointer-events:none; }
  #load .loadProgress { width:min(440px,88vw); margin-top:26px; }
  #load .loadTrack { overflow:hidden; height:7px; width:100%; box-sizing:border-box;
    background:#30241a; border:1px solid #7d6340; border-radius:99px; }
  #load #loadFill { height:100%; width:100%; background:linear-gradient(90deg,#98733c,#f1ca78);
    transform:scaleX(0); transform-origin:left; transition:transform .15s linear; }
  #load .loadTrack:not([aria-valuenow]) #loadFill { width:34%; transform:none;
    animation:tj-load-search 1.6s ease-in-out infinite alternate; }
  @keyframes tj-load-search { from { transform:translateX(0); } to { transform:translateX(190%); } }
  #load .loadNumbers { display:flex; justify-content:space-between; gap:12px; margin-top:8px;
    font:10px/1.4 'Courier New',monospace; letter-spacing:1px; text-transform:uppercase; color:#cbb38c; }
  #load .loadFoot { color:#a78c69; font:10px/1.4 'Courier New',monospace; letter-spacing:1.4px;
    margin-top:24px; max-width:88vw; }
  #load .loadDev { font-family:"Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif;
                   font-size:clamp(24px, 5vw, 40px); letter-spacing:0; opacity:.94; }
  #load .loadName { font-size:clamp(20px, 5vw, 38px); letter-spacing:clamp(2px, .4vw, 6px); }
  #load .loadTag { font-size:11px; letter-spacing:3px; text-transform:uppercase; opacity:.72; }
  #load #loadStatus { margin-top:10px; font-family:"Courier New", monospace; font-size:11px;
                      letter-spacing:1.4px; text-transform:uppercase; overflow-wrap:anywhere; max-width:min(90vw,720px); opacity:.75; }
  #prompt { left:50%; bottom:19%; transform:translateX(-50%); font-size:13px; letter-spacing:2.5px;
            text-transform:uppercase; display:none; white-space:nowrap; }
  #fade { position:fixed; inset:0; z-index:30; background:#000; opacity:0; pointer-events:none; transition:opacity .32s; }
  #tjPortableDock { position:fixed;right:12px;top:51px;z-index:14;background:#201812e8;color:#f3c779;
    border:1px solid #a58346;border-radius:7px;padding:8px 11px;font:12px Georgia,serif;cursor:pointer; }
  #tjPortableDock:disabled { opacity:.42;cursor:default; }
  @media(max-width:480px) { #tjPortableDock { top:51px;padding:8px 7px;font-size:10px;max-width:148px; } }