:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #0e1a2b; color: #f7f4e9; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; }
body { display: grid; place-items: center; }
#phone {
    position: relative; display: flex; flex-direction: column;
    width: min(100vw, calc(100dvh * 9 / 19.5)); height: min(100dvh, calc(100vw * 19.5 / 9));
    background: #0e1a2b; box-shadow: 0 0 0 1px #c9a24b55, 0 12px 60px #0008;
}
body.mobile #phone {
    width: 100%; height: 100dvh;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
        env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#game-viewport { position: relative; flex: 1; min-height: 0; }
#unity-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    flex-direction: column; background: #0e1a2b; text-align: center; padding: 24px; }
h1 { margin: 0; color: #c9a24b; letter-spacing: .1em; font-size: clamp(26px, 6vw, 42px); }
h1 span { display: block; font-size: .6em; letter-spacing: .22em; }
#loading p { font-size: 14px; }
progress { margin-top: 24px; width: 78%; height: 6px; border: 0; border-radius: 4px; background: #24344b; }
progress::-webkit-progress-bar { background: #24344b; border-radius: 4px; }
progress::-webkit-progress-value { background: #c9a24b; border-radius: 4px; }
progress::-moz-progress-bar { background: #c9a24b; border-radius: 4px; }
footer { position: absolute; bottom: max(6px, env(safe-area-inset-bottom, 0px)); right: 10px;
    left: 10px; pointer-events: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
#home-tip { position: fixed; z-index: 30; left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); max-width: calc(100vw - 32px); text-align: center; white-space: normal;
    font-size: 13px; padding: 9px 14px; color: #f7f4e9; background: #0e1a2bd9; border-radius: 12px; pointer-events: none; }
#memory-stats { position: fixed; z-index: 20; top: 4px; left: 4px; margin: 0; padding: 6px; max-width: calc(100vw - 8px);
    overflow: hidden; font: 10px/1.4 monospace; background: #0e1a2bdd; color: #a9e3bd; pointer-events: none; }
#memory-stats.over-budget { color: #f09a90; }
button { pointer-events: auto; min-height: 32px; padding: 5px 12px; border: 1px solid #c9a24b88;
    color: #c9a24b; background: #0e1a2bd9; border-radius: 6px; }
#rotate { display: none; position: fixed; inset: 0; z-index: 10; align-items: center; justify-content: center;
    background: #0e1a2b; color: #c9a24b; font-size: 24px; text-align: center; padding: 20px; }
[hidden] { display: none !important; }
@media (orientation: landscape) { body.mobile #rotate { display: flex; } }