:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; background: #06121b; color: #ebfaf7; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#GameDiv { width: min(100vw, 56.25vh); height: min(100vh, 177.7778vw); width: min(100%, 56.25dvh); height: min(100%, 177.7778vw); position: relative; overflow: hidden; box-shadow: 0 0 100px #16313c80; }
#Cocos3dGameContainer, #GameCanvas { width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#Cocos3dGameContainer { margin: auto; }
#loading { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #081b28; }
.loading-card { width: min(320px, 82vw); text-align: center; }
.cell-icon { margin: auto; width: 76px; height: 76px; border: 2px solid #4fddcc; border-radius: 46% 54% 52% 48%; background: #4fddcc25; box-shadow: 0 0 25px #4fddcc30; }
.cell-icon:after { content: ""; display: block; width: 26px; height: 26px; background: #4fddcc; border-radius: 50%; margin: 26px auto; }
h1 { font-weight: 600; font-size: 28px; letter-spacing: .12em; margin: 24px 0 12px; }
p { color: #a1bec2; line-height: 1.7; font-size: 15px; }
.loading-track { height: 3px; width: 160px; background: #173b48; margin: 24px auto; overflow: hidden; border-radius: 3px; }
.loading-track span { display: block; width: 45%; height: 100%; background: #4fddcc; animation: travel 1.4s ease-in-out infinite alternate; }
@keyframes travel { to { transform: translateX(130%); } }
button { border: 1px solid #4fddcc; border-radius: 12px; padding: 12px 30px; background: #12313f; color: #ebfaf7; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#rotate-hint { display: none; position: fixed; inset: 0; background: #081b28f8; z-index: 30; place-items: center; font-size: 20px; text-align: center; padding: 24px; }
#network-status { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: 90vw; font-size: 12px; padding: 8px 12px; background: #172f3af0; border-radius: 12px; z-index: 40; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) { #rotate-hint { display: grid; } }
@media (prefers-reduced-motion: reduce) { .loading-track span { animation: none; width: 100%; } }