Port the Pokégear, phone calls and Mom's bank

POKéGEAR in the start menu runs the clock, Town Map and phone cards with
the original joypad rules. Calls to Elm and Mom run their callee scripts,
with the out-of-area and out-of-hours cases and HangUp's corrected timing.
Mom saves a quarter of trainer prizes once asked, talking to her at home
opens BankOfMom (GET, SAVE, CHANGE and the DST checks) with its digit
amount box, and MomTriesToBuySomething buys items and dolls with her
savings. Saves gain Mom's money, her next item and its trigger balance.

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

src/ui/shell.ts

@@ -32,6 +32,7 @@ export function renderShell(root: HTMLElement) {
                 <div class="battle-box"><p id="battle-text" aria-live="polite"></p><div id="battle-menu" class="battle-menu"></div></div>
               </div>
               <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="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

@@ -538,7 +538,8 @@ dialog h2 {
 .intro-screen[hidden] {
   display: none;
 }
-.intro-screen:not([hidden]) ~ .minimap-overlay {
+.intro-screen:not([hidden]) ~ .minimap-overlay,
+.pokegear:not([hidden]) ~ .minimap-overlay {
   display: none;
 }
 .pokepic {
@@ -667,6 +668,38 @@ dialog h2 {
 .dialogue-choice button {
   min-width: 64px;
 }
+/* BankOfMom's amount box: one row per amount, the cursor digit blinking
+   16 frames in 32 as hVBlankCounter's bit 4 does. */
+.mom-bank {
+  flex: 1 0 100%;
+  margin: 0;
+}
+.mom-bank p {
+  display: flex;
+  justify-content: space-between;
+  max-width: 22ch;
+  margin: 0 0 2px;
+  font-weight: 800;
+}
+.dialogue-choice .mom-bank output {
+  min-width: 0;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.mom-bank-cursor {
+  animation: mom-bank-blink 0.53s steps(1) infinite;
+}
+@keyframes mom-bank-blink {
+  50% {
+    visibility: hidden;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .mom-bank-cursor {
+    animation: none;
+    text-decoration: underline;
+  }
+}
 .dialogue-choice button[aria-pressed="true"]::before {
   content: "▶ ";
 }
@@ -1136,3 +1169,95 @@ dialog dd {
   image-rendering: pixelated;
   object-fit: contain;
 }
+
+/* The Pokégear: card icons along the top, the card below and the
+   textbox (the native dialogue) over its lower part. */
+.pokegear {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 8px;
+  padding: 10px 10px 118px;
+  color: var(--ink);
+  background: var(--blue-dark);
+}
+.pokegear-cards {
+  display: flex;
+  gap: 4px;
+}
+.pokegear-cards span {
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  color: var(--cream);
+  border: 3px double var(--cream);
+}
+.pokegear-cards span[aria-current="true"] {
+  color: var(--ink);
+  background: var(--cream);
+}
+.pokegear-card {
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  padding: 8px;
+  overflow: hidden;
+  background: var(--cream);
+  border: 5px double var(--ink);
+}
+.pokegear-clock {
+  display: grid;
+  gap: 4px;
+  justify-items: center;
+}
+.pokegear-clock strong {
+  font-size: 2rem;
+  letter-spacing: 0.05em;
+  white-space: pre;
+}
+.pokegear-map {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+  gap: 4px;
+}
+.pokegear-map canvas {
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  image-rendering: pixelated;
+  object-fit: contain;
+}
+.pokegear-phone {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  gap: 8px;
+}
+.pokegear-phone ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pokegear-phone li {
+  min-height: 2.9em;
+  white-space: pre;
+}
+.pokegear-phone li::before {
+  content: attr(data-mark) " ";
+}
+.pokegear-signal {
+  grid-column: 1 / -1;
+  justify-self: end;
+  font-size: 0.75rem;
+}
+.pokegear-submenu {
+  padding: 4px 8px;
+  border: 3px double var(--ink);
+}