/* Panna Rush – Landing Page (statisch, ohne Build). Farben wie im Spiel: Nacht-Lila, Neon, Gold/Orange. */
@font-face{font-family:"Lilita One";src:url(/fonts/LilitaOne.woff2) format("woff2");font-display:swap}
:root{
  --bg:#110d2c;--bg2:#1a1446;--panel:#211a55;--panel2:#2a2168;--line:rgba(255,255,255,.1);
  --fg:#f4f2ff;--muted:#b6aedf;--gold:#ffd23f;--orange:#ff8a1f;--blue:#2f6bff;--cyan:#33e6d8;--pink:#ff3d8b;--green:#43d65c;
  --display:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:22px;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
html[lang=de] [data-lang=en],html[lang=en] [data-lang=de]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1}

/* Hintergrund: Neon-Rauten wie auf dem Käfigplatz */
.pitch{position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0);will-change:transform;
  background:
    radial-gradient(1200px 700px at 85% -10%,rgba(124,77,255,.45),transparent 60%),
    radial-gradient(900px 600px at -10% 30%,rgba(47,107,255,.28),transparent 60%),
    radial-gradient(800px 500px at 50% 110%,rgba(51,230,216,.16),transparent 60%),
    var(--bg)}
.pitch::after{content:"";position:absolute;inset:0;opacity:.07;
  background:
    repeating-linear-gradient(60deg,transparent 0 58px,var(--cyan) 58px 60px),
    repeating-linear-gradient(-60deg,transparent 0 58px,var(--cyan) 58px 60px);
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 75%);mask-image:linear-gradient(to bottom,#000,transparent 75%)}

/* Kopfzeile */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(17,13,44,.72);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none}
.brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.brand span{font-family:var(--display);font-size:22px;letter-spacing:.03em}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.top nav a:hover{color:var(--fg)}
.lang{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed=true]{background:var(--gold);color:#241a00}
.lang button:focus-visible{outline:2px solid var(--cyan)}

/* Hero */
.hero{padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.title{font-size:clamp(64px,10vw,124px);margin:0;
  background:linear-gradient(180deg,#ffe25a 0%,#ffc21a 48%,#ff8a1f 52%,#ff6a14 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 7px 0 #07051c)}
.pill{display:inline-block;margin-top:22px;padding:8px 18px 6px;border-radius:12px;background:linear-gradient(180deg,#3d7dff,#2554e0);
  font-family:var(--display);font-size:clamp(18px,2.4vw,26px);letter-spacing:.04em;box-shadow:0 5px 0 #13287a,0 12px 30px rgba(47,107,255,.35)}
.lead{font-size:clamp(17px,1.9vw,20px);color:#ddd8ff;max-width:34em;margin:26px 0 30px}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:flex;align-items:center;gap:12px;min-width:200px;padding:10px 18px;border-radius:14px;text-decoration:none;color:var(--fg);
  background:#07051c;border:1px solid rgba(255,255,255,.18);box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s}
a.store:hover{transform:translateY(-2px)}
.store svg{width:28px;height:28px;flex:none}
.store small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
.store b{display:block;font-size:19px;line-height:1.2}
.store.soon{cursor:default;opacity:.92}
.note{margin-top:16px;color:var(--muted);font-size:14px}

.stage{position:relative;padding:28px 10px}
.stage::before{content:"";position:absolute;inset:6% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,31,.45),rgba(124,77,255,.25) 60%,transparent);filter:blur(30px)}
.device{position:relative;border-radius:30px;padding:10px;background:#07051c;transform:rotate(-2.5deg);
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.55)}
.device img{border-radius:21px;width:100%}
.float{position:absolute;width:24%;border-radius:14px;border:4px solid #fff;box-shadow:0 14px 34px rgba(0,0,0,.5);animation:bob 5s ease-in-out infinite}
.float.a{left:-6%;bottom:-4%;transform:rotate(-10deg)}
.float.b{right:-4%;top:-6%;transform:rotate(9deg);animation-delay:-2.5s}
@keyframes bob{50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.float{animation:none}html{scroll-behavior:auto}}

/* Abschnitte */
section{padding:64px 0}
.kicker{font-family:var(--display);color:var(--cyan);letter-spacing:.12em;font-size:16px;margin:0 0 8px}
h2.display{font-size:clamp(36px,5vw,56px);margin:0 0 14px}
.sub{color:var(--muted);max-width:40em;margin:0 0 34px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:24px 22px 22px}
.feat .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.feat .ic svg{width:28px;height:28px}
.feat h3{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 6px;letter-spacing:.02em}
.feat p{margin:0;color:var(--muted);font-size:15.5px}
.c-orange{background:var(--orange)}.c-blue{background:var(--blue)}.c-pink{background:var(--pink)}.c-green{background:var(--green)}

.heroes{display:flex;gap:16px;overflow-x:auto;padding:6px 20px 22px;margin:0 -20px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:thin}
.card{flex:0 0 168px;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:var(--panel);border:3px solid var(--rc,#8a8aa8);
  box-shadow:0 10px 24px rgba(0,0,0,.35);position:relative}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%}
.card div{position:absolute;inset:auto 0 0;padding:26px 10px 9px;background:linear-gradient(transparent,rgba(7,5,28,.92) 55%);text-align:center}
.card b{display:block;font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.03em}
.card i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rc)}
.r-rare{--rc:#4aa3ff}.r-super{--rc:#43d65c}.r-epic{--rc:#b86bff}.r-mythic{--rc:#ff4d6d}.r-legend{--rc:#ffc21a}.r-icon{--rc:#33e6d8}

.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.shots button{all:unset;cursor:zoom-in;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .2s}
.shots button:hover{transform:translateY(-3px)}
.shots button:focus-visible{outline:3px solid var(--cyan)}
.shots img{aspect-ratio:16/9;object-fit:cover;width:100%}
dialog{border:0;padding:0;background:transparent;max-width:min(1400px,94vw)}
dialog::backdrop{background:rgba(7,5,28,.88)}
dialog img{border-radius:16px;max-height:88vh;width:auto}

.cta{text-align:center;background:linear-gradient(135deg,#ff8a1f,#ff3d8b 55%,#7c4dff);border-radius:32px;padding:56px 24px;
  box-shadow:0 30px 70px rgba(255,61,139,.25)}
.cta h2{font-size:clamp(34px,5vw,54px);margin:0 0 10px;filter:drop-shadow(0 4px 0 rgba(7,5,28,.55))}
.cta p{margin:0 auto 26px;max-width:36em;color:#fff4ee}
.cta .stores{justify-content:center}

footer{padding:48px 0 56px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;border-top:1px solid var(--line);padding-top:28px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--fg)}

@media (max-width:960px){
  .hero{padding-top:40px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .top nav{display:none}.lang{margin-left:auto}
  .brand span{font-size:20px}
  section{padding:48px 0}
  .features,.shots{grid-template-columns:1fr}
  .store{flex:1 1 100%}
  .card{flex-basis:140px}
  footer nav{margin-left:0}
}

/* Rechtsseiten (Impressum, Datenschutz, Nutzungsbedingungen, Konto löschen) */
.legal{padding:44px 0 8px}
.legal .wrap{max-width:900px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px}
.tabs a{padding:9px 16px 7px;border-radius:12px;background:var(--panel);border:1px solid var(--line);color:var(--muted);
  font-family:var(--display);font-size:17px;letter-spacing:.03em;text-decoration:none;transition:color .15s,background .15s}
.tabs a:hover{color:var(--fg);background:var(--panel2)}
.tabs a[aria-current=page]{background:linear-gradient(180deg,#ffe25a,#ffc21a);border-color:transparent;color:#2b1d00;box-shadow:0 4px 0 #b36b00}
.grad{background:linear-gradient(180deg,#ffe25a 0%,#ffc21a 48%,#ff8a1f 52%,#ff6a14 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 5px 0 #07051c)}
.legal h1{font-size:clamp(40px,7vw,72px);margin:0;padding-bottom:.08em;overflow-wrap:anywhere;hyphens:auto}
.meta{color:var(--muted);margin:16px 0 28px}
.doc{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);
  padding:8px 40px 34px;font-size:16px;line-height:1.75;color:#e2def6;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.doc h2{font-family:var(--display);font-weight:400;font-size:26px;line-height:1.2;letter-spacing:.02em;color:#fff;margin:34px 0 10px}
.doc h3{font-size:17px;color:#fff;margin:22px 0 6px}
.doc p,.doc li{margin:0 0 12px}
.doc ul,.doc ol{padding-left:22px;margin:0 0 12px}
.doc li{margin-bottom:6px}
.doc strong{color:#fff}
.doc a{color:var(--gold);text-underline-offset:3px}
.doc .muted{color:var(--muted);font-size:14px}
.doc .card{background:rgba(7,5,28,.38);border:1px solid var(--line);border-radius:18px;padding:20px 24px 8px;margin:28px 0 8px}
.doc .card h3{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--gold);margin:0 0 8px}
.doc .card + .card{margin-top:16px}
.doc dl{margin:0 0 12px}
.doc dt{color:var(--cyan);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
.doc dd{margin:2px 0 0;color:#fff}
.lost{text-align:center;padding:80px 0 40px}
.lost .big{font-size:clamp(110px,20vw,180px);margin:0}
@media (max-width:640px){
  .legal{padding-top:28px}
  .tabs{gap:6px;margin-bottom:28px}
  .tabs a{font-size:15px;padding:7px 12px 5px}
  .doc{padding:2px 20px 24px;font-size:15.5px}
  .doc h2{font-size:22px}
}