/* ============================================================
   BANKRAUB — Browsergame
   Getestet gegen Chrome, Firefox, Edge, Safari.
   Animationen laufen ausschliesslich ueber transform/opacity,
   damit sie auch auf schwacher Hardware ruckelfrei bleiben.
   ============================================================ */

:root{
  --lila:#6618f8;
  --lila-hell:#8a4dff;
  --lila-dunkel:#4a0fc0;
  --himmel:#3fb6ef;
  --himmel-hell:#8fe0fb;

  --gruen:#4f9d3a;
  --orange:#ef7d1a;
  --rot:#d0242c;
  --violett:#7b4fa8;
  --gold:#e8b21c;

  --weiss:#ffffff;
  --tinte:#2a1a4d;
  --grau:#7c74a0;

  --schrift:'Barlow Semi Condensed','Arial Narrow',system-ui,-apple-system,sans-serif;
  --display:'Anton','Arial Black',Impact,sans-serif;

  --radius:14px;
  --schatten:0 10px 30px rgba(30,10,70,.28);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  height:100%;
  font-family:var(--schrift);
  color:var(--tinte);
  /* Farben der oberen und unteren Bildkante, damit der Rand neben der
     Szene nahtlos anschliesst, wenn das Fenster nicht 16:9 ist. Die Szene
     sitzt mittig, der Farbwechsel liegt darum genau auf halber Hoehe. */
  background:linear-gradient(180deg,#05a0eb 0%,#05a0eb 49.6%,#a98c7f 50.4%,#a98c7f 100%);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  overflow:hidden;
}

button{font-family:inherit}

/* ---------- Buehne: feste 16:9-Flaeche, zentriert ---------- */

/* Die Buehne nimmt den ganzen Schirm ein, damit Kopfzeile und Dialoge
   ueberall Platz haben. Die Spielszene bleibt darin immer 16:9. */
#stage{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;          /* Adressleiste auf dem Handy einrechnen */
  overflow:hidden;
}

/* Feste Ebenenfolge — die Banken bekommen per JS z-index 10..14 und
   duerfen niemals ueber der Bedienoberflaeche liegen. */
/* Die Szene fuellt den ganzen Bildschirm. Der Hintergrund wird dabei
   beschnitten (object-fit:cover), nie verzerrt. */
.scene{position:absolute; inset:0; overflow:hidden; z-index:1}
.fx    {z-index:55}
.tip   {z-index:25}
.claim {z-index:25}
.hud   {z-index:30}
.sheet {z-index:40}
.modal {z-index:50}
.toasts{z-index:60}
.auth  {z-index:80}

.scene-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* leichter Parallax-Versatz, wird per JS gesetzt */
  transform:scale(1.04) translate(var(--px,0px), var(--py,0px));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}

/* ---------- Luftverkehr ----------

   Zeppelin und Flugzeug wechseln sich ab. Beide Animationen haben dieselbe
   Gesamtdauer und starten zusammen mit der Seite — dadurch bleiben sie ohne
   eine Zeile JavaScript fuer immer im Takt. Wer wann fliegt, steht allein in
   den Prozentmarken der Keyframes:

     0 – 55%    Zeppelin faehrt rechts -> links   (72 s)
     55 – 59%   leerer Himmel                     ( 5 s)
     59 – 81%   Flugzeug fliegt links -> rechts   (29 s)
     81 – 100%  leerer Himmel                     (25 s)

   z-index 4/5: ueber dem Himmel, aber unter den Banken (die bekommen per JS
   10..14). Was fern am Himmel haengt, gehoert hinter die Gebaeude davor. */

.zeppelin, .flugzeug{
  position:absolute;
  pointer-events:none;
  /* linear, nicht ease: am Himmel wird nicht beschleunigt und nicht gebremst */
  animation-duration:130s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
.zeppelin img, .flugzeug img{display:block; width:100%; height:auto}

.zeppelin{
  top:20%; right:0;
  width:clamp(160px,22%,440px);
  z-index:5;
  animation-name:zeppelinFahrt;
}
.zeppelin img{
  filter:drop-shadow(0 10px 16px rgba(40,20,90,.16));
  animation:zeppelinWiegen 9s ease-in-out infinite alternate;
}

.flugzeug{
  top:27%; left:0;
  width:clamp(190px,26%,520px);
  z-index:4;
  animation-name:flugzeugFahrt;
}
.flugzeug img{
  filter:drop-shadow(0 8px 12px rgba(40,20,90,.14));
  animation:flugzeugWippen 3.6s ease-in-out infinite alternate;
}

/* 100% meint die eigene Breite, 100vw das Fenster — zusammen genau eine volle
   Ueberfahrt von ganz ausserhalb bis ganz ausserhalb. Die Doppelmarken
   (55%,100% bzw. 0%,59%) sind die Wartezeit ausserhalb des Bildes. */
@keyframes zeppelinFahrt{
  0%        {transform:translateX(100%)}
  55%, 100% {transform:translateX(-100vw)}
}
@keyframes flugzeugFahrt{
  0%,  59%  {transform:translateX(-100%)}
  81%, 100% {transform:translateX(100vw)}
}

@keyframes zeppelinWiegen{
  from{transform:translateY(-1.6%) rotate(-.8deg)}
  to  {transform:translateY(1.6%)  rotate(.8deg)}
}
/* Keine Spiegelung: die Vorlage zeigt bereits nach rechts, also in die
   Flugrichtung. (Die erste Fassung der Grafik zeigte nach links und brauchte
   ein scaleX(-1) — das ist mit der neuen Zeichnung hinfaellig.) */
@keyframes flugzeugWippen{
  from{transform:translateY(-1.4%) rotate(-.5deg)}
  to  {transform:translateY(1.4%)  rotate(.5deg)}
}

/* ---------- Banken ---------- */

.banks{position:absolute; inset:0}

.bank{
  position:absolute;
  bottom:var(--b);
  left:var(--x);
  width:var(--w);
  transform:translateX(-50%);
  border:0; padding:0; margin:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.bank img{
  display:block;
  width:100%; height:auto;
  filter:drop-shadow(0 10px 14px rgba(40,25,70,.32));
  transform-origin:50% 100%;
  animation:wippen 6s ease-in-out infinite;
  animation-delay:var(--delay,0s);
  transition:transform .22s cubic-bezier(.3,1.4,.5,1), filter .22s ease;
}

/* dezentes Atmen der Gebaeude */
@keyframes wippen{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-0.9%)}
}

/* Leuchten beim Ueberfahren. drop-shadow folgt der Silhouette des
   freigestellten PNG — ein box-shadow wuerde nur ein Rechteck malen.
   --ton ist die Schwierigkeitsfarbe, jede Bank leuchtet also in ihrer eigenen. */
.bank:hover img,
.bank:focus-visible img{
  transform:translateY(-2%) scale(1.045);
  filter:
    drop-shadow(0 18px 22px rgba(40,25,70,.42))
    drop-shadow(0 0 4px var(--ton,#fff))
    drop-shadow(0 0 13px var(--ton,#fff))
    brightness(1.08) saturate(1.1);
}
.bank:active img{transform:translateY(-0.4%) scale(1.01)}
.bank:focus{outline:none}
.bank:focus-visible{outline:none}

/* Schild ueber der Bank */
.bank-tag{
  position:absolute;
  left:50%; bottom:100%;
  transform:translate(-50%,6px);
  margin-bottom:.4em;
  background:var(--weiss);
  border-radius:999px;
  padding:.28em .8em;
  white-space:nowrap;
  font-weight:700;
  font-size:clamp(10px,1.05vw,17px);
  letter-spacing:.02em;
  box-shadow:var(--schatten);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.bank-tag i{font-style:normal; color:var(--ton)}
.bank-tag s{text-decoration:none; color:var(--grau)}

.bank:hover .bank-tag,
.bank:focus-visible .bank-tag{opacity:1; transform:translate(-50%,0)}

/* Gesperrte Ziele sind im Ruhezustand blass. Beim Ueberfahren leuchten sie
   aber genauso in ihrer eigenen Farbe wie offene Ziele — nur die Entsaettigung
   bleibt leicht stehen. Dass sie gesperrt sind, sagt das Schild ("ab Lvl X").
   Muss nach der Hover-Regel oben stehen, sonst gewinnt die dortige. */
.bank.is-locked img{filter:drop-shadow(0 8px 12px rgba(40,25,70,.3)) grayscale(.62) brightness(.86)}
.bank.is-locked:hover img,
.bank.is-locked:focus-visible img{
  transform:translateY(-2%) scale(1.045);
  filter:
    drop-shadow(0 18px 22px rgba(40,25,70,.42))
    drop-shadow(0 0 4px var(--ton,#fff))
    drop-shadow(0 0 13px var(--ton,#fff))
    grayscale(.22) brightness(1.02) saturate(1.1);
}

/* Einblenden beim Start */
.bank{animation:aufpoppen .5s backwards cubic-bezier(.2,1.3,.4,1); animation-delay:var(--delay,0s)}
@keyframes aufpoppen{
  from{opacity:0; transform:translateX(-50%) translateY(14px) scale(.9)}
  to  {opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}

/* ---------- Kopfzeile ---------- */

.hud{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(8px,1.5vw,26px);
  padding:clamp(10px,2vw,34px) clamp(12px,2.2vw,38px);
  flex-wrap:wrap;
  pointer-events:none;
}
/* Muss explizit stehen: das display:flex oben wuerde das hidden-Attribut
   sonst ueberstimmen und die Kopfzeile vor der Anmeldung zeigen. */
.hud[hidden]{display:none}
.hud > *{pointer-events:auto}

.brand{animation:einblenden .5s .05s backwards ease-out}

.logo{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  color:var(--lila);
  font-size:clamp(30px,5.4vw,92px);
  line-height:.92;
  letter-spacing:.005em;
  border-bottom:clamp(2px,.28vw,5px) solid var(--lila);
  padding-bottom:.06em;
  display:inline-block;
  text-shadow:0 3px 0 rgba(255,255,255,.5);
}

.tabs{display:flex; gap:clamp(8px,1.5vw,28px); margin-top:.5em}

.tab{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:.1em 0;
  cursor:pointer;
  color:var(--lila);
  font-weight:600;
  font-size:clamp(12px,1.5vw,26px);
  text-transform:uppercase;
  letter-spacing:.02em;
  position:relative;
  transition:color .18s ease, transform .18s ease;
}
.tab::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-.1em;
  height:2px; background:var(--lila);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .22s cubic-bezier(.3,1.2,.4,1);
}
.tab:hover{transform:translateY(-1px)}
.tab:hover::after,
.tab.is-active::after{transform:scaleX(1)}
.tab.is-active{color:var(--lila-dunkel)}

/* Statuspillen + Kontozeile */
/* Pillen und Konto stehen nebeneinander: das Konto beansprucht die rechte
   Ecke, die vier Pillen ruecken dadurch nach links. flex-start haelt beide
   an der Oberkante — sonst haenge das Konto auf halber Pillenhoehe. */
.rechts{
  display:flex;
  align-items:flex-start;
  gap:clamp(10px,1.4vw,26px);
  animation:einblenden .5s .12s backwards ease-out;
}

/* Die rechte Ecke: Konto, darunter die Tonsteuerung — beide rechtsbuendig */
.rechts-spalte{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.stats{
  display:flex;
  gap:clamp(6px,.9vw,16px);
  flex-wrap:wrap;
  justify-content:flex-end;
}

.konto{
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:clamp(10px,1vw,17px);
  color:var(--lila-dunkel);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  /* deckt sich mit dem oberen Innenabstand der Pillen, damit "admin" auf
     einer Linie mit "CREDITS:" steht statt mit deren Oberkante */
  padding-top:clamp(5px,.7vw,13px);
  white-space:nowrap;
}
.konto-name{font-weight:700}
.konto-aus{
  background:none; border:0; cursor:pointer;
  color:var(--lila-dunkel);
  font-family:inherit;
  font-size:inherit;
  font-weight:600;
  text-decoration:underline;
  padding:0;
  opacity:.75;
  transition:opacity .18s ease;
}
.konto-aus:hover{opacity:1}

/* ---------- Tonsteuerung ---------- */

/* Sitzt in der rechten Ecke unter admin/Abmelden. Raster statt Flex, damit
   Etikett, Schalter und Regler beider Zeilen untereinander fluchten. */
.ton{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  gap:.28em .5em;
  margin-top:.5em;
  color:var(--lila-dunkel);
}

.ton-etikett{
  font-size:clamp(8px,.78vw,13px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  opacity:.75;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  justify-self:end;
}

.ton-schalter{
  display:flex;
  background:none; border:0; padding:0;
  cursor:pointer;
  color:inherit;
  opacity:.8;
  border-radius:6px;
  transition:opacity .18s ease, transform .18s ease;
}
.ton-schalter:hover{opacity:1; transform:scale(1.08)}
.ton-schalter:focus-visible{outline:2px solid var(--lila); outline-offset:3px}

.ton-i{width:clamp(16px,1.4vw,24px); height:clamp(16px,1.4vw,24px); display:block}
/* Koerper und Notenkoepfe gefuellt, alles andere nur gestrichen — so bleibt
   das Zeichen auch bei 16 px lesbar. */
.ton-i path, .ton-i circle{
  fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.ton-i .ton-box, .ton-i .ton-kopf{fill:currentColor; stroke-width:1.3}

/* Stummzeichen: ein Schraegstrich quer ueber das Sinnbild. Die weisse Bahn
   darunter hebt ihn vom Zeichen ab, sonst verschwaende er darin. */
.ton-i .ton-strich{display:none}
.ton-schalter.is-aus .ton-strich{display:block}
.ton-i .ton-strich-weiss{stroke:var(--weiss); stroke-width:4.5}

/* Der Regler wird von Hand gezeichnet: die Voreinstellung der Browser passt
   weder zur Farbe noch zur Groesse der Kopfzeile. appearance:none schaltet
   sie ab, Bahn und Griff kommen danach getrennt fuer WebKit und Firefox. */
.ton-regler{
  -webkit-appearance:none; appearance:none;
  width:clamp(58px,6vw,110px);
  height:14px;
  background:none;
  cursor:pointer;
  margin:0;
}
.ton-regler:focus-visible{outline:2px solid var(--lila); outline-offset:3px; border-radius:6px}

.ton-regler::-webkit-slider-runnable-track{
  height:5px; border-radius:999px;
  background:rgba(74,15,192,.28);
}
.ton-regler::-moz-range-track{
  height:5px; border-radius:999px;
  background:rgba(74,15,192,.28);
}
.ton-regler::-moz-range-progress{
  height:5px; border-radius:999px;
  background:var(--lila);
}
.ton-regler::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px; height:13px;
  margin-top:-4px;            /* mittig auf der 5px hohen Bahn */
  border-radius:50%;
  background:var(--lila);
  border:2px solid var(--weiss);
  box-shadow:0 1px 3px rgba(30,10,70,.4);
}
.ton-regler::-moz-range-thumb{
  width:13px; height:13px;
  border-radius:50%;
  background:var(--lila);
  border:2px solid var(--weiss);
  box-shadow:0 1px 3px rgba(30,10,70,.4);
}
/* Stumm: der Regler tritt zurueck, bleibt aber bedienbar — wer ihn anfasst,
   schaltet den Ton damit wieder an. */
.ton-regler.is-aus{opacity:.4}

.pill{
  background:var(--lila);
  color:#f1eaff;
  border-radius:clamp(8px,.9vw,16px);
  padding:clamp(5px,.7vw,13px) clamp(10px,1.5vw,28px);
  min-width:clamp(74px,10.5vw,186px);
  text-align:center;
  box-shadow:0 6px 0 rgba(60,10,150,.35), var(--schatten);
  line-height:1.12;
}
.pill .k{
  display:block;
  font-size:clamp(9px,1.05vw,19px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.pill .v{
  display:block;
  font-size:clamp(13px,1.5vw,27px);
  font-weight:600;
  color:var(--weiss);
  font-variant-numeric:tabular-nums;
}
/* Puls, wenn sich ein Wert aendert */
.pill.is-bump{animation:puls .45s cubic-bezier(.3,1.5,.4,1)}
@keyframes puls{
  0%{transform:scale(1)} 45%{transform:scale(1.09)} 100%{transform:scale(1)}
}

@keyframes einblenden{
  from{opacity:0; transform:translateY(-10px)}
  to  {opacity:1; transform:none}
}

/* ---------- Hinweisbox ---------- */

.tip{
  position:absolute;
  left:50%; top:46%;
  transform:translate(-50%,-50%);
  width:min(86%,1240px);
  background:var(--weiss);
  border-radius:var(--radius);
  padding:clamp(12px,1.6vw,26px) clamp(34px,3vw,54px) clamp(12px,1.6vw,26px) clamp(14px,2vw,34px);
  box-shadow:var(--schatten);
  animation:tippRein .45s cubic-bezier(.2,1.2,.4,1);
}
.tip[hidden]{display:none}
.tip.is-weg{animation:tippRaus .3s ease forwards}

.tip p{
  margin:0;
  color:var(--lila);
  font-size:clamp(11px,1.18vw,22px);
  font-weight:500;
  line-height:1.42;
  text-align:center;
  text-wrap:balance;
}
.tip b{font-weight:700}
.d-gruen{color:var(--gruen)} .d-orange{color:var(--orange)}
.d-rot{color:var(--rot)} .d-lila{color:var(--violett)} .d-gold{color:var(--gold)}

.tip-x{
  position:absolute;
  top:clamp(6px,.7vw,14px); right:clamp(10px,1.1vw,20px);
  background:none; border:0; cursor:pointer;
  color:var(--lila);
  font-weight:700;
  font-size:clamp(14px,1.5vw,26px);
  line-height:1;
  transition:transform .18s ease;
}
.tip-x:hover{transform:scale(1.25) rotate(90deg)}

@keyframes tippRein{
  from{opacity:0; transform:translate(-50%,-50%) scale(.94)}
  to  {opacity:1; transform:translate(-50%,-50%) scale(1)}
}
@keyframes tippRaus{
  to{opacity:0; transform:translate(-50%,-50%) scale(.94)}
}

/* ---------- Tages-Credits ---------- */

.claim{
  position:absolute;
  left:50%; bottom:clamp(10px,2.2vw,38px);
  transform:translateX(-50%);
  background:linear-gradient(180deg,#ffd84a,#f0a81c);
  color:#4a2b00;
  border:0;
  border-radius:999px;
  padding:clamp(8px,1vw,16px) clamp(16px,2vw,34px);
  font-weight:700;
  font-size:clamp(12px,1.25vw,22px);
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 6px 0 #b97c05, var(--schatten);
  animation:huepfen 1.7s ease-in-out infinite;
}
.claim[hidden]{display:none}
.claim:active{transform:translateX(-50%) translateY(3px); box-shadow:0 3px 0 #b97c05}
.claim-i{font-size:1.1em}

@keyframes huepfen{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-6px)}
}

/* ---------- Blatt (Skills / Charakter / Rangliste) ---------- */

.sheet{
  position:absolute; inset:0;
  background:rgba(35,12,80,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(8px,1.4vw,26px);
  padding-top:clamp(90px,11.6vw,190px);
  animation:einblendenSoft .25s ease;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.sheet[hidden]{display:none}

.sheet-inner{
  position:relative;
  width:min(100%,1180px);
  max-height:100%;
  overflow-y:auto;
  background:var(--weiss);
  border-radius:var(--radius);
  padding:clamp(16px,1.8vw,32px);
  box-shadow:var(--schatten);
  animation:blattRein .32s cubic-bezier(.2,1.15,.4,1);
}

@keyframes blattRein{
  from{opacity:0; transform:translateY(22px) scale(.98)}
  to  {opacity:1; transform:none}
}
@keyframes einblendenSoft{from{opacity:0}to{opacity:1}}

.sheet-title{
  font-family:var(--display);
  font-weight:400;
  color:var(--lila);
  margin:0 0 .5em;
  font-size:clamp(22px,2.6vw,44px);
  letter-spacing:.01em;
}

.sheet-x{
  position:absolute; top:clamp(8px,.9vw,18px); right:clamp(10px,1vw,20px);
  background:none; border:0; cursor:pointer;
  color:var(--lila);
  font-size:clamp(22px,2.2vw,38px);
  line-height:1;
  transition:transform .18s ease;
}
.sheet-x:hover{transform:scale(1.2) rotate(90deg)}

/* Karten-Raster */
.karten{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:clamp(10px,1.1vw,18px);
}

.karte{
  background:#f6f3ff;
  border:2px solid #e5dcff;
  border-radius:12px;
  padding:clamp(12px,1.1vw,18px);
  display:flex;
  flex-direction:column;
  gap:.55em;
  animation:aufpoppenSoft .34s backwards ease-out;
}
@keyframes aufpoppenSoft{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:none}
}

.karte h3{
  margin:0;
  font-size:clamp(15px,1.15vw,21px);
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5em;
}
.karte .stufe{
  background:var(--lila); color:var(--weiss);
  border-radius:999px;
  padding:.05em .6em;
  font-size:.86em;
  font-variant-numeric:tabular-nums;
}
.karte p{margin:0; color:var(--grau); font-size:clamp(12px,.92vw,16px); line-height:1.35}

/* Fortschrittspunkte */
.punkte{display:flex; gap:3px; flex-wrap:wrap}
.punkt{
  width:clamp(8px,.62vw,12px); height:clamp(8px,.62vw,12px);
  border-radius:3px;
  background:#e2d9f7;
  transition:background .3s ease, transform .3s ease;
}
.punkt.an{background:var(--lila)}
.punkt.neu{animation:punktRein .4s cubic-bezier(.3,1.6,.4,1)}
@keyframes punktRein{from{transform:scale(0)}to{transform:scale(1)}}

.kauf{display:flex; align-items:center; justify-content:space-between; gap:.6em; margin-top:auto}
.preis{font-size:clamp(12px,.92vw,16px); color:var(--grau)}
.preis b{color:var(--tinte); font-variant-numeric:tabular-nums}

/* ---------- Knoepfe ---------- */

.knopf{
  appearance:none; -webkit-appearance:none;
  border:0; cursor:pointer;
  background:linear-gradient(180deg,var(--lila-hell),var(--lila));
  color:var(--weiss);
  border-radius:10px;
  padding:.6em 1.1em;
  font-weight:700;
  font-size:clamp(12px,1vw,18px);
  text-transform:uppercase;
  letter-spacing:.03em;
  box-shadow:0 4px 0 var(--lila-dunkel);
  transition:transform .12s ease, filter .18s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.knopf:hover:not(:disabled){filter:brightness(1.1)}
.knopf:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 var(--lila-dunkel)}
.knopf:disabled{background:#cfc6e6; color:#8d84ab; box-shadow:0 4px 0 #b3a9cf; cursor:not-allowed}
.knopf.breit{width:100%; padding:.8em 1em; font-size:clamp(13px,1.1vw,20px)}
.knopf.gruen{background:linear-gradient(180deg,#6fce53,#4f9d3a); box-shadow:0 4px 0 #35701f}
.knopf.grau{background:linear-gradient(180deg,#b8afd4,#948bb6); box-shadow:0 4px 0 #6f6790}

/* ---------- Charakter ---------- */

.charakter{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(14px,1.6vw,30px);
  align-items:start;
}
@media (max-width:720px){ .charakter{grid-template-columns:1fr} }

.figur{
  background:linear-gradient(180deg,#efe8ff,#dfd2ff);
  border-radius:12px;
  padding:1em;
  text-align:center;
}
.figur img{
  width:100%; max-width:210px;
  height:auto; max-height:min(38vh,300px); object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(40,20,80,.3));
  animation:atmen 3.4s ease-in-out infinite;
}
@keyframes atmen{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-5px) scale(1.012)}
}
.figur .name{
  margin-top:.5em;
  font-family:var(--display);
  color:var(--lila);
  font-size:clamp(18px,1.7vw,30px);
  word-break:break-word;
}
.figur .werte{
  display:grid; grid-template-columns:1fr 1fr; gap:.4em;
  margin-top:.7em; font-size:clamp(11px,.9vw,15px);
}
.figur .werte div{background:rgba(255,255,255,.7); border-radius:7px; padding:.35em}
.figur .werte b{display:block; font-size:1.25em; color:var(--lila)}

.gruppe{margin-bottom:1.1em}
.gruppe > h4{
  margin:0 0 .45em;
  font-size:clamp(13px,1vw,18px);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--grau);
}
.teile{display:flex; gap:.5em; flex-wrap:wrap}

.teil{
  border:2px solid #e5dcff;
  background:#f6f3ff;
  border-radius:10px;
  padding:.5em .8em;
  cursor:pointer;
  text-align:left;
  transition:transform .16s ease, border-color .2s ease, background .2s ease;
  min-width:130px;
}
.teil:hover:not(:disabled){transform:translateY(-2px); border-color:var(--lila-hell)}
.teil.an{border-color:var(--lila); background:#ece2ff; box-shadow:inset 0 0 0 1px var(--lila)}
.teil:disabled{opacity:.55; cursor:not-allowed}
.teil .tn{display:block; font-weight:700; font-size:clamp(12px,.95vw,16px)}
.teil .tb{display:block; font-size:clamp(10px,.8vw,13px); color:var(--lila)}
.teil .tp{display:block; font-size:clamp(10px,.8vw,13px); color:var(--grau)}

/* ---------- Rangliste ---------- */

.liste{width:100%; border-collapse:collapse; font-size:clamp(12px,1vw,18px)}
.liste th{
  text-align:left; color:var(--grau);
  text-transform:uppercase; letter-spacing:.05em;
  font-size:.82em; padding:.5em .6em; border-bottom:2px solid #eee5ff;
}
.liste td{padding:.55em .6em; border-bottom:1px solid #f1ebff}
.liste .num{text-align:right; font-variant-numeric:tabular-nums}
.liste tr{animation:aufpoppenSoft .3s backwards ease-out}
.liste .ich{background:#f0e8ff; font-weight:700}
.liste .ich td:first-child{border-left:3px solid var(--lila)}
.marke{
  background:var(--lila); color:var(--weiss);
  border-radius:999px; padding:.05em .5em;
  font-size:.75em; margin-left:.4em; vertical-align:middle;
}

/* ---------- Dialog ---------- */

.modal{
  position:absolute; inset:0;
  background:rgba(28,10,64,.55);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(10px,2vw,30px);
  animation:einblendenSoft .22s ease;
  overflow:auto;
}
.modal[hidden]{display:none}

.modal-card{
  position:relative;
  width:min(100%,560px);
  max-height:100%;
  overflow-y:auto;
  background:var(--weiss);
  border-radius:var(--radius);
  padding:clamp(16px,1.8vw,32px);
  box-shadow:var(--schatten);
  animation:karteRein .3s cubic-bezier(.2,1.2,.4,1);
}
@keyframes karteRein{
  from{opacity:0; transform:translateY(18px) scale(.96)}
  to  {opacity:1; transform:none}
}
.modal-card.wackeln{animation:wackeln .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes wackeln{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}

.modal-x{
  position:absolute; top:.4em; right:.6em;
  background:none; border:0; cursor:pointer;
  color:var(--lila); font-size:clamp(22px,2vw,34px); line-height:1;
  transition:transform .18s ease;
}
.modal-x:hover{transform:scale(1.2) rotate(90deg)}

.modal-card h2{
  font-family:var(--display); font-weight:400;
  margin:0 0 .1em; color:var(--tinte);
  font-size:clamp(20px,2.1vw,36px);
}
.modal-card .ort{
  color:var(--grau); text-transform:uppercase;
  letter-spacing:.07em; font-size:clamp(11px,.9vw,15px);
  margin-bottom:1em;
}

.abzeichen{
  display:inline-block;
  background:var(--ton,var(--lila)); color:var(--weiss);
  border-radius:999px; padding:.15em .8em;
  font-weight:700; font-size:clamp(11px,.9vw,15px);
  text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:.6em;
}

.fakten{display:grid; grid-template-columns:1fr 1fr; gap:.7em; margin-bottom:1em}
.fakt{background:#f6f3ff; border-radius:10px; padding:.6em .8em}
.fakt .fk{
  font-size:clamp(10px,.8vw,13px); color:var(--grau);
  text-transform:uppercase; letter-spacing:.06em;
}
.fakt .fv{
  font-size:clamp(15px,1.3vw,24px); font-weight:700;
  font-variant-numeric:tabular-nums;
}
.fv.kosten{color:var(--rot)} .fv.beute{color:var(--gruen)}

.balken{
  height:clamp(8px,.65vw,12px);
  border-radius:999px;
  background:#eae2ff;
  overflow:hidden;
}
.balken i{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--rot),var(--orange) 45%,var(--gruen));
  border-radius:999px;
  transition:width .7s cubic-bezier(.2,.8,.3,1);
}

.marken{display:flex; gap:.4em; flex-wrap:wrap; margin:.7em 0 1.1em}
.marken span{
  background:#f0ebff; border:1px solid #e0d6ff;
  border-radius:7px; padding:.2em .6em;
  font-size:clamp(11px,.88vw,15px); color:var(--lila-dunkel);
}

/* Crew-Plaetze */
.crew{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:.55em;
  margin:1em 0;
}
.platz{
  background:#f6f3ff; border:2px dashed #ddd2ff;
  border-radius:10px; padding:.6em .3em;
  text-align:center; min-height:64px;
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color .25s ease, background .25s ease;
}
.platz.voll{border-style:solid; border-color:#cbb9ff; background:#efe9ff; animation:platzRein .35s cubic-bezier(.3,1.5,.4,1)}
.platz.ich{border-color:var(--lila); background:#e5d8ff}
.platz.ok{border-color:var(--gruen); background:#e4f7dd}
.platz.weg{border-color:var(--rot); background:#fbe2e2}
.platz .pn{font-weight:700; font-size:clamp(11px,.9vw,15px); word-break:break-word}
.platz .pl{font-size:clamp(10px,.78vw,13px); color:var(--grau)}
@keyframes platzRein{from{transform:scale(.8); opacity:0}to{transform:scale(1); opacity:1}}

/* Spannungsbalken */
.spannung{height:clamp(8px,.65vw,12px); border-radius:999px; background:#eae2ff; overflow:hidden; margin-top:.4em}
.spannung i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lila-hell),var(--lila)); border-radius:999px}

.status{text-align:center; color:var(--grau); font-size:clamp(12px,1vw,17px); margin-top:.6em}
.status.blinkt{animation:blinken 1s ease-in-out infinite}
@keyframes blinken{0%,100%{opacity:1}50%{opacity:.45}}

/* Ergebnis */
.ergebnis{text-align:center; padding:.6em 0 .2em}
.ergebnis .gross{
  font-family:var(--display); font-weight:400;
  font-size:clamp(28px,3.4vw,60px); line-height:1;
  animation:knallen .45s cubic-bezier(.2,1.6,.4,1);
}
.ergebnis.gut .gross{color:var(--gruen)}
.ergebnis.schlecht .gross{color:var(--rot)}
.ergebnis .summe{
  font-size:clamp(18px,1.8vw,32px); font-weight:700;
  font-variant-numeric:tabular-nums; margin-top:.15em;
}
.ergebnis .zusatz{color:var(--grau); font-size:clamp(12px,1vw,17px); margin-top:.5em}
@keyframes knallen{
  from{transform:scale(.5); opacity:0}
  to{transform:scale(1); opacity:1}
}

/* Eingabefeld */
.feld{
  width:100%;
  border:2px solid #e0d6ff;
  border-radius:10px;
  padding:.7em .9em;
  font-family:inherit;
  font-size:clamp(14px,1.2vw,20px);
  color:var(--tinte);
  margin:.6em 0 1em;
  background:#faf8ff;
}
.feld:focus{outline:none; border-color:var(--lila)}

/* ---------- Effekte auf der Buehne ---------- */

/* deckt sich mit der Spielszene, liegt aber ueber den Dialogen */
.fx{position:absolute; inset:0; pointer-events:none; overflow:hidden}

/* Fliehender Ganove nach erfolgreichem Coup.

   Zwei Bewegungen, sauber getrennt: die Huelle traegt ihn quer durchs Bild,
   die Figur darin spielt den Laufzyklus ab. Der besteht aus acht gezeichneten
   Posen in assets/robber-run-sheet.png — vorher war es ein einziges Standbild,
   das seitwaerts glitt, und genau das sah nach Pappaufsteller aus. */
.laeufer{
  position:absolute;
  bottom:6%;
  left:-22%;
  width:clamp(100px,13%,275px);
  /* linear: wer durchs Bild rennt, haelt Tempo — er beschleunigt nicht und
     bremst nicht mitten im Lauf. 125vw deckt Startversatz und eigene Breite
     mit ab, er verlaesst das Bild also vollstaendig. */
  animation:rennen 3s linear forwards;
}
@keyframes rennen{
  from{transform:translateX(0)}
  to  {transform:translateX(125vw)}
}

/* Der Streifen ist 8 Zellen breit, also background-size 800%. steps(8)
   schaltet hart von Pose zu Pose statt weichzublenden — ohne steps() liefe
   das Blatt kontinuierlich durchs Fenster und man saehe stets zwei Halbe. */
.laeufer-fig{
  width:100%;
  aspect-ratio:272 / 304;
  background:url(../assets/robber-run-sheet.png) 0 0 / 800% 100% no-repeat;
  animation:laufzyklus .66s steps(8) infinite;
  filter:drop-shadow(0 8px 10px rgba(30,15,60,.35));
}
@keyframes laufzyklus{
  from{background-position-x:0%}
  to  {background-position-x:100%}
}

/* Muenzenregen */
.muenze{
  position:absolute;
  width:clamp(14px,1.5%,30px); height:clamp(14px,1.5%,30px);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff6c2,#f6cd3f 45%,#e8a81c 70%,#b97c05);
  box-shadow:0 2px 5px rgba(90,60,0,.35);
  animation:muenzeFallen var(--dur,1.5s) cubic-bezier(.3,.1,.6,1) forwards;
}
@keyframes muenzeFallen{
  0%  {transform:translate(0,0) scale(.4) rotate(0deg); opacity:0}
  15% {opacity:1}
  100%{transform:translate(var(--dx,0px),var(--dy,320px)) scale(1) rotate(var(--rot,540deg)); opacity:0}
}

/* Blaulicht bei Fehlschlag */
.sirene{
  position:absolute; inset:0;
  animation:sireneFlack .18s steps(1) 8;
  opacity:0;
}
@keyframes sireneFlack{
  0%  {background:rgba(220,30,40,.34); opacity:1}
  50% {background:rgba(30,80,230,.34); opacity:1}
  100%{background:rgba(30,80,230,0); opacity:0}
}

/* ---------- Meldungen ---------- */

.toasts{
  position:absolute;
  left:50%; bottom:clamp(60px,7vw,120px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; gap:.4em;
  align-items:center;
  pointer-events:none;
  width:max-content; max-width:88%;
}
.toast{
  background:var(--tinte); color:var(--weiss);
  border-radius:999px;
  padding:.5em 1.2em;
  font-weight:600;
  font-size:clamp(12px,1vw,18px);
  box-shadow:var(--schatten);
  animation:toastRein .32s cubic-bezier(.2,1.3,.4,1);
}
.toast.gut{background:linear-gradient(180deg,#5cb845,#3f8a2c)}
.toast.schlecht{background:linear-gradient(180deg,#e0453c,#b32a22)}
.toast.weg{animation:toastRaus .3s ease forwards}
@keyframes toastRein{from{opacity:0; transform:translateY(14px) scale(.94)}to{opacity:1; transform:none}}
@keyframes toastRaus{to{opacity:0; transform:translateY(-10px) scale(.96)}}

/* ---------- Anmeldung / Registrierung ---------- */

.auth{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(10px,2vw,30px);
  background:rgba(20,8,52,.62);
  overflow:auto;
  animation:einblendenSoft .3s ease;
}
.auth[hidden]{display:none}

.auth-card{
  width:min(100%,440px);
  background:var(--weiss);
  border-radius:var(--radius);
  padding:clamp(18px,2vw,34px);
  box-shadow:var(--schatten);
  animation:karteRein .35s cubic-bezier(.2,1.2,.4,1);
}

.auth-logo{
  font-family:var(--display);
  font-weight:400;
  color:var(--lila);
  font-size:clamp(30px,3.4vw,52px);
  line-height:1;
  margin:0 0 .5em;
  text-align:center;
  letter-spacing:.01em;
}

.auth-tabs{
  display:flex;
  gap:.4em;
  margin-bottom:1.2em;
  border-bottom:2px solid #eee5ff;
}
.auth-tab{
  flex:1;
  appearance:none; -webkit-appearance:none;
  background:none; border:0;
  padding:.6em .4em;
  cursor:pointer;
  color:var(--grau);
  font-family:inherit;
  font-weight:700;
  font-size:clamp(13px,1.1vw,19px);
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:color .18s ease, border-color .18s ease;
}
.auth-tab:hover{color:var(--lila)}
.auth-tab.is-active{color:var(--lila); border-bottom-color:var(--lila)}

.auth-form{animation:einblendenSoft .25s ease}
.auth-form[hidden]{display:none}

.auth-label{
  display:block;
  font-size:clamp(11px,.9vw,15px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--grau);
  margin-bottom:.15em;
}
/* .feld bringt schon margin mit — hier oben knapper halten */
.auth-form .feld{margin:.15em 0 .5em}

.auth-hinweis{
  margin:-.3em 0 .9em;
  font-size:clamp(10px,.85vw,14px);
  color:var(--grau);
  line-height:1.35;
}

.auth-fehler{
  margin:0 0 .9em;
  padding:.6em .8em;
  border-radius:9px;
  background:#fdeaea;
  border:1px solid #f3bcbc;
  color:#a3241d;
  font-size:clamp(11px,.92vw,16px);
  line-height:1.35;
  animation:wackeln .5s cubic-bezier(.36,.07,.19,.97);
}
.auth-fehler[hidden]{display:none}

/* Knopf im Wartezustand */
.knopf.laedt{position:relative; color:transparent}
.knopf.laedt::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:1.1em; height:1.1em;
  margin:-.55em 0 0 -.55em;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:drehen .7s linear infinite;
}
@keyframes drehen{to{transform:rotate(360deg)}}

/* ---------- Rücksicht auf Systemeinstellung ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .scene-bg{transform:scale(1.04)}
  /* Ohne diese Zeilen spraenge der Zeppelin sofort ans Ende seiner Fahrt —
     also aus dem Bild heraus. Stattdessen parkt er sichtbar am Himmel. */
  .zeppelin{animation:none; transform:translateX(-42vw)}
  .zeppelin img{animation:none}
  .flugzeug{animation:none; transform:translateX(30vw)}
  .flugzeug img{animation:none}
}