/* ZooLands — the site, in the same cut as the store the owner pointed at: dark blocks with a thick border and a soft
   radius, Poppins, a logo that sits over the header, round copy button, category tiles with an eclipse of light,
   notice boxes with an accent bar, a footer in three columns. The colours are ZooLands' own: the logo's gold and the
   grass green in its base. */
:root {
  --background-gradient: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  --block-color: #232323;
  --block-dark: #1e1e1e;
  --block-light: #2c2c2c;
  --block-border: #2b2b2b;
  --block-border-width: 4px;
  --border-radius: 10px;
  --box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
  --text-primary: #ffffff;
  --text-secondary: #d3d3d3;
  --text-muted: #9a9a9a;
  --primary-color: #f0c030;
  --primary-hover-color: #ffd24a;
  --icon-primary: #3a2400;
  --secondary-color: #7ed957;
  --secondary-hover-color: #95e872;
  --icon-secondary: #163a0b;
  --category-block: #a8741f;
  --category-border: #f0c030;
  --category-light: #c58f2a;
  --positive: #8aef5b;
  --positive-hover: #8cff56;
  --positive-text: #19781f;
  --negative: #ef5b5b;
  --negative-text: #781919;
  --footer-bg: #141414;
  --footer-dark: #0f0f0f;
  --footer-stroke: #0b0b0b;
  --footer-description: #bcc0c0;
  --common: #b7c0b4;
  --uncommon: #5fd16b;
  --rare: #4fa8e8;
  --epic: #b478e8;
  --legendary: #f2c55c;
  --mystic: #ff4b4b;
  --field: #7fc85a;
  --water: #4fa8e8;
  --cave: #b0b0b0;
  --forest: #5fb35f;
  --all: #f0c030;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--text-primary);
  background: var(--background-gradient);
  background-attachment: fixed;
  /* Kept as a last line, not as the fix: the circles that hung off their blocks are taken
     out at phone widths above, so nothing should reach this. Hiding overflow is what stops a
     stray element from showing, and what also silently clips anything genuinely too wide. */
  overflow-x: hidden;
  /* iOS enlarges text in landscape unless told not to, which breaks any layout tuned by width. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--primary-hover-color); }
:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
.text-header { font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.2rem); font-weight: 800; text-transform: uppercase; }
.text-title { font-size: clamp(1.2rem, 1.02rem + 0.9vw, 1.5rem); font-weight: 700; }
.text-subtitle { font-size: 1rem; font-weight: 600; }
.text-desc { font-size: 1rem; font-weight: 300; letter-spacing: 0.05em; line-height: 1.8; }
.text-navigation { font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; line-height: 2; }
.muted { color: var(--text-muted); }
.coin { color: var(--primary-color); font-weight: 700; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
#root { max-width: 1300px; margin: 0 auto; width: 100%; padding: 0 clamp(15px, 4vw, 40px); }

/* Navigation row */
.navigation-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; }
.navigation-left, .navigation-right { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.navigation-link { color: var(--text-secondary); transition: color 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; }
.navigation-link:hover, .navigation-link[aria-current="page"] { color: var(--primary-color); }

/* Header block */
.header-block {
  background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius);
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 90px 0 2rem;
  box-shadow: var(--box-shadow);
  min-height: 140px;
}
.header-left { display: flex; flex-direction: row; gap: 1rem; align-items: center; z-index: 2; }
.header-right { display: flex; gap: 0.75rem; align-items: center; z-index: 2; }
.header-center { position: absolute; left: 50%; top: -84px; transform: translateX(-50%); z-index: 3; }
.store-logo { width: 340px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); display: block; }
.store-title { color: var(--text-primary); }
.store-subtitle { color: var(--secondary-color); }
.btn-copy-ip {
  background: var(--primary-color); border: none; border-radius: 50%; width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-copy-ip:hover { background: var(--primary-hover-color); transform: translateY(-1px); }
.btn-copy-ip i { color: var(--icon-primary); font-size: 1.5rem; }
.header-primary-button, .header-secondary-button, .primary-button, .secondary-button, .footer-primary-button, .footer-secondary-button {
  border: none; border-radius: var(--border-radius); padding: 0.75rem 1.5rem; display: inline-flex; align-items: center;
  justify-content: center; gap: 0.75rem; cursor: pointer; text-decoration: none; font-family: inherit; font-size: 0.95rem;
  font-weight: 700; transition: background-color 0.3s ease, transform 0.2s ease; white-space: nowrap;
}
.header-primary-button, .primary-button, .footer-primary-button { background: var(--primary-color); color: var(--icon-primary); }
.header-primary-button:hover, .primary-button:hover, .footer-primary-button:hover { background: var(--primary-hover-color); transform: translateY(-1px); color: var(--icon-primary); }
.header-secondary-button, .secondary-button, .footer-secondary-button { background: var(--secondary-color); color: var(--icon-secondary); }
.header-secondary-button:hover, .secondary-button:hover, .footer-secondary-button:hover { background: var(--secondary-hover-color); transform: translateY(-1px); color: var(--icon-secondary); }
.primary-button i, .header-primary-button i { color: var(--icon-primary); }
.secondary-button i, .header-secondary-button i { color: var(--icon-secondary); }

/* Grid */
.grid-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.category-grid, .notice-grid, .module-grid { margin-top: 2rem; }

/* Category tiles */
.category-button {
  background: var(--category-block); border: var(--block-border-width) solid var(--category-border); border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
  text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; min-height: 200px; overflow: hidden;
  padding: 2rem; position: relative;
}
.category-button:hover { transform: translateY(-3px); box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.4); }
.category-eclipse { position: absolute; left: -50px; top: 50%; transform: translateY(-50%); width: 350px; height: 350px; background: var(--category-light); border-radius: 50%; pointer-events: none; z-index: 1; }
.category-content { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; z-index: 2; position: relative; }
.category-content h2 { color: var(--text-primary); }
.category-content p { color: var(--text-primary); opacity: 0.9; }
.category-image-container { z-index: 2; position: relative; flex-shrink: 0; }
.category-image-container img, .category-image-container i { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); transition: transform 0.3s ease; image-rendering: pixelated; }
.category-image-container i { display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--text-primary); opacity: 0.9; }
.category-button:hover .category-image-container img { transform: scale(1.1) rotate(1.1deg); }

/* Notice / text boxes */
.textbox-block {
  background: var(--block-color); border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); position: relative; margin-bottom: 2rem; overflow: visible; height: 100%; display: flex; flex-direction: column;
}
.textbox-accent-block { width: 80px; height: 10px; background: var(--secondary-color); border-radius: 0 0 6px 6px; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 10; }
.textbox-accent-block.gold { background: var(--primary-color); }
.textbox-content { position: relative; overflow: hidden; border-radius: var(--border-radius); padding: 3rem 2rem 2rem; flex: 1; }
.textbox-icon-bg { position: absolute; left: -60px; top: -90px; transform: rotate(-15deg); font-size: 18rem; color: var(--block-dark); opacity: 0.7; z-index: 1; pointer-events: none; }
.textbox-header { text-align: center; margin-bottom: 1.5rem; position: relative; z-index: 2; }
.textbox-title { color: var(--text-primary); }
.textbox-description { color: var(--text-secondary); text-align: center; position: relative; font-weight: 500; z-index: 2; }
.textbox-description p + p { margin-top: 1rem; }
.textbox-description strong { color: var(--text-primary); }
.textbox-description.left { text-align: left; }
.textbox-description ul, .textbox-description ol { text-align: left; padding-left: 1.4rem; margin: 0.5rem 0 0; }
.textbox-description li { margin: 0.35rem 0; }
.cmd { font-family: "Courier New", monospace; color: var(--primary-color); background: var(--block-dark); padding: 2px 8px; border-radius: 6px; font-weight: 700; }

/* Category page header (Ranks etc.) */
.category-page-block {
  background: var(--block-color); border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); position: relative; margin-bottom: 2rem;
}
.category-page-accent-block { width: 80px; height: 10px; background: var(--primary-color); border-radius: 0 0 6px 6px; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 10; }
.category-page-header { padding: 3rem 2rem 2rem; text-align: center; }
.category-page-header h1 { color: var(--text-primary); }
.category-page-description { color: var(--text-secondary); margin-top: 0.75rem; max-width: 70ch; margin-left: auto; margin-right: auto; }

/* Featured package blocks */
.featured-package-block {
  background: var(--block-color); border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: row; align-items: center;
  gap: 2rem; padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-package-block:hover { transform: translateY(-3px); box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.4); }
.featured-eclipse { position: absolute; left: -80px; top: 50%; transform: translateY(-50%); width: 320px; height: 320px; background: var(--block-light); border-radius: 50%; pointer-events: none; z-index: 1; }
.featured-image-container { position: relative; z-index: 2; flex-shrink: 0; width: 180px; display: flex; align-items: center; justify-content: center; }
.featured-image { max-width: 180px; max-height: 120px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); image-rendering: pixelated; }
.featured-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-width: 0; }
.featured-title { color: var(--text-primary); }
.featured-tagline { color: var(--text-secondary); font-size: 0.95rem; }
.featured-price { color: var(--primary-color); font-weight: 700; font-size: 1.2rem; }
.featured-perks { list-style: none; padding: 0; margin: 0; color: var(--text-secondary); font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.featured-perks li::before { content: "\2713"; color: var(--positive); font-weight: 800; margin-right: 0.5rem; }
.featured-buttons { display: flex; gap: 0.75rem; margin-top: 0.25rem; flex-wrap: wrap; }

/* Animal cards */
.animal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.animal-card {
  background: var(--block-color); border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius);
  box-shadow: var(--box-shadow); padding: 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animal-card .accent { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 70px; height: 8px; border-radius: 0 0 6px 6px; }
.animal-card .eclipse { position: absolute; right: -90px; top: -90px; width: 220px; height: 220px; border-radius: 50%; background: var(--block-light); pointer-events: none; }
.animal-card > * { position: relative; }
.animal-card h3 { font-size: 1.3rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.animal-card { cursor: default; height: 100%; display: flex; flex-direction: column; }
.animal-card:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.animal-card h3 .named { display: flex; align-items: center; gap: 0.6rem; }
.foods { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.foods .food { width: 22px; height: 22px; image-rendering: pixelated; }
.foods.big { gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.food-chip { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--block-light); border-radius: 6px; padding: 0.25rem 0.6rem 0.25rem 0.35rem; font-size: 0.9rem; color: var(--text-secondary); }
.food-chip .food { width: 20px; height: 20px; }

/* The sheet an animal opens */
#sheet-veil { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: none; align-items: flex-start; justify-content: center; padding: 4rem 1rem; z-index: 1000; overflow-y: auto; }
#sheet-veil.open { display: flex; }
.sheet { background: var(--block-color); border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); width: 100%; max-width: 680px; padding: 1.6rem 2rem 2rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
.sheet-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.sheet-head .head { width: 56px; height: 56px; image-rendering: pixelated; border-radius: 8px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); flex: none; }
.sheet-head h2 { font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.3rem; }
.sheet-head > div { flex: 1; }
.sheet-close { background: var(--block-light); border: 0; color: var(--text-primary); font-size: 1.6rem; line-height: 1; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; align-self: flex-start; }
.sheet-close:hover { background: var(--block-border); }
.sheet h3 { color: var(--primary-color); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 1.4rem 0 0.4rem; }
.sheet p { color: var(--text-secondary); line-height: 1.55; margin: 0 0 0.6rem; }
.sheet .tablewrap { margin-top: 0.2rem; }
.sheet table td:first-child { color: var(--text-muted); width: 8rem; }
@media (max-width: 600px) { #sheet-veil { padding: 1rem 0.5rem; } .sheet { padding: 1.2rem 1.2rem 1.6rem; max-height: calc(100vh - 2rem); } }
.animal-card h3 .head { width: 30px; height: 30px; image-rendering: pixelated; border-radius: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); flex: none; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--block-dark); color: var(--text-secondary); }
.tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.animal-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0.2rem 0 0; font-size: 0.95rem; }
.animal-card dt { color: var(--text-muted); }
.animal-card dd { margin: 0; color: var(--text-secondary); }

.animal-card .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; margin: 0.9rem 0 0.4rem; }
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 0.3rem 0.7rem; align-items: center; font-size: 0.85rem; }
.bar { height: 9px; background: var(--block-dark); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--category-block), var(--primary-color)); }
.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.5rem; }
.filters select, .filters input {
  font: inherit; color: var(--text-primary); background: var(--block-color); border: var(--block-border-width) solid var(--block-border);
  border-radius: var(--border-radius); padding: 0.6rem 0.9rem; min-width: 180px;
}
.rarity-title { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; }
.rarity-title h2 { font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
.rarity-title p { color: var(--text-secondary); }
.c-common { color: var(--common); } .c-uncommon { color: var(--uncommon); } .c-rare { color: var(--rare); } .c-epic { color: var(--epic); } .c-legendary { color: var(--legendary); } .c-mystic { color: var(--mystic); }
.h-field { color: var(--field); } .h-water { color: var(--water); } .h-cave { color: var(--cave); } .h-forest { color: var(--forest); } .h-all { color: var(--all); }

/* Tables */
.tablewrap { overflow-x: auto; margin-top: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--block-border); vertical-align: top; }
th { color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
td.num, th.num { text-align: right; }

/* Boards */
.board ol { list-style: none; padding: 0; margin: 0; counter-reset: rank; position: relative; z-index: 2; }
.board li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--block-border); }
.board li::before { counter-increment: rank; content: "#" counter(rank); color: var(--primary-color); font-weight: 800; width: 2.2rem; }
.board li .who { flex: 1; }
.board li .val { color: var(--primary-color); font-weight: 700; font-variant-numeric: tabular-nums; }
.board li.empty { color: var(--text-muted); }
.online-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.online-list li { display: flex; align-items: center; gap: 0.6rem; }
.online-list img { width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; }
.pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--block-dark); border-radius: 999px; padding: 0.3rem 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 8px var(--positive); }
.pill .dot.off { background: var(--negative); box-shadow: none; }

/* Footer */
.footer { width: 100%; margin-top: 6rem; }
.footer-container { max-width: 1300px; margin: 0 auto; padding: 0 clamp(15px, 4vw, 40px); }
.footer-top { background: var(--footer-bg); padding: 3rem 0; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.footer-section { display: flex; flex-direction: column; gap: 1rem; }
.footer-title { color: var(--text-primary); font-size: 1.4rem; font-weight: 700; }
.footer-description { color: var(--footer-description); font-size: 0.85rem; font-weight: 500; line-height: 1.6; }
.footer-primary-button, .footer-secondary-button { align-self: flex-start; }
.footer-bottom { background: var(--footer-dark); border-top: 12px solid var(--footer-stroke); padding: 2rem 0; }
.footer-bottom-content { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-bottom p { color: var(--footer-description); font-size: 0.9rem; }
.footer-bottom strong { color: var(--text-primary); }
.footer-disclaimer { opacity: 0.7; font-size: 0.85rem; }

/* Toast */
.copy-toast {
  position: fixed; bottom: 30px; right: 30px; background: var(--positive); color: var(--positive-text); border-radius: var(--border-radius);
  padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  z-index: 10000; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.copy-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .col-6, .col-4, .col-3 { grid-column: span 12; }
  .header-block { flex-direction: column; gap: 1.5rem; margin-top: 70px; padding-top: 5rem; }
  .header-center { top: -60px; }
  .store-logo { width: 240px; }
  .footer-grid { grid-template-columns: 1fr; }
  .featured-package-block { flex-direction: column; text-align: center; }
  .featured-buttons { justify-content: center; }
  .text-header { font-size: 1.6rem; }
}

/* ── Tablet, landscape: an iPad Pro is 1024 and reads like a small laptop ── */
@media (max-width: 1100px) {
  .col-3 { grid-column: span 6; }
  .grid-row { gap: 1.2rem; }
  .category-eclipse { width: 260px; height: 260px; left: -70px; }
  .featured-eclipse { width: 240px; height: 240px; left: -90px; }
}

/* ── Tablet, portrait: 768 to 1024, where one column is too plain and three too tight ── */
@media (max-width: 900px) {
  .navigation-row { padding: 0.75rem 0; }
  .textbox-content { padding: 2.5rem 1.5rem 1.5rem; }
  .featured-image-container { width: auto; }
}

/* ── Phones ─────────────────────────────────────────────────────────────────
   The circles go entirely. They are drawn outside their own block on purpose and at this
   width there is nowhere for them to hang, so they were pushing the page sideways and only
   the hidden overflow on <body> kept it from showing — which is a plaster, not a fix. */
@media (max-width: 620px) {
  .category-eclipse, .featured-eclipse, .animal-card .eclipse { display: none; }
  #root { padding: 0 14px; }
  .grid-row { gap: 1rem; }
  .navigation-left, .navigation-right { gap: 0.9rem; }
  .navigation-row { justify-content: center; }
  .text-navigation { font-size: 0.95rem; line-height: 1.4; }
  .textbox-content { padding: 2.2rem 1.1rem 1.2rem; }
  .category-image-container img, .category-image-container i { width: 88px; height: 88px; }
  .featured-package-block { padding: 1.2rem; }
  .featured-image, .featured-image-container { max-width: 140px; }
  .animal-card { padding: 1.1rem; }
  .animal-card dl { grid-template-columns: auto 1fr; gap: 0.2rem 0.6rem; font-size: 0.9rem; }
  table { font-size: 0.88rem; }
  th, td { padding: 0.5rem 0.6rem; }
  .sheet-head .head { width: 44px; height: 44px; }

  /* The filters sat at their natural width and left half the row empty, which on a phone
     reads as a broken layout rather than a tidy one. One per line, full width, and big
     enough to tap. */
  .filters { flex-direction: column; gap: 0.6rem; }
  .filters select, .filters input { width: 100%; min-height: 44px; }

  /* Centred prose is fine across a wide block and poor down a narrow one: every line starts
     in a different place and the eye loses the beginning. Left-aligned below this width, with
     the headings left centred — a heading is short enough to stay readable either way. */
  .textbox-description, .category-page-header p { text-align: left; }
}

/* ── Small phones: 360 and under, where a stray fixed width shows at once ── */
@media (max-width: 400px) {
  #root { padding: 0 10px; }
  .store-logo { width: min(200px, 70vw); }
  .text-desc { letter-spacing: 0.02em; }
  .foods .food { width: 20px; height: 20px; }
}

/* ── Touch ──────────────────────────────────────────────────────────────────
   A finger is about nine millimetres and a mouse pointer is one pixel. Anything that can be
   tapped gets a target it can actually hit, and the hover colours are dropped: on a
   touchscreen a :hover state sticks after the tap and looks like a stuck button. */
@media (hover: none) {
  .navigation-link { padding: 0.35rem 0.1rem; min-height: 44px; display: inline-flex; align-items: center; }
  .btn-copy-ip, .sheet-close { min-width: 44px; min-height: 44px; }
  .animal-card, .category-block { transition: none; }
  .animal-card:hover, .category-block:hover { transform: none; }
}

/* ── iOS ────────────────────────────────────────────────────────────────────
   A fixed background is repainted on every scroll frame on iOS Safari and is the usual
   reason a page there feels like it is dragging. The gradient is nearly flat anyway, so
   nothing is lost by letting it scroll with the page. */
@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }

/* A row of animal faces at the top of a section: decoration, not a list, so it is
   allowed to run off the end on a narrow screen rather than wrapping into a block. */
.headstrip { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0 0 0.9rem; }
.headstrip .head { width: 34px; height: 34px; image-rendering: pixelated; }