/* Shared styles for the How to Fish guides. Page-specific layouts come first. */

/* skins layout */
.page-skins { color-scheme: dark }
.page-skins * { box-sizing: border-box }
.page-skins { font: 16px/1.5 system-ui, sans-serif; background: #0f172a; color: #e2e8f0; max-width: 1180px; margin: 35px auto; padding: 0 22px }
.page-skins h1 { font-size: 32px; line-height: 1.2; margin-bottom: 12px }
.page-skins h2 { margin: 32px 0 12px; color: #67e8f9; font-size: 24px }
.page-skins .intro,
.page-skins small,
.page-skins .count { color: #94a3b8 }
.page-skins .summary { background: #164e63; padding: 18px; border-radius: 12px; margin: 22px 0 }
.page-skins .summary p { margin: 4px 0 }
.page-skins .toolbar { position: sticky; top: 0; z-index: 2; background: #0f172a; padding: 8px 0 }
.page-skins input { width: 100%; font: inherit; padding: 14px; border: 1px solid #475569; border-radius: 8px; background: #1e293b; color: white }
.page-skins input:focus-visible,
.page-skins button:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px }
.page-skins .result-count { display: block; font-size: 14px; margin-top: 6px }
.page-skins .count { font-size: 14px; font-weight: 400; margin-left: 8px }
.page-skins .table-wrap { overflow-x: auto; border: 1px solid #334155; border-radius: 10px }
.page-skins table { width: 100%; border-collapse: collapse }
.page-skins td,
.page-skins th { padding: 9px 12px; border-bottom: 1px solid #334155; text-align: left }
.page-skins thead th { font-size: 14px; color: #94a3b8; font-weight: 500; background: #162035 }
.page-skins tbody th { font-size: 16px; font-weight: 600; min-width: 150px }
.page-skins tr:last-child td,
.page-skins tr:last-child th { border-bottom: 0 }
.page-skins .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px }
.page-skins .zero { color: #8491a8 }
.page-skins .preview { width: 230px; min-width: 200px; padding: 6px 10px }
.page-skins .image-button { display: block; width: 100%; padding: 0; background: #202c43; border: 0; border-radius: 7px; cursor: zoom-in }
.page-skins .image-button img { display: block; width: 100%; height: 96px; object-fit: contain }
.page-skins .rarity { display: block; font-size: 14px; font-weight: 400; color: #94a3b8; margin-top: 3px }
.page-skins .rare { color: #fca5a5 }
.page-skins .not-obtainable { font-weight: 700; color: #ff7316 }
.page-skins .legendary { color: #fcd34d }
.page-skins .common { color: #cbd5e1 }
.page-skins .notes { font-size: 14px; color: #cbd5e1; margin: 28px 0 }
.page-skins summary { cursor: pointer; color: #67e8f9; font-size: 16px }
.page-skins details p { max-width: 900px }
.page-skins footer { font-size: 14px; color: #94a3b8; margin: 32px 0 }
.page-skins dialog { width: min(1100px, 94vw); max-height: 90vh; background: #1e293b; color: #e2e8f0; border: 1px solid #475569; border-radius: 12px; padding: 18px }
.page-skins dialog::backdrop { background: #020617dd }
.page-skins dialog img { width: 100%; max-height: 70vh; object-fit: contain }
.page-skins dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.page-skins dialog button { font: inherit; background: #334155; color: white; border: 1px solid #64748b; border-radius: 6px; padding: 6px 14px; cursor: pointer }
.page-skins [hidden] { display: none !important }
@media(max-width:600px) {
.page-skins { padding: 0 14px; margin: 22px auto }
.page-skins h1 { font-size: 27px }
.page-skins .preview { min-width: 160px }
.page-skins .image-button img { height: 80px }
.page-skins .summary { padding: 14px }
}
.page-skins a { color: #7dd3fc }
.page-skins .skin-note { display: block; font-size: 10px; font-weight: 400; color: #cbd5e1; margin-top: 3px; max-width: 240px }
.page-skins .credits { margin-bottom: 20px }
.page-skins .owned-label { display:flex; align-items:center; gap:8px; width:fit-content; min-height:44px; cursor:pointer }
.page-skins input.owned-skin { width:20px; height:20px; margin:0; padding:0; flex:none; accent-color:#67e8f9; cursor:pointer }
.page-skins tr.is-owned { background:rgba(103,232,249,.06) }
.page-skins .checklist-info { margin:12px 0; font-size:14px; color:#cbd5e1 }
.page-skins #owned-count { color:#67e8f9 }
.page-skins .ownership-filter { display:flex; gap:6px; margin:10px 0 4px; flex-wrap:wrap }
.page-skins .ownership-filter button { font:inherit; min-height:44px; padding:8px 18px; border:1px solid #475569; border-radius:8px; background:#1e293b; color:#e2e8f0; cursor:pointer }
.page-skins .ownership-filter button[aria-pressed="true"] { background:#155e75; border-color:#67e8f9; color:#fff }

/* drip layout */
.page-drip { font:16px/1.5 system-ui;background:#0f172a;color:#e2e8f0;max-width:980px;margin:35px auto;padding:0 22px }
.page-drip h1 { font-size:32px }
.page-drip h2 { margin-top:32px;color:#67e8f9 }
.page-drip p { max-width:850px }
.page-drip input { box-sizing:border-box;width:100%;padding:14px;border:1px solid #475569;border-radius:8px;background:#1e293b;color:white;font:inherit;position:sticky;top:8px }
.page-drip table { width:100%;border-collapse:collapse }
.page-drip th,
.page-drip td { text-align:left;padding:9px 12px;border-bottom:1px solid #334155 }
.page-drip th { color:#94a3b8 }
.page-drip td:nth-child(n+2) { font-variant-numeric:tabular-nums }
.page-drip small { color:#94a3b8 }
.page-drip .key { background:#164e63;padding:18px;border-radius:12px }
.page-drip .notes { font-size:14px;color:#cbd5e1 }
.page-drip section[hidden],
.page-drip tr[hidden] { display:none }

/* gallery layout */
.page-gallery { margin:32px auto;padding:0 24px;max-width:1400px;background:#0f172a;color:#e2e8f0;font:16px/1.5 system-ui }
.page-gallery h1 { margin-bottom:4px }
.page-gallery p { color:#a8b8ce }
.page-gallery input { position:sticky;top:8px;z-index:2;background:#243249;border:1px solid #53617b;border-radius:8px;color:white;padding:14px;font:inherit;width:100%;box-sizing:border-box }
.page-gallery main { display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;margin-top:24px }
.page-gallery article { background:#182337;border:1px solid #293950;border-radius:14px;padding:18px }
.page-gallery h2 { font-size:21px;margin:0 0 10px }
.page-gallery .pair { display:flex;align-items:center }
.page-gallery .pair a { width:50%;color:#b9d4f6;text-decoration:none;text-align:center }
.page-gallery .pair img { width:100%;height:auto }
.page-gallery .none { width:50%;text-align:center;color:#92a0b5 }
.page-gallery a { color:#67e8f9 }
.page-gallery [hidden] { display:none!important }
.page-gallery main { grid-template-columns:repeat(auto-fill,min(100%,255px));gap:15px }
.page-gallery article { box-sizing:border-box;min-width:0;padding:14px;border-radius:12px }
.page-gallery article h2 { font-size:18px;margin:0 0 8px }
.page-gallery .pair { min-width:0 }
.page-gallery .pair img { display:block;aspect-ratio:1;object-fit:contain }

/* drip image viewer and reveal sections */
.page-drip { color-scheme:dark }
.page-drip h3 { color:#67e8f9;font-size:21px;margin-top:28px }
.page-drip .boss-category { margin-top:42px;border-top:1px solid #334155;padding-top:12px }
.page-drip .category-title,
.page-drip .boss-category>h2 { font-size:27px }
.page-drip .spoiler { margin:36px 0;padding:20px;border:1px solid #475569;border-radius:12px;background:#182337 }
.page-drip .spoiler summary { cursor:pointer;font-size:21px;font-weight:600 }
.page-drip .spoiler:not([open])>:not(summary) { display:none }
.page-drip dialog { position:fixed;inset:0;margin:auto;width:min(620px,92vw);max-height:90dvh;box-sizing:border-box;border:1px solid #52647f;border-radius:16px;padding:20px;background:#172033;color:#e2e8f0;box-shadow:0 20px 70px #0009 }
.page-drip dialog::backdrop { background:#000b }
.page-drip #viewer-label { text-align:center;font-size:20px;font-weight:600;color:#e2e8f0;margin:16px 35px 8px }
.page-drip .viewer-stage { display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center }
.page-drip #viewer-image { width:100%;max-height:65dvh;object-fit:contain }
.page-drip .viewer-stage button,
.page-drip #viewer-close { background:#2b3c55;border:1px solid #536681;color:white;border-radius:9px;cursor:pointer;font-size:30px;min-width:40px;min-height:44px }
.page-drip #viewer-close { position:absolute;top:9px;right:9px }
.page-drip .viewer-hint { text-align:center;font-size:13px;color:#a8b8ce;margin:8px 0 }
.page-drip:has(dialog[open]) { overflow:hidden }
.page-drip a[data-viewer]:focus-visible,
.page-drip button:focus-visible,
.page-drip summary:focus-visible { outline:3px solid #67e8f9;outline-offset:3px }
.page-drip article:target { outline:2px solid #67e8f9 }
.page-drip table { display:block;overflow-x:auto }
.page-drip dialog[open] { display:block }
@media(max-width:540px) {
.page-drip { padding:0 12px }
.page-drip dialog { padding:12px }
.page-drip .viewer-stage { grid-template-columns:36px minmax(0,1fr) 36px }
.page-drip .viewer-stage button { min-width:34px }
.page-drip #viewer-label { font-size:17px }
.page-drip .spoiler { padding:12px }
}
.page-drip .boss-category>summary { cursor:pointer;font-size:27px;font-weight:600;color:#67e8f9;padding:12px 0 }
.page-drip .boss-category:not([open])>:not(summary) { display:none }
.page-drip details.reveal-panel { margin:36px 0;padding:20px;border:1px solid #475569;border-radius:12px;background:#182337 }
.page-drip details.reveal-panel>summary { cursor:pointer;font-size:21px;font-weight:600;color:#e2e8f0;padding:0 }
.page-drip .explanations { margin-top:36px;padding-top:12px;border-top:1px solid #334155 }
@media(max-width:540px) {
.page-drip details.reveal-panel { padding:12px }
}

/* gallery image viewer and reveal sections */
.page-gallery { color-scheme:dark }
.page-gallery h3 { color:#67e8f9;font-size:21px;margin-top:28px }
.page-gallery .boss-category { margin-top:42px;border-top:1px solid #334155;padding-top:12px }
.page-gallery .category-title,
.page-gallery .boss-category>h2 { font-size:27px }
.page-gallery .spoiler { margin:36px 0;padding:20px;border:1px solid #475569;border-radius:12px;background:#182337 }
.page-gallery .spoiler summary { cursor:pointer;font-size:21px;font-weight:600 }
.page-gallery .spoiler:not([open])>:not(summary) { display:none }
.page-gallery dialog { position:fixed;inset:0;margin:auto;width:min(620px,92vw);max-height:90dvh;box-sizing:border-box;border:1px solid #52647f;border-radius:16px;padding:20px;background:#172033;color:#e2e8f0;box-shadow:0 20px 70px #0009 }
.page-gallery dialog::backdrop { background:#000b }
.page-gallery #viewer-label { text-align:center;font-size:20px;font-weight:600;color:#e2e8f0;margin:16px 35px 8px }
.page-gallery .viewer-stage { display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center }
.page-gallery #viewer-image { width:100%;max-height:65dvh;object-fit:contain }
.page-gallery .viewer-stage button,
.page-gallery #viewer-close { background:#2b3c55;border:1px solid #536681;color:white;border-radius:9px;cursor:pointer;font-size:30px;min-width:40px;min-height:44px }
.page-gallery #viewer-close { position:absolute;top:9px;right:9px }
.page-gallery .viewer-hint { text-align:center;font-size:13px;color:#a8b8ce;margin:8px 0 }
.page-gallery:has(dialog[open]) { overflow:hidden }
.page-gallery a[data-viewer]:focus-visible,
.page-gallery button:focus-visible,
.page-gallery summary:focus-visible { outline:3px solid #67e8f9;outline-offset:3px }
.page-gallery article:target { outline:2px solid #67e8f9 }
.page-gallery table { display:block;overflow-x:auto }
.page-gallery dialog[open] { display:block }
@media(max-width:540px) {
.page-gallery { padding:0 12px }
.page-gallery dialog { padding:12px }
.page-gallery .viewer-stage { grid-template-columns:36px minmax(0,1fr) 36px }
.page-gallery .viewer-stage button { min-width:34px }
.page-gallery #viewer-label { font-size:17px }
.page-gallery .spoiler { padding:12px }
}
.page-gallery .boss-category>summary { cursor:pointer;font-size:27px;font-weight:600;color:#67e8f9;padding:12px 0 }
.page-gallery .boss-category:not([open])>:not(summary) { display:none }
.page-gallery details.reveal-panel { margin:36px 0;padding:20px;border:1px solid #475569;border-radius:12px;background:#182337 }
.page-gallery details.reveal-panel>summary { cursor:pointer;font-size:21px;font-weight:600;color:#e2e8f0;padding:0 }
.page-gallery .explanations { margin-top:36px;padding-top:12px;border-top:1px solid #334155 }
@media(max-width:540px) {
.page-gallery details.reveal-panel { padding:12px }
}


/* Common design: edit these tokens to update all three guides. */
:root {
  color-scheme: dark;
  --page: #0f172a;
  --surface: #182337;
  --control: #1e293b;
  --border: #475569;
  --text: #e2e8f0;
  --muted: #a8b8ce;
  --accent: #67e8f9;
  --link: #7dd3fc;
  --radius: 12px;
}
* { box-sizing: border-box; }
body.game-page {
  max-width: 1180px;
  margin: 32px auto;
  padding: 0 22px;
  font: 16px/1.55 system-ui, sans-serif;
  background: var(--page);
  color: var(--text);
}
.game-page h1 { font-size: 32px; line-height: 1.2; margin: 0 0 14px; }
.game-page h2 { font-size: 24px; line-height: 1.3; margin: 32px 0 12px; color: var(--accent); }
.game-page h3 { font-size: 21px; line-height: 1.35; margin: 28px 0 12px; color: var(--accent); }
.game-page p { max-width: 900px; margin: 12px 0; color: var(--text); }
.game-page a { color: var(--link); text-underline-offset: 3px; }
.game-page a:hover { color: var(--accent); }
.game-page small, .game-page .intro, .game-page .count { color: var(--muted); }
.game-page .credits { margin-bottom: 22px; }
.game-page .summary, .game-page .key {
  background: #164e63; border: 1px solid #22647a;
  padding: 18px; border-radius: var(--radius); margin: 22px 0;
}
.game-page .summary p, .game-page .key p { margin: 4px 0; }
.game-page .toolbar { background: var(--page); }
.game-page input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--control); color: var(--text); font: inherit;
}
.game-page input::placeholder { color: var(--muted); opacity: 1; }
.game-page :is(a, input, button, summary):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.game-page .ownership-filter button, .game-page dialog button {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--control); color: var(--text); min-height: 44px;
}
.game-page .ownership-filter button[aria-pressed="true"] {
  background: #155e75; border-color: var(--accent); color: #fff;
}
.game-page table { width: 100%; border-collapse: collapse; }
.game-page th, .game-page td { padding: 10px 12px; border-bottom: 1px solid #334155; text-align: left; }
.game-page thead th { background: #162035; font-size: 14px; font-weight: 600; color: var(--muted); }
.game-page .num { text-align: right; }
.game-page .table-wrap { border-radius: var(--radius); }
.game-page .notes { font-size: 14px; color: var(--muted); margin: 28px 0; }
.game-page summary { cursor: pointer; color: var(--accent); }
.game-page details.reveal-panel {
  margin: 32px 0; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.game-page details.reveal-panel > summary { padding: 0; font-size: 21px; line-height: 1.4; color: var(--text); }
.game-page dialog { background: var(--control); color: var(--text); border-color: var(--border); border-radius: var(--radius); }
.game-page dialog::backdrop { background: #020617dd; }
.page-gallery main { grid-template-columns: repeat(auto-fill, min(100%, 255px)); gap: 16px; }
.page-gallery article { background: var(--surface); border-color: #334155; border-radius: var(--radius); }
.page-gallery article h2 { font-size: 18px; margin: 0 0 8px; }
.page-gallery .pair a { color: var(--link); }
.page-skins .skin-note { font-size: 12px; color: var(--muted); }
.page-skins .rare { color: #fca5a5; }
.page-skins .not-obtainable { color: #ff7316; font-weight: 700; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  body.game-page { margin: 22px auto; padding: 0 14px; }
  .game-page h1 { font-size: 27px; }
  .game-page h2 { font-size: 22px; }
  .game-page .summary, .game-page .key, .game-page details.reveal-panel { padding: 14px; }
}

.page-skins input.owned-skin:disabled { opacity: .75; cursor: not-allowed }
.page-skins .owned-label:has(input:disabled) { cursor: default }