/* 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 { flex: none; 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; }
.topbar-inner.s-hide-nav .topnav, .topbar-inner.s-hide-game .brand-game, .topbar-inner.s-hide-brand .brand { visibility: hidden; }
.search.is-open .search-form { width: var(--search-w, 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: #8a4fd0; }
.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 { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; text-transform: uppercase; opacity: 0.7; }
/* A card from the set, cropped to its artwork, where a game has no set symbols. */
.set-chip-logo.is-art img { width: 54px; height: 36px; max-width: none; max-height: none; border-radius: 6px; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); }
.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; }
/* The + on every card: tap it to put the card in your binder; a green tick once it is there. */
.own-mark { position: absolute; right: 6px; top: 6px; z-index: 4; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 0.95rem; background: rgba(12, 10, 24, 0.72); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.75); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); cursor: pointer; opacity: 0.85; transform: scale(0.82); transition: transform 0.3s var(--ease), opacity 0.25s, background 0.25s; }
.own-mark b { grid-area: 1 / 1; line-height: 1; }
.own-mark .om-on { opacity: 0; transform: scale(0.4); transition: 0.3s var(--ease); }
.own-mark .om-add { font-size: 1.15rem; transition: 0.3s var(--ease); }
.own-mark:hover { transform: scale(1.06); opacity: 1; background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.card-tile.is-owned .own-mark { opacity: 1; transform: scale(1); background: #2ecc71; border-color: #fff; color: #fff; }
.card-tile.is-owned .own-mark .om-on { opacity: 1; transform: none; }
.card-tile.is-owned .own-mark .om-add { opacity: 0; transform: rotate(90deg) scale(0.4); }
.card-tile.is-owned .own-mark:hover { background: #e2554f; }
.card-tile.is-owned .own-mark:hover .om-on { opacity: 0; }
.card-tile.is-owned .own-mark:hover .om-add { opacity: 1; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .card-tile:not(.is-owned) .own-mark { opacity: 0; transform: scale(0.6); }
  .card-tile:not(.is-owned):is(:hover, :focus-visible) .own-mark { opacity: 0.9; transform: scale(0.9); }
  .card-tile:not(.is-owned) .own-mark:hover { opacity: 1; transform: scale(1.06); }
}
/* The binder button in the top bar, its count, and the card that flies into it. */
.binder-btn { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: inherit; }
.binder-btn:hover { border-color: var(--accent); }
.binder-btn.is-bump { animation: binder-bump 0.5s var(--ease); }
/* Daily PlayPack: the way to today's free packs, on every page. */
.pp-btn { position: relative; height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 12px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-weight: 800; font-size: 0.86rem; letter-spacing: -0.005em; color: #2a1300; background: linear-gradient(100deg, #ffe08a, #ffb547 55%, #ff8a4c); box-shadow: 0 6px 18px rgba(255, 160, 70, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 0 0 1px rgba(120, 50, 0, 0.18); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.pp-btn:hover, .pp-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 160, 70, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(120, 50, 0, 0.22); }
.pp-btn[aria-current] { box-shadow: 0 0 0 2px var(--ink), 0 6px 18px rgba(255, 160, 70, 0.3); }
.pp-btn .pp-ico { flex: none; }
.pp-btn .pp-short { display: none; }
.pp-dot { position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%; background: #ff3d6e; box-shadow: 0 0 0 2px var(--surface-solid, #111); }
.pp-btn.is-ready .pp-dot { animation: pp-pulse 2.4s ease-in-out infinite; }
@keyframes pp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (max-width: 1320px) and (min-width: 981px) { .pp-btn .pp-long { display: none; } .pp-btn .pp-short { display: inline; } }
@media (max-width: 640px) { .pp-btn { padding: 0 12px 0 10px; font-size: 0.8rem; } .pp-btn .pp-long { display: none; } .pp-btn .pp-short { display: inline; } }
@media (max-width: 430px) { .pp-btn { width: 42px; padding: 0; justify-content: center; } .pp-btn .pp-short { display: none; } }
@media (prefers-reduced-motion: reduce) { .pp-btn.is-ready .pp-dot { animation: none; } }
.binder-count { position: absolute; right: -5px; top: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 0.66rem; font-weight: 800; background: #2ecc71; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.binder-count[hidden] { display: none; }
.binder-ghost { position: fixed; z-index: 1000; pointer-events: none; border-radius: 5%; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); transform-origin: 50% 50%; object-fit: cover; }
@keyframes binder-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-6deg); } 70% { transform: scale(0.94); } 100% { transform: none; } }
.chip-btn .binder-ico { vertical-align: -2px; }
.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); }
/* Nothing decorative paints over the card face: only a holo card (data-foil)
   keeps its foil layer there. A plain card's art stays untouched. */
.card-tile:not([data-foil])::before, .printing-card::before, .cm-card:not([data-foil]) .card-img::before { content: none; }
[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; }
/* The game stylesheets move these behind the card (an edge aura) and switch
   them on there; anywhere else they stay off rather than paint on the art. */
.card-tile::after, .cm-card .card-img::after { content: none; }
/* Pokémon: no particles on the card picture (the art stays clean). */
.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; }
/* 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); }
/* Particles may play along the card's border, never over its centre. */
.cm-vfx-card { -webkit-mask-image: linear-gradient(to right, #000 0 6%, transparent 11% 89%, #000 94%), linear-gradient(to bottom, #000 0 4.5%, transparent 8% 92%, #000 95.5%); mask-image: linear-gradient(to right, #000 0 6%, transparent 11% 89%, #000 94%), linear-gradient(to bottom, #000 0 4.5%, transparent 8% 92%, #000 95.5%); }
.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; }

/* ---------------------------------------------------------------- accounts (sign-in window and account box) */
.linkish { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.acct-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--edge); border-radius: var(--r-lg); background: var(--surface-solid); color: var(--ink); box-shadow: var(--shadow); }
.acct-dialog::backdrop { background: rgba(6, 4, 16, 0.66); backdrop-filter: blur(4px); }
.acct-dialog[open] { animation: acct-in 0.28s var(--ease); }
@keyframes acct-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.acct-card { position: relative; padding: 28px 26px 24px; }
.acct-card h2 { font-family: var(--display); font-size: 1.45rem; line-height: 1.1; margin: 0 0 0.45em; }
.acct-card .quiet { margin: 0 0 18px; line-height: 1.5; }
.acct-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: var(--ink); cursor: pointer; }
.acct-field { display: grid; gap: 6px; margin: 0 0 14px; font-weight: 600; font-size: 0.9rem; }
.acct-field input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.06); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 500; }
.acct-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.acct-code { letter-spacing: 0.4em; font-size: 1.4rem !important; text-align: center; font-variant-numeric: tabular-nums; }
.acct-link { display: flex; align-items: center; border-radius: var(--r-sm); border: 1px solid var(--edge); background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.acct-link em { font-style: normal; color: var(--muted); padding-left: 12px; white-space: nowrap; font-weight: 500; font-size: 0.92rem; }
.acct-link input { border: 0; background: none; padding-left: 2px; min-width: 0; }
.acct-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 0.92rem; line-height: 1.4; cursor: pointer; }
.acct-check input { margin-top: 3px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }
.acct-err { margin: -4px 0 14px; padding: 9px 12px; border-radius: var(--r-sm); background: rgba(255, 92, 92, 0.14); color: #ffb4b4; font-size: 0.9rem; }
.acct-dev { margin: -4px 0 14px; padding: 9px 12px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 0.88rem; }
.acct-err[hidden], .acct-dev[hidden], .acct-step[hidden] { display: none; }
.acct-go { width: 100%; justify-content: center; padding: 13px 18px; font-size: 1rem; cursor: pointer; }
.acct-go:disabled { opacity: 0.6; cursor: progress; }
.acct-small { margin: 14px 0 0; text-align: center; font-size: 0.88rem; color: var(--muted); }
.acct-danger { color: #ff9b9b; }
.acct-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--surface); backdrop-filter: blur(10px); max-width: 460px; }
.acct-box p { margin: 0; flex: 1 1 200px; font-size: 0.92rem; color: var(--muted); line-height: 1.4; }
.acct-box .btn { cursor: pointer; }
.acct-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--accent), #e0662f); color: var(--accent-ink); font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.acct-who { display: grid; gap: 1px; min-width: 0; flex: 1 1 160px; }
.acct-who b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who a { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-who em { font-style: normal; font-size: 0.78rem; color: var(--accent); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-actions .chip-btn { cursor: pointer; padding: 6px 12px; font-size: 0.84rem; }
@media (prefers-reduced-motion: reduce) { .acct-dialog[open] { animation: none; } }

/* The featured card at the top of a set page leans toward the pointer and
   catches the light, like the cards below it. */
.set-logo .plaque-art.tilt { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow 0.3s; will-change: transform; }
.set-logo .plaque-art.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; mix-blend-mode: soft-light; background: radial-gradient(farthest-corner circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 62%); }
.set-logo .plaque-art.tilt.is-lit { box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45); }
.set-logo .plaque-art.tilt.is-lit::after { opacity: calc(0.4 + var(--far, 0) * 0.35); }
@media (prefers-reduced-motion: reduce) { .set-logo .plaque-art.tilt { transform: none; } }

/* Top bar: each game's button plays a small effect of its own while the
   pointer is on it (or it has keyboard focus): falling Poké Balls, coloured
   mana smoke with rising sparks, a scattered star field with a shooting star,
   a sea with a wave breaking across it, and fire meeting ice. Binder,
   Favorites and About keep the shared highlight. Three layers per button, all
   CSS: ::before, the .nl-fx span, then ::after on top. Calm mode and reduced
   motion keep them still. */
.topnav :is(.nl-pokemon, .nl-magic, .nl-lorcana, .nl-onepiece, .nl-yugioh), .brand-game { position: relative; isolation: isolate; overflow: hidden; }
.topnav :is(.nl-pokemon, .nl-magic, .nl-lorcana, .nl-onepiece, .nl-yugioh)::before, .brand-game::before,
.topnav :is(.nl-pokemon, .nl-magic, .nl-lorcana, .nl-onepiece, .nl-yugioh)::after, .brand-game::after,
:is(.topnav, .topbar-inner) .nl-fx { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.topnav :is(.nl-pokemon, .nl-magic, .nl-lorcana, .nl-onepiece, .nl-yugioh):is(:hover, :focus-visible)::before, .brand-game:is(:hover, :focus-visible)::before,
.topnav :is(.nl-pokemon, .nl-magic, .nl-lorcana, .nl-onepiece, .nl-yugioh):is(:hover, :focus-visible)::after, .brand-game:is(:hover, :focus-visible)::after,
:is(.topnav, .topbar-inner) a:is(:hover, :focus-visible) > .nl-fx { opacity: 1; }
:is(.topnav, .topbar-inner) .nl-magic:is(:hover, :focus-visible) > .nl-fx { opacity: 0.8; }

/* Pokémon: Poké Balls fall through the button. Each column is a tall tile with
   one ball at its top, so sliding a tile down by its own height loops cleanly. */
.nl-pokemon::before {
  --ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Ccircle cx='5' cy='5' r='4.4' fill='%23f5f5f5' stroke='%23222' stroke-width='.9'/%3E%3Cpath d='M.6 5a4.4 4.4 0 0 1 8.8 0z' fill='%23e3350d' stroke='%23222' stroke-width='.9'/%3E%3Ccircle cx='5' cy='5' r='1.4' fill='%23fff' stroke='%23222' stroke-width='.8'/%3E%3C/svg%3E");
  background: var(--ball) 8% 0 / 9px 36px repeat-y, var(--ball) 34% 14px / 8px 44px repeat-y, var(--ball) 63% 6px / 9px 40px repeat-y, var(--ball) 90% 22px / 8px 48px repeat-y;
}
.nl-pokemon::after { background: radial-gradient(80% 140% at 50% 120%, rgba(227, 53, 13, 0.28), transparent 70%), radial-gradient(60% 120% at 50% -20%, rgba(255, 210, 63, 0.18), transparent 70%); }
/* Same thin inner edge as the other game buttons. */
.nl-pokemon > .nl-fx { box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.4), inset 0 0 9px rgba(255, 210, 63, 0.25); }
.nl-pokemon:is(:hover, :focus-visible)::before { animation: nl-balls 1.8s linear infinite; }
@keyframes nl-balls { from { background-position: 8% -36px, 34% -30px, 63% -34px, 90% -26px; } to { background-position: 8% 0, 34% 14px, 63% 6px, 90% 22px; } }

/* Magic: blue, red and green mana smoke curls up through the button. The
   smoke tiles slide exactly one tile per loop (on the compositor), so the
   loop has no seam and nothing jumps when it starts over. No particles. */
.nl-magic::before {
  background:
    radial-gradient(42% 90% at 18% 70%, rgba(60, 140, 255, 0.55), transparent 70%),
    radial-gradient(40% 90% at 52% 85%, rgba(255, 60, 50, 0.5), transparent 70%),
    radial-gradient(42% 90% at 84% 65%, rgba(40, 220, 110, 0.5), transparent 70%),
    linear-gradient(rgba(14, 10, 30, 0.55), rgba(14, 10, 30, 0.35));
  background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
  box-shadow: inset 0 0 10px rgba(150, 190, 255, 0.45), 0 0 0 1px rgba(190, 200, 255, 0.3);
}
:is(.topnav, .topbar-inner) .nl-magic > .nl-fx {
  inset: -30% -10%;
  overflow: hidden;
  mix-blend-mode: screen;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 80%, transparent);
  mask: linear-gradient(transparent, #000 30%, #000 80%, transparent);
}
.nl-magic > .nl-fx::before, .nl-magic > .nl-fx::after { content: ""; position: absolute; left: 0; top: 0; width: calc(100% + 160px); height: calc(100% + 80px); pointer-events: none; }
.nl-magic > .nl-fx::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0125 0.0375' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.55 0 0 0 0 1 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 160px 80px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01875 0.0375' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.95 0 0 0 0 0.45 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23s)'/%3E%3C/svg%3E") 70px 34px / 160px 80px; }
.nl-magic > .nl-fx::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0125 0.05' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.28 0 0 0 0 0.22 0 0 0 2.6 -1.15'/%3E%3C/filter%3E%3Crect width='160' height='80' filter='url(%23s)'/%3E%3C/svg%3E") 30px 10px / 160px 80px; opacity: 0.9; }
:is(.topnav, .topbar-inner) .nl-magic::after { display: none; }
.nl-magic:is(:hover, :focus-visible)::before { animation: nl-mana 5s ease-in-out infinite alternate; }
.nl-magic:is(:hover, :focus-visible) > .nl-fx::before { animation: nl-rise 7s linear infinite; }
.nl-magic:is(:hover, :focus-visible) > .nl-fx::after { animation: nl-drift 16s linear infinite; }
@keyframes nl-mana { from { background-position: 0% 100%, 50% 100%, 100% 100%, 0 0; } to { background-position: 30% 0%, 20% 10%, 70% 0%, 0 0; } }
@keyframes nl-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -80px, 0); } }
@keyframes nl-drift { from { transform: translate3d(-160px, 0, 0); } to { transform: translate3d(0, -80px, 0); } }
@keyframes nl-twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* Disney Lorcana: a dense, scattered star field twinkling in two layers, and
   now and then a shooting star with a tapering trail. */
.nl-lorcana::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 42'%3E%3Ccircle cx='68.0' cy='23.4' r='0.7' fill='%23cfe6ff' fill-opacity='0.55'/%3E%3Cpath d='M120.0 18.0L120.4 19.6L122.0 20.0L120.4 20.5L120.0 22.1L119.5 20.5L117.9 20.0L119.5 19.6Z' fill='%23fff6d0'/%3E%3Ccircle cx='14.4' cy='33.4' r='0.6' fill='%23ffffff' fill-opacity='0.98'/%3E%3Ccircle cx='97.8' cy='25.6' r='0.7' fill='%23fff6d0' fill-opacity='0.48'/%3E%3Ccircle cx='6.3' cy='36.2' r='0.5' fill='%23ffffff' fill-opacity='0.69'/%3E%3Ccircle cx='125.7' cy='21.8' r='0.85' fill='%23e3d4ff' fill-opacity='0.50'/%3E%3Ccircle cx='97.9' cy='17.3' r='0.5' fill='%23ffffff' fill-opacity='0.87'/%3E%3Ccircle cx='76.9' cy='2.2' r='0.5' fill='%23ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='142.8' cy='34.9' r='0.35' fill='%23ffffff' fill-opacity='0.71'/%3E%3Ccircle cx='146.1' cy='16.9' r='0.45' fill='%23ffffff' fill-opacity='0.88'/%3E%3Cpath d='M40.9 2.4L41.4 4.0L43.1 4.5L41.4 5.0L40.9 6.6L40.5 5.0L38.8 4.5L40.5 4.0Z' fill='%23e3d4ff'/%3E%3Cpath d='M137.6 4.2L138.1 5.9L139.8 6.4L138.1 6.9L137.6 8.6L137.1 6.9L135.4 6.4L137.1 5.9Z' fill='%23ffffff'/%3E%3Ccircle cx='73.0' cy='28.3' r='0.45' fill='%23fff6d0' fill-opacity='0.99'/%3E%3Cpath d='M114.9 15.6L115.4 17.3L117.0 17.8L115.4 18.2L114.9 19.9L114.4 18.2L112.8 17.8L114.4 17.3Z' fill='%23cfe6ff'/%3E%3Ccircle cx='32.5' cy='11.8' r='0.35' fill='%23e3d4ff' fill-opacity='0.57'/%3E%3Cpath d='M59.4 33.3L59.8 34.8L61.3 35.2L59.8 35.6L59.4 37.1L58.9 35.6L57.4 35.2L58.9 34.8Z' fill='%23ffffff'/%3E%3Ccircle cx='66.3' cy='1.4' r='0.6' fill='%23e3d4ff' fill-opacity='0.49'/%3E%3Cpath d='M14.3 22.2L14.8 23.8L16.4 24.3L14.8 24.8L14.3 26.4L13.9 24.8L12.2 24.3L13.9 23.8Z' fill='%23fff6d0'/%3E%3Ccircle cx='93.1' cy='6.1' r='0.45' fill='%23cfe6ff' fill-opacity='0.93'/%3E%3Ccircle cx='28.1' cy='7.2' r='0.45' fill='%23fff6d0' fill-opacity='0.85'/%3E%3Ccircle cx='24.5' cy='26.2' r='0.6' fill='%23fff6d0' fill-opacity='0.94'/%3E%3Cpath d='M90.3 15.6L90.8 17.4L92.5 17.9L90.8 18.3L90.3 20.1L89.8 18.3L88.1 17.9L89.8 17.4Z' fill='%23ffffff'/%3E%3Ccircle cx='38.8' cy='30.6' r='0.7' fill='%23cfe6ff' fill-opacity='0.72'/%3E%3Cpath d='M78.0 36.0L78.5 37.7L80.2 38.2L78.5 38.6L78.0 40.4L77.5 38.6L75.8 38.2L77.5 37.7Z' fill='%23ffffff'/%3E%3Ccircle cx='97.7' cy='25.6' r='0.45' fill='%23ffffff' fill-opacity='0.86'/%3E%3Cpath d='M11.2 15.5L11.7 17.0L13.2 17.5L11.7 17.9L11.2 19.4L10.8 17.9L9.3 17.5L10.8 17.0Z' fill='%23fff6d0'/%3E%3Cpath d='M55.6 22.0L56.0 23.5L57.5 23.9L56.0 24.3L55.6 25.8L55.2 24.3L53.7 23.9L55.2 23.5Z' fill='%23fff6d0'/%3E%3Ccircle cx='67.7' cy='14.2' r='0.35' fill='%23fff6d0' fill-opacity='0.71'/%3E%3Cpath d='M53.9 11.2L54.4 13.0L56.2 13.5L54.4 14.0L53.9 15.8L53.4 14.0L51.6 13.5L53.4 13.0Z' fill='%23ffffff'/%3E%3Cpath d='M72.4 28.4L72.8 29.8L74.2 30.2L72.8 30.6L72.4 32.1L72.0 30.6L70.5 30.2L72.0 29.8Z' fill='%23e3d4ff'/%3E%3C/svg%3E") 0 0 / 150px 42px, linear-gradient(rgba(40, 28, 110, 0.5), rgba(110, 80, 200, 0.28)); }
:is(.topnav, .topbar-inner) .nl-lorcana > .nl-fx { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 97 37'%3E%3Ccircle cx='53.1' cy='13.1' r='0.7' fill='%23d8c8ff' fill-opacity='0.96'/%3E%3Cpath d='M38.3 -0.5L38.8 1.2L40.5 1.7L38.8 2.1L38.3 3.8L37.9 2.1L36.2 1.7L37.9 1.2Z' fill='%23ffffff'/%3E%3Ccircle cx='22.4' cy='13.2' r='0.7' fill='%23fff1c0' fill-opacity='0.75'/%3E%3Ccircle cx='80.4' cy='8.0' r='0.6' fill='%23ffffff' fill-opacity='0.82'/%3E%3Ccircle cx='66.0' cy='19.3' r='0.5' fill='%23d8c8ff' fill-opacity='0.60'/%3E%3Ccircle cx='72.3' cy='29.7' r='0.5' fill='%23fff1c0' fill-opacity='0.87'/%3E%3Ccircle cx='56.8' cy='23.6' r='0.35' fill='%23fff1c0' fill-opacity='0.85'/%3E%3Ccircle cx='85.5' cy='31.0' r='0.5' fill='%23fff1c0' fill-opacity='0.89'/%3E%3Ccircle cx='53.5' cy='6.7' r='0.6' fill='%23d8c8ff' fill-opacity='0.60'/%3E%3Ccircle cx='59.7' cy='6.4' r='0.85' fill='%23d8c8ff' fill-opacity='0.99'/%3E%3Ccircle cx='61.3' cy='26.6' r='0.5' fill='%23d8c8ff' fill-opacity='0.46'/%3E%3Ccircle cx='72.7' cy='14.9' r='0.45' fill='%23fff1c0' fill-opacity='0.69'/%3E%3Ccircle cx='28.6' cy='1.3' r='0.85' fill='%23ffffff' fill-opacity='0.62'/%3E%3Ccircle cx='1.7' cy='23.0' r='0.7' fill='%23ffffff' fill-opacity='0.87'/%3E%3Ccircle cx='15.4' cy='26.1' r='0.35' fill='%23fff1c0' fill-opacity='0.85'/%3E%3Cpath d='M25.4 -0.2L25.9 1.4L27.4 1.8L25.9 2.2L25.4 3.7L25.0 2.2L23.5 1.8L25.0 1.4Z' fill='%23ffffff'/%3E%3Ccircle cx='4.2' cy='28.4' r='0.85' fill='%23ffffff' fill-opacity='0.93'/%3E%3Ccircle cx='51.6' cy='34.0' r='0.35' fill='%23ffffff' fill-opacity='0.79'/%3E%3Ccircle cx='76.4' cy='21.1' r='0.6' fill='%23fff1c0' fill-opacity='0.88'/%3E%3Ccircle cx='6.3' cy='12.3' r='0.45' fill='%23fff1c0' fill-opacity='0.61'/%3E%3C/svg%3E") 31px 7px / 97px 37px; }
:is(.topnav, .topbar-inner) .nl-lorcana::after {
  inset: auto; top: 6%; left: 4%; width: 58px; height: 4px; border-radius: 4px;
  background: radial-gradient(circle at calc(100% - 2px) 50%, #fff 0 1.5px, rgba(255, 248, 220, 0.6) 2.2px, transparent 3.2px), linear-gradient(90deg, transparent, rgba(200, 180, 255, 0.12) 30%, rgba(255, 238, 190, 0.55) 78%, rgba(255, 252, 240, 0.95) 96%, transparent 100%) center / 100% 1.6px no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 246, 208, 0.9));
  transform-origin: 100% 50%;
  transform: rotate(18deg) translateX(-70px) scaleX(0.2);
}
.nl-lorcana:is(:hover, :focus-visible)::before { animation: nl-twinkle 1.6s ease-in-out infinite alternate; }
.nl-lorcana:is(:hover, :focus-visible) > .nl-fx { animation: nl-twinkle 1.1s ease-in-out 0.55s infinite alternate-reverse; }
.nl-lorcana:is(:hover, :focus-visible)::after { animation: nl-shoot 3.6s cubic-bezier(0.35, 0, 0.75, 1) 0.25s infinite; }
@keyframes nl-shoot {
  0% { transform: rotate(18deg) translateX(-70px) scaleX(0.2); opacity: 0; }
  6% { opacity: 1; }
  24% { transform: rotate(18deg) translateX(60px) scaleX(1); opacity: 1; }
  32% { transform: rotate(18deg) translateX(110px) scaleX(0.5); opacity: 0; }
  100% { transform: rotate(18deg) translateX(110px) scaleX(0.5); opacity: 0; }
}

/* One Piece: a sea with two swells drifting past each other, and a wave
   that rises out of the water, curls over with a foaming lip and a dark
   barrel, rolls across the button and settles back into the sea. The wave
   sits between the back swell and the front swell, so its foot is always
   under the front water: it grows out of the sea with no gap or seam. */
.nl-onepiece::before { background: radial-gradient(40% 70% at 78% 10%, rgba(255, 220, 140, 0.35), transparent 70%), linear-gradient(rgba(226, 65, 47, 0.14), rgba(60, 140, 220, 0.18)); }
:is(.topnav, .topbar-inner) .nl-onepiece > .nl-fx { inset: 0; border-radius: 0; }
.nl-onepiece > .nl-fx::before, .nl-onepiece > .nl-fx::after { content: ""; position: absolute; pointer-events: none; }
/* Back swell. */
.nl-onepiece > .nl-fx::before { left: 0; right: 0; bottom: 0; height: 46%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 20' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C7.70 3.40 20.30 3.40 28.00 6 S48.30 8.60 56 6 V20 H0Z' fill='%231b5f9e' fill-opacity='0.95'/%3E%3Cpath d='M0 6 C7.70 3.40 20.30 3.40 28.00 6 S48.30 8.60 56 6' fill='none' stroke='%237cc6ff' stroke-width='.9' stroke-opacity='.85'/%3E%3C/svg%3E") 0 0 / 56px 100% repeat-x; }
/* The breaking wave; its foot reaches below the front water line. */
.nl-onepiece > .nl-fx::after {
  left: -92px; bottom: -7%; width: 92px; height: 106%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232889cc'/%3E%3Cstop offset='.55' stop-color='%232f97d8'/%3E%3Cstop offset='.74' stop-color='%234fc0e8'/%3E%3Cstop offset='.85' stop-color='%2386def3'/%3E%3Cstop offset='1' stop-color='%233aa5df'/%3E%3C/linearGradient%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.28'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%2306325e' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231b5f9e' stop-opacity='.6'/%3E%3C/linearGradient%3E%3Cfilter id='t' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 34V27C18 27 34 27 50 25.5C64 24 74 20 82 13C88 7.5 95 4.5 102 4.5C111 4.5 117 9 117 15C117 19.5 113.5 21.5 110.5 19.8C108.3 18.5 108.6 15.6 111 15.2C105 13.2 99 16.5 96.5 22C95.5 25 99 26.5 106 26.5C111 26.5 116 26.5 120 26.5V34Z' fill='url(%23h)'/%3E%3Cpath d='M0 34V27C18 27 34 27 50 25.5C64 24 74 20 82 13C88 7.5 95 4.5 102 4.5C111 4.5 117 9 117 15V34Z' fill='url(%23v)'/%3E%3Cpath d='M111 15.2C105 13.2 99 16.5 96.5 22C95.5 25 99 26.5 104 26.5C104 23 106.5 18 111 15.2Z' fill='%230b4580' fill-opacity='.8'/%3E%3Cg stroke='%23fff' fill='none' stroke-linecap='round'%3E%3Cpath d='M70 22C78 18 84 13 90 9' stroke-width='.6' stroke-opacity='.45'/%3E%3Cpath d='M58 24.6C70 22.6 78 19 84 15' stroke-width='.5' stroke-opacity='.35'/%3E%3Cpath d='M80 14.5C87 8 94 4.8 102 4.8C110.5 4.8 116.6 9 116.6 15C116.6 19 113.5 21 110.8 19.6' stroke-width='2.4' stroke-opacity='.95'/%3E%3C/g%3E%3Cg fill='%23fff' filter='url(%23t)'%3E%3Ccircle cx='104' cy='3.6' r='2.3'/%3E%3Ccircle cx='109' cy='3.9' r='2.1'/%3E%3Ccircle cx='113.6' cy='6.6' r='1.9'/%3E%3Ccircle cx='116.6' cy='10.6' r='1.7'/%3E%3Ccircle cx='99' cy='4.7' r='1.7'/%3E%3Ccircle cx='94' cy='5.9' r='1.3'/%3E%3Cpath d='M62 25.2C74 24.2 86 23.2 95 23.6C99 25 104 25.4 108 24.6C112 23.6 116 24 118 25.2C118.6 26.4 116 27 112 27.2C98 27.8 80 27.6 62 26.6C60.6 26.2 60.6 25.4 62 25.2Z' fill-opacity='.85'/%3E%3Ccircle cx='100' cy='23.8' r='1.6'/%3E%3Ccircle cx='105' cy='23.2' r='1.8'/%3E%3Ccircle cx='110' cy='23.6' r='1.5'/%3E%3Ccircle cx='114.5' cy='24.2' r='1.2'/%3E%3Cellipse cx='50' cy='25.6' rx='6' ry='.7' fill-opacity='.45'/%3E%3Cellipse cx='36' cy='26.2' rx='4' ry='.6' fill-opacity='.3'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='101' cy='1.2' r='.7'/%3E%3Ccircle cx='107' cy='.9' r='.6'/%3E%3Ccircle cx='112' cy='2.2' r='.6'/%3E%3Ccircle cx='118.5' cy='6' r='.5'/%3E%3Ccircle cx='96' cy='2.6' r='.45'/%3E%3Ccircle cx='103' cy='21' r='.5'/%3E%3Ccircle cx='112' cy='21.6' r='.45'/%3E%3C/g%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 32%); mask: linear-gradient(90deg, transparent, #000 32%);
  transform-origin: 70% 79%; transform: scaleY(0.3); opacity: 0;
  filter: drop-shadow(0 -1px 2px rgba(220, 245, 255, 0.3));
}
/* Front swell, drawn over the foot of the wave. */
:is(.topnav, .topbar-inner) .nl-onepiece::after { inset: auto 0 0 0; height: 46%; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C5.50 5.80 14.50 5.80 20.00 8 S34.50 10.20 40 8 V20 H0Z' fill='%232a8fd4' fill-opacity='0.9'/%3E%3Cpath d='M0 8 C5.50 5.80 14.50 5.80 20.00 8 S34.50 10.20 40 8' fill='none' stroke='%23dff4ff' stroke-width='.9' stroke-opacity='.85'/%3E%3C/svg%3E") 14px 3px / 40px 100% repeat-x; }
.nl-onepiece:is(:hover, :focus-visible) > .nl-fx::before { animation: nl-sea-back 6s linear infinite; }
.nl-onepiece:is(:hover, :focus-visible)::after { animation: nl-sea-front 6s linear infinite; }
.nl-onepiece:is(:hover, :focus-visible) > .nl-fx::after { animation: nl-roll 7.5s ease-in-out 0.2s infinite; }
@keyframes nl-sea-back { to { background-position: 56px 0; } }
@keyframes nl-sea-front { to { background-position: -66px 3px; } }
@keyframes nl-roll {
  0% { left: -92px; transform: scaleY(0.3); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: scaleY(0.85); }
  62% { left: calc(100% - 74px); transform: scaleY(1); opacity: 1; }
  78% { left: calc(100% - 36px); transform: scaleY(0.62); opacity: 0.9; }
  90%, 100% { left: 100%; transform: scaleY(0.25); opacity: 0; }
}

/* Yu-Gi-Oh!: the whole button becomes a gold foil stamp, like the corner stamp
   on the cards. A big embossed Eye of Anubis sits in the middle, made-up
   hieroglyph-like marks fill the rest inside a double frame, and a rainbow sheen
   catches the light. The stamp holds still. All shapes are original drawings,
   not card art. Gold puzzle pieces rise in front. */
:root .nl-yugioh::before { background: radial-gradient(55% 110% at 50% 50%, rgba(255, 205, 90, 0.32), transparent 72%), radial-gradient(60% 120% at 50% 115%, rgba(240, 180, 60, 0.35), transparent 70%), linear-gradient(rgba(40, 22, 70, 0.6), rgba(70, 40, 20, 0.5)); }
:root .nl-yugioh > .nl-fx { box-shadow: inset 0 0 0 1px rgba(246, 207, 90, 0.6), inset 0 0 12px rgba(246, 190, 70, 0.4); }
:root .nl-yugioh > .nl-fx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 62 48'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='46'%3E%3Cstop offset='0' stop-color='%23fff3b0'/%3E%3Cstop offset='.28' stop-color='%23f5c93f'/%3E%3Cstop offset='.62' stop-color='%23c18a17'/%3E%3Cstop offset='1' stop-color='%23f0c24a'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='.36' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fffbe0'/%3E%3Cstop offset='.35' stop-color='%23f6cd45'/%3E%3Cstop offset='.8' stop-color='%23b47c12'/%3E%3Cstop offset='1' stop-color='%236e4508'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24.5 27.5C24.5 34 22 39.5 16.5 43' stroke='%232e1b02' stroke-width='6.6'/%3E%3Cpath d='M35.5 27.5C35.5 36 37.5 42 43.5 42C48.5 42 50.5 37.5 47.5 35C45.2 33.2 42.3 35 44 37.6' stroke='%232e1b02' stroke-width='6.6'/%3E%3Cpath d='M24.5 27.5C24.5 34 22 39.5 16.5 43' stroke='url(%23g)' stroke-width='4.2'/%3E%3Cpath d='M35.5 27.5C35.5 36 37.5 42 43.5 42C48.5 42 50.5 37.5 47.5 35C45.2 33.2 42.3 35 44 37.6' stroke='url(%23g)' stroke-width='4.2'/%3E%3Cpath d='M24.5 27.5C24.5 34 22 39.5 16.5 43' stroke='%23fff6c8' stroke-width='1' stroke-opacity='.55' transform='translate(-.8 -.3)'/%3E%3Cpath d='M35.5 27.5C35.5 36 37.5 42 43.5 42C48.5 42 50.5 37.5 47.5 35C45.2 33.2 42.3 35 44 37.6' stroke='%23fff6c8' stroke-width='1' stroke-opacity='.55' transform='translate(-.8 -.3)'/%3E%3C/g%3E%3Cpath d='M22.3 31.6L26.6 32.4M33.4 32.2L37.7 32.2' stroke='%232e1b02' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M5.5 9.8C14 2.5 22 1 30 1S46 2.5 54.5 9.8C58.2 11 58.5 17.6 54.5 18.6C46 26.5 38 29.5 30 29.5S14 26.5 5.5 18.6C1.5 17.6 1.8 11 5.5 9.8Z' fill='url(%23g)' stroke='%232e1b02' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M5.2 10.6C14 4.8 22 3.6 30 3.6S46 4.8 54.8 10.6' fill='none' stroke='%23fff6c8' stroke-width='.8' stroke-opacity='.7'/%3E%3Cpath d='M6 9.8C15 6.4 22 5.6 30 5.6S45 6.4 54 9.8' fill='none' stroke='%232e1b02' stroke-width='1.5'/%3E%3Cpath d='M2.4 14.2H10.5M49.5 14.2H57.6' stroke='%232e1b02' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M9.5 14.2C17 8.6 23.5 7.4 30 7.4S43 8.6 50.5 14.2C43 21 36.5 23.6 30 23.6S17 21 9.5 14.2Z' fill='%233a2306' stroke='%232e1b02' stroke-width='1.7'/%3E%3Ccircle cx='30' cy='15.2' r='8' fill='url(%23b)' stroke='%232e1b02' stroke-width='1.7'/%3E%3Ccircle cx='29' cy='14.4' r='4.2' fill='none' stroke='%23f9dc7a' stroke-width='1'/%3E%3Ccircle cx='29' cy='14.4' r='3.6' fill='%230d0701'/%3E%3Cellipse cx='26.4' cy='11.4' rx='1.6' ry='1' fill='%23fffbe6' fill-opacity='.85' transform='rotate(-30 26.4 11.4)'/%3E%3C/svg%3E") center / auto 94% no-repeat,
    linear-gradient(115deg, transparent 20%, rgba(255, 150, 215, 0.3) 32%, rgba(140, 230, 255, 0.3) 42%, rgba(255, 255, 200, 0.4) 50%, rgba(170, 255, 170, 0.25) 58%, transparent 72%),
    radial-gradient(closest-side, rgba(238, 192, 74, 0.95) 55%, rgba(238, 192, 74, 0) 100%) center / 60px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='.6'%3E%3Cpath d='M1.4 6.6L3 3.4L4.6 6.6M7.5 3.2V6.8M10.5 3.2V6.8M7.5 5H10.5M13.4 6.6L15 3.4L16.6 6.6M19.4 6.6L21 3.4L22.6 6.6M25.5 3.2V6.8M28.5 3.2V6.8M25.5 5H28.5M31 5q1-1.4 2 0t2 0M37 6.5Q38.5 3 40 5L41 7M38.7 3.8l.9-.8M43.5 3.2V6.8M46.5 3.2V6.8M43.5 5H46.5M49.4 6.6L51 3.4L52.6 6.6M55 6.5Q56.5 3 58 5L59 7M56.7 3.8l.9-.8M4.7 15a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0-2.6 0M10.4 16.6L12 13.4L13.6 16.6M18 14.6V17.2M16.7 15H19.3M17.2 13.7a.8.8 0 1 0 1.6 0a.8.8 0 1 0-1.6 0M22 16.5Q23.5 13 25 15L26 17M23.7 13.8l.9-.8M28.7 15a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0-2.6 0M34.5 13.2V16.8M37.5 13.2V16.8M34.5 15H37.5M42 13V17M46.6 13.6h2.8v2.8h-2.8zM52.4 16.6L54 13.4L55.6 16.6' stroke='%23fffbe0' stroke-opacity='.7' transform='translate(-.35 -.35)'/%3E%3Cpath d='M1.4 6.6L3 3.4L4.6 6.6M7.5 3.2V6.8M10.5 3.2V6.8M7.5 5H10.5M13.4 6.6L15 3.4L16.6 6.6M19.4 6.6L21 3.4L22.6 6.6M25.5 3.2V6.8M28.5 3.2V6.8M25.5 5H28.5M31 5q1-1.4 2 0t2 0M37 6.5Q38.5 3 40 5L41 7M38.7 3.8l.9-.8M43.5 3.2V6.8M46.5 3.2V6.8M43.5 5H46.5M49.4 6.6L51 3.4L52.6 6.6M55 6.5Q56.5 3 58 5L59 7M56.7 3.8l.9-.8M4.7 15a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0-2.6 0M10.4 16.6L12 13.4L13.6 16.6M18 14.6V17.2M16.7 15H19.3M17.2 13.7a.8.8 0 1 0 1.6 0a.8.8 0 1 0-1.6 0M22 16.5Q23.5 13 25 15L26 17M23.7 13.8l.9-.8M28.7 15a1.3 1.3 0 1 0 2.6 0a1.3 1.3 0 1 0-2.6 0M34.5 13.2V16.8M37.5 13.2V16.8M34.5 15H37.5M42 13V17M46.6 13.6h2.8v2.8h-2.8zM52.4 16.6L54 13.4L55.6 16.6' stroke='%235a3a08' stroke-opacity='.85'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 30px 10px,
    linear-gradient(115deg, #fff0a6, #e2ab33 30%, #fbdf86 52%, #b07b18 78%, #f0c95a);
  background-blend-mode: normal, soft-light, normal, normal, normal;
  box-shadow: inset 0 0 0 1px #4a2e06, inset 0 0 0 2.5px #f8dd84, inset 0 0 0 3.2px #5a3a08, inset 0 0 3px rgba(90, 58, 8, 0.5); }
:root .nl-yugioh::after { inset: 0 0 auto 0; height: calc(100% + 44px); border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4c2'/%3E%3Cstop offset='.35' stop-color='%23f6cf5a'/%3E%3Cstop offset='.7' stop-color='%23c8922a'/%3E%3Cstop offset='1' stop-color='%237a4e12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%236b4510' stroke-width='.35'%3E%3Cpath d='M6 3L9 8.5H3Z'/%3E%3Cpath d='M22 12H27L24.5 16.4Z'/%3E%3Cpath d='M44 6L47 9L44 12L41 9Z'/%3E%3Cpath d='M12 28L16.5 29.5L13.5 33Z'/%3E%3Cpath d='M33 33H39L37.5 36H34.5Z'/%3E%3Cpath d='M53 24L55.5 28H50.5Z'/%3E%3Cpath d='M3 19L6 20L5 23L2 22Z'/%3E%3Cpath d='M48 37L52 38.5L49 41Z'/%3E%3C/g%3E%3Cpath d='M30 1.7999999999999998L30.55 3.45L32.2 4L30.55 4.55L30 6.2L29.45 4.55L27.8 4L29.45 3.45Z' fill='%23fff6d0' fill-opacity='0.9'/%3E%3Cpath d='M51 13.4L51.4 14.6L52.6 15L51.4 15.4L51 16.6L50.6 15.4L49.4 15L50.6 14.6Z' fill='%23fff6d0' fill-opacity='0.8'/%3E%3Cpath d='M5 37.2L5.45 38.55L6.8 39L5.45 39.45L5 40.8L4.55 39.45L3.2 39L4.55 38.55Z' fill='%23fff6d0' fill-opacity='0.8'/%3E%3Cpath d='M24 22.6L24.35 23.65L25.4 24L24.35 24.35L24 25.4L23.65 24.35L22.6 24L23.65 23.65Z' fill='%23fff6d0' fill-opacity='0.7'/%3E%3C/svg%3E") 0 0 / 60px 44px; opacity: 0; }
:root .nl-yugioh:is(:hover, :focus-visible)::after { opacity: 0.6; animation: nl-ygo-rise 5s linear infinite; }
:root .nl-yugioh:is(:hover, :focus-visible) { text-shadow: 1px 0 0 #1a0e00, -1px 0 0 #1a0e00, 0 1px 0 #1a0e00, 0 -1px 0 #1a0e00, 1px 1px 0 #1a0e00, -1px 1px 0 #1a0e00, 1px -1px 0 #1a0e00, -1px -1px 0 #1a0e00, 0 2px 2px rgba(0, 0, 0, 0.7); }
@keyframes nl-ygo-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -44px, 0); } }

/* Less motion: the effects hold still (the colours and shapes still show on
   hover, minus the shooting star and the breaking wave). */
@media (prefers-reduced-motion: reduce) {
  .topnav a::before, .topnav a::after, .brand-game::before, .brand-game::after, .nl-fx, .nl-fx::before, .nl-fx::after { animation: none !important; }
  .nl-lorcana::after, .nl-onepiece > .nl-fx::after { display: none; }
}

/* Account button (right of the game switcher) and its menu. */
.acct-nav { position: relative; }
.acct-btn { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface); color: inherit; cursor: pointer; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--accent); }
.acct-btn .acct-avatar { width: 32px; height: 32px; font-size: 0.95rem; }
.acct-menu { position: absolute; right: 0; top: 50px; z-index: 60; width: 240px; display: grid; padding: 8px; background: var(--surface-solid); border: 1px solid var(--edge); border-radius: var(--r-md); box-shadow: var(--shadow); }
.acct-menu[hidden] { display: none; }
.acct-menu-head { margin: 2px 8px 8px; display: grid; gap: 1px; min-width: 0; }
.acct-menu-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu-head span { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a, .acct-menu button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: var(--line); outline: none; }
.acct-menu hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line); }
.set-sub { margin: 18px 0 6px; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Card effects switched off (Settings, or the device asks for less motion). */
.calm :is(.card-tile, .printing-card, .cm-card, .bview-card, .pocket-card, .plaque-art, .topnav a, .brand-game)::before,
.calm :is(.card-tile, .printing-card, .cm-card, .bview-card, .pocket-card, .plaque-art, .topnav a, .brand-game)::after,
.calm .nl-fx, .calm .nl-fx::before, .calm .nl-fx::after,
.calm :is(.cm-card, .bview-card, .card-tile) .card-img::before,
.calm :is(.cm-card, .bview-card, .card-tile) .card-img::after { animation: none !important; }
.calm .cm-vfx, .calm .cm-vfx-card, .calm .nl-lorcana::after, .calm .nl-onepiece > .nl-fx::after { display: none; }

/* Game buttons (home page hero and the empty binder): each carries its game's best-known card, blended in from the right. */
.game-btn { --ax: 50%; --ay: 30%; --az: 1; position: relative; isolation: isolate; display: flex; align-items: center; min-height: 66px; padding: 10px 16px; border: 0; border-radius: 16px; overflow: hidden; color: #fff; font: inherit; text-align: left; text-decoration: none; cursor: pointer; background: var(--gb-bg, var(--surface)); box-shadow: 0 10px 26px color-mix(in srgb, var(--tc, #000) 32%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.game-btn:hover, .game-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px color-mix(in srgb, var(--tc, #000) 48%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.game-btn:active { transform: translateY(1px) scale(0.98); }
.gb-art { position: absolute; inset: 0 0 0 26%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%); mask-image: linear-gradient(90deg, transparent, #000 58%); }
.gb-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ax) var(--ay); transform: scale(var(--az)); transform-origin: var(--ax) var(--ay); transition: transform 0.6s var(--ease); }
.game-btn:hover .gb-art img { transform: scale(calc(var(--az) * 1.08)); }
/* A soft shine that sweeps across on hover. */
.game-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%); transform: translateX(-120%); }
.game-btn:hover::after { transform: translateX(120%); transition: transform 0.8s var(--ease); }
.gb-text { position: relative; display: grid; line-height: 1.1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.gb-text small { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.88; }
.gb-text b { font-family: var(--display); font-weight: 800; font-size: 1.04rem; letter-spacing: -0.01em; }
.gb-pokemon { --gb-bg: linear-gradient(100deg, #ffcb3d, #f39a2c 45%, #b8401c); --ay: 24%; --az: 1.5; color: #2a1300; }
.gb-pokemon .gb-text { text-shadow: 0 1px 6px rgba(255, 230, 160, 0.6); }
.gb-magic { --gb-bg: linear-gradient(100deg, #f3dc9a, #c99a3e 45%, #6e1d12); --ay: 40%; color: #1a1208; }
.gb-magic .gb-text { text-shadow: 0 1px 6px rgba(255, 240, 200, 0.6); }
.gb-lorcana { --gb-bg: linear-gradient(100deg, #2b3a8f, #4f6fd8 55%, #1a1f4d); --ay: 26%; --az: 1.15; }
.gb-onepiece { --gb-bg: linear-gradient(100deg, #0b3a66, #1f7cc4 50%, #7a1a14); --ay: 12%; --az: 1.2; }
.gb-onepiece .gb-art { inset: 0 0 0 36%; }
.gb-yugioh { --gb-bg: linear-gradient(100deg, #2a0f4a, #6a3ab0 50%, #10183a); --ay: 30%; }
.gb-daily { --tc: #000; background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge); }
.gb-daily:hover { box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 560px) { .game-btn { min-height: 58px; padding: 8px 14px; } }
@media (prefers-reduced-motion: reduce) { .game-btn::after { display: none; } }

/* A card with no picture anywhere (a handful of Yu-Gi-Oh! promos): a plain card back. */
img.img-missing { background: radial-gradient(circle at 50% 45%, rgba(255, 220, 150, 0.18), transparent 40%), linear-gradient(160deg, #4a2f1a, #22140a); border-radius: 4%; }

.brand-game .bg-short { display: none; }
@media (max-width: 640px) { .brand-game .bg-long { display: none; } .brand-game .bg-short { display: inline; } }
/* The set badge sits over the bottom edge of the tilting hero card, never under it. */
.set-logo .plaque-icon { position: relative; z-index: 1; }
/* On phones the search results drop down across the whole screen width. */
@media (max-width: 640px) { .search-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--nav-h, 60px) + 2px); width: auto; } }

/* Open a pack (core/packopen.js): a booster torn open over the set page. */
.btn-pack { background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff)); color: var(--accent-ink); position: relative; overflow: hidden; }
.btn-pack::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); transform: translateX(-120%); animation: pk-btn-shine 4.5s 1.5s ease-in-out infinite; }
@keyframes pk-btn-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pack-open, .pack-open body { overflow: hidden; }
.pack-stage { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; justify-items: center; gap: 10px; padding: 14px var(--gutter, 16px) calc(14px + env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 22%, rgba(8, 6, 20, 0.86)), rgba(6, 4, 16, 0.95) 70%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); animation: pk-in 0.35s ease-out; outline: none; overflow: hidden auto; overscroll-behavior: contain; }
@keyframes pk-in { from { opacity: 0; } }
.pk-glow { position: absolute; inset: 0; pointer-events: none; overflow: clip; background: conic-gradient(from 200deg at 50% 42%, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent 25%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 50%); opacity: 0.7; }
.pk-head { position: relative; width: min(980px, 100%); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-right: 48px; }
.pk-head .kicker { margin: 0; }
.pk-head strong { font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.3rem); }
.pk-tally { color: var(--muted); font-size: 0.85rem; }
.pk-x { position: absolute; right: 0; top: -4px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--edge); background: var(--surface-solid); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pk-x:hover { border-color: var(--accent); }
.pk-table { position: relative; width: 100%; display: grid; place-items: center; min-height: 0; perspective: 1400px; overflow-x: clip; }
/* The sealed pack: pack photo or a foil wrapper, torn along the top. */
.pk-pack { --rx: 0deg; --ry: 0deg; --mx: 50%; position: relative; width: min(260px, 58vw, 40vh); aspect-ratio: 5 / 8.4; border: 0; padding: 0; background: none; cursor: pointer; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.25s ease-out; transform-style: preserve-3d; animation: pk-float 3.2s ease-in-out infinite; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)); }
.pk-pack.is-photo { aspect-ratio: auto; height: min(420px, 52vh); width: auto; }
@keyframes pk-float { 50% { translate: 0 -8px; } }
.pk-half { position: absolute; inset: 0; display: block; }
.pk-pack.is-photo .pk-half { position: relative; display: block; height: 100%; }
.pk-pack.is-photo .pk-half + .pk-half { position: absolute; inset: 0; }
.pk-half > img { display: block; height: 100%; width: 100%; object-fit: contain; }
.pk-top { clip-path: polygon(0 0, 100% 0, 100% 14%, 92% 15.5%, 84% 14%, 76% 15.5%, 68% 14%, 60% 15.5%, 52% 14%, 44% 15.5%, 36% 14%, 28% 15.5%, 20% 14%, 12% 15.5%, 4% 14%, 0 15.5%); }
.pk-body { clip-path: polygon(0 15.5%, 4% 14%, 12% 15.5%, 20% 14%, 28% 15.5%, 36% 14%, 44% 15.5%, 52% 14%, 60% 15.5%, 68% 14%, 76% 15.5%, 84% 14%, 92% 15.5%, 100% 14%, 100% 100%, 0 100%); }
.pk-tear { position: absolute; left: 0; right: 0; top: 14.5%; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: 0; }
.pk-pack:hover .pk-tear, .pk-pack:focus-visible .pk-tear { opacity: 0.8; animation: pk-tear-hint 1.4s ease-in-out infinite; }
@keyframes pk-tear-hint { 0% { clip-path: inset(0 100% 0 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
.pk-pack.is-torn { animation: none; }
.pk-pack.is-torn .pk-tear { opacity: 1; animation: pk-tear-flash 0.3s ease-out forwards; }
@keyframes pk-tear-flash { to { opacity: 0; transform: scaleY(6); } }
.pk-pack.is-torn .pk-top { animation: pk-top-off 0.7s cubic-bezier(.3, .6, .3, 1) forwards; }
.pk-pack.is-torn .pk-body { animation: pk-body-off 0.6s 0.3s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes pk-top-off { 30% { transform: translate(6%, -12%) rotate(6deg); } to { transform: translate(60%, -90%) rotate(28deg); opacity: 0; } }
@keyframes pk-body-off { to { transform: translateY(70%) scale(0.92); opacity: 0; } }
/* The foil wrapper for games without pack photos. */
.pk-foil { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; padding: 18% 12%; border-radius: 10px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(circle at var(--mx) 30%, rgba(255, 255, 255, 0.55), transparent 45%), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 6px, transparent 6px 14px), linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent) 35%, color-mix(in srgb, var(--accent) 45%, #120a26) 100%);
  -webkit-mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 12px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 12px 51% repeat-x;
  mask: radial-gradient(circle 5px at 50% 0, transparent 98%, #000) 0 0 / 12px 51% repeat-x, radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 100% / 12px 51% repeat-x; }
.pk-foil::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 210, 255, 0.35) 52%, transparent 70%) var(--mx) 0 / 250% 100%; mix-blend-mode: overlay; }
.pk-foil { padding: 25% 10% 10%; align-content: start; }
.pk-art { position: relative; width: 100%; aspect-ratio: 4 / 3.3; object-fit: contain; border-radius: 8px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.pk-art.is-card, .pk-art[src*="art_crop"] { object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 8px 18px rgba(0, 0, 0, 0.45); filter: none; }
.pk-art.is-card { object-position: 50% 20%; }
.pk-symbol { position: relative; width: 26%; aspect-ratio: 1; margin-top: -13%; padding: 6px; border-radius: 50%; background: rgba(10, 6, 24, 0.75); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); filter: invert(1) drop-shadow(0 0 0 #000); }
.pk-foil b { position: relative; font-family: var(--display); font-size: clamp(0.9rem, 2.4vw, 1.15rem); line-height: 1.15; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); }
.pk-foil em { position: relative; font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.pk-brand { position: absolute; top: 7%; left: 0; right: 0; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }
/* The stack of cards (packopen.js): backs up as it leaves the pack, then faces up while
   the front card moves to the back one by one, then spread out. Only 2D moves, no flips. */
.pk-stack { position: relative; width: min(250px, 56vw, 36vh); aspect-ratio: 63 / 88; cursor: pointer; outline: none; touch-action: manipulation; }
.pk-stack:focus-visible { outline: 3px solid var(--accent); outline-offset: 10px; border-radius: 12px; }
.pk-card { position: absolute; inset: 0; transform: translate(calc(var(--i) * 2px), calc(var(--i) * -2px)); z-index: calc(100 - var(--i)); transition: transform 0.42s cubic-bezier(.2, .85, .25, 1); }
.pk-card.is-moving { z-index: 150; transition: none; will-change: transform; }
/* After sliding off to the right, the card goes in at the back of the pile. */
.pk-card.is-moving.is-tucking { z-index: 0; }
.pk-card.is-moving .pk-face { box-shadow: -14px 16px 30px rgba(0, 0, 0, 0.5); }
.pk-face { position: absolute; inset: 0; border-radius: 4.5% / 3.3%; overflow: hidden; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
.pk-back { background: var(--card-back, linear-gradient(135deg, #2a62c9, #173a80)); border: 6px solid color-mix(in srgb, var(--accent) 40%, #1a1030); }
/* One face shows at a time, set on the whole stack, so a card never shows half of each. */
.pk-front { visibility: hidden; background: var(--surface-solid); }
.pk-stack.is-faceup .pk-front { visibility: visible; }
.pk-stack.is-faceup .pk-back { visibility: hidden; }
.pk-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-count { display: inline-block; margin-left: 4px; font-size: 0.74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.pk-stack.is-faceup .pk-card.is-front.tier-r .pk-front, .pk-stack.is-spread .pk-card.tier-r .pk-front { box-shadow: 0 0 0 2px rgba(255, 230, 160, 0.9), 0 0 34px 6px color-mix(in srgb, var(--accent) 70%, transparent), 0 14px 30px rgba(0, 0, 0, 0.5); }
.pk-stack.is-faceup .pk-card.is-front.tier-h .pk-front, .pk-stack.is-spread .pk-card.tier-h .pk-front { box-shadow: 0 0 0 2px #fff, 0 0 50px 14px rgba(255, 220, 120, 0.75), 0 0 110px 30px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.pk-stack.is-spread .pk-card.tier-h .pk-front { box-shadow: 0 0 0 2px #fff, 0 0 22px 4px rgba(255, 220, 120, 0.75); }
/* Big pulls get a moving holo sheen across the face. */
.pk-stack.is-faceup .pk-card.is-front.tier-h .pk-front::after, .pk-stack.is-spread .pk-card.tier-h .pk-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.55; background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 200, 0.6) 35%, rgba(120, 220, 255, 0.6) 45%, rgba(255, 250, 160, 0.6) 55%, transparent 70%) 0 0 / 300% 100%; animation: pk-holo 2.6s ease-in-out infinite alternate; }
/* The whole pack laid out evenly; packopen.js picks --w and --cols to fit the table. */
.pk-stack.is-spread { width: calc(var(--cols) * var(--w) + (var(--cols) - 1) * var(--gap)); aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); cursor: default; }
.pk-stack.is-spread .pk-card { position: relative; inset: auto; width: var(--w); aspect-ratio: 63 / 88; transform: none; z-index: auto; transition: transform 0.2s var(--ease); cursor: pointer; }
.pk-stack.is-spread .pk-card:hover, .pk-stack.is-spread .pk-card:focus-visible { transform: translateY(-6px) scale(1.04); z-index: 5; outline: none; }
.pk-stack.is-spread .pk-card:focus-visible .pk-front { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes pk-holo { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.pk-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 300; }
.pk-burst::before { content: ""; position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 240, 190, 0.5) 0 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); mask: radial-gradient(circle, #000 10%, transparent 68%); animation: pk-rays 1.3s ease-out forwards; }
.pk-burst.tier-r::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%); }
@keyframes pk-rays { from { transform: scale(0.3) rotate(0); opacity: 0; } 25% { opacity: 1; } to { transform: scale(1.25) rotate(40deg); opacity: 0; } }
.pk-burst i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff6c8; box-shadow: 0 0 10px 2px rgba(255, 220, 120, 0.9); animation: pk-spark var(--t) ease-out forwards; }
.pk-burst.tier-r i { background: color-mix(in srgb, var(--accent) 60%, #fff); }
@keyframes pk-spark { from { transform: rotate(var(--a)) translateX(20px) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(0.2); opacity: 0; } }
.pk-caption { min-height: 1.6em; margin: 0; text-align: center; font-size: 1rem; }
/* The whole pack laid out: clear space between the cards and the summary under them. */
.pack-stage.is-spread .pk-caption { margin-top: clamp(18px, 3.6vh, 34px); }
.pack-stage.is-spread .pk-caption .pk-best { margin-left: 6px; }
.pk-caption strong { font-family: var(--display); font-weight: 700; }
.pk-rarity { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--line); color: var(--muted); }
.pk-rarity.tier-r { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }
.pk-rarity.tier-h { background: linear-gradient(100deg, #ffe08a, #ff9ad5, #8ad8ff); color: #1b1430; }
.pk-new, .pk-best { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; background: #36d399; color: #062a1b; }
.pk-best { background: #fff; color: #1b1430; animation: pk-pop 0.5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pk-pop { from { transform: scale(0.4); } }
.pk-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: min(980px, 100%); min-height: 70px; }
.pk-mini { display: block; width: 50px; aspect-ratio: 63 / 88; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--surface-solid); cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); transition: transform 0.2s var(--ease); }
.pk-mini:hover { transform: translateY(-4px) scale(1.06); }
.pk-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-mini.tier-r { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 80%, #fff), 0 3px 8px rgba(0, 0, 0, 0.4); }
.pk-mini.tier-h { box-shadow: 0 0 0 2px #fff, 0 0 14px 2px rgba(255, 220, 120, 0.8); }
.pk-mini .img-missing { display: grid; place-items: center; height: 100%; font-size: 0.5rem; padding: 2px; text-align: center; }
.pk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pk-actions .btn:not(.btn-ghost) { background: var(--accent); color: var(--accent-ink); }
.pk-actions .btn[disabled] { opacity: 0.6; transform: none; cursor: default; }
.pk-note { margin: 0; color: var(--muted); font-size: 0.78rem; text-align: center; }
@media (max-width: 640px) { .pk-mini { width: 40px; } .pk-row { min-height: 58px; } .pk-actions .btn { padding: 9px 14px; } }
@media (prefers-reduced-motion: reduce) { .pk-glow, .pk-pack, .btn-pack::after, .pk-front::after { animation: none !important; } .pk-card, .pk-stack.is-spread .pk-card { transition: none; } }
.calm :is(.pk-glow, .pk-pack, .btn-pack::after) { animation: none !important; }
.pack-stage { --ink: #f3efff; --muted: #b5acd0; --line: rgba(255, 255, 255, 0.14); --edge: rgba(255, 255, 255, 0.16); --surface: rgba(24, 19, 46, 0.72); --surface-solid: #18132e; }
.pack-stage [hidden] { display: none !important; }

/* Card pictures fade in as they arrive, over a soft shimmer, instead of popping in.
   The 4s fallback shows any picture whose load event was missed. */
.js .card-img img { opacity: 0; transition: opacity 0.45s ease; animation: img-late 0s 4s forwards; }
.js .card-img img.is-loaded { opacity: 1; animation: none; }
@keyframes img-late { to { opacity: 1; } }
.js .card-img:has(> img:not(.is-loaded)) { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%); background-size: 250% 100%; animation: img-shimmer 1.4s linear infinite; }
@keyframes img-shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.calm .card-img { animation: none !important; }

/* Smooth page changes: the old page fades out, the new one rises in, the top bar stays put
   (cross-document view transitions; browsers without them just change page as before). */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.scene { view-transition-name: scene; }
::view-transition-old(root) { animation: vt-out 0.16s ease-in both; }
::view-transition-new(root) { animation: vt-in 0.32s cubic-bezier(0.2, 0.85, 0.25, 1) both; }
::view-transition-group(scene) { animation-duration: 0.6s; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Play Pack streaks (core/packopen.js). The panel takes its look from the game whose
   pack it is (.pack-stage[data-game], below); these --sk-* values are the plain fallback. */
.pk-streak { position: relative; width: min(560px, 100%); display: grid; gap: 6px; padding: 10px 16px; border-radius: var(--sk-r, 16px); background: var(--sk-deco, none), var(--sk-bg, rgba(255, 255, 255, 0.06)); border: var(--sk-border, 1px solid var(--edge)); box-shadow: var(--sk-shadow, none); text-align: center; }
.pk-streak p { margin: 0; font-size: 0.92rem; }
.pk-streak > p:first-of-type b { font-family: var(--sk-font, inherit); letter-spacing: var(--sk-track, normal); color: var(--sk-title, inherit); font-weight: var(--sk-weight, 700); }
.pk-streak .quiet { color: var(--sk-muted, var(--muted)); }
.pk-streak p em { font-style: normal; color: var(--sk-muted, var(--muted)); font-size: 0.8rem; margin-left: 6px; }
.pk-flame { display: inline-block; animation: pk-flame 1.6s ease-in-out infinite alternate; filter: var(--sk-flame, none); }
@keyframes pk-flame { to { transform: scale(1.18) rotate(-6deg); } }
.pk-meter { display: flex; gap: var(--sk-gap, 3px); margin: 2px 4px; }
.pk-meter span { position: relative; flex: 1; height: 20px; border-radius: var(--sk-seg-r, 6px); background: var(--sk-track-bg, rgba(255, 255, 255, 0.08)); box-shadow: var(--sk-seg-edge, none); clip-path: var(--sk-seg-clip, none); overflow: hidden; }
.pk-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--sk-fill, linear-gradient(90deg, #ff8a3d, #ffd36a)); transition: width 0.8s var(--ease); }
.pk-meter b { position: absolute; right: 6px; top: 0; bottom: 0; display: grid; place-items: center; font-size: 0.7rem; color: var(--sk-mark, rgba(255, 255, 255, 0.6)); font-family: var(--sk-mark-font, inherit); }
.pk-meter span.is-on b { color: var(--sk-mark-on, #2a1300); }
.pk-how { font-size: 0.85rem; }
.pk-how summary { cursor: pointer; display: inline-block; color: var(--sk-link, var(--muted)); text-decoration: underline dotted; text-underline-offset: 3px; list-style: none; }
.pk-how summary::-webkit-details-marker { display: none; }
.pk-how summary::before { content: "ⓘ "; }
.pk-how[open] summary { color: var(--sk-title, var(--ink)); }
/* Opens as a panel over the pack, so the pack keeps its size. */
.pk-how > div { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow: auto; padding: 14px 18px; border-radius: var(--sk-r, 14px); background: var(--sk-panel, var(--surface-solid)); border: var(--sk-border, 1px solid var(--edge)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); text-align: left; animation: pk-how 0.2s ease-out; }
@keyframes pk-how { from { opacity: 0; transform: translateY(-6px); } }
.pk-how > div p { margin: 0 0 8px; font-size: 0.85rem; }
.pk-how ul { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 3px; }
.pk-how li b, .pk-how p b { color: var(--sk-hi, #ffd36a); }

/* The game's own pictures (core/streakbrand.js): a crest on the left, the set's
   showcase art on the right, and a brand icon on each reward step. */
.pk-streak.is-branded { width: min(660px, 100%); grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 14px; padding: 12px 14px; }
.pk-streak.is-branded > :not(.sk-crest, .sk-feature) { grid-column: 2; }
.sk-crest { grid-column: 1; grid-row: 1 / span 4; align-self: center; display: grid; place-items: center; width: 68px; height: 68px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.sk-crest > svg, .sk-crest > img { width: 100%; height: 100%; object-fit: contain; }
.sk-seal { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2a3c, #140d18 70%); box-shadow: inset 0 0 0 2px #d9a441, inset 0 0 0 5px #17111c, inset 0 0 0 6px rgba(240, 212, 138, 0.45); }
.sk-seal img { width: 62%; height: 62%; object-fit: contain; filter: invert(84%) sepia(38%) saturate(620%) hue-rotate(358deg) brightness(98%) drop-shadow(0 1px 1px #000); }
.sk-feature { grid-column: 3; grid-row: 1 / span 4; align-self: center; display: grid; place-items: center; }
.sk-card { display: block; width: 76px; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; transform: rotate(5deg); background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 2px var(--sk-frame, rgba(255, 255, 255, 0.5)), 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 18px var(--sk-halo, transparent); }
.sk-art { display: block; width: 116px; height: 86px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px var(--sk-frame, rgba(255, 255, 255, 0.5)), 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 18px var(--sk-halo, transparent); }
.sk-card img, .sk-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-streak.is-branded .pk-meter span { height: 28px; }
.pk-streak.is-branded .pk-meter b { right: 31px; font-size: 0.74rem; }
.sk-ico { position: absolute; right: 3px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: grid; place-items: center; font-style: normal; filter: grayscale(0.7) brightness(0.9); opacity: 0.62; transition: filter 0.4s, opacity 0.4s; }
.sk-ico > svg, .sk-ico > img { width: 100%; height: 100%; object-fit: contain; }
.sk-ico > img.sk-px { image-rendering: pixelated; transform: scale(1.25); }
.pk-meter span.is-next .sk-ico { filter: none; opacity: 0.9; }
.pk-meter span.is-on .sk-ico { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)); opacity: 1; }
.sk-mascot { transform: scale(1.22) translateY(-4px); }
@media (max-width: 560px) {
  .pk-streak.is-branded { grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; }
  .sk-crest { width: 46px; height: 46px; grid-row: 1; }
  .sk-feature { display: none; }
  .pk-streak.is-branded .pk-meter { grid-column: 1 / -1; margin: 4px 0 2px; }
  .pk-streak.is-branded .pk-meter b { right: 25px; font-size: 0.66rem; }
  .sk-ico { width: 20px; height: 20px; margin-top: -10px; right: 2px; }
}

/* Pokémon: night-blue with Poké Ball red over white and electric-yellow, round and friendly. */
.pack-stage[data-game="pokemon"] {
  --sk-frame: #ffcb05;
  --sk-halo: rgba(77, 160, 255, 0.55);
  --sk-r: 20px;
  --sk-bg: linear-gradient(170deg, #22357a 0%, #16214f 55%, #101836 100%);
  --sk-border: 2px solid #ffcb05;
  --sk-shadow: 0 0 0 3px rgba(42, 117, 187, 0.45), 0 10px 26px rgba(3, 6, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --sk-deco: radial-gradient(circle at 100% 0, transparent 30px, rgba(255, 255, 255, 0.1) 30px 34px, transparent 34px 44px, rgba(255, 255, 255, 0.07) 44px 47px, transparent 47px), linear-gradient(180deg, rgba(227, 53, 13, 0.3), transparent 46%);
  --sk-font: "Outfit", var(--sans), sans-serif;
  --sk-weight: 800;
  --sk-title: #ffde5a;
  --sk-muted: #c8d4f5;
  --sk-gap: 5px;
  --sk-seg-r: 999px;
  --sk-track-bg: rgba(42, 117, 187, 0.38);
  --sk-seg-edge: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  --sk-fill: linear-gradient(90deg, #ffcb05, #fff07a);
  --sk-mark: rgba(255, 255, 255, 0.82);
  --sk-mark-on: #1d2c6b;
  --sk-link: #9fc2ff;
  --sk-hi: #ffcb05;
  --sk-panel: #16214f;
}
/* Magic: a candle-lit grimoire. Gilded double rule, Cinzel capitals, the five mana colours. */
.pack-stage[data-game="magic"] {
  --sk-frame: #d9a441;
  --sk-halo: rgba(240, 212, 138, 0.3);
  --sk-r: 6px;
  --sk-bg: radial-gradient(120% 140% at 50% 0%, #2c2030, #17111c 70%);
  --sk-border: 1px solid rgba(240, 212, 138, 0.6);
  --sk-shadow: inset 0 0 0 3px #17111c, inset 0 0 0 4px rgba(217, 164, 65, 0.4), 0 10px 26px rgba(0, 0, 0, 0.5);
  --sk-font: "Cinzel", var(--display), serif;
  --sk-track: 0.06em;
  --sk-title: #f0d48a;
  --sk-muted: #c9b99c;
  --sk-gap: 4px;
  --sk-seg-r: 2px;
  --sk-track-bg: rgba(240, 212, 138, 0.08);
  --sk-seg-edge: inset 0 0 0 1px rgba(217, 164, 65, 0.35);
  --sk-fill: linear-gradient(90deg, #8a6420, #f0d48a 45%, #b07d2a 70%, #f6e2a6);
  --sk-mark: rgba(242, 234, 219, 0.7);
  --sk-mark-on: #2a1a06;
  --sk-mark-font: "Cinzel", serif;
  --sk-link: #d9b773;
  --sk-hi: #f0d48a;
  --sk-panel: #1b1420;
  --sk-flame: sepia(0.35) saturate(1.2);
}
/* Lorcana: the Illuminary at night. Ink-blue, gold filigree, a glimmer of the six inks. */
.pack-stage[data-game="lorcana"] {
  --sk-frame: #e8c46e;
  --sk-halo: rgba(143, 199, 255, 0.5);
  --sk-r: 14px;
  --sk-bg: radial-gradient(90% 120% at 50% -10%, rgba(143, 199, 255, 0.22), transparent 60%), linear-gradient(180deg, #18205a, #0d1236);
  --sk-border: 1px solid rgba(232, 196, 110, 0.7);
  --sk-shadow: inset 0 0 0 4px rgba(13, 18, 54, 0.9), inset 0 0 0 5px rgba(232, 196, 110, 0.28), 0 0 26px rgba(143, 199, 255, 0.18), 0 10px 26px rgba(2, 4, 20, 0.5);
  --sk-deco: radial-gradient(1.5px 1.5px at 12% 30%, #fbe9b4, transparent), radial-gradient(1.5px 1.5px at 88% 24%, #fbe9b4, transparent), radial-gradient(1px 1px at 76% 70%, #cfe6ff, transparent), radial-gradient(1px 1px at 22% 78%, #cfe6ff, transparent);
  --sk-font: "Source Serif 4", var(--display), serif;
  --sk-title: #f6dc94;
  --sk-muted: #c3c3e0;
  --sk-gap: 5px;
  --sk-seg-r: 10px 3px;
  --sk-track-bg: rgba(143, 199, 255, 0.1);
  --sk-seg-edge: inset 0 0 0 1px rgba(232, 196, 110, 0.32);
  --sk-fill: linear-gradient(90deg, #c1923a, #f6dc94 55%, #fffbe6);
  --sk-mark: rgba(244, 239, 226, 0.75);
  --sk-mark-on: #161a4a;
  --sk-link: #a9d2ff;
  --sk-hi: #f6dc94;
  --sk-panel: #121848;
}
/* One Piece: a ship's deck at sunset. Sea blue, a rope-and-brass rail, sunset colours, bold Unbounded. */
.pack-stage[data-game="onepiece"] {
  --sk-frame: #c8901e;
  --sk-halo: rgba(255, 157, 74, 0.45);
  --sk-r: 12px;
  --sk-bg: linear-gradient(180deg, rgba(255, 106, 90, 0.2), transparent 38%), linear-gradient(180deg, #123a66, #0a2442 60%, #071a30);
  --sk-border: 2px solid #c8901e;
  --sk-shadow: inset 0 0 0 1px rgba(249, 220, 138, 0.45), 0 10px 26px rgba(1, 8, 20, 0.55);
  --sk-deco: radial-gradient(120% 40% at 50% 100%, rgba(42, 106, 168, 0.35), transparent 70%);
  --sk-font: "Unbounded", var(--display), sans-serif;
  --sk-weight: 700;
  --sk-track: -0.01em;
  --sk-title: #ffe08a;
  --sk-muted: #c5d3e3;
  --sk-gap: 4px;
  --sk-seg-r: 4px;
  --sk-track-bg: rgba(0, 0, 0, 0.32);
  --sk-seg-edge: inset 0 0 0 1px rgba(200, 144, 30, 0.45);
  --sk-fill: linear-gradient(90deg, #ff6a5a, #ff9d4a 45%, #f2c94c);
  --sk-mark: rgba(251, 243, 226, 0.8);
  --sk-mark-on: #2a0f06;
  --sk-mark-font: "Unbounded", sans-serif;
  --sk-link: #ffd77a;
  --sk-hi: #f2c94c;
  --sk-panel: #0c2440;
}
/* Yu-Gi-Oh!: a duel at midnight. Indigo, relic gold, Cinzel, angled card-frame segments with a magenta glow. */
.pack-stage[data-game="yugioh"] {
  --sk-frame: #e8c15a;
  --sk-halo: rgba(208, 74, 160, 0.55);
  --sk-r: 4px;
  --sk-bg: radial-gradient(80% 140% at 50% 120%, rgba(208, 74, 160, 0.28), transparent 60%), linear-gradient(180deg, #24133e, #120a20);
  --sk-border: 1px solid #c08a24;
  --sk-shadow: inset 0 0 0 2px #120a20, inset 0 0 0 3px rgba(246, 220, 140, 0.5), 0 0 22px rgba(208, 74, 160, 0.25), 0 10px 26px rgba(4, 1, 10, 0.6);
  --sk-deco: linear-gradient(45deg, #f6dc8c 0 6px, transparent 6px) 0 0 / 14px 14px no-repeat, linear-gradient(-45deg, #f6dc8c 0 6px, transparent 6px) 100% 0 / 14px 14px no-repeat, linear-gradient(135deg, #f6dc8c 0 6px, transparent 6px) 0 100% / 14px 14px no-repeat, linear-gradient(-135deg, #f6dc8c 0 6px, transparent 6px) 100% 100% / 14px 14px no-repeat;
  --sk-font: "Cinzel", var(--display), serif;
  --sk-track: 0.05em;
  --sk-title: #f6dc8c;
  --sk-muted: #c9bedb;
  --sk-gap: 2px;
  --sk-seg-r: 0;
  --sk-seg-clip: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --sk-track-bg: rgba(246, 220, 140, 0.1);
  --sk-fill: linear-gradient(90deg, #d04aa0, #e8c15a 60%, #fbe7a8);
  --sk-mark: rgba(246, 239, 224, 0.75);
  --sk-mark-on: #1c1004;
  --sk-mark-font: "Cinzel", serif;
  --sk-link: #e7a6d6;
  --sk-hi: #f6dc8c;
  --sk-panel: #1a0f2e;
}
.pk-done { display: grid; justify-items: center; gap: 8px; max-width: 46ch; text-align: center; }
.pk-done p { margin: 0; }
.pk-pack-ghost { width: 110px; aspect-ratio: 5 / 8.4; border-radius: 10px; border: 2px dashed rgba(255, 255, 255, 0.3); background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 14px); margin-bottom: 6px; }
.pk-reward { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; background: linear-gradient(100deg, #ff8a3d, #ffd36a); color: #2a1300; animation: pk-pop 0.5s cubic-bezier(.2, 1.6, .4, 1); }
.pk-dupe { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: var(--line); color: var(--muted); }
.pk-card.is-reward .pk-back { background: linear-gradient(135deg, #ffd36a, #ff8a3d 50%, #b8401c); }
.pk-mini.is-reward { box-shadow: 0 0 0 2px #ffd36a, 0 0 16px 3px rgba(255, 160, 60, 0.85); }
.calm .pk-flame { animation: none; }
/* Highlight videos (core/reel.js): the recording window, above a Play Pack. */
.reel-open, .reel-open body { overflow: hidden; }
.reel-stage { --ink: #f3efff; --muted: #b5acd0; --line: rgba(255, 255, 255, 0.14); --edge: rgba(255, 255, 255, 0.16); --surface: rgba(24, 19, 46, 0.72); --surface-solid: #18132e; position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 12px var(--gutter, 16px) calc(12px + env(safe-area-inset-bottom)); background: rgba(5, 3, 14, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); overflow: auto; outline: none; animation: pk-in 0.25s ease-out; }
.reel-stage [hidden] { display: none !important; }
.reel-box { width: min(440px, 100%); display: grid; justify-items: center; gap: 10px; }
.reel-head { position: relative; width: 100%; padding-right: 50px; }
.reel-head .kicker { margin: 0; }
.reel-head strong { display: block; font-family: var(--display); font-size: 1.15rem; line-height: 1.2; }
.reel-screen { position: relative; height: min(64vh, 680px); aspect-ratio: 9 / 16; max-width: 100%; border-radius: 18px; overflow: hidden; background: #0b0820; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--edge); }
.reel-screen canvas, .reel-screen video, .reel-still { display: block; width: 100%; height: 100%; object-fit: contain; }
.reel-bar { width: 100%; height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a3d, #ffd36a); transition: width 0.2s linear; }
.reel-status { margin: 0; text-align: center; font-size: 0.92rem; }
.reel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.reel-note { margin: 0; text-align: center; font-size: 0.78rem; color: var(--muted); }
.btn-reel { background: linear-gradient(100deg, #ff5f9e, #ffb14a); color: #2a0f18; border: 0; position: relative; overflow: hidden; }
.btn-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%); transform: translateX(-120%); animation: pk-btn-shine 5s 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn-reel::after { animation: none; } }