:root { color-scheme: dark; --ink:#efe8d6; --muted:#b9aa9e; --gold:#d5ac73; --night:#17141a; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--night); }
body { font-family:Georgia,"Times New Roman",serif; -webkit-text-size-adjust:100%; }
button { font:inherit; cursor:pointer; }
button:focus-visible,canvas:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
#unity-container { position:fixed; inset:0; overflow:hidden; background:#100e12; }
#game-stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
#unity-canvas { display:block; width:100%; height:100%; border:0; background:#17141a; touch-action:none; }
#loading-screen,#error-panel { position:absolute; inset:0; z-index:20; display:grid; place-items:center; padding:24px; color:var(--ink); background:var(--night); }
#loading-screen::before,#error-panel::before { content:""; position:absolute; inset:clamp(12px,3vw,32px); border:1px solid #d5ac732d; pointer-events:none; }
.loading-card { position:relative; width:min(420px,100%); text-align:center; }
.eyebrow { margin:0 0 30px; font:10px/1.6 system-ui,sans-serif; letter-spacing:.27em; color:var(--gold); }
.ornament { display:flex; align-items:center; justify-content:center; gap:18px; color:var(--gold); font-size:17px; }
.ornament span { width:48px; height:1px; background:#d5ac735c; }
h1 { margin:18px 0 14px; font-size:clamp(42px,7vw,66px); font-weight:400; line-height:1.05; letter-spacing:-.045em; }
h1 em { font-weight:400; color:var(--gold); }
.loading-subtitle { margin:0 0 44px; color:var(--muted); font-size:16px; }
.progress-caption { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; color:var(--ink); font:12px/1.5 system-ui,sans-serif; }
#loading-percent { font-variant-numeric:tabular-nums; color:var(--gold); }
progress { appearance:none; display:block; width:100%; height:3px; border:0; overflow:hidden; background:#ffffff14; color:var(--gold); }
progress::-webkit-progress-bar { background:#ffffff14; }
progress::-webkit-progress-value { background:var(--gold); transition:width .15s ease; }
progress::-moz-progress-bar { background:var(--gold); }
#loading-tip { max-width:310px; margin:20px auto 0; font:12px/1.8 system-ui,sans-serif; color:var(--muted); }
.loading-footer { position:absolute; bottom:max(28px,env(safe-area-inset-bottom)); margin:0; font:9px/1.5 system-ui,sans-serif; letter-spacing:.22em; color:#b9aa9e80; }
#error-panel { z-index:30; }
h2 { font-weight:400; font-size:clamp(30px,5vw,44px); margin:0 0 20px; }
#error-message { color:var(--muted); font:14px/1.7 system-ui,sans-serif; }
#retry-button { margin-top:20px; min-height:48px; padding:12px 28px; border:1px solid var(--gold); color:#17141a; background:var(--gold); border-radius:4px; }
#retry-button span { margin-left:18px; }
#retry-button:hover { background:#e6c28f; }
#orientation-note { display:none; position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:24px; right:24px; color:var(--muted); font:12px/1.7 system-ui,sans-serif; align-items:center; gap:14px; }
#orientation-note>span { font-size:28px; color:var(--gold); }
#orientation-note p { margin:0; flex:1; }
#orientation-note strong { color:var(--ink); font-weight:400; }
#dismiss-orientation { border:0; background:transparent; color:var(--muted); width:44px; height:44px; font:26px system-ui,sans-serif; }
#connection-note { position:absolute; z-index:15; bottom:max(12px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; width:max-content; max-width:calc(100% - 32px); background:#29202a; border:1px solid #d5ac735c; color:var(--ink); padding:10px 16px; border-radius:4px; font:12px/1.5 system-ui,sans-serif; }
.no-script { position:absolute; z-index:40; inset:0; display:grid; place-items:center; padding:32px; background:var(--night); color:var(--ink); }
@media (max-width:700px) and (orientation:portrait) { body[data-ready="true"] #orientation-note:not([hidden]) { display:flex; } }
@media (max-height:440px) { .eyebrow { margin-bottom:12px; } .ornament,.loading-footer { display:none; } h1 { font-size:42px; margin:8px 0; } .loading-subtitle { margin-bottom:22px; } #loading-tip { margin-top:12px; } }
@media (prefers-reduced-motion:reduce) { progress::-webkit-progress-value { transition:none; } }