:root { color-scheme: dark; --ropoe-layout-width:100vw; --ropoe-layout-height:100vh; }
@supports(height:100dvh){:root{--ropoe-layout-width:100dvw;--ropoe-layout-height:100dvh;}}
html,body { position:fixed; inset:0; margin:0; padding:0; border:0; overflow:hidden; overscroll-behavior:none; background:#102238; color:#f4f4eb; font-family:system-ui,sans-serif; }
#game { position:fixed; left:0; top:0; width:var(--ropoe-layout-width); height:var(--ropoe-layout-height); padding:0; border:0; }
#canvas { display:block; width:100%; height:100%; padding:0; border:0; outline:none; touch-action:none; }
input,textarea { font-size:16px!important; } /* Preserve native IME while preventing iOS focus zoom. */
#safe-probe { position:fixed; visibility:hidden; pointer-events:none; 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); }
[hidden] { display:none!important; }
.cover { position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(#e9f3fc22,#132f4d33),url('ui/login_background.png') center/cover; z-index:10; padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); box-sizing:border-box; }
.card { width:min(440px,100%); padding:20px 24px; box-sizing:border-box; text-align:center; color:#234565; border:2px solid #c5ac72; border-radius:24px; background:linear-gradient(#fffffff5,#e9f4fcf5); box-shadow:0 8px 32px #10223866,inset 0 0 0 5px #ffffffaa; }
.emblem { width:72px; height:72px; object-fit:contain; border-radius:18px; }
h1 { margin:8px 0; font-size:26px; color:#426e94; letter-spacing:.08em; }
p { line-height:1.5; }
button { min-height:48px; padding:10px 20px; border-radius:24px; border:1px solid #e1c787; color:#152b42; background:#e5f0f4; font:inherit; cursor:pointer; touch-action:manipulation; }
progress { width:100%; height:14px; margin:16px 0; accent-color:#d6bd80; }
.hint { opacity:.8; font-size:13px; }
#rotate-gate { z-index:30; }
.phone { display:inline-block; width:72px; height:40px; margin:20px; border:3px solid #d6bd80; border-radius:8px; } /* Illustration only; canvas is never rotated. */
.banner { position:fixed; z-index:40; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); right:max(8px,env(safe-area-inset-right)); padding:8px 14px; border:1px solid #c4ae78; border-radius:16px; background:#102238ee; display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; }
#offline-banner { top:auto; bottom:max(8px,env(safe-area-inset-bottom)); pointer-events:none; }