@font-face { font-family: Oxanium; src: url(oxanium-latin-400-normal.woff2); font-weight: 400; font-display: swap; }
@font-face { font-family: Oxanium; src: url(oxanium-latin-700-normal.woff2); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #071713; color: #fff8e7; font-family: Oxanium, sans-serif; }
#unity-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#loading { position: fixed; inset: 0; padding: max(24px, env(safe-area-inset-top)) 24px; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #497e627a, transparent 34%), linear-gradient(145deg,#102f27,#071a16 76%); text-align: center; }
#loading[hidden], [hidden] { display: none; }
.loading-card { width: min(370px,100%); padding: 34px 30px 30px; border: 1px solid #f4efd529; border-radius: 22px; background: linear-gradient(145deg,#ffffff12,#ffffff03); box-shadow: 0 18px 55px #010e0b5c; }
.brand-mark { margin-bottom: 15px; }
h1 { font-size: 36px; line-height: .98; font-weight: 700; margin: 0 0 25px; }
h1 span { display: block; color: #ddf69a; }
p { font-size: 11px; line-height: 1.7; }
progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 8px; overflow: hidden; background: #ffffff1a; accent-color: #ddf69a; margin: 15px 0; }
progress::-webkit-progress-bar { background: #ffffff1a; }
progress::-webkit-progress-value { background: linear-gradient(90deg,#75c696,#ddf69a); }
small { display: block; margin-top: 16px; color: #b4c8af; font-size: 10px; line-height: 1.6; }
button { width: 100%; min-height: 48px; padding: 12px 20px; margin-top: 12px; background: #ddf69a; color: #153a30; border: 0; border-radius: 10px; font: 700 13px Oxanium, sans-serif; cursor: pointer; }
button:focus-visible { outline: 2px solid #ebffad; outline-offset: 4px; }