html, body { margin: 0; width: 100%; height: 100%; background: #040b16; }
#splash { position: fixed; inset: 0; display: block; z-index: 100; background: #040b16; }
.opening-stage { position: absolute; height: 100%; width: min(100vw, 56.25vh); left: 50%; top: 0; transform: translateX(-50%); background: #071020 url("opening-scene-v9.04236.jpg") center top / 100% auto no-repeat; }
#splash .opening-status { position: absolute; width: 90%; left: 5%; top: 70.1%; margin: 0; color: #dbe7ea; font: 400 clamp(12px, 1.8vh, 20px)/1.5 "Microsoft YaHei", sans-serif; text-align: center; text-shadow: 0 2px 4px #000; }
#splash .progress-bar { position: absolute; left: 17.36%; top: 75.39%; width: 65.28%; height: 5px; margin: 0; padding: 0; background: #040e1c; border: 1px solid #91814f; border-radius: 5px; box-sizing: border-box; overflow: hidden; box-shadow: none; }
#splash .progress-bar span { display: block; height: 100%; margin: 0; background: #65ddea; border-radius: 4px; transition: width .12s linear; background-image: none; box-shadow: none; animation: none; }
#splash .opening-hint { position: absolute; top: 83.3%; left: 5%; width: 90%; margin: 0; color: #9ab2bf; font: 400 clamp(11px, 1.56vh, 18px)/1.5 "Microsoft YaHei", sans-serif; text-align: center; }
@media (prefers-reduced-motion: reduce) { #splash .progress-bar span { transition: none; } }
/* Keep the original illustration; improve only live loading copy and spacing. */
#splash .opening-status { top: 70%; color: #e4eceb; font-size: clamp(15px, 1.9vh, 20px); line-height: 1.6; letter-spacing: .06em; text-shadow: 0 1px 2px #06101b; }
#splash .opening-hint { top: 79%; color: #bcd0d6; font-size: clamp(13px, 1.65vh, 17px); line-height: 1.6; letter-spacing: .04em; text-shadow: 0 1px 2px #06101b; }