/* NebulaMC — 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 NebulaMC's own: the purple ramp of the badges and the
   grass green in its base. */
:root {
  --background-gradient: linear-gradient(180deg, #17121f 0%, #120f18 100%);
  --block-color: #201a2b;
  --block-dark: #1a1524;
  --block-light: #2a2238;
  --block-border: #312747;
  --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: #b47bff;
  --primary-hover-color: #c79bff;
  --icon-primary: #1b0b33;
  --secondary-color: #7c45d6;
  --secondary-hover-color: #9159e8;
  --icon-secondary: #f0e6ff;
  --category-block: #4b2a86;
  --category-border: #b47bff;
  --category-light: #7c45d6;
  --positive: #8aef5b;
  --positive-hover: #8cff56;
  --positive-text: #19781f;
  --negative: #ef5b5b;
  --negative-text: #781919;
  --footer-bg: #150f1d;
  --footer-dark: #100b17;
  --footer-stroke: #0c0812;
  --footer-description: #bcc0c0;
  --common: #b7c0b4;
  --uncommon: #5fd16b;
  --rare: #4fa8e8;
  --epic: #b478e8;
  --legendary: #f2c55c;
  --mystic: #ff4b4b;
  --field: #7fc85a;
  --water: #4fa8e8;
  --cave: #b0b0b0;
  --forest: #5fb35f;
  --all: #b47bff;
}
* { 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; }
/* Op hoogte, niet op breedte: een woordmerk is breed en laag en een wapen is bijna
   vierkant, en een vaste breedte maakt van het tweede een reus. */
.store-logo { height: 150px; width: auto; max-width: 320px; object-fit: contain;
  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 { height: 100px; max-width: 220px; }
  .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; }

/* ── Players ────────────────────────────────────────────────────────────────
   The search, and the page one player gets. Built out of the pieces the rest of the site
   already uses — the dark block with the thick border, the accent bar, the eclipse behind a
   figure — so a profile reads as part of NebulaMC rather than as a tool bolted to the side. */

.search-row { display: flex; gap: 0.75rem; align-items: center; margin: 0 0 1.5rem; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field i {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; font-size: 1.05rem;
}
.search-field input {
  font: inherit; font-weight: 500; width: 100%; color: var(--text-primary); background: var(--block-color);
  border: var(--block-border-width) solid var(--block-border); border-radius: var(--border-radius);
  padding: 0.9rem 1rem 0.9rem 3rem; min-height: 56px;
}
.search-field input::placeholder { color: var(--text-muted); font-weight: 400; }
.search-field input:focus { border-color: var(--primary-color); outline: none; }
.search-count { color: var(--text-muted); font-size: 0.9rem; white-space: nowrap; }

.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; }
.player-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.1rem 1.2rem;
  display: flex; align-items: center; gap: 0.9rem; text-decoration: none; overflow: hidden; position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.player-card:hover { transform: translateY(-3px); border-color: var(--block-light); box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.4); }
.player-card .face { width: 52px; height: 52px; border-radius: 8px; image-rendering: pixelated; flex: none; background: var(--block-dark); }
.player-card .who { min-width: 0; flex: 1; }
/* The name gives way before the chip does: a rank cut in half reads as a broken page, and a
   long name with its end trimmed reads as a long name. */
.player-card .who b { display: flex; align-items: center; gap: 0.45rem; color: var(--text-primary); font-weight: 700; font-size: 1.05rem; min-width: 0; }
.player-card .who b .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.player-card .who b .rank-chip { flex: none; }
.player-card .who span { display: block; color: var(--text-muted); font-size: 0.85rem; }
.player-card .live { width: 9px; height: 9px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 8px var(--positive); flex: none; }

/* The rank chip: the colours the resource pack draws the badge in, read from players.json. */
.rank-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; background: var(--block-light); color: var(--text-secondary); vertical-align: middle;
}

/* ── One player ── */
/* The player's card IS the header on that page, so it carries the logo overhang the header
   block carries everywhere else. The logo is a child of this wrapper rather than of the card
   itself, because the card clips its own overflow to hold the eclipse in. */
/* Standing above the card, not hanging over it. Everywhere else the logo overhangs a
   header block that is mostly empty in the middle; this card is full to the top, and an
   overhang landed the logo on the player's own figures.

   Its own class rather than the header block's `header-center`, which is absolutely
   positioned at top:-84px. Borrowing that class meant a browser still holding yesterday's
   stylesheet drew this logo straight over the navigation row (the owner, 2026-09-26: "now
   its infront of te fucking players thing"). An unknown class just flows. */
.profile-hero { position: relative; }
.page-logo { text-align: center; margin: 0 0 1.4rem; }
.page-logo img { width: 260px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
.profile-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;
  display: flex; gap: 2.5rem; padding: 2.5rem 2rem 2rem; align-items: center; overflow: hidden;
}
/* Behind the figure and nothing else: 420px of it reached across the name and the first
   tile, and because it is darker than the card it read as a smudge. */
.profile-eclipse { position: absolute; left: -90px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; background: var(--block-light); opacity: 0.35; border-radius: 50%; pointer-events: none; }
.profile-skin { position: relative; z-index: 2; flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.profile-skin img { height: 230px; width: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
.profile-about { position: relative; z-index: 2; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.profile-name { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.profile-name h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight: 800; }
.profile-seen { color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.profile-seen .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.profile-seen .dot.on { background: var(--positive); box-shadow: 0 0 8px var(--positive); }

/* The four figures that answer "how is this player doing" before anything is read. */
.headline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
/* Direct children only. Plain `.headline div` also caught the progress bar nested inside a
   tile: it handed the bar the tile's 0.9rem padding, border-box ate its 8px of height, and
   the bar drew nothing at all from the day it was written. */
.headline > div { background: var(--block-dark); border-radius: var(--border-radius); padding: 0.9rem 1rem; min-width: 0; }
.headline .key { display: block; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.headline .val { display: block; font-size: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); font-weight: 800; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.headline .val.gold { color: var(--primary-color); }
.level-bar { margin-top: 0.5rem; height: 8px; background: var(--block-color); border-radius: 999px; overflow: hidden; }
.level-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--category-block), var(--primary-color)); }

/* The counts, in the same groups /profile shows them in. A tighter box than the notice
   blocks these are cut from: a list of figures does not want a notice's breathing room. */
/* The gap between the cards is the grid's, not a margin's. The notice blocks carry a
   2rem margin AND stretch to the row, so each one was padded out by its neighbour's
   margin and every card ended in a band of nothing. */
.textbox-block.stats { margin-bottom: 0; }
.textbox-block.stats .textbox-content { padding: 2.4rem 1.6rem 1.4rem; }
.textbox-block.stats .textbox-header { margin-bottom: 1rem; }
.stat-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 2; }
.stat-list li { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--block-border); }
.stat-list li:last-child { border-bottom: 0; }
.stat-list .key { flex: 1; color: var(--text-secondary); }
.stat-list .val { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-list .val.gold { color: var(--primary-color); }
.crumb { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.crumb:hover { color: var(--primary-color); }

@media (max-width: 900px) {
  .page-logo img { width: 200px; }
  .profile-block { flex-direction: column; text-align: center; gap: 1.5rem; padding: 2rem 1.2rem 1.5rem; }
  .profile-name, .profile-seen { justify-content: center; }
  .headline { grid-template-columns: repeat(2, 1fr); }
  .profile-eclipse { display: none; }
}
@media (max-width: 620px) {
  .search-row { flex-direction: column; align-items: stretch; }
  .search-count { text-align: right; }
  .profile-skin img { height: 180px; }
  .player-grid { gap: 0.9rem; }
  .stat-list .key { font-size: 0.95rem; }
}