:root { color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: #0b0f1e; color: #e8ecff;
  font: 15px/1.5 system-ui, sans-serif; display: flex; justify-content: center; align-items: center;
}
main { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px; width: 100%; }
#screen-wrap { position: relative; width: min(100vw - 24px, (100vh - 120px) * 320 / 224, 1280px); aspect-ratio: 320 / 224; }
#screen { width: 100%; height: 100%; image-rendering: pixelated; background: #000; border-radius: 6px; box-shadow: 0 10px 40px #0008; display: block; }

/* Fullscreen: keep 320:224, letterbox the rest */
#screen-wrap:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; background: #000; display: grid; place-items: center; }
#screen-wrap:fullscreen #screen { width: auto; height: auto; max-width: 100vw; max-height: 100vh; aspect-ratio: 320 / 224; border-radius: 0; box-shadow: none; }
#screen-wrap:fullscreen #screen { width: min(100vw, 100vh * 320 / 224); }

#loader, #menu {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  overflow: auto; text-align: center; padding: clamp(10px, 4%, 40px); background: radial-gradient(ellipse at top, #2140a8, #0b1440 70%); border-radius: 6px;
}
#loader h1 { margin: 0 0 .4em; font-size: clamp(18px, 4vw, 36px); letter-spacing: .02em; line-height: 1.15; }
#loader h1 span { font-size: .5em; color: #ffd94a; vertical-align: middle; }
#loader p { max-width: 52ch; margin: .3em 0; }
#loader.drag { outline: 3px dashed #ffd94a; outline-offset: -10px; }
.hint { opacity: .75; font-size: .9em; }
.note { color: #ffd94a; font-size: .9em; margin: .4em 0 0; }
.note:empty { display: none; }
#error { color: #ff8a8a; min-height: 1.5em; max-width: 52ch; }
#rom-input { display: none; }
.btn { margin: .8em 0; padding: .6em 1.4em; border-radius: 999px; background: #ffd94a; color: #1a1a1a; font-weight: 700; cursor: pointer; }
.btn:hover { background: #ffe680; }
#menu { background: #0b1440e6; }
#menu h2 { margin: 0 0 .5em; color: #ffd94a; }
#zone-list { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, auto); gap: .1em 2em; text-align: left; }
#zone-list li { padding: .15em .6em; border-radius: 4px; cursor: pointer; white-space: nowrap; }
#zone-list li.sel { background: #ffd94a; color: #111; }
.menu-actions { display: flex; gap: 1.5em; margin: .6em 0 0; }
.link { background: none; border: 0; color: #9fb4ff; text-decoration: underline; font: inherit; cursor: pointer; padding: 0; }
#help { opacity: .8; font-size: 13px; text-align: center; max-width: 900px; }
#help p { margin: .2em 0; }
kbd { background: #222a4a; border: 1px solid #3a4572; border-radius: 4px; padding: 0 .35em; font-size: .9em; }

/* Touch controls */
#touch { display: none; width: min(100vw - 24px, 640px); justify-content: space-between; align-items: center; user-select: none; -webkit-user-select: none; touch-action: none; }
#dpad {
  position: relative; width: 150px; height: 150px; border-radius: 50%; background: #ffffff14; touch-action: none;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
#dpad span { display: grid; place-items: center; color: #fffc; font-size: 20px; pointer-events: none; }
#dpad .u { grid-area: 1 / 2; } #dpad .l { grid-area: 2 / 1; } #dpad .r { grid-area: 2 / 3; } #dpad .d { grid-area: 3 / 2; }
.abc { display: grid; grid-template-columns: auto auto; grid-template-areas: "start start" "c a"; gap: 8px; justify-items: center; }
.abc button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: #ffffff22; color: #fff; font-size: 20px; font-weight: 700; touch-action: none; }
.abc .start { grid-area: start; width: 96px; height: 34px; border-radius: 17px; font-size: 13px; }
@media (pointer: coarse) { #touch { display: flex; } #help { display: none; } }
/* Landscape phones: controls on either side of the screen */
@media (pointer: coarse) and (orientation: landscape) {
  main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px; }
  #screen-wrap { grid-column: 2; grid-row: 1; width: min(100vw - 340px, (100vh - 12px) * 320 / 224); }
  #touch { display: contents; }
  #dpad { grid-column: 1; grid-row: 1; justify-self: center; }
  .abc { grid-column: 3; grid-row: 1; justify-self: center; }
}
#char-select { display: flex; align-items: center; gap: .8em; margin: 0 0 .6em; padding: .15em .6em; border-radius: 6px; }
#char-select.sel { outline: 2px solid #ffd94a; }
#char-select .arrow { background: #ffffff22; border: 0; color: #fff; border-radius: 6px; width: 2em; height: 1.8em; cursor: pointer; font: inherit; }