/* Taxi Yellow (Claude)
   The bright youth phone of 1999 in matte yellow: a square-shouldered body, black keys with
   yellow numerals, and a warm cream LCD. The menu is black with a yellow top band, block
   tabs, capital headings, and square yellow buttons. */

html[data-theme="taxi-yellow"] {
  --s-font: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --s-lcd-font: "Pixelify Sans", "Courier New", monospace;
  --s-lcd-size: clamp(0.85rem, 3.8vw, 1rem);
  --s-lcd-label-size: 0.6875rem;
  --s-grid: transparent;
  --s-lcd: #e2dcae;
  --s-lcd-ink: #2e2a12;
  --s-lcd-dim: #645f41;
  --s-lcd-glow: inset 0 1px 2px rgba(46, 42, 18, 0.3);
  --s-lcd-glow-fullscreen: inset 0 1px 2px rgba(46, 42, 18, 0.225);
  --s-seed: #443f25;
  --s-key-highlight: transparent;
  --s-page: #0f0f0d;
  --s-menu: #181816;
  --s-raise: #242421;
  --s-raise-2: #2e2e2a;
  --s-line: #2c2c28;
  --s-line-strong: #4c4c45;
  --s-text: #f4f2e8;
  --s-muted: #b0ad9c;
  --s-faint: #6f6d60;
  --s-accent: #e6b422;
  --s-accent-ink: #1c1603;
  --s-accent-text: #f0c84e;
  --s-button: #e6b422;
  --s-button-ink: #1c1603;
  --s-button-hover: #f2c744;
  --s-radius-panel: 0px;
  --s-radius-box: 0px;
  --s-radius-pill: 0px;
  --s-radius-button: 0px;
  --s-c1: #e6b422;
  --s-c2: #b5cc9a;
  --s-c3: #a5c0d6;
  --s-stop: #cf5a45;
  --s-stop-text: #f08f7a;
  --s-go: #6cab5f;
  --s-egg: #f3eed6;
  --s-nursery-bg: #e2dcae;
  --s-nursery-ink: #2e2a12;
  --s-nursery-frame: #2e2e2a;
  --s-lens: #141412;
  --s-hint: #f4e7b0;
  --s-brand: #3a2d03;
  --s-key-bg: #1c1c1a;
  --s-key-border: #0a0a09;
  --s-key-base: #9c7910;
  --s-key-ink: #f0c84e;
  --s-nav-bg: #1c1c1a;
  --s-nav-ink: #f0c84e;
  --s-key-locked: #c2981a;
  --s-key-locked-border: #9c7910;
  --s-key-locked-ink: #3a2d03;
  --s-dpad-well: #c2981a;
}

/* ---------- shared round 3 system ----------
   A dark, flat, minimal menu: a faint grid behind it, a grotesk for every word and number,
   open ruled rows instead of cards, solid high-contrast buttons, and pill tabs.
   The phone is the only 3D object: rounded keys, Start and Reset with coloured underlines,
   and an LCD with horizontal scanlines and a soft glow. */

html[data-theme="taxi-yellow"] {
  color-scheme: dark;
  --screen: var(--s-lcd);
  --screen-ink: var(--s-lcd-ink);
  --paper: var(--s-text);
  --font-body: var(--s-font);
  --font-ui: var(--s-font);
}

html[data-theme="taxi-yellow"] body {
  background: var(--s-page);
  color: var(--s-text);
  font-family: var(--s-font);
  font-variant-numeric: tabular-nums;
}

html[data-theme="taxi-yellow"] .app-layout {
  grid-template-columns: minmax(280px, 360px) minmax(300px, 330px);
  gap: clamp(24px, 7vw, 80px);
  align-items: center;
}

@media (max-width: 800px) {
  html[data-theme="taxi-yellow"] .app-layout {
    grid-template-columns: minmax(0, 360px);
  }
}

/* ---------- the menu ---------- */

html[data-theme="taxi-yellow"] .menu-panel {
  padding: 20px 20px 16px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-panel);
  background:
    linear-gradient(var(--s-grid) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--s-grid) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--s-menu);
  background-attachment: local;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  color: var(--s-text);
  scrollbar-color: var(--s-line-strong) var(--s-menu);
}

html[data-theme="taxi-yellow"] .menu-panel h1 {
  margin: 0 0 16px;
  color: var(--s-text);
  font-family: var(--s-font);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .menu-section-heading {
  color: var(--s-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

html[data-theme="taxi-yellow"] .menu-section-mark {
  color: var(--s-accent);
}

html[data-theme="taxi-yellow"] .menu-stat {
  padding: 16px;
  border: 0;
  border-radius: var(--s-radius-box);
  background: var(--s-raise);
  box-shadow: none;
  color: var(--s-text);
}

html[data-theme="taxi-yellow"] .menu-stat span {
  color: var(--s-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

html[data-theme="taxi-yellow"] .menu-stat strong {
  font-family: var(--s-font);
  font-size: clamp(2.25rem, 8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

html[data-theme="taxi-yellow"] .menu-tabs {
  gap: 4px;
  margin-top: 16px;
  padding: 4px;
  border: 0;
  border-radius: var(--s-radius-pill);
  background: var(--s-raise);
}

html[data-theme="taxi-yellow"] .menu-tab {
  padding: 8px 4px;
  border: 0;
  border-radius: var(--s-radius-pill);
  background: transparent;
  color: var(--s-muted);
  font-family: var(--s-font);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .menu-tab.is-active,
html[data-theme="taxi-yellow"] .menu-tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--s-accent);
  box-shadow: none;
  color: var(--s-accent-ink);
}

html[data-theme="taxi-yellow"] .menu-tab:disabled {
  color: var(--s-faint);
}

html[data-theme="taxi-yellow"] .menu-tab-notification {
  background: var(--s-text);
  color: var(--s-menu);
}

/* Open ruled rows instead of boxes */
html[data-theme="taxi-yellow"] :is(.upgrade-card, .nursery-goal-card, .nest-card, .nursery-yard-card, .nursery-currency, .migration-summary-card, .migration-builder, .migration-expedition-card, .trade-route-builder, .trade-direction-card, .colony-placeholder, .colony-income-summary, .habitat-card, .notable-card, .hatchling-row, .candidate-decision, .notable-candidates) {
  padding: 12px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--s-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--s-text);
}

html[data-theme="taxi-yellow"] .menu-panel :is(strong, h2, h3, h4, .habitat-name, .upgrade-card-heading strong, .nursery-card-heading strong, .notable-card > strong) {
  color: var(--s-text) !important;
  font-family: var(--s-font);
  font-weight: 600;
}

html[data-theme="taxi-yellow"] .menu-panel :is(.upgrade-card-heading strong, .nursery-card-heading strong, .habitat-name) {
  font-size: 1.0625rem;
}

html[data-theme="taxi-yellow"] .menu-panel :is(p, li, label, .upgrade-current, .nursery-timer, .nursery-meta, .nursery-meta span, .colony-note, .colony-income-summary, .habitat-notable, .habitat-production, .habitat-bonus, .habitat-primary-row, .habitat-over-capacity-row, .habitat-idle-snakes, .notable-card, .notable-service, .hatchling-row, .hatchling-row-heading span, .migration-field, .migration-cargo-note, .migration-required, .migration-founding, .migration-attrition, .trade-direction-derived, .trade-direction-fields label, .trade-worker-row, .nursery-currency, .nest-visual span) {
  color: var(--s-muted) !important;
  font-family: var(--s-font);
}

html[data-theme="taxi-yellow"] .menu-panel :is(.upgrade-label, .habitat-output-types, .colony-summary-heading) {
  color: var(--s-muted) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="taxi-yellow"] .menu-panel :is(.upgrade-next, .egg-progress-rate) {
  color: var(--s-accent-text) !important;
  font-weight: 600;
}

html[data-theme="taxi-yellow"] .menu-panel :is(.migration-error, .habitat-max-count.is-at-maximum, .habitat-natural-count.is-over-natural, .habitat-idle-snakes) {
  color: var(--s-stop-text) !important;
}

html[data-theme="taxi-yellow"] .upgrade-level,
html[data-theme="taxi-yellow"] .egg-progress-rate {
  padding: 2px 8px;
  border: 0;
  border-radius: var(--s-radius-pill);
  background: var(--s-raise);
  color: var(--s-muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-theme="taxi-yellow"] .upgrade-card.is-maxed .upgrade-level {
  background: var(--s-accent);
  color: var(--s-accent-ink) !important;
}

/* Colony: the habitat type is a coloured rule on the left of an open row */
html[data-theme="taxi-yellow"] .habitat-card:not(.is-locked) {
  padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--s-line-strong);
}

html[data-theme="taxi-yellow"] .habitat-card.produces-provisions:not(.is-locked) {
  box-shadow: inset 3px 0 0 var(--s-c1);
}

html[data-theme="taxi-yellow"] .habitat-card.produces-branches:not(.is-locked) {
  box-shadow: inset 3px 0 0 var(--s-c2);
}

html[data-theme="taxi-yellow"] .habitat-card.speeds-egg-hatch:not(.is-locked) {
  box-shadow: inset 3px 0 0 var(--s-c3);
}

html[data-theme="taxi-yellow"] .habitat-card.produces-provisions:not(.is-locked) :is(.habitat-production, .habitat-output-types) {
  color: var(--s-c1) !important;
}

html[data-theme="taxi-yellow"] .habitat-card.produces-branches:not(.is-locked) :is(.habitat-production, .habitat-output-types) {
  color: var(--s-c2) !important;
}

html[data-theme="taxi-yellow"] .habitat-card.speeds-egg-hatch:not(.is-locked) :is(.habitat-production, .habitat-output-types) {
  color: var(--s-c3) !important;
}

html[data-theme="taxi-yellow"] .habitat-card.is-locked {
  opacity: 0.5;
}

/* Flat solid buttons with sharp contrast */
html[data-theme="taxi-yellow"] .menu-panel :is(button:not(.menu-tab):not(.candidate-list-item), .upgrade-button) {
  min-height: 36px;
  border: 0;
  border-radius: var(--s-radius-button);
  background: var(--s-button);
  box-shadow: none;
  color: var(--s-button-ink);
  font-family: var(--s-font);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .menu-panel :is(button:not(.menu-tab):not(.candidate-list-item), .upgrade-button):not(:disabled):hover {
  background: var(--s-button-hover);
}

html[data-theme="taxi-yellow"] .menu-panel :is(button:not(.menu-tab):not(.candidate-list-item), .upgrade-button):not(:disabled):active {
  transform: translateY(1px);
}

html[data-theme="taxi-yellow"] .menu-panel :is(button:not(.menu-tab), .upgrade-button):disabled {
  background: var(--s-raise);
  color: var(--s-faint);
  filter: none;
}

html[data-theme="taxi-yellow"] .menu-panel :is(button, select, input):focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}

html[data-theme="taxi-yellow"] .trade-open-button.is-ready {
  background: var(--s-accent) !important;
  color: var(--s-accent-ink) !important;
}

html[data-theme="taxi-yellow"] .menu-panel :is(.migration-expedition-actions button.is-danger, .reset-progress-button) {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px var(--s-stop) !important;
  color: var(--s-stop-text) !important;
}

html[data-theme="taxi-yellow"] .reset-progress {
  border-top: 1px solid var(--s-line);
}

html[data-theme="taxi-yellow"] .reset-progress-fill {
  background: var(--s-stop);
  opacity: 0.3;
}

html[data-theme="taxi-yellow"] .menu-panel :is(select, input, .upgrade-select) {
  min-height: 32px;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius-box);
  background: var(--s-raise);
  color: var(--s-text);
  font-family: var(--s-font);
  font-size: 0.875rem;
}

html[data-theme="taxi-yellow"] .growth-bar {
  height: 6px;
  border: 0;
  border-radius: var(--s-radius-pill);
  background: var(--s-raise);
}

html[data-theme="taxi-yellow"] .growth-bar span {
  border-radius: var(--s-radius-pill);
  background: var(--s-accent);
}

html[data-theme="taxi-yellow"] .nursery-feeding-button[aria-pressed="true"] {
  background: var(--s-accent) !important;
  color: var(--s-accent-ink) !important;
}

html[data-theme="taxi-yellow"] .nest-visual {
  border: 1px dashed var(--s-line-strong);
  border-radius: var(--s-radius-box);
  background: transparent;
  color: var(--s-muted);
}

html[data-theme="taxi-yellow"] .nest-visual.has-egg {
  border-style: solid;
  background: transparent;
}

html[data-theme="taxi-yellow"] .egg-shape {
  border: 1.5px solid var(--s-text);
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--s-egg));
  box-shadow: none;
}

/* The nursery is its own small LCD, in a second colour */
html[data-theme="taxi-yellow"] .nursery-grid {
  border: 6px solid var(--s-nursery-frame);
  border-radius: var(--s-radius-box);
  background: var(--s-nursery-bg);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="taxi-yellow"] .nursery-cell,
html[data-theme="taxi-yellow"] .nursery-cell:nth-child(odd) {
  background: transparent;
}

html[data-theme="taxi-yellow"] .nursery-cell.is-body::after,
html[data-theme="taxi-yellow"] .nursery-cell.is-tail::after,
html[data-theme="taxi-yellow"] .nursery-cell.is-head::after {
  background: var(--s-nursery-ink);
}

html[data-theme="taxi-yellow"] .nursery-cell.is-head::before {
  background: var(--s-nursery-bg);
}

html[data-theme="taxi-yellow"] .habitat-capacity-tooltip {
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius-box);
  background: var(--s-raise-2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  color: var(--s-text);
}

html[data-theme="taxi-yellow"] .habitat-capacity-tooltip :is(strong, li) {
  color: var(--s-text) !important;
}

html[data-theme="taxi-yellow"] .candidate-list-item {
  border: 0;
  border-radius: var(--s-radius-box);
  background: transparent;
  color: var(--s-text);
  font-family: var(--s-font);
}

html[data-theme="taxi-yellow"] .candidate-list-item[aria-pressed="true"] {
  background: var(--s-raise);
  box-shadow: inset 3px 0 0 var(--s-accent);
  color: var(--s-text);
}

html[data-theme="taxi-yellow"] .trade-network-edge {
  stroke: var(--s-line-strong);
}

html[data-theme="taxi-yellow"] .trade-network-edge.is-selected {
  stroke: var(--s-accent);
}

html[data-theme="taxi-yellow"] .trade-network-node circle {
  fill: var(--s-raise);
  stroke: var(--s-text);
}

html[data-theme="taxi-yellow"] .trade-network-node text {
  fill: var(--s-text);
  font-family: var(--s-font);
}

/* ---------- the phone: the LCD ---------- */

html[data-theme="taxi-yellow"] .phone-shell::before,
html[data-theme="taxi-yellow"] .phone-shell::after {
  content: none;
}

html[data-theme="taxi-yellow"] .phone-brand {
  min-width: 0;
  padding: 4px 0 0;
  background: transparent;
  color: var(--s-brand);
  font-family: var(--s-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

html[data-theme="taxi-yellow"] .screen-frame {
  padding: 12px;
  border: 1px solid #000000;
  border-radius: 14px 14px 20px 20px;
  background: var(--s-lens);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="taxi-yellow"] .status-strip {
  gap: 0;
  margin-bottom: 0;
  padding: 4px 4px 0;
  border-radius: 4px 4px 0 0;
  background: var(--s-lcd);
}

html[data-theme="taxi-yellow"] .status-strip div {
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--s-lcd-ink);
}

html[data-theme="taxi-yellow"] .status-strip div + div {
  background: linear-gradient(var(--s-lcd-dim), var(--s-lcd-dim)) left center / 1px 60% no-repeat;
}

html[data-theme="taxi-yellow"] .stat-label {
  color: var(--s-lcd-dim);
  font-family: var(--s-font);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

html[data-theme="taxi-yellow"] .status-strip strong {
  font-family: var(--s-font);
  font-size: clamp(0.8rem, 3.8vw, 1rem);
  letter-spacing: -0.01em;
  font-weight: 700;
  text-shadow: none;
}

html[data-theme="taxi-yellow"] .grid-select {
  border: 1px solid var(--s-lcd-dim);
  border-radius: 4px;
  background: var(--s-lcd);
  color: var(--s-lcd-ink);
  font-family: var(--s-font);
}

html[data-theme="taxi-yellow"] .screen-bezel {
  padding: 4px;
  border: 0;
  border-radius: 0 0 4px 4px;
  background: var(--s-lcd);
  box-shadow: var(--s-lcd-glow);
}

/* The canvas background shows through the hollow centre of a seed */
html[data-theme="taxi-yellow"] #game {
  border: 0;
  border-radius: 0;
  background: var(--s-seed);
  image-rendering: auto;
}

html[data-theme="taxi-yellow"] .screen-plate {
  padding: 8px 12px;
  border: 2px solid var(--s-lcd-ink);
  border-radius: 6px;
  background: var(--s-lcd);
  box-shadow: none;
  color: var(--s-lcd-ink);
}

html[data-theme="taxi-yellow"] #stateText,
html[data-theme="taxi-yellow"] .ready-start-prompt {
  color: var(--s-lcd-ink);
  font-family: var(--s-font);
  font-weight: 700;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .screen-hint {
  color: var(--s-hint);
  font-family: var(--s-font);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .personalization-screen,
html[data-theme="taxi-yellow"] .broodline-screen {
  border: 0;
  border-radius: 0;
  background: var(--s-lcd);
  box-shadow: none;
  color: var(--s-lcd-ink);
  font-family: var(--s-font);
}

html[data-theme="taxi-yellow"] .personalization-heading {
  border-bottom: 1px solid var(--s-lcd-dim);
}

html[data-theme="taxi-yellow"] .color-swatch {
  border: 1px solid var(--s-lcd-dim);
  border-radius: 999px;
  box-shadow: none;
}

html[data-theme="taxi-yellow"] .color-swatch::after {
  border-radius: 999px;
}

html[data-theme="taxi-yellow"] .color-swatch[aria-pressed="true"] {
  outline: 2px solid var(--s-lcd-ink);
  outline-offset: 2px;
}

html[data-theme="taxi-yellow"] :is(.personalization-back, .mobile-control-toggle, .broodline-card) {
  border: 1px solid var(--s-lcd-dim);
  border-radius: 999px;
  background: transparent;
  color: var(--s-lcd-ink);
  font-family: var(--s-font);
  font-weight: 600;
  text-transform: none;
}

html[data-theme="taxi-yellow"] .broodline-card {
  border-radius: 8px;
}

html[data-theme="taxi-yellow"] :is(.mobile-control-toggle[aria-pressed="true"], .broodline-card.is-selected) {
  background: var(--s-lcd-ink);
  color: var(--s-lcd);
}

html[data-theme="taxi-yellow"] .save-data-area {
  border: 1px solid var(--s-lcd-dim);
  border-radius: 4px;
  background: var(--s-lcd);
  color: var(--s-lcd-ink);
  font-family: var(--s-font);
}

/* ---------- the phone: keys ---------- */

html[data-theme="taxi-yellow"] :is(.nav-key, .action-key, .phone-key) {
  border: 1px solid var(--s-key-border);
  background: var(--s-key-bg);
  box-shadow: inset 0 1px 0 var(--s-key-highlight), 0 2px 0 var(--s-key-base);
  color: var(--s-key-ink);
  font-family: var(--s-font);
  font-weight: 700;
}

html[data-theme="taxi-yellow"] :is(.nav-key, .action-key, .phone-key):focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
  box-shadow: inset 0 1px 0 var(--s-key-highlight), 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] .phone-key {
  min-height: 26px;
  border-radius: 999px;
  font-size: 0.875rem;
}

/* Rounded navigation keys: a pill rocker for up and down, rounded ovals left and right */
html[data-theme="taxi-yellow"] .nav-key {
  background: var(--s-nav-bg);
  color: var(--s-nav-ink);
}

html[data-theme="taxi-yellow"] .nav-up {
  border-radius: 28px 28px 14px 14px;
}

html[data-theme="taxi-yellow"] .nav-down {
  border-radius: 14px 14px 28px 28px;
}

html[data-theme="taxi-yellow"] .nav-left {
  border-radius: 22px 14px 14px 22px;
}

html[data-theme="taxi-yellow"] .nav-right {
  border-radius: 14px 22px 22px 14px;
}

html[data-theme="taxi-yellow"] .action-key {
  min-height: 34px;
  border-radius: 10px;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Start and Reset carry a short coloured underline */
html[data-theme="taxi-yellow"] #startButton {
  box-shadow: inset 0 1px 0 var(--s-key-highlight), inset 0 -4px 0 -1px var(--s-go), 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] #resetButton {
  box-shadow: inset 0 1px 0 var(--s-key-highlight), inset 0 -4px 0 -1px var(--s-stop), 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] :is(.nav-key:active, .nav-key.is-pressed, .action-key:active, .action-key.is-active) {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  filter: brightness(0.92);
}

html[data-theme="taxi-yellow"] .minigame-key.is-locked {
  border-color: var(--s-key-locked-border);
  background: var(--s-key-locked);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  color: var(--s-key-locked-ink);
  filter: none;
}

html[data-theme="taxi-yellow"] .grid-key[aria-pressed="true"] {
  background: var(--s-accent);
  color: var(--s-accent-ink);
}

html[data-theme="taxi-yellow"] .phone-nav.is-large-dpad {
  border: 1px solid var(--s-key-border);
  background: var(--s-dpad-well);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

html[data-theme="taxi-yellow"] .phone-nav.is-large-dpad .nav-key {
  border-color: var(--s-key-border);
  border-radius: 18px;
  background: var(--s-nav-bg);
  box-shadow: 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] .phone-nav.is-large-dpad .nav-chevron {
  color: var(--s-nav-ink);
}

html[data-theme="taxi-yellow"] .is-fullscreen-mode .phone-shell {
  width: 100%;
  border-radius: 24px;
}

/* Keep the current keypad focus and fullscreen menu rules in every theme. */
html[data-theme="taxi-yellow"] .phone-key:focus,
html[data-theme="taxi-yellow"] .phone-key:focus-visible { outline: none; }
@media (min-width: 801px) {
  html[data-theme="taxi-yellow"] body.is-fullscreen-mode .app-layout.has-fullscreen-option {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
  }
}

/* ---------- retro handset: matte plastic, plain controls, dot-matrix LCD ---------- */

html[data-theme="taxi-yellow"] .menu-panel {
  background: var(--s-menu);
  box-shadow: none;
}

html[data-theme="taxi-yellow"] .screen-frame {
  box-shadow: none;
}

/* The LCD face is for the things the phone itself would draw */
html[data-theme="taxi-yellow"] :is(.stat-label, .status-strip strong, .grid-select, #stateText, .ready-start-prompt, .screen-hint) {
  font-family: var(--s-lcd-font);
}

html[data-theme="taxi-yellow"] .stat-label {
  font-size: var(--s-lcd-label-size);
  font-weight: 400;
  letter-spacing: 0.04em;
}

html[data-theme="taxi-yellow"] .status-strip strong {
  font-size: var(--s-lcd-size);
  font-weight: 400;
  letter-spacing: 0.02em;
}

html[data-theme="taxi-yellow"] #stateText,
html[data-theme="taxi-yellow"] .ready-start-prompt {
  font-weight: 400;
}

html[data-theme="taxi-yellow"] .screen-plate {
  border-width: 1px;
  border-radius: 2px;
}

html[data-theme="taxi-yellow"] .screen-hint {
  font-size: var(--s-lcd-label-size);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Bezel shading is 25% weaker in fullscreen, as in the base game */
html[data-theme="taxi-yellow"] .is-fullscreen-mode .screen-bezel {
  box-shadow: var(--s-lcd-glow-fullscreen);
}

html[data-theme="taxi-yellow"] .egg-shape {
  background: var(--s-egg);
}

html[data-theme="taxi-yellow"] .nursery-grid {
  border-width: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-theme="taxi-yellow"] .habitat-capacity-tooltip {
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Rubber keys: one flat colour, a hard edge below, no highlight */
html[data-theme="taxi-yellow"] :is(.nav-key, .action-key, .phone-key),
html[data-theme="taxi-yellow"] :is(.nav-key, .action-key, .phone-key):focus-visible {
  box-shadow: 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] #startButton {
  box-shadow: inset 0 -4px 0 -1px var(--s-go), 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] #resetButton {
  box-shadow: inset 0 -4px 0 -1px var(--s-stop), 0 2px 0 var(--s-key-base);
}

html[data-theme="taxi-yellow"] :is(.nav-key:active, .nav-key.is-pressed, .action-key:active, .action-key.is-active) {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4);
  filter: brightness(0.9);
  transform: translateY(1px);
}

html[data-theme="taxi-yellow"] .minigame-key.is-locked {
  box-shadow: none;
}

html[data-theme="taxi-yellow"] .phone-nav.is-large-dpad {
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
}

html[data-theme="taxi-yellow"] .phone-brand {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* ---------- the matte yellow body ---------- */

html[data-theme="taxi-yellow"] .phone-shell {
  padding: 18px 18px 24px;
  border: 2px solid #9c7910;
  border-radius: 28px 28px 44px 44px / 24px 24px 52px 52px;
  background: linear-gradient(90deg, #d6a71c, #e3b223 14% 86%, #d6a71c);
  box-shadow: 0 14px 0 -8px rgba(0, 0, 0, 0.4), 0 18px 28px -14px rgba(0, 0, 0, 0.65);
}

html[data-theme="taxi-yellow"] .speaker-slot {
  width: 40px;
  height: 4px;
  border-radius: 0;
  background: #3a2d03;
  box-shadow: 0 7px 0 #3a2d03;
  margin-bottom: 7px;
  filter: none;
}

/* A black screen window with a square cut */
html[data-theme="taxi-yellow"] .screen-frame {
  border: 0;
  border-radius: 10px 10px 4px 4px;
}

html[data-theme="taxi-yellow"] .phone-key {
  border-radius: 4px;
}

html[data-theme="taxi-yellow"] .action-key {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}

html[data-theme="taxi-yellow"] :is(.nav-up, .nav-down, .nav-left, .nav-right) {
  border-radius: 4px;
}

html[data-theme="taxi-yellow"] .is-fullscreen-mode .phone-shell {
  border-radius: 12px;
}

/* A black menu with a yellow band and block tabs */
html[data-theme="taxi-yellow"] .menu-panel {
  border: 0;
  border-top: 8px solid var(--s-accent);
}

html[data-theme="taxi-yellow"] .menu-panel h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[data-theme="taxi-yellow"] .menu-stat {
  border-left: 4px solid var(--s-accent);
}

html[data-theme="taxi-yellow"] .menu-tabs {
  gap: 2px;
  padding: 0;
  background: transparent;
}

html[data-theme="taxi-yellow"] .menu-tab {
  background: var(--s-raise);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="taxi-yellow"] .menu-panel :is(button:not(.menu-tab):not(.candidate-list-item), .upgrade-button) {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-theme="taxi-yellow"] .color-swatch,
html[data-theme="taxi-yellow"] .color-swatch::after {
  border-radius: 0;
}

html[data-theme="taxi-yellow"] :is(.personalization-back, .mobile-control-toggle, .broodline-card) {
  border-radius: 0;
}

/* Swatch previews show the colour the LCD draws */
html[data-theme="taxi-yellow"] .color-swatch[data-color="#29391f"] {
  background: #29391f;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#32204f"] {
  background: #32204f;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#16465a"] {
  background: #16465a;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#176052"] {
  background: #176052;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#843b2f"] {
  background: #843b2f;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#a55b25"] {
  background: #a55b25;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#702c57"] {
  background: #702c57;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#252a32"] {
  background: #252a32;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#182413"] {
  background: #2e2a12;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#583b83"] {
  background: #583b83;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#267b91"] {
  background: #267b91;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#2d8b68"] {
  background: #2d8b68;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#b3483d"] {
  background: #b3483d;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#b0802d"] {
  background: #b0802d;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#9b477e"] {
  background: #9b477e;
}

html[data-theme="taxi-yellow"] .color-swatch[data-color="#596474"] {
  background: #596474;
}

/* Keep the current keypad focus and fullscreen menu rules in every theme. */
html[data-theme="taxi-yellow"] .phone-key:focus,
html[data-theme="taxi-yellow"] .phone-key:focus-visible { outline: none; }
@media (min-width: 801px) {
  html[data-theme="taxi-yellow"] body.is-fullscreen-mode .app-layout.has-fullscreen-option {
    grid-template-columns: minmax(0, 450px) minmax(0, 1fr);
  }
}