:root {
    --ro-page-height: 100vh;
    --ro-page-top: 0px;
    --ro-game-height: 100vh;
    --ro-safe-top: env(safe-area-inset-top, 0px);
    --ro-safe-right: env(safe-area-inset-right, 0px);
    --ro-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ro-safe-left: env(safe-area-inset-left, 0px);
    color-scheme: light;
}
@supports (height: 100dvh) {
    :root { --ro-page-height: 100dvh; --ro-game-height: 100dvh; }
}
html, body {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    background: #172536; font-family: system-ui, sans-serif;
}
body::before {
    content: ''; position: fixed; inset: -32px; pointer-events: none;
    background: linear-gradient(#102338aa, #102338dc), url('../resource/ui/preload/ld_img_1.jpg') center / cover;
    filter: blur(24px);
}
#ro-game-shell {
    position: fixed; inset: 0 0 auto; height: var(--ro-game-height);
    box-sizing: border-box;
    padding: var(--ro-safe-top) var(--ro-safe-right) var(--ro-safe-bottom) var(--ro-safe-left);
    overflow: hidden;
}
.egret-player { position: relative; width: 100%; height: 100%; margin: auto; }
.egret-player canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
#ro-entry {
    position: fixed; inset: var(--ro-page-top) 0 auto; height: var(--ro-page-height);
    z-index: 10000; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    box-sizing: border-box; display: grid; justify-items: center;
    padding: var(--ro-safe-top) var(--ro-safe-right) var(--ro-safe-bottom) var(--ro-safe-left);
    touch-action: pan-y;
}
#ro-entry .scene {
    position: relative; box-sizing: border-box; width: min(100%, 560px); min-height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 24px 16px clamp(24px, 10vh, 72px);
    background: linear-gradient(to bottom, transparent 38%, #172536 52%), url('../resource/ui/preload/ld_img_1.jpg') center top / cover no-repeat;
}
#ro-entry form {
    box-sizing: border-box; width: 100%; max-width: 440px; margin: 0 auto;
    padding: 20px; border: 2px solid #dab66a; border-radius: 16px; background: #fffaf0;
    box-shadow: 0 5px 25px #152e4c88; color: #394c5b;
}
#ro-entry h2 { font-size: 20px; text-align: center; margin: 0 0 14px; }
#ro-entry label {
    display: flex; align-items: center; gap: 12px; margin: 10px 0;
    font-size: 15px; white-space: nowrap;
}
#ro-entry input {
    box-sizing: border-box; min-width: 0; width: 100%; min-height: 48px; padding: 10px 12px;
    font: 16px system-ui; border: 1px solid #a8afa9; border-radius: 8px; background: white;
    touch-action: manipulation;
}
#ro-entry input:focus-visible { outline: 3px solid #557fbe; outline-offset: 2px; }
#ro-entry .actions { display: flex; gap: 12px; margin-top: 14px; }
#ro-entry button {
    flex: 1; min-width: 0; min-height: 48px; padding: 10px 8px;
    border: 1px solid #c99c45; border-radius: 9px;
    background: linear-gradient(#fff3b9, #efc36d); color: #634317;
    font: bold 15px system-ui; cursor: pointer; touch-action: manipulation;
}
#ro-entry button:disabled { opacity: .55; cursor: wait; }
#ro-entry small { display: block; font-size: 12px; line-height: 1.6; text-align: center; white-space: normal; }
#ro-entry [role=status] { min-height: 19px; margin: 8px 0 0; font-size: 13px; line-height: 1.5; text-align: center; color: #9a3424; overflow-wrap: anywhere; }
#ro-logout {
    position: fixed; right: calc(8px + var(--ro-safe-right)); top: calc(8px + var(--ro-safe-top));
    z-index: 9999; min-width: 48px; min-height: 48px; padding: 8px;
    border: 1px solid #ffffff66; border-radius: 8px; background: #172638dd; color: white;
    font: 13px system-ui; cursor: grab; touch-action: none;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#ro-logout.ro-dragging { cursor: grabbing; opacity: .8; }
#ro-logout:focus-visible { outline: 3px solid #ffe6a4; outline-offset: 2px; }
@media (max-width: 350px) {
    #ro-entry .scene { padding-left: 10px; padding-right: 10px; }
    #ro-entry form { padding: 16px 12px; }
    #ro-entry label { gap: 8px; }
    #ro-entry .actions { gap: 8px; }
}
@media (max-height: 560px), (orientation: landscape) {
    #ro-entry .scene { width: min(100%, 640px); justify-content: center; padding: 16px; }
    #ro-entry form { padding: 16px 20px; }
}
.ro-keyboard #ro-entry .scene { justify-content: flex-start; padding-top: 12px; padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }