.settings { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1rem; }
.settings .mode { margin: 0; max-width: 100%; }
/* Long option labels must not push the picker past a phone screen. */
.settings label:has(select) { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.settings label:has(select) select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.settings select { font: inherit; background: var(--card); color: var(--ink); border: 1px solid var(--card-edge); border-radius: 0.4rem; padding: 0.15rem 0.3rem; }

.game { width: 100%; max-width: 44rem; padding: 0.5rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.game[hidden], .game [hidden] { display: none !important; }
.small { font-size: 0.8rem; color: var(--muted); }

.outcome { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.outcome-line { font-size: 1.15rem; }
.outcome .game-button { height: 2.6rem; }
.journal-count { text-align: center; margin: 0; }

/* Overworld: the canvas map, status line and on-screen d-pad. */
.explore { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.status { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.map {
  width: 100%; max-width: 32rem; aspect-ratio: 15 / 11; height: auto;
  border: 1px solid var(--card-edge); border-radius: 0.6rem; background: var(--card);
  image-rendering: auto; touch-action: manipulation;
}
.dpad { display: grid; grid-template-columns: repeat(3, 3rem); grid-template-rows: repeat(2, 3rem); gap: 0.3rem; }
.dpad button {
  font: inherit; font-size: 1.1rem; border: 1px solid var(--card-edge); border-radius: 0.6rem;
  background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation;
}
.dpad button:hover, .dpad button:focus-visible { border-color: var(--accent); color: var(--accent); }
.dpad .up { grid-column: 2; grid-row: 1; }
.dpad .left { grid-column: 1; grid-row: 2; }
.dpad .down { grid-column: 2; grid-row: 2; }
.dpad .right { grid-column: 3; grid-row: 2; }
.map-log { margin: 0; min-height: 1.4em; text-align: center; }
.keys { margin: 0; text-align: center; max-width: 32rem; }
/* Keyboard players don't need the pad; keep it for touch screens and narrow windows. */
@media (hover: hover) and (pointer: fine) and (min-width: 561px) { .dpad { display: none; } }
.map:focus { outline: none; }
.map:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }