@font-face { font-family: Fraunces; font-weight: 600; font-display: swap; src: url(fonts/fraunces-600.woff2?v=0a53e3b0f613) format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 700; font-display: swap; src: url(fonts/fraunces-700.woff2?v=d5fbb3e9e9d0) format("woff2"); }
@font-face { font-family: Fraunces; font-weight: 600; font-style: italic; font-display: swap; src: url(fonts/fraunces-italic-600.woff2?v=9357ddcba98f) format("woff2"); }
/* The look: a collection cabinet. Cool herbarium paper, cabinet-green ink for actions, brass for points; Fraunces for
   names and numbers (scientific names in its italic), the system sans for everything else. Radii follow hierarchy:
   10px panels, 6px controls, 3px labels. */
:root {
  color-scheme: light dark;
  --bg: #eaeee9; --surface: #fbfcfa; --surface-2: #eef1ec; --line: #d2d9d1; --fg: #16201a; --muted: #56635a;
  --accent: #1d5a43; --accent-fg: #f3f8f4; --brass: #8a6210; --ok: #1d7a4c; --err: #b3322b;
  --shadow: 0 1px 0 rgba(22,32,26,.05);
  --daily: transparent; --r: 10px;
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --t0: #8a8a9c; --t1: #12915b; --t2: #1f6fd1; --t3: #8b3fd9; --t4: #e07a10; --t5: #d6303a;
}
/* Dark mode: follows the system unless the toggle set data-theme on <html> (see theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0f1412; --surface: #161c19; --surface-2: #1d2521; --line: #2b3530; --fg: #e6ece7; --muted: #94a199;
    --accent: #8fcfae; --accent-fg: #0c1a13; --brass: #d6b25e; --ok: #6fd39c; --err: #ff8a80;
    --shadow: none;
    --t0: #a3a3b8; --t1: #4ade80; --t2: #60a5fa; --t3: #c084fc; --t4: #fbbf24; --t5: #ff6b6b; }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #0f1412; --surface: #161c19; --surface-2: #1d2521; --line: #2b3530; --fg: #e6ece7; --muted: #94a199;
    --accent: #8fcfae; --accent-fg: #0c1a13; --brass: #d6b25e; --ok: #6fd39c; --err: #ff8a80;
    --shadow: none;
    --t0: #a3a3b8; --t1: #4ade80; --t2: #60a5fa; --t3: #c084fc; --t4: #fbbf24; --t5: #ff6b6b; }
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.glow { display: none; }
.app { position: relative; max-width: 540px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); }
h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.005em; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 10px; }
button, input, a.btn { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0 10px; }
.logo { display: flex; align-items: center; text-decoration: none; color: inherit; font: 700 1.45rem/1 var(--serif); letter-spacing: -.01em; }

.account { position: relative; }
.chip { display: flex; align-items: center; gap: 8px; white-space: nowrap; background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px 3px 3px; cursor: pointer; color: inherit; }
.avatar { width: 28px; height: 28px; border-radius: 4px; display: grid; place-items: center; font: 700 .9rem/1 var(--serif); color: var(--accent-fg); background: var(--accent); }
.chip small { color: var(--muted); font-weight: 600; white-space: nowrap; }
.chip .bar-xp { width: 38px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.chip .bar-xp i { display: block; height: 100%; background: var(--brass); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; min-width: 220px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.3); z-index: 5; display: grid; gap: 6px; }
.menu p { margin: 4px 6px; font-size: .82rem; color: var(--muted); word-break: break-all; }
.menu button { width: 100%; text-align: left; }

/* sections: plain text tabs on a rule, the open one underlined */
.seg { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: 1 0 auto; border: 0; background: none; padding: 10px 6px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: clamp(.78rem, 3.4vw, .95rem); white-space: nowrap; cursor: pointer; }
.seg button:hover { color: var(--fg); }
.seg button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.eyebrow, .label { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0; }
.muted { color: var(--muted); font-size: .92rem; margin: 0 0 12px; }
.lead { margin: 0 0 16px; color: var(--muted); }
.lead strong { color: var(--fg); }

.banner { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; font-size: .92rem; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 6px; padding: 11px 18px; font-weight: 650; cursor: pointer; text-decoration: none; color: inherit; background: none; }
.btn:active { transform: translateY(1px); }
.btn.wide { width: 100%; }
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--fg)); }
.btn.primary:disabled { opacity: .55; cursor: default; }
.btn.ghost { border-color: var(--line); background: var(--surface); }
.btn.ghost:hover { border-color: color-mix(in srgb, var(--fg) 30%, var(--line)); }
.btn.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn.small { padding: 6px 12px; font-size: .88rem; }
.row { display: flex; gap: 8px; align-items: stretch; }
input:not([type=range]) { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); margin: 6px 0 8px; }
input:not([type=range]):focus-visible { outline-offset: 0; }
.row input { margin: 0; }
.error { color: var(--err); min-height: 1.3em; margin: 0 0 8px; font-size: .88rem; }

/* boards: a ranked list on rules, the rank and points in the serif */
.board { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.board li { counter-increment: r; display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.board li:last-child { border-bottom: 0; }
.board li::before { content: counter(r); min-width: 1.6em; font: 600 1rem/1 var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; }
.board li:nth-child(1)::before { color: var(--brass); }
.board .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board .who small { color: var(--muted); font-weight: 500; }
.board .pts { font: 600 1.05rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.board li.empty::before { content: none; }
.codebox { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px dashed var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; }
code { font: 700 1.4rem/1.2 var(--serif); letter-spacing: .06em; }

/* dialogs + toast */
dialog { border: 1px solid var(--line); padding: 0; border-radius: 12px; background: var(--surface); color: var(--fg); width: min(380px, calc(100% - 32px)); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); }
dialog::backdrop { background: rgba(10,16,13,.5); }
dialog[open] { animation: dlg .2s ease-out; }
@keyframes dlg { from { transform: translateY(8px); opacity: 0; } }
.dlg { padding: 24px; position: relative; }
.x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 1.6rem; color: var(--muted); cursor: pointer; line-height: 1; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; margin: 16px 0 6px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: 600; font-size: .9rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 20; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
footer { margin-top: 24px; font-size: .75rem; line-height: 1.55; color: var(--muted); }
footer p { margin: 0 0 6px; }
footer .links { display: flex; gap: 14px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* header: theme toggle next to the account chip */
.bar-right { display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--fg); font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }

/* sign-in buttons */
.oauth-btns { display: grid; gap: 8px; }
.btn.oauth { border-color: var(--line); }
.btn.oauth.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn.oauth.github { background: #24292f; color: #fff; border-color: #24292f; }
.btn.oauth.discord { background: #5865f2; color: #fff; border-color: #5865f2; }

/* sign-in dialog: email + password */
.account { display: flex; align-items: center; gap: 8px; }
.btn.signin { padding: 7px 14px; }
.seg2 { display: flex; border-bottom: 1px solid var(--line); margin: 4px 0 14px; }
.seg2 button { flex: 1; border: 0; background: none; padding: 9px 4px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font: 600 .9rem/1.2 inherit; cursor: pointer; }
.seg2 button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); }
#pw-form .label { display: block; margin-top: 6px; }
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row input { flex: 1; }
.pw-row .btn { flex: none; }
.hint { font-size: .78rem; color: var(--muted); margin: 0 0 6px; }
.linkbtn { border: 0; background: none; color: var(--accent); font: 600 .85rem inherit; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 2px; }
#pw-form .linkbtn, #auth-forgot .linkbtn { display: block; margin: 6px auto 0; }
.magic { margin-top: 10px; }
.magic summary { cursor: pointer; color: var(--muted); font-size: .88rem; text-align: center; padding: 6px 0; }
.magic form { margin-top: 6px; }
.menu .unverified { color: var(--err); }
.menu .unverified .linkbtn { padding: 0; font-size: .8rem; }
#auth-forgot { display: grid; gap: 4px; }

.boardhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.boardhead h2 { margin: 0; }
/* small either/or switches: text with an underline, like the tabs */
.kind { display: flex; gap: 12px; }
.kind button { border: 0; background: none; color: var(--muted); font: 600 .85rem/1.2 inherit; padding: 5px 0 4px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.kind button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--accent); }
.menu .xps { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ads: small, labeled, out of the way */
.ad { margin-top: 14px; padding: 10px 12px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.ad-label { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.ad .adsbygoogle { min-height: 90px; }
.house-ad { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.house-ad img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: none; }
.house-ad strong { display: block; font-size: .92rem; }
.house-ad small { display: block; color: var(--muted); font-size: .8rem; }
.house-ad:hover strong { text-decoration: underline; }

/* ---------- Zoodle ---------- */
.logo svg { width: 40px; height: 26px; margin-right: 9px; color: var(--accent); flex: none; }
.t0 { --tc: var(--t0); } .t1 { --tc: var(--t1); } .t2 { --tc: var(--t2); } .t3 { --tc: var(--t3); } .t4 { --tc: var(--t4); } .t5 { --tc: var(--t5); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 8px; background: var(--tc, var(--line)); flex: none; }
.tier { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 3px; font-weight: 700; font-size: .8rem; letter-spacing: .01em; color: #fff; background: var(--tc, #6b7280); }

/* ready screen: an empty slot in the drawer, waiting for today's animal */
.ready h2 { margin: 16px 0 6px; font-size: 1.55rem; }
.mystery { display: grid; place-items: center; height: 160px; margin-top: 10px; border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--fg) 22%, var(--line));
  background: var(--surface-2); font: italic 600 3.6rem/1 var(--serif); color: color-mix(in srgb, var(--muted) 70%, transparent); }
.how { list-style: none; margin: 0 0 18px; padding: 0; color: var(--muted); display: grid; gap: 4px; }
.how b { color: var(--fg); font-weight: 650; }
.btn.big { padding: 15px 20px; font: 600 1.3rem/1 var(--serif); }
#ready-note { margin: 12px 0 0; font-size: .88rem; }
.tiers { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* the tiers as one bar: each tier's width is its share of all pulls */
.tierrow { margin-top: 10px; }
.tierbar { display: flex; height: 10px; gap: 2px; border-radius: 3px; overflow: hidden; }
.tierbar i { background: var(--tc); min-width: 3px; }
.tierlegend { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; font-size: .84rem; }
.tierlegend li { display: flex; align-items: center; }
.tierlegend small { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .tierlegend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the pull: a photo with its credit, a specimen label (name, odds, lineage), then the points as a ledger */
#stage-result { position: relative; padding: 0 20px 20px; overflow: hidden; }
.pull-photo { position: relative; margin: 0 -20px; aspect-ratio: 4 / 3; max-width: calc(100% + 40px); background: var(--surface-2); overflow: hidden; }
.pull-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); }
.pull-photo.veiled img { filter: blur(30px) saturate(.5); transform: scale(1.2); }
.pull-photo .tier { position: absolute; left: 12px; top: 12px; }
.pull-photo .specimen { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: .74rem; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
.pull-photo.gone::after { content: "No photo available"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.credit { margin: 8px 0 0; font-size: .72rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.credit a { color: inherit; }
.skip { position: absolute; top: 12px; right: 12px; z-index: 2; }
.animal { margin: 16px 0 0; font: 600 clamp(1.75rem, 7.5vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.sci { margin: 4px 0 0; font: italic 600 1.05rem/1.3 var(--serif); color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; }
.odds { font: 700 1.6rem/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--fg); }
.tiernote { flex-basis: 100%; font-size: .82rem; margin: 0; }
.iucn { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--muted); }
.iucn b { border: 1px solid var(--line); color: var(--fg); border-radius: 3px; padding: 0 5px; font-size: .74rem; }
.iucn.VU b, .iucn.NT b { border-color: var(--t4); }
.iucn.EN b, .iucn.CR b { border-color: var(--t5); color: var(--t5); }
/* lineage: rank and name in two columns, like the label pinned under a specimen */
.lineage { list-style: none; padding: 8px 12px; margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; border: 1px solid var(--line); border-radius: 3px; font-size: .86rem; }
.lineage li { display: contents; }
.lineage small { color: var(--muted); font-size: .8rem; }
.lineage li.rv { opacity: 1; transform: none; }
.lineage li.rv > * { opacity: 0; transition: opacity .35s; }
.lineage li.rv.on > * { opacity: 1; }
.rv { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.rv.on { opacity: 1; transform: none; }
.pbadges { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--line); }
.pbadges li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.pbadges li b { font: 600 1rem/1.2 var(--serif); color: var(--brass); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.pbadges li.zero b { color: var(--muted); }
.sumrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 12px; border-top: 3px double var(--line); }
.total { font: 700 2.7rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.total small { font: 600 .95rem/1 ui-sans-serif, system-ui, sans-serif; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.xp { font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.streaknote { margin: 8px 0 0; }
.next { text-align: center; color: var(--muted); font-size: .85rem; margin: 14px 0 0; font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

/* Zoodex */
#tab-zoodex { display: grid; gap: 14px; }
.dexsum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.dexsum h2 { margin: 0; }
.dexsum .muted { margin: 0; }
.prog { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; }
.prog li { display: grid; grid-template-columns: minmax(0, 9.5em) 1fr auto; align-items: center; gap: 10px; font-size: .86rem; }
.prog .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog .meter { height: 6px; border-radius: 1px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.prog .meter i { display: block; height: 100%; background: var(--accent); min-width: 0; }
.prog .ct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin-top: 12px; }
.dexcard { position: relative; display: block; min-width: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
  border: 0; border-radius: 4px; overflow: hidden; background: none; }
.dexcard:hover img { filter: brightness(1.05); }
.dexcard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); border-radius: 4px; border-bottom: 3px solid var(--tc, var(--line)); }
.dexcard .nm { display: block; padding: 5px 1px 2px; font-size: .78rem; line-height: 1.25; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dexcard .nm small { display: block; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.dexcard .cnt { position: absolute; top: 5px; right: 5px; background: var(--surface); color: var(--fg); border-radius: 3px; padding: 0 5px; font-size: .72rem; font-weight: 700; }
.dexcard.unowned img { filter: grayscale(1) opacity(.55); }
#dex-q { margin-bottom: 0; }
.emptydex { padding: 14px 0 4px; }

/* the detail sheet */
#detail { width: min(460px, calc(100% - 32px)); max-height: 92dvh; overflow-y: auto; }
#detail .dlg { padding: 0 20px 20px; }
#detail .pull-photo { margin: 0 -20px; }
#detail .x { z-index: 3; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

footer a { color: inherit; }

/* Records and the range map */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips button { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 5px 11px; border-radius: 6px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.chips button:hover { color: var(--fg); }
.chips button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--surface); }
#rec-lists { display: grid; gap: 14px; margin-top: 14px; }
#rec-lists:empty { display: none; }
.reclist { list-style: none; padding: 0; margin: 8px 0 0; }
.reclist li + li { border-top: 1px solid var(--line); }
.reclist li button { display: grid; grid-template-columns: 1.4em 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 6px 2px; cursor: pointer; }
.reclist li button:hover .nm { text-decoration: underline; text-underline-offset: 2px; }
.reclist .rk { color: var(--muted); font: 600 .85rem/1 var(--serif); font-variant-numeric: tabular-nums; text-align: right; }
.reclist img { width: 44px; height: 44px; border-radius: 3px; object-fit: cover; background: var(--surface-2); }
.reclist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .92rem; }
.reclist .nm small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; }
.reclist .val { font: 600 .98rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--fg); }
.recnote { font-size: .78rem; padding: 0 4px; }
.traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.traits div { font-size: .95rem; font-weight: 650; }
.traits small { display: block; color: var(--muted); font-weight: 500; font-size: .78rem; }
.rangebox { margin-top: 14px; }
.rangebox canvas { width: 100%; aspect-ratio: 2 / 1; display: block; border-radius: 6px; background: var(--surface-2); }
.rangebox .credit { margin-top: 4px; }

/* Zoodex habitat map: the landscape is drawn in habitat.js; dark mode dims it */
.maphead { margin: 22px 0 8px; font-size: 1.1rem; }
.habmap { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); touch-action: manipulation; background: var(--surface-2); }
.habmap .zone { cursor: pointer; outline: none; }
.habmap .hit { fill: transparent; stroke: transparent; stroke-width: 2; stroke-dasharray: 5 3; transition: fill .15s; }
.habmap .zone:hover .hit, .habmap .zone:focus-visible .hit { stroke: #fff; fill: rgba(255,255,255,.1); }
.habmap .zone.on .hit { stroke: #fff; stroke-dasharray: none; stroke-width: 2.5; fill: rgba(255,255,255,.14); }
.habmap .chip { fill: color-mix(in srgb, var(--surface) 90%, transparent); stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: .6; }
.habmap .zone.on .chip { fill: var(--accent); }
.habmap .zl { font-size: 8.5px; font-weight: 650; fill: var(--fg); pointer-events: none; }
.habmap .zone.on .zl { fill: var(--accent-fg); }
.habmap .badge { fill: var(--accent); }
.habmap .zc { font-size: 8px; font-weight: 700; fill: var(--accent-fg); pointer-events: none; font-variant-numeric: tabular-nums; }
.habmap .sd { fill: var(--tc, var(--accent)); stroke: #fff; stroke-width: 1.2; cursor: pointer; filter: drop-shadow(0 .6px .8px rgba(0,0,0,.4)); }
.habmap .sd:hover { stroke: var(--fg); stroke-width: 1.8; }
:root[data-theme="dark"] .habmap .picture { filter: brightness(.7) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .habmap .picture { filter: brightness(.7) saturate(.9); } }
.landpill { margin-top: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.landpill.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.zonebox { margin-top: 10px; }
.zonebox h3 { margin: 0 0 2px; font-size: 1.05rem; }

/* Zoodex collection facts: a two-column register, each fact under a rule (tier-coloured when it opens an animal) */
.tiermix { display: flex; gap: 2px; height: 20px; margin: 8px 0 14px; border-radius: 3px; overflow: hidden; }
.tiermix span { display: grid; place-items: center; min-width: 22px; background: var(--tc); color: #fff; font-size: .7rem; font-weight: 700; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px 16px; }
.fact { display: grid; gap: 1px; align-content: start; align-self: stretch; height: 100%; min-width: 0; padding: 9px 0 6px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
button.fact { cursor: pointer; border-top: 2px solid var(--tc, var(--line)); }
button.fact:hover b { text-decoration: underline; text-underline-offset: 2px; }
.fact small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.fact b { font: 600 1.05rem/1.25 var(--serif); overflow-wrap: anywhere; }
.fact span { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
/* the pull result's facts row also uses .facts: keep it a row */
#stage-result .facts, #detail .facts { display: flex; }

/* Badge explanations */
.pbadges li .tx { display: grid; gap: 1px; min-width: 0; }
.pbadges li .tx small, .guidelist .tx small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.guide { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.guide summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.guide input { width: 100%; margin: 8px 0; }
.guide h4 { margin: 18px 0 4px; font: 600 1rem/1.3 var(--serif); }
.guidelist { list-style: none; margin: 0; padding: 0; }
.guidelist li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.guidelist .tx { display: grid; gap: 1px; min-width: 0; }
.guidelist .pts { display: grid; justify-items: end; color: var(--brass); font: 600 .98rem/1.2 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.guidelist .pts small { color: var(--muted); font: 500 .74rem/1.3 ui-sans-serif, system-ui, sans-serif; }

.muted a { color: var(--accent); }

/* Cookie banner and privacy page */
.consent { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; max-width: 560px; margin: 0 auto;
  display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.35); font-size: .86rem; line-height: 1.45; }
.consent p { margin: 0; color: var(--muted); }
.consent a { color: var(--accent); }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 140px; }
.legal { max-width: 680px; margin: 0 auto; padding: 16px; }
.legal h1 { margin-top: 0; font: 600 1.6rem/1.2 var(--serif); }
.legal h2 { margin: 22px 0 6px; font-size: 1.1rem; }
.legal li { margin: 6px 0; }
.legaltable { width: 100%; border-collapse: collapse; font-size: .85rem; margin: 8px 0; }
.legaltable th, .legaltable td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.legaltable code { font: 600 .8rem ui-monospace, Menlo, monospace; letter-spacing: 0; }

/* showcase: favourites on your Zoodex and on player profiles */
.board button.who { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
.board button.who:hover, .board button.who:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.banner .linkbtn { padding: 0; font-size: inherit; }
.dexcard .star { position: absolute; top: 5px; left: 5px; color: #f5c04a; font-size: .85rem; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
#showcase { margin-bottom: 8px; }
#showcase .recnote { margin: 8px 0 0; }
.favbtn { display: block; margin: 12px 0 0; }
.favbtn[aria-pressed="true"] { color: var(--brass); border-color: var(--brass); }
#profile { width: min(440px, calc(100% - 32px)); }
.phead { display: flex; align-items: center; gap: 12px; padding-right: 24px; }
.phead h2 { margin: 0; overflow-wrap: anywhere; }
.phead p { margin: 2px 0 0; font-size: .88rem; }
.avatar.big { width: 46px; height: 46px; font-size: 1.3rem; flex: none; }
.ptoday { margin: 12px 0 0; font-size: .9rem; }

/* bonus game: guess where the animal lives */
.bonus { margin-top: 14px; }
.bonus > h2:first-child { margin: 0 0 8px; }
.bonus .pull-photo { margin-top: 0; }
.guesswrap { position: relative; margin-top: 10px; }
.guessmap { width: 100%; aspect-ratio: 2 / 1; display: block; border-radius: 6px; background: var(--surface-2); touch-action: none; cursor: crosshair; }
.zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.zoom button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 700 1.1rem/1 inherit; cursor: pointer; }
.hints { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: .88rem; }
.hints li::before { content: "✗ "; color: var(--err); font-weight: 800; }
.bonus > .btn.wide { margin-top: 12px; }
.bonusend { margin: 14px 0 4px; font-weight: 700; }
.bonusend.won { color: var(--ok); }
.bonusend.lost { color: var(--muted); }

/* showcase editor: the drawn showcase (public/showcase.js), its looks and sharing */
.sc-canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--surface-2); cursor: pointer; margin-top: 8px; }
.sc-canvas.arranging { touch-action: none; cursor: grab; outline: 2px dashed var(--accent); outline-offset: 3px; }
#profile .sc-canvas { margin-top: 4px; }
.sc-hint { margin: 8px 0 0; font-size: .85rem; }
.sc-group { margin-top: 16px; }
.sc-label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.sc-swatches { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sc-swatch { aspect-ratio: 1; border-radius: 4px; border: 0; padding: 0; cursor: pointer; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.sc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--fg); }
.sc-swatch:focus-visible, .sc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#sc-arrange { margin-top: 16px; }
#sc-arrange[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.sc-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sc-links p { margin: 0; font-size: .85rem; }
.sc-link { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 6px; padding: 5px 11px;
  font: 600 .82rem/1.3 inherit; text-decoration: none; cursor: pointer; }
.sc-link:hover { border-color: var(--fg); }
.sc-icon { display: inline-grid; place-items: center; width: 38px; height: 34px; padding: 0; }
.sc-icon svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 420px) { .sc-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sc-group .chips { margin-top: 0; }

.sc-credits { margin: 6px 0 0; font-size: .72rem; line-height: 1.45; }

@media (max-width: 560px) { .chip .bar-xp, .chip small { display: none; } }
/* small phones: a smaller wordmark, and the account chip shrinks to its avatar (the level is in its menu) */
@media (max-width: 420px) {
  .logo { font-size: 1.15rem; }
  .logo svg { width: 32px; height: 21px; margin-right: 6px; }
  .chip > span:not(.avatar) { display: none; }
  .chip { padding-right: 3px; }
  .bar-right { gap: 6px; }
}
@media (max-width: 400px) {
  .actions { grid-template-columns: 1fr; }
}

/* share dialog: the pull as an image, with its background picker */
#sharebox { width: min(460px, calc(100% - 32px)); max-height: 94dvh; overflow-y: auto; }
.share-format { margin: -2px 0 10px; }
.share-canvas { display: block; width: auto; max-width: 100%; height: min(44dvh, 520px); margin: 0 auto; border-radius: 4px; background: var(--surface-2); }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
#sharebox .sc-group { margin-top: 12px; }
#sharebox .sc-swatches { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
#sharebox .sc-swatch { border-radius: 3px; }