/* Kometenkirmes – gemeinsames Design für Spiel, Vorstellungsseite und Konto.
   Nacht-Kirmes: tiefes Nachtblau, Laternen-Gold, Glas-Flächen mit weichem Leuchten. */
:root{
  --night:#151238; --night-2:#1e1a4d; --panel:#262061; --line:#3b3488; --scrim:rgba(9,7,30,.82);
  --bg-0:#0a0822; --bg-1:#151238;
  --glass:rgba(40,34,104,.52); --glass-2:rgba(24,20,66,.72); --glass-hi:rgba(255,255,255,.06);
  --stroke:rgba(190,170,255,.18); --stroke-2:rgba(255,255,255,.1);
  --ink:#fff4dc; --muted:#b8b0e8; --faint:#8a82c4;
  --lantern:#ffc94a; --lantern-2:#ffe08a; --lantern-d:#c9921b; --coral:#ff6b5e; --teal:#3cd0b4; --lilac:#b28bff;
  --glow-gold:0 0 0 1px rgba(255,201,74,.35),0 8px 30px -6px rgba(255,201,74,.45);
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --f-display:"Luckiest Guy","Arial Black",Impact,system-ui,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html{box-sizing:border-box;background:var(--bg-0)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;color:var(--ink);font-family:var(--f-body);font-weight:600;font-size:15px;
  background:
    radial-gradient(1200px 700px at 15% -10%,rgba(178,139,255,.22),transparent 60%),
    radial-gradient(900px 600px at 110% 10%,rgba(60,208,180,.13),transparent 60%),
    radial-gradient(900px 700px at 50% 120%,rgba(255,107,94,.14),transparent 60%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  background-attachment:fixed;-webkit-tap-highlight-color:transparent}
/* Sternenhimmel als feste Ebene hinter allem */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,#fff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 66%,#ffe7b0 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 54%,#fff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 84%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 36%,#d9ccff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 94% 88%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 48%,#fff 50%,transparent 51%);
  background-size:340px 340px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus{outline:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lantern);outline-offset:3px}
a{color:var(--lantern)}

.face{border-radius:50%;object-fit:cover;flex:none;display:block;box-shadow:0 0 0 2px var(--pc,var(--lantern)),0 3px 8px rgba(0,0,0,.4);background:var(--night)}

/* Glas-Fläche */
.glass{background:linear-gradient(180deg,var(--glass-hi),transparent 40%),var(--glass);border:1px solid var(--stroke);
  border-radius:var(--r-lg);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}

/* Knöpfe */
.btn{font-family:var(--f-display);font-size:19px;letter-spacing:.03em;line-height:1;color:#1a1440;text-decoration:none;text-align:center;
  background:linear-gradient(180deg,var(--lantern-2),var(--lantern) 55%,#f5b52e);border:0;border-radius:var(--r-md);
  padding:14px 22px 11px;box-shadow:0 4px 0 var(--lantern-d),0 10px 28px -8px rgba(255,201,74,.6);flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lantern-d),0 4px 14px -6px rgba(255,201,74,.5)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--stroke-2)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.chip{font-weight:800;font-size:13px;background:rgba(255,255,255,.05);border:1px solid var(--stroke);border-radius:999px;padding:6px 12px;white-space:nowrap}
.tbtn{background:rgba(255,255,255,.04);border:1px solid var(--stroke);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:800;color:var(--muted);white-space:nowrap;text-decoration:none;transition:background .15s,color .15s}
.tbtn:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.tbtn.warn{color:var(--night);background:var(--coral);border-color:var(--coral)}

/* Schrift */
.logo{font-family:var(--f-display);font-size:22px;letter-spacing:.02em;line-height:1;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#fff2c4,var(--lantern) 60%,#f0a92a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #0b0926)}
.logo svg{filter:none}
.hero-title{font-family:var(--f-display);font-size:clamp(34px,9vw,52px);line-height:.95;margin:0;text-wrap:balance;
  background:linear-gradient(180deg,#fff2c4,var(--lantern) 55%,#f0a92a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #0b0926)}
.kicker{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.lede{margin:0;color:var(--muted);line-height:1.5;max-width:52ch}
.muted{color:var(--muted)}
.lbl{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* Formularfelder */
.inp{width:100%;background:rgba(10,8,34,.55);border:1px solid var(--stroke);border-radius:var(--r-sm);color:var(--ink);font:inherit;font-weight:800;font-size:16px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--lantern);box-shadow:0 0 0 3px rgba(255,201,74,.18)}
.inp::placeholder{color:var(--faint);font-weight:700}

@media (prefers-reduced-motion:reduce){ .btn,.tbtn{transition:none} }