/* GameTinkerer visual system v2.1 (coral) — proposed by Claude (Anthropic), 2026-09-26.
   Lighter slate background with translucent glass panels; one accent colour set via --a/--accent* tokens, chunky pill controls,
   rounded glowing cards. All class names from v1 are kept so page markup and tool JS are unchanged. */
/* Self-hosted variable fonts (SIL OFL 1.1, licenses in assets/fonts/). No third-party font requests. */
@font-face{font-family:"Bricolage Grotesque";src:url("/assets/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-wght.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root{
  /* Surfaces: lighter slate base with translucent (glass) panels */
  --bg:#131826; --bg2:rgba(6,9,16,.45); --surface:rgba(255,255,255,.045); --surface2:rgba(255,255,255,.07); --surface3:rgba(255,255,255,.10);
  --panel-end:rgba(255,255,255,.02);
  --ink:#EEF1F6; --ink2:#C9D0DD; --muted:#94A0B4; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  /* Accent theme (swap these 6 lines to re-theme the whole site) */
  --a:251 113 133; --accent:#FB7185; --accent-hi:#FDA4AF; --accent2:#F43F5E; --accent-deep:#9F1239; --accent-ink:#1F0409;
  --accent-soft:rgb(var(--a) / .12); --accent-glow:rgb(var(--a) / .35);
  --glow2:90 169 255;
  --teal:#4FD1C5; --sky:#5AA9FF; --leaf:#8BCB6B; --rose:#F38DB4; --indigo:#8EA2FF; --violet:#C08CFF;
  --warn:#F5A97F; --warn-soft:rgba(245,169,127,.10); --bad:#FF8C7A; --bad-soft:rgba(255,120,100,.12);
  --good:#7FE0A8; --good-soft:rgba(110,220,160,.12);
  --head:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-sm:10px; --r:16px; --r-lg:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.65 var(--body);
  background:
    radial-gradient(1000px 520px at 10% -140px, rgb(var(--a) / .16), transparent 70%),
    radial-gradient(900px 480px at 95% -60px, rgb(var(--glow2) / .14), transparent 70%),
    radial-gradient(700px 500px at 50% 110%, rgb(var(--glow2) / .06), transparent 70%),
    var(--bg);
  background-attachment:fixed;}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hi)}
img{max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}
.wrap{max-width:1140px;margin:0 auto;padding-inline:16px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(19,24,38,.72);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line);box-shadow:0 10px 24px -20px rgba(0,0,0,.8)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;padding-block:12px;flex-wrap:wrap}
.brand{position:relative;display:inline-flex;align-items:center;gap:0;font:800 21px/1 var(--head);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand::before{content:"";width:30px;height:30px;flex:none;border-radius:9px;margin-right:10px;
  background:linear-gradient(145deg,var(--accent),var(--accent2));box-shadow:0 3px 0 var(--accent-deep),0 0 18px var(--accent-glow)}
.brand::after{content:"";position:absolute;left:6px;top:50%;width:18px;height:18px;transform:translateY(-60%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A0F02' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E") center/contain no-repeat}
.brand span{color:var(--accent)}
.site-nav{display:flex;gap:6px;margin-left:auto}
.site-nav a{padding:7px 14px;border-radius:999px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:15px;border:1px solid transparent}
.site-nav a:hover{color:var(--ink);background:var(--surface2);border-color:var(--line)}

/* Game section tabs */
nav.game{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
nav.game a{position:relative;padding:7px 14px;border-radius:999px;text-decoration:none;color:var(--ink2);font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--surface)}
nav.game a:hover{color:var(--ink);border-color:var(--line2);background:var(--surface2)}
nav.game a[aria-current="page"]{color:var(--ink);border-color:rgb(var(--a) / .55);background:linear-gradient(180deg,rgb(var(--a) / .18),rgb(var(--a) / .08));box-shadow:0 0 0 1px rgb(var(--a) / .15),0 6px 18px -8px var(--accent-glow)}
nav.game a:first-child{font-family:var(--head);font-weight:800}

/* ---------- Typography ---------- */
main{padding-block:28px 72px}
h1,h2,h3{font-family:var(--head);line-height:1.12;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;margin:4px 0 12px}
h2{font-size:clamp(22px,2.4vw,28px);font-weight:800;margin:48px 0 16px;display:flex;align-items:center;gap:12px}
h2::before{content:"";width:22px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));flex:none}
.card h2::before,.card h3::before,.reference-summary h2::before{display:none}
h3{font-size:19px;font-weight:700;margin:24px 0 8px}
.lede{color:var(--ink2);font-size:clamp(17px,1.6vw,19px);max-width:62ch;margin:0 0 24px}
p{max-width:75ch}
.muted{color:var(--muted)}
.crumbs{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:6px 0 6px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent)}

/* Home hero: first h1 without breadcrumbs */
main .wrap>h1:first-child{font-size:clamp(38px,6vw,68px);max-width:16ch;margin-top:36px;
  background:linear-gradient(180deg,#FFFFFF 30%,#C9D0DD);-webkit-background-clip:text;background-clip:text;color:transparent}
main .wrap>h1:first-child+.lede{font-size:clamp(18px,1.8vw,21px);max-width:56ch;margin-bottom:40px}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{position:relative;backdrop-filter:blur(6px);background:linear-gradient(180deg,var(--surface),var(--panel-end));border:1px solid var(--line);border-radius:var(--r);padding:20px;overflow:hidden}
.card h2,.card h3{margin-top:0}
.card h3{font-size:24px;font-weight:800}
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:800;text-decoration:none;
  padding:11px 20px;border-radius:999px;color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-hi),var(--accent2));
  box-shadow:0 4px 0 var(--accent-deep),0 10px 24px -10px var(--accent-glow);transition:transform .12s,box-shadow .12s}
.cta:hover{color:var(--accent-ink);transform:translateY(-1px)}
.cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
#games .card{padding:30px;border-color:var(--line2);
  background:
    radial-gradient(420px 220px at 100% 0%,rgba(139,203,107,.18),transparent 70%),
    radial-gradient(380px 220px at 0% 100%,rgba(90,169,255,.12),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.06),var(--panel-end))}
#games .card::after{content:"";position:absolute;right:24px;top:24px;width:150px;height:150px;opacity:.13;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E") center/contain no-repeat}
#games .card p{max-width:60ch}

/* Quick-link cards: colored top edge + icon chip, cycling through category hues */
.quick-link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);padding:20px 20px 24px;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.quick-link::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c,var(--accent))}
.quick-link::after{content:"→";position:absolute;right:18px;bottom:16px;color:var(--muted);font-weight:800;transition:transform .15s,color .15s}
.quick-link strong{font:800 19px/1.2 var(--head);letter-spacing:-.01em;padding-right:16px;color:var(--ink)}
.quick-link strong::before{content:"";display:block;width:40px;height:40px;border-radius:12px;margin-bottom:14px;
  background:color-mix(in srgb,var(--c,var(--accent)) 16%,transparent) var(--i,none) center/20px no-repeat;border:1px solid color-mix(in srgb,var(--c,var(--accent)) 45%,transparent)}
.quick-link span{color:var(--muted);font-size:15px;line-height:1.5;padding-right:10px}
.quick-link:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,var(--accent)) 55%,var(--line));box-shadow:0 16px 36px -18px color-mix(in srgb,var(--c,var(--accent)) 70%,transparent)}
.quick-link:hover::after{transform:translateX(3px);color:var(--c,var(--accent))}
/* Icons keyed on destination URL so meaning survives reordering */
.quick-link[href*="zoopedia-drops"]{--c:var(--accent);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF1F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5z'/%3E%3C/svg%3E")}
.quick-link[href$="/animals/"]{--c:var(--leaf);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238BCB6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E")}
.quick-link[href*="aquarium"]{--c:var(--sky);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235AA9FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12c.94-3.46 4.94-6 8.5-6 3.56 0 6.06 2.54 7 6-.94 3.47-3.44 6-7 6s-7.56-2.53-8.5-6Z'/%3E%3Cpath d='M18 12v.5'/%3E%3Cpath d='M7 10.67C7 8 5.58 5.97 2.73 5.5c-1 1.5-1 5 .23 6.5-1.24 1.5-1.24 5-.23 6.5C5.58 18.03 7 16 7 13.33'/%3E%3C/svg%3E")}
.quick-link[href*="aviar"]{--c:var(--teal);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FD1C5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h.01'/%3E%3Cpath d='M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20'/%3E%3Cpath d='m20 7 2 .5-2 .5'/%3E%3Cpath d='M10 18v3'/%3E%3Cpath d='M14 17.75V21'/%3E%3Cpath d='M7 18a6 6 0 0 0 3.84-10.61'/%3E%3C/svg%3E")}
.quick-link[href*="guides/"]{--c:var(--indigo);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238EA2FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E")}
.quick-link[href*="calculator"],.quick-link[href*="compatib"],.quick-link[href*="planner"]{--c:var(--violet);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C08CFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cpath d='M8 6h8M16 14v4M8 10h.01M12 10h.01M16 10h.01M12 14h.01M8 14h.01M12 18h.01M8 18h.01'/%3E%3C/svg%3E")}
.quick-tools{margin-top:40px}
.grid>.card:has(.cta){display:flex;flex-direction:column;align-items:flex-start}
.grid>.card:has(.cta) .cta{margin-top:auto;margin-top:18px}

/* ---------- Notices & summaries ---------- */
.notice{position:relative;border:1px solid rgba(245,169,127,.30);background:linear-gradient(180deg,rgba(245,169,127,.10),rgba(245,169,127,.04));
  padding:14px 16px 14px 48px;border-radius:var(--r-sm);margin:18px 0;font-size:15px;color:var(--ink2);max-width:80ch}
.notice::before{content:"!";position:absolute;left:15px;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:800 13px/1 var(--head);color:#1E0E05;background:var(--warn)}
.notice.example{border-color:rgba(79,209,197,.35);background:linear-gradient(180deg,rgba(79,209,197,.10),rgba(79,209,197,.03))}
.notice.example::before{content:"i";background:var(--teal)}
.reference-summary{position:relative;background:
    radial-gradient(500px 160px at 100% 0,rgb(var(--a) / .14),transparent 70%),
    linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line2);border-radius:var(--r);padding:20px 22px;max-width:80ch;margin:22px 0}
.reference-summary>strong{display:block;font:800 21px/1.25 var(--head);letter-spacing:-.01em}
.reference-summary p{margin:8px 0 0;color:var(--ink2)}
.content-meta{font-size:14px;color:var(--muted);margin-top:-8px}
.content-meta a{color:var(--ink2)}
.contents{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;max-width:80ch;margin:22px 0 32px}
.contents>strong{font:800 12px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contents ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.contents li{margin:0}
.contents a{display:inline-block;padding:6px 13px;border-radius:999px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink2);text-decoration:none;font-size:14px;font-weight:600}
.contents a:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- Buttons & form controls ---------- */
.btn{font:800 15px/1 var(--body);border:0;color:var(--accent-ink);padding:12px 20px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent2));box-shadow:0 4px 0 var(--accent-deep),0 10px 24px -12px var(--accent-glow);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.ghost{background:var(--surface2);color:var(--ink);border:1px solid var(--line2);box-shadow:0 3px 0 rgba(0,0,0,.45)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
input[type=search],input[type=text],input[type=number],select{font:inherit;font-size:15px;padding:10px 16px;border:1px solid var(--line2);border-radius:999px;
  background-color:var(--bg2);color:var(--ink);box-shadow:inset 0 2px 6px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s}
input[type=search],.picker input[type=text]{padding-left:40px;background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C94A6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px 50%/17px no-repeat}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 3px rgb(var(--a) / .18)}
input[type=number]{width:74px;padding-inline:12px;border-radius:var(--r-sm)}
select{padding-right:38px;appearance:none;background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C94A6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.filter-label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.filter-label input,.filter-label select{text-transform:none;letter-spacing:0;font-weight:500}
.picker input{width:100%}

/* ---------- Tools ---------- */
.tool{display:grid;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);margin-top:8px}
.tool>*{background:linear-gradient(180deg,var(--surface),var(--panel-end));border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
@media (max-width:820px){.tool{grid-template-columns:1fr}}
.picker{position:relative}
.suggest{position:absolute;z-index:5;left:0;right:0;top:100%;background:var(--surface2);border:1px solid var(--line2);border-radius:var(--r-sm);max-height:300px;overflow:auto;margin-top:6px;padding:6px;box-shadow:0 20px 40px -12px rgba(0,0,0,.7)}
.suggest button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:8px;font:inherit;color:var(--ink);cursor:pointer}
.suggest button:hover,.suggest button:focus{background:var(--accent-soft)}
.suggest small{color:var(--muted)}
.sel{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px}
.sel li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.sel li .nm{flex:1;min-width:140px;font-weight:800}
.sel label{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.x{background:var(--surface3);border:0;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;border-radius:50%;min-width:32px;min-height:32px}
.x:hover{color:var(--bad);background:var(--bad-soft)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.summary-grid>*{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.summary-grid strong{display:block;font:800 26px/1.1 var(--head);color:var(--accent)}
.plan-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.plan-card{margin-bottom:16px}.plan-card label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}.plan-card input{width:100%}.planner-actions{margin-block:18px}
.issues{list-style:none;padding:0;margin:10px 0 0}
.issues li{background:var(--bad-soft);color:var(--bad);border:1px solid rgba(255,140,122,.25);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:6px;font-size:15px}
.issues li.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,169,127,.25)}
.ok-line{background:var(--good-soft);color:var(--good);border:1px solid rgba(127,224,168,.25);border-radius:var(--r-sm);padding:8px 12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--surface2);font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.025)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.reference-content caption{padding:14px 14px 8px;text-align:left;color:var(--muted);font-size:14px;caption-side:top}
.reference-content tbody th{font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:800}
.reference-content tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--line2)}
.reference-content tbody th a:hover{color:var(--accent);border-color:var(--accent)}
.scientific{display:block;color:var(--muted);font-style:italic;font-size:13px;font-weight:400}
.also-exhibit{display:block;color:var(--muted);font-size:12px;font-weight:400}
.species-table{min-width:540px}.species-table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
tr[id^="animal-"]{scroll-margin-top:120px}tr[id^="animal-"]:target{background:var(--accent-soft)}

/* Pills / tags */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--surface3);color:var(--ink2);white-space:nowrap;border:1px solid var(--line2)}
.pill::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--muted)}
.pill.ok{background:var(--good-soft);color:var(--good);border-color:rgba(127,224,168,.3)}.pill.ok::before{background:var(--good)}
.pill.no{background:var(--bad-soft);color:var(--bad);border-color:rgba(255,140,122,.3)}.pill.no::before{background:var(--bad)}

/* ---------- Reference pages ---------- */
.prose{max-width:74ch}
.prose p,.prose li{color:var(--ink2)}
.reference-content{max-width:86ch}
.reference-content p,.reference-content li{max-width:74ch;color:var(--ink2)}
.reference-content li{margin:10px 0}
.reference-content section{scroll-margin-top:120px}
.source-list{border-top:1px solid var(--line);margin-top:40px;padding-top:8px}
.source-list p,.source-list li{font-size:14px;color:var(--muted)}
.related-pages{margin-top:48px}
.faq{display:grid;gap:0;margin:0}
.faq dt{font:800 17px/1.35 var(--head);margin:10px 0 0;padding:16px 18px 0;background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-sm) var(--r-sm) 0 0}
.faq dd{margin:0;padding:6px 18px 16px;color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-sm) var(--r-sm)}

/* Dated reveal archive */
.drop-history{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--surface),var(--panel-end));margin:12px 0;padding:0}
.drop-history summary{cursor:pointer;font:800 17px/1.5 var(--head);padding:16px 48px 16px 20px;list-style:none;position:relative}
.drop-history summary::-webkit-details-marker{display:none}
.drop-history summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.drop-history[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.drop-history summary:hover{color:var(--accent)}
.drop-history summary .pill{margin-left:8px;vertical-align:2px}
.drop-history>*:not(summary){margin-inline:20px}
.drop-history[open]{padding-bottom:16px;border-color:var(--line2)}
.drop-source,.drop-note{font-size:14px;color:var(--muted)}
.drop-table{min-width:520px}.drop-table-wrap:focus-visible,.drop-history summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.drop-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.drop-totals>div{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:linear-gradient(180deg,var(--surface2),var(--surface))}
.drop-totals dt{font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.drop-totals dd{font:800 34px/1.1 var(--head);margin:4px 0 0;color:var(--ink)}
.drop-totals>div:nth-child(1) dd{color:var(--accent)}.drop-totals>div:nth-child(2) dd{color:var(--leaf)}
.drop-totals>div:nth-child(3) dd{color:var(--sky)}.drop-totals>div:nth-child(4) dd{color:var(--teal)}
.drop-scroll-hint{display:none}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);background:rgba(0,0,0,.18);font-size:14px;color:var(--muted)}
footer.site .wrap{padding-block:36px 44px;display:flex;flex-direction:column;gap:10px}
footer.site .wrap>div:last-child{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px}
footer.site a{color:var(--ink2);text-decoration:none}
footer.site a:hover{color:var(--accent)}

/* ---------- Utilities ---------- */
.skip-link{position:absolute;left:16px;top:-100px;z-index:40;background:var(--surface2);color:var(--ink);padding:12px;border:2px solid var(--accent);border-radius:var(--r-sm)}
.skip-link:focus{top:8px}
[hidden]{display:none!important}

@media (max-width:600px){
  main{padding-block:18px 40px}
  header.site .wrap{gap:10px;padding-block:10px}
  .brand{font-size:19px}
  .site-nav a{padding:6px 10px;font-size:14px}
  nav.game{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
  nav.game::-webkit-scrollbar{display:none}
  nav.game a{white-space:nowrap;font-size:14px;padding:6px 12px}
  main .wrap>h1:first-child{margin-top:16px}
  .lede{font-size:16px;line-height:1.55;margin-bottom:16px}
  .notice{font-size:14px;padding:12px 12px 12px 44px}.notice::before{left:12px;top:13px}.notice .btn{margin-top:8px}
  .summary-grid,.drop-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .summary-grid strong{font-size:22px}.drop-totals dd{font-size:28px}
  .sel li .nm{flex-basis:100%}.sel label{font-size:14px}.plan-list{display:block}
  .reference-summary{padding:16px}.reference-summary>strong{font-size:18px}
  .contents{padding:14px}
  .reference-content table{min-width:340px}.reference-content .species-table{min-width:540px}.reference-content .drop-table{min-width:520px}
  .drop-scroll-hint{display:block;font-size:12px}
  .tool>*{padding:16px}
  #games .card{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Integration fixes by Codex, 2026-09-27: keep overlays readable on glass panels. */
.suggest,.skip-link{background-color:#202838}
nav.game{min-width:0}

/* Tool suggestions must escape card bounds and stay above the result panel. */
.tool>.card{overflow:visible}
.tool>.card:has(.suggest:not([hidden])){z-index:2}