/* Design language taken from the announced NARUTO CARD GAME cards:
   magenta / cyan / teal frames, condensed italic stat numerals, uzumaki swirl backs,
   holo foil. Dark product-page canvas so the cards are the light source. */
/* Official material is light: lavender white #f6f2ff, ink #1c0b00, orange swirl, halftone, blue #1765f7 blades.
   Dark is the second theme, taken from the black Summon card back. */
:root {
  color-scheme: light;
  --bg: #f6f2ff; --bg-2: #efe9fb; --surface: #ffffff; --surface-2: #f1ecfa;
  --hair: rgba(28, 11, 0, 0.09); --hair-2: rgba(28, 11, 0, 0.18);
  --text: #1c0b00; --text-2: #5b4f60; --text-3: #8c8295;
  --orange: #eb6101; --orange-2: #ff8a1c; --yellow: #ffc21a; --sky: #1765f7;
  --red: #d83870; --red-deep: #c00058; --blue: #0098b8; --blue-2: #10a8c8; --green: #009a8a;
  --lav: #f6f2ff; --ink: #1c0b00;
  --glass: #ffffff;
  --hero-bg: #f6f2ff; --hero-text: #1c0b00; --hero-sub: #5b4f60;
  --shadow-card: 0 18px 40px -18px rgba(60, 30, 80, 0.45), 0 0 0 1px rgba(28, 11, 0, 0.06);
  --f-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --f-head: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-card: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --side: 248px;
  --spring: cubic-bezier(0.22, 1.2, 0.36, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-mode="dark"] {
  color-scheme: dark;
  --bg: #0f0d0c; --bg-2: #171412; --surface: #1a1715; --surface-2: #201c19;
  --hair: rgba(255, 255, 255, 0.08); --hair-2: rgba(255, 255, 255, 0.16);
  --text: #f7f1ec; --text-2: #bdb2a9; --text-3: #8a7f76;
  --glass: #1a1715;
  --hero-bg: #12100e; --hero-text: #f6f2ff; --hero-sub: #c9c1d6;
  --shadow-card: 0 26px 50px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { color: var(--text); font: 400 15px/1.55 var(--f-ui); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--orange); color: #fff; }

/* ---------- swirl + halftone, the two official background motifs ---------- */
.swirl {
  background:
    repeating-radial-gradient(circle at 78% 50%, transparent 0 40px, rgba(235,97,1,.10) 40px 80px),
    radial-gradient(circle at 78% 50%, rgba(255,194,26,.28), transparent 60%);
}

/* ---------- shell: sidebar like the category leaders ---------- */
.shell { display: grid; }
.side { position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }

.side-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--text-3); font-size: 13.5px; }
.side-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
.kbd { font: 600 11px/1 var(--f-card); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--hair-2); color: var(--text-3); }

.nav { display: flex; align-items: center; font-size: 14.5px; font-weight: 500; }
.nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.nav[aria-current="page"] svg { stroke: var(--orange); }
.nav .soon { margin-left: auto; font: 600 10.5px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); border: 1px solid var(--hair-2); padding: 3px 6px; border-radius: 5px; }

.main { min-width: 0; position: relative; }
.page { padding: 28px clamp(16px, 3.4vw, 48px) 110px; max-width: 1480px; }
.page.enter > * { animation: rise .7s var(--ease) both; }
.page.enter > *:nth-child(2) { animation-delay: .05s; }
.page.enter > *:nth-child(3) { animation-delay: .1s; }
.page.enter > *:nth-child(4) { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- typography ---------- */
.display { font: 800 italic clamp(40px, 5.2vw, 76px)/.98 var(--f-head); letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.display .o { color: var(--orange); }
.h1 { font: 800 italic clamp(34px, 4.4vw, 60px)/1 var(--f-head); letter-spacing: -0.03em; margin: 0 0 10px; text-wrap: balance; }
.h2 { margin: 0; text-wrap: balance; }
.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--text-2); max-width: 54ch; margin: 0; }
.label { font: 700 12px/1 var(--f-card); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.num { font-family: var(--f-card); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sec { margin-top: 72px; }
.sec-head { margin-bottom: 22px; }
.link { color: var(--orange); font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 6px; align-items: center; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; white-space: nowrap; border-radius: 0; border: 0; font: 700 italic 17px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 0 28px; }
.btn:active { transform: scale(.97); }
.btn-o { background: var(--orange); color: #fff; }
.btn-o:hover { filter: brightness(1.08); }
.btn-o:hover { transform: translateY(-1px); }
.btn-g { background: var(--ink); color: #fff; }
.btn-g:hover { filter: brightness(1.25); }
.btn-s { height: 36px; padding: 0 18px; font-size: 15px; }

/* skewed stat tag: the DMG / POW boxes of the cards */
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; white-space: nowrap;
  font: 700 italic 13px/1 var(--f-card); letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: var(--surface-2); color: var(--text-2);
}
.tag.red { background: var(--red); color: #fff; } .tag.blue { background: var(--blue); color: #fff; } .tag.green { background: var(--green); color: #fff; }
.tag.o { background: var(--orange); color: #fff; } 
.tag.lock { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--hair-2); clip-path: none; border-radius: 6px; }

/* ================= THE CARD ================= */
.tcg { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --o: 0; --pos: 50% 50%; position: relative; aspect-ratio: 63 / 88; border-radius: 4.2% / 3%; isolation: isolate; box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease); }
.tcg > img, .tcg > .face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.tcg .shine, .tcg .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--o); transition: opacity .35s; }
.tcg .shine { mix-blend-mode: color-dodge; background:
    repeating-linear-gradient(110deg, #ff3d7f 0%, #ffcf3d 6%, #3dff9a 12%, #3dc5ff 18%, #b13dff 24%, #ff3d7f 30%),
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.7), transparent 45%); background-size: 400% 400%, 100% 100%; background-position: var(--pos), center; background-blend-mode: overlay; }
.tcg .glare { mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.85) 8%, rgba(255,255,255,.25) 28%, rgba(0,0,0,.45) 90%); }

@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* our rendering of cards that have no published image yet, in the official frame style */
.face { background: #fff; overflow: hidden; container-type: inline-size; font-family: var(--f-card); color: var(--ink); }
.face .art {
  position: absolute; inset: 0; background:
    repeating-radial-gradient(circle at 70% 42%, rgba(255,255,255,0) 0 6cqw, rgba(255,255,255,.55) 6cqw 12cqw),
    radial-gradient(circle at 70% 42%, var(--fc-l), var(--fc) 70%);
}
.face .art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.35) 1.1cqw, transparent 1.3cqw); background-size: 4.4cqw 4.4cqw; -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 55%); mask-image: linear-gradient(200deg, #000 10%, transparent 55%); }
.face .jp { position: absolute; right: 6cqw; top: 22cqw; writing-mode: vertical-rl; font: 900 13cqw/1 var(--f-jp); color: rgba(255,255,255,.92); text-shadow: 0 1cqw 4cqw rgba(0,0,0,.25); letter-spacing: -.05em; }
.face .stat { position: absolute; top: 0; height: 15cqw; min-width: 15cqw; display: grid; justify-items: center; align-content: center; color: #fff; background: var(--fc); }
.face .stat i { font: 700 3cqw/1 var(--f-card); font-style: normal; letter-spacing: .06em; opacity: .9; }
.face .stat b { font: 800 italic 10cqw/.9 var(--f-card); }
.face .dmg { left: 0; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); padding-right: 4cqw; }
.face .pow { right: 15cqw; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); padding-left: 4cqw; }
.face .hp { right: 0; background: #fff; color: var(--fc); width: 15cqw; }
.face .namebar { position: absolute; left: 0; right: 0; bottom: 8cqw; height: 12cqw; background: var(--fc); display: flex; align-items: center; padding: 0 4cqw; }
.face .namebar b { font: 700 9cqw/1 var(--f-card); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.face .foot { position: absolute; left: 0; right: 0; bottom: 0; height: 8cqw; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; font: 600 3.2cqw/1 var(--f-card); color: #333; text-transform: none; }
.face .foot .ty { font-weight: 800; letter-spacing: .08em; color: var(--fc); }

/* card back (official: pink leader / white deck / orange chakra / black summon) */
.back { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: center; container-type: inline-size; }
.back.white { background: repeating-radial-gradient(circle at 40% 55%, #fff 0 9cqw, #ececf2 9cqw 18cqw); }
.back.pink { background: repeating-radial-gradient(circle at 40% 55%, #e44a7f 0 9cqw, #d83870 9cqw 18cqw); }
.back.black { background: repeating-radial-gradient(circle at 40% 55%, #222 0 9cqw, #111 9cqw 18cqw); }
.back.orange { background: repeating-radial-gradient(circle at 40% 55%, #ff8a2a 0 9cqw, #eb6101 9cqw 18cqw); }
.back img { width: 72%; transform: rotate(-24deg); filter: drop-shadow(0 2cqw 4cqw rgba(0,0,0,.2)); }

/* ---------- HOME HERO ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; background: var(--hero-bg); }
.hero-bg { position: absolute; inset: 0; z-index: -2; background: url("img/top_mv.webp") 62% center / cover no-repeat; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-bg) 26%, color-mix(in srgb, var(--hero-bg) 70%, transparent) 46%, transparent 66%); }

.hero-copy { padding: clamp(28px, 5vw, 72px); display: grid; gap: 22px; color: var(--hero-text); }
.hero-copy .lead { color: var(--hero-sub); }
.countdown { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.cd { min-width: 76px; padding: 9px 16px 8px 14px; background: var(--ink); color: #fff; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cd:first-child { background: var(--orange); }
.cd b { display: block; font: 800 italic 34px/1 var(--f-card); font-variant-numeric: tabular-nums; }
.cd span { font: 600 11px/1 var(--f-card); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.hero-cards { position: relative; height: 100%; min-height: 560px; perspective: 1400px; }
.hero-cards .tcg { position: absolute; width: clamp(150px, 14vw, 220px); }
.hero-cards .c1 { left: 18%; top: 30%; rotate: -12deg; z-index: 1; }
.hero-cards .c2 { left: 42%; top: 16%; rotate: 4deg; z-index: 3; width: clamp(190px, 18vw, 270px); }
.hero-cards .c3 { left: 68%; top: 34%; rotate: 14deg; z-index: 2; }

/* horizontal card rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 14vw, 200px); gap: 18px; overflow-x: auto; padding: 18px 2px 26px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-item { display: grid; }
.rail-item b { font: 700 16px/1.1 var(--f-card); }

/* starter decks: three colored product panels */
.starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.starter { position: relative; isolation: isolate; flex-direction: column; }
.starter::before { content: ""; position: absolute; inset: 0; }
.starter.red { background-color: var(--red); } .starter.blue { background-color: var(--blue); } .starter.green { background-color: var(--green); }
.starter .code { font: 800 italic 64px/.9 var(--f-card); letter-spacing: -.02em; opacity: .95; }
.starter .nm { font: 800 italic 28px/1 var(--f-head); letter-spacing: -.02em; }
.starter .tcg { position: absolute; right: -6%; bottom: -14%; width: 46%; rotate: 10deg; z-index: -1; }
.starter p { margin: 6px 0 0; font-size: 13.5px; opacity: .85; max-width: 26ch; }

/* news */
.news-grid { display: grid; gap: 16px; }
.story { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); transition: transform .4s var(--ease), border-color .3s; }
.story:hover { transform: translateY(-3px); border-color: var(--hair-2); }

.story .body { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; }
.story h3 { font: 700 italic 21px/1.08 var(--f-card); text-transform: uppercase; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.story.big h3 { font-size: 32px; }
.story p { margin: 0; color: var(--text-2); font-size: 14.5px; }
.story .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); }

/* ---------- CARD DATABASE ---------- */
.toolbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 0; margin: 10px 0 8px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: var(--surface); flex: 1 1 260px; max-width: 440px; }
.field input { flex: 1; min-width: 0; border: 0; outline: none; background: none; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface); border: 1px solid var(--hair); flex-wrap: wrap; }
.seg button { height: 34px; padding: 0 12px; border: 0; background: none; color: var(--text-2); font: 700 italic 14px/1 var(--f-card); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.dot { width: 10px; height: 10px; border-radius: 3px; transform: skewX(-12deg); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 20px; }
.cell { display: grid; gap: 10px; background: none; border: 0; padding: 0; text-align: left; }
.cell .cap { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.cell .cap b { font: 700 17px/1.1 var(--f-card); display: block; }
.cell .cap span { font-size: 12.5px; color: var(--text-3); }
.wish { width: 32px; height: 32px; border: 1px solid var(--hair-2); background: var(--surface); display: grid; place-items: center; flex: none; transition: transform .3s var(--spring); }
.wish svg { width: 15px; height: 15px; fill: none; stroke: var(--text-2); stroke-width: 2; }

.wish[aria-pressed="true"] svg { fill: #fff; stroke: #fff; }
.wish:active { transform: scale(.85); }
.empty { padding: 56px 20px; text-align: center; color: var(--text-2); border-radius: 22px; border: 1px dashed var(--hair-2); }

/* card detail sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(4,4,8,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; }
.sheet-bg.open { opacity: 1; }
.sheet { position: fixed; z-index: 81; left: 50%; top: 50%; width: min(1040px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow: auto; translate: -50% -46%; scale: .97; opacity: 0; transition: translate .5s var(--spring), scale .5s var(--spring), opacity .3s; background: var(--bg-2); border: 1px solid var(--hair-2); box-shadow: 0 50px 120px -30px rgba(0,0,0,.8); display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.sheet.open { translate: -50% -50%; scale: 1; opacity: 1; }
.sheet .stage { position: relative; display: grid; place-items: center; padding: 40px; overflow: hidden; isolation: isolate; border-right: 1px solid var(--hair); }
.sheet .stage::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle at 50% 45%, var(--glow, var(--orange)), transparent 60%); filter: blur(30px); }
.sheet .stage .tcg { width: 100%; max-width: 330px; }
.sheet .info { padding: 30px 32px; display: grid; gap: 18px; align-content: start; }
.close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.spec i { display: block; font: 700 11px/1 var(--f-card); font-style: normal; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.spec b { font: 800 italic 28px/1 var(--f-card); }
.effect { padding: 14px 16px; background: var(--surface); border: 1px solid var(--hair); font-size: 14.5px; }
.effect .lbl { display: inline-block; margin: 0 6px 6px 0; }
.effect .jp { margin-top: 8px; font: 400 13px/1.5 var(--f-jp); color: var(--text-3); }
.support { border-left: 3px solid var(--orange); }
.traits { display: flex; flex-wrap: wrap; gap: 6px; }
.ver { display: flex; gap: 10px; align-items: start; padding: 12px 14px; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--hair); }
.ver .ok { color: var(--green); } .ver .warn { color: var(--orange); }

/* ---------- DECK BUILDER (Moxfield / Piltover pattern) ---------- */

.deck { position: sticky; background: var(--surface); border: 1px solid var(--hair); }
.deck-hero { position: relative; height: 150px; overflow: hidden; isolation: isolate; display: flex; align-items: end; padding: 16px 18px; }
.deck-hero .bgimg { position: absolute; inset: 0; z-index: -2; background: var(--surface-2) center 22% / cover no-repeat; filter: saturate(1.1); }
.deck-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--surface) 4%, transparent 75%); }
.deck-hero input { width: 100%; border: 0; outline: none; background: none; font: 800 italic 26px/1.1 var(--f-head); }
.deck-body { padding: 4px 18px 18px; display: grid; gap: 14px; }
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.check { padding: 10px 8px; text-align: center; }
.check b { display: block; font: 800 italic 22px/1 var(--f-card); }
.check span { font: 600 10.5px/1 var(--f-card); letter-spacing: .12em; text-transform: uppercase; }

.dl { overflow: auto; }
.dl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.dl-row:hover { background: var(--surface-2); }
.dl-row .thumb { width: 34px; aspect-ratio: 63/88; border-radius: 3px; overflow: hidden; position: relative; }
.dl-row .thumb .tcg { width: 100%; box-shadow: none; }
.dl-row .nm { font: 600 15px/1.1 var(--f-card); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qty { display: inline-flex; align-items: center; background: var(--surface-2); }
.qty button { width: 28px; height: 28px; border: 0; background: none; font-weight: 700; color: var(--text-2); }
.qty span { min-width: 18px; text-align: center; font: 700 15px var(--f-card); }
.curve { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 96px; }
.curve div { display: grid; gap: 4px; justify-items: center; align-self: end; }
.curve i { width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--orange-2), var(--orange)); min-height: 3px; transition: height .6s var(--spring); }
.curve span { font: 600 11px var(--f-card); color: var(--text-3); }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }

@keyframes deal { from { opacity: 0; transform: translateY(40px) rotate(-6deg) scale(.9); } }
.pick { position: relative; }
.pick .badge { position: absolute; top: -8px; right: -8px; z-index: 3; min-width: 26px; height: 26px; padding: 0 6px; background: var(--orange); color: #fff; display: grid; place-items: center; font: 800 italic 15px/1 var(--f-card); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.pick.off { opacity: .35; filter: grayscale(.6); }

/* ---------- COLLECTION: 9-pocket binder ---------- */

/* ---------- SEALED (coming soon) ---------- */
.sealed { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px, 4vw, 52px); background: var(--surface); border: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; }
.sealed .swirl { position: absolute; inset: 0; z-index: -1; opacity: .9; }
.sealed .feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.sealed .feat div { padding: 16px 16px 16px 18px; background: var(--surface); border: 1px solid var(--hair); }
.sealed .feat b { display: block; font: 700 italic 16px/1.15 var(--f-card); letter-spacing: .03em; margin-bottom: 4px; text-transform: uppercase; }
.sealed .feat span { font-size: 13.5px; color: var(--text-2); }
.sealed .stack { position: relative; height: 340px; }
.sealed .stack .tcg { position: absolute; width: 190px; left: 50%; top: 50%; translate: -50% -50%; }
.sealed .stack .tcg:nth-child(1) { rotate: -10deg; translate: -64% -48%; }
.sealed .stack .tcg:nth-child(2) { rotate: 8deg; translate: -38% -52%; }
.sealed .stack .tcg:nth-child(3) { rotate: -1deg; }
.ribbon { position: absolute; left: 50%; top: 50%; z-index: 5; translate: -50% -50%; rotate: -8deg; padding: 10px 22px; background: var(--orange); color: #fff; font: 800 italic 22px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); white-space: nowrap; }

/* tier preview + poll */
.poll { display: grid; gap: 10px; }
.poll button { position: relative; overflow: hidden; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 16px; border: 1px solid var(--hair); background: var(--surface); text-align: left; }
.poll button .fill { position: absolute; inset: 0 auto 0 0; z-index: 0; opacity: .22; transition: width .8s var(--spring); }
.poll button > *:not(.fill) { position: relative; z-index: 1; }
.poll button .tcg { width: 54px; box-shadow: none; }
.poll button b { font: 700 19px/1 var(--f-card); }
.poll button[aria-pressed="true"] { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.poll .pct { font: 800 italic 26px/1 var(--f-card); }

/* events */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

/* learn */
.learn { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }

.unknown { color: var(--orange); font-weight: 600; }

/* account */

.f { display: grid; gap: 6px; }
.f label, .f .lab { font-weight: 600; font-size: 13.5px; }
.f input, .f select { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hair-2); background: var(--bg-2); outline: none; font-size: 15px; }
.f input:focus, .f select:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(235,97,1,.18); }

.f .err { font-size: 12.5px; color: var(--orange); font-weight: 600; }

/* apps */
.apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.app-tile { background: var(--surface); border: 1px solid var(--hair); padding: 30px; display: grid; justify-items: center; gap: 22px; text-align: center; overflow: hidden; }
.phone { width: 240px; aspect-ratio: 9/19.5; border-radius: 40px; padding: 9px; background: #050507; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 1.5px #37302b; }
.phone .scr { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #0b0b10; display: grid; align-content: start; gap: 10px; padding: 40px 14px 14px; }
.phone .island { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 76px; height: 22px; border-radius: 12px; background: #000; }
.phone .scr .tcg { width: 70%; justify-self: center; }
.scan { position: absolute; left: 12%; right: 12%; height: 2px; top: 24%; background: var(--blue-2); box-shadow: 0 0 18px 2px var(--blue-2); animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 50% { top: 62%; } }
.scr .found { justify-self: center; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 12px; color: #fff; }

/* footer */
.foot { border-top: 1px solid var(--hair); font-size: 12.5px; gap: 8px; max-width: 1480px; }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 99; translate: -50% 20px; opacity: 0; padding: 12px 20px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; transition: all .4s var(--spring); pointer-events: none; }
.toast.show { translate: -50% 0; opacity: 1; }

.tabbar { display: none; }

@media (max-width: 1180px) {

  .deck { position: static; }

}
@media (max-width: 900px) {

  .side { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-bg::after { background: linear-gradient(180deg, var(--hero-bg) 48%, color-mix(in srgb, var(--hero-bg) 30%, transparent) 80%); }
  .hero-cards { min-height: 360px; }
  .hero-cards .tcg { width: 150px; } .hero-cards .c2 { width: 170px; }
  .hero-cards .c1 { left: 4%; top: 12%; } .hero-cards .c2 { left: 30%; top: 4%; } .hero-cards .c3 { left: 58%; top: 14%; }

  .starters, .apps, .learn, .sheet, .sealed { grid-template-columns: minmax(0, 1fr); }
  .sheet .stage { border-right: 0; border-bottom: 1px solid var(--hair); padding: 28px; }
  .sheet .stage .tcg { max-width: 230px; }
  .sealed .stack { height: 280px; } .sealed .stack .tcg { width: 150px; }

  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 60; left: 10px; right: 10px; padding: 6px; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; font-size: 10.5px; font-weight: 600; color: var(--text-3); }
  .tabbar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

  .mtop { display: flex !important; }
}
.mtop { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }

  .sealed .feat { grid-template-columns: minmax(0, 1fr); }
  .hand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

:root[data-mode="dark"] .hero-bg { filter: brightness(.82); }

/* ---- v2.1: review fixes ---- */
/* loading placeholder = white deck back; images fade in */
.tcg { background: repeating-radial-gradient(circle at 40% 55%, #fff 0 18px, #ececf2 18px 36px); }
.tcg > img { opacity: 0; transition: opacity .45s var(--ease); }
.tcg > img.in { opacity: 1; }
.tcg .back img { opacity: 1; }

.tcg.nofoil .shine, .tcg.nofoil .glare { display: none; }
.tcg .shine { filter: brightness(.7) contrast(1.3) saturate(1.1); }

/* hero search */
.bigsearch { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 18px; background: var(--surface); border: 2px solid var(--ink); color: var(--text-3); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-left: 26px; }
.bigsearch svg { width: 22px; height: 22px; }
.bigsearch input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 18px; color: var(--text); }
.bigsearch:focus-within { border-color: var(--orange); }
.tag[data-hs] { border: 0; cursor: pointer; background: var(--ink); color: #fff; height: 30px; padding: 0 14px; font-size: 14px; }
.tag[data-hs]:hover { background: var(--orange); }

/* news: lead story fills its two rows */

.story { border-radius: 4px; }

/* card-frame language on components */
.spec { border: 0; border-radius: 0; background: var(--ink); color: #fff; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 12px 20px; }
.spec:first-child { background: var(--sc, var(--orange)); }
.spec i { color: rgba(255,255,255,.7); }
.spec b { font-size: 34px; }
.check { border-radius: 0; background: var(--ink); color: #fff; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.check span { color: rgba(255,255,255,.65); }
.check.ok b { color: #5be3c9; } .check.bad b { color: var(--orange-2); }
.field, .side-search { border-radius: 2px; border: 1px solid var(--hair-2); }
.field:focus-within, .side-search:focus-within { border-color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }
.seg { border-radius: 2px; }
.seg button { border-radius: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

.wish { border-radius: 2px; }
.sheet, .sealed, .deck, .app-tile, .starter, .effect, .ver { border-radius: 4px; }
.sheet .stage::before { opacity: .22; }

/* compact coming-soon row */

/* my decks */
.mydecks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 18px; }
.mydecks .label { margin-right: 6px; }
.deckchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; background: var(--surface); color: var(--text); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); font-size: 14px; }
.deckchip b { font: 700 16px/1 var(--f-card); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckchip .num { color: var(--text-3); font-size: 13px; }
.deckchip .sw { width: 10px; height: 10px; transform: skewX(-12deg); }
.deckchip.on { background: var(--ink); color: #fff; }
.deckchip.on .num { color: rgba(255,255,255,.6); }
.deckchip.add { background: var(--orange); color: #fff; font: 700 italic 15px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; }
.deckchip svg { width: 16px; height: 16px; }
.deck-hero > svg { position: absolute; right: 18px; bottom: 22px; width: 18px; height: 18px; color: var(--text-2); }
.pick::after { content: "+"; position: absolute; z-index: 4; left: 50%; top: 40%; translate: -50% -50%; width: 52px; height: 52px; display: grid; place-items: center; background: var(--orange); color: #fff; font: 800 34px/1 var(--f-card); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); opacity: 0; transition: opacity .2s, scale .25s var(--spring); scale: .8; pointer-events: none; }
.pick:hover::after { opacity: 1; scale: 1; }
.pick .badge { border-radius: 0; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }

/* collection */

.qty { border-radius: 0; }

/* starters with official art */
.starter { justify-content: flex-end; }
.starter .st-art { inset: 0; z-index: -1; }
.starter::before { z-index: 0; background: linear-gradient(0deg, var(--stc) 22%, transparent 62%); }
.starter > * { position: relative; z-index: 1; }
.starter > div { padding: 0 22px; }

.starter.red { --stc: var(--red); } .starter.blue { --stc: var(--blue); } .starter.gaara { --stc: var(--ink); }

@media (max-width: 900px) {

  .hero { align-items: start; }
}
.hero .display { font-size: clamp(38px, 4.2vw, 62px); }
.hero-copy { max-width: 760px; }

/* ---- v2.2 ---- */
svg.ni { width: 20px; height: 20px; flex: none; fill: currentColor !important; stroke: none !important; }

/* sidebar in the official language: white with deck-back swirl, card-tab nav */
.side { background: #fff; background-image: repeating-radial-gradient(circle at 120% 108%, transparent 0 46px, rgba(28,11,0,.035) 46px 92px); border-right: 0; box-shadow: 1px 0 0 var(--hair); gap: 2px; padding: 22px 16px; }
:root[data-mode="dark"] .side { background-color: var(--bg-2); }

.side-search { height: 42px; background: var(--bg); border: 0; margin-bottom: 8px; }
.side-search svg.ni { width: 18px; height: 18px; color: var(--text-2); }

.navlist { display: grid; gap: 2px; }
.nav { height: 40px; padding: 0 14px; gap: 12px; font: 700 italic 17px/1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); border-radius: 0; }
.nav svg.ni { width: 20px; height: 20px; color: var(--text-3); }
.nav:hover { background: var(--bg); color: var(--text); }
.nav[aria-current="page"] { background: var(--orange); color: #fff; box-shadow: none; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.nav[aria-current="page"] svg.ni { color: #fff; }

/* page header like a card name bar, not a landing title */
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ph-title { margin: 0; font: 800 italic clamp(34px, 3.6vw, 48px)/1 var(--f-card); letter-spacing: .01em; text-transform: uppercase; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: inset 6px 0 0 var(--orange); }
.ph-lead { flex-basis: 100%; margin: 0; color: var(--text-2); max-width: 60ch; }

/* captions */
.kana { font: 400 12px/1.2 var(--f-jp); color: var(--text-3); }
.rail-item { gap: 4px; }
.charlink { all: unset; cursor: pointer; }
.charlink:hover { color: var(--orange); }
.traits .tag { border: 0; cursor: pointer; }
.traits .tag:hover { background: var(--orange); color: #fff; }

/* news image never taller than a comfortable crop */

/* starters: native-size official art, no upscaling */
.starter { display: grid; gap: 16px; color: #fff; background: var(--stc); }
.starter::before { display: none; }
.starter .st-art { position: static; }
.starter .st-copy { display: grid; gap: 4px; }
.starter > div:last-child { padding-bottom: 0; }
.starter .code { font-size: 46px; }

/* approval stamp when the deck is legal */
.stamp { justify-self: center; display: grid; justify-items: center; gap: 2px; padding: 8px 18px; border: 3px solid #c8282d; color: #c8282d; rotate: -6deg; animation: stampIn .5s var(--spring) both; }
.stamp b { font: 900 30px/1 var(--f-jp); letter-spacing: .1em; }
.stamp span { font: 700 11px/1 var(--f-card); letter-spacing: .2em; text-transform: uppercase; }
@keyframes stampIn { from { opacity: 0; scale: 2.2; } 60% { opacity: 1; scale: .94; } to { scale: 1; } }

/* shadow clone jutsu: extra copies fan out */
.pick .tcg.clone { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 2; animation: clone .65s var(--ease) forwards; }
.pick .tcg.clone.c2 { animation-name: clone2; }
@keyframes clone { from { opacity: .9; transform: none; } to { opacity: 0; transform: translateX(-38%) rotate(-12deg); } }
@keyframes clone2 { from { opacity: .9; transform: none; } to { opacity: 0; transform: translateX(38%) rotate(12deg); } }

/* test hand thrown like shuriken */
.hand .tcg { animation: throw .7s var(--ease) both; }
@keyframes throw { from { opacity: 0; transform: translate(-60px, -30px) rotate(-200deg) scale(.6); } to { opacity: 1; transform: none; } }

/* substitution jutsu empty state */
.kawarimi { display: grid; justify-items: center; gap: 8px; }
.kawarimi b { font: 800 italic 22px/1 var(--f-card); text-transform: uppercase; color: var(--text); }

/* village picker */

.tabbar svg.ni { width: 22px; height: 22px; }
.btn svg.ni { width: 18px; height: 18px; }
.deck-hero > svg.ni { position: absolute; right: 18px; bottom: 22px; width: 16px; height: 16px; color: var(--text-2); }

/* ---- v2.3: horizontal top bar (official site proportions) ---- */
.shell { grid-template-columns: minmax(0, 1fr); }
.topnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: #fff; box-shadow: 0 1px 0 var(--hair); }

.topbar-in { max-width: 1480px; margin: 0 auto; height: 68px; display: flex; align-items: center; gap: 18px; padding: 0 clamp(16px, 3vw, 40px); }

.topnav .navlist { display: flex; gap: 2px; height: 100%; align-items: center; }
.topnav .nav { height: 40px; font: 700 italic 18px/1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.topnav .nav:hover { background: none; color: var(--orange); }
.topnav .nav[aria-current="page"] { background: var(--orange); color: #fff; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.topnav .side-search { margin: 0 0 0 auto; height: 40px; background: var(--bg); }
.ninja-chip { display: flex; align-items: center; height: 40px; flex: none; color: #fff; background: var(--vc); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 0 16px; gap: 8px; }
.ninja-chip b { font: 700 italic 16px/1 var(--f-card); max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ninja-chip span { font: 700 11px/1 var(--f-card); letter-spacing: .14em; text-transform: uppercase; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.4); }

.foot { margin: 0 auto; }
.page { margin: 0 auto; }

/* no wrappers: sections sit on the ground */

.learn { margin-top: 48px; }

.toggle { height: 36px; padding: 0 18px; border: 0; background: var(--surface); color: var(--text-2); font: 700 italic 15px/1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.toggle[aria-pressed="true"] { background: var(--ink); color: #fff; }

.h2 { font: 800 italic clamp(26px, 2.4vw, 34px)/1 var(--f-card); text-transform: uppercase; letter-spacing: .02em; }

@media (max-width: 1100px) {
  .topnav .side-search { padding: 0 12px; }
  .topnav .side-search input, .topnav .side-search .kbd { display: none; }

}
@media (max-width: 900px) {
  .topnav .navlist { display: none; }
  .topbar-in { height: 58px; gap: 10px; }
  .topnav .side-search { margin-left: auto; }
}
/* provisional wordmark (option A): swirl replaces the C, like the official logo replaces the O */
.wordmark { gap: 1px; flex: none; color: var(--ink); }

.wm-row { display: flex; align-items: center; }

.wordmark small { font: 700 9.5px/1 var(--f-card); letter-spacing: .42em; padding-left: 3px; }

.news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story.big { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto; }
.story.big .body { padding: 32px; align-content: center; }
@media (max-width: 900px) { .news-grid { grid-template-columns: minmax(0, 1fr); } .story.big { grid-template-columns: minmax(0, 1fr); }  }

/* ---- v2.4 ---- */

.wordmark b { font-size: 36px; line-height: .86; }

.cell .cap > div { min-width: 0; }
.cell .cap b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .cap > div > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.starter { grid-template-columns: minmax(0, 1fr) 44%; padding: 0; align-items: stretch; min-height: 0; overflow: hidden; }
.starter .st-copy { padding: 22px; align-content: end; }
.starter .st-art { width: 100%; height: 100%; min-height: 230px; max-height: 270px; border: 0; box-shadow: none; object-fit: cover; object-position: center 25%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.starter.gaara { --stc: #3a2a22; }
.cell .cap .qty { flex: none; }

/* ---- v3: community features ---- */
.topnav .nav { padding: 0 12px; font-size: 17px; }
.topnav .side-search { width: clamp(150px, 14vw, 230px); }
@media (max-width: 1360px) { .topnav .side-search { width: 44px; padding: 0 12px; } .topnav .side-search input, .topnav .side-search .kbd { display: none; } .topnav .nav { padding: 0 9px; font-size: 16px; } }
@media (max-width: 1180px) { .topnav .navlist { display: none; } }
@media (min-width: 901px) and (max-width: 1180px) { .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 60; left: 50%; translate: -50% 0; width: min(560px, calc(100% - 20px)); bottom: 12px; padding: 6px; box-shadow: 0 10px 30px -10px rgba(28,11,0,.3), 0 0 0 1px var(--hair); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--text-3); }  }
.tabbar { border-radius: 0; background: #fff; }
.tabbar a { border-radius: 0; font: 700 italic 12px/1 var(--f-card); text-transform: uppercase; letter-spacing: .04em; }
.tabbar a[aria-current="page"] { color: #fff; background: var(--orange); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

.byline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.byline b { font: 700 italic 15px/1 var(--f-card); color: #fff; background: var(--vc); padding: 4px 10px 4px 8px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.byline span { color: var(--text-3); font: 600 12px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; }

.scrolls { display: grid; gap: 16px; }
.scroll { display: grid; gap: 16px; background: var(--surface); }

.scroll-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.scroll-name { font: 800 italic 22px/1.05 var(--f-card); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scroll-meta { font-size: 13.5px; color: var(--text-2); }

.where { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.where-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; padding: 16px 18px; background: var(--ink); color: #fff; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.where-i b { font: 800 italic 20px/1 var(--f-card); text-transform: uppercase; }
.where-i span { grid-row: 2; font-size: 13px; color: rgba(255,255,255,.7); }
.where-i svg.ni { grid-row: 1 / span 2; grid-column: 2; color: var(--orange); }
.where-i:hover { background: var(--orange); }
.where-i:hover svg.ni { color: #fff; }

.threads { display: grid; gap: 6px; }
.thread-row { all: unset; cursor: pointer; display: grid; gap: 16px; }
.thread-row:hover { box-shadow: inset 4px 0 0 var(--orange), 0 0 0 1px var(--hair); }
.tr-card .tcg { width: 52px; box-shadow: none; }
.tr-cat { width: 52px; height: 52px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 900 italic 26px/1 var(--f-card); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.tr-main { display: grid; gap: 6px; min-width: 0; justify-items: start; }
.tr-main b { font: 700 18px/1.2 var(--f-head); letter-spacing: -.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-side { display: grid; justify-items: end; gap: 2px; font-size: 12px; color: var(--text-3); }
.tr-side b { font: 800 italic 24px/1 var(--f-card); color: var(--text); }
.thread { display: grid; gap: 12px; padding: 22px 0; border-bottom: 2px solid var(--ink); justify-items: start; }
.thread-t { margin: 0; font: 800 italic clamp(26px, 3vw, 38px)/1.05 var(--f-card); text-transform: uppercase; }
.post-body { white-space: pre-wrap; font-size: 15.5px; line-height: 1.6; max-width: 70ch; }
.replies { display: grid; }
.reply { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--hair); justify-items: start; }
.refcard { all: unset; cursor: pointer; display: flex; gap: 12px; align-items: center; font: 700 italic 16px var(--f-card); }
.refcard .tcg { width: 60px; }
.compose { display: grid; gap: 14px; padding: 20px; margin: 18px 0; background: var(--surface); box-shadow: 0 0 0 1px var(--hair); }
.compose textarea { padding: 12px 14px; border: 1px solid var(--hair-2); background: var(--bg-2); outline: none; font: inherit; resize: vertical; border-radius: 2px; }
.compose textarea:focus, .compose input:focus, .compose select:focus { border-color: var(--orange); }
.link[data-fback] { border: 0; background: none; padding: 0; cursor: pointer; }

.menu-list { display: grid; gap: 6px; margin-top: 10px; }
.menu-i { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--hair); }
.menu-i b { font: 800 italic 22px/1 var(--f-card); text-transform: uppercase; }
.menu-i svg.ni { color: var(--orange); }

@media (max-width: 600px) { .thread-row { gap: 10px; } .tr-card .tcg { width: 44px; }     }

/* ---- v3.1 ---- */
.pagehead { padding: 8px 0 0; margin-bottom: 14px; }
.ph-title { font-size: clamp(28px, 3vw, 40px); padding: 6px 22px 6px 16px; }
.page { padding-top: 22px; }
.grid { align-items: start; }
.cell .cap { min-height: 44px; }

.pending-sec { margin-top: 30px; }
.pending-sec .label { margin: 0 0 10px; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 4px 16px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--hair); }
.prow-main { all: unset; cursor: pointer; display: grid; align-items: baseline; gap: 10px; flex: 1; min-width: 0; padding: 4px 0; }
.prow-main .sw { width: 6px; height: 22px; background: var(--lc); align-self: center; transform: skewX(-12deg); }
.prow-main b { font: 700 italic 17px/1.1 var(--f-card); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-main .num { font-size: 12.5px; text-align: right; white-space: nowrap; }
.prow-main:hover b { color: var(--orange); }

.inline-empty { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text-2); }

.scrolls { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.scroll { grid-template-columns: 140px minmax(0, 1fr); padding: 0; overflow: hidden; }
.scroll-art .tcg { width: 140px; box-shadow: none; border-radius: 0; }
.scroll-body { padding: 16px 16px 16px 0; }
.scroll-name { font-size: 26px; }

@media (max-width: 900px) {     .scrolls { grid-template-columns: minmax(0, 1fr); } .scroll { grid-template-columns: 110px minmax(0, 1fr); } .scroll-art .tcg { width: 110px; } }

/* ---- v3.2 ---- */
/* tier */

/* shop */

/* decks: no hairline boxes */
.scroll { box-shadow: 0 10px 26px -18px rgba(28,11,0,.35); border-top: 2px solid var(--lc); }
/* pending */
.prow-main { grid-template-columns: 6px minmax(0, auto) auto minmax(0, 1fr); }
/* character page */
.charlink b { font: inherit; }
.cell .cap .charlink { display: block; max-width: 100%; }
.cell .cap .charlink b { font: 700 17px/1.1 var(--f-card); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell .cap .charlink:hover b { color: var(--orange); }
.charhero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; margin-top: 8px; background: linear-gradient(120deg, color-mix(in srgb, var(--lc) 16%, transparent), transparent 60%); border-top: 2px solid var(--lc); overflow: hidden; }
.ch-copy { display: grid; gap: 12px; justify-items: start; }
.ch-name { margin: 0; font: 900 italic clamp(44px, 6vw, 84px)/.9 var(--f-card); text-transform: uppercase; }
.ch-count { font-size: 14px; color: var(--text-2); }
.ch-count b { font: 800 italic 26px/1 var(--f-card); color: var(--text); }
.ch-card .tcg { width: 260px; rotate: 4deg; }
/* missions */

/* ---- footer: closes the light page like the black Summon back ---- */
.foot { all: unset; display: block; position: relative; overflow: hidden; isolation: isolate; margin-top: 80px; background: #1c0b00; color: #d9cfc8;
  clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); padding: 90px clamp(16px, 3vw, 40px) calc(40px + env(safe-area-inset-bottom, 0px)); }
.foot::before { content: ""; position: absolute; z-index: -1; right: -220px; top: -160px; width: 760px; height: 760px; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,.045) 0 46px, transparent 46px 92px); animation: spinSlow 120s linear infinite; }
.foot::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 40px; background: var(--orange); clip-path: polygon(0 34px, 100% 0, 100% 6px, 0 40px); }
@keyframes spinSlow { to { rotate: 360deg; } }
.foot-in { max-width: 1400px; margin: 0 auto; display: grid; }
.fbrand { display: grid; gap: 14px; align-content: start; }
.wordmark.light { color: #fff; }
.fbrand p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.5; color: #b8aca4; }
.frank { justify-self: start; font: 700 italic 14px/1 var(--f-card); text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--vc); padding: 6px 14px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.fcol { display: grid; gap: 10px; align-content: start; }
.fcol h4 { margin: 0 0 4px; font: 800 italic 15px/1 var(--f-card); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.fcol a { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: #e9e1db; }
.fcol a:hover { color: var(--orange-2); }
.fcol a svg.ni { width: 14px; height: 14px; }
.fprefs { display: grid; gap: 12px; align-content: start; justify-items: end; }
.langs { display: flex; gap: 3px; justify-content: flex-end; }
.langs button { height: 30px; min-width: 38px; border: 0; background: rgba(255,255,255,.08); color: #d9cfc8; font: 700 italic 14px/1 var(--f-card); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.langs button[aria-pressed="true"] { background: var(--orange); color: #fff; }
.fbtn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; background: rgba(255,255,255,.08); color: #fff; font: 700 italic 14px/1 var(--f-card); text-transform: uppercase; letter-spacing: .06em; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.fbtn svg.ni { width: 16px; height: 16px; }
.flegal { max-width: 1400px; margin: 40px auto 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.6; color: #8f8379; }
@media (max-width: 1100px) {  .fbrand { grid-column: 1 / -1; } .fprefs { grid-column: 1 / -1; justify-items: start; } .langs { justify-content: flex-start; } }
@media (max-width: 900px) { .foot { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }  }
@media (prefers-reduced-motion: reduce) { .foot::before { animation: none; } }

/* ---- v4: robust card sizing, manga icons, empty states ---- */
.tcg { width: 100%; overflow: hidden; }
.tcg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.grid > .cell, .grid > .cell > button.cell { min-width: 0; width: 100%; }
.cell { position: relative; }
.btn-o, .nav[aria-current="page"], .tabbar a[aria-current="page"], .deckchip.add { --ic: #fff; --ic2: #eb6101; }
.btn-g, .where-i { --ic: #eb6101; --ic2: #1c0b00; }
svg.ni { overflow: visible; }
.kawa { width: 180px; height: auto; }
.inline-empty .kawa { width: 64px; }
.promo-box { display: grid; gap: 6px; justify-items: start; padding: 14px 16px; background: color-mix(in srgb, var(--orange) 9%, transparent); }
.promo-box b { font: 800 italic 20px/1.1 var(--f-card); text-transform: uppercase; }
.promo-box p { margin: 0; font-size: 14px; color: var(--text-2); }

/* ---- articles ---- */
.story { color: inherit; }
.story .link { margin-top: 4px; }
.art { max-width: 820px; margin: 0 auto; padding-top: 10px; }
.art-t { margin: 10px 0 12px; font: 900 italic clamp(34px, 4.4vw, 58px)/.98 var(--f-card); text-transform: uppercase; text-wrap: balance; }
.art-dek { margin: 0 0 16px; font-size: 19px; line-height: 1.5; color: var(--text-2); }
.art-by { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--text-3); }
.art-by b { font: 700 italic 15px/1 var(--f-card); text-transform: uppercase; color: var(--orange); }
.art-fig { margin: 22px 0; display: grid; place-items: center; box-shadow: 0 12px 30px -20px rgba(28,11,0,.4); }
.art-fig img { max-width: 100%; }
.art-body p { font-size: 17px; line-height: 1.7; margin: 0 0 16px; max-width: 68ch; }
.art-why { margin: 26px 0; padding: 18px 22px; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.art-why b { font: 800 italic 16px/1 var(--f-card); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-2); }
.art-why p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; }
.art-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; }
.art-cards .cell b { font: 700 15px/1.1 var(--f-card); }
.art-actions { margin-top: 26px; gap: 10px; }

/* ---- account: ninja registration card ---- */
.acc { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; }
.acc-form { display: grid; gap: 18px; }
.acc-card { position: sticky; top: 90px; }
.ncard { position: relative; aspect-ratio: 63 / 88; background: #fff; box-shadow: 0 30px 60px -30px rgba(28,11,0,.5), 0 0 0 1px var(--hair); border: 10px solid var(--vc); display: grid; grid-template-rows: auto 1fr auto auto auto; overflow: hidden; color: var(--ink); transition: border-color .3s; }
.nc-top { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--vc); color: #fff; font: 700 italic 13px/1 var(--f-card); letter-spacing: .1em; text-transform: uppercase; }
.nc-art { position: relative; overflow: hidden; background: repeating-radial-gradient(circle at 70% 40%, #fff 0 22px, #f1edf8 22px 44px); display: grid; place-items: center; }
.nc-art .tcg { width: 52%; rotate: -6deg; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); }
.nc-village { position: absolute; left: 0; top: 14px; padding: 6px 16px 6px 12px; background: var(--ink); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.nc-village b { font: 800 italic 16px/1 var(--f-card); text-transform: uppercase; letter-spacing: .06em; }
.nc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; }
.nc-stats div { background: var(--ink); color: #fff; padding: 6px 10px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.nc-stats div:first-child { background: var(--vc); }
.nc-stats i { display: block; font: 700 9.5px/1 var(--f-card); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.nc-stats b { font: 800 italic 17px/1.1 var(--f-card); text-transform: uppercase; }
.nc-name { background: var(--vc); padding: 8px 14px; }
.nc-name b { font: 800 italic 30px/1 var(--f-card); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.nc-foot { display: flex; justify-content: space-between; padding: 7px 12px 8px; font: 600 12px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; color: #5b4f60; }
.ncard.guest .nc-stats b, .ncard.guest .nc-name b, .ncard.guest .nc-village b { opacity: .45; }
.nc-stamp { position: absolute; right: 18px; top: 46%; background: rgba(255,255,255,.85); }
.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.acc-stats a { display: grid; gap: 4px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 10px 24px -18px rgba(28,11,0,.4); }
.acc-stats b { font: 800 italic 32px/1 var(--f-card); }
.acc-stats span { font-size: 13px; color: var(--text-2); }
@media (max-width: 900px) { .acc { grid-template-columns: minmax(0, 1fr); } .acc-card { position: static; max-width: 340px; } .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- how to play: visual guide ---- */

.chap { padding: 34px 0 10px; scroll-margin-top: 130px; }
.chap-t { margin: 0 0 20px; }
.fine { margin: 14px 0 0; font-size: 13.5px; color: var(--text-3); max-width: 70ch; }
.anat { display: grid; gap: 26px; align-items: start; }

.pin { border: 2px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font: 800 13px/1 var(--f-card); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0,0,0,.4); transition: transform .2s var(--spring), background .2s; }
.pin:hover, .pin.on { background: var(--orange); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legend li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--text-2); }
.legend li > b { display: grid; place-items: center; font: 800 13px/1 var(--f-card); }
.legend li strong { display: block; font: 800 italic 16px/1.1 var(--f-card); text-transform: uppercase; color: var(--text); }
.legend li.on > b { background: var(--orange); }
.table { display: grid; gap: 14px; padding: 20px; background: repeating-radial-gradient(circle at 50% 40%, #fff 0 40px, #f1edf8 40px 80px); box-shadow: inset 0 0 0 2px var(--ink); }
.zone { display: grid; gap: 8px; align-content: start; }
.zone > span { font: 800 italic 14px/1 var(--f-card); letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.z-leader { grid-area: leader; } .z-chars { grid-area: chars; } .z-deck { grid-area: deck; } .z-trash { grid-area: trash; } .z-chakra { grid-area: chakra; } .z-summon { grid-area: summon; }
.z-leader .tcg { width: 130px; } 
.zrow { display: flex; gap: 10px; } .zrow > * { width: 110px; flex: none; }
.slot { aspect-ratio: 63/88; width: 100px; border: 2px dashed rgba(28,11,0,.25); border-radius: 4px; }
.pile { position: relative; width: 100px; aspect-ratio: 63/88; }
.pile .tcg { position: absolute; inset: 0; width: 100%; }
.pile .tcg:nth-child(2) { translate: 4px -4px; } .pile .tcg:nth-child(3) { translate: 8px -8px; } .pile .tcg:nth-child(4) { translate: 12px -12px; } .pile .tcg:nth-child(5) { translate: 16px -16px; }
 .crow .tcg { width: 64px; }
.deckmath { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.dm { display: grid; justify-items: center; gap: 6px; }
.dm .pile { width: 90px; margin-top: 16px; }
.dm b { font: 900 italic 46px/1 var(--f-card); }
.dm span { font: 700 13px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dm.total b { color: var(--orange); font-size: 64px; }
.plus { font: 900 italic 40px/1 var(--f-card); color: var(--text-3); }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.step { display: grid; gap: 10px; justify-items: start; width: min(340px, 100%); }
.step-vis { min-height: 150px; display: flex; align-items: center; }
.step-vis > .tcg { width: 110px; }
.step-n { width: 30px; height: 30px; display: grid; place-items: center; background: var(--orange); color: #fff; font: 900 italic 17px/1 var(--f-card); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.step p { margin: 0; font-size: 15px; line-height: 1.45; }
.step-arrow svg.ni { width: 28px; height: 28px; color: var(--text-3); }

.life { display: grid; justify-items: center; width: 120px; padding: 14px 0; background: var(--ink); color: #fff; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.life b { font: 900 italic 54px/1 var(--f-card); } .life span { font: 700 12px/1 var(--f-card); letter-spacing: .2em; }
.life.hit { background: #d83870; } .life.ko { background: var(--orange); }
.unk { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.unk li { padding: 10px 14px; border: 1px solid var(--hair); background: var(--surface); font-size: 15px; }

@media (max-width: 700px) {  .anat-card { max-width: 300px; }  .crow .tcg { width: 52px; } .step-arrow { rotate: 90deg; }  }
/* at rest a card is a flat 2D box: perspective only while the pointer is on it (set inline by JS) */
.tcg { transform: none; transform-style: flat; will-change: auto; }
.cell { grid-template-columns: minmax(0, 1fr); }

/* ---- v4.2 review ---- */
/* anatomy: technical-drawing callouts outside the card */
.anat { grid-template-columns: 300px minmax(0, 1fr) 300px minmax(0, 1fr); padding: 0 40px; }
.anat-card { position: relative; width: 300px; }
.pdot { position: absolute; z-index: 3; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #fff; }
.pline { position: absolute; z-index: 2; height: 0; border-top: 1.5px solid var(--ink); }
.pin { position: absolute; z-index: 4; translate: 0 -50%; transform: none; width: 26px; height: 26px; }

.pin:hover, .pin.on { transform: scale(1.15); }
/* table: centered play mat */
.table { grid-template-columns: 150px minmax(0, 1fr) 110px 110px; grid-template-areas: "leader chars deck trash" "chakra chakra chakra summon"; max-width: 1000px; margin: 0 auto; align-items: start; }
.z-summon .tcg { width: 96px; }
.z-chars .zrow { justify-content: center; }
.z-chakra { justify-self: center; }
/* account */
.vtabs { display: flex; flex-wrap: wrap; gap: 4px; }
.vtab input, .lcard input { position: absolute; opacity: 0; pointer-events: none; }
.vtab span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; background: var(--surface); color: var(--text); font: 700 italic 16px/1 var(--f-card); text-transform: uppercase; letter-spacing: .05em; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: inset 4px 0 0 var(--vc); cursor: pointer; }
.vtab input:checked + span { background: var(--vc); color: #fff; }
.vtab input:focus-visible + span { outline: 2px solid var(--orange); }
.lpick { display: flex; gap: 14px; }
.lcard { display: grid; gap: 6px; width: 120px; cursor: pointer; justify-items: center; }
.lcard .tcg { width: 120px; opacity: .55; transition: opacity .2s, transform .25s var(--spring); }
.lcard b { font: 700 italic 14px/1 var(--f-card); text-transform: uppercase; color: var(--text-3); }
.lcard input:checked ~ .tcg { opacity: 1; transform: translateY(-4px); box-shadow: 0 0 0 3px var(--orange), var(--shadow-card); }
.lcard input:checked ~ b { color: var(--orange); }

@media (max-width: 900px) {
  .anat { grid-template-columns: minmax(0, 1fr); } .anat-card { width: min(260px, 100%); }
  .table { grid-template-columns: 1fr 1fr; grid-template-areas: "leader deck" "chars chars" "chakra chakra" "summon trash"; }
  /* home */
  .countdown { flex-wrap: nowrap; gap: 4px; } .cd { min-width: 0; flex: 1; padding: 8px 10px 7px 9px; } .cd b { font-size: 26px; }
  .hero .row[style] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kbd { display: none; }
  /* cards: filters on one scrolling row */
  .toolbar { overflow-x: auto; scrollbar-width: none; }

  .cell .cap .charlink b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* bottom bar like the top bar */
  .tabbar { background: #fff; border: 0; box-shadow: 0 8px 30px -10px rgba(28,11,0,.35); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
.langs { flex-wrap: nowrap; max-width: none; }

/* ---- bell ---- */
.bell { position: relative; width: 42px; height: 40px; flex: none; border: 0; background: var(--bg); display: grid; place-items: center; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.bell svg.ni { width: 22px; height: 22px; }
.bell-n { position: absolute; top: 3px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d83870; color: #fff; font: 800 11px/18px var(--f-card); text-align: center; }
.bell-bg { z-index: 79; background: rgba(28,11,0,.18); backdrop-filter: none; }
.bellpanel { position: fixed; z-index: 82; top: 72px; right: max(16px, calc((100vw - 1480px) / 2 + 40px)); width: 400px; max-height: min(70vh, 620px); display: grid; grid-template-rows: auto 1fr; background: var(--surface); box-shadow: 0 30px 60px -20px rgba(28,11,0,.45), 0 0 0 1px var(--hair); border-top: 4px solid var(--orange); opacity: 0; translate: 0 -8px; transition: opacity .2s, translate .3s var(--spring); }
.bellpanel.open { opacity: 1; translate: 0 0; }
.bp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hair); }
.bp-head b { font: 800 italic 20px/1 var(--f-card); text-transform: uppercase; }
.bp-head .link { border: 0; background: none; cursor: pointer; font-size: 13px; }
.bp-list { overflow: auto; }
.bp-item { all: unset; cursor: pointer; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); box-sizing: border-box; width: 100%; }
.bp-item:hover { background: var(--bg); }
.bp-item.unread { box-shadow: inset 4px 0 0 var(--orange); }
.bp-img { width: 64px; height: 48px; background: #fff center / contain no-repeat; display: grid; place-items: center; }
.bp-img.rep svg.ni { width: 26px; height: 26px; }
.bp-txt { display: grid; gap: 4px; justify-items: start; min-width: 0; font-size: 12.5px; }
.bp-txt b { font: 700 14.5px/1.25 var(--f-head); letter-spacing: -.01em; }
@media (max-width: 900px) { .bellpanel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 75vh; translate: 0 20px; border-top-width: 6px; padding-bottom: env(safe-area-inset-bottom, 0px); } .bellpanel.open { translate: 0 0; } }

/* ---- collection: binder by section ---- */

.hint { margin: 0 0 6px; font-size: 13px; color: var(--text-3); }

.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.cslot { position: relative; display: grid; gap: 6px; cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cslot .tcg { filter: grayscale(.7) opacity(.75); transition: filter .25s, transform .25s var(--spring); }
.cslot .tcg.nofoil { filter: opacity(.6); }
.cslot.has .tcg { filter: none; }
.cslot:hover .tcg { filter: none; transform: translateY(-3px); }
.cslot:focus-visible .tcg { box-shadow: 0 0 0 3px var(--orange); }
.cslot .cq { position: absolute; top: 8px; right: -6px; z-index: 3; padding: 4px 9px; background: var(--orange); color: #fff; font: 900 italic 17px/1 var(--f-card); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.cslot .cinfo { position: absolute; top: 8px; left: 8px; z-index: 3; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(28,11,0,.75); color: #fff; font: 700 italic 14px/24px var(--f-card); opacity: 0; transition: opacity .2s; }
.cslot:hover .cinfo, .cslot:focus-within .cinfo { opacity: 1; }
.cslot .cname { font: 700 14px/1.15 var(--f-card); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; }
.cslot.wished .cname::before { content: "★ "; color: var(--orange); }
.cslot.pop .tcg { animation: cpop .35s var(--spring); }
.cslot.drop .tcg { animation: cdrop .3s var(--ease); }
@keyframes cpop { 40% { transform: scale(1.06) translateY(-4px); } }
@keyframes cdrop { 40% { transform: scale(.94); } }
.sheet.small { grid-template-columns: minmax(0, 1fr); width: min(520px, calc(100% - 32px)); }
.sheet.small textarea { width: 100%; padding: 12px; border: 1px solid var(--hair-2); background: var(--bg-2); font: 14px/1.5 var(--f-card); }
@media (hover: none) { .cslot .cinfo { opacity: 1; } }
@media (max-width: 600px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }  }

/* ---- deck builder: three zones ---- */
.b3 { display: grid; grid-template-columns: 230px minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.bfil { position: sticky; top: 88px; display: grid; gap: 18px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 4px; scrollbar-width: thin; }
.bfil .field { max-width: none; }
.bf-g { display: grid; gap: 8px; }
.bf-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bf-chips .toggle { height: 32px; padding: 0 12px; font-size: 14px; }
.bf-traits { display: flex; flex-wrap: wrap; gap: 4px; }
.tchip { height: 28px; padding: 0 10px; border: 0; background: var(--surface); color: var(--text-2); font: 600 13px/1 var(--f-card); }
.tchip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bpool .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 14px; }
.pickhint { display: flex; align-items: center; gap: 10px; font: 800 italic 18px/1 var(--f-card); text-transform: uppercase; }
.pickhint b { width: 30px; height: 30px; display: grid; place-items: center; background: var(--orange); color: #fff; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.deck { top: 88px; max-height: calc(100vh - 100px); overflow: auto; scrollbar-width: thin; }
.issues { margin: 0; padding: 10px 14px; list-style: none; background: color-mix(in srgb, var(--orange) 10%, transparent); display: grid; gap: 4px; font-size: 13.5px; }
.dgroup { display: grid; gap: 4px; }
.dl { max-height: none; display: grid; gap: 12px; }
.tbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 8px; align-items: center; font-size: 12.5px; }
.tbar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbar i { height: 8px; background: var(--orange); display: block; }
.tbar b { font: 800 italic 15px/1 var(--f-card); text-align: right; }
.hoverprev { position: fixed; z-index: 90; width: 240px; pointer-events: none; filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.handsec .hand { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.btn[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 1250px) { .b3 { grid-template-columns: 200px minmax(0, 1fr); } .b3 .deck { grid-column: 1 / -1; position: static; max-height: none; } }
@media (max-width: 900px) { .b3 { grid-template-columns: minmax(0, 1fr); } .bfil { position: static; max-height: none; grid-auto-flow: row; } .bf-traits { max-height: 90px; overflow: auto; } }

/* ---- guide as a path ---- */

.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gterm { display: grid; gap: 8px; align-content: start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hair); box-shadow: 0 10px 24px -20px rgba(28,11,0,.4); }
.gterm b { font: 800 italic 20px/1 var(--f-card); text-transform: uppercase; }
.gterm p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.gcards { display: flex; gap: 8px; } .gcards .tcg { width: 58px; } .gcards .cell { width: 58px; }

/* ---- forum ---- */
.ftools { display: flex; gap: 10px; align-items: center; margin: 4px 0 12px; }
.ftools .field { flex: 1 1 320px; max-width: 520px; }
.ftools .btn { margin-left: auto; }
.fcats { display: flex; gap: 6px; flex-wrap: wrap; }
.fcats .num { opacity: .6; margin-left: 4px; font-style: normal; }
.thread-row { grid-template-columns: 56px minmax(0, 1fr) 100px; align-items: start; background: var(--surface); box-shadow: 0 8px 22px -20px rgba(28,11,0,.5); padding: 14px 18px; }
.thread-row.pinned { box-shadow: inset 4px 0 0 var(--orange), 0 8px 22px -20px rgba(28,11,0,.5); }
.tr-card.news { display: block; width: 56px; height: 56px; background: #fff center / cover; }
.tr-prev { font-size: 13.5px; color: var(--text-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-main .row .byline b { font-size: 13px; padding: 3px 8px 3px 6px; }
.post-body blockquote { margin: 0 0 6px; padding: 6px 12px; border-left: 3px solid var(--orange); background: var(--surface); color: var(--text-2); font-size: 14px; white-space: normal; }
.mention { all: unset; cursor: pointer; font-weight: 700; color: var(--orange); border-bottom: 1.5px dashed var(--orange); }
.rxbar { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; background: var(--surface); color: var(--text-2); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.rx b { font: 900 16px/1 var(--f-jp); }
.rx .num { font: 700 13px/1 var(--f-card); }
.rx.on { background: var(--ink); color: #fff; }
.rx:hover b { color: var(--orange); }
.rxbar .quote { border: 0; background: none; cursor: pointer; font-size: 13px; margin-left: 6px; }
.refcard .bp-img { width: 80px; height: 56px; }
@media (max-width: 600px) { .ftools { flex-wrap: wrap; } .thread-row { grid-template-columns: 44px minmax(0, 1fr); } .tr-side { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 8px; align-items: baseline; } }

/* ---- v4.8 refinements ---- */
.dact { gap: 6px; align-items: flex-start; }
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; }
.more summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; z-index: 30; right: 0; top: 42px; min-width: 190px; display: grid; background: var(--surface); box-shadow: 0 20px 40px -16px rgba(28,11,0,.45), 0 0 0 1px var(--hair); border-top: 3px solid var(--orange); }
.more-menu button { all: unset; cursor: pointer; padding: 11px 16px; font: 700 italic 15px/1 var(--f-card); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--hair); }
.more-menu button:hover { background: var(--bg); color: var(--orange); }
.more-menu .danger { color: #c8282d; }
.b3.noleader { grid-template-columns: minmax(0, 1fr) 380px; }
.b3.noleader .bfil { display: none; }
.b3.noleader .bpool .grid { grid-template-columns: repeat(2, minmax(0, 260px)); gap: 28px; }
.b3.noleader .pickhint { font-size: 22px; margin-bottom: 4px; }
.handsec[hidden] { display: none !important; }
.qhelp { position: relative; }
.qhelp summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; background: var(--surface); font: 900 italic 18px/1 var(--f-card); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.qhelp summary::-webkit-details-marker { display: none; }
.qhelp p { position: absolute; z-index: 30; right: 0; top: 40px; width: 280px; margin: 0; padding: 12px 14px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.45; }

.shared { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 10px; }
.sh-body { display: grid; gap: 16px; max-width: 620px; }
@media (max-width: 900px) { .b3.noleader { grid-template-columns: minmax(0, 1fr); } .b3.noleader .bpool .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shared { grid-template-columns: minmax(0, 1fr); } .shared .sh-lead { max-width: 220px; } }
@media (max-width: 900px) { .ninja-chip span { display: none; } .ninja-chip { padding: 0 12px; } .ninja-chip b { max-width: 9ch; }    }

/* character hero: whole card, no crop */
.charhero { align-items: center; padding: 28px 32px; }
.ch-card .tcg { margin-bottom: 0; }
.ch-copy { padding-bottom: 0; }
/* anatomy: number at the card edge + short tick, dot on the point; no line across the artwork */
.pline { width: 22px; }
.pline.l { left: -24px; } .pline.r { right: -24px; left: auto; }
.pin.l { left: -54px; } .pin.r { right: -54px; }
.anat { column-gap: 90px; }
.legend li { cursor: pointer; }
.legend li > b { border-radius: 0; background: none; color: var(--orange); width: auto; height: auto; font-size: 18px; font-style: italic; }
.legend li.on strong { color: var(--orange); }
.pdot.on { background: #d83870; transform: scale(1.4); }

/* ---- events timeline ---- */
.evtl { position: relative; display: grid; gap: 14px; padding-left: 28px; }
.evtl::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--hair-2); }
.evrow { position: relative; }
.evdot { position: absolute; left: -26px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.evrow.next .evdot { background: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 0 0 6px rgba(235,97,1,.2); }
.evc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; background: var(--surface); box-shadow: 0 10px 24px -20px rgba(28,11,0,.5); color: inherit; }
.evc-img { min-height: 130px; background: #fff center / cover no-repeat; }

.evc-body { display: grid; gap: 5px; align-content: start; padding: 14px 16px 14px 0; }
.evc-date { font: 800 italic 17px/1 var(--f-card); color: var(--orange); text-transform: uppercase; }
.evc-body b { font: 800 italic 22px/1.05 var(--f-card); text-transform: uppercase; }
.evc-place { font-size: 13px; color: var(--text-3); }
.evc-body p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.evc.past { grid-template-columns: 120px minmax(0, 1fr); opacity: .9; }
.evc.past .evc-img { min-height: 110px; }
.evc.past .evc-body b { font-size: 18px; }
@media (max-width: 700px) { .evc, .evc.past { grid-template-columns: minmax(0, 1fr); } .evc-body { padding: 0 14px 14px; } .evc-img { min-height: 150px; } }
.empty.kawarimi { border: 0; background: none; }

.legal h2 { font: 800 italic 22px/1.1 var(--f-card); text-transform: uppercase; margin: 26px 0 8px; }
.legal p { font-size: 15.5px; line-height: 1.65; color: var(--text-2); margin: 0; }
.flegal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.flinks { display: flex; gap: 16px; } .flinks a { color: #d9cfc8; } .flinks a:hover { color: var(--orange-2); }
.btn.danger { background: #c8282d; color: #fff; }
.pdot { font-size: 0; color: #fff; }
@media (max-width: 900px) {
  /* home hero: copy on solid ground, key art whole below */
  .hero { display: flex; flex-direction: column; }
  .hero-copy { order: 1; padding: 26px 18px 22px; }
  .hero-bg { position: relative; order: 2; inset: auto; height: 230px; z-index: 0; background-position: 60% center; background-size: cover; }
  .hero-bg::after { display: none; }

  /* anatomy on phones: numbered dots on the card, legend below, no lines */
  .anat { padding: 0; column-gap: 0; }
  .pin, .pline { display: none; }
  .pdot { width: 20px; height: 20px; font: 800 11px/20px var(--f-card); text-align: center; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
  .pdot.on { background: var(--orange); }
}
@media (max-width: 900px) { .hero-bg { width: 100%; flex: none; } }
.evc-img { background-size: contain; }

/* ---- Hokage TCG wordmark ---- */
.wordmark { display: inline-flex; align-items: center; }
.wordmark .wm-row { display: inline-flex; align-items: center; gap: 8px; }
.wordmark b { display: inline-flex; align-items: center; font: 900 italic 34px/1 var(--f-card); letter-spacing: -.005em; color: inherit; }
.wm-o { flex: none; }
.wm-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 12px 0 10px; background: var(--orange); color: #fff; font: 900 italic 18px/1 var(--f-card); letter-spacing: .04em; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.wm-icon { display: none; width: 40px; height: 40px; background: var(--orange); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); place-items: center; }
.wm-icon svg { width: 26px; height: 26px; }
.wordmark.light b { color: #fff; }
.foot .wordmark b { font-size: 40px; }
@media (max-width: 600px) { .topnav .wordmark .wm-row { display: none; } .topnav .wm-icon { display: grid; } }

/* ---- editorial tier list ---- */

/* ---- editorial decks, deck attachments ---- */
.edecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); gap: 16px; }
.edeck { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; padding: 16px; background: var(--surface); border-top: 2px solid var(--lc); box-shadow: 0 12px 28px -22px rgba(28,11,0,.5); }
.ed-lead .tcg { width: 170px; }
.ed-body { display: grid; gap: 8px; align-content: start; justify-items: start; }
.ed-name { font: 900 italic 28px/1 var(--f-card); text-transform: uppercase; }
.ed-meta { font: 700 14px/1 var(--f-card); color: var(--text-3); }
.ed-body p, .ed-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.dattach { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 12px; margin: 6px 0; background: var(--surface); border: 1px solid var(--hair); }
.da-lead .tcg { width: 90px; }
.da-body { display: grid; gap: 6px; justify-items: start; }
.da-body > b { font: 800 italic 20px/1 var(--f-card); text-transform: uppercase; }
.da-list { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; }
.flag { color: var(--text-3) !important; }
@media (max-width: 700px) { .edecks { grid-template-columns: minmax(0, 1fr); } .edeck { grid-template-columns: 110px minmax(0, 1fr); } .ed-lead .tcg { width: 110px; } }

/* ---- v5.4 precision pass ---- */
/* one rule for news images: 16:9, whole image, spiral-grey ground */

.evc-img { background-color: #eeecf3; }
/* starter without an announced colour: neutral spiral ground */
.starter.gaara { --stc: #e7e5ee; background: repeating-radial-gradient(circle at 80% 30%, #f1f0f5 0 34px, #e5e3ec 34px 68px); color: var(--ink); }
.starter.gaara p { color: var(--text-2); }
/* logo: spiral exactly cap height, tight kerning */
.wm-o { width: .68em; height: .72em; margin: 0 -.01em 0 -.02em; translate: 0 0; }
/* legal: centered reading column */
.legal { max-width: 70ch; margin: 0 auto; }
.page:has(.legal) .pagehead { max-width: 70ch; margin: 0 auto; }
/* footer follows content */
.shell { min-height: 0; }
.page { min-height: calc(100vh - 68px - 120px); }
/* card sheet: tier band in the grade colour */
.tier-band { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: stretch; background: var(--tc); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }

.tb-t { display: grid; gap: 3px; padding: 10px 22px 10px 14px; }
.tb-t b { font: 800 italic 13px/1 var(--f-card); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.tb-t span { font-size: 14px; line-height: 1.4; }
.demo-flag { display: inline-block; margin: 2px 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.demo-tag { font: 700 11px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); border: 1px solid var(--orange); padding: 2px 5px; }
@media (max-width: 900px) { .ch-name { font-size: 40px; } .charhero { grid-template-columns: minmax(0, 1fr) 110px; gap: 14px; } .ch-card .tcg { width: 110px; } }

/* ---- v5.5 ---- */


@media (max-width: 900px) { .topbar-in { padding-right: 18px; } }
/* dark theme: keep image grounds and light panels coherent */
:root[data-mode="dark"] .topnav, :root[data-mode="dark"] .tabbar { background: var(--bg-2); }
:root[data-mode="dark"] .evc-img { background-color: #221e1b; }

:root[data-mode="dark"] .starter.gaara { background: repeating-radial-gradient(circle at 80% 30%, #25201c 0 34px, #1e1a17 34px 68px); color: var(--text); }
:root[data-mode="dark"] .ncard { background: var(--surface); color: var(--text); }
:root[data-mode="dark"] .nc-foot { color: var(--text-3); }
:root[data-mode="dark"] .nc-art { background: repeating-radial-gradient(circle at 70% 40%, #25201c 0 22px, #1e1a17 22px 44px); }
:root[data-mode="dark"] .table { background: repeating-radial-gradient(circle at 50% 40%, #1b1815 0 40px, #161311 40px 80px); box-shadow: inset 0 0 0 2px #3a332d; }
:root[data-mode="dark"] .wordmark { color: #fff; }
:root[data-mode="dark"] .btn-g { background: #f6f2ff; color: var(--ink); --ic2: #fff; }
:root[data-mode="dark"] .tcg { background: repeating-radial-gradient(circle at 40% 55%, #2a2420 0 18px, #221d1a 18px 36px); }
:root[data-mode="dark"] .check, :root[data-mode="dark"] .spec, :root[data-mode="dark"] .cd:not(:first-child), :root[data-mode="dark"] .nc-stats div:not(:first-child), :root[data-mode="dark"] .art-why, :root[data-mode="dark"] .where-i { background: #2a2521; }

:root[data-mode="dark"] .seg button[aria-pressed="true"], :root[data-mode="dark"] .toggle[aria-pressed="true"], :root[data-mode="dark"] .deckchip.on, :root[data-mode="dark"] .tchip[aria-pressed="true"] { background: #f6f2ff; color: var(--ink); }
/* interaction polish */
.btn, .nav, .toggle, .tchip, .deckchip, .where-i, .mention, .link { transition: background .18s ease, color .18s ease, filter .18s ease, transform .2s var(--spring); }
.toggle:hover:not([aria-pressed="true"]), .tchip:hover:not([aria-pressed="true"]) { background: var(--surface-2); color: var(--text); }
.story:focus-visible, .thread-row:focus-visible, .evc:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cell:focus-visible .tcg, .pick:focus-visible .tcg { box-shadow: 0 0 0 3px var(--orange); }
/* sample game scene */

.ms-nav { display: flex; gap: 8px; }
#undo:not([disabled]), #redo:not([disabled]) { background: var(--ink); color: #fff; opacity: 1; }
:root[data-mode="dark"] #undo:not([disabled]), :root[data-mode="dark"] #redo:not([disabled]) { background: #f6f2ff; color: var(--ink); }
.pick .cap { display: grid; gap: 3px; justify-items: start; }

/* ================= 2026-11-12 night pass ================= */
html, body { margin: 0; }

/* ---- tier list: one screen, cards only, reason in a popover ---- */
.tb-line { margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb { display: grid; }
.tb-cells { display: contents; }
.tb-head, .tb-row { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); }
.tb-head span { text-transform: uppercase; }
.tb-l { display: grid; place-items: center; background: var(--tc); color: #fff; font: 900 italic 40px/1 var(--f-card); }
.tb-l.t-B { color: var(--ink); }
.tb-cell { display: flex; overflow-x: auto; scrollbar-width: none; }

.tb-card { all: unset; cursor: pointer; flex: none; display: block; border-radius: 4px; transition: transform .16s ease; }

.tb-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover: hover) { .tb-card:hover { transform: translateY(-3px); } }
.tb-unr { margin-top: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
.tb-unr summary { cursor: pointer; padding: 10px 14px; font: 700 italic 15px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.tb-unr-list { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 2px 14px 14px; font-size: 14px; }
.tpop { position: fixed; z-index: 70; width: 320px; padding: 14px 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 50px -20px rgba(0,0,0,.55), 0 0 0 1px var(--hair-2); display: grid; gap: 8px; justify-items: start; }
.tpop[hidden] { display: none; }
.tp-h { display: flex; gap: 10px; align-items: center; }
.tp-h .tb-l { width: 34px; height: 34px; font-size: 22px; flex: none; }
.tp-h b { font: 800 italic 20px/1.05 var(--f-card); text-transform: uppercase; }
.tpop p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 700px) {
  .tb-line { white-space: normal; font-size: 12.5px; margin-bottom: 10px; }
  .tb-head { display: none; }
  .tb-row { grid-template-columns: 44px minmax(0, 1fr); }

  .tb-cells { display: flex; gap: 8px; align-items: center; padding: 8px 10px; min-height: 112px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); overflow-x: auto; scrollbar-width: none; }

  .tb-cell { display: contents; }

  .tpop { left: 12px !important; right: 12px; top: auto !important; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

/* ---- how to play: one page, top to bottom ---- */
.learn2 { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; align-items: start; }
.ltoc { position: sticky; top: 92px; display: grid; gap: 2px; padding-top: 34px; }
.ltoc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 7px 10px; font-size: 13.5px; line-height: 1.3; color: var(--text-2); border-left: 2px solid var(--hair); }
.ltoc a .num { font: 800 italic 15px/1 var(--f-card); color: var(--text-3); }
.ltoc a:hover, .ltoc a[aria-current] { color: var(--text); border-left-color: var(--orange); }
.ltoc a[aria-current] .num { color: var(--orange); }
.lflow { min-width: 0; }
.lflow .chap { padding: 34px 0 26px; border-bottom: 1px solid var(--hair); }
.lflow .chap:last-child { border-bottom: 0; }
.lflow .chap-t { font-size: clamp(28px, 2.6vw, 38px); }
.lead-p { margin: 0 0 22px; max-width: 68ch; font-size: 16.5px; line-height: 1.55; color: var(--text-2); }
.lflow .table { max-width: none; grid-template-columns: 160px minmax(0, 1fr) 120px 120px; padding: 26px; }
.lflow .z-leader .tcg { width: 150px; }
.lflow .zrow > * { width: 130px; } .lflow .zrow .slot { width: 130px; }
.lflow .z-chakra .crow .tcg { width: 76px; }
.lflow .z-summon .tcg { width: 110px; }
/* the turn scene */
.tscene { display: grid; gap: 16px; }
.ts-board { display: grid; gap: 0; padding: 22px 26px; background: repeating-radial-gradient(circle at 50% 50%, #fff 0 46px, #f1edf8 46px 92px); box-shadow: inset 0 0 0 2px var(--ink); }
.ts-side { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 22px; align-items: center; min-height: 196px; }
.ts-side.opp { grid-template-columns: 120px minmax(0, 1fr) auto; min-height: 168px; opacity: .92; }
.ts-who { position: absolute; left: 0; top: -6px; font: 800 italic 13px/1 var(--f-card); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.ts-side.you .ts-who { top: auto; bottom: -6px; }
.ts-slot { position: relative; display: grid; place-items: center; transition: outline-color .2s ease; outline: 3px solid transparent; outline-offset: 6px; }
.ts-slot.lead .tcg { width: 130px; } .opp .ts-slot.lead .tcg { width: 104px; }
.ts-slot.char .tcg { width: 124px; } .opp .ts-slot.char .tcg { width: 110px; }
.ts-slot.summon .tcg { width: 92px; } .ts-slot.summon.sm .tcg { width: 64px; }
.ts-slot .tcg.rested { rotate: 90deg; }
.ts-slot.char:has(.rested) { margin: 0 24px; }
.ts-slot.lead:has(.rested) { margin: 0 20px; }
.ts-slot.hl, .ts-chakra.hl { outline: 3px solid var(--orange); outline-offset: 6px; }
.ts-slot.stopped::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 64px/1 var(--f-card); color: var(--orange); text-shadow: 0 2px 0 #fff; }
.ts-slot.stopped .tcg { filter: grayscale(.7) brightness(.9); }
.ts-row { display: flex; gap: 18px; align-items: center; justify-content: center; min-height: 100%; }
.ts-empty { width: 124px; aspect-ratio: 63/88; border: 2px dashed rgba(28,11,0,.22); border-radius: 4px; }
.opp .ts-empty { width: 110px; }
.ts-res { display: flex; gap: 16px; align-items: center; }
.ts-chakra { display: flex; gap: 6px; outline: 3px solid transparent; outline-offset: 6px; }
.ts-chakra .tcg { width: 62px; }
.ts-chakra.sm .tcg { width: 44px; }
.ts-mid { height: 40px; display: grid; place-items: center; border-top: 2px dashed rgba(28,11,0,.18); margin: 8px 0; }
.ts-arrow { padding: 6px 14px; background: var(--orange); color: #fff; font: 800 italic 15px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); translate: 0 -20px; }
.ts-arrow.up::before { content: "↑ "; } .ts-arrow.down::before { content: "↓ "; }
.ts-arrow.stop { background: var(--ink); }
.ts-cap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ts-cap p { margin: 0; font-size: 16.5px; line-height: 1.5; max-width: 70ch; }
:root[data-mode="dark"] .ts-board { background: repeating-radial-gradient(circle at 50% 50%, #1a1715 0 46px, #15120f 46px 92px); box-shadow: inset 0 0 0 2px #3a332d; }
:root[data-mode="dark"] .ts-empty { border-color: rgba(255,255,255,.18); }
:root[data-mode="dark"] .ts-mid { border-top-color: rgba(255,255,255,.14); }
:root[data-mode="dark"] .ts-slot.stopped::after { text-shadow: 0 2px 0 #000; }
@media (max-width: 1100px) { .learn2 { grid-template-columns: minmax(0, 1fr); } .ltoc { display: none; } }
@media (max-width: 700px) {
  .lead-p { font-size: 15px; }
  .lflow .table { grid-template-columns: 1fr 1fr; padding: 14px; }
  .lflow .z-leader .tcg { width: 110px; }
  .lflow .zrow > *, .lflow .zrow .slot { width: 92px; }
  .lflow .z-chakra .crow .tcg { width: 52px; }
  .lflow .z-summon .tcg { width: 80px; }
  .ts-board { padding: 14px 10px; }
  .ts-side, .ts-side.opp { grid-template-columns: 78px minmax(0, 1fr); grid-template-areas: "lead row" "res res"; gap: 10px; min-height: 0; padding: 14px 0 4px; }
  .ts-side.you { padding: 4px 0 14px; }
  .ts-side > .lead { grid-area: lead; } .ts-side > .ts-row { grid-area: row; } .ts-side > .ts-res { grid-area: res; justify-content: center; }
  .ts-slot.lead .tcg, .opp .ts-slot.lead .tcg { width: 72px; }
  .ts-slot.char .tcg, .opp .ts-slot.char .tcg { width: 84px; }
  .ts-empty, .opp .ts-empty { width: 84px; }
  .ts-row { gap: 10px; }
  .ts-slot.char:has(.rested) { margin: 0 16px; } .ts-slot.lead:has(.rested) { margin: 0 12px; }
  .ts-chakra .tcg { width: 38px; } .ts-chakra.sm .tcg { width: 30px; }
  .ts-slot.summon .tcg { width: 50px; } .ts-slot.summon.sm .tcg { width: 38px; }
  .ts-who { top: 0; } .ts-side.you .ts-who { bottom: 0; }
  .ts-cap { grid-template-columns: auto minmax(0, 1fr); } .ts-cap .ms-nav { grid-column: 1 / -1; justify-content: space-between; }
  .ts-cap p { font-size: 15px; }
}
.lflow .anat { grid-template-columns: 280px minmax(0, 1fr); column-gap: 100px; row-gap: 40px; padding: 0 0 0 70px; }
.lflow .anat-card { width: 280px; }
.lflow .steps { flex-wrap: nowrap; }
.lflow .step { width: auto; flex: 1 1 0; }
@media (max-width: 700px) { .lflow .anat { grid-template-columns: minmax(0, 1fr); padding: 0 50px; } .lflow .anat-card { width: min(240px, 100%); } .lflow .steps { flex-wrap: wrap; } .lflow .step { flex-basis: 100%; } }

/* ---- quick search results ---- */
.sres { position: fixed; z-index: 75; max-height: min(70vh, 520px); overflow: auto; display: grid; background: var(--surface); color: var(--text); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6), 0 0 0 1px var(--hair-2); border-top: 3px solid var(--orange); }
.sr-item { all: unset; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 14px; }
.sr-item + .sr-item { border-top: 1px solid var(--hair); }
.sr-item:hover, .sr-item.on, .sr-all:hover, .sr-all.on { background: var(--surface-2); }
.sr-thumb .tcg { width: 40px; box-shadow: none; }
.sr-txt { display: grid; gap: 2px; min-width: 0; }
.sr-txt b { font: 700 italic 17px/1.1 var(--f-card); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-txt .dim { font-size: 12.5px; }
.sr-none { margin: 0; padding: 14px; color: var(--text-3); font-size: 14px; }
.sr-all { all: unset; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hair-2); font: 700 italic 15px/1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; color: var(--orange); }
.sr-all svg.ni { width: 16px; height: 16px; }

/* ---- card without image: frame in its colour + official back + real data only ---- */
.tcg.ph { background: var(--fc); container-type: inline-size; }
.tcg.ph .back { inset: 4.5% 5.5% 19% 5.5%; border-radius: 2.4% / 1.8%; }
.tcg.ph .back img { width: 64%; }
.ph-band { position: absolute; left: 0; right: 0; bottom: 0; height: 19%; padding: 0 7%; display: grid; align-content: center; gap: 1cqw; color: #fff; }
.ph-band b { font: 700 italic 9.5cqw/1 var(--f-card); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-band span { font: 600 5.4cqw/1 var(--f-card); letter-spacing: .06em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-tag { position: absolute; z-index: 2; left: 50%; top: 66%; translate: -50% 0; max-width: 84%; padding: 1.6cqw 3cqw; background: rgba(28,11,0,.82); color: #fff; font: 600 5.2cqw/1.1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; text-align: center; }
.thumb .tcg.ph .ph-band, .thumb .tcg.ph .ph-tag, .sr-thumb .tcg.ph .ph-band, .sr-thumb .tcg.ph .ph-tag, .crow .ph-tag { display: none; }
.thumb .tcg.ph .back, .sr-thumb .tcg.ph .back { inset: 6%; }
.tcg.ph[style*="#1c0b00"] .back { background: repeating-radial-gradient(circle at 40% 55%, #222 0 9cqw, #111 9cqw 18cqw); }

/* ---- shop storefront ---- */
.shp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-bottom: 16px; }
.shp-note { margin: 0; font-size: 14px; color: var(--text-2); }
.shp-grid { display: grid; gap: 18px; }
.shp-grid.launch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shp-grid.events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shp { display: grid; grid-template-rows: auto 1fr; background: var(--surface); box-shadow: 0 0 0 1px var(--hair), 0 18px 36px -28px rgba(0,0,0,.5); overflow: hidden; }
.shp-art { display: grid; place-items: center; overflow: hidden; background: repeating-radial-gradient(circle at 40% 55%, #f4f2f8 0 30px, #eae7f1 30px 60px); }
.shp.big .shp-art { aspect-ratio: 186 / 264; }
.shp-art.sa-st img { width: 100%; height: 100%; object-fit: cover; object-position: center top; max-width: 372px; }
.shp-art.sa-st.t-red { background: var(--red); } .shp-art.sa-st.t-blue { background: var(--blue); }

.shp-art.sa-back .tcg { width: 100%; }

 .shp-art.sa-card img { max-height: 100%; aspect-ratio: 63/88; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
.shp-art.sa-wide img { width: 100%; height: 100%; object-fit: cover; }
.shp-body { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 16px 18px 18px; }
.shp-name { font: 800 italic 24px/1.02 var(--f-card); text-transform: uppercase; }
.shp-when { font: 700 14px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.shp-price { font-size: 14.5px; font-weight: 600; }
:root[data-mode="dark"] .shp-art { background: repeating-radial-gradient(circle at 40% 55%, #1c1815 0 30px, #171310 30px 60px); }
:root[data-mode="dark"] .shp-art.sa-wide { background: #f2f1f4; }
@media (max-width: 1100px) { .shp-grid.launch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .shp-grid.launch, .shp-grid.events { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .shp-grid.events .shp:last-child { grid-column: 1 / -1; } .shp-body { padding: 12px; } .shp-name { font-size: 18px; } }
.shp-grid.events .shp-art { aspect-ratio: auto; height: 250px; }
.shp-art.sa-card { padding: 0; } .shp-art.sa-card img { height: 214px; width: auto; max-width: none; object-fit: contain; }
@media (max-width: 700px) { .shp-grid.events .shp-art { height: 170px; } .shp-art.sa-card img { height: 146px; } }

/* ---- news thumbnails: own image only, no key-art fallback, no letterbox bands ---- */
.story.big.tall { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) { .story.big.tall { grid-template-columns: minmax(0, 1fr); } }

/* ---- events: launch banner contained; timeline visible in dark ---- */
.evc-img.fit { background-size: contain !important; background-repeat: no-repeat; background-position: center; }
:root[data-mode="dark"] .evtl::before { background: rgba(255,255,255,.28); }
:root[data-mode="dark"] .evdot { background: var(--bg); box-shadow: 0 0 0 2px var(--text-3); }
:root[data-mode="dark"] .evrow.next .evdot { background: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 0 0 6px rgba(235,97,1,.25); }

/* ---- builder deck panel: title readable, no key art when there is no Leader ---- */
.deck-hero .bgimg.noimg { background: repeating-radial-gradient(circle at 78% 40%, #ffffff 0 22px, #eceaf1 22px 44px); filter: none; }
:root[data-mode="dark"] .deck-hero .bgimg.noimg { background: repeating-radial-gradient(circle at 78% 40%, #221d1a 0 22px, #1b1714 22px 44px); }
.deck-hero::after { background: linear-gradient(0deg, var(--surface) 28%, color-mix(in srgb, var(--surface) 55%, transparent) 55%, transparent 90%); }
.deck-hero input, #dname { color: var(--text); font-family: var(--f-card); font-weight: 800; font-size: 30px; text-transform: uppercase; letter-spacing: .01em; }
.deck-hero input::placeholder { color: var(--text); opacity: .9; }

/* ---- builder: leader choice aligned to the page grid ---- */
.b3.noleader .bpool .grid { justify-content: start; }
.b3.noleader .pickhint { justify-content: start; }
:root[data-mode="dark"] .deckchip.on .num { color: #5b4f60; }
.acc { align-items: start; align-content: start; }
.acc-form > .btn[data-signin] { justify-self: start; width: auto; min-width: 220px; max-width: 320px; }

/* result count inside the Cards search field, only while a query is active */
.field .fcount{margin-left:auto;padding-left:8px;font:600 13px var(--f-card,inherit);color:var(--text-3);white-space:nowrap}
.field .fcount:empty{display:none}

/* home: companion apps coming soon (no links, no form) */

/* guides, FAQ, about texts (SEO content pages) */
.foot-in { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) auto; gap: 32px; }
@media (max-width: 1100px) { .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-list { display: grid; }
.g-tile { display: grid; align-content: start; gap: 10px; padding: 26px 24px 24px; background: var(--bg); color: var(--text); transition: background .2s; }
.g-tile:hover { background: var(--surface); }
.g-tile .num { font: 800 italic 15px/1 var(--f-card); color: var(--orange); letter-spacing: .08em; }
.g-tile h2 { margin: 0; font: 800 italic 26px/1.05 var(--f-card); text-transform: uppercase; text-wrap: balance; }
.g-tile p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.g-tile .link { margin-top: 6px; }
.guide-art .art-body h2 { margin: 34px 0 10px; font: 800 italic 28px/1.05 var(--f-card); text-transform: uppercase; scroll-margin-top: 90px; }
.g-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.g-toc a { padding: 7px 12px; border: 1px solid var(--hair-2); font-size: 13.5px; color: var(--text-2); }
.g-toc a:hover { border-color: var(--orange); color: var(--text); }
.g-cards { margin: 30px 0; display: grid; gap: 12px; }
.g-cards .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.art-src { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.art-src b { font: 700 italic 14px/1 var(--f-card); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.g-more { display: grid; gap: 2px; margin: 26px 0 10px; }
.g-more .label { margin-bottom: 8px; }
.g-more a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); font: 700 italic 19px/1.1 var(--f-card); text-transform: uppercase; color: var(--text); }
.g-more a:hover { color: var(--orange); }
.faq { display: grid; border-top: 1px solid var(--hair); max-width: 900px; }
.faq-i { border-bottom: 1px solid var(--hair); }
.faq-i summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary h3 { margin: 0; font: 700 18px/1.3 var(--f-ui, inherit); }
.faq-i summary svg { flex: none; width: 18px; height: 18px; color: var(--orange); transition: transform .2s; }
.faq-i[open] summary svg { transform: rotate(45deg); }
.faq-i p { margin: 0 0 20px; max-width: 70ch; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.c-about { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.ch-about { margin: 14px 0 0; max-width: 56ch; color: var(--text-2); font-size: 16px; line-height: 1.6; }

/* tier list v3: open rows, bigger cards, empty tiers hidden */
.tb { gap: 0; border-top: 1px solid var(--hair); }
.tb-head { border-bottom: 1px solid var(--hair); padding: 10px 0 8px; gap: 0; }
.tb-head span { font: 800 italic 16px/1 var(--f-card); letter-spacing: .12em; color: var(--text-2); padding: 0 20px; display: flex; align-items: center; gap: 8px; }
.tb-head span:not(:first-child)::before { content: ""; width: 4px; height: 14px; background: var(--orange); transform: skewX(-14deg); }
.tb-row { gap: 0; border-bottom: 1px solid var(--hair); }
.tb-l { font-size: 46px; }
.tb-cell { background: none; box-shadow: none; min-height: 0; padding: 18px 20px; gap: 14px; align-items: center; }
.tb-cell + .tb-cell { border-left: 1px solid var(--hair); }
.tb-card, .tb-card .tcg { width: 124px; }
@media (max-width: 760px) {
  .tb-cells { background: none; box-shadow: none; min-height: 0; padding: 12px; }
  .tb-cell + .tb-cell { border-left: 0; }
  .tb-card, .tb-card .tcg { width: 92px; }
}

/* shop: booster without official art gets a full-bleed orange spiral, same weight as the starters */
.shp-art.sa-back, :root[data-mode="dark"] .shp-art.sa-back { background: repeating-radial-gradient(circle at 50% 46%, #eb6101 0 34px, #d65600 34px 68px); padding: 16% 20%; }
.shp-art.sa-back .tcg { transform: rotate(-6deg); box-shadow: 0 26px 40px -18px rgba(40,12,0,.6); border-radius: 10px; }

/* headings: one family (Barlow Condensed italic) across the guide */
.lflow .chap-t, .chap-t { font: 800 italic clamp(30px, 2.8vw, 42px)/1.02 var(--f-card); text-transform: uppercase; letter-spacing: .005em; }

/* page titles in dark: orange notch + light text, no white slab next to the cards */
:root[data-mode="dark"] .ph-title { background: none; color: var(--text); clip-path: none; box-shadow: none; padding: 4px 0 4px 22px; position: relative; font-size: clamp(36px, 3.8vw, 52px); }
:root[data-mode="dark"] .ph-title::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 8px; background: var(--orange); transform: skewX(-10deg); }
@media (min-width: 761px) { .tb-cell { padding: 10px 20px; } .tb-card, .tb-card .tcg { width: 118px; } .page:has(.tb) .pagehead { padding-top: 0; } }
.g-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: none; border: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.g-tile { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
@media (max-width: 900px) { .g-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g-list { grid-template-columns: minmax(0, 1fr); } }

/* ==== b4 sets: expansions-first collection, set/sort selects, list view, progressive grids ==== */
.xdd { position: relative; flex: none; }
.xdd-b { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 30px 0 18px; border: 0; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; max-width: 100%; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); transition: background .15s; }
.xdd-b:hover { background: var(--surface-2); }
.xdd-b:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--orange); background: var(--surface-2); }
.xdd-l { font: 700 11px/1 var(--f-card); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.xdd-b b { font: 700 italic 15px/1 var(--f-card); letter-spacing: .04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xdd-c { position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease); }
.xdd.open .xdd-b { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--orange); }
.xdd.open .xdd-c { transform: translateY(-20%) rotate(-135deg); }
.xdd-p { position: absolute; z-index: 60; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: min(340px, calc(100vw - 32px)); max-height: 340px; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none; background: #171412; color: #f7f1ec; border-top: 2px solid var(--orange); box-shadow: 0 24px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); scrollbar-width: thin; }
.xdd.up .xdd-p { top: auto; bottom: calc(100% + 6px); border-top: 0; border-bottom: 2px solid var(--orange); }
.xdd.right .xdd-p { left: auto; right: 0; }
.xdd-p li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 16px 10px 20px; font: 700 italic 15px/1.1 var(--f-card); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; outline: none; color: #d9cfc8; }
.xdd-p li i { font: 600 12px/1 var(--f-card); font-style: normal; letter-spacing: .06em; color: #8a7f76; }
.xdd-p li:hover, .xdd-p li:focus { background: rgba(255,255,255,.07); color: #fff; }
.xdd-p li[aria-selected="true"] { color: #fff; }
.xdd-p li[aria-selected="true"]::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 4px; background: var(--orange); transform: skewX(-12deg); }
.xcode { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; background: var(--orange); color: #fff; font: 800 italic 13px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); justify-self: start; }
.xline { position: relative; display: block; height: 2px; background: var(--hair-2); overflow: hidden; }
.xline i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--orange); transition: width .5s var(--ease); }
.gsep { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
.gsep:not(:first-child) { margin-top: 22px; }
.gsep b { font: 800 italic 24px/1 var(--f-card); text-transform: uppercase; letter-spacing: .01em; }
.gsep .num { margin-left: auto; font-size: 16px; }
.prog-sent { height: 1px; }

/* summary: rank, distinct, copies, missions in one hairline strip */
.xsum { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); margin: 16px 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.xsum > * { display: grid; align-content: center; gap: 6px; padding: 14px 24px; min-width: 0; }
.xsum > :first-child { padding-left: 0; }
.xsum > * + * { border-left: 1px solid var(--hair); }
.xs-rank i { font: 700 11px/1 var(--f-card); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.xs-rank b, .xs-stat b { font: 800 italic 30px/1 var(--f-card); text-transform: uppercase; }
.xs-stat b small, .xr-sum b small { font-size: .6em; color: var(--text-3); }
.xs-stat > span:not(.xline) { font-size: 12.5px; color: var(--text-2); }
.xs-stat .xline { width: 132px; }
.xs-ms { display: flex !important; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.xm { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--f-card); letter-spacing: .03em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.xm b { width: 22px; height: 22px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); font: 900 italic 13px/1 var(--f-card); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.xm i { font-style: normal; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.xm.done { color: var(--text); } .xm.done b { background: var(--orange); color: #fff; }

/* tools */
.xtools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 10px; }
.xtools .field { flex: 1 1 240px; max-width: 340px; }
.xtools .field.xqa { flex: 0 1 220px; }
.xqa b { font: 900 italic 22px/1 var(--f-card); color: var(--orange); }
.xqa input { font-family: var(--f-card); font-size: 16px; font-weight: 600; letter-spacing: .04em; }
.xact { gap: 8px; margin-left: auto; flex-wrap: wrap; }
.xview button { height: 32px; font: 700 italic 14px/1 var(--f-card); letter-spacing: .05em; text-transform: uppercase; }
.xcount { margin: 0 0 12px; font-size: 13px; color: var(--text-3); }
.xcount b { font: 800 italic 18px/1 var(--f-card); color: var(--text); margin-right: 2px; }

/* expansions list */
.xsets { margin-top: 26px; }
.xsets > .label { margin: 0 0 10px; }
.xlist { border-top: 1px solid var(--hair); }
.xrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(150px, 230px) 24px; gap: 22px; align-items: center; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; transition: background .2s var(--ease); }
a.xrow:hover { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--orange) 9%, transparent)); }
a.xrow:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.xr-art { width: 52px; }
.xr-art .tcg { width: 52px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
.xr-prod { display: block; width: 100%; aspect-ratio: 63 / 88; object-fit: contain; }
.xr-txt { display: grid; gap: 5px; justify-items: start; min-width: 0; }
.xr-txt b { max-width: 100%; font: 800 italic 26px/1.02 var(--f-card); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-meta { font-size: 13px; color: var(--text-3); }
.xr-sum { display: grid; gap: 8px; }
.xr-sum b { justify-self: end; font: 800 italic 24px/1 var(--f-card); }
.xr-go { display: grid; place-items: center; color: var(--text-3); transition: transform .2s var(--ease), color .2s; }
.xr-go svg { width: 18px; height: 18px; }
a.xrow:hover .xr-go { color: var(--orange); transform: translateX(3px); }
.xrow.soon { cursor: default; }
.xrow.soon .xr-art { opacity: .8; }
.xrow.soon .xr-txt b { color: var(--text-2); }
.xrow.soon .xcode { background: var(--surface-2); color: var(--text-2); }
.xr-soon { grid-column: 3 / 5; justify-self: end; font: 700 italic 14px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

/* inside a set */
.xback { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font: 700 italic 15px/1 var(--f-card); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-decoration: none; }
.xback svg { width: 16px; height: 16px; transform: rotate(180deg); color: var(--orange); }
.xback:hover { color: var(--text); }
.xsethead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 260px); grid-template-areas: "code sum" "name sum" "meta sum"; gap: 8px 32px; align-items: end; margin-top: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.xsethead .xcode { grid-area: code; }
.xsethead .h2 { grid-area: name; margin: 0; font-size: clamp(30px, 3.2vw, 44px); line-height: .95; }
.xsethead .xr-meta { grid-area: meta; }
.xsethead .xr-sum { grid-area: sum; align-self: end; }
.xsethead .xr-sum b { font-size: 30px; }
.xfilters { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 6px 0 16px; margin-bottom: 22px; border-bottom: 1px solid var(--hair); }
.xf-g { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xf-g > .label { flex: none; }
.xf-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.xchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border: 0; background: var(--surface); color: var(--text-2); font: 700 italic 14px/1 var(--f-card); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: pointer; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: background .15s, color .15s; }
.xchip:hover { color: var(--text); background: var(--surface-2); }
.xchip[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.xsoon { justify-items: center; }

.cslot .cname i { margin-left: 6px; font: 600 12px/1 var(--f-card); font-style: normal; letter-spacing: .04em; color: var(--text-3); }
.cslot .cq[hidden] { display: none; }

/* compact list view */
.clist { border-top: 1px solid var(--hair); }
.crow { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px 124px; gap: 14px; align-items: center; min-height: 50px; padding-left: 16px; border-bottom: 1px solid var(--hair); }
.crow::before { content: ""; position: absolute; left: 2px; top: 12px; bottom: 12px; width: 4px; background: var(--lc); transform: skewX(-12deg); opacity: .35; }
.crow.has::before { opacity: 1; }
.crow:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.cr-num { font: 700 15px/1 var(--f-card); letter-spacing: .04em; color: var(--text-2); }
.cr-name { all: unset; display: flex; align-items: baseline; gap: 10px; min-width: 0; cursor: pointer; }
.cr-name b { font: 700 italic 18px/1.1 var(--f-card); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-name span { flex: none; font-size: 12px; color: var(--text-3); }
.cr-name:hover b, .cr-name:focus-visible b { color: var(--orange); }
.crow:not(.has) .cr-name b { color: var(--text-2); }
.cr-rar { font: 800 italic 15px/1 var(--f-card); color: var(--text-2); }
.cr-qty { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; justify-items: center; }
.cr-qty button { width: 34px; height: 30px; border: 0; background: var(--surface); color: var(--text); font: 800 18px/1 var(--f-card); cursor: pointer; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); transition: background .15s, color .15s; }
.cr-qty button:hover { background: var(--orange); color: #fff; }
.cr-qty b { font: 800 italic 20px/1 var(--f-card); color: var(--text-3); }
.crow.has .cr-qty b { color: var(--orange); }
.crow.pop .cr-qty b { animation: cpop .35s var(--spring); }
.bf-x { display: grid; gap: 6px; }
.bf-x .xdd, .bf-x .xdd-b { width: 100%; }
.bf-x .xdd-b { justify-content: flex-start; }
.bf-x .xdd-l { width: 74px; flex: none; text-align: left; }
.bf-x .xdd-p { width: 100%; min-width: 0; max-width: 100%; }

.toolbar .field { flex: 1 1 220px; max-width: 300px; }
@media (max-width: 900px) {
  .toolbar { position: relative; z-index: 20; flex-wrap: wrap; overflow: visible; }
  .toolbar .field { flex: 1 1 100%; max-width: none; }
  .toolbar .xdd { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .toolbar .xdd-b { width: 100%; }
  .toolbar .seg { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .toolbar .seg::-webkit-scrollbar { display: none; }
  .xsum { grid-template-columns: auto auto minmax(0, 1fr); }
  .xs-ms { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--hair); }
}
@media (max-width: 600px) {
  .xact .xdd { flex: 1 1 auto; min-width: 0; }
  .xact .xdd-b { width: 100%; }
  .xsum > * { padding: 12px 14px; }
  .xs-rank b, .xs-stat b { font-size: 24px; }
  .xs-stat .xline { width: 100%; }
  .xs-ms { gap: 8px 14px; }
  .xtools .field, .xtools .field.xqa { flex: 1 1 100%; max-width: none; }
  .xact { margin-left: 0; width: 100%; }
  .xrow { grid-template-columns: 40px minmax(0, 1fr) 84px; gap: 14px; }
  .xr-art, .xr-art .tcg { width: 40px; }
  .xr-txt b { font-size: 21px; white-space: normal; }
  .xr-go { display: none; }
  .xr-sum b { font-size: 20px; }
  .xr-soon { grid-column: 2 / -1; justify-self: start; font-size: 12.5px; margin-top: -6px; }
  .xsethead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "code" "name" "meta" "sum"; }
  .xfilters { gap: 10px; }
  .xf-g { width: 100%; }
  .xf-g > .label { width: 64px; }
  .xf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .xf-chips::-webkit-scrollbar { display: none; }
  .crow { grid-template-columns: 62px minmax(0, 1fr) 28px 112px; gap: 8px; padding-left: 12px; }
  .cr-name span { display: none; }
  .cr-name b { font-size: 16px; }
  .gsep b { font-size: 20px; }
}

/* not found */
.nf { min-height: 60vh; display: grid; place-items: center; }
.nf-t { margin: 6px 0 0; font: 900 italic clamp(34px, 4vw, 54px)/1 var(--f-card); text-transform: uppercase; }

/* orange follow + app band on top of the footer, on every page (after the official site) */
.fband { display: grid; grid-template-columns: 1fr 1fr; margin: -90px calc(-1 * clamp(16px, 3vw, 40px)) 64px; padding: 78px clamp(16px, 3vw, 40px) 34px; background: var(--orange); color: #1c0b00; }
.fb-half { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 6px 28px; min-width: 0; }
.fb-half + .fb-half { border-left: 2px solid rgba(28,11,0,.35); }
.fband h2 { margin: 0; font: 800 italic clamp(22px, 2vw, 30px)/1.05 var(--f-card); text-transform: uppercase; color: #1c0b00; }
.fb-socs { display: flex; gap: 12px; }
.fb-soc { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #1c0b00; color: #fff; transition: transform .2s ease-out, background .2s ease-out; }
.fb-soc svg { width: 24px; height: 24px; }
a.fb-soc:hover { transform: translateY(-3px); }
.fb-soc.soon { opacity: .55; cursor: default; }
.fb-note { font: 800 italic 12px/1 var(--f-card); letter-spacing: .1em; text-transform: uppercase; background: #1c0b00; color: #fff; padding: 5px 9px; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.fb-app .wm-icon { width: 58px; height: 58px; display: grid; place-items: center; background: #1c0b00; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.fb-app .wm-icon svg { width: 34px; height: 34px; }
.fb-copy { display: grid; gap: 4px; max-width: 260px; }
.fb-copy p { margin: 0; font-size: 14px; color: rgba(28,11,0,.8); }
.fb-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-store { display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 14px 0 12px; background: #1c0b00; color: #fff; border-radius: 8px; }
.fb-store svg { width: 22px; height: 22px; flex: none; }
.fb-store span { display: grid; line-height: 1.1; }
.fb-store small { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #cbbfb6; }
.fb-store b { font: 700 16px "Poppins", sans-serif; }
.fb-store em { margin-left: 4px; font: 800 italic 11px/1 var(--f-card); letter-spacing: .08em; text-transform: uppercase; color: #1c0b00; background: var(--orange); padding: 4px 7px; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
@media (max-width: 900px) {
  .fband { grid-template-columns: minmax(0, 1fr); padding-top: 64px; }
  .fb-half { justify-content: flex-start; padding: 16px 0; }
  .fb-half + .fb-half { border-left: 0; border-top: 2px solid rgba(28,11,0,.35); }
  .fb-copy { max-width: none; flex: 1 1 200px; }
}

/* ---- motion & shadow pass (after naruto-cardgame.com): 150-250ms ease-out, transform/opacity only ---- */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }
html { overflow-x: clip; }
:root { --shadow-card: 0 12px 26px -12px rgba(28, 11, 0, .38), 0 0 15px rgba(28, 11, 0, .12); }
:root[data-mode="dark"] { --shadow-card: 0 16px 32px -14px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .35); }
button.cell, .rail-item { transition: translate .2s var(--ease-out); }
@media (hover: hover) { button.cell:hover, .rail-item:hover { translate: 0 -5px; } }
.grid > .cell { animation: cellIn .32s var(--ease-out) both; }
.grid > .cell:nth-child(2) { animation-delay: 30ms; } .grid > .cell:nth-child(3) { animation-delay: 60ms; } .grid > .cell:nth-child(4) { animation-delay: 90ms; }
.grid > .cell:nth-child(5) { animation-delay: 120ms; } .grid > .cell:nth-child(6) { animation-delay: 150ms; } .grid > .cell:nth-child(7) { animation-delay: 180ms; }
.grid > .cell:nth-child(8) { animation-delay: 210ms; } .grid > .cell:nth-child(9) { animation-delay: 240ms; } .grid > .cell:nth-child(10) { animation-delay: 270ms; }
.grid > .cell:nth-child(11) { animation-delay: 300ms; } .grid > .cell:nth-child(12) { animation-delay: 330ms; }
@keyframes cellIn { from { opacity: 0; translate: 0 10px; } }
.rv { opacity: 0; translate: 0 12px; }
.rv.rv-in { opacity: 1; translate: 0 0; transition: opacity .45s var(--ease-out), translate .45s var(--ease-out); }
/* oblique section cut on home (official clip-path) */
.sec.slant { position: relative; isolation: isolate; padding-top: clamp(56px, 7vw, 96px); padding-bottom: 20px; }
.sec.slant::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: -24px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--bg-2); clip-path: polygon(0 min(6.4vw, 72px), 100% 0, 100% calc(100% - min(3vw, 36px)), 0 100%); }
.sec.slant::after { content: ""; position: absolute; z-index: -1; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: min(6.4vw, 72px); background: var(--orange); clip-path: polygon(0 100%, 100% 0, 100% 5px, 0 calc(100% + 5px)); opacity: .9; }
/* wishlist: dedicated talisman icon */
.wish .ni { width: 18px; height: 18px; filter: grayscale(1); opacity: .6; transition: filter .2s var(--ease-out), opacity .2s var(--ease-out); }
.wish[aria-pressed="true"] { background: var(--surface); border-color: var(--orange); }
.wish[aria-pressed="true"] .ni { filter: none; opacity: 1; }
@media (hover: hover) { .wish:hover .ni { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .grid > .cell { animation: none; } button.cell:hover, .rail-item:hover { translate: none; } .rv { opacity: 1; translate: none; } }
.wish svg.ni { fill: currentColor; stroke: none; width: 18px; height: 18px; }

/* hero: full bleed with the official oblique bottom cut; copy stays on the page grid */
.hero { margin: 0 calc(50% - 50vw); padding: 0 calc(50vw - 50%) min(5vw, 60px); border: 0; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(5vw, 60px)), 0 100%); min-height: 600px; }
.hero-copy { padding-left: 0; }
@media (max-width: 760px) { .hero { min-height: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); } .hero-copy { padding-left: 0; padding-right: 0; } }
/* footer band: both halves centred vertically */
.fband { align-items: center; }
.fb-half { align-content: center; align-self: stretch; }
/* collection: upcoming sets in one compact line, sets with cards first */
.xsoon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--hair); color: var(--text-3); font-size: 14px; }
.xsoon b { font: 800 italic 14px/1 var(--f-card); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.xsoon .xcode { font-size: 12px; }
.hero { margin-top: 0; }
.hero-bg::after { background: linear-gradient(90deg, var(--hero-bg) 16%, color-mix(in srgb, var(--hero-bg) 82%, transparent) 30%, color-mix(in srgb, var(--hero-bg) 45%, transparent) 46%, transparent 64%); }
@media (max-width: 900px) {
  .hero .hero-bg { height: 260px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28%); mask-image: linear-gradient(180deg, transparent 0, #000 28%); }
}
@media (max-width: 900px) { .hero .hero-bg { width: 100vw; margin: 0 0 0 calc(50% - 50vw); flex: none; align-self: flex-start; } }
@media (max-width: 760px) { .hero { padding-bottom: 0; } }

/* forum: opening threads by the site team */
.byline.team b { color: var(--orange); }
.team-badge { font: 800 italic 11px/1 var(--f-card) !important; letter-spacing: .1em; text-transform: uppercase; color: #fff !important; background: var(--orange); padding: 3px 7px; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }

/* news thumbnails: one spiral surface in both themes (as .shp-art), the official image whole and centred, never cropped */
.story .pic, .art-fig { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 10; background: repeating-radial-gradient(circle at 40% 55%, #f4f2f8 0 30px, #eae7f1 30px 60px); box-shadow: none; }
:root[data-mode="dark"] .story .pic, :root[data-mode="dark"] .art-fig { background: repeating-radial-gradient(circle at 40% 55%, #1c1815 0 30px, #171310 30px 60px); }
.story .pic img, .art-fig img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); max-width: none; max-height: none; object-fit: contain; }
.story.big .pic { aspect-ratio: auto; min-height: 340px; }
.story.big .pic img { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); }
.art-fig { aspect-ratio: 16 / 9; margin: 22px 0; }
@media (max-width: 900px) { .story.big .pic { aspect-ratio: 16 / 10; min-height: 0; } .story.big .pic img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); } }
/* card captions: name may take two lines, never cut mid-word; wishlist icon without a box */
.cell .cap b, .cell .cap .charlink b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wish, .wish[aria-pressed="true"] { border-color: transparent; background: transparent; }
/* one search per screen: pages with their own search field hide the header one */
:root[data-page="home"] .topnav .side-search, :root[data-page="cards"] .topnav .side-search, :root[data-page="collection"] .topnav .side-search { visibility: hidden; }