:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #071c35; }
* { box-sizing: border-box; }
html, body { min-width: 280px; min-height: 100%; margin: 0; }
body::before { content: ""; position: fixed; inset: -35px; z-index: -1; background: #071c35 url("landing.webp") center / cover no-repeat; filter: blur(24px) brightness(.42); }
.landing { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* At 16:9 the approved image fills the viewport exactly. Other ratios retain
   the whole composition instead of cropping the characters or welcome panel. */
.scene { position: relative; flex: 0 0 auto; width: min(100vw, 177.777778vh); aspect-ratio: 16 / 9; }
@supports (height: 100svh) { .scene { width: min(100vw, 177.777778svh); } }
.scene-image { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Transparent, keyboard-accessible hit areas over the two original buttons. */
.hotspot { position: absolute; top: 86%; height: 7.7%; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hotspot-register { left: 31.1%; width: 18.9%; }
.hotspot-login { left: 50.6%; width: 18.4%; }
.hotspot:hover { box-shadow: 0 0 0 3px rgb(255 230 151 / .78), 0 0 24px rgb(255 207 79 / .35); }
.hotspot:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mobile-actions { display: none; }
.mobile-button, .close-dialog { min-height: 48px; border: 1px solid #e3b04b; border-radius: 14px; padding: 13px 20px; font: 700 1rem / 1.2 system-ui, sans-serif; cursor: pointer; }
.mobile-button.register { color: #10213b; background: linear-gradient(#fff0b4, #edb739); }
.mobile-button.login, .close-dialog { color: #fff3cd; background: linear-gradient(#17599d, #08284d); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
dialog { max-width: min(440px, calc(100vw - 32px)); border: 1px solid #e3b04b; border-radius: 20px; background: #0b2340; color: #fff5dc; padding: 28px; box-shadow: 0 20px 70px #0009; }
dialog::backdrop { background: #031326b8; backdrop-filter: blur(5px); }
dialog h2 { margin: 0 0 12px; font-size: 1.3rem; }
dialog p { margin: 0 0 24px; line-height: 1.6; }
dialog form { display: flex; justify-content: flex-end; }
.noscript-note { position: fixed; bottom: 0; margin: 0; width: 100%; padding: 12px; text-align: center; background: #071c35; color: #fff5dc; }
/* The unaltered wide image is retained on phones; larger real buttons are
   added below it so the tiny painted buttons are not the only touch targets. */
@media (max-width: 700px) and (orientation: portrait) {
  .landing { gap: 24px; padding: max(18px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom)); }
  .scene { width: 100vw; }
  .hotspot { display: none; }
  .mobile-actions { width: min(410px, calc(100vw - 36px)); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}