/* ExploreTCGSets engine stylesheet: layout and components shared by every
   game. Each game's stylesheet sets the tokens below and adds its own
   textures, borders and flourishes. */

@font-face { font-family: "Outfit"; src: url("/fonts/outfit-97312486bc.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-w600.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans JP"; src: url("/fonts/noto-sans-jp-ebad6221dd.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/fonts/unbounded-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #0b0a1a;
  --bg2: #18132e;
  --ink: #f3efff;
  --muted: #b5acd0;
  --surface: rgba(24, 19, 46, 0.72);
  --toggle-bg: rgba(24, 19, 46, 0.7);
  --surface-solid: #18132e;
  --edge: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.1);
  --accent: #f6b73c;
  --accent-2: #8ad8ff;
  --accent-ink: #1b1430;
  --display: "Unbounded", "Outfit", system-ui, sans-serif;
  --sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-card: 4.6% / 3.3%;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.18);
  --ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1320px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:lang(ja) body, body:lang(ja) { font-family: var(--sans), var(--jp); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0 0 0.4em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 0.9em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 10px; font-weight: 700; }
.skip:focus { top: 12px; }
.quiet { color: var(--muted); }
.small { font-size: 0.88rem; }
.kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; font-weight: 700; color: var(--accent); margin: 0 0 0.6em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62ch; }
.note { background: var(--surface); border: 1px solid var(--edge); padding: 10px 14px; border-radius: var(--r-sm); }
main { position: relative; z-index: 1; min-height: 60vh; }
.page-wrap { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--nav-h) + 28px) var(--gutter) 64px; }
.section-title { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 2.2em 0 0.8em; }
.section-note { color: var(--muted); font-size: 0.92rem; margin: 10px 0; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- scene */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.scene-layers { position: absolute; inset: -4%; }
.scene-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.scene-layer.is-in { opacity: 1; }
.scene-layer > img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0) scale(1.04); }
.scene-layer > svg { width: 100%; height: 100%; display: block; }
.scene-layer .pl-sky { transform: translate3d(calc(var(--px, 0) * -6px), calc(var(--py, 0) * -4px), 0); }
.scene-layer .pl-far { transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -10px), 0); }
.scene-layer .pl-mid { transform: translate3d(calc(var(--px, 0) * -32px), calc(var(--py, 0) * -18px), 0); }
.scene-layer .pl-near { transform: translate3d(calc(var(--px, 0) * -56px), calc(var(--py, 0) * -28px), 0); }
@keyframes scene-breathe { from { scale: 1; } to { scale: 1.06; } }
.scene-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-veil { position: absolute; inset: 0; background: var(--veil, linear-gradient(180deg, rgba(11, 10, 26, 0.35), rgba(11, 10, 26, 0.75))); }

/* ---------------------------------------------------------------- top bar */
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); transition: background 0.3s, box-shadow 0.3s, backdrop-filter 0.3s; }
.topbar.is-scrolled, .modal-open .topbar { background: var(--surface); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line), var(--shadow-soft); }
.topbar-inner { height: 100%; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.brand .mark { width: 34px; height: 34px; flex: none; transition: transform 0.5s var(--ease); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.08); }
.brand-name b { color: var(--accent); }
.brand-game { text-decoration: none; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.topnav { display: flex; gap: 2px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 0.94rem; white-space: nowrap; color: var(--muted); transition: background 0.2s, color 0.2s; }
.topnav a:hover { color: var(--ink); background: var(--line); }
.topnav a[aria-current] { color: var(--ink); background: var(--line); box-shadow: inset 0 -2px 0 var(--accent); }
.topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.search { position: relative; }
.search-toggle, .switcher-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); }
.search-toggle:hover, .switcher-btn:hover { border-color: var(--accent); }
.search-form { position: absolute; right: 0; top: 0; width: 0; opacity: 0; pointer-events: none; transition: width 0.35s var(--ease), opacity 0.2s; }
.search.is-open .search-form { width: min(440px, calc(100vw - 32px)); opacity: 1; pointer-events: auto; }
.search-form input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface-solid); padding: 0 44px 0 18px; outline: none; }
.search-form kbd { position: absolute; right: 14px; top: 10px; font: 600 0.75rem var(--sans); border: 1px solid var(--edge); border-radius: 6px; padding: 1px 6px; color: var(--muted); }
.search-pop { position: absolute; right: 0; top: 50px; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--surface-solid); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 6px; }
.search-group { margin: 8px 10px 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; }
.search-hit { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; text-decoration: none; }
.search-hit img, .search-ico { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--line); }
.search-hit span { display: grid; min-width: 0; }
.search-hit strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit em { font-style: normal; font-size: 0.82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit.is-active, .search-hit:hover { background: var(--line); }
.search-empty { padding: 12px; color: var(--muted); margin: 0; }
.switcher { position: relative; }
.switcher-menu { position: absolute; right: 0; top: 50px; width: 260px; background: var(--surface-solid); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 8px; }
.switcher-head { margin: 4px 10px 6px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.switcher-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.switcher-item:hover, .switcher-item[aria-current] { background: var(--line); }
.switcher-item.is-soon { color: var(--muted); cursor: default; }
.switcher-item em { margin-left: auto; font-style: normal; font-size: 0.72rem; border: 1px solid var(--edge); padding: 1px 8px; border-radius: 999px; }
.sw-dot { width: 12px; height: 12px; border-radius: 4px; background: #888; transform: rotate(45deg); }
.sw-pokemon .sw-dot { background: linear-gradient(#ee1515 50%, #fff 50%); border-radius: 50%; transform: none; box-shadow: 0 0 0 1.5px #222; }
.sw-magic .sw-dot { background: conic-gradient(#f8e7b9, #4aa3df, #2b2b2b, #d3202a, #00733e, #f8e7b9); }
.sw-yugioh .sw-dot { background: #c99a2e; }
.sw-lorcana .sw-dot { background: #7b5cd6; }
.sw-onepiece .sw-dot { background: #e2412f; }
.sw-fav .sw-dot { background: #ff5d8f; }

/* ---------------------------------------------------------------- buttons, fields */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; text-decoration: none; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-ghost { background: var(--surface); border-color: var(--edge); }
.btn-ghost:hover { border-color: var(--accent); }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge); background: var(--surface); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 0.2s, border-color 0.2s; }
.chip-btn b { font-weight: 600; }
.chip-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip-btn:hover { border-color: var(--accent); }
.field { display: grid; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.field span { letter-spacing: 0.04em; }
.field input[type="search"], .field select { height: 42px; min-width: 120px; border-radius: 12px; border: 1px solid var(--edge); background: var(--surface-solid); padding: 0 12px; font-weight: 500; color: var(--ink); font-size: 0.95rem; }
.field.grow { flex: 1 1 200px; }
.field.grow input { width: 100%; }
.toggle-owned { display: flex; align-items: center; gap: 8px; align-self: end; height: 42px; }
.type-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--tc, #888) 85%, black); color: #fff; font-size: 0.78rem; font-weight: 700; border: 0; text-transform: capitalize; }
button.type-pill { opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
button.type-pill[aria-pressed="true"] { opacity: 1; transform: translateY(-1px); box-shadow: 0 0 0 2px var(--ink); }
.chip { display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--edge); font-size: 0.82rem; margin: 0 4px 4px 0; }

/* ---------------------------------------------------------------- timeline */
.game-home { position: relative; }
.timeline-section { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--nav-h) + 10px) 0 18px; }
.timeline-head { text-align: center; padding: 0 var(--gutter); }
.tl-headline { font-size: clamp(1.7rem, 4.2vw, 3.3rem); margin: 0.2em 0 0.15em; text-wrap: balance; }
.tl-sub { color: var(--muted); max-width: 80ch; margin: 0 auto 10px; }
.tl-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; }
.mode-switch, .scope-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--toggle-bg, var(--surface)); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mode-switch a, .scope-toggle a { text-decoration: none; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.mode-switch a[aria-current], .scope-toggle a[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.timeline { flex: 1; display: flex; flex-direction: column; align-items: center; min-height: 460px; position: relative; }
.timeline.is-loading .carousel { opacity: 0.4; }
.carousel { position: relative; width: 100%; flex: 1; min-height: 360px; perspective: 1600px; touch-action: pan-y; overflow: hidden; outline: none; user-select: none; transition: opacity 0.3s; }
.carousel-slot { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transition: transform 0.65s var(--ease), opacity 0.5s; will-change: transform; }
.skel-rail { position: absolute; inset: 0; display: flex; gap: 28px; align-items: center; justify-content: center; }
.skel-pack { width: 180px; height: 300px; border-radius: 16px; background: linear-gradient(110deg, var(--line) 30%, var(--edge) 50%, var(--line) 70%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; }
@keyframes skel { to { background-position: -300% 0; } }
.pack { position: relative; display: block; width: 200px; text-decoration: none; border: 0; background: none; padding: 0; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: translate 0.4s var(--ease), scale 0.4s var(--ease), filter 0.4s; }
.pack-art { display: block; height: 330px; }
.pack-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35)); }
.pack-plaque { height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 18px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--edge); text-align: center; box-shadow: var(--shadow); }
.pack-plaque img { max-height: 90px; max-width: 80%; object-fit: contain; }
.pack-plaque strong { font-family: var(--display); font-size: 1.05rem; line-height: 1.15; }
.pack-plaque em { font-style: normal; color: var(--muted); font-size: 0.85rem; }
.pack-foil { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: overlay; border-radius: 14px; overflow: hidden; }
.pack-foil::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); transform: translate3d(34%, 0, 0); }
.carousel-slot.is-center .pack-foil { opacity: 1; }
.carousel-slot.is-center .pack-foil::before { animation: foil-pass 3.8s linear infinite; }
@keyframes foil-pass { from { transform: translate3d(34%, 0, 0); } to { transform: translate3d(-34%, 0, 0); } }
.carousel-slot .pack.is-lit .pack-foil::before { animation: none; opacity: 0; }
.carousel-slot .pack.is-lit .pack-foil { opacity: 1; background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.08) 35%, transparent 70%); }
.carousel-slot.is-center .pack { translate: 0 -6px; scale: 1.06; }
.carousel-slot:not(.is-center) .pack { filter: saturate(0.85) brightness(0.88); cursor: pointer; }
.chapter-card { width: 190px; min-height: 270px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 14px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--edge); box-shadow: var(--shadow); cursor: pointer; }
.chapter-card img { width: 120px; height: 100px; object-fit: contain; }
.chapter-year { font-family: var(--display); font-size: 1.2rem; font-weight: 700; color: var(--accent); }
.chapter-card strong { font-family: var(--display); line-height: 1.15; }
.chapter-card em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.tl-rail { display: flex; align-items: center; gap: 8px; width: min(760px, calc(100% - 28px)); margin: 6px 0 10px; }
.tl-scrub { flex: 1; display: flex; align-items: center; gap: 10px; }
.tl-scrub input { flex: 1; min-width: 0; accent-color: var(--accent); }
.tl-scrub output { font-family: var(--display); font-weight: 700; min-width: 3.2em; text-align: right; }
.focus-panel { width: min(760px, calc(100% - 28px)); padding: 14px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow-soft); min-height: 150px; }
.focus-kicker { display: flex; gap: 14px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; font-weight: 800; color: var(--accent); margin: 0 0 4px; }
.focus-panel h2 { font-size: 1.4rem; margin: 0 0 4px; }
.focus-blurb { margin: 0; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.focus-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 0.9rem; }
.focus-meta div { display: flex; gap: 6px; }
.focus-meta dt { font-weight: 700; color: var(--accent); }
.focus-meta dd { margin: 0; }
.focus-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* quick links, showcase, set index */
.quick-links { max-width: var(--maxw); margin: 24px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.quick { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); text-decoration: none; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.25s var(--ease), border-color 0.2s; }
.quick:hover { transform: translateY(-3px); border-color: var(--accent); }
.quick strong { font-family: var(--display); font-size: 1.02rem; }
.quick span { color: var(--muted); font-size: 0.9rem; }
.showcase { max-width: var(--maxw); margin: 48px auto 0; padding: 0 var(--gutter); }
.showcase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.showcase-row { list-style: none; margin: 14px 0 0; padding: 4px 2px 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.showcase-row li { scroll-snap-align: start; }
.showcase-card { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); text-decoration: none; height: 100%; transition: transform 0.3s var(--ease); }
.showcase-card:hover { transform: translateY(-4px) rotate(-0.6deg); }
.showcase-art { height: 190px; display: grid; place-items: center; position: relative; }
.showcase-art img { max-height: 190px; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.3)); }
.showcase-logo { max-width: 85%; max-height: 80px !important; }
.showcase-card em { font-style: normal; color: var(--muted); font-size: 0.84rem; }
.set-index { max-width: var(--maxw); margin: 56px auto 0; padding: 0 var(--gutter) 40px; }
.set-group { margin-top: 28px; }
.set-group h3 { display: flex; align-items: baseline; gap: 10px; font-size: 1.2rem; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.set-group h3 span { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.set-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.set-chip { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; background: var(--surface); border: 1px solid transparent; transition: border-color 0.2s, transform 0.2s; }
.set-chip:hover { border-color: var(--accent); transform: translateX(2px); }
.set-chip-logo { width: 54px; height: 36px; display: grid; place-items: center; flex: none; }
.set-chip-logo img { max-width: 54px; max-height: 36px; object-fit: contain; }
.set-chip-logo b { font-size: 0.72rem; text-transform: uppercase; opacity: 0.7; }
.set-chip-copy { display: grid; min-width: 0; }
.set-chip-copy strong { font-size: 0.95rem; line-height: 1.2; }
.set-chip-copy em { font-style: normal; color: var(--muted); font-size: 0.8rem; }

/* ---------------------------------------------------------------- set page */
.set-page { position: relative; }
.set-inner { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--nav-h) + 18px) var(--gutter) 64px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; }
.crumbs a { text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--edge); }
.crumbs a:hover { border-color: var(--accent); }
.crumbs .next { margin-left: auto; }
.set-hero { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: clamp(18px, 4vw, 48px); align-items: center; padding: clamp(18px, 3vw, 30px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); box-shadow: var(--shadow-soft); animation: rise-in 0.8s var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.set-logo { display: grid; place-items: center; min-height: 140px; }
.set-logo img { max-height: 200px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28)); animation: logo-float 6s ease-in-out infinite; }
@keyframes logo-float { 50% { transform: translateY(-6px) rotate(-1deg); } }
.set-copy h1 { margin-bottom: 0.25em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0; }
.meta-row div { display: grid; }
.meta-row dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--accent); }
.meta-row dd { margin: 0; font-weight: 600; }
.set-symbol { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.progress { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; }
.progress-bar { width: 160px; height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.6s var(--ease); }
.guide { margin: 18px 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); }
.guide summary { cursor: pointer; font-weight: 700; }
.guide p { color: var(--muted); font-size: 0.92rem; margin: 10px 0 0; }
.toolbar { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 20; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: end; margin: 20px 0 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--shadow-soft); }
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--line); align-self: end; }
.tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.text-list { margin-top: 28px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); }
.text-list summary { cursor: pointer; font-weight: 700; }
.text-list ol { columns: 3 260px; font-size: 0.9rem; margin: 10px 0 0; padding-left: 22px; }
.text-list a { text-decoration: none; }
.text-list a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 176px), 1fr)); gap: clamp(10px, 1.6vw, 20px); margin-top: 8px; }
.card-tile { --pad: 8px; position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--pad); border-radius: 14px; border: 1px solid var(--edge); background: var(--surface); text-align: left; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(calc(1 + var(--k, 0) * 0.05)); transition: box-shadow 0.35s, border-color 0.35s; content-visibility: auto; contain-intrinsic-size: 180px 300px; }
.card-grid > .card-tile { animation: deal 0.5s var(--ease) backwards; }
.card-grid > .card-tile:nth-child(6n + 2) { animation-delay: 35ms; }
.card-grid > .card-tile:nth-child(6n + 3) { animation-delay: 70ms; }
.card-grid > .card-tile:nth-child(6n + 4) { animation-delay: 105ms; }
.card-grid > .card-tile:nth-child(6n + 5) { animation-delay: 140ms; }
.card-grid > .card-tile:nth-child(6n + 6) { animation-delay: 175ms; }
@keyframes deal { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg) scale(0.97); } }
.card-img { position: relative; display: block; aspect-ratio: 63 / 88; border-radius: var(--r-card); overflow: hidden; background: var(--line); }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-missing { display: grid; place-items: center; height: 100%; padding: 10px; text-align: center; font-weight: 700; color: var(--muted); }
.card-meta { display: grid; min-width: 0; padding: 0 2px; }
.card-meta strong { font-size: 0.9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta em { font-style: normal; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank { position: absolute; left: 6px; top: 6px; z-index: 4; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem; font-weight: 700; }
.own-mark { position: absolute; right: 6px; top: 6px; z-index: 4; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 0.8rem; background: #2ecc71; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transform: scale(0); transition: transform 0.3s var(--ease); }
.card-tile.is-owned .own-mark { transform: scale(1); }
.grid-sentinel { height: 1px; }

/* Light, foil and per-card effect (set through data-fx, data-foil, --tc) */
.card-tile::before, .card-tile::after, .printing-card::before, .cm-card .card-img::before, .cm-card .card-img::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.35s; z-index: 2; }
.card-tile::before, .card-tile::after { top: var(--pad); left: var(--pad); right: var(--pad); aspect-ratio: 63 / 88; border-radius: var(--r-card); }
.printing-card::before { inset: 0 0 auto; aspect-ratio: 63 / 88; }
.cm-card .card-img::before, .cm-card .card-img::after { inset: 0; }
.card-tile.is-lit { z-index: 3; border-color: color-mix(in srgb, var(--tc) 55%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent), 0 18px 42px color-mix(in srgb, var(--tc) 42%, transparent), 0 10px 20px rgba(0, 0, 0, 0.2); }
.card-tile::before, .printing-card::before, .cm-card .card-img::before {
  background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 28%, transparent 60%);
  mix-blend-mode: soft-light;
}
.is-lit::before, .is-lit .card-img::before { opacity: calc(0.3 + var(--far, 0) * 0.3); }
[data-foil]::before, [data-foil] .card-img::before {
  background:
    radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(112deg, hsl(2 100% 73%) 0%, hsl(53 100% 69%) 5%, hsl(93 100% 69%) 10%, hsl(176 100% 76%) 15%, hsl(228 100% 74%) 20%, hsl(283 100% 73%) 25%, hsl(2 100% 73%) 30%) var(--px, 50%) var(--py, 50%) / 260% 260%;
  background-blend-mode: soft-light, normal;
  mix-blend-mode: color-dodge;
  filter: brightness(0.5) contrast(1.9) saturate(1.05);
}
[data-foil="etched"]::before, [data-foil="etched"] .card-img::before { background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0.3) 70%), repeating-linear-gradient(45deg, #d9c7a0 0 2px, #8f7a52 2px 4px) var(--px) var(--py) / 200% 200%; }
[data-foil="gold"]::before, [data-foil="gold"] .card-img::before { background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 245, 200, 0.85), rgba(0, 0, 0, 0.35) 80%), repeating-linear-gradient(112deg, #fff1b8 0%, #e3b04b 8%, #fff7d6 16%, #b98a2e 24%, #fff1b8 32%) var(--px, 50%) var(--py, 50%) / 260% 260%; }
.is-lit[data-foil]::before, .is-lit[data-foil] .card-img::before { opacity: calc(0.28 + var(--far, 0) * 0.22); }
@supports (animation-timeline: view()) {
  .card-tile[data-foil]::before { opacity: 0.16; animation: foil-sweep linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .card-tile[data-foil].is-lit::before { animation: none; }
}
@property --px { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@keyframes foil-sweep { from { --px: 0%; } to { --px: 100%; } }
/* Per-card effects. Everything that moves animates only transform or opacity,
   which the browser hands to the graphics card: no repainting, no lag. */
.card-tile::after, .cm-card .card-img::after, .card-tile .card-img::after { --c: var(--tc); --hot: color-mix(in srgb, var(--tc) 45%, white); mix-blend-mode: screen; }
.card-tile.is-lit::after { opacity: 0.8; }
.cm-card .card-img::after { opacity: 0.55; }
/* Pokémon: small particles on the card picture, clipped by it. Every pattern
   repeats within 120px, so a layer slides one repeat and loops seamlessly. */
.card-tile:is([data-fx="rise"], [data-fx="fall"], [data-fx="drift"], [data-fx="flash"], [data-fx="sweep"])::after, .cm-card:is([data-fx="rise"], [data-fx="fall"], [data-fx="drift"], [data-fx="flash"], [data-fx="sweep"]) .card-img::after { content: none; }
.card-tile:is([data-fx="rise"], [data-fx="fall"], [data-fx="drift"], [data-fx="flash"], [data-fx="sweep"]) .card-img::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 0.35s; z-index: 1; }
.card-tile.is-lit:is([data-fx="rise"], [data-fx="fall"], [data-fx="drift"], [data-fx="flash"], [data-fx="sweep"]) .card-img::after { opacity: 0.85; will-change: transform; }
.card-tile[data-fx="rise"] .card-img::after { height: calc(100% + 120px); background: radial-gradient(circle, var(--hot) 0 1.6px, transparent 2.6px) 0 0 / 34px 40px, radial-gradient(circle, var(--c) 0 2.2px, transparent 3.4px) 14px 22px / 52px 60px, radial-gradient(circle, #fff 0 1.1px, transparent 1.9px) 30px 40px / 44px 120px; }
.card-tile.is-lit[data-fx="rise"] .card-img::after { animation: fx-rise 3.4s linear infinite; }
@keyframes fx-rise { to { transform: translate3d(0, -120px, 0); } }
.card-tile[data-fx="fall"] .card-img::after { top: -120px; height: calc(100% + 120px); background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 0 0 / 38px 40px, radial-gradient(circle, var(--hot) 0 2px, transparent 3.2px) 18px 12px / 56px 60px; }
.card-tile.is-lit[data-fx="fall"] .card-img::after { animation: fx-fall 4.4s linear infinite; }
@keyframes fx-fall { to { transform: translate3d(0, 120px, 0); } }
.card-tile[data-fx="drift"] .card-img::after { left: -120px; width: calc(100% + 120px); height: calc(100% + 120px); background: radial-gradient(circle, var(--hot) 0 2px, transparent 7px) 0 0 / 60px 60px, radial-gradient(circle, var(--c) 0 3px, transparent 10px) 30px 34px / 120px 120px; }
.card-tile.is-lit[data-fx="drift"] .card-img::after { animation: fx-drift 7s linear infinite; }
@keyframes fx-drift { to { transform: translate3d(120px, -120px, 0); } }
.card-tile[data-fx="flash"] .card-img::after { background: linear-gradient(104deg, transparent 47.5%, #fff 49.5%, var(--hot) 50.5%, transparent 52.5%) 20% 0 / 55% 100% no-repeat, linear-gradient(76deg, transparent 48%, var(--hot) 49.6%, #fff 50.4%, transparent 52%) 85% 0 / 45% 100% no-repeat, radial-gradient(90% 70% at 50% 50%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
.card-tile.is-lit[data-fx="flash"] .card-img::after { animation: fx-flash 1.15s steps(1, end) infinite; }
@keyframes fx-flash { 0% { opacity: 0.8; } 12% { opacity: 0.25; } 20% { opacity: 1; } 32% { opacity: 0.2; } 58% { opacity: 0.9; } 70% { opacity: 0.15; } }
.card-tile[data-fx="sweep"] .card-img::after { left: -100%; width: 300%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.8) 50%, transparent 58%); }
.card-tile.is-lit[data-fx="sweep"] .card-img::after { animation: fx-sweep 1.6s ease-in-out infinite; }
@keyframes fx-sweep { from { transform: translate3d(34%, 0, 0); } to { transform: translate3d(-34%, 0, 0); } }
/* Magic colour effects glow around the card (never painted on it). */
[data-fx="light"]::after, [data-fx="light"] .card-img::after { background: conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(255, 250, 225, 0.9) 8deg, transparent 16deg, transparent 28deg, rgba(255, 244, 200, 0.7) 34deg, transparent 42deg, transparent 60deg, rgba(255, 250, 225, 0.8) 66deg, transparent 74deg), radial-gradient(80% 50% at 50% 0%, rgba(255, 248, 220, 0.7), transparent 70%); }
.is-lit[data-fx="light"]::after, [data-fx="light"] .card-img::after { animation: fx-light 3.2s ease-in-out infinite alternate; }
@keyframes fx-light { from { opacity: 0.6; transform: translateX(-4%); } to { opacity: 1; transform: translateX(4%); } }
[data-fx="ripple"]::after, [data-fx="ripple"] .card-img::after { background: repeating-radial-gradient(circle at 50% 60%, transparent 0 10px, color-mix(in srgb, var(--c) 70%, white) 11px 12px, transparent 13px 24px); -webkit-mask-image: radial-gradient(circle at 50% 60%, #000 10%, transparent 70%); mask-image: radial-gradient(circle at 50% 60%, #000 10%, transparent 70%); }
.is-lit[data-fx="ripple"]::after, [data-fx="ripple"] .card-img::after { animation: fx-ripple 2.2s ease-out infinite; }
@keyframes fx-ripple { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.2); opacity: 0.35; } }
[data-fx="smoke"]::after, [data-fx="smoke"] .card-img::after { mix-blend-mode: multiply; background: radial-gradient(40% 30% at 20% 100%, rgba(40, 20, 50, 0.85), transparent 70%) 0 0 / 100% 100%, radial-gradient(50% 35% at 80% 100%, rgba(30, 10, 40, 0.8), transparent 70%), radial-gradient(35% 25% at 50% 90%, rgba(80, 40, 100, 0.6), transparent 70%); }
.is-lit[data-fx="smoke"]::after, [data-fx="smoke"] .card-img::after { animation: fx-smoke 4s ease-in-out infinite alternate; }
@keyframes fx-smoke { from { transform: translateY(8%) scaleX(1); } to { transform: translateY(-10%) scaleX(1.15); } }
[data-fx="ember"]::after, [data-fx="ember"] .card-img::after { background: radial-gradient(circle, #ffd27a 0 1.5px, transparent 2.6px) 0 0 / 30px 50px, radial-gradient(circle, #ff5a1f 0 2px, transparent 3.4px) 12px 18px / 46px 70px, radial-gradient(circle, #fff1c2 0 1px, transparent 1.8px) 24px 34px / 40px 60px, linear-gradient(to top, rgba(255, 80, 20, 0.5), transparent 45%); -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 85%); mask-image: linear-gradient(to top, #000 15%, transparent 85%); }
.is-lit[data-fx="ember"]::after, [data-fx="ember"] .card-img::after { animation: fx-ember 1.6s ease-in-out infinite alternate; }
@keyframes fx-ember { from { opacity: 0.55; transform: translateY(2%); } to { opacity: 1; transform: translateY(-2%); } }
[data-fx="vine"]::after, [data-fx="vine"] .card-img::after { transform-origin: 50% 100%; background: radial-gradient(14px 6px at 12% 80%, #9be06b 60%, transparent 62%), radial-gradient(12px 5px at 86% 30%, #7fcf55 60%, transparent 62%), radial-gradient(12px 5px at 20% 22%, #b9f08c 60%, transparent 62%), radial-gradient(10px 4px at 78% 74%, #6abf45 60%, transparent 62%), linear-gradient(90deg, rgba(60, 160, 60, 0.55), transparent 18%, transparent 82%, rgba(60, 160, 60, 0.55)); }
.is-lit[data-fx="vine"]::after, [data-fx="vine"] .card-img::after { animation: fx-vine 3s ease-in-out infinite alternate; }
@keyframes fx-vine { from { transform: scaleY(0.2); opacity: 0.4; } to { transform: scaleY(1); opacity: 1; } }
[data-fx="gold"]::after, [data-fx="gold"] .card-img::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 226, 140, 0.9) 45%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 200, 90, 0.9) 55%, transparent 70%), radial-gradient(circle, #fff3c4 0 1.5px, transparent 2.5px) 0 0 / 36px 40px; }
.is-lit[data-fx="gold"]::after, [data-fx="gold"] .card-img::after { animation: fx-gold 2s ease-in-out infinite alternate; }
@keyframes fx-gold { from { opacity: 0.55; transform: translateX(-3%); } to { opacity: 1; transform: translateX(3%); } }
[data-fx="metal"]::after, [data-fx="metal"] .card-img::after { mix-blend-mode: overlay; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, rgba(0, 0, 0, 0.06) 2px 4px), linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.95) 48%, rgba(200, 210, 220, 0.9) 52%, transparent 65%); }
.is-lit[data-fx="metal"]::after, [data-fx="metal"] .card-img::after { animation: fx-metal 1.8s ease-in-out infinite alternate; }
@keyframes fx-metal { from { opacity: 0.5; transform: translateX(-3%); } to { opacity: 1; transform: translateX(3%); } }

/* ---------------------------------------------------------------- detail view */
.modal-open { overflow: hidden; }
.card-modal { width: min(1180px, 100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--edge); border-radius: 28px; background: var(--surface-solid); color: var(--ink); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); overflow: hidden; }
.card-modal[open] { animation: modal-in 0.45s var(--ease); }
.card-modal::backdrop { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc, #000) 30%, rgba(5, 4, 12, 0.72)), rgba(5, 4, 12, 0.92)); }
/* While a card is open, everything behind it holds still, so only the card moves. */
.modal-open .scene-layer > img, .modal-open .card-tile *, .modal-open .card-tile::after { animation-play-state: paused !important; }
.modal-open .lp-vs-root, .modal-open .scene-fx { visibility: hidden; }
.modal-open body > :not(.card-modal), .modal-open body > :not(.card-modal) * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.cm-shell { display: grid; grid-template-columns: minmax(280px, 45%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-height: calc(100dvh - 24px); }
.cm-close { position: absolute; top: 12px; right: 12px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); font-size: 1rem; }
.cm-stage { position: relative; display: grid; place-items: center; padding: 34px 54px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tc) 38%, transparent), transparent 70%); overflow: hidden; }
.cm-vfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-vfx-card { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; border-radius: var(--r-card); }
.cm-card { position: relative; margin: 0; width: min(100%, 400px); transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 2; }
.cm-card .card-img { border-radius: var(--r-card); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 50px color-mix(in srgb, var(--tc) 40%, transparent); }
.cm-card.is-swap { animation: card-swap 0.45s var(--ease); }
@keyframes card-swap { from { opacity: 0; transform: perspective(1100px) rotateY(-25deg) translateX(30px); } }
.cm-nav { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); font-size: 1.6rem; line-height: 1; transform: translateY(-50%); }
.cm-prev { left: 8px; }
.cm-next { right: 8px; }
.cm-count { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0; }
.cm-info { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 28px 30px 30px; overscroll-behavior: contain; }
.cm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 40px 16px 0; }
.cm-title { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 14px 0; }
.fact-grid div { padding: 8px 12px; border-radius: 12px; background: var(--line); }
.fact-grid dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--muted); }
.fact-grid dd { margin: 2px 0 0; font-weight: 600; }
.fact-grid.small div { padding: 6px 10px; }
.move { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); margin: 8px 0; }
.move p { margin: 0; }
.move p + p { margin-top: 6px; color: var(--muted); font-size: 0.94rem; }
.move .dmg { float: right; font-family: var(--display); }
.cost { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: middle; }
.nrg { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 0.66rem var(--sans); font-style: normal; color: #fff; background: #999; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); }
.nrg-grass { background: #45a53c; } .nrg-fire { background: #e4532f; } .nrg-water { background: #3b8de0; } .nrg-electric { background: #f2c21a; color: #4a3400; } .nrg-psychic { background: #9b59b6; } .nrg-fighting { background: #b5642b; } .nrg-dark { background: #2f3a3f; } .nrg-steel { background: #8e9aa6; } .nrg-fairy { background: #e276b6; } .nrg-dragon { background: #b39a28; } .nrg-normal { background: #cfcbbd; color: #333; }
.ability-tag { padding: 1px 8px; border-radius: 6px; background: #c0392b; color: #fff; font-size: 0.74rem; }
.rule { font-size: 0.88rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 10px; }
.flavor { font-style: italic; color: var(--muted); }
.cm-sec { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.species-row { display: flex; gap: 14px; align-items: center; }
.species-row img { width: 110px; height: 110px; object-fit: contain; flex: none; }
.stat-bars { display: grid; gap: 4px; margin-top: 10px; }
.stat-bars div { display: grid; grid-template-columns: 120px 1fr 36px; gap: 8px; align-items: center; font-size: 0.85rem; text-transform: capitalize; }
.stat-bars i { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--tc, var(--accent)) var(--v), var(--line) var(--v)); }
.printing-row { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 10px; overflow-x: auto; padding: 6px 2px 14px; overscroll-behavior-x: contain; }
.printing-card { position: relative; display: grid; gap: 4px; text-decoration: none; scroll-snap-align: start; transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.printing-card img { aspect-ratio: 63 / 88; width: 100%; object-fit: cover; border-radius: var(--r-card); box-shadow: var(--shadow-soft); }
.printing-card span { display: grid; font-size: 0.78rem; line-height: 1.2; }
.printing-card em { font-style: normal; color: var(--muted); }
.printing-card.is-here img { outline: 3px solid var(--accent); outline-offset: 2px; }
.flight { position: fixed; z-index: 2000; pointer-events: none; transform-origin: 0 0; border-radius: var(--r-card); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); object-fit: cover; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 3000; transform: translate(-50%, 30px); opacity: 0; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; transition: transform 0.3s var(--ease), opacity 0.3s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- battle */
.battle { position: relative; height: clamp(200px, 26vw, 280px); margin: 18px 0 0; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%), var(--surface); border: 1px solid var(--edge); pointer-events: none; }
.bt-arena { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 12px clamp(12px, 4vw, 60px); }
.bt-side { display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform 0.5s var(--ease), opacity 0.6s, filter 0.6s; }
.bt-right { flex-direction: column; }
.bt-fig { position: relative; width: clamp(110px, 16vw, 190px); aspect-ratio: 1; display: grid; place-items: center; }
.bt-fig img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.35)); animation: bt-idle 2.4s ease-in-out infinite; }
.bt-right .bt-fig img { transform: scaleX(-1); }
@keyframes bt-idle { 50% { translate: 0 -5px; } }
.bt-left.is-attacking { transform: translateX(16%) rotate(4deg); }
.bt-right.is-attacking { transform: translateX(-16%) rotate(-4deg); }
.bt-side.is-hit { animation: bt-hit 0.45s; }
@keyframes bt-hit { 20% { transform: translateX(-6px); filter: brightness(2.2); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); filter: brightness(1.6); } }
.bt-side.is-ko { opacity: 0.25; filter: grayscale(1); transform: translateY(14px) rotate(-6deg); }
.bt-side.is-enter { animation: bt-enter 0.7s var(--ease); }
@keyframes bt-enter { from { opacity: 0; transform: translateY(30px) scale(0.85); } }
.bt-fx { position: absolute; inset: -20%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, var(--fl), color-mix(in srgb, var(--fc) 80%, transparent) 35%, transparent 65%); mix-blend-mode: screen; }
.bt-side.is-hit .bt-fx { animation: bt-burst 0.6s ease-out; }
@keyframes bt-burst { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.3); } }
.bt-dmg { position: absolute; top: 0; left: 50%; font-family: var(--display); font-size: 1.4rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); opacity: 0; transform: translateX(-50%); }
.bt-dmg.is-on { animation: bt-dmg 1s var(--ease); }
@keyframes bt-dmg { 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -40px); } }
.bt-plate { display: grid; justify-items: center; gap: 2px; padding: 4px 12px 6px; border-radius: 12px; background: var(--surface-solid); border: 1px solid var(--edge); min-width: 150px; font-size: 0.8rem; }
.bt-name { font-size: 0.9rem; }
.bt-bar { width: 120px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bt-bar i { display: block; height: 100%; background: #3ddc84; transition: width 0.6s var(--ease), background 0.3s; }
.is-low .bt-bar i { background: #ff5252; }
.bt-hp { font-style: normal; color: var(--muted); font-size: 0.74rem; }
.bt-credit { color: var(--muted); font-size: 0.68rem; max-width: 200px; text-align: center; }
.bt-credit:empty { display: none; }
.bt-call { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 14px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--edge); font-weight: 700; font-size: 0.86rem; white-space: nowrap; opacity: 0; }
.bt-call.is-on { animation: bt-call 2s var(--ease); }
@keyframes bt-call { 10%, 75% { opacity: 1; } }
.bt-vs { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: var(--accent); opacity: 0.85; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.2); }
.battle.is-firing-left .bt-vs { transform: translate(-30%, -50%) scale(1.15); transition: transform 0.3s; }
.battle.is-firing-right .bt-vs { transform: translate(-70%, -50%) scale(1.15); transition: transform 0.3s; }

/* ---------------------------------------------------------------- prose pages */
.page-intro { margin-bottom: 28px; max-width: 900px; }
.prose-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.chapter-nav { position: sticky; top: calc(var(--nav-h) + 20px); padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.chapter-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.chapter-nav a { display: block; padding: 6px 10px; border-radius: 8px; text-decoration: none; font-size: 0.92rem; font-weight: 600; color: var(--muted); }
.chapter-nav a:hover { background: var(--line); color: var(--ink); }
.prose-body { max-width: 780px; }
.prose-block { display: flow-root; margin-bottom: 44px; padding: clamp(18px, 3vw, 30px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.prose-block p { font-size: 1.04rem; }
.milestones { list-style: none; margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--accent); display: grid; gap: 12px; }
.milestones li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.milestones li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.milestones time { font-weight: 800; color: var(--accent); font-size: 0.9rem; }
.people { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.person { padding: 14px; border-radius: var(--r-md); background: var(--line); }
.person strong { display: block; font-family: var(--display); }
.person em { display: block; font-style: normal; color: var(--accent); font-size: 0.85rem; margin-bottom: 6px; }
.person p { font-size: 0.92rem; margin: 0; color: var(--muted); }
.famous-sets { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.famous-sets a { font-weight: 700; }
.famous-sets span { color: var(--muted); font-size: 0.92rem; }
.link-cards, .photo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.link-card { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--edge); text-decoration: none; }
.link-card em { font-style: normal; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.link-card span { font-size: 0.88rem; color: var(--muted); }
.lore-photo, .lore-figure { margin: 0; }
.lore-photo img, .lore-figure img { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.lore-photo figcaption, .lore-figure figcaption { font-size: 0.84rem; color: var(--muted); margin-top: 6px; }
.lore-photo small { display: block; margin-top: 4px; }
.lore-figure { float: right; width: min(240px, 40%); margin: 0 0 12px 18px; }
.lore-figure-cast img { aspect-ratio: auto; object-fit: contain; max-height: 340px; background: none; }
.media-trio { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.media-ex { margin: 0; display: grid; gap: 6px; }
.media-ex img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); background: var(--line); }
.media-ex figcaption { display: grid; font-size: 0.86rem; line-height: 1.3; }
.media-ex em { font-style: normal; color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 560px) { .media-trio { grid-template-columns: 1fr 1fr; } }
.sources { max-width: 900px; margin: 40px 0 0 auto; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); }
.sources h2 { font-size: 1.3rem; }
.sources ol { font-size: 0.92rem; padding-left: 22px; display: grid; gap: 6px; }

/* how to play */
.htp { margin-top: 10px; }
.htp-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.htp-win { position: relative; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); overflow: hidden; }
.htp-win h3 { font-size: 1.1rem; }
.htp-win p { margin: 0; color: var(--muted); }
.htp-num { position: absolute; right: 14px; top: 6px; font-family: var(--display); font-size: 3rem; font-weight: 800; color: var(--accent); opacity: 0.25; }
.htp-sub { margin: 36px 0 14px; font-size: 1.35rem; }
.htp-board { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-areas: "prizes active deck" "prizes active discard" "bench bench bench" "cap cap cap"; gap: 14px; padding: clamp(14px, 3vw, 28px); border-radius: var(--r-lg); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%), var(--surface); border: 1px solid var(--edge); }
.htp-board figcaption { grid-area: cap; color: var(--muted); font-size: 0.88rem; text-align: center; }
.zone { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 12px; border-radius: var(--r-md); border: 1.5px dashed color-mix(in srgb, var(--ink) 30%, transparent); text-align: center; }
.zone-label { font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.zone-note { font-size: 0.8rem; color: var(--muted); }
.zone-prizes { grid-area: prizes; }
.zone-active { grid-area: active; }
.zone-deck { grid-area: deck; }
.zone-discard { grid-area: discard; }
.zone-bench { grid-area: bench; }
.slot, .stack i, .bench i, .zone-zone i { display: block; }
.slot { width: 70px; aspect-ratio: 63 / 88; border-radius: 6px; border: 1.5px solid var(--edge); position: relative; }
.slot-big { width: 104px; }
.card-back, .stack i, .bench i, .card-fly { position: absolute; inset: 0; border-radius: 6px; background: var(--card-back, linear-gradient(135deg, #2a62c9, #173a80)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.slot-big .card-back { background: var(--card-front, linear-gradient(160deg, #ffe680, #f2a33a)); animation: active-bob 3s ease-in-out infinite; }
@keyframes active-bob { 50% { transform: translateY(-4px) rotate(-1deg); } }
.pile .card-fly { animation: draw 4s var(--ease) infinite; }
@keyframes draw { 0%, 30% { transform: none; opacity: 1; } 60% { transform: translate(-40px, -60px) rotate(-12deg); opacity: 0; } 100% { opacity: 0; } }
.pile.faceup { background: var(--line); }
.stack { position: relative; width: 120px; height: 110px; }
.stack i { width: 52px; height: 72px; inset: auto; }
.stack.six i:nth-child(1) { left: 0; top: 0; } .stack.six i:nth-child(2) { left: 34px; top: 0; } .stack.six i:nth-child(3) { left: 68px; top: 0; }
.stack.six i:nth-child(4) { left: 0; top: 36px; } .stack.six i:nth-child(5) { left: 34px; top: 36px; } .stack.six i:nth-child(6) { left: 68px; top: 36px; }
.bench { display: flex; gap: 10px; justify-content: center; }
.bench i { position: relative; width: 56px; aspect-ratio: 63 / 88; }
.htp-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.htp-type { padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); }
.htp-type h4 { font-size: 1.1rem; margin: 10px 0 6px; }
.htp-type p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.mini-card { width: 92px; aspect-ratio: 63 / 88; border-radius: 8px; padding: 6px; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; font-size: 0.6rem; font-weight: 800; box-shadow: var(--shadow-soft); transform: rotate(-4deg); transition: transform 0.4s var(--ease); }
.htp-type:hover .mini-card { transform: rotate(0) translateY(-4px) scale(1.04); }
.mini-card span { border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.mini-card em { font-style: normal; }
.t-pokemon .mini-card { background: linear-gradient(160deg, #ffe680, #f2a33a); color: #4a2a00; }
.t-trainer .mini-card { background: linear-gradient(160deg, #e6ecf2, #9fb3c8); color: #22313f; }
.t-energy .mini-card { background: radial-gradient(circle at 50% 55%, #fff6a8 0 18%, #f2c21a 19% 40%, #c88a0a 41%); color: #4a3400; }
.htp-steps { display: grid; gap: 10px; counter-reset: s; list-style: none; padding: 0; }
.htp-steps li { counter-increment: s; position: relative; padding: 12px 16px 12px 56px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); }
.htp-steps li::before { content: counter(s); position: absolute; left: 14px; top: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.htp-turn { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 14px; }
.phase { position: relative; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--edge); }
.phase h4 { font-size: 1.05rem; margin: 6px 0; }
.phase p, .phase li { color: var(--muted); font-size: 0.94rem; }
.phase ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.phase-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.phase:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translate(50%, -50%); font-size: 1.4rem; color: var(--accent); z-index: 2; }
.htp-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.htp-terms div { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); }
.htp-terms dt { font-weight: 800; margin-bottom: 4px; }
.htp-terms dd { margin: 0; color: var(--muted); font-size: 0.94rem; }
.world-lore { margin-top: 30px; }

/* pokédex and characters */
.dex-filters { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 20; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.type-filters { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.dex-window { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.dex-cell { display: grid; justify-items: center; gap: 2px; padding: 10px 6px 12px; border-radius: var(--r-md); border: 1px solid var(--edge); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 65%), var(--surface); content-visibility: auto; contain-intrinsic-size: 140px 180px; transition: transform 0.25s var(--ease), border-color 0.2s; }
.dex-cell:hover { transform: translateY(-3px); border-color: var(--tc); }
.dex-cell img { width: 96px; height: 96px; image-rendering: pixelated; }
.dex-cell span { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.dex-cell em { display: flex; gap: 3px; font-style: normal; }
.dex-cell em i { font-style: normal; font-size: 0.64rem; padding: 0 6px; border-radius: 999px; background: var(--tc); color: #fff; text-transform: capitalize; }
.char-filters { margin-bottom: 14px; }
.char-filters button { border: 1px solid var(--edge); background: var(--surface); padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.char-filters button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.char-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.char-card { border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); overflow: hidden; }
.char-card.is-open { grid-column: span 2; }
.char-open { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px; border: 0; background: none; text-align: left; }
.char-portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line); flex: none; }
.char-open span { display: grid; }
.char-open em { font-style: normal; color: var(--muted); font-size: 0.86rem; }
.char-profile { padding: 0 16px 16px; font-size: 0.95rem; }
.char-profile dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.char-profile dt { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; color: var(--accent); }
.char-profile dd { margin: 0; }

/* card page, favorites, simple pages */
.card-page-grid { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.card-page-art { margin: 0; }
.card-tile.is-big { width: 100%; }
.fav-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fav-grid.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.fav-item { position: relative; }
.fav-item a { display: grid; gap: 4px; text-decoration: none; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); }
.fav-img img { width: 100%; aspect-ratio: 63 / 88; object-fit: contain; border-radius: 8px; }
.fav-item em { font-style: normal; color: var(--muted); font-size: 0.8rem; }
.fav-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff; }
.plain-page .prose-body { max-width: 760px; }
.plain-page h2 { margin-top: 1.6em; font-size: 1.35rem; }

/* encyclopedia lists */
.enc-grid { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.enc-card { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--edge); text-decoration: none; transition: transform 0.25s var(--ease), border-color 0.2s; }
.enc-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.enc-card img { width: 100%; aspect-ratio: 626 / 457; object-fit: cover; border-radius: 10px; }
.enc-card em { font-style: normal; color: var(--muted); font-size: 0.82rem; }
.enc-list { columns: 4 200px; padding-left: 0; list-style: none; }
.enc-list li { break-inside: avoid; padding: 2px 0; }
.enc-list a { text-decoration: none; }
.enc-list a:hover { text-decoration: underline; }
.enc-list em { color: var(--muted); font-style: normal; font-size: 0.85rem; }
.letter-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.letter-nav a { min-width: 34px; text-align: center; padding: 6px; border-radius: 8px; background: var(--surface); border: 1px solid var(--edge); text-decoration: none; font-weight: 700; }
.letter-nav a[aria-current] { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- footer */
.footer { position: relative; z-index: 1; margin-top: 40px; background: var(--surface-solid); border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) 40px; display: grid; gap: 10px; font-size: 0.86rem; color: var(--muted); }
.footer-disclaimer { margin: 0; max-width: 90ch; }
.footer-credit { margin: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; color: var(--ink); }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-small { margin: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .topnav { position: fixed; left: 0; right: 0; top: var(--nav-h); margin: 0; padding: 6px var(--gutter); background: var(--surface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
  :root { --nav-h: 60px; }
  .timeline-section, .set-inner, .page-wrap { padding-top: calc(var(--nav-h) + 58px); }
  .toolbar, .dex-filters { top: calc(var(--nav-h) + 48px); }
  .prose-layout { grid-template-columns: 1fr; }
  .chapter-nav { position: static; }
  .chapter-nav ol { display: flex; flex-wrap: wrap; }
  .cm-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow: auto; overflow-x: hidden; }
  .cm-info, .cm-stage { min-width: 0; }
  .cm-stage { padding: 30px 56px 26px; }
  .cm-card { width: min(68vw, 330px); }
  .cm-info { overflow: visible; }
  .card-page-grid { grid-template-columns: 1fr; }
  .htp-turn { grid-template-columns: 1fr; }
  .phase:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -22px; transform: translateX(50%); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Timeline toggles: one line where the labels fit, with even padding all
     round; four choices (Pokémon) sit two by two. */
  .tl-controls { flex-direction: column; gap: 10px; }
  .mode-switch, .scope-toggle { flex-wrap: nowrap; gap: 4px; padding: 5px; max-width: 100%; }
  .mode-switch a, .scope-toggle a { padding: 7px clamp(8px, 2.6vw, 14px); font-size: min(0.86rem, 3.3vw); text-align: center; }
  .scope-toggle:has(> a:nth-child(4)) { display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; }
  .timeline { margin-top: 26px; }
  .brand-name { display: none; }
  .set-hero { grid-template-columns: 1fr; text-align: center; }
  .meta-row { justify-content: center; }
  .set-actions { justify-content: center; }
  .toolbar { position: static; }
  .toolbar .field { flex: 1 1 40%; }
  .field select { min-width: 0; width: 100%; }
  .htp-board { grid-template-columns: 1fr 1fr; grid-template-areas: "active active" "prizes deck" "prizes discard" "bench bench" "cap cap"; }
  .char-card.is-open { grid-column: auto; }
  .milestones li { grid-template-columns: 1fr; gap: 0; }
  .bt-plate { min-width: 0; }
  .bt-bar { width: 80px; }
  .card-modal { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .cm-shell { max-height: 100dvh; }
  .crumbs .next { margin-left: 0; }
  .lore-figure { float: none; width: 100%; margin: 0 0 12px; }
}

/* ---------------------------------------------------------------- calm mode */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .card-tile, .cm-card, .printing-card { transform: none !important; }
}

/* Opening a pack on the timeline (js/pages/timeline.js ripOpen) */
.rip-stage { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.rip-part { position: fixed; }
.rip-part img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35)); }
.rip-lid { transform-origin: 100% 100%; }
.rip-glow { position: fixed; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 244, 200, 0.85) 40%, rgba(255, 220, 120, 0) 100%); filter: blur(6px); opacity: 0; transform-origin: 50% 100%; }
.rip-flash { position: fixed; inset: 0; background: radial-gradient(circle at 50% 50%, #fff, var(--bg, #fff) 75%); opacity: 0; }