/* The shop and collection pages: soft and rounded - pinks, creams, duck yellow and pond blues -
   with a little retro left in: pixel numbers, pixel art, chunky "pressable" bottom edges and a
   drifting diamond pattern behind it all.
   Colours are the tokens below; images go in the --skin-* slots (see skin/README.md and
   css/skin.css) - every slot is empty by default and the pages look finished without them. */

:root {
  --ink: #3b1d3f;
  --ink-soft: #7d5c7a;
  --cream: #fff8f0;
  --cream-2: #fdefe8;
  --cream-3: #f3dcd6;
  --line: #f6c4d8;
  --line-2: #eba5c3;
  --pink-1: #ffe4ef;
  --pink-1b: #ffd8e9;
  --pink: #f9a9ca;
  --pink-2: #ef86b3;
  --pink-3: #c95388;
  --blue: #8fd0f6;
  --blue-2: #5fb3e6;
  --blue-pale: #d9f0fd;
  --yellow: #ffd866;
  --yellow-2: #ecb63a;
  --reed: #9be08a;
  --reed-2: #3f9a3d;
  --danger: #ff5d6c;
  --white: #ffffff;

  --radius: 18px;
  --radius-sm: 12px;
  --lift: 0 4px 0 rgba(201, 83, 136, 0.16);
  --lift-sm: 0 3px 0 rgba(201, 83, 136, 0.16);
  --font: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-num: 'Jersey 10', 'Courier New', monospace;
  --tile: 64px;

  --skin-page: none;
  --skin-panel: none;
  --skin-card: none;
  --skin-card-back: none;
  --skin-banner: none;
  --skin-tab: none;
  --skin-price: none;
  --skin-button: none;
  --skin-stamp: none;
  --skin-silhouette: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }
html { font-size: 17px; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--pink-1);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* The background: pink diamonds drifting up and to the right one tile at a time so it loops
   seamlessly. Moved with a transform, so it costs next to nothing to animate. */
body::before {
  content: ''; position: fixed; inset: calc(var(--tile) * -1); z-index: -2; pointer-events: none;
  background:
    linear-gradient(135deg, var(--pink-1b) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
    linear-gradient(225deg, var(--pink-1b) 25%, transparent 25%) calc(var(--tile) / -2) 0 / var(--tile) var(--tile),
    linear-gradient(315deg, var(--pink-1b) 25%, transparent 25%) 0 0 / var(--tile) var(--tile),
    linear-gradient(45deg, var(--pink-1b) 25%, transparent 25%) 0 0 / var(--tile) var(--tile),
    var(--pink-1);
  animation: drift 4s linear infinite; /* fast enough that the one-pixel steps read as motion; much slower and they show as jitter */
  will-change: transform; /* its own layer, so it glides by fractions of a pixel instead of hopping */
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--skin-page) center / cover no-repeat;
}
/* Plain pixels (one --tile), not var(): keyframes with variables can't run on the compositor, and
   on the main thread the drift stutters whenever anything else on the page is busy. */
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(64px, -64px, 0); } }

button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; image-rendering: pixelated; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Layout ---------------------------------------------------------------------------- */

.app { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 14px 16px 48px; }

.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px 8px 18px;
  background: var(--skin-banner), var(--cream); background-size: cover;
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 1 1 0; font-size: 1.35rem; font-weight: 600; white-space: nowrap; }
.brand-duck { display: block; width: auto; height: 46px; margin: -6px 0; animation: bob 3s ease-in-out infinite; }

.tabs { display: flex; gap: 6px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 999px;
  background: var(--skin-tab), transparent; background-size: cover;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.05rem;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.tab:hover { background-color: var(--cream-2); }
.tab[aria-current='page'] { background-color: var(--blue); box-shadow: 0 3px 0 var(--blue-2); }

.tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 1 1 0; }

/* --- Chips & buttons ------------------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--cream-2); color: var(--ink);
  white-space: nowrap;
}
.chip[hidden] { display: none; }
.balance { background: none; font-family: var(--font-num); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.balance .amount { display: inline-block; min-width: 3ch; }
.balance .coin { font-family: var(--font); font-size: 1.2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 18px; border: 0; border-radius: 999px;
  background: var(--skin-button), var(--yellow); background-size: cover;
  font-size: 1.05rem; font-weight: 500; color: var(--ink); cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 0 var(--yellow-2);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
  user-select: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 5px 0 var(--yellow-2); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-2); }
.btn:disabled { cursor: not-allowed; background-color: var(--cream-3); box-shadow: 0 4px 0 #e6c6c0; color: var(--ink-soft); }
.btn-small { padding: 5px 14px; font-size: 0.95rem; }
.btn-ghost { background-color: var(--white); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); }
.btn-ghost:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line); }
.btn-ghost:active:not(:disabled) { box-shadow: inset 0 0 0 2px var(--line), 0 1px 0 var(--line); }
.btn-twitch { background-color: #9146ff; color: var(--white); box-shadow: 0 4px 0 #6a2fd1; font-size: 1.1rem; padding: 10px 22px; }
.btn-twitch:hover:not(:disabled) { box-shadow: 0 5px 0 #6a2fd1; }
.icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 12px; font-size: 1.05rem; background-color: var(--white); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); }
.icon-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line); }

.volume { position: relative; }
.volume-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: 230px;
  background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--lift);
  animation: drop 0.2s ease;
}
.volume-pop[hidden] { display: none; }
.volume-pop input { flex: 1; min-width: 0; accent-color: var(--pink-2); cursor: pointer; }
.volume-value { min-width: 4ch; text-align: right; font-family: var(--font-num); font-size: 1.2rem; line-height: 1; }

:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; }

/* --- Panels ---------------------------------------------------------------------------- */

.panel {
  background: var(--skin-panel), var(--cream); background-size: cover;
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 18px 22px;
}

.notice {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 16px;
  background: var(--cream-2); border: 2px solid var(--line); border-radius: var(--radius-sm);
}
.notice-icon { font-size: 1.3rem; }
.notice.offline { background: #ece6fb; border-color: #d6ccf3; }

.hero { margin: 32px auto; max-width: 500px; text-align: center; }
.hero h1 { margin: 6px 0 10px; font-size: 1.8rem; }
.hero p { margin: 0 0 16px; color: var(--ink-soft); font-size: 1.05rem; }
.hero-duck { font-size: 3.6rem; display: inline-block; animation: bob 2.6s ease-in-out infinite; }

.empty { text-align: center; padding: 24px 10px; color: var(--ink-soft); font-size: 1.05rem; }
.empty .big { font-size: 2.6rem; display: block; animation: bob 3s ease-in-out infinite; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- Shop ------------------------------------------------------------------------------ */

.shop-layout { display: grid; grid-template-columns: 200px 1fr; gap: 16px; margin-top: 16px; align-items: start; }

.lines { display: flex; flex-direction: column; gap: 8px; }
.line-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; text-align: left; border: 0;
  border-radius: 999px; cursor: pointer;
  background: var(--skin-tab), var(--cream); background-size: cover; font-size: 1.05rem; font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.line-tab:hover { background-color: var(--white); transform: translateX(2px); }
.line-tab[aria-selected='true'] { background-color: var(--blue); box-shadow: 0 3px 0 var(--blue-2); }
.line-tab.soon { opacity: 0.65; }
.line-tab .icon { font-size: 1.3rem; }
.line-tab .soon-tag { margin-left: auto; font-size: 0.72rem; padding: 1px 8px; border-radius: 999px; background: var(--cream-3); color: var(--ink-soft); }

.line-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.line-head .icon { font-size: 2.2rem; }
.line-head h2 { margin: 0; font-size: 1.6rem; }
.line-head p { margin: 2px 0 0; color: var(--ink-soft); }
.progress-pill { margin-left: auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }

.card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--skin-card), var(--white); background-size: cover;
  border: 2px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 12px 14px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-1), var(--lift); }
.card-art {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
  background: var(--cream); border-radius: var(--radius-sm);
  overflow: hidden;
}
.card-art img { width: 78%; height: 78%; object-fit: contain; }
.card-art .emoji { font-size: 3rem; }
.card-art img, .card-art .emoji { transition: transform 0.18s ease; }
.card:hover .card-art img, .card:hover .card-art .emoji { transform: translateY(-5px); }
.tier-badge {
  position: absolute; top: 6px; left: 6px; padding: 1px 8px; border-radius: 999px;
  font-family: var(--font-num); font-size: 1.05rem; line-height: 1.2;
  background: var(--blue-pale); color: var(--ink);
}
.card-name { margin: 10px 0 2px; font-size: 1.2rem; }
.card-effect { margin: 2px 0; color: var(--ink); font-size: 0.95rem; }
.card-desc { margin: 2px 0; color: var(--ink-soft); font-size: 0.9rem; }
.card-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding-top: 10px; }
.price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-num); font-size: 1.6rem; line-height: 1; }
.price .coin { font-family: var(--font); font-size: 1.15rem; }
.price-btn { width: 100%; background-image: var(--skin-price), none; }
.price-btn.short:disabled { background-color: var(--cream-2); }
.price-btn.bought:disabled { color: var(--reed-2); }

.section-title { margin: 18px 0 10px; font-size: 1.15rem; }
.section-title:first-of-type { margin-top: 4px; }
.price small { font-family: var(--font); font-size: 0.85rem; color: var(--ink-soft); }
.qty-row { display: flex; gap: 6px; width: 100%; }
.qty-row .btn { flex: 1; padding-inline: 4px; font-family: var(--font-num); font-size: 1.3rem; line-height: 1.1; background-image: var(--skin-price), none; }
.qty-row .btn.short:disabled { background-color: var(--cream-2); }
.card code { padding: 0 5px; border-radius: 6px; background: var(--cream-2); color: var(--ink); font-family: var(--font-num); font-size: 1.05rem; }

.card.owned .card-art, .card.equipped .card-art { background: #ecf9e4; }
.card.equipped { border-color: var(--reed); }
.card.locked .card-art img, .card.locked .card-art .emoji { filter: grayscale(1) brightness(0.7); opacity: 0.5; }
.lock {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px;
  background: rgba(59, 29, 63, 0.25); color: var(--white); text-align: center; padding: 8px; font-weight: 500;
  text-shadow: 0 1px 2px rgba(59, 29, 63, 0.6);
}
.lock .padlock { font-size: 1.8rem; }

.stamp {
  position: absolute; top: 50%; left: 50%; padding: 4px 12px; border-radius: 8px;
  color: var(--danger); background: var(--skin-stamp), var(--white); background-size: cover;
  border: 3px solid currentColor;
  font-family: var(--font-num); font-size: 1.5rem; line-height: 1; letter-spacing: 0.06em;
  transform: translate(-50%, -50%) rotate(-10deg);
  pointer-events: none;
}
.equipped .stamp { color: var(--reed-2); }
.stamp.thunk { animation: thunk 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes thunk {
  0% { transform: translate(-50%, -50%) rotate(-10deg) scale(3); opacity: 0; }
  60% { transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1); }
}

.card.soon { filter: saturate(0.4); opacity: 0.8; }
.card.soon .card-art .emoji { opacity: 0.5; }

.card.shake { animation: shake 0.45s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

.reeling { display: inline-flex; align-items: center; gap: 8px; }
.bobber { width: 12px; height: 14px; border-radius: 6px; background: linear-gradient(180deg, var(--danger) 50%, var(--white) 50%); box-shadow: 0 0 0 2px var(--ink-soft); animation: bobber 0.8s ease-in-out infinite; }
@keyframes bobber { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(4px) rotate(6deg); } }

.speech {
  position: absolute; left: 50%; bottom: calc(100% - 4px); z-index: 5; width: max-content; max-width: 230px;
  padding: 8px 12px; background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--lift);
  text-align: center; transform: translateX(-50%); animation: pop 0.25s ease both;
}
.speech::after {
  content: ''; position: absolute; left: 50%; top: 100%; width: 14px; height: 9px; background: var(--line);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%);
}
@keyframes pop { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.receipts { margin-top: 20px; }
.receipts h3 { margin: 0 0 8px; font-size: 1.1rem; }
.receipt { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 2px dashed var(--line); }
.receipt:first-of-type { border-top: 0; }
.receipt .when { margin-left: auto; color: var(--ink-soft); font-size: 0.88rem; }
.tag { padding: 1px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; }
.tag.applied { background: var(--reed); }
.tag.rejected { background: var(--cream-3); }
.tag.sent { background: var(--blue-pale); }

/* --- Dialogs --------------------------------------------------------------------------- */

.dialog-backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(59, 29, 63, 0.4);
  animation: fade 0.15s ease;
}
.dialog { width: min(400px, 100%); text-align: center; animation: drop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.dialog h2 { margin: 4px 0 8px; font-size: 1.4rem; }
.dialog p { margin: 0; }
.dialog .big { font-size: 2.8rem; }
.dialog-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { transform: translateY(-24px) scale(0.95); opacity: 0; } }

/* --- Collection: the book -------------------------------------------------------------- */

.collection-head { margin-top: 16px; padding: 22px 28px; }
.head-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.collection-head h1 { margin: 0 0 4px; font-size: 2.2rem; }
.collection-head .sub { color: var(--ink); font-size: 1.1rem; }
.collection-head .share { margin-left: auto; }

.meter-row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.meter { position: relative; flex: 1; height: 16px; overflow: hidden; border-radius: 999px; background: var(--pink-1); }
.meter-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--pink) 0 8px, var(--pink-2) 8px 16px);
  transition: width 1.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: flow 1.4s linear infinite;
}
@keyframes flow { to { background-position: 22.6px 0; } }
.meter-text { font-family: var(--font-num); font-size: 1.4rem; line-height: 1; min-width: 3ch; }

.bookmarks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bookmark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--white); color: var(--ink); font-size: 1.05rem; font-weight: 500;
  box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line);
  transition: transform 0.15s ease;
}
.bookmark:hover { transform: translateY(-2px); }
.bookmark:active { transform: translateY(2px); }
.bookmark-star { color: var(--rarity); text-shadow: 0 1px 0 rgba(59, 29, 63, 0.25); }
.bookmark.complete { background: #fff6d6; box-shadow: inset 0 0 0 2px var(--yellow-2), 0 3px 0 var(--yellow-2); }
.bookmark.complete::after { content: '✓'; margin-left: 2px; color: var(--reed-2); }

.book { margin: 22px auto 0; }

.spread {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 14px; border-radius: 24px;
  background: var(--skin-banner), var(--pink); background-size: cover;
  box-shadow: inset 0 0 0 2px var(--pink-2), 0 5px 0 var(--pink-2);
  touch-action: pan-y;
}
.spread::after {
  /* the spine */
  content: ''; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 4px; transform: translateX(-50%);
  border-radius: 2px; background: var(--pink-2);
}

.page {
  position: relative; aspect-ratio: 1; padding: 22px 22px 34px;
  background: var(--skin-panel), var(--cream); background-size: cover;
  border-radius: 14px;
  box-shadow: 3px 3px 0 #f7dce4, 6px 6px 0 #fbe9ee;
}
.page:first-child { box-shadow: inset -16px 0 16px -14px rgba(201, 83, 136, 0.3), -3px 3px 0 #f7dce4, -6px 6px 0 #fbe9ee; }
.page:last-child:not(:first-child) { box-shadow: inset 16px 0 16px -14px rgba(201, 83, 136, 0.3), 3px 3px 0 #f7dce4, 6px 6px 0 #fbe9ee; }
.page.blank { background: var(--cream-2); }
.page-no { position: absolute; bottom: 10px; font-family: var(--font-num); font-size: 1.2rem; color: var(--ink-soft); }
.page:first-child .page-no { left: 16px; }
.page:last-child:not(:first-child) .page-no { right: 16px; }

.pockets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px; height: 100%; }
.pocket { border-radius: var(--radius-sm); border: 2px dashed rgba(235, 165, 195, 0.45); }

.book-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.page-label { min-width: 11ch; text-align: center; color: var(--ink); font-size: 1.05rem; font-weight: 500; }
.page-turn { width: 56px; height: 46px; padding: 0; border-radius: 14px; font-size: 1.4rem; }

.fish {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; height: 100%; min-height: 0; padding: 6px 6px 7px; cursor: pointer;
  background: var(--skin-card), var(--white); background-size: cover;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.15s ease;
  perspective: 600px;
}
.fish:hover { transform: translateY(-3px) scale(1.03); }
.fish:active { transform: scale(0.97); }

/* Pseudo 3D: a card under the mouse leans towards it */
.tilt.tilting {
  z-index: 2; transition: transform 0.08s linear;
  transform: perspective(500px) rotateX(calc((0.5 - var(--my)) * 20deg)) rotateY(calc((var(--mx) - 0.5) * 24deg)) scale(1.06);
}
.fish .art { display: grid; place-items: center; width: 100%; flex: 1; min-height: 0; }
.fish .art img { width: 80%; height: 80%; object-fit: contain; }
.fish .art .emoji { font-size: 2.2rem; }
.fish .label {
  width: 100%; padding: 3px 6px; border-radius: 8px;
  background: color-mix(in srgb, var(--rarity, var(--blue)) 22%, var(--blue-pale)); color: var(--ink);
  font-size: 0.85rem; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fish .stars { align-self: flex-start; padding-left: 2px; }
.fish .times { position: absolute; top: 5px; right: 8px; font-family: var(--font-num); font-size: 1.05rem; line-height: 1; color: var(--ink-soft); }
.fish .new {
  position: absolute; top: -10px; left: -8px; padding: 2px 7px; z-index: 1; border-radius: 999px;
  background: var(--yellow); box-shadow: 0 2px 0 var(--yellow-2);
  font-family: var(--font-num); font-size: 0.95rem; line-height: 1.1; animation: wiggle 1.6s ease-in-out infinite;
}
@keyframes wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg) scale(1.08); } }
.fish .retired { position: absolute; bottom: 30px; padding: 0 8px; border-radius: 999px; background: var(--ink-soft); color: var(--cream); font-size: 0.72rem; }

/* Rarity as stars, each in its PSO colour: small, with a soft edge so the pale ones still read. */
.stars {
  display: block; max-width: 100%; overflow: hidden; white-space: nowrap;
  font-family: 'Segoe UI Symbol', 'DejaVu Sans', sans-serif; font-size: 0.85rem; line-height: 1.1; letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(59, 29, 63, 0.3);
}

.fish.missing {
  cursor: default;
  background: var(--skin-silhouette), var(--cream-2); background-size: cover;
  border: 2px dashed var(--line-2); box-shadow: none;
}
.fish.missing:hover { transform: none; }
.fish.missing .stars { filter: grayscale(1); opacity: 0.45; }
.fish.missing .art { animation: sway 4s ease-in-out infinite; }
.fish.missing .art img { filter: brightness(0) opacity(0.2); }
.fish.missing .mystery { font-family: var(--font-num); font-size: 2.2rem; color: rgba(59, 29, 63, 0.25); }
.fish.missing .label { background: var(--cream-3); color: var(--ink-soft); }
@keyframes sway { 0%, 100% { transform: translateX(-3px) rotate(-3deg); } 50% { transform: translateX(3px) rotate(3deg); } }

/* Shiny catches: a holographic foil card with sparkles and a sheen. --mx / --my (0-1) say where the
   light is: they drift slowly on their own, and follow the pointer while a card is tilted. */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0.5; }
.fish.foil, .card-art.foil {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.5px) 0 0 / 13px 13px,
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px) 6px 7px / 13px 13px,
    linear-gradient(125deg, #ffc6e4, #bfe2ff, #c6f5d2, #fff0a8, #ffc6e4, #d9c8ff, #bfe2ff, #ffc6e4)
      calc(var(--mx) * 100%) calc(var(--my) * 100%) / 400% 400% no-repeat;
  animation: foil-drift 9s ease-in-out infinite alternate;
}
@keyframes foil-drift { from { --mx: 0; --my: 0.3; } to { --mx: 1; --my: 0.7; } }
.fish.foil::before, .card-art.foil::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%)
    calc((1.5 - var(--mx)) * 50%) 0 / 300% 100% no-repeat;
}
.card-art.foil { position: relative; }
.foil.tilting { animation: none; }
.fish.foil { border-color: #d9c8ff; }
.fish.foil .label { background: linear-gradient(90deg, #ffd6ea, #d9c8ff, #cfeaff); }
.detail .shiny-note { padding: 1px 10px; border-radius: 999px; background: linear-gradient(90deg, #ffc6e4, #bfe2ff, #fff0a8); font-size: 0.85rem; font-weight: 500; }

.fish.facedown {
  background: var(--skin-card-back), repeating-conic-gradient(var(--pink) 0 25%, var(--pink-2) 0 50%) 0 0 / 14px 14px;
  background-size: cover, 14px 14px; border-color: var(--pink-2);
}
.fish.facedown > * { visibility: hidden; }
.fish.flip { animation: flip 0.6s ease both; }
@keyframes flip { 0% { transform: rotateY(180deg) scale(1.1); } 100% { transform: rotateY(0) scale(1); } }

/* 7 stars and up shimmer */
.fish.shimmer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.75) 44%, transparent 50%);
  background-size: 250% 100%; background-repeat: no-repeat; animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }

/* Fish detail */
.detail { width: min(430px, 100%); }
.detail .card-art { aspect-ratio: 2 / 1; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rarity, var(--line)) 45%, transparent); }
.detail .card-art img { width: 70%; height: 88%; }
.detail .card-art .emoji { font-size: 3.6rem; }
.detail h2 { margin: 12px 0 6px; font-size: 1.5rem; }
.detail .rarity-line { display: flex; align-items: center; justify-content: center; gap: 8px; }
.detail .rarity-line .stars { font-size: 1.15rem; letter-spacing: 1px; }
.detail .retired-note { padding: 1px 10px; border-radius: 999px; background: var(--ink-soft); color: var(--cream); font-size: 0.82rem; }
.detail .desc { color: var(--ink-soft); margin: 8px 0 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.stat { padding: 7px 12px; border-radius: var(--radius-sm); background: var(--cream-2); text-align: left; }
.stat b { display: block; font-family: var(--font-num); font-size: 1.5rem; font-weight: 400; line-height: 1; }
.stat span { font-size: 0.85rem; color: var(--ink-soft); }
.mod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.mod-chip { padding: 2px 12px; border-radius: 999px; background: var(--yellow); font-size: 0.88rem; font-weight: 500; }
.mod-chip.unknown { background: var(--cream-2); color: rgba(59, 29, 63, 0.45); box-shadow: inset 0 0 0 2px var(--cream-3); }

/* --- Effects --------------------------------------------------------------------------- */

.fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-drop { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--blue-2); }
.fx-star { position: absolute; font-size: 1.3rem; color: var(--yellow); text-shadow: 0 2px 0 var(--yellow-2); }
.fx-confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; }

.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 70; padding: 10px 18px; transform: translateX(-50%);
  background: var(--cream); border: 2px solid var(--line); border-radius: 999px; box-shadow: var(--lift);
  font-weight: 500; animation: drop 0.3s ease;
}

/* Debug panel (only when running locally, see debug.js) */
.debug-panel { position: fixed; left: 10px; bottom: 10px; z-index: 80; display: flex; align-items: flex-end; gap: 6px; }
.debug-buttons { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--cream); border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--lift); }
.debug-buttons[hidden] { display: none; }

/* --- Narrow screens -------------------------------------------------------------------- */

@media (max-width: 859px) {
  .book { max-width: 540px; }
  .spread { grid-template-columns: 1fr; }
  .spread::after { display: none; }
  .page:first-child { box-shadow: 3px 3px 0 #f7dce4, 6px 6px 0 #fbe9ee; }
  .page-no { right: 16px; left: auto !important; }
}

@media (max-width: 760px) {
  .app { padding: 10px 12px 80px; }
  .topbar { padding: 8px 10px 10px 14px; gap: 8px; }
  .brand { font-size: 1rem; gap: 6px; }
  .brand-duck { height: 34px; margin: -4px 0; }
  .tools { gap: 6px; }
  .tools .btn-small { padding: 4px 10px; font-size: 0.88rem; }
  .icon-btn { width: 32px; height: 32px; }
  .balance { font-size: 1.3rem; }
  .receipt { flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; }
  .tabs .tab { flex: 1; justify-content: center; }
  .panel { padding: 14px 16px; }
  .shop-layout { grid-template-columns: 1fr; }
  .lines { flex-direction: row; overflow-x: auto; padding: 2px 2px 8px; }
  .line-tab { width: auto; flex: 0 0 auto; }
  .line-tab:hover { transform: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 10px 10px 12px; }
  .card-name { font-size: 1.05rem; }
  .price-btn { padding-inline: 6px; white-space: nowrap; }
  .line-head h2 { font-size: 1.3rem; }
  .line-head .icon { font-size: 1.7rem; }
  .progress-pill { display: none; }
  .collection-head { padding: 16px 18px; }
  .collection-head h1 { font-size: 1.6rem; }
  .bookmark { padding: 5px 13px; }
  .book { margin-top: 18px; }
  .spread { padding: 8px; border-radius: 18px; }
  .page { padding: 12px 12px 30px; }
  .pockets { gap: 10px; }
  .fish .art .emoji { font-size: 1.7rem; }
  .fish .label { font-size: 0.74rem; padding: 2px 4px; }
  .fish .stars { font-size: 0.6rem; letter-spacing: -1px; }
  .fish .times { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  body::before { animation: none; }
}