html, body {
  margin: 0;
  background: radial-gradient(circle at 50% 20%, #241f33, #12101a 70%);
  min-height: 100vh;
  color: #2a2733;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  display: flex;
  justify-content: center;
  /* Mobile hardening: no pinch / double-tap zoom, no rubber-band overscroll,
     no accidental text selection or tap-flash on the game surface. */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Belt-and-suspenders: kill horizontal scroll on the whole document. */
html { overflow-x: hidden; }
body { width: 100%; overflow-x: hidden; }

#wrap {
  margin-top: 14px;
  width: 704px;
  /* Fit the viewport width on phones (keeps the canvas aspect ratio), while
     respecting notch / rounded-corner safe areas on both sides. */
  max-width: calc(100vw - 12px);
  max-width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

/* Standalone (installed to Home Screen): pin below the status bar / notch. */
@media (display-mode: standalone) {
  #wrap { margin-top: calc(8px + env(safe-area-inset-top)); }
}

#stage { position: relative; }

#screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  background: #1c1830;
}

#panel {
  min-height: 172px;
  margin-top: 10px;
  border-radius: 16px;
  background: #fdfaf2;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  padding: 12px 14px;
  box-sizing: border-box;
}

/* ---- touch controls ----
   They live in a DEDICATED BAND below the game (never over the canvas): the
   d-pad in the bottom-left, A/B in the bottom-right. Hidden on desktop. */
#controls { display: none; }

#dpad {
  display: grid;
  grid-template-areas: ". up ." "left . right" ". down .";
  grid-template-columns: 52px 52px 52px;
  grid-template-rows: 52px 52px 52px;
}
#dpad button[data-dir="up"] { grid-area: up; }
#dpad button[data-dir="left"] { grid-area: left; }
#dpad button[data-dir="right"] { grid-area: right; }
#dpad button[data-dir="down"] { grid-area: down; }
#abpad { display: flex; gap: 18px; align-items: flex-end; }
#dpad button, #abpad button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(28,24,44,0.72);
  color: rgba(255,255,255,0.9);
  font-size: 20px;
  font-weight: 800;
  touch-action: none;            /* buttons shouldn't scroll/zoom the page */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  transition: background 0.06s, transform 0.06s;
}
#dpad button:active, #abpad button:active {
  background: rgba(232,161,60,0.8);
  transform: scale(0.9);
}
/* A/B a touch larger, staggered for a natural thumb rest. */
#abpad button { width: 62px; height: 62px; font-size: 22px; }
#abpad button[data-key="Enter"] { transform: translateY(-8px); }   /* A sits higher */
#abpad button[data-key="Enter"]:active { transform: translateY(-8px) scale(0.9); }

/* ===== MOBILE LAYOUT (touch devices, or any narrow screen) =====
   Full-height column: canvas on top, panel fills the middle, controls pinned
   in their own band at the bottom. The canvas is never covered. */
@media (pointer: coarse), (max-width: 600px) {
  body { align-items: stretch; }
  #wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;          /* excludes mobile browser chrome */
    margin-top: 0;
    padding-top: env(safe-area-inset-top);
    gap: 8px;
  }
  #stage { flex: 0 0 auto; }
  #screen {
    border-radius: 0 0 16px 16px;
    max-height: 48dvh;           /* keep the world compact; leave room below */
    object-fit: contain;
    margin: 0 auto;
  }
  #panel {
    flex: 0 1 auto;            /* sized to its content, not a giant empty box */
    min-height: 60px;
    max-height: 42dvh;         /* long menus scroll instead of shoving controls off */
    overflow-y: auto;
    margin: 0 8px;
  }
  #controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex: 0 0 auto;            /* sit right below the panel, not way down at
                                  the bottom (where Safari's toolbar hides it) */
    padding: 6px 16px 10px;
  }
  /* more room for menus on a tall phone (desktop caps them at 118px) */
  .menu-items { max-height: 30dvh; }
  .dialog p { min-height: 64px; }
}

/* Small / short phones: shrink the pads a touch so the band stays tidy. */
@media (max-width: 400px), (max-height: 680px) {
  #dpad { grid-template-columns: 46px 46px 46px; grid-template-rows: 46px 46px 46px; }
  #dpad button { width: 46px; height: 46px; font-size: 18px; }
  #abpad button { width: 54px; height: 54px; }
}

/* Landscape hint: on short landscape phones, remind the player portrait is best.
   Purely additive — the game still plays fine in landscape. */
#rotate-hint { display: none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 460px) {
  #rotate-hint {
    display: block;
    position: fixed;
    left: 50%;
    bottom: calc(6px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(28,24,48,0.82);
    color: #f5c86a;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}

.dialog p {
  font-size: 16.5px;
  line-height: 1.5;
  margin: 4px 6px;
  min-height: 96px;
  color: #2a2733;
  font-weight: 500;
}
.dialog .more { color: #b0a890; font-size: 12px; float: right; animation: blink 1.1s infinite; font-weight: 700; }
.battle-msg p { min-height: 60px; font-size: 17px; font-weight: 600; }
@keyframes blink { 50% { opacity: 0.15; } }

.menu-title { color: #8a6a28; font-weight: 800; margin: 0 4px 8px; font-size: 15px; letter-spacing: 0.2px; }
.menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 118px; overflow-y: auto; padding: 2px; }
.mi {
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: #ffffff;
  color: #2a2733;
  border: 2px solid #e2dac8;
  border-radius: 10px;
  padding: 7px 11px;
  cursor: pointer;
  transition: border-color 0.08s, background 0.08s;
  min-height: 38px;
}
.mi:hover { border-color: #d0b878; }
.mi.sel { border-color: #e8a13c; background: #fdf3dd; box-shadow: 0 2px 8px rgba(232,161,60,0.25); }
.mi.dis { opacity: 0.35; cursor: default; }
.mi .desc { display: block; color: #948c7c; font-size: 11.5px; margin-top: 1px; font-weight: 500; }

.hint { color: #a29a88; font-size: 13px; padding: 8px 6px; font-weight: 500; }