/* ============================================================
   Jumpmaster – UI Styles
   Basis-Auflösung: 480 x 800. #app wird per JS skaliert,
   dadurch können alle Werte in "Design-Pixeln" bleiben.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Sichere Bereiche der Systemleisten (Status-/Navigationsleiste, Notch).
   Werden in main.js ausgelesen, damit das Spiel NUR den sichtbaren
   Bildschirm nutzt und keine Plattformen unter den Leisten verschwinden. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html, body {
  width: 100%; height: 100%;
  background: #0b0d1a;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #fff;
  user-select: none;
}

/* WICHTIG: Eingabefelder brauchen Textauswahl – sonst zeigt der
   Android-WebView weder Cursor noch getippten Text an. */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  caret-color: #ffd452;
  font-size: 16px;          /* verhindert automatisches Zoomen beim Fokus */
}

body::before {
  content: "";
  position: fixed; inset: -20%;
  background:
    radial-gradient(circle at 20% 15%, rgba(120, 90, 255, .35), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(0, 200, 255, .28), transparent 55%),
    #0b0d1a;
  filter: blur(10px);
  z-index: 0;
}

#stage { position: fixed; inset: 0; z-index: 1; }

/* ============================================================
   Eingabe-Dialoge – bewusst AUSSERHALB des skalierten #app.
   Feste Bildschirm-Pixel, damit der Android-WebView Cursor und
   Text korrekt anzeigt.
   ============================================================ */
.sheet {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 18px 18px;
  background: rgba(6, 9, 26, .82);
  backdrop-filter: blur(4px);
}
.sheet-box {
  width: 100%; max-width: 360px;
  padding: 22px 20px 18px;
  border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, #1d254f, #131936);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .1);
}
.sheet-box h2 { font: 900 24px/1.2 "Trebuchet MS", sans-serif; color: #fff; margin-bottom: 6px; }
.sheet-sub { font-size: 14px; color: #b9c4ff; margin-bottom: 16px; }

.sheet-input {
  display: block; width: 100%; height: 56px;
  padding: 0 16px; margin-bottom: 10px;
  border: 0; border-radius: 14px;
  background: #0b1024; color: #fff;
  font: 700 20px/56px "Trebuchet MS", sans-serif;
  letter-spacing: 2px; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16);
  -webkit-user-select: text; user-select: text;
  caret-color: #ffd452;
}
.sheet-input:focus { outline: none; box-shadow: inset 0 0 0 2px #ffd452; }
.sheet-input::placeholder { color: #5d6796; letter-spacing: 1px; }

.sheet-msg { min-height: 20px; margin-bottom: 12px; font: 700 13px/1.4 sans-serif; }
.sheet-msg.ok { color: #6affa2; }
.sheet-msg.err { color: #ff8a8a; }

.sheet-actions { display: flex; gap: 10px; }
.sheet-btn {
  flex: 1; height: 52px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 17px/1 "Trebuchet MS", sans-serif; touch-action: manipulation;
}
.sheet-btn.primary { background: linear-gradient(180deg, #ffe27a, #ffb020); color: #10203a; box-shadow: 0 4px 0 #c07800; }
.sheet-btn.ghost { background: rgba(255, 255, 255, .1); color: #cdd6ff; }
.sheet-btn:active { transform: translateY(3px); box-shadow: none; }

/* Breite fest, Höhe wird per JS an das Gerät angepasst (kein Letterboxing) */
#app {
  position: absolute;
  width: 480px;
  transform-origin: top left;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 2px rgba(255, 255, 255, .07);
  background: #10203a;
}

#game { position: absolute; inset: 0; display: block; }

/* Hinweise je nach Eingabegerät ein-/ausblenden */
.is-touch .pc-only { display: none !important; }
.is-desktop .touch-only { display: none !important; }

.layer { position: absolute; inset: 0; }
.hidden { display: none !important; }

/* ---------------- Icon-System (ersetzt Emojis) ---------------- */
.ic {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.2em;
  flex: none;
}
button .ic { margin-right: 7px; }
.ic-world { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
/* Welt-Motiv als große Kachel (Shop, Hauptmenü, Event-Seite). Die
   Kachel bringt ihre eigene runde Form mit, deshalb hier weder Rahmen
   noch Schatten – sonst läge ein zweites Rechteck darum. */
.world-thumb { display: flex; align-items: center; justify-content: center; }
.world-thumb .ic-world {
  width: 100%; height: 100%;
  border-radius: 0; box-shadow: none;
  vertical-align: top;
}
.ic-medal { width: 1.35em; height: 1.35em; }

/* ---------------- Buttons ---------------- */
.btn {
  display: block;
  width: 260px;
  margin: 0 auto 12px;
  padding: 14px 18px;
  font: 700 20px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 1px;
  color: #10203a;
  background: linear-gradient(180deg, #ffe27a, #ffb020);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 5px 0 #c07800, 0 10px 22px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .07s, box-shadow .07s, filter .15s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #c07800, 0 4px 12px rgba(0, 0, 0, .35); }
.btn.alt {
  color: #fff;
  background: linear-gradient(180deg, #5a6ff0, #3a45c0);
  box-shadow: 0 5px 0 #232a80, 0 10px 22px rgba(0, 0, 0, .35);
}
.btn.alt:active { box-shadow: 0 1px 0 #232a80; }
.btn.danger {
  color: #fff; width: 100%;
  background: linear-gradient(180deg, #ff6b6b, #d02a2a);
  box-shadow: 0 5px 0 #8e1a1a;
}
.btn.small { font-size: 16px; padding: 11px 14px; }
.btn.big-btn { width: 300px; font-size: 26px; padding: 18px; margin-bottom: 16px; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }

/* Tages-Lauf: eigener Knopf mit Untertitel, farblich abgesetzt vom
   normalen Spielen-Knopf, damit die Menü-Hierarchie klar bleibt. */
.daily-btn {
  width: 260px; padding: 9px 14px; margin: -2px auto 12px;
  color: #10203a;
  background: linear-gradient(180deg, #8fe0ff, #35a8dd);
  box-shadow: 0 5px 0 #1c6f96, 0 10px 22px rgba(0, 0, 0, .35);
  line-height: 1.15;
}
.daily-btn:active { box-shadow: 0 1px 0 #1c6f96; }
.daily-btn small {
  display: block; margin-top: 3px;
  font: 700 13.5px/1.25 sans-serif; letter-spacing: 0;
  color: #0b1730;
}
/* Zwei kleine Knöpfe nebeneinander am Ende des Game-Over-Dialogs */
.go-row { display: flex; gap: 10px; justify-content: center; }
.go-row .btn { width: 126px; margin-bottom: 0; }

.daily-btn.done {
  background: linear-gradient(180deg, #b9c6e8, #8794b8);
  box-shadow: 0 5px 0 #5d6885, 0 10px 22px rgba(0, 0, 0, .3);
}

/* Vorschau-Knopf für kommende Funktionen (z. B. Mehrspieler):
   sichtbar, aber klar als "noch nicht da" erkennbar. */
.btn.soon {
  position: relative;
  width: 260px; padding: 11px 14px; margin: 2px auto 12px;
  background: linear-gradient(180deg, #4a5578, #333c５a);
  background: linear-gradient(180deg, #4a5578, #333c5a);
  box-shadow: 0 5px 0 #232a44, 0 10px 22px rgba(0, 0, 0, .3);
  color: rgba(255, 255, 255, .62);
  cursor: default;
}
.btn.soon i { opacity: .6; }
.btn.soon:active { transform: none; box-shadow: 0 5px 0 #232a44, 0 10px 22px rgba(0, 0, 0, .3); }
.soon-tag {
  position: absolute; top: -8px; right: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, #ffb020);
  color: #3a2600; font: 800 11px/1 sans-serif; letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.menu-row { display: flex; gap: 12px; justify-content: center; }
.menu-row .btn {
  width: 144px; margin-bottom: 12px; font-size: 15.5px; padding: 13px 4px; position: relative;
  /* Emoji + Text immer auf einer Zeile – „Leaderboard" u. Ä. dürfen nicht
     umbrechen. Kleinere Schrift + kein Sperrsatz, damit auch die längeren
     englischen Begriffe nebeneinander passen. */
  white-space: nowrap;
  letter-spacing: 0;
}
/* Der Shop ist der Fortschritts-Knotenpunkt (Münzen ausgeben) und bekommt
   deshalb einen goldenen Akzent – die Reihe wirkt dadurch weniger
   monoton und der Blick findet sofort den wichtigsten Einstieg. */
#btnShop {
  background: linear-gradient(180deg, #6b7bf5, #3f49c9);
  box-shadow: 0 5px 0 #232a80, 0 10px 22px rgba(0, 0, 0, .35),
              inset 0 0 0 1.5px rgba(255, 212, 82, .55);
}
#btnShop:active { box-shadow: 0 1px 0 #232a80, inset 0 0 0 1.5px rgba(255, 212, 82, .55); }

.icon-btn {
  width: 40px; height: 40px;
  border: 0; border-radius: 12px;
  background: rgba(0, 0, 0, .35);
  color: #fff; font: 700 15px/1 sans-serif; letter-spacing: 1px;
  cursor: pointer; backdrop-filter: blur(3px);
}

/* ---------------- Menü ---------------- */
.screen {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(34px + var(--safe-pad-top, 0px)) 24px 22px;
  background: linear-gradient(180deg, rgba(10, 14, 40, .55), rgba(10, 14, 40, .88));
  backdrop-filter: blur(2px);
}

/* Das Hauptmenü ist höher als die Bühne – gemessen 914 Design-Pixel
   gegen 640 bis 840. Weil #app mit overflow:hidden abschneidet, waren
   auf 16:9-Geräten der Duell-Knopf und der Steuerungshinweis schlicht
   NICHT ERREICHBAR (auf einem 768x1024-Tablet noch mehr). Deshalb
   scrollt das Menü jetzt.

   Bewusst NUR hier und nicht auf .screen allgemein: Die anderen
   Bildschirme sind .panel-screen und scrollen längst über .panel-body
   (Zeile 533) – dort gäbe es sonst zwei Scrollflächen übereinander.
   overflow-x bleibt hidden, sonst erscheint auf dem Rechner ein
   waagerechter Balken. */
#menu {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Der Balken nimmt 6 Design-Pixel Layoutbreite weg. Ohne reservierten
     Platz rückt dadurch alles Zentrierte um 3 px aus der Mitte – und das
     ganze Menü springt seitwärts, sobald der Duell-Kasten erscheint oder
     verschwindet und das Menü dadurch überläuft. `both-edges` reserviert
     den Platz auf BEIDEN Seiten und dauerhaft: die Mitte bleibt exakt 240,
     der sichtbare Balken als Hinweis „hier geht es weiter" bleibt erhalten
     (das Menü scrollt erst seit 1.63, der Hinweis ist neu und nötig). */
  scrollbar-gutter: stable both-edges;
}
#menu::-webkit-scrollbar { width: 6px; }
#menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 3px; }

/* ---------------- Highscore-Banner (Menü) ---------------- */
.hs-banner {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 340px;
  margin: 0 auto 6px; padding: 8px 12px;
  border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 212, 82, .16), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .4);
}
.hs-banner:active { transform: scale(.98); }
.hs-ico { font-size: 22px; }
.hs-txt { flex: 1; min-width: 0; text-align: left; line-height: 1.15; }
.hs-txt b { display: block; font-size: 15px; color: #fff; }
.hs-txt span { font-size: 12.5px; color: #ffd452; font-weight: 700; }
.hs-more { font-size: 12px; color: #b9c4ff; font-weight: 700; white-space: nowrap; }

/* Duell: „Ergebnis noch offen" – der Rivale spielt noch. Bewusst in
   Rivalen-Rosa statt Gold: Es ist kein Erfolg, sondern eine Spannung. */
.duel-pending {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; max-width: 340px;
  margin: 0 auto 6px; padding: 9px 12px 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 154, 181, .16), rgba(0, 0, 0, .35));
  box-shadow: inset 0 0 0 1.5px rgba(255, 154, 181, .42);
  animation: dpPuls 1.8s ease-in-out infinite;
}
@keyframes dpPuls {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 154, 181, .42); }
  50%      { box-shadow: inset 0 0 0 1.5px rgba(255, 154, 181, .85); }
}
.dp-ico { font-size: 18px; line-height: 1; }
.dp-head { display: flex; align-items: center; gap: 8px; }
.dp-head b { font-size: 14px; color: #fff; }

/* Rennbahn: Ziellinie rechts ist der eigene Endstand */
.dp-track {
  position: relative; height: 10px; border-radius: 6px;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
  overflow: visible;
}
.dp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff7aa8, #ff9ab5);
  transition: width .12s linear;
}
/* Der Rivale als kleiner Punkt an der Spitze seines Balkens */
.dp-dot {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%;
  background: #ff9ab5; box-shadow: 0 0 8px rgba(255, 154, 181, .9);
  transition: left .12s linear;
}
/* Ziellinie = eigener Stand */
.dp-goal {
  position: absolute; right: 0; top: -4px; bottom: -4px; width: 2px;
  background: #ffd452; border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 212, 82, .8);
}
/* Wird es eng, pocht die Bahn schneller */
.duel-pending.eng .dp-fill { animation: dpEng .55s ease-in-out infinite; }
@keyframes dpEng { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.45); } }

.dp-legend {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; line-height: 1;
}
.dp-legend span:first-child { color: #ff9ab5; }
.dp-legend span:last-child { color: #ffd452; }

.logo { text-align: center; margin-bottom: 6px; }
.logo-canvas {
  display: block; width: 440px; height: 150px; margin: -6px auto 0;
  animation: logoIdle 3.6s ease-in-out infinite;
}
.logo-wrap { position: relative; display: inline-block; padding: 6px 14px; }

.logo-main {
  position: relative; display: inline-block; overflow: hidden;
  font: 900 54px/1.05 "Trebuchet MS", sans-serif;
  letter-spacing: 1px;
  color: #fff;
  transform: rotate(-3deg);
  /* mehrlagiger 3D-Aufbau statt flachem Schatten */
  text-shadow:
    0 2px 0 #5560e8, 0 4px 0 #4450d4, 0 6px 0 #3540b8,
    0 8px 0 #2a3396, 0 10px 0 #202873,
    0 14px 22px rgba(0, 0, 0, .55);
  animation: logoIdle 3.6s ease-in-out infinite;
}
.logo-main span {
  color: #ffd452;
  text-shadow:
    0 2px 0 #e0a800, 0 4px 0 #c08f00, 0 6px 0 #a37700,
    0 8px 0 #855f00, 0 10px 0 #6b4c00,
    0 14px 22px rgba(0, 0, 0, .55);
}
@keyframes logoIdle {
  0%, 100% { transform: rotate(-3deg) translateY(0) scale(1); }
  50%      { transform: rotate(-2deg) translateY(-5px) scale(1.015); }
}

/* Glanzstreifen, der über die Schrift wandert */
.logo-shine {
  position: absolute; top: -30%; left: -60%;
  width: 38%; height: 170%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: logoShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logoShine {
  0%, 62% { left: -60%; }
  92%, 100% { left: 130%; }
}

/* Funkeln rund ums Logo */
.spark {
  position: absolute; font-style: normal; color: #ffe27a;
  font-size: 16px; opacity: 0; pointer-events: none;
  text-shadow: 0 0 10px rgba(255, 226, 122, .9);
  animation: sparkle 2.8s ease-in-out infinite;
}
.spark.s1 { left: -4px;  top: 4px;  animation-delay: 0s; }
.spark.s2 { right: -2px; top: -4px; animation-delay: .7s; font-size: 13px; }
.spark.s3 { left: 16%;   bottom: -6px; animation-delay: 1.4s; font-size: 12px; }
.spark.s4 { right: 14%;  bottom: 0;  animation-delay: 2.1s; }
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  40%      { opacity: 1; transform: scale(1.15) rotate(90deg); }
  70%      { opacity: 0; transform: scale(.5) rotate(160deg); }
}

.logo-sub {
  margin-top: 14px; font-size: 15px; color: #cdd6ff; letter-spacing: 1px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

.wallet {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 14px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 0 2px rgba(255, 210, 80, .45);
  font: 700 22px/1 sans-serif; color: #ffd452;
}
.wallet.small { margin: 0; padding: 5px 12px; font-size: 16px; }

i.coin {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #ffc32b 60%, #d68b00);
  box-shadow: 0 0 6px rgba(255, 200, 60, .7);
}
i.coin.big { width: 22px; height: 22px; }

/* ---------------- Gesamt-Level ----------------
   Eine schmale Zeile unter dem Münzstand: Stufe, Fortschrittsbalken,
   Restpunkte. Bewusst flach gehalten – sie steht direkt über den drei
   Kacheln und darf denen nicht die Aufmerksamkeit nehmen. */
.level-bar {
  display: flex; align-items: center; gap: 8px;
  width: 274px; margin: -6px auto 22px;
  font: 700 12px/1 "Trebuchet MS", sans-serif;
}
/* 22 px statt 14 nach unten: Der Rekord-Reiter ragt oben aus der Kachel
   heraus und stiess sonst direkt an diese Zeile. */
.lv-num { color: #ffd452; white-space: nowrap; }
.lv-num i { font-style: normal; color: #8ea0dd; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.lv-num b { font-size: 15px; }
.lv-track {
  flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
.lv-fill {
  display: block; height: 100%; width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #5a6ff0, #7ef0ff);
  transition: width .5s ease-out;
}
.lv-next { color: #8ea0dd; font-size: 10px; white-space: nowrap; }

/* Elite-Abzeichen: erscheint erst mit Level 100 und ersetzt dann die
   Restpunkt-Anzeige – ab da gibt es nichts mehr zu füllen. */
.elite-badge {
  padding: 3px 9px 4px; border-radius: 999px;
  font: 900 9px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #2a1a00; white-space: nowrap;
  background: linear-gradient(180deg, #ffe98f, #ffb63c);
  box-shadow: 0 2px 8px rgba(255, 180, 60, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
/* Bei Level 100 gibt es nichts mehr zu füllen: Balken raus, und die
   verbleibenden zwei Elemente mittig statt linksbündig – sonst klafft
   rechts eine Lücke. */
.level-bar.maxed { justify-content: center; }
.level-bar.maxed .lv-track { display: none; }

.menu-cards { display: flex; gap: 10px; margin-bottom: 22px; }
.mini-card {
  width: 132px; padding: 10px 8px;
  border-radius: 14px; text-align: center;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.mini-card[id] { cursor: pointer; }
.mini-card.preview { position: relative; padding-bottom: 8px; }
.mini-canvas {
  display: block; width: 52px; height: 52px; margin: 5px auto 3px;
  border-radius: 12px; background: rgba(0, 0, 0, .28);
}
/* Rekord-Kachel: gleiche Höhe/Optik wie die beiden Vorschau-Kacheln,
   damit die Reihe ruhig wirkt (vorher war sie halb leer). */
.record-badge {
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
#cardRecord .mini-value { color: #ffd452; }
/* Krone sitzt schräg oben rechts auf dem Kästchen */
.card-crown {
  position: absolute; top: -13px; right: -8px;
  font-size: 26px; line-height: 1;
  transform: rotate(24deg);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 9px rgba(255, 212, 82, .85));
  animation: crownBob 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes crownBob {
  0%, 100% { transform: rotate(24deg) translateY(0); }
  50%      { transform: rotate(19deg) translateY(-3px); }
}
.mini-label { font-size: 12px; color: #9fb0e8; letter-spacing: 1px; text-transform: uppercase; }
.mini-value { font: 700 18px/1.3 sans-serif; color: #fff; margin-top: 4px; }

.hint { margin-top: auto; font-size: 13px; color: #8b98cf; text-align: center; }

.dot {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d;
}

/* ---------------- Panels (Shop / Missionen / …) ---------------- */
.panel-screen { padding: 0; background: linear-gradient(180deg, #141a3a, #0b0f22); }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-pad-top, 0px)) 16px 12px;
  width: 100%;
  border-bottom: 2px solid rgba(255, 255, 255, .08);
}
.panel-head h2 { font: 700 24px/1 sans-serif; letter-spacing: 1px; }
.back-btn {
  width: 56px; height: 56px; border: 0; border-radius: 14px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 700 34px/1 sans-serif; cursor: pointer;
  touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
.back-btn:active { background: rgba(255, 255, 255, .26); transform: scale(.94); }

/* Alle Schaltflächen: kein 300-ms-Verzögerung auf Touchgeräten */
button { touch-action: manipulation; }

.tabs { display: flex; width: 100%; padding: 10px 12px 0; gap: 6px; }
.tabs { gap: 4px; }
.tab {
  flex: 1; padding: 11px 2px; border: 0; cursor: pointer;
  border-radius: 12px 12px 0 0;
  background: rgba(255, 255, 255, .06);
  color: #93a1d8; font: 700 13px/1 sans-serif;
  white-space: nowrap;
}
.tab.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 -3px 0 #ffd452; }
.tab.premium-tab { color: #ffd452; }
.tab.premium-tab.active { box-shadow: inset 0 -3px 0 #ff9ad5; }

.panel-body { flex: 1; width: 100%; overflow-y: auto; padding: 12px 14px 30px; }
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }

.section-title {
  margin: 14px 2px 8px; font: 700 13px/1.35 sans-serif;
  letter-spacing: 2px; text-transform: uppercase; color: #8ea0dd;
  /* line-height 1 schnitt bei Großbuchstaben die Umlautpunkte ab
     ("HÖHE" sah aus wie "HOHE") – daher etwas mehr Zeilenhöhe. */
}
.daily-head { display: flex; justify-content: space-between; align-items: center; }
.daily-head span:first-child { color: #ffd452; }
.daily-reset { font-size: 11px; letter-spacing: .5px; text-transform: none; color: #8ea0dd; }

/* ---------------- Shop-Karten ---------------- */
.card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: box-shadow .15s, background .15s;
}
.card.owned { background: rgba(90, 255, 160, .09); box-shadow: inset 0 0 0 1px rgba(90, 255, 160, .3); }
.card.active { background: rgba(255, 212, 82, .13); box-shadow: inset 0 0 0 2px #ffd452; }
.card.locked { opacity: .92; }

.card canvas, .card .thumb {
  width: 62px; height: 62px; flex: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, .3);
}
.card-info { flex: 1; min-width: 0; }
.card-name { font: 700 17px/1.2 sans-serif; display: flex; align-items: center; gap: 6px; }
.card-desc { font-size: 12.5px; color: #a9b6e6; margin-top: 3px; line-height: 1.35; }
.card-perk { font-size: 12px; color: #ffd452; margin-top: 4px; font-weight: 700; }

.card-action { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.buy {
  border: 0; border-radius: 12px; cursor: pointer;
  padding: 9px 12px; min-width: 84px;
  font: 700 14px/1 sans-serif;
  color: #10203a;
  background: linear-gradient(180deg, #ffe27a, #ffb020);
  box-shadow: 0 3px 0 #c07800;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #c07800; }
.buy.poor { background: linear-gradient(180deg, #6d7590, #4d5470); color: #cfd6ee; box-shadow: 0 3px 0 #333a55; }
.buy.select { background: linear-gradient(180deg, #6affa2, #17c06a); color: #08301c; box-shadow: 0 3px 0 #0d7a42; }
.buy.equipped { background: none; box-shadow: none; color: #ffd452; cursor: default; font-size: 13px; }
.buy.max { background: none; box-shadow: none; color: #8ea0dd; cursor: default; }

.lvlbar { width: 96px; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .4); overflow: hidden; margin-top: 6px; }
.lvlbar > i { display: block; height: 100%; background: linear-gradient(90deg, #6affa2, #ffd452); }

/* ---------------- Spezial-Charaktere ---------------- */
.premium-intro {
  padding: 12px 14px; margin-bottom: 12px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 154, 213, .18), rgba(120, 90, 255, .18));
  box-shadow: inset 0 0 0 1px rgba(255, 212, 82, .3);
  font-size: 12.5px; line-height: 1.45; color: #dfe6ff;
}
.premium-intro b { color: #ffd452; }

.card.premium {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(120, 90, 255, .22), rgba(255, 120, 200, .16));
  box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .45), 0 6px 20px rgba(0, 0, 0, .3);
}
.card.premium::after {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 40%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: rotate(18deg);
  animation: sheen 4.5s ease-in-out infinite;
}
@keyframes sheen { 0%, 70% { left: -40%; } 100% { left: 130%; } }
.card.premium.owned { box-shadow: inset 0 0 0 1.5px rgba(106, 255, 162, .55); }
.card.premium .card-info, .card.premium .card-action { position: relative; z-index: 1; }

.buy.money {
  background: linear-gradient(180deg, #ff9ad5, #b44bd8);
  color: #fff; box-shadow: 0 3px 0 #7a2a9c;
  min-width: 92px;
}
.buy.money:active { box-shadow: 0 1px 0 #7a2a9c; }

.bundle-card { background: linear-gradient(135deg, rgba(255, 212, 82, .2), rgba(255, 120, 200, .18)); }
.bundle-save {
  font: 700 11px/1 sans-serif; color: #6affa2;
  margin-top: 4px; letter-spacing: .5px;
}

/* ---------------- Kaufdialog ---------------- */
.buy-dialog { position: relative; padding-top: 34px; }
.buy-badge {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 212, 82, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 212, 82, .5);
  font: 700 11px/1 sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #ffd452;
}
.buy-art {
  width: 150px; height: 150px; display: block; margin: 6px auto 4px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .12), rgba(0, 0, 0, .3));
}
.buy-dialog h3 { font: 900 26px/1.2 sans-serif; letter-spacing: .5px; }
.buy-perk { font: 700 13px/1.4 sans-serif; color: #ffd452; margin: 6px 12px 0; }
.buy-desc { font-size: 13px; color: #b9c4ff; margin: 8px 10px 0; line-height: 1.45; }
.buy-price { font: 900 32px/1 sans-serif; color: #fff; margin: 14px 0 4px; }
.buy-note {
  font-size: 11.5px; color: #8b98cf; line-height: 1.45;
  margin: 0 6px 14px;
}

.opt-hint { display: block; font-size: 11.5px; color: #8b98cf; line-height: 1.45; }

/* ---------------- Missionen / Erfolge ---------------- */
.mission {
  padding: 12px; margin-bottom: 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.mission.done { background: rgba(90, 255, 160, .1); box-shadow: inset 0 0 0 1px rgba(90, 255, 160, .35); }
.mission.daily-card { background: linear-gradient(135deg, rgba(255, 212, 82, .12), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px rgba(255, 212, 82, .32); }
.mission.daily-card.done { box-shadow: inset 0 0 0 1px rgba(90, 255, 160, .4); }
.mission-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mission-name { font: 700 15px/1.2 sans-serif; }
.mission-rew { font: 700 14px/1 sans-serif; color: #ffd452; display: flex; align-items: center; gap: 5px; flex: none; }
.bar { height: 9px; border-radius: 5px; background: rgba(0, 0, 0, .4); overflow: hidden; margin-top: 9px; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4facfe, #6affa2); transition: width .4s; }
.mission-num { font-size: 12px; color: #a9b6e6; margin-top: 5px; }

.achieve {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}
.achieve.got { background: rgba(255, 212, 82, .12); }
.achieve .ico { font-size: 24px; width: 30px; text-align: center; filter: grayscale(1) opacity(.5); }
.achieve.got .ico { filter: none; }
/* Angefangene Erfolge nicht ausgrauen – nur noch unberührte */
.achieve.started .ico { filter: none; }
.achieve .txt { flex: 1; min-width: 0; }
.achieve .txt b { font-size: 14.5px; }
.achieve .txt small { display: block; color: #a9b6e6; font-size: 12px; }

/* Stufen-Sterne, Fortschrittsbalken und Kategorie-Kopfzeile */
.ach-tier { font-size: 12px; color: #ffd452; letter-spacing: 1px; font-weight: 400; }
.ach-bar {
  position: relative; height: 6px; margin-top: 6px;
  border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden;
}
.ach-bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  border-radius: 99px; background: linear-gradient(90deg, #6de08a, #ffd452);
}
.ach-num { color: #8ea0dd !important; font-size: 11px !important; margin-top: 3px; }
.section-title.ach-cat { display: flex; justify-content: space-between; align-items: baseline; }
.ach-cat-num { color: #ffd452; letter-spacing: 1px; }

/* ---------------- Statistik ---------------- */
.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 13px; margin-bottom: 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); font-size: 15px;
}
.stat-row b { color: #ffd452; font-size: 17px; }

/* ---------------- Events ---------------- */
.ev-card {
  padding: 12px; margin-bottom: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ev-card.active { background: linear-gradient(135deg, rgba(106, 255, 162, .12), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1.5px rgba(106, 255, 162, .4); }
.ev-top { display: flex; align-items: center; gap: 12px; }
.ev-top canvas { width: 58px; height: 58px; border-radius: 12px; flex: none; }
.ev-info { flex: 1; min-width: 0; }
.ev-info b { font: 700 16px/1.2 sans-serif; }
.ev-info small { display: block; font-size: 12px; color: #a9b6e6; margin-top: 2px; }
.ev-status { display: inline-block; margin-top: 4px; font: 700 12px/1 sans-serif; padding: 3px 8px; border-radius: 999px; }
.ev-status.on { color: #08301c; background: #6affa2; }
.ev-status.off { color: #b9c4ff; background: rgba(255, 255, 255, .1); }
.ev-costume {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ev-costume canvas { width: 46px; height: 46px; border-radius: 10px; background: rgba(0, 0, 0, .25); flex: none; }
.ev-costume .cinfo { flex: 1; min-width: 0; }
.ev-costume .cinfo b { font: 700 14px/1.2 sans-serif; color: #ffd452; }
.ev-costume .cinfo small { display: block; font-size: 11.5px; color: #a9b6e6; margin-top: 2px; }

/* ---------------- Bestenliste ---------------- */
.lb-scope { display: flex; gap: 6px; padding: 12px 12px 0; width: 100%; }
.lb-scope-btn {
  flex: 1; padding: 10px 4px; border: 0; cursor: pointer; border-radius: 12px;
  background: rgba(255, 255, 255, .07); color: #93a1d8; font: 700 14px/1 sans-serif;
}
.lb-scope-btn.active { background: rgba(255, 212, 82, .18); color: #ffd452; box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .5); }

.lb-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; width: 100%;
  -webkit-overflow-scrolling: touch;
}
.lb-tabs::-webkit-scrollbar { height: 0; }
.lb-tab {
  flex: none; padding: 8px 12px; border: 0; cursor: pointer; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: #93a1d8; font: 700 13px/1 sans-serif; white-space: nowrap;
}
.lb-tab.active { background: rgba(255, 212, 82, .18); color: #ffd452; box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .5); }
.lb-tab.locked { opacity: .5; }

.lb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; margin-bottom: 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}
.lb-row.me { background: rgba(255, 212, 82, .13); box-shadow: inset 0 0 0 1px rgba(255, 212, 82, .4); }
.lb-rank { width: 26px; text-align: center; font: 900 16px/1 sans-serif; color: #8ea0dd; }
.lb-row:nth-child(1) .lb-rank { color: #ffd452; }
/* Figur des Laufs – kleines Bildchen zwischen Rang und Name */
.lb-char {
  width: 26px; height: 26px; flex: 0 0 26px; margin: -4px -2px;
  border-radius: 8px; background: rgba(255, 255, 255, .07);
}
.lb-name { flex: 1; font: 700 15px/1.2 sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font: 900 16px/1 sans-serif; color: #fff; }
.lb-empty { text-align: center; color: #8ea0dd; font-size: 14px; padding: 30px 10px; }

/* Verbindungs-Diagnose im Squishly-Menü */
.diag-box {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); text-align: left;
  font: 500 11.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.diag-title {
  margin: 8px 0 4px; font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #8ea0dd;
}
.diag-title:first-child { margin-top: 0; }
.diag-row { display: flex; justify-content: space-between; gap: 10px; }
.diag-row span { color: #a9b6e6; flex: none; }
.diag-row b { font-weight: 700; text-align: right; word-break: break-word; color: #e8eeff; }
.diag-row b.ok  { color: #8ede4f; }
.diag-row b.bad { color: #ff8a8a; }
/* Erklärung unter dem eigenen Eintrag, wenn Google noch keine
   öffentliche Rangliste ausliefert. */
.lb-note {
  margin: 10px 2px 0; padding: 9px 11px;
  border-radius: 10px; background: rgba(120, 140, 220, .12);
  font-size: 11.5px; line-height: 1.45; color: #a9b6e6;
}
.diag-act { margin: 8px 0 2px; }
.diag-act .btn { width: 100%; }

.name-sub { font-size: 14px; color: #b9c4ff; margin: -8px 0 14px; }

/* ---------------- Bestätigungsdialog ---------------- */
.confirm-icon { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.confirm-text { font-size: 14.5px; line-height: 1.5; color: #c7d2f5; margin: 0 4px 14px; }
.confirm-highlight {
  margin: 0 0 16px; padding: 12px;
  border-radius: 14px;
  background: rgba(255, 212, 82, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .45);
  font: 900 22px/1.2 "Trebuchet MS", sans-serif; color: #ffd452;
}
.confirm-highlight small { display: block; font: 400 12px/1.4 sans-serif; color: #b9c4ff; margin-top: 4px; }

/* Easter Egg */
.egg-heart { color: #ff6b8a; cursor: pointer; display: inline-block; transition: transform .15s; }
.egg-heart.beat { transform: scale(1.6); }
#eggName { cursor: pointer; }

/* ---------------- Test-Build-Wasserzeichen ---------------- */
#testWatermark {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  z-index: 200; pointer-events: none;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 60, 60, .9); color: #fff;
  font: 900 11px/1 sans-serif; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}

/* ---------------- Optionen ---------------- */
.opt-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 14px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); font-size: 16px;
}
.opt-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.toggle {
  width: 56px; height: 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: #444d70; position: relative; transition: background .2s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  transition: transform .2s;
}
.toggle.on { background: #17c06a; }
.toggle.on::after { transform: translateX(26px); }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 10px 4px; border: 0; cursor: pointer; border-radius: 10px;
  background: rgba(255, 255, 255, .08); color: #a9b6e6; font: 700 14px/1 sans-serif;
}
.seg button.on { background: #5a6ff0; color: #fff; }

.credits { margin-top: 18px; text-align: center; font-size: 12px; color: #6f7cae; cursor: pointer; user-select: none; }

.promo-input {
  width: 100%; padding: 13px 14px; margin-bottom: 10px;
  border: 0; border-radius: 12px;
  background: rgba(0, 0, 0, .35); color: #fff;
  font: 700 17px/1 "Trebuchet MS", sans-serif; letter-spacing: 2px; text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.promo-input::placeholder { color: #6f7cae; letter-spacing: 1px; }
.promo-input:focus { outline: none; box-shadow: inset 0 0 0 2px #ffd452; }
.promo-msg { min-height: 18px; margin: 6px 0 10px; font: 700 13px/1.3 sans-serif; }
.promo-msg.ok { color: #6affa2; }
.promo-msg.err { color: #ff8a8a; }
#devSection .btn { margin-bottom: 8px; }
#devSection .btn.on { box-shadow: 0 5px 0 #0d7a42; background: linear-gradient(180deg, #6affa2, #17c06a); color: #08301c; }

/* ---------------- Overlays ---------------- */
/* z-index MUSS über der Touch-Ebene liegen: #touch steht im HTML nach
   #pause, würde sonst darüber liegen und alle Klicks abfangen. */
.overlay {
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 9, 26, .78);
  backdrop-filter: blur(4px);
  z-index: 150;
}
.dialog {
  width: 340px; padding: 26px 22px 22px;
  border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, #1d254f, #131936);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .1);
  animation: pop .25s cubic-bezier(.2, 1.4, .5, 1);
}
.dialog.wide { width: 380px; }

/* Dialoge mit Tastatur-Eingabe nach oben rücken,
   damit die Bildschirmtastatur das Feld nicht verdeckt */
.overlay.keyboard-safe { align-items: flex-start; padding-top: 24px; }
.dialog h2 { margin-bottom: 20px; font-size: 30px; letter-spacing: 1px; }

/* ---------------- Interaktive Tour ---------------- */
.tour { z-index: 300; }
/* Vier Masken dunkeln alles ab AUSSER dem hervorgehobenen Element */
.tour-mask {
  position: absolute; background: rgba(6, 9, 26, .82);
  transition: all .25s ease;
}
.tour-ring {
  position: absolute; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px #ffd452, 0 0 22px 4px rgba(255, 212, 82, .55);
  transition: all .25s ease;
}
.tour-ring.pulse { animation: tourPulse 1.3s ease-in-out infinite; }
@keyframes tourPulse {
  0%, 100% { box-shadow: 0 0 0 3px #ffd452, 0 0 20px 3px rgba(255, 212, 82, .45); }
  50%      { box-shadow: 0 0 0 4px #fff0a0, 0 0 30px 7px rgba(255, 212, 82, .75); }
}
.tour-box {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 300px; max-width: calc(100% - 28px);
  padding: 16px 18px 40px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #202a58, #141a38);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .1);
  transition: top .25s ease;
}
.tour-art {
  width: 100%; max-width: 260px; height: auto; margin: 0 auto 10px;
  border-radius: 12px; background: #bfe8ff; display: block;
}
.tour-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; color: #ffd452; }
.tour-text { font-size: 14.5px; line-height: 1.45; color: #dfe6ff; }
/* Fußzeile der Tour: Punkte in einer Reihe, darunter die Knöpfe.

   Vorher standen Punkte und Knöpfe nebeneinander (space-between). Das ging
   nicht auf: .btn bringt eine feste Breite von 260 px mit, und .small setzt
   sie nicht zurück. Der Weiter-Knopf ragte dadurch rund 34 px über den
   Kastenrand hinaus, und die Punktreihe wurde auf 5 px Breite gequetscht –
   ihre 12 Punkte stapelten sich als Säule nach unten.

   Untereinander ist auch auf Dauer die richtige Lösung: Mit jedem neuen
   Tour-Schritt kommt ein Punkt dazu, nebeneinander wird es zwangsläufig
   wieder eng. */
.tour-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-top: 16px;
}
.tour-dots {
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
  max-width: 100%;
}
.tour-dots i {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .28);
}
.tour-dots i.on { background: #ffd452; }
.tour-nav { display: flex; gap: 8px; justify-content: center; width: 100%; }
/* width:auto hebt die 260 px aus .btn auf – der Knopf wird so breit,
   wie sein Text es braucht. */
.tour-nav .btn { margin: 0; width: auto; min-width: 0; flex: 0 1 auto; }
#tourPrev { flex: 0 0 44px; width: 44px; padding: 9px 0; }
#tourNext { padding: 11px 20px; }
.tour-skip {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: none; border: none; color: #8ea0dd;
  font-size: 12.5px; text-decoration: underline; cursor: pointer;
}

/* ---------------- Tägliche Anmelde-Belohnung ---------------- */
.db-track {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin: 14px 0 18px;
}
.db-day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px 6px; border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 2px solid transparent;
  font-size: 13px;
}
.db-day small { font-size: 9px; letter-spacing: .3px; color: #8ea0dd; text-transform: uppercase; }
.db-day b { font-size: 12px; color: #ffd452; }
.db-day .coin { width: 13px; height: 13px; }
.db-day.past { background: rgba(106, 255, 162, .12); }
.db-day.past b { color: #6affa2; }
.db-day.now {
  background: rgba(255, 212, 82, .16); border-color: #ffd452;
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(255, 212, 82, .35);
}
/* Tag 7 sitzt neben Tag 5 und 6 – gleiche Kachel-Optik, nur 2 Spalten breit */
.db-day:nth-child(7) { grid-column: span 2; }
.db-day:nth-child(7) b { font-size: 15px; }

/* Ton-Schalter im Pausenmenü */
.sound-row { display: flex; justify-content: center; gap: 14px; margin-bottom: 20px; }
.icon-toggle {
  width: 62px; height: 62px; border: 0; border-radius: 18px; cursor: pointer;
  font-size: 27px; line-height: 1;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.icon-toggle.on {
  background: rgba(106, 255, 162, .18);
  box-shadow: inset 0 0 0 2px rgba(106, 255, 162, .6);
}
.icon-toggle.off { opacity: .45; }
.icon-toggle:active { transform: scale(.94); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.go-title { font: 900 30px/1 sans-serif; color: #ff7a7a; letter-spacing: 1px; }
.go-score { font: 900 62px/1.1 sans-serif; color: #fff; text-shadow: 0 4px 0 #2b2fa0; margin-top: 6px; }
.go-best { font-size: 14px; color: #a9b6e6; margin-bottom: 14px; }
.go-stats { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.go-stats > div {
  flex: 1; padding: 9px 4px; border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 700 18px/1 sans-serif; color: #ffd452;
}
.go-stats small { font-weight: 400; font-size: 11px; color: #a9b6e6; }
/* ---------------- Belohnungs-Karten nach dem Spiel ---------------- */
.reward-strip {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -22px 8px; padding: 4px 22px 10px;
  -webkit-overflow-scrolling: touch;
}
.reward-strip::-webkit-scrollbar { height: 0; }
.reward-strip:empty { display: none; }

.reward-card {
  flex: none; scroll-snap-align: center;
  width: 208px; padding: 12px 13px;
  border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, rgba(255, 212, 82, .18), rgba(255, 255, 255, .06));
  box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .45);
  animation: rewardPop .45s cubic-bezier(.2, 1.5, .5, 1) backwards;
}
.reward-card.ach { background: linear-gradient(135deg, rgba(120, 200, 255, .2), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1.5px rgba(120, 200, 255, .5); }
.reward-card.cos { background: linear-gradient(135deg, rgba(255, 154, 213, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1.5px rgba(255, 154, 213, .55); }
.reward-card.rank { background: linear-gradient(135deg, rgba(106, 255, 162, .2), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1.5px rgba(106, 255, 162, .5); }
@keyframes rewardPop { from { transform: scale(.7) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.rw-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.rw-ico { font-size: 22px; }
.rw-kind {
  /* Zeilenhöhe > 1, sonst fehlen bei Großbuchstaben die Umlautpunkte
     (z. B. „MÜNZ-PARADIES" nach jeder Runde). */
  font: 900 10.5px/1.3 "Trebuchet MS", sans-serif; letter-spacing: 1.6px;
  text-transform: uppercase; color: #ffd452;
}
.reward-card.ach .rw-kind { color: #8fd6ff; }
.reward-card.cos .rw-kind { color: #ffb3e6; }
.reward-card.rank .rw-kind { color: #8affc0; }
.rw-title { font: 700 14px/1.3 sans-serif; color: #fff; }
.rw-sub { font-size: 11.5px; color: #b9c4ff; margin-top: 3px; line-height: 1.35; }
.rw-coins {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  font: 900 14px/1 sans-serif; color: #ffd452;
}

.reward-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.reward-dots:empty { display: none; }
.reward-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: all .2s; }
.reward-dots i.on { background: #ffd452; width: 16px; border-radius: 3px; }

/* ---------------- Münzflug ins Konto ---------------- */
.coin-fly { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.fly-coin {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #ffc32b 60%, #d68b00);
  box-shadow: 0 0 12px rgba(255, 200, 60, .9);
}
.wallet.pump { animation: walletPump .28s ease-out; }
@keyframes walletPump { 50% { transform: scale(1.16); } }

/* Erfahrungsfunken – kleiner und kühler als die Münzen, damit man beide
   Zählläufe auch dann unterscheidet, wenn sie kurz hintereinander laufen. */
.fly-xp {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #dffcff, #7ef0ff 55%, #3a7fe0);
  box-shadow: 0 0 10px rgba(126, 240, 255, .9);
}
/* Stufenaufstieg: die ganze Zeile pulst einmal auf */
.level-bar.levelup .lv-num b { animation: lvPop .55s ease-out; }
.level-bar.levelup .lv-track { animation: lvGlow .8s ease-out; }
@keyframes lvPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); color: #7ef0ff; }
  100% { transform: scale(1); }
}
@keyframes lvGlow {
  0%   { box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
  30%  { box-shadow: 0 0 14px 3px rgba(126,240,255,.75); }
  100% { box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
}

/* ---------------- Rekord-Reiter ----------------
   Schmaler roter Streifen auf der Oberkante der Rekord-Kachel.

   Vorgeschichte: Hier stand eine Fahne mit Mast, Tuch, Lichtblitz und
   Staubwolke – und mit der Punktzahl NOCH EINMAL darauf, obwohl sie
   zwei Zeilen tiefer ohnehin steht. Diese Doppelung zwang das Tuch in
   die Breite und machte das Ganze gross und unruhig. Der Reiter zeigt
   nur, DASS es ein Rekord ist; die Zahl bleibt der Kachel. */
.record-flag {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: -1px;
  padding: 2px 9px 3px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #ff5a5a, #c81e3c);
  color: #fff;
  font: 900 7.5px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 -2px 6px rgba(200, 30, 60, .35);
  z-index: 40; pointer-events: none;
  animation: recordTab .5s cubic-bezier(.2, 1.6, .4, 1);
}
#cardRecord { position: relative; overflow: visible; }
/* Faehrt kurz von hinten unter der Kachel hervor. */
@keyframes recordTab {
  0%   { transform: translate(-50%, 9px); opacity: 0; }
  60%  { transform: translate(-50%, -2px); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

.hs-banner.celebrate { animation: bannerGlow 1.2s ease-out; }
@keyframes bannerGlow {
  0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(255, 212, 82, .4); }
  40% { box-shadow: inset 0 0 0 3px #ffd452, 0 0 26px rgba(255, 212, 82, .8); }
}
.go-name-row { font-size: 13px; color: #a9b6e6; margin-bottom: 12px; }
.go-name-row b { color: #fff; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #ffd452; font: 700 13px/1 sans-serif; text-decoration: underline;
}
.go-missions div { font-size: 13px; color: #6affa2; margin-bottom: 4px; }

/* ---------------- Tutorial ---------------- */
.tut-dialog { width: 360px; padding: 20px 20px 16px; }
.tut-art {
  width: 300px; height: 180px; display: block; margin: 0 auto 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #bfe9ff, #eaf7ff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
}
.tut-title { font: 900 23px/1.15 "Trebuchet MS", sans-serif; color: #fff; margin-bottom: 8px; }
.tut-text { font-size: 15px; line-height: 1.5; color: #c7d2f5; min-height: 66px; padding: 0 4px; }
.tut-dots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 14px; }
.tut-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: all .2s; }
.tut-dots i.on { background: #ffd452; width: 22px; border-radius: 5px; }
.tut-nav { display: flex; gap: 10px; }
.tut-nav .btn { flex: 1; width: auto; margin: 0; }
/* Der einzige Ausweg aus der Anleitung war ein 11 px hoher Textlink –
   fuer einen Daumen unterwegs kaum zu treffen. Optik bleibt ein
   Textlink, die Trefferflaeche waechst auf ~44 echte CSS-Pixel.
   Umrechnung: Die Buehne ist auf 480x800 ausgelegt und wird skaliert –
   auf einem 360er Handy mit Faktor 0,75, also 60 Design-px = 45 CSS-px. */
.tut-skip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 60px; flex-shrink: 0; padding: 0 22px; margin-top: 0;
  background: none; border: 0; color: #aab6e6; font-size: 15px;
  cursor: pointer; text-decoration: underline;
}

/* ---------------- Steuerung wählen (Erststart) ---------------- */
.cp-dialog { width: 360px; padding: 22px 18px 18px; }
.cp-lead { font-size: 14px; line-height: 1.45; color: #c7d2f5; margin-bottom: 16px; padding: 0 4px; }
.cp-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cp-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 0; border-radius: 14px; cursor: pointer;
  text-align: left; background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 2px transparent;
  transition: background .15s, box-shadow .15s;
}
.cp-card.on { background: #5a6ff0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.cp-card i { flex: 0 0 30px; height: 30px; color: #a9b6e6; }
.cp-card.on i { color: #fff; }
.cp-card i svg { width: 30px; height: 30px; display: block; }
.cp-txt { flex: 1; min-width: 0; }
.cp-card b { display: block; font: 900 17px/1.2 "Trebuchet MS", sans-serif; color: #fff; }
.cp-card small { display: block; margin-top: 2px; font-size: 13px; color: #a9b6e6; }
.cp-card.on small { color: rgba(255, 255, 255, .85); }
/* Der Knopf bleibt sichtbar, aber erkennbar tot, bis eine Karte gewählt
   wurde. Ausblenden wäre schlechter: dann sucht man ihn. */
#cpDone[disabled] { opacity: .45; pointer-events: none; }

.ready-text {
  font: 900 130px/1 "Trebuchet MS", sans-serif;
  color: #fff; text-shadow: 0 6px 0 #2b2fa0, 0 0 40px rgba(120, 140, 255, .8);
  animation: cd .6s ease-out;
}
@keyframes cd { from { transform: scale(2.2); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }

/* ---------------- In-Game HUD ---------------- */
/* HUD immer über der Touch-Ebene, damit Pause anklickbar bleibt */
#hud { z-index: 30; pointer-events: none; }
#hud .icon-btn { pointer-events: auto; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(14px + var(--safe-pad-top, 0px)) 14px 0;
}
.icon-btn { width: 52px; height: 52px; font-size: 17px; }
.hud-score { text-shadow: 0 3px 6px rgba(0, 0, 0, .55); }
/* display:block ist hier kein Schönheitsfehler, sondern der Punkt:
   Als Inline-Element ist der Kasten der Punktzahl so hoch, wie die
   Schrift ihn braucht (bei 40 px etwa 46 px) – die angegebene
   Zeilenhöhe 1 gilt für Inline-Boxen nicht als Obergrenze. Der
   Überstand schob sich in die Rekordzeile. Als Block ist der Kasten
   genau 40 px hoch, und der Abstand darunter stimmt wieder. */
.hud-score span { display: block; font: 900 40px/1 sans-serif; color: #fff; }
.hud-score small { display: block; font-size: 13px; color: rgba(255, 255, 255, .75); margin-top: 5px; }
/* Kombo-Anzeige: nur sichtbar, wenn eine Kombo läuft. Der Balken
   füllt sich bis zur nächsten Auszahlung, rechts steht der Betrag. */
.hud-combo {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 212, 82, .45);
  width: fit-content;
  text-shadow: none;
  animation: comboIn .18s ease-out;
}
.hud-combo b { font: 900 15px/1 sans-serif; color: #ffd452; }
.hud-combo .cbar {
  display: block; width: 42px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.hud-combo .cbar u { display: block; height: 100%; background: #ffd452; transition: width .12s linear; }
.hud-combo .cnext {
  display: flex; align-items: center; gap: 3px;
  font: 700 12px/1 sans-serif; color: rgba(255, 255, 255, .8);
}
.hud-combo .cnext .coin { width: 11px; height: 11px; }
@keyframes comboIn { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-coins {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(0, 0, 0, .35);
  font: 700 18px/1 sans-serif; color: #ffd452;
}

/* Power-up-Anzeige läuft im normalen Fluss unter dem Punkteblock mit.

   Früher stand hier `position: absolute; top: 92px`. Der Punkteblock
   darüber wächst aber je nach Lage: Punktzahl allein rund 54 px, mit
   Rekordzeile 69 px, mit laufender Kombo etwa 100 px – und auf Geräten
   mit Display-Aussparung kommt der Sicherheitsabstand noch obendrauf.
   Sobald eine Kombo lief, verdeckten sich Rekord und Jetpack-Anzeige. */
.hud-left { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.power-bar { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pw {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, .4);
  font: 700 12px/1 sans-serif; color: #fff;
}
.pw .ic { font-size: 15px; }
.pw .pbar { width: 54px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.pw .pbar > i { display: block; height: 100%; background: #6affa2; }

/* ---------------- Schieberegler ---------------- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 4px;
  background: rgba(0, 0, 0, .4); outline: none; margin: 4px 0;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #ffb020);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5); cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #ffe27a, #ffb020); cursor: pointer;
}
.sens-val { color: #ffd452; float: right; }


/* ---------------- Steuerungs-Hilfe ---------------- */
.ctrl-hint {
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 120;
  background: rgba(6, 9, 26, .6);
  animation: chFade .3s ease-out;
}
@keyframes chFade { from { opacity: 0; } to { opacity: 1; } }
.ctrl-hint > div { display: none; text-align: center; }
.ctrl-hint.m-tilt .ch-tilt,
.ctrl-hint.m-swipe .ch-swipe,
.ctrl-hint.m-buttons .ch-buttons { display: block; }

.ch-label {
  margin-top: 18px; padding: 0 30px;
  font: 700 19px/1.4 "Trebuchet MS", sans-serif; color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .7);
}
.ch-phone { font-size: 92px; animation: chTilt 1.6s ease-in-out infinite; }
@keyframes chTilt {
  0%, 100% { transform: rotate(-22deg); }
  50% { transform: rotate(22deg); }
}
.ch-hand { font-size: 84px; animation: chSwipe 1.6s ease-in-out infinite; }
@keyframes chSwipe {
  0%, 100% { transform: translateX(-70px); }
  50% { transform: translateX(70px); }
}
.ch-buttons { position: relative; }
.ch-pad {
  position: absolute; top: -10px;
  width: 96px; height: 96px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #fff;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5);
}
.ch-pad.left { left: -150px; animation: chPulse 1.6s ease-in-out infinite; }
.ch-pad.right { right: -150px; animation: chPulse 1.6s ease-in-out infinite .8s; }
@keyframes chPulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.14); opacity: 1; }
}
.ch-buttons .ch-label { margin-top: 110px; }

.readylayer {
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Meldungen NICHT an einer festen Höhe aufhängen. Bei top: 178px lagen sie
   auf jedem Handy mit Kamera-Aussparung mitten im HUD: der linke HUD-Block
   ist schon ohne Aussparung 177 Design-px hoch (Punktzahl, Rekordzeile,
   Kombo, Power-up-Leiste, Rivalen-Leiste) und wächst um --safe-pad-top.
   Ausgelöst wird eine Meldung ausgerechnet beim Aufsammeln eines Power-ups,
   also genau dann, wenn die Leiste wächst. Unten verankert kann das
   konstruktionsbedingt nicht mehr passieren. */
.toasts {
  position: absolute; left: 0; right: 0; top: auto; bottom: 32%;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 60;
}
.toast {
  padding: 8px 18px; border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  font: 700 16px/1 sans-serif; color: #ffd452;
  animation: toastIn 2s ease-out forwards;
}
/* Kurzer "Stups", wenn dieselbe Meldung erneut ausgelöst wird */
.toast.bump { animation: toastBump .25s ease-out, toastIn 2s ease-out forwards; }
@keyframes toastBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes toastIn {
  0% { transform: translateY(14px) scale(.8); opacity: 0; }
  15% { transform: translateY(0) scale(1); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateY(-16px); opacity: 0; }
}

/* ---------------- Touch ---------------- */
.touch { pointer-events: none; }

/* Tippen irgendwo außerhalb der Steuerzonen schießt.
   Oben bleiben 92 px frei, damit der Pause-Knopf erreichbar ist. */
.tshootzone { position: absolute; top: 92px; left: 0; right: 0; bottom: 0; pointer-events: auto; }

/* Steuerzonen liegen darüber und fangen die Berührung ab – unsichtbar.

   Maße nach dem Muster, das mobile Spiele durchgängig benutzen: Die
   Bedienflächen sitzen in den unteren Ecken im Daumenbogen, nicht über
   den halben Bildschirm. Vorher war jede Zone 50 % breit und 42 % hoch –
   sie stießen in der Mitte aneinander und reichten bis weit ins Bild.
   Jetzt bleibt zwischen ihnen ein freier Streifen, und alles darüber
   gehört wieder dem Spiel (und dem Tippen zum Schießen).

   Die Flächen bleiben mit 36 % × 30 % (rund 173 × 240 Design-Pixel)
   deutlich größer als die empfohlene Mindestgröße für Berührungsziele. */
.tpad {
  position: absolute; bottom: 0; height: 30%; width: 36%; pointer-events: auto;
}
.tpad.left { left: 0; } .tpad.right { right: 0; }
.tpad:active { background: rgba(255, 255, 255, .045); }

/* Aussparung für den Schieß-Knopf: Liegt er in einer unteren Ecke, rutscht
   die Steuerfläche auf derselben Seite über ihn. Sie verliert dabei keine
   Höhe, sie sitzt nur höher – die Bedienfläche bleibt also gleich groß.
   Zusätzlich liegt der Knopf im Stapel oben und fängt Berührungen selbst
   ab; die Aussparung sorgt dafür, dass es auch optisch sauber ist. */
.touch.shoot-left  .tpad.left,
.touch.shoot-right .tpad.right { bottom: 112px; }

.tswipe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  pointer-events: auto;
}

/* Einblendung der Steuerfelder: beim ersten Lauf mit einer Steuerung
   und nach jedem Wechsel kurz zeigen, wo links und rechts liegen –
   danach ausblenden. Reine Anzeige, die Berührungsflächen selbst
   ändern sich dadurch nicht. */
.tpad-hint {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
  color: #fff; opacity: 0; pointer-events: none;
}
.tpad.left  .tpad-hint { border-radius: 0 26px 26px 0; }
.tpad.right .tpad-hint { border-radius: 26px 0 0 26px; }
.tswipe .tpad-hint { border-radius: 26px 26px 0 0; }
.tpad-hint b {
  font-size: 42px; line-height: 1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .55);
}
.tpad-hint i {
  font: 900 13px/1 "Trebuchet MS", sans-serif; font-style: normal;
  letter-spacing: 2.5px; text-transform: uppercase; color: #eaf0ff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.show-hint .tpad-hint { animation: padHint 2.4s ease-out forwards; }
@keyframes padHint {
  0%   { opacity: 0; transform: scale(.92); }
  12%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
/* ---------------- Schieß-Knopf ----------------
   Steht im Markup als letztes Kind von #touch und liegt damit über den
   Steuerzonen. z-index zusätzlich gesetzt, damit die Reihenfolge nicht
   von der Position im Dokument abhängt. */
.tshoot {
  position: absolute; z-index: 5;
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(12, 18, 40, .38);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .42),
              0 4px 14px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform .09s ease, background .09s ease;
}
.tshoot .tshoot-ic { display: flex; width: 34px; height: 34px; opacity: .92; }
.tshoot .tshoot-ic svg { width: 100%; height: 100%; }
.tshoot.pressed {
  transform: scale(.9);
  background: rgba(120, 220, 255, .34);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7),
              0 0 18px rgba(120, 220, 255, .5);
}

/* Feste Plätze in den unteren Ecken. Abstand zum Rand so gewählt, dass der
   Knopf im Daumenbogen liegt und nicht an der Bildschirmkante klebt. */
.tshoot.pos-left  { left: 18px;  bottom: 26px; right: auto; }
.tshoot.pos-right { right: 18px; bottom: 26px; left: auto; }
/* Frei gezogen: Position kommt per style-Attribut in Prozent, der Knopf
   wird um seinen Mittelpunkt gesetzt. */
.tshoot.pos-custom { transform: translate(-50%, -50%); }
.tshoot.pos-custom.pressed { transform: translate(-50%, -50%) scale(.9); }

/* ---------------- Konfigurator ---------------- */
.cfg-dialog { max-width: 340px; }
/* Das Seitenverhältnis setzt openShootCfg auf die ECHTE Bühne (480 / BASE_H).
   Fest 480/800 war auf keinem Portrait-Handy richtig – 16:9 hat 853, 20:9
   hat 1067, 21:9 hat 1121 – die Vorschau war damit bis zu 25 % zu kurz, und
   man beurteilte die Daumenreichweite auf einem falschen Rechteck.
   Der Wert hier ist nur noch der Rückfall, falls JS nicht dazu kommt. */
.cfg-stage {
  position: relative; width: 100%; aspect-ratio: 480 / 1067;
  margin: 12px 0 10px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #8fd9ff 0%, #d9f4ff 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
  touch-action: none;                 /* sonst scrollt die Seite beim Ziehen */
}
.cfg-pad {
  position: absolute; bottom: 0; height: 30%; width: 36%;
  background: rgba(20, 40, 90, .22);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
  display: flex; align-items: center; justify-content: center;
  font: 900 11px/1 "Trebuchet MS", sans-serif;
  letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.cfg-pad.left  { left: 0;  border-radius: 0 16px 0 0; }
.cfg-pad.right { right: 0; border-radius: 16px 0 0 0; }
/* Größe relativ zur Vorschaubreite, nicht in festen Pixeln: der echte Knopf
   ist 76 von 480 Design-Pixeln breit = 15,83 %. Fest 58 px machten ihn in
   der Vorschau um ein Viertel zu groß, senkrecht sogar um zwei Drittel. */
.cfg-shoot {
  position: absolute; width: 15.83%; height: auto; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(12, 18, 40, .5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6),
              0 4px 14px rgba(0, 0, 0, .4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: grab; touch-action: none;
}
.cfg-shoot.grabbing { cursor: grabbing; box-shadow: inset 0 0 0 2px #7ef0ff, 0 0 20px rgba(120, 220, 255, .6); }
.cfg-shoot .tshoot-ic { display: flex; width: 26px; height: 26px; }
.cfg-shoot .tshoot-ic svg { width: 100%; height: 100%; }
.cfg-warn { display: block; color: #ffd452; margin-bottom: 10px; line-height: 1.35; }
.cfg-btns { display: flex; gap: 10px; }
.cfg-btns .btn { margin: 0; }

/* ---------------------------------------------------------
   Duell gegen den Rivalen (Vorstufe zum Mehrspieler)
--------------------------------------------------------- */
/* Sitzt in der linken HUD-Spalte und rutscht deshalb mit, wenn
   Rekordzeile oder Kombo darüber auftauchen – dieselbe Lehre wie bei
   der Power-up-Leiste, die einmal auf einer festen Höhe stand. */
.rival-bar {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; padding: 5px 11px 5px 8px;
  background: rgba(20, 10, 40, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 13px; line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  max-width: 190px;
}
.rival-bar .rv-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5c8a; flex: none;
  box-shadow: 0 0 8px rgba(255, 92, 138, .9);
  animation: rvPuls 1.6s ease-in-out infinite;
}
@keyframes rvPuls { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
/* Restabstand zum gestuerzten Rivalen: das jetzt einzige Ziel */
.rv-rest {
  margin-left: 5px; padding: 1px 6px; border-radius: 8px;
  font-size: 11px; font-weight: 800; color: #0d1030;
  background: #ffd452;
}
.rival-bar.raus .rv-dot { background: #6b6b7a; box-shadow: none; animation: none; }
.rival-bar .rv-name {
  color: rgba(255, 255, 255, .82); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rival-bar .rv-score { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Führt der Rivale, wird der Stand rot – das ist die eigentliche
   Information, und sie muss ohne Lesen erkennbar sein. */
.rival-bar.vorn { border-color: rgba(255, 92, 138, .55); background: rgba(70, 10, 40, .6); }
.rival-bar.vorn .rv-score { color: #ff8aa8; }
.rival-bar.pop { animation: rvPop .32s ease-out; }
@keyframes rvPop { 0% { transform: scale(1) } 40% { transform: scale(1.12) } 100% { transform: scale(1) } }

/* ---------------------------------------------------------
   Gegnersuche vor dem Duell
--------------------------------------------------------- */
.mm-card { text-align: center; }
/* Titel im Suchdialog eine Stufe kleiner als Dialog-Ueberschriften -
   "Suche Gegner ..." ist ein Zustand, keine Schlagzeile. */
.mm-card h2 { font-size: 22px; margin-bottom: 6px; }
.mm-card .sheet-sub { margin-bottom: 2px; }
.mm-card #mmCancel { margin-top: 4px; width: 100%; }
.mm-radar {
  position: relative; width: 132px; height: 132px; margin: 4px auto 14px;
  display: grid; place-items: center;
}
/* Drei Ringe, die nacheinander nach außen laufen – das Bild von
   „da draußen wird gesucht". Reines CSS, damit es auch dann flüssig
   bleibt, wenn die Spielschleife gerade nicht läuft. */
.mm-radar .mm-ping {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(120, 200, 255, .55);
  animation: mmPing 2.1s cubic-bezier(.2, .7, .3, 1) infinite;
}
.mm-radar .mm-ping.d2 { animation-delay: .7s; }
.mm-radar .mm-ping.d3 { animation-delay: 1.4s; }
@keyframes mmPing {
  0%   { transform: scale(.35); opacity: 0 }
  20%  { opacity: .85 }
  100% { transform: scale(1); opacity: 0 }
}
.mm-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1), border-color .3s;
}
.mm-avatar canvas { width: 84px; height: 84px; opacity: 0; transition: opacity .3s; }
//* Sobald ein Gegner feststeht: Figur einblenden, Ring grün, kurzer Puls */
#matchmaking.gefunden .mm-avatar { transform: scale(1.12); border-color: rgba(125, 224, 138, .8); }
#matchmaking.gefunden .mm-avatar canvas { opacity: 1; }
#matchmaking.gefunden .mm-ping { animation: none; opacity: 0; }

/* Match-Bildschirm: drei Plätze nebeneinander – du, der gesuchte
   Rivale, und ein freier Platz als Ausblick auf größere Runden. */
.mm-slots {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; align-items: start; margin: 2px 0 10px;
}
.mm-slot { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.mm-slot b {
  font-size: 12.5px; color: #fff; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-slot-sub { font-size: 10.5px; color: #b9c4ff; font-weight: 700; }
.mm-ich .mm-slot-sub { color: #ffd452; }
.mm-kreis {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  border: 2px solid rgba(255, 255, 255, .16);
  display: grid; place-items: center; overflow: hidden;
}
.mm-ich .mm-kreis { border-color: rgba(255, 212, 82, .7); }
.mm-kreis canvas { width: 68px; height: 68px; }
/* Der freie Platz ist bewusst leise: gestrichelt, kein Leuchten. */
.mm-kreis.leer {
  border-style: dashed; border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .03);
}
.mm-kreis.leer span { font-size: 26px; color: rgba(255, 255, 255, .3); line-height: 1; }
.mm-frei b, .mm-frei .mm-slot-sub { color: rgba(255, 255, 255, .38); }
/* Radar im Gegner-Platz auf Slot-Größe bringen */
.mm-slot .mm-radar { width: 74px; height: 74px; margin: 0; }
.mm-slot .mm-avatar { width: 68px; height: 68px; }
.mm-slot .mm-avatar canvas { width: 68px; height: 68px; }
.mm-dots { display: flex; gap: 7px; justify-content: center; margin: 14px 0 18px; }
.mm-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  animation: mmDot 1.2s ease-in-out infinite;
}
.mm-dots i:nth-child(2) { animation-delay: .18s }
.mm-dots i:nth-child(3) { animation-delay: .36s }
@keyframes mmDot { 0%, 100% { opacity: .3; transform: scale(.85) } 50% { opacity: 1; transform: scale(1.15) } }
#matchmaking.gefunden .mm-dots { opacity: 0; transition: opacity .2s; }

/* ---------------------------------------------------------
   Duell-Bilanz in der Statistik
--------------------------------------------------------- */
.duel-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; margin: 8px 0 6px;
            background: rgba(255,255,255,.08); }
.duel-bar > i {
  display: grid; place-items: center;
  font-size: 11px; font-weight: 900; font-style: normal; color: #0b0b0b;
  transition: width .5s cubic-bezier(.4,1.3,.4,1);
  min-width: 0; overflow: hidden;
}
.duel-bar .dw { background: linear-gradient(180deg, #8ff0a4, #4cc46a); }
.duel-bar .dd { background: linear-gradient(180deg, #ffe08a, #e0b12a); }
.duel-bar .dl { background: linear-gradient(180deg, #ffa0a0, #d85a5a); }
.duel-legend { display: flex; gap: 14px; justify-content: center; font-size: 12px;
               color: rgba(255,255,255,.7); margin-bottom: 4px; }
.duel-legend span { display: flex; align-items: center; gap: 5px; }
.duel-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.duel-legend .dw { background: #4cc46a } .duel-legend .dd { background: #e0b12a } .duel-legend .dl { background: #d85a5a }