diff --git a/src/App.css b/src/App.css
index f4bb3b5..5e842db 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,66 @@
-/* Keep desktop layout as established */
-* {
-  text-align: center;
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Standard syntax */
+:root {
+  --bg: #eef1f6;
+  --panel: #ffffff;
+  --text: #1f2430;
+  --muted: #6b7280;
+  --border: #e3e7ee;
+  --accent: #3b6ef5;
+  --accent-soft: #e8efff;
+  --radius: 12px;
+  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
 body {
-  overflow: hidden;
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
 }
 
+/* Sprites are decorative, so stop them being dragged out of the page.
+   Text stays selectable */
 img {
-  pointer-events: none;
   -webkit-user-drag: none;
   user-drag: none;
 }
 
+button {
+  font-family: inherit;
+}
+
 .app-layout {
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  justify-self: center;
   justify-content: center;
-  height: 100vh;
-  width: 90%;
-  box-sizing: border-box;
+  gap: 12px;
+  padding: 12px;
+  width: min(100%, 1600px);
+  margin: 0 auto;
+  /* dvh rather than vh so mobile browser chrome does not cut the page off */
+  height: 100dvh;
 }
 
 .app-layout > div {
-  border: 1px solid #ccc;
-  padding: 10px;
-  box-sizing: border-box;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 12px;
   display: flex;
   min-height: 0;
+  min-width: 0;
 }
 
 .app-layout > #pokemonList {
@@ -44,6 +72,8 @@ img {
   order: 2;
   flex: 2;
   flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .app-layout > #favoritePokemon {
@@ -51,72 +81,141 @@ img {
   flex: 1;
 }
 
-.toggle-yellow-btn {
-  margin-bottom: 8px;
-  align-self: flex-end;
-  cursor: pointer;
-  padding: 4px 8px;
-}
-
-input {
-  width: 25%;
-}
-
 .row {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 8px;
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
 }
 
 .nav {
   display: flex;
   gap: 6px;
+  align-items: center;
   justify-content: center;
 }
 
-@media (max-width: 1000px) {
-  body {
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
-    overflow: scroll;
-  }
+.nav button,
+.filter summary,
+.filter-reset {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.nav button:hover:not(:disabled),
+.filter summary:hover,
+.filter-reset:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.nav button:disabled {
+  color: #b6bcc7;
+  cursor: default;
+}
+
+.nav input {
+  width: 68px;
+  text-align: center;
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.app-layout h2 {
+  margin: 0 0 10px;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--muted);
+  text-align: center;
+}
 
+.app-layout [role="status"],
+.app-layout [role="alert"] {
+  text-align: center;
+  color: var(--muted);
+  padding: 24px 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Stack the three panels once there is no room for columns */
+@media (max-width: 1000px) {
   .app-layout {
     flex-direction: column;
-    width: 100%;
     height: auto;
-    align-items: stretch;
+    min-height: 100dvh;
   }
 
   .app-layout > div {
-    flex: 0 0 auto !important;
-    width: 100% !important;
-    height: auto !important;
-    min-height: 0;
+    flex: 0 0 auto;
+    width: 100%;
+    height: auto;
   }
 
-  /* Explicit stack order: Card -> List -> Favorite */
-  #pokemonCard {
+  .app-layout > #pokemonList {
     order: 1;
   }
 
-  #pokemonList {
+  .app-layout > #pokemonCard {
     order: 2;
-    height: auto !important;
+    overflow-y: visible;
   }
 
-  #favoritePokemon {
+  .app-layout > #favoritePokemon {
     order: 3;
   }
+}
+
+/* A phone in landscape has the width for columns but nowhere near the
+   height to stack, so keep the row and let each panel scroll on its own */
+@media (max-height: 600px) and (orientation: landscape) {
+  .app-layout {
+    flex-direction: row;
+    height: 100dvh;
+    min-height: 0;
+  }
+
+  .app-layout > div {
+    flex: 1;
+    width: auto;
+    height: auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .app-layout > #pokemonCard {
+    flex: 2;
+  }
+}
+
+@media (max-width: 600px) {
+  .app-layout {
+    gap: 8px;
+    padding: 8px;
+  }
+
+  .app-layout > div {
+    padding: 10px;
+  }
 
-  /* Disable inner scroll constraints and let blocks expand full vertical height */
-  .pokemon-list,
-  .favorite-list {
-    max-height: none !important;
-    overflow-y: visible !important;
-    flex: 0 0 auto !important;
+  .row {
+    flex-wrap: wrap;
+    justify-content: center;
   }
 }
diff --git a/src/components/FavoritePokemon/FavoritePokemon.css b/src/components/FavoritePokemon/FavoritePokemon.css
index 9f840b2..bed3a94 100644
--- a/src/components/FavoritePokemon/FavoritePokemon.css
+++ b/src/components/FavoritePokemon/FavoritePokemon.css
@@ -1,90 +1,99 @@
 .favorite-container {
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  min-width: 0;
+  min-height: 0;
   margin: 0;
-  overflow: hidden;
 }
 
 .favorite-list {
   list-style-type: none;
   margin: 0;
+  padding: 2px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  max-height: 95%;
-  box-sizing: border-box;
-  background: #f8f9fa;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  overflow: scroll !important;
-  -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
+  gap: 6px;
+  /* Same flex item rule as the pokemon list, it has to be allowed to shrink
+     under its content before it will scroll */
+  flex: 1;
+  min-height: 0;
+  max-height: 100%;
+  overflow-y: auto;
 }
 
-.favorite-list .selected {
-  border-color: #007bff;
-  background: #e6f2ff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+.favorite-empty {
+  color: var(--muted);
+  font-size: 14px;
+  text-align: center;
+  margin: 0;
+  padding: 8px 0;
 }
 
 /* Rendered as a <button> so the list is reachable by keyboard */
 .favorite-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 6px;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
   text-align: left;
-  font-family: sans-serif;
   width: 100%;
-  box-sizing: border-box;
-  font-size: inherit;
+  font-size: 14px;
+  color: var(--text);
 }
 
 .favorite-item:hover {
-  background: #f0f0f0;
-  transform: translateY(-1px);
+  background: #f5f8ff;
+  border-color: #c9d8fb;
 }
 
-.favorite-item:focus-visible {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
-
-.favorite-empty {
-  color: #888;
-  font-size: 14px;
+.favorite-list .selected {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 600;
 }
 
 .favorite-sprite {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   object-fit: contain;
-  margin-right: 0;
+  image-rendering: pixelated;
 }
 
 .favorite-info {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   flex: 1;
+  min-width: 0;
 }
 
 .dex-number {
   font-size: 12px;
-  color: #888;
-  font-weight: bold;
-  min-width: 35px;
+  color: var(--muted);
+  font-weight: 600;
+  min-width: 34px;
+  font-variant-numeric: tabular-nums;
 }
 
 .favorite-item .pokemon-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
   text-transform: capitalize;
-  font-family: sans-serif;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Stacked layout, so cap the list instead of letting it run down the page */
+@media (max-width: 1000px) {
+  .favorite-list {
+    max-height: 38vh;
+    overflow-y: auto;
+  }
 }
diff --git a/src/components/PokemonCard/PokemonCard.css b/src/components/PokemonCard/PokemonCard.css
index 42e23ca..c7fa76d 100644
--- a/src/components/PokemonCard/PokemonCard.css
+++ b/src/components/PokemonCard/PokemonCard.css
@@ -1,88 +1,89 @@
 .pokemon-card {
-  flex-direction: column;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  font-family: sans-serif;
-  padding: 24px;
   width: 100%;
-  box-sizing: border-box;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 560px;
   margin: 0 auto;
+  padding: 8px 4px 16px;
 }
 
 .pokemon-card h1 {
   text-align: center;
-  margin-bottom: 10px;
+  margin: 0;
+  font-size: 30px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
-.pokemon-card h1,
-.pokemon-card strong,
-.pokemon-card span {
-  -ms-user-select: text;
-  -webkit-user-select: text;
-  user-select: text;
+/* Sits behind the sprite so it does not float on plain white */
+.sprite-button {
+  background: radial-gradient(circle at 50% 55%, var(--accent-soft), #fff 70%);
+  border: none;
+  border-radius: 50%;
+  padding: 0;
+  margin: 4px 0 16px;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  width: 190px;
+  height: 190px;
 }
 
 .pokemon-card img {
   display: block;
-  margin: 0 auto 20px auto;
-  width: 120px;
-  height: 120px;
+  width: 150px;
+  height: 150px;
+  image-rendering: pixelated;
 }
 
 .general-info {
   width: 100%;
-  background: #f8f9fa;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 24px;
+  background: #f7f9fc;
+  border: 1px solid var(--border);
+  padding: 14px 16px;
+  border-radius: var(--radius);
+  margin-bottom: 20px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .info-row {
   display: flex;
   align-items: flex-start;
-  /* align-items: center; */
-  gap: 8px;
+  gap: 10px;
   font-size: 14px;
 }
 
+.info-row strong {
+  min-width: 72px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
 .abilities {
   text-align: left;
   white-space: pre-line;
   display: block;
-}
-
-/* Wraps the sprite so it can be cycled with a keyboard */
-.sprite-button {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  display: inline-block;
-}
-
-.sprite-button:focus-visible {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
+  text-transform: capitalize;
 }
 
 .type-badges {
   display: flex;
   gap: 6px;
+  flex-wrap: wrap;
 }
 
 .type-badge {
   background: #333;
-  color: white;
-  padding: 2px 8px;
-  border-radius: 12px;
+  color: #fff;
+  padding: 3px 10px;
+  border-radius: 999px;
   font-size: 12px;
+  font-weight: 600;
   text-transform: capitalize;
+  letter-spacing: 0.02em;
 }
 
 .stats-table {
@@ -98,15 +99,11 @@
   display: contents;
 }
 
-.stats-table tr {
-  border-bottom: 1px solid #eee;
-}
-
 .stats-table th {
-  padding: 8px 4px;
+  padding: 7px 4px;
   font-weight: normal;
-  color: #666;
-  font-size: 14px;
+  color: var(--muted);
+  font-size: 13px;
 }
 
 .cell-num {
@@ -118,43 +115,55 @@
 }
 
 .stats-table th.cell-num:nth-child(1) {
+  justify-self: start;
   text-align: left;
-  color: #666;
   font-weight: 500;
 }
 
 .stats-table th.cell-num:nth-child(2) {
-  font-weight: bold;
-  color: #333;
+  font-weight: 700;
+  color: var(--text);
+  min-width: 34px;
+  justify-content: flex-end;
 }
 
+/* A track behind the fill, so a low stat still reads as a proportion */
 .cell-barchart {
+  position: relative;
   grid-column: 3;
-  padding: 0 12px;
-  overflow: hidden;
+  padding: 0 14px;
   display: flex;
   align-items: center;
 }
 
-.cell-barchart > div {
-  height: 4px;
-  width: 100%;
-  border-radius: 3px;
-  margin: 8px 0;
-  padding: 6px;
+.cell-barchart::before {
+  content: "";
+  position: absolute;
+  width: calc(100% - 28px);
+  height: 8px;
+  border-radius: 999px;
+  background: #e9edf4;
 }
 
-.stats-table tfoot tr {
-  border-bottom: none;
+.cell-barchart > div {
+  position: relative;
+  height: 8px;
+  border-radius: 999px;
+  min-width: 8px;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .stats-table tfoot th {
-  color: #333;
-  font-weight: bold !important;
+  color: var(--text);
+  font-weight: 700 !important;
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
 }
 
 .stats-table tfoot th:nth-child(1) {
   grid-column: 1;
+  justify-self: start;
   text-align: left;
 }
 
@@ -172,3 +181,42 @@
   grid-column: 5;
   text-align: right;
 }
+
+@media (max-width: 600px) {
+  .pokemon-card h1 {
+    font-size: 24px;
+  }
+
+  .sprite-button {
+    width: 150px;
+    height: 150px;
+  }
+
+  .pokemon-card img {
+    width: 118px;
+    height: 118px;
+  }
+}
+
+/* A short screen has no height to spare, so shrink the sprite and heading
+   to bring the stats above the fold */
+@media (max-height: 600px) and (orientation: landscape) {
+  .pokemon-card h1 {
+    font-size: 20px;
+  }
+
+  .sprite-button {
+    width: 110px;
+    height: 110px;
+    margin: 2px 0 10px;
+  }
+
+  .pokemon-card img {
+    width: 88px;
+    height: 88px;
+  }
+
+  .general-info {
+    margin-bottom: 14px;
+  }
+}
diff --git a/src/components/PokemonList/PokemonList.css b/src/components/PokemonList/PokemonList.css
index 2bb561e..ebffa1b 100644
--- a/src/components/PokemonList/PokemonList.css
+++ b/src/components/PokemonList/PokemonList.css
@@ -1,76 +1,139 @@
 .pokemon-list {
+  /* offsetTop and offsetLeft of the entries are measured against this */
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
+  /* A flex item will not shrink under its content without these, and then
+     overflow has nothing to scroll */
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   max-height: 100%;
-  box-sizing: border-box;
   overflow: auto;
   width: 100%;
-  background: #f8f9fa;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  padding: 2px;
 }
 
-.pokemon-list-empty {
+.pokemon-list-empty,
+.pokemon-list-loading {
   padding: 24px;
   text-align: center;
-  color: #666;
-  font-family: sans-serif;
+  color: var(--muted);
+  font-size: 14px;
 }
 
 .pokemon-list-item {
   width: 100%;
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 6px;
+  gap: 10px;
+  padding: 6px 10px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 10px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
   text-align: left;
-  font-family: sans-serif;
+  font-size: 14px;
+  color: var(--text);
 }
 
 .pokemon-list-item:hover {
-  background: #f0f0f0;
-  transform: translateY(-1px);
+  background: #f5f8ff;
+  border-color: #c9d8fb;
 }
 
 .pokemon-list-item.selected {
-  border-color: #007bff;
-  background: #e6f2ff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  font-weight: 600;
 }
 
 .pokemon-list-item img {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   object-fit: contain;
+  image-rendering: pixelated;
 }
 
 .pokemon-id {
   font-size: 12px;
-  color: #888;
-  font-weight: bold;
-  min-width: 35px;
+  color: var(--muted);
+  font-weight: 600;
+  min-width: 34px;
+  font-variant-numeric: tabular-nums;
 }
 
 .pokemon-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
   text-transform: capitalize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+/* Stacked layout turns the list into a strip that scrolls sideways */
 @media (max-width: 1000px) {
   .pokemon-list {
     flex-direction: row;
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox, Safari 18.2+, Chromium 121+ */
-    height: 10vh;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: auto;
+    max-height: none;
+    gap: 8px;
+    /* room for the scrollbar under the entries */
+    padding-bottom: 10px;
+    scroll-snap-type: x proximity;
+  }
+
+  .pokemon-list-item {
+    flex: 0 0 auto;
+    width: 72px;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 4px;
+    text-align: center;
+    scroll-snap-align: center;
+  }
+
+  .pokemon-list-item .pokemon-name {
+    font-size: 11px;
+    max-width: 100%;
+  }
+
+  .pokemon-list-item img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .pokemon-list-item:hover {
+    background: var(--panel);
+  }
+
+  .pokemon-list-item.selected:hover {
+    background: var(--accent-soft);
+  }
+}
+
+/* Back to a column when the row layout returns in landscape */
+@media (max-height: 600px) and (orientation: landscape) {
+  .pokemon-list {
+    flex-direction: column;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 100%;
+  }
+
+  .pokemon-list-item {
+    width: 100%;
+    flex-direction: row;
+    text-align: left;
+    padding: 6px 10px;
+  }
+
+  .pokemon-list-item .pokemon-name {
+    font-size: 13px;
   }
 }