/* TCG-Def · eigener Charakter nach dem Logo (alles unterhalb der Startbühne)
   Logo-Merkmale: TCG gelb-orange, Def blau, dicke schwarze Kontur mit Chromrand,
   roter + gelber Blitz darüber, Funkelsterne. Schrift Lilita One (OFL, lokal). */

@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #07080f;
  --y1: #fff27a; --y2: #ffb300; --y3: #ff8a00;
  --b1: #8fe0ff; --b2: #3d8bff; --b3: #1a5cff;
  --red: #e3211b;
  --chrome: linear-gradient(140deg, #f4f6fb, #7d879c 28%, #e6ebf5 52%, #59627a 78%, #c9d0de);
  --fun: "Lilita One", "Arial Rounded MT Bold", sans-serif;
}

/* ---------- Logo-Wortmarke ---------- */
.logo { position: relative; display: inline-block; text-decoration: none; padding-top: .5em; font: 400 30px/1 var(--fun); }
.logo__swoosh { position: absolute; left: -2%; top: 0; width: 104%; height: .62em; }
.logo__swoosh svg { width: 100%; height: 100%; overflow: visible; }
.logo__swoosh path { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.sw-r { fill: #e3211b; }
.sw-y { fill: #ffd23f; }
.logo__txt { position: relative; display: inline-flex; letter-spacing: .01em; }
.logo--foot { font-size: 40px; }

.lw {
  position: relative; display: inline-block;
  color: var(--ink); -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 0 .03em #e6ebf5) drop-shadow(0 0 .02em #7d879c) drop-shadow(0 .08em 0 #000);
}
.lw::after {
  content: attr(data-t); position: absolute; left: 0; top: 0;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, var(--a), var(--m) 55%, var(--z));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.lw--y, .lw--d { --a: var(--y1); --m: var(--y2); --z: var(--y3); }
.lw--b { --a: var(--b1); --m: var(--b2); --z: var(--b3); }

/* ---------- Gemeinsame Bausteine ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 600 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
}
.kicker::before { content: ""; width: 12px; height: 18px; background: var(--y2); clip-path: polygon(62% 0, 8% 58%, 44% 58%, 28% 100%, 92% 38%, 55% 38%, 74% 0); }
.dh { margin: 16px 0 0; font: 400 clamp(44px, 6.2vw, 100px)/.98 var(--fun); letter-spacing: .005em; }
.dh span { display: inline-block; }
.dh--w { color: var(--text); }
.dh--y, .dh--b {
  background: linear-gradient(180deg, var(--a), var(--m) 55%, var(--z));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .05em 0 var(--ink));
}
.dh--y { --a: var(--y1); --m: var(--y2); --z: var(--y3); }
.dh--b { --a: var(--b1); --m: var(--b2); --z: var(--b3); }
.btn--blue { background: var(--b3); color: #fff; box-shadow: 0 10px 30px -12px rgba(26, 92, 255, .7); }
.btn--blue:hover { background: #3d75ff; }

/* Funkelsterne wie im Logo */
.spark {
  position: absolute; width: var(--s); aspect-ratio: 1; pointer-events: none; z-index: 0;
  background: #ffe9a8;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  filter: drop-shadow(0 0 6px #ffc93a);
  animation: twinkle 2.8s ease-in-out var(--d) infinite;
}
@keyframes twinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- Blitzband ---------- */
.band { position: relative; height: 190px; overflow: hidden; background: var(--bg); }
.band__row {
  position: absolute; left: -5%; width: 110%; padding: 14px 0;
  border-block: 4px solid var(--ink);
  box-shadow: 0 0 0 2px #59627a, 0 20px 40px -20px rgba(0, 0, 0, .8);
}
.band__row--r { top: 34px; transform: rotate(-3deg); background: linear-gradient(90deg, #a5120d, var(--red) 50%, #a5120d); z-index: 2; }
.band__row--b { top: 104px; transform: rotate(2deg); background: linear-gradient(90deg, #0f3fc0, var(--b3) 50%, #0f3fc0); }
.band__track { display: flex; align-items: center; width: max-content; animation: ticker 36s linear infinite; }
.band__row--b .band__track { animation-direction: reverse; animation-duration: 44s; }
.band span { font: 400 34px/1 var(--fun); padding: 0 6px; text-shadow: 0 3px 0 var(--ink); }
.band__row--r span { color: var(--y1); }
.band__row--b span { color: #fff; }
.bolt-ic { width: 18px; height: 30px; margin: 0 22px; background: var(--y2); clip-path: polygon(62% 0, 8% 58%, 44% 58%, 28% 100%, 92% 38%, 55% 38%, 74% 0); filter: drop-shadow(0 2px 0 var(--ink)); }

/* ---------- Def-Versprechen ---------- */
.promise { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.powers { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; z-index: 1; }
.power {
  position: relative; padding: 30px 26px 32px; border-radius: 22px;
  border: 2px solid transparent;
  background: linear-gradient(165deg, #171a38, #0c0e20) padding-box, var(--chrome) border-box;
  box-shadow: 0 0 0 4px var(--ink), 0 40px 60px -40px var(--pw);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.power:hover { transform: translateY(-8px); box-shadow: 0 0 0 4px var(--ink), 0 40px 70px -30px var(--pw); }
.power__ic {
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px;
  background: radial-gradient(circle at 35% 28%, color-mix(in oklab, var(--pw) 50%, white), var(--pw) 55%, color-mix(in oklab, var(--pw) 55%, black));
  box-shadow: 0 0 0 3px var(--ink), 0 0 34px -4px var(--pw);
}
.power:hover .power__ic { animation: wiggle .6s ease; }
@keyframes wiggle { 30% { transform: rotate(-10deg) scale(1.08); } 60% { transform: rotate(8deg); } }
.power__ic svg { width: 36px; height: 36px; fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.power__ic .fill { fill: var(--ink); stroke: none; }
.power h3 { margin: 24px 0 8px; font: 400 26px/1.05 var(--fun); }
.power p { margin: 0; color: var(--text-muted); font-size: 15.5px; }

/* ---------- Sortiment: Sammelordner ---------- */
.binder-sec { position: relative; padding: clamp(60px, 8vw, 110px) 0 clamp(90px, 11vw, 160px); }
.binder-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(36px, 5vw, 60px); }
.binder-hint { margin: 0; max-width: 34ch; color: var(--text-muted); font-size: 15px; }
.binder {
  position: relative; display: grid; grid-template-columns: 1fr 54px 1fr;
  padding: clamp(14px, 2vw, 28px); border-radius: 30px;
  background: radial-gradient(120% 90% at 50% 0%, #22264d, #12142e 60%, #0d0f22);
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px #59627a, 0 70px 110px -50px rgba(0, 0, 0, .9);
}
.binder::before { content: ""; position: absolute; inset: 12px; border: 2px dashed rgba(255, 255, 255, .1); border-radius: 22px; pointer-events: none; }
.binder__spine { display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .45) 60%, transparent); }
.binder__spine i { width: 40px; height: 16px; border-radius: 9px; background: var(--chrome); box-shadow: 0 0 0 2px var(--ink), 0 6px 10px rgba(0, 0, 0, .5); }
.pockets { list-style: none; margin: 0; padding: clamp(6px, 1vw, 14px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.pocket {
  position: relative; aspect-ratio: 63 / 88; border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 3px 0 rgba(255, 255, 255, .14);
}
.pocket::after { /* Folie der Hülle */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16), transparent 26%, transparent 70%, rgba(255, 255, 255, .06));
}
.pocket__card {
  position: absolute; inset: 6px; z-index: 1;
  display: flex; flex-direction: column; padding: 6px; border-radius: 7px;
  color: #fff; text-decoration: none;
  background: linear-gradient(165deg, color-mix(in oklab, var(--pc) 80%, white 12%), color-mix(in oklab, var(--pc) 60%, black));
  box-shadow: inset 0 0 0 3px #ffe9a8, inset 0 0 0 5px rgba(0, 0, 0, .3);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s;
}
.pocket__art { position: relative; flex: 1; min-height: 0; margin: 4px 4px 0; border-radius: 4px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 65%), rgba(7, 8, 15, .5); }
.pocket__art img { max-width: 88%; max-height: 88%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .5)); }
.pocket__name { margin: 6px 4px 0; font: 400 clamp(12px, 1.15vw, 17px)/1 var(--fun); text-shadow: 0 2px 0 var(--ink); }
.pocket__type { margin: 3px 4px 4px; font: 600 clamp(8px, .7vw, 10px)/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.pocket__ask {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 700 12px/1 var(--display); box-shadow: 0 0 0 2px var(--ink);
  opacity: 0; scale: .7; transition: opacity .25s, scale .35s cubic-bezier(.34, 1.56, .64, 1);
}
.pocket:hover .pocket__card, .pocket__card:focus-visible { transform: translateY(-14%) rotate(-3deg) scale(1.06); z-index: 3; box-shadow: inset 0 0 0 3px #ffe9a8, 0 30px 40px -12px rgba(0, 0, 0, .8), 0 0 40px -10px var(--pc); }
.pocket:hover, .pocket:focus-within { z-index: 3; }
.pocket:hover .pocket__ask, .pocket__card:focus-visible .pocket__ask { opacity: 1; scale: 1; }
.pocket--wish { grid-column: span 3; aspect-ratio: auto; display: grid; place-items: center; background: none; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .22); }
.pocket--wish::after { display: none; }
.wish { padding: 24px; text-align: center; max-width: 340px; }
.wish__t { margin: 0 0 10px; font: 400 clamp(30px, 3vw, 44px)/1 var(--fun);
  background: linear-gradient(180deg, var(--y1), var(--y2) 55%, var(--y3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 var(--ink)); }
.wish p:not(.wish__t) { margin: 0 0 22px; color: var(--text-muted); font-size: 15px; }

/* ---------- Kategorien: Kartenhand ---------- */
.hand-sec { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 150px) 0 clamp(60px, 8vw, 110px);
  background: radial-gradient(60% 50% at 50% 70%, rgba(26, 92, 255, .22), transparent 70%); }
.hand { position: relative; height: clamp(440px, 33vw, 500px); margin-top: 30px; z-index: 1; }
.tcard {
  --r: 0deg; --x: 0%; --ty: 0px;
  position: absolute; left: 50%; top: 60px;
  width: clamp(200px, 17vw, 260px); aspect-ratio: 63 / 88;
  display: flex; flex-direction: column; gap: 8px; padding: 11px;
  border-radius: 16px; overflow: hidden; cursor: pointer; outline: none;
  background: linear-gradient(165deg, color-mix(in oklab, var(--tc) 78%, white 22%), var(--tc) 45%, color-mix(in oklab, var(--tc) 50%, black));
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px #c9d0de, 0 0 0 9px var(--ink), 0 50px 70px -30px rgba(0, 0, 0, .85);
  transform-origin: 50% 220%;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--ty)) rotate(var(--r));
  transition: transform .55s cubic-bezier(.34, 1.3, .64, 1), filter .3s;
}
.tcard:nth-child(1) { --r: -13deg; --x: -150%; }
.tcard:nth-child(2) { --r: -4.5deg; --x: -50%; }
.tcard:nth-child(3) { --r: 4.5deg; --x: 50%; }
.tcard:nth-child(4) { --r: 13deg; --x: 150%; }
.tcard:hover, .tcard:focus-visible, .tcard.is-picked { --ty: -46px; z-index: 6; }
.tcard.is-picked { --r: 0deg; --x: 0%; z-index: 7; }
.hand:hover .tcard:not(:hover):not(.is-picked) { filter: brightness(.72) saturate(.85); }
.tcard::after { content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .45) 48%, rgba(120, 255, 240, .25) 52%, transparent 60%);
  mix-blend-mode: screen; transform: translateX(-60%); transition: transform 1s var(--ease); }
.tcard:hover::after, .tcard.is-picked::after { transform: translateX(60%); }
.tcard__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 0; }
.tcard__top h3 { margin: 0; font: 400 18px/1 var(--fun); color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 1px var(--ink); }
.tcard__typ { flex: none; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--y1); font: 700 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tcard__art { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 62%), #0b0d1a;
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px rgba(255, 236, 160, .85); }
.tcard__art img { max-width: 84%; max-height: 86%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .55)); }
.tcard__holo { position: absolute; left: 6%; top: 9%; width: 15%; transform: rotate(-14deg); }
.tcard__rows { list-style: none; margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(7, 8, 15, .58); display: grid; gap: 6px; }
.tcard__rows li { display: grid; grid-template-columns: minmax(34px, auto) 1fr; gap: 8px; align-items: center; }
.tcard__rows b { font: 400 19px/1 var(--fun); color: var(--y1); }
.tcard__rows span { font-size: 12.5px; line-height: 1.3; color: #eef0f8; }
.tcard__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px 2px; font: 600 10.5px/1.2 var(--display); color: rgba(255, 255, 255, .9); }
.tcard__rar { color: var(--y1); letter-spacing: .1em; text-shadow: 0 1px 0 var(--ink); }

/* ---------- Spiele: Booster-Packs ---------- */
.packs-sec { padding: clamp(70px, 9vw, 120px) 0; }
.packs { list-style: none; margin: clamp(44px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.pack {
  position: relative; aspect-ratio: 3 / 5;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 20px 10px; color: #fff;
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .38) 40%, transparent 50%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, .1) 0 6deg, transparent 6deg 18deg),
    linear-gradient(170deg, var(--p1), var(--p2));
  clip-path: polygon(0.00% 0%, 7.14% 2.2%, 14.29% 0%, 21.43% 2.2%, 28.57% 0%, 35.71% 2.2%, 42.86% 0%, 50.00% 2.2%, 57.14% 0%, 64.29% 2.2%, 71.43% 0%, 78.57% 2.2%, 85.71% 0%, 92.86% 2.2%, 100.00% 0%, 100.00% 100%, 92.86% 97.8%, 85.71% 100%, 78.57% 97.8%, 71.43% 100%, 64.29% 97.8%, 57.14% 100%, 50.00% 97.8%, 42.86% 100%, 35.71% 97.8%, 28.57% 100%, 21.43% 97.8%, 14.29% 100%, 7.14% 97.8%, 0.00% 100%);
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .55));
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}
.pack::before, .pack::after { /* Siegelnähte oben und unten */
  content: ""; position: absolute; left: 0; right: 0; height: 9%;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 6px), linear-gradient(180deg, #eef2f8, #8e98ad);
  transition: transform .4s var(--ease);
}
.pack::before { top: 0; }
.pack::after { bottom: 0; }
.pack:nth-child(odd):hover { transform: translateY(-12px) rotate(-3deg); }
.pack:nth-child(even):hover { transform: translateY(-12px) rotate(3deg); }
.pack:hover::before { transform: translateY(-4px) rotate(-3deg); }
.pack b { font: 400 clamp(24px, 2.3vw, 36px)/1 var(--fun);
  text-shadow: 0 4px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink); }
.pack__sub { margin-top: 12px; max-width: 14ch; font: 600 11.5px/1.35 var(--display); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pack__tag { position: absolute; top: 15%; padding: 6px 10px; border-radius: 999px; background: rgba(7, 8, 15, .78); font: 700 10px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.pack__tag--hot { background: var(--ink); color: var(--y1); box-shadow: 0 0 0 2px var(--y1); }

/* ---------- Ablauf: drei Züge ---------- */
.moves { padding: clamp(70px, 9vw, 120px) 0 clamp(90px, 11vw, 150px); }
.moves__board { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.moves__bolt { position: absolute; left: 0; top: 0; width: 100%; height: 130px; overflow: visible; }
.moves__bolt path { fill: none; stroke: var(--y2); stroke-width: 6; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(255, 179, 0, .8));
  stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1) .2s; }
.moves__board.is-in .moves__bolt path { stroke-dashoffset: 0; }
.moves__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.move { text-align: center; }
.move__n {
  display: grid; place-items: center; width: 130px; height: 130px; margin: 0 auto 22px; border-radius: 50%;
  font: 400 70px/1 var(--fun); color: var(--ink);
  background: radial-gradient(circle at 35% 28%, var(--y1), var(--y2) 52%, var(--y3));
  box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px #c9d0de, 0 0 0 11px var(--ink), 0 0 60px rgba(255, 179, 0, .45);
}
.move:nth-child(2) .move__n { background: radial-gradient(circle at 35% 28%, var(--b1), var(--b2) 52%, var(--b3)); box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px #c9d0de, 0 0 0 11px var(--ink), 0 0 60px rgba(26, 92, 255, .5); }
.move:nth-child(3) .move__n { background: radial-gradient(circle at 35% 28%, #ff8a7a, var(--red) 52%, #8a0d08); color: #fff; box-shadow: 0 0 0 5px var(--ink), 0 0 0 9px #c9d0de, 0 0 0 11px var(--ink), 0 0 60px rgba(227, 33, 27, .5); }
.move h3 { margin: 0 0 10px; font: 400 32px/1 var(--fun); }
.move p { margin: 0 auto; max-width: 30ch; color: var(--text-muted); }

/* ---------- Kontakt: Ihr Zug ---------- */
.turn { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 160px) 0;
  background: radial-gradient(50% 60% at 18% 45%, rgba(26, 92, 255, .28), transparent 70%), radial-gradient(40% 50% at 82% 70%, rgba(255, 179, 0, .16), transparent 70%); }
.turn__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.turn__big { margin: 0; font: 400 clamp(110px, 16vw, 260px)/.88 var(--fun); transform: rotate(-5deg); padding-left: .1em; }
.turn__panel {
  padding: clamp(28px, 3.4vw, 48px); border-radius: 24px;
  border: 2px solid transparent;
  background: linear-gradient(165deg, #171a38, #0c0e20) padding-box, var(--chrome) border-box;
  box-shadow: 0 0 0 4px var(--ink), 0 60px 90px -50px rgba(26, 92, 255, .7);
}
.turn__lead { margin: 0 0 26px; font-size: 19px; }
.turn__list { margin: 0 0 30px; }
.turn__list div { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.turn__list dt { font: 600 11.5px/1.7 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.turn__list dd { margin: 0; }
.turn__list a { text-decoration: none; border-bottom: 1px solid var(--line); }
.turn__list a:hover { border-color: var(--accent); }
.turn__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.dfoot { position: relative; padding: 44px 0 28px; font-size: 14px; color: var(--text-muted); border-top: 4px solid var(--ink); }
.dfoot::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: linear-gradient(90deg, var(--red), var(--y2) 50%, var(--b3)); }
.dfoot__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dfoot__inner p { margin: 0; }
.dfoot nav { display: flex; gap: 22px; }
.dfoot nav a { text-decoration: none; color: var(--text); }
.dfoot nav a:hover { text-decoration: underline; }
.dfoot__fine { font-size: 12.5px; margin: 22px auto 0; opacity: .75; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .powers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .binder { grid-template-columns: 1fr; gap: 10px; }
  .binder__spine { flex-direction: row; justify-content: space-evenly; height: 30px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45) 40%, rgba(0, 0, 0, .45) 60%, transparent); }
  .binder__spine i { width: 16px; height: 34px; }
  .tcard { width: clamp(170px, 21vw, 220px); }
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .logo { font-size: 24px; }
  .logo--foot { font-size: 32px; }
  .band { height: 150px; }
  .band__row--r { top: 24px; }
  .band__row--b { top: 82px; }
  .band span { font-size: 24px; }
  .powers { grid-template-columns: 1fr; }
  .binder-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .pockets { gap: 7px; padding: 4px; }
  .pocket__card { inset: 4px; padding: 4px; }
  .pocket__name { font-size: 11px; margin-top: 4px; }
  .pocket__type { display: none; }
  .wish { padding: 18px 10px; }
  .hand { height: auto; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px var(--gut) 50px; scrollbar-width: none; }
  .hand::-webkit-scrollbar { display: none; }
  .tcard { position: relative; left: auto; top: auto; flex: 0 0 74vw; width: auto; transform: none; scroll-snap-align: center; }
  .tcard:hover, .tcard.is-picked { transform: none; }
  .hand:hover .tcard:not(:hover):not(.is-picked) { filter: none; }
  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moves__bolt { display: none; }
  .moves__list { grid-template-columns: 1fr; gap: 44px; }
  .move__n { width: 104px; height: 104px; font-size: 56px; }
  .turn__grid { grid-template-columns: 1fr; }
  .turn__list div { grid-template-columns: 1fr; gap: 4px; }
}

.power.tilt:hover { transform: perspective(900px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.power.tilt::after { border-radius: 20px; }

.binder__page--r .pockets { height: 100%; grid-template-rows: auto 1fr; }

.turn__big .lw { -webkit-text-stroke: .12em var(--ink); }
.legal h1 { font: 400 clamp(52px, 8vw, 104px)/.95 var(--fun); text-transform: none; }
.legal h2 { font-family: var(--fun); font-weight: 400; }