/* Critical loading-screen CSS is inlined so something polished is on screen before any JS arrives. */
    html,body{margin:0;height:100%;background:#0b1020;overflow:hidden}
    #loading{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;
      background:radial-gradient(ellipse at 50% 35%,#1b2a55 0%,#0b1020 70%);color:#fff;font-family:'Arial Black','Segoe UI',Arial,sans-serif;transition:opacity .35s}
    #loading.hide{opacity:0;pointer-events:none}
    #loading .logo{font-size:min(9vw,14vh);letter-spacing:.04em;line-height:1;color:#ffd23d;text-shadow:.06em .06em 0 #ff7a1f,.12em .12em 0 #1a2347}
    #loading .sub{font:700 min(1.7vw,3vh) 'Segoe UI',Arial,sans-serif;letter-spacing:.35em;color:#9fb4e8}
    #loading .bar{width:min(46vw,520px);height:min(2.4vh,18px);background:#0a0e1c;border:3px solid #2b3a6b;box-shadow:0 4px 0 #05070f;margin-top:3vh}
    #loading .fill{height:100%;width:4%;background:repeating-linear-gradient(90deg,#ffd23d 0 14px,#ffbe1f 14px 28px);transition:width .2s}
    #loading .tip{font:600 min(1.5vw,2.6vh) 'Segoe UI',Arial,sans-serif;color:#c9d6f7;min-height:1.4em;text-align:center;padding:0 5vw}
    #loading .cubes{display:flex;gap:1vh}
    #loading .cubes i{width:2.2vh;height:2.2vh;background:#3d8bff;box-shadow:inset -.5vh -.5vh 0 rgba(0,0,0,.3);animation:hop .9s infinite}
    #loading .cubes i:nth-child(2){animation-delay:.15s;background:#ffd23d}
    #loading .cubes i:nth-child(3){animation-delay:.3s;background:#ff8a2b}
    @keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-1.6vh)}}
    #load-play{display:none;margin-top:1vh;font:900 min(3vw,5vh) 'Arial Black',Arial,sans-serif;padding:.5em 2.2em;color:#1a1300;background:#ffd23d;border:0;cursor:pointer;
      box-shadow:0 .28em 0 #b8860b,0 .28em 0 .12em #05070f;letter-spacing:.06em}
    #load-play:hover{filter:brightness(1.08);transform:translateY(-2px)}
    #load-play:active{transform:translateY(.15em);box-shadow:0 .1em 0 #b8860b}