/* GameTinkerer visual system v4 (white, Nintendo-JP-leaning layout; replaces v2.1 dark) — applied 2026-09-27.
   Base below: "Japanese light" variant (v3-jp) — proposed by Claude (Anthropic), 2026-09-27.
   Pure white background (v3.1, per user), sumi ink text, one coral-vermilion accent, Mincho serif headings,
   hairline rules, generous whitespace. Borrows *principles* from Japanese brand sites (MUJI, minä perhonen,
   21_21 DESIGN SIGHT, Nintendo JP) without reproducing any one site's layout, logo or assets.
   Keeps every v1 class name, so page markup and tool JS are unchanged. */
@font-face{font-family:"Zen Kaku Gothic New";src:url("/assets/fonts/zen-kaku-gothic-new-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("/assets/fonts/zen-kaku-gothic-new-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("/assets/fonts/zen-kaku-gothic-new-latin-700-normal.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
:root{
  --bg:#FFFFFF; --paper:#FFFFFF; --paper2:#F7F7F8; --paper3:#F0F0F2;
  --ink:#16171A; --ink2:#44474E; --muted:#7D818A; --line:#ECECEF; --line2:#DADBE0;
  /* Accent: coral vermilion. --accent for fills/rules, --accent-text for text-on-paper (AA contrast). */
  --a:217 67 79; --accent:#D9434F; --accent-text:#B8343F; --accent-hi:#E86A74; --accent-deep:#9E2A34; --accent-ink:#FFFFFF;
  --accent-soft:rgb(var(--a) / .08);
  /* Category hues, muted traditional tones */
  --leaf:#5E9C6B; --sky:#3D7BB0; --teal:#4E9990; --indigo:#44548F; --violet:#8A6BB0;
  --warn:#B7791F; --warn-soft:#FFF6E8; --bad:#B8343F; --bad-soft:#FCEDEE; --good:#2F7D55; --good-soft:#ECF6F0;
  --head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Segoe UI",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-sm:4px; --r:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{position:relative;margin:0;background:var(--bg);color:var(--ink);font:16px/1.9 var(--body);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--accent-deep)}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:6px 24px;padding-block:16px 0;flex-wrap:wrap}
.brand{position:relative;display:inline-flex;align-items:center;gap:0;font:700 22px/1 var(--head);color:var(--ink);text-decoration:none;letter-spacing:.01em;padding-bottom:14px}
/* Round seal mark (hanko-style ring) — deliberately round, not a square block */
.brand::before{content:"";width:32px;height:32px;flex:none;border-radius:50%;margin-right:12px;border:2px solid var(--accent);background:var(--paper)}
.brand::after{content:"";position:absolute;left:8px;top:calc(50% - 7px);width:16px;height:16px;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9434F' stroke-width='2.4' 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-text)}
.site-nav{display:flex;gap:28px;margin-left:auto;padding-bottom:14px}
.site-nav a{color:var(--ink2);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.site-nav a:hover{color:var(--accent-text)}

/* Game section tabs: quiet text links with an underline marker */
nav.game{flex-basis:100%;display:flex;gap:4px 26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:2px}
nav.game a{position:relative;padding:12px 0 13px;text-decoration:none;color:var(--ink2);font-size:14px;font-weight:500;letter-spacing:.04em}
nav.game a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s}
nav.game a:hover{color:var(--ink)}
nav.game a:hover::after{transform:scaleX(.35)}
nav.game a[aria-current="page"]{color:var(--ink);font-weight:700}
nav.game a[aria-current="page"]::after{transform:scaleX(1)}
nav.game a:first-child{font-family:var(--head);font-weight:700;letter-spacing:.02em}

/* ---------- Typography ---------- */
main{padding-block:40px 96px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.35;letter-spacing:.01em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(30px,4vw,46px);margin:6px 0 18px}
h2{font-size:clamp(21px,2.2vw,26px);margin:64px 0 22px;display:flex;align-items:center;gap:14px}
h2::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
h2::after{content:"";flex:1;height:1px;background:var(--line);min-width:40px}
.card h2::before,.card h3::before,.card h2::after,.reference-summary h2::before,.reference-summary h2::after{display:none}
h3{font-size:19px;margin:28px 0 10px}
.lede{color:var(--ink2);font-size:clamp(16px,1.5vw,18px);line-height:2;max-width:60ch;margin:0 0 28px}
p{max-width:72ch}
.muted{color:var(--muted)}
.crumbs{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);margin:0 0 10px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--accent-text)}

/* Home hero: first h1 without breadcrumbs */
main .wrap>h1:first-child{font-size:clamp(36px,5.4vw,64px);line-height:1.25;max-width:15ch;margin:48px 0 24px}
main .wrap>h1:first-child+.lede{font-size:clamp(16px,1.6vw,19px);max-width:52ch;margin-bottom:56px}

/* ---------- Cards & grids ---------- */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;overflow:hidden}
.card h2,.card h3{margin-top:0}
.card h3{font-size:24px}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font:700 14px/1 var(--body);letter-spacing:.08em;text-decoration:none;
  padding:14px 26px;border-radius:999px;color:#fff;background:var(--accent);box-shadow:0 3px 0 var(--accent-deep);transition:transform .12s,box-shadow .12s,background .12s}
.cta:hover{color:#fff;background:#C93B47}
.cta:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-deep)}
#games .card{padding:36px 36px 34px;border-color:var(--line2);background:var(--paper2)}
#games .card>*{position:relative;z-index:1}
#games .card p{max-width:54ch;color:var(--ink2)}

/* Quick-link cards: hairline card, colored top rule, ring icon, Mincho title */
.quick-link{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);padding:24px 24px 28px;transition:border-color .2s,box-shadow .2s,transform .2s}
.quick-link::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c,var(--accent))}
.quick-link::after{content:"→";position:absolute;right:22px;bottom:18px;color:var(--line2);font-weight:700;transition:transform .2s,color .2s}
.quick-link strong{font:700 19px/1.4 var(--head);letter-spacing:.01em;padding-right:16px;color:var(--ink)}
.quick-link strong::before{content:"";display:block;width:42px;height:42px;border-radius:50%;margin-bottom:16px;
  background:var(--paper) var(--i,none) center/19px no-repeat;border:1px solid color-mix(in srgb,var(--c,var(--accent)) 55%,transparent)}
.quick-link span{color:var(--muted);font-size:14px;line-height:1.8;padding-right:12px}
.quick-link:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 14px 30px -18px rgba(20,22,30,.22)}
.quick-link:hover::after{transform:translateX(3px);color:var(--c,var(--accent))}
.grid>.quick-link:nth-child(6n+1){--c:var(--accent)}.grid>.quick-link:nth-child(6n+2){--c:var(--leaf)}
.grid>.quick-link:nth-child(6n+3){--c:var(--sky)}.grid>.quick-link:nth-child(6n+4){--c:var(--teal)}
.grid>.quick-link:nth-child(6n+5){--c:var(--indigo)}.grid>.quick-link:nth-child(6n+6){--c:var(--violet)}
.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='%23D9434F' stroke-width='1.8' 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='%235E9C6B' stroke-width='1.8' 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='%233D7BB0' stroke-width='1.8' 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='%234E9990' stroke-width='1.8' 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='%2344548F' stroke-width='1.8' 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='%238A6BB0' stroke-width='1.8' 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:48px}
.grid>.card:has(.cta){display:flex;flex-direction:column;align-items:flex-start}
.grid>.card:has(.cta) .cta{margin-top:22px}

/* ---------- Notices & summaries ---------- */
.notice{position:relative;border:1px solid #EBD9BD;background:var(--warn-soft);padding:14px 18px 14px 48px;border-radius:var(--r);margin:22px 0;font-size:14.5px;color:var(--ink2);max-width:78ch}
.notice::before{content:"!";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--body);color:#fff;background:var(--warn)}
.notice.example{border-color:#CFE3DE;background:#F0F7F5}
.notice.example::before{content:"i";background:var(--teal)}
.reference-summary{position:relative;background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--r);padding:22px 24px;max-width:78ch;margin:24px 0}
.reference-summary>strong{display:block;font:700 20px/1.45 var(--head)}
.reference-summary p{margin:8px 0 0;color:var(--ink2)}
.content-meta{font-size:13px;color:var(--muted);margin-top:-10px;letter-spacing:.04em}
.content-meta a{color:var(--ink2)}
.contents{background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:18px 0;max-width:78ch;margin:28px 0 36px;counter-reset:toc}
.contents>strong{font:500 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.contents ul{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 28px}
.contents li{margin:0;counter-increment:toc;display:flex;gap:12px;align-items:baseline}
.contents li::before{content:counter(toc,decimal-leading-zero);font:700 13px/1 var(--head);color:var(--accent-text)}
.contents a{color:var(--ink);text-decoration:none;font-size:14.5px}
.contents a:hover{color:var(--accent-text);text-decoration:underline}

/* ---------- Buttons & form controls ---------- */
.btn{font:700 14px/1 var(--body);letter-spacing:.06em;border:0;color:#fff;padding:13px 24px;border-radius:999px;cursor:pointer;background:var(--accent);box-shadow:0 3px 0 var(--accent-deep);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:#C93B47}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line2);box-shadow:0 2px 0 var(--line2)}
.btn.ghost:hover{border-color:var(--ink2)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
input[type=search],input[type=text],input[type=number],select{font:inherit;font-size:14.5px;letter-spacing:.02em;padding:11px 14px;border:1px solid var(--line2);border-radius:var(--r);background-color:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input[type=search],.picker input[type=text]{padding-left:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D818A' 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%/16px no-repeat}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgb(var(--a) / .12)}
input[type=number]{width:74px}
select{padding-right:38px;appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D818A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/15px no-repeat}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.filter-label{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;color:var(--muted);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.filter-label input,.filter-label select{text-transform:none;letter-spacing:.02em}
.picker input{width:100%}

/* ---------- Tools ---------- */
.tool{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);margin-top:8px}
.tool>*{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;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(--paper);border:1px solid var(--line2);border-radius:var(--r);max-height:300px;overflow:auto;margin-top:6px;padding:6px;box-shadow:0 18px 40px -16px rgba(20,22,30,.22)}
.suggest button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;border-radius:var(--r-sm);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:16px 0 0;display:flex;flex-direction:column;gap:8px}
.sel li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper2);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.sel li .nm{flex:1;min-width:140px;font:700 15px/1.4 var(--head)}
.sel label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.x{background:transparent;border:1px solid var(--line2);color:var(--muted);font-size:16px;cursor:pointer;line-height:1;border-radius:50%;min-width:30px;min-height:30px}
.x:hover{color:var(--bad);border-color:var(--bad)}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.summary-grid>*{background:var(--paper2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.summary-grid strong{display:block;font:700 26px/1.2 var(--head);color:var(--accent-text)}
.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:20px}
.issues{list-style:none;padding:0;margin:10px 0 0}
.issues li{background:var(--bad-soft);color:var(--bad);border:1px solid #F2CFD2;border-radius:var(--r);padding:8px 12px;margin-bottom:6px;font-size:14.5px}
.issues li.warn{background:var(--warn-soft);color:#8A5A12;border-color:#EBD9BD}
.ok-line{background:var(--good-soft);color:var(--good);border:1px solid #CDE6D7;border-radius:var(--r);padding:8px 12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14.5px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--paper2);font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap}
tbody tr:last-child>*{border-bottom:0}
tbody tr:hover{background:var(--paper2)}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.reference-content caption{padding:16px 16px 8px;text-align:left;color:var(--muted);font-size:13px;caption-side:top}
.reference-content tbody th{font:700 15px/1.5 var(--head);color:var(--ink);text-transform:none;letter-spacing:.01em}
.reference-content tbody th a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2)}
.reference-content tbody th a:hover{color:var(--accent-text);border-color:var(--accent)}
.scientific{display:block;color:var(--muted);font-style:italic;font-size:12.5px;font-weight:400;font-family:var(--body)}
.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:140px}tr[id^="animal-"]:target{background:var(--accent-soft)}

/* Pills / tags */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;letter-spacing:.06em;padding:2px 10px;border-radius:999px;background:var(--paper);color:var(--ink2);white-space:nowrap;border:1px solid var(--line2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.pill.ok{background:var(--good-soft);color:var(--good);border-color:#CDE6D7}.pill.ok::before{background:var(--good)}
.pill.no{background:var(--bad-soft);color:var(--bad);border-color:#F2CFD2}.pill.no::before{background:var(--bad)}

/* ---------- Reference pages ---------- */
.prose{max-width:70ch}
.prose p,.prose li{color:var(--ink2)}
.reference-content{max-width:84ch}
.reference-content p,.reference-content li{max-width:70ch;color:var(--ink2)}
.reference-content li{margin:10px 0}
.reference-content section{scroll-margin-top:140px}
.source-list{border-top:1px solid var(--line);margin-top:48px;padding-top:8px}
.source-list p,.source-list li{font-size:13.5px;color:var(--muted)}
.related-pages{margin-top:56px}
.faq{margin:0;border-top:1px solid var(--line)}
.faq dt{position:relative;font:700 17px/1.6 var(--head);margin:0;padding:20px 0 4px 34px}
.faq dt::before{content:"Q";position:absolute;left:0;top:20px;font:700 18px/1.5 var(--head);color:var(--accent-text)}
.faq dd{position:relative;margin:0;padding:0 0 20px 34px;color:var(--ink2);border-bottom:1px solid var(--line)}
.faq dd::before{content:"A";position:absolute;left:0;top:0;font:700 18px/1.5 var(--head);color:var(--muted)}

/* Dated reveal archive */
.drop-history{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);margin:12px 0;padding:0}
.drop-history summary{cursor:pointer;font:700 17px/1.6 var(--head);padding:18px 52px 18px 22px;list-style:none;position:relative}
.drop-history summary::-webkit-details-marker{display:none}
.drop-history summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font:400 22px/1 var(--body);color:var(--muted);transition:transform .2s}
.drop-history[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.drop-history summary:hover{color:var(--accent-text)}
.drop-history summary .pill{margin-left:8px;vertical-align:2px}
.drop-history>*:not(summary){margin-inline:22px}
.drop-history[open]{padding-bottom:18px;border-color:var(--line2)}
.drop-source,.drop-note{font-size:13.5px;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:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.drop-totals>div{padding:18px 20px;border-left:1px solid var(--line)}
.drop-totals>div:first-child{border-left:0;padding-left:0}
.drop-totals dt{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.drop-totals dd{font:700 36px/1.2 var(--head);margin:6px 0 0;color:var(--ink)}
.drop-totals>div:nth-child(1) dd{color:var(--accent-text)}
.drop-scroll-hint{display:none}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);background:var(--paper2);font-size:13px;color:var(--muted);letter-spacing:.03em}
footer.site .wrap{padding-block:44px 52px;display:flex;flex-direction:column;gap:10px}
footer.site .wrap>div:last-child{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 22px}
footer.site a{color:var(--ink2);text-decoration:none}
footer.site a:hover{color:var(--accent-text)}

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

@media (max-width:600px){
  .wrap{padding-inline:18px}
  main{padding-block:24px 56px}
  header.site .wrap{padding-top:12px;gap:4px 16px}
  .brand{font-size:20px;padding-bottom:10px}.brand::before{width:28px;height:28px;margin-right:10px}.brand::after{left:7px;width:14px;height:14px;top:calc(50% - 5px)}
  .site-nav{gap:18px;padding-bottom:10px}.site-nav a{font-size:12px}
  nav.game{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:22px;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:13.5px;padding:10px 0 11px}
  h2{margin-top:48px}
  main .wrap>h1:first-child{margin-top:20px}
  .lede{font-size:15.5px;line-height:1.9;margin-bottom:20px}
  .notice{font-size:14px;padding:12px 14px 12px 44px}.notice::before{left:14px;top:14px}.notice .btn{margin-top:8px}
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drop-totals{grid-template-columns:repeat(2,minmax(0,1fr))}.drop-totals>div:nth-child(3){border-left:0;padding-left:0}.drop-totals>div:nth-child(n+3){border-top:1px solid var(--line)}
  .summary-grid strong{font-size:22px}.drop-totals dd{font-size:30px}
  .sel li .nm{flex-basis:100%}.sel label{font-size:13px}.plan-list{display:block}
  .reference-summary{padding:18px}.reference-summary>strong{font-size:18px}
  .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:18px}
  #games .card{padding:26px 22px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ======================================================================
   v4 "closer to Nintendo JP" overrides — Claude (Anthropic), 2026-09-27.
   Borrowed *patterns*: all-sans bold gothic type, section heading with a gray rule and an accent
   segment under the title, borderless thumbnail cards with a circle-arrow, square-ish solid buttons,
   a "NEW" corner ribbon. Deliberately NOT borrowed: Nintendo red (#E60012), the red box logo,
   centred top nav, any Nintendo imagery. Our accent stays coral #D9434F; our logo stays a round seal.
   ====================================================================== */
:root{
  --head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Segoe UI",system-ui,sans-serif;
  --ink:#2F3033; --ink2:#4A4C51; --muted:#8C8E94; --line:#E6E6E8; --line2:#D4D5D9; --paper2:#F5F5F6;
  --r:6px;
}
body{line-height:1.8;letter-spacing:.03em;color:var(--ink)}
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:.03em;color:var(--ink)}
h1{font-size:clamp(28px,3.6vw,40px);line-height:1.4}
main .wrap>h1:first-child{font-size:clamp(34px,4.8vw,56px);line-height:1.3;max-width:18ch}
.brand{font-family:var(--head);font-weight:700;letter-spacing:.02em}
nav.game a:first-child{font-family:var(--head)}

/* Section heading: bold title, full-width gray rule, accent segment under the title only */
h2{display:block;font-size:clamp(20px,2vw,24px);line-height:1.35;margin:72px 0 28px;padding-bottom:12px;border-bottom:2px solid var(--line);
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:15px;text-decoration-skip-ink:none}
h2::before,h2::after{display:none}
.card h2,.reference-summary h2{text-decoration:none;border:0;padding:0}

/* Borderless thumbnail cards */
.grid{gap:36px 28px}
.quick-link{background:none;border:0;border-radius:0;padding:0 0 18px;border-bottom:1px solid var(--line);gap:12px;overflow:visible}
.quick-link::before{display:none}
.quick-link strong{font:700 17px/1.55 var(--head);letter-spacing:.03em;padding-right:0}
.quick-link strong::before{width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r);margin-bottom:16px;border:0;
  background:color-mix(in srgb,var(--c,var(--accent)) 11%,#fff) var(--i,none) center/52px no-repeat;
  transition:filter .2s}
.quick-link span{font-size:13.5px;line-height:1.75;color:var(--muted);padding-right:30px}
.quick-link::after{content:"";right:0;bottom:18px;width:18px;height:18px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") center/12px no-repeat}
.quick-link:hover{transform:none;box-shadow:none;border-color:var(--line)}
.quick-link:hover strong{color:var(--accent-text)}
.quick-link:hover strong::before{filter:brightness(.96)}
.quick-link:hover::after{transform:translateX(2px)}
/* "NEW" corner ribbon on the live reveal tracker */
.quick-link[href*="zoopedia-drops"] strong::after{content:"NEW";position:absolute;left:0;top:0;width:58px;height:58px;
  background:linear-gradient(135deg,var(--accent) 50%,transparent 50%);border-top-left-radius:var(--r);
  color:#fff;font:700 11px/1 var(--body);letter-spacing:.08em;padding:13px 0 0 4px;transform-origin:0 0}
.quick-link[href*="zoopedia-drops"] strong::after{display:flex;justify-content:flex-start}
.quick-link[href*="zoopedia-drops"] strong{position:static}
.quick-link[href*="zoopedia-drops"]{position:relative}

/* Game banner card */
#games .card{background:var(--paper2);border:0;border-radius:var(--r);padding:40px}
#games .card h3{font-size:26px}

/* Buttons: solid, square-ish, with a small circle-arrow */
.cta,.btn{border-radius:4px;box-shadow:none;letter-spacing:.06em;padding:14px 28px 14px 22px}
.btn:not(.ghost)::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;vertical-align:-2px;margin-right:8px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9434F' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E") center/10px no-repeat}
.cta{gap:0;padding:14px 26px}
.cta:active,.btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost{border-radius:4px;box-shadow:none;padding:13px 22px}

/* Quieter reference blocks */
.reference-summary{border:0;border-left:3px solid var(--accent);border-radius:0;background:var(--paper2);padding:20px 24px}
.reference-summary>strong{font:700 18px/1.5 var(--head)}
.faq dt{font:700 16px/1.7 var(--head)}
.faq dt::before,.faq dd::before{font-family:var(--head)}
.contents li::before{font-family:var(--head)}
.drop-history summary{font:700 16px/1.6 var(--head)}
.drop-totals dd{font-family:var(--head)}
.sel li .nm{font:700 15px/1.4 var(--head)}
.reference-content tbody th{font:700 14.5px/1.55 var(--head)}
thead th{background:var(--paper2);color:var(--ink2);font-weight:700}
.card{border-radius:var(--r)}
.tool>*{border-radius:var(--r)}

@media (max-width:600px){
  h2{margin-top:52px}
  .grid{gap:28px}
  #games .card{padding:26px 22px}
}


/* ---------------------------------------------------------------------------
   Integration fixes originally made by Codex (2026-09-27) for v2.1, carried over to v4
   and adapted to the white theme by Claude (2026-09-27).
   --------------------------------------------------------------------------- */
/* Overlays stay readable: solid backgrounds */
.suggest,.skip-link{background-color:#FFFFFF}
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}
/* Shared analytics choice banner (Codex) — light version */
.analytics-consent{position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:660px;padding:20px;background:#FFFFFF;border:1px solid var(--line2);border-radius:8px;box-shadow:0 10px 36px rgba(20,22,30,.18);color:var(--ink)}
.analytics-consent[hidden]{display:none}
.analytics-consent h2{font-size:18px;margin:0 0 8px;padding:0;border:0;text-decoration:none}
.analytics-consent p{font-size:14px;line-height:1.7;margin:0 0 14px;color:var(--ink2)}
.analytics-consent .row{flex-wrap:wrap;gap:12px}
.analytics-consent a{font-size:14px}
.analytics-settings{color:inherit;background:none;border:0;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.analytics-settings[hidden]{display:none}
@media(max-width:480px){.analytics-consent{padding:16px;left:10px;right:10px;bottom:10px}.analytics-consent .btn{font-size:13px}}

/* Icons for cards Codex added later (release date, editions, system requirements) + a default icon — Claude, 2026-09-27 */
.quick-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D818A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1'/%3E%3C/svg%3E")}
.quick-link[href*="release-date"]{--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='%23D9434F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
.quick-link[href*="editions"]{--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='%238A6BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%238A6BB0'/%3E%3C/svg%3E")}
.quick-link[href*="system-requirements"]{--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='%233D7BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E")}
/* Colour follows content type, not grid position (beats the nth-child cycle) */
.grid>.quick-link[href*="zoopedia-drops"],.grid>.quick-link[href*="release-date"]{--c:var(--accent)}
.grid>.quick-link[href$="/animals/"]{--c:var(--leaf)}
.grid>.quick-link[href*="aquarium"]{--c:var(--sky)}
.grid>.quick-link[href*="aviar"]{--c:var(--teal)}
.grid>.quick-link[href*="guides/"]{--c:var(--indigo)}
.grid>.quick-link[href*="calculator"],.grid>.quick-link[href*="compatib"],.grid>.quick-link[href*="planner"],.grid>.quick-link[href*="editions"]{--c:var(--violet)}
.grid>.quick-link[href*="system-requirements"]{--c:var(--sky)}

/* Codex, 2026-09-27: scoped wishlist UI, preserving Claude visual v4. */
.shortlist-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));align-items:stretch}
.shortlist-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.shortlist-card[hidden]{display:none}.shortlist-card h3,.shortlist-card p{margin:0}.shortlist-card h3{font-size:20px}
.shortlist-card .btn{margin-top:auto;min-height:44px}.shortlist-card.is-selected{border-color:var(--accent,#e8503a);box-shadow:inset 0 0 0 1px currentColor}
.shortlist-filters{align-items:end;flex-wrap:wrap}.shortlist-filters label{display:flex;flex:1 1 160px;flex-direction:column;gap:6px;min-width:0}
.shortlist-filters input,.shortlist-filters select,#share-url{width:100%;min-height:44px;box-sizing:border-box}#share-url{font-size:16px}