:root {
  color-scheme: dark;
  --bg: #0d0d0f;
  --panel: #15151a;
  --panel-2: #1e1e26;
  --panel-3: #252530;
  --text: #e8e8e0;
  --dim: #7a7a80;
  --muted: #55555c;
  --line: #2e2e38;
  --accent: #e8b84b;
  --accent-2: #c4922a;
  --green: #4caf7d;
  --red: #cf4444;
  --orange: #e07b39;
  --blue: #5b9bd5;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* Typography styles matching Pricetracker */
h1, h2, h3, .brand strong, .page-title-banner h1 {
  font-family: 'Georgia', serif;
  font-weight: 700;
  margin: 0;
}

.num, .stat-band strong, .metrics strong, dl dd, .margin-val, .top-val, table td.num {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
}

/* Header & Navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 10px clamp(16px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: blur(16px);
}

.brand-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark, .brand-avatar {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(232, 184, 75, 0.6);
  background: #231d12;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(232, 184, 75, 0.2);
  object-fit: cover;
}

.brand-mark {
  display: grid;
  place-items: center;
  color: var(--accent);
  font-family: 'Georgia', serif;
  font-weight: 800;
  font-size: 1.15rem;
}

.brand strong {
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.1;
}

.brand small {
  display: block;
  color: var(--dim);
  font-size: 0.76rem;
  margin-top: 2px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topnav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--dim);
  font-weight: 500;
  transition: all 150ms ease;
}

.topnav a:hover {
  color: var(--text);
  background: var(--panel-2);
}

.topnav a.active {
  color: var(--accent);
  background: var(--panel-2);
  border-color: rgba(232, 184, 75, 0.35);
}

.nav-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #110f08;
  font-size: 0.75rem;
  font-weight: 700;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  cursor: pointer;
  transition: all 150ms ease;
}

.palette-trigger:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--panel-2);
}

.palette-trigger kbd {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #111215;
  color: var(--accent);
  font-family: monospace;
  font-size: 0.72rem;
}

/* Layout Shell */
.shell {
  width: min(1560px, 100%);
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 36px) 44px;
}

/* Summary Band */
.summary-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow);
}

.dashboard-band-clean {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-band div {
  padding: 16px 18px;
  background: var(--panel);
}

.stat-label {
  display: block;
  color: var(--dim);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary-band strong {
  display: block;
  margin-top: 4px;
  font-size: 1.35rem;
  color: var(--text);
}

.stat-highlight {
  color: var(--accent) !important;
}

/* Alphabetical Letter Bar */
.letter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow-x: auto;
}

.letter-link {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 4px;
  color: var(--dim);
  font-family: monospace;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 120ms ease;
}

.letter-link:hover {
  color: var(--text);
  background: var(--panel-2);
}

.letter-link.active {
  color: #110f08;
  background: var(--accent);
  font-weight: 700;
}

/* Workspace Grid */
.workspace {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  margin-top: 20px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 16px;
}

.sidebar-watchlist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
}

.sidebar-watchlist.active, .sidebar-watchlist:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

.watchlist-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
}

.sidebar-watchlist strong {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #110f08;
  font-size: 0.8rem;
  font-weight: 700;
}

.filters {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.filters label {
  display: grid;
  gap: 5px;
}

.filters span {
  color: var(--dim);
  font-size: 0.78rem;
  font-weight: 500;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

input, select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111215;
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  transition: border-color 150ms ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

.filter-buttons {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.primary, .secondary, .pager a, .back-link, .watch-button, .view-btn, .ext-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

.primary {
  flex: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #110f08;
  font-weight: 700;
}

.primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.secondary {
  color: var(--dim);
}

.secondary:hover {
  color: var(--text);
  background: var(--panel-2);
}

.console-list {
  max-height: calc(100vh - 460px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.console-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
}

.console-list a:last-child {
  border-bottom: 0;
}

.console-list a.active, .console-list a:hover {
  color: var(--text);
  background: var(--panel-2);
}

.console-list a.active {
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

.console-list small {
  color: var(--muted);
  font-family: monospace;
}

/* Main Library Section */
.library {
  min-width: 0;
}

.library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.library-head h1 {
  font-size: 1.8rem;
  color: var(--text);
}

.library-head p {
  color: var(--dim);
  margin-top: 2px;
}

.head-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.view-switcher {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111215;
}

.view-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--dim);
  font-size: 0.82rem;
  gap: 6px;
}

.view-btn.active {
  background: var(--panel-2);
  color: var(--accent);
  font-weight: 700;
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pager a.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Game Cards Grid */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.game-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.game-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 184, 75, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cover-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: #111215;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.cover-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111215;
}

.no-cover-placeholder {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.cover-frame.missing .no-cover-placeholder,
.large-cover.missing .no-cover-placeholder {
  display: flex;
}

.game-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.game-title {
  display: -webkit-box;
  min-height: 38px;
  overflow: hidden;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 700;
  color: var(--text);
}

.game-console-name {
  color: var(--dim);
  font-size: 0.78rem;
}

.card-metrics-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}

.card-metrics-dl div {
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #111215;
  text-align: center;
}

dt {
  color: var(--dim);
  font-size: 0.68rem;
  text-transform: uppercase;
}

dd {
  margin: 2px 0 0;
  font-size: 0.85rem;
}

.sell-val {
  color: var(--text);
  font-weight: 700;
}

.market-val {
  color: var(--accent);
  font-weight: 700;
}

.margin-val {
  font-weight: 700;
}

.margin-high { color: var(--green); }
.margin-mid  { color: var(--accent); }
.margin-low  { color: var(--red); }

.card-external-links {
  display: flex;
  gap: 4px;
}

.card-external-links a {
  flex: 1;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #111215;
  color: var(--dim);
  font-size: 0.72rem;
  transition: all 120ms ease;
}

.card-external-links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.watch-button {
  width: 100%;
  color: var(--accent);
  margin-top: 4px;
}

.watch-button.is-added {
  border-color: rgba(76, 175, 125, 0.5);
  color: var(--green);
  background: rgba(76, 175, 125, 0.08);
}

/* Data Table Sheet */
.sheet-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.watchlist-sheet {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.watchlist-sheet th, .watchlist-sheet td {
  padding: 10px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.watchlist-sheet th {
  background: #18191e;
  color: var(--accent);
  font-family: 'Georgia', serif;
  font-size: 0.82rem;
  font-weight: 700;
}

.watchlist-sheet tfoot th {
  background: #131417;
  color: var(--text);
}

.watchlist-sheet tbody tr:nth-child(even) td {
  background: #111215;
}

.watchlist-sheet tbody tr:hover td {
  background: var(--panel-2);
}

.sheet-title {
  color: var(--text);
  font-weight: 700;
}

.sheet-empty {
  text-align: center !important;
  color: var(--dim);
  padding: 40px !important;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.76rem;
}

.console-badge {
  border: 1px solid var(--line);
  background: #111215;
  color: var(--dim);
}

.table-links {
  display: flex;
  gap: 4px;
}

.table-links a {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.72rem;
  color: var(--dim);
}

.table-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.compact-watch {
  min-height: 28px;
  width: 28px;
  padding: 0;
}

/* Detail View */
.detail-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.detail-cover {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 14px;
}

.large-cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #111215;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.large-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.external-search-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: grid;
  gap: 8px;
}

.external-search-box h3 {
  font-size: 0.9rem;
  color: var(--dim);
  margin-bottom: 4px;
}

.ext-btn {
  justify-content: flex-start;
  color: var(--text);
}

.ext-btn.pc { border-color: rgba(232, 184, 75, 0.4); color: var(--accent); }
.ext-btn.tradera { border-color: rgba(91, 155, 213, 0.4); color: var(--blue); }

.detail-main {
  min-width: 0;
}

.console-tag {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sub-title {
  color: var(--dim);
  margin-top: 4px;
}

.metrics-2col, .metrics-3col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.metrics div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.history-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}

.info-grid > div, .history-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.detail-list {
  display: grid;
  gap: 8px;
}

.detail-list div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
}

.notes {
  color: var(--text);
  line-height: 1.5;
}

/* Dashboard View */
.page-title-banner {
  margin-bottom: 20px;
}

.page-title-banner h1 {
  font-size: 2rem;
}

.page-title-banner p {
  color: var(--dim);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.main-card {
  grid-column: span 2;
}

.dashboard-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.top-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.top-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111215;
}

.top-item:hover {
  border-color: var(--accent);
  background: var(--panel-2);
}

.top-title {
  display: block;
  color: var(--text);
}

.top-console {
  color: var(--dim);
  font-size: 0.78rem;
}

.top-val {
  font-weight: 700;
  color: var(--accent);
}

/* Command Palette Modal */
.palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.palette-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.palette-dialog {
  width: min(640px, 100%);
  max-height: 520px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.palette-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #111215;
}

.palette-header input {
  flex: 1;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
}

.palette-header input:focus {
  outline: none;
}

.palette-esc {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--dim);
  font-size: 0.72rem;
}

.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.palette-hint {
  padding: 24px;
  text-align: center;
  color: var(--dim);
}

.palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--text);
  transition: background 120ms ease;
}

.palette-item:hover, .palette-item.selected {
  background: var(--panel-2);
}

.palette-item strong {
  display: block;
}

.palette-item small {
  color: var(--dim);
}

.palette-item-price {
  font-family: monospace;
  color: var(--accent);
  font-weight: 700;
}

.danger-button {
  color: var(--red);
}

.danger-button:hover {
  background: rgba(207, 68, 68, 0.15);
  border-color: var(--red);
}

/* Console Quick-Pill Bar (Hidden on desktop where the left sidebar already has the full console list) */
.console-pill-bar {
  display: none;
}

.console-pill-bar::-webkit-scrollbar {
  height: 4px;
}

.console-pill-bar::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.console-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 120ms ease;
  user-select: none;
}

.console-pill:hover {
  color: var(--text);
  background: var(--panel-2);
  border-color: rgba(232, 184, 75, 0.4);
}

.console-pill.active {
  color: #110f08;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.pill-count {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-family: monospace;
  font-size: 0.75rem;
}

.console-pill.active .pill-count {
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
}

/* Search input with clear button */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrap input {
  width: 100%;
  padding-right: 28px;
}

.search-clear-btn {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--dim);
  font-size: 0.75rem;
  transition: color 120ms ease;
}

.search-clear-btn:hover {
  color: var(--accent);
}

/* Back to Top Floating Button */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--panel-3);
  border-color: var(--accent);
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .summary-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-band-clean { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace, .detail-layout, .dashboard-grid { grid-template-columns: 1fr; }
  .sidebar, .detail-cover { position: static; }
  .history-grid-2col { grid-template-columns: 1fr; }

  /* On mobile / tablet, show the horizontal scrollable console pills and hide vertical sidebar list */
  .console-pill-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 0;
    margin-bottom: 8px;
    padding: 4px 2px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar .console-list {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 10px;
  }
  .brand-group { flex: 1; }
  .palette-trigger kbd { display: none; }
  .topnav { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .shell { padding: 12px 12px 60px; }
  .summary-band { grid-template-columns: 1fr; }
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .card-metrics-dl {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .metrics, .metrics-3col, .info-grid { grid-template-columns: 1fr; }
}