Port the options screen

OPTION in the start menu runs _Option with the ROM's labels and settings,
OptionsControl's cursor wrapping and each option's bit handling. The four
option bytes live in the script state and saves, defaulting to
DefaultOptions. The battle style now decides whether a trainer's next
Pokémon brings an offer to switch, and the menu account whether the start
menu describes its items; the other settings are kept for later.

Closes #24

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/ui/shell.ts

@@ -34,6 +34,7 @@ export function renderShell(root: HTMLElement) {
               <div id="stats-screen" class="stats-screen" hidden aria-label="Pokémon stats"><div class="stats-top"><canvas id="stats-pic" width="56" height="56" role="img"></canvas><div id="stats-header" class="stats-header"></div></div><div id="stats-page" class="stats-page" aria-live="polite"></div><div class="stats-nav"><button id="stats-prev" aria-label="Previous page">◀</button><span id="stats-page-number"></span><button id="stats-next" aria-label="Next page">▶</button><button id="stats-close">Close</button></div></div>
               <div id="pokegear" class="pokegear" hidden aria-label="Pokégear"><div id="pokegear-cards" class="pokegear-cards" aria-label="Cards"></div><div id="pokegear-card" class="pokegear-card" aria-live="polite"></div></div>
               <div id="trainer-card" class="trainer-card" hidden aria-label="Trainer card"><div class="trainer-card-top"><dl id="trainer-card-info"></dl><canvas id="trainer-card-pic" width="40" height="56" role="img"></canvas></div><div id="trainer-card-page" class="trainer-card-page"></div></div>
+              <div id="options" class="options-screen" hidden aria-label="Options"><ol id="options-list"></ol></div>
               <div id="town-map-view" class="town-map-view" hidden aria-label="Town Map"><canvas id="town-map-canvas" width="160" height="144" role="img" aria-label="Town Map"></canvas><button id="town-map-close">Close map</button></div>
               <div id="mart" class="mart" hidden aria-label="Poké Mart">
                 <p id="mart-money" class="mart-money"></p>

src/ui/styles.css

@@ -540,7 +540,8 @@ dialog h2 {
 }
 .intro-screen:not([hidden]) ~ .minimap-overlay,
 .pokegear:not([hidden]) ~ .minimap-overlay,
-.trainer-card:not([hidden]) ~ .minimap-overlay {
+.trainer-card:not([hidden]) ~ .minimap-overlay,
+.options-screen:not([hidden]) ~ .minimap-overlay {
   display: none;
 }
 .pokepic {
@@ -1326,3 +1327,38 @@ dialog dd {
   aspect-ratio: 128 / 48;
   image-rendering: pixelated;
 }
+
+/* _Option: one framed box of options, settings beside their labels. */
+.options-screen {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  padding: 10px;
+  overflow-y: auto;
+  color: var(--ink);
+  background: var(--cream);
+}
+.options-screen ol {
+  margin: 0;
+  padding: 10px 14px;
+  list-style: none;
+  border: 5px double var(--ink);
+  display: grid;
+  align-content: start;
+  gap: 8px;
+}
+.options-screen li {
+  display: grid;
+  grid-template-columns: 1.4em 13ch auto;
+  justify-content: start;
+  gap: 8px;
+}
+.options-screen li::before {
+  content: attr(data-mark);
+}
+.options-screen strong {
+  min-width: 9ch;
+  font-weight: normal;
+  white-space: pre;
+}