html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b1b2b; }
canvas { cursor: default; outline: none; display: block; }
#embed-html { width: 100%; height: 100%; }
div.gdx-progress { color: #cfe6ff; font-family: sans-serif; }
#rotate { display: none; position: fixed; inset: 0; z-index: 10; background: #0b1b2b; color: #cfe6ff;
    font-family: sans-serif; font-size: 20px; text-align: center; flex-direction: column; align-items: center; justify-content: center; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }
#loading { position: fixed; inset: 0; z-index: 5; background: #0b1b2b; color: #cfe6ff; font-family: sans-serif;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.loading-title { background: #e0665a; color: #fff3d6; border: 3px solid #fff3d6; outline: 4px solid #e0665a;
    padding: 10px 36px; font-size: clamp(22px, 5vw, 44px); letter-spacing: 0.06em; }
.loading-bar { width: min(320px, 70vw); height: 12px; border-radius: 6px; background: #1d3249; overflow: hidden; }
#loading-fill { width: 0; height: 100%; background: #e0665a; transition: width 0.2s; }
#loading-text { font-size: 15px; opacity: 0.8; text-align: center; padding: 0 16px; }
.no-webgl { color: #cfe6ff; font-family: sans-serif; padding: 40px 16px; }