/* ============================================================
   Kackspecht – Garten-Chaos · Cartoon-UI
   Größen: px-Fallback + cqh (skaliert mit der Spielfläche;
   1cqh = 1% der Spielflächen-Höhe, Design-Referenz 540px)
   ============================================================ */

/* Lokal gebundelte Cartoon-Font (OFL-Lizenz, offline verfügbar) */
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/fredoka-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #3a2317;            /* dunkle Outline-Farbe */
  --parchment: #f6ead3;      /* helles Pergament */
  --parchment-dark: #e8d5b0;
  --wood: #a5682a;
  --wood-dark: #7a4a1d;
  --red: #e63946;
  --green: #6ab04c;
  --font-cartoon: "Fredoka", "Arial Rounded MT Bold", "Chalkboard SE", ui-rounded, system-ui, sans-serif;
  /* weiche Comic-Outline statt -webkit-text-stroke (auf Mobile sauberer) */
  --outline: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink),
             -1px 1px 0 var(--ink), 1px 1px 0 var(--ink),
             0 3px 0 rgba(58,35,23,.75);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  height: -webkit-fill-available;
  /* Deckt in der iOS-Web-App auch Statusbar-/Safe-Area-Zonen ab */
  background: #7cc4ef;
}
body {
  /* iOS-Homescreen-App: fixiert = volle Flaeche, kein Gummiband-Scrollen,
     kein weisser Streifen unten und keine schwarze Statusbar-Zone oben */
  position: fixed;
  inset: 0;
  height: 100%;
  /* heller Himmel statt dunkel: kein hässlicher Flash beim Laden */
  background: linear-gradient(180deg, #7cc4ef, #b8e2f7);
  font-family: var(--font-cartoon);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ---------- Spielfläche: 16:9, zentriert, skaliert ---------- */
#game-wrap {
  position: absolute;
  inset: 0;
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  overflow: hidden;
  container-type: size;    /* macht cqh/cqw-Einheiten möglich */
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
  background: #8ed1f0;
}

.hidden { display: none !important; }

/* ============================================================
   HUD
   ============================================================ */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-cartoon);
}
#hud button { pointer-events: auto; }

.hud-panel {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(58,35,23,.55), inset 0 2px 0 rgba(255,255,255,.6);
  padding: 6px 12px;
  padding: 1.1cqh 2.2cqh;
}

/* --- oben links --- */
.hud-left {
  position: absolute;
  top: 2.5%; left: 1.5%;
  display: flex;
  align-items: center;
  gap: 10px;
  gap: 1.8cqh;
}
.hud-icon-big {
  width: 52px; height: 52px;
  width: 9.6cqh; height: 9.6cqh;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: #fff7e8;
  object-fit: cover;
}
.hud-name {
  font-size: 15px;
  font-size: 2.8cqh;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--ink);
}
.hud-hearts { display: flex; gap: 2px; margin: 2px 0; }
.hud-heart {
  width: 24px; height: 24px;
  width: 4.4cqh; height: 4.4cqh;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.25));
}
.hud-bombs { display: flex; align-items: center; gap: 5px; }
.hud-icon-small {
  width: 22px; height: 22px;
  width: 4cqh; height: 4cqh;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

.hud-number {
  font-size: 16px;
  font-size: 3cqh;
  font-weight: 700;
  color: #fff;
  text-shadow: var(--outline);
}

/* --- Chaos-Meter mittig --- */
.hud-chaos {
  position: absolute;
  top: 2.5%; left: 50%;
  transform: translateX(-50%);
  width: 34%;
  text-align: center;
}
.hud-chaos-label {
  display: inline-block;
  font-size: 14px;
  font-size: 2.6cqh;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fff;
  background: var(--ink);
  border-radius: 10px;
  padding: 2px 14px;
  margin-bottom: 3px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.hud-chaos-bar {
  position: relative;
  height: 24px;
  height: 4.4cqh;
  background: #4a3020;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5), 0 3px 0 rgba(58,35,23,.5);
}
.hud-chaos-fill {
  position: absolute;
  left: 2px; top: 2px; bottom: 2px;
  width: 0%;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffd23f, #ff9f1c, #e63946);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45);
  transition: width .12s linear;
}
.hud-chaos-bar.maxchaos {
  animation: chaosPulse .35s infinite alternate;
}
@keyframes chaosPulse {
  from { box-shadow: 0 0 8px 2px #ff9f1c, inset 0 3px 6px rgba(0,0,0,.5); }
  to   { box-shadow: 0 0 22px 6px #e63946, inset 0 3px 6px rgba(0,0,0,.5); }
}
.hud-chaos-icon {
  position: absolute;
  right: -16px; top: 62%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  width: 6.3cqh; height: 6.3cqh;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
}

/* --- oben rechts --- */
.hud-right {
  position: absolute;
  top: 2.5%; right: 1.5%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  gap: 1.4cqh;
}
.hud-score-panel { text-align: center; min-width: 110px; min-width: 20cqh; }
.hud-score-label {
  font-size: 11px;
  font-size: 2cqh;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--wood-dark);
}
.hud-score {
  font-size: 26px;
  font-size: 4.8cqh;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: var(--outline);
}
.hud-counters {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 10px;
  padding: 0.9cqh 1.8cqh;
}
.hud-counter { display: flex; align-items: center; gap: 5px; }

/* --- runde Buttons --- */
.btn-round {
  width: 46px; height: 46px;
  width: 8.5cqh; height: 8.5cqh;
  border-radius: 50%;
  border: 3px solid #000;
  background: radial-gradient(circle at 35% 30%, #4a4a52, #1d1d24);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s;
}
.btn-round:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.pause-bars { display: flex; gap: 5px; gap: 1cqh; }
.pause-bars i {
  display: block;
  width: 6px; height: 18px;
  width: 1.1cqh; height: 3.3cqh;
  background: #fff;
  border-radius: 3px;
}

/* --- Mobile Touch-Buttons --- */
#touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.btn-touch {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  border: 4px solid var(--ink);
  font-family: var(--font-cartoon);
  font-weight: 700;
  color: #fff;
  text-shadow: var(--outline);
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
  -webkit-tap-highlight-color: transparent;
}
.btn-touch:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.btn-jump {
  right: 3.5%;
  bottom: calc(6% + env(safe-area-inset-bottom, 0px));
  width: 17cqh; height: 17cqh;
  font-size: 7cqh;
  background: radial-gradient(circle at 35% 30%, #8ecf5a, #4c8a34);
}
.btn-bomb {
  right: calc(3.5% + 19cqh);
  bottom: calc(9% + env(safe-area-inset-bottom, 0px));
  width: 13cqh; height: 13cqh;
  background: radial-gradient(circle at 35% 30%, #9c7a3c, #5d431c);
}
.btn-bomb img { width: 8cqh; height: 8cqh; }
.btn-dash {
  left: 3.5%;
  bottom: calc(6% + env(safe-area-inset-bottom, 0px));
  width: 15cqh; height: 15cqh;
  font-size: 3.6cqh;
  letter-spacing: 1px;
  background: radial-gradient(circle at 35% 30%, #6db9e8, #2a6ea3);
}

/* --- Hochformat-Hinweis (nur Touch + Portrait) --- */
#rotate-hint { display: none; }
@media (orientation: portrait) {
  #rotate-hint:not(.hidden) {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background: rgba(43,29,18,.92);
  }
}
.rotate-card {
  font-family: var(--font-cartoon);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-shadow: var(--outline);
}

/* ============================================================
   Screens (Start / Pause / Game Over / Hilfe)
   ============================================================ */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 29, 18, .55);
  backdrop-filter: blur(2px);
  z-index: 10;
}
#screen-start { background: linear-gradient(180deg, rgba(120,190,235,.75), rgba(43,29,18,.65)); }

.screen-card {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 8px 0 rgba(58,35,23,.6), 0 16px 40px rgba(0,0,0,.45);
  padding: 24px 40px;
  padding: 4cqh 7cqh;
  text-align: center;
  max-width: 88%;
  max-height: 92%;
  overflow-y: auto;
}

.start-bird {
  width: 110px; height: 110px;
  width: 20cqh; height: 20cqh;
  object-fit: contain;
  margin-bottom: -6px;
  animation: bounce 1.6s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.title {
  font-size: 52px;
  font-size: 9.5cqh;
  font-weight: 900;
  letter-spacing: 2px;
  color: #6d1f35;
  text-shadow: 0 4px 0 rgba(58,35,23,.45);
  line-height: 1;
}
.subtitle-banner {
  display: inline-block;
  font-size: 20px;
  font-size: 3.7cqh;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  background: linear-gradient(180deg, var(--wood), var(--wood-dark));
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 4px 22px;
  margin: 8px 0 4px;
  transform: rotate(-2deg);
  box-shadow: 0 4px 0 rgba(58,35,23,.5);
}
.tagline {
  font-size: 16px;
  font-size: 3cqh;
  font-weight: 700;
  color: var(--wood-dark);
  margin-bottom: 16px;
  margin-bottom: 3cqh;
}
.screen-title {
  font-size: 38px;
  font-size: 7cqh;
  font-weight: 900;
  color: #6d1f35;
  text-shadow: 0 3px 0 rgba(58,35,23,.45);
  margin-bottom: 14px;
  margin-bottom: 2.6cqh;
}

.btn-big {
  display: block;
  width: 100%;
  margin: 8px auto;
  margin: 1.5cqh auto;
  padding: 12px 30px;
  padding: 2.2cqh 5.5cqh;
  font-family: var(--font-cartoon);
  font-size: 22px;
  font-size: 4cqh;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: var(--outline);
  background: linear-gradient(180deg, #8ecf5a, var(--green));
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 rgba(58,35,23,.7), inset 0 3px 0 rgba(255,255,255,.4);
  cursor: pointer;
  transition: transform .08s;
}
.btn-big:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(58,35,23,.7); }
.btn-secondary { background: linear-gradient(180deg, #d9a95e, var(--wood)); font-size: 18px; font-size: 3.3cqh; }

.hint {
  margin-top: 12px;
  font-size: 12px;
  font-size: 2.2cqh;
  color: var(--wood-dark);
  font-weight: 700;
}

/* Anleitung */
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  text-align: left;
  margin-bottom: 14px;
}
.help-grid div {
  background: rgba(255,255,255,.5);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 14px;
  font-size: 2.6cqh;
}
.help-grid b { display: block; color: #6d1f35; }
.help-grid span { color: var(--ink); font-size: 12px; font-size: 2.2cqh; }
.help-text {
  font-size: 14px;
  font-size: 2.6cqh;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Game Over */
.go-score-box {
  background: rgba(255,255,255,.55);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 8px 30px;
  padding: 1.5cqh 5.5cqh;
  margin-bottom: 12px;
  margin-bottom: 2.2cqh;
}
.go-score-label {
  font-size: 13px;
  font-size: 2.4cqh;
  font-weight: 900; letter-spacing: 2px; color: var(--wood-dark);
}
.go-score {
  font-size: 44px;
  font-size: 8cqh;
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  text-shadow: var(--outline);
}
.go-best { font-size: 15px; font-size: 2.8cqh; font-weight: 800; color: var(--wood-dark); }
.go-new-best {
  font-size: 16px;
  font-size: 3cqh;
  font-weight: 900;
  color: #e63946;
  animation: chaosBlink .5s infinite alternate;
}
@keyframes chaosBlink { from { opacity: 1; } to { opacity: .35; } }
.go-stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  gap: 4cqh;
  margin-bottom: 10px;
}
.go-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-size: 3.7cqh;
  font-weight: 900;
  color: var(--ink);
}

.loading-text {
  font-size: 26px;
  font-size: 4.8cqh;
  font-weight: 900;
  color: #fff;
  text-shadow: var(--outline);
  animation: chaosBlink .7s infinite alternate;
}

/* MAX-CHAOS: ganzes HUD leuchtet */
#hud.maxchaos .hud-panel,
#hud.maxchaos .hud-chaos-bar {
  box-shadow: 0 0 18px 4px rgba(255,159,28,.8), 0 4px 0 rgba(58,35,23,.55);
}


/* Pause-Karte: feste Breite, damit "Sound: An/Aus" nichts verschiebt */
#screen-pause .screen-card { width: min(440px, 80%); }

/* ---------- Skin-Auswahl (Start-Screen) ---------- */
.skin-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  margin-bottom: 2.2cqh;
}
.skin-label {
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--wood-dark);
  font-size: 2.6cqh;
}
.skin-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,.5);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-cartoon);
  font-weight: 700;
  font-size: 2.2cqh;
  color: var(--ink);
  opacity: .75;
}
.skin-option img { width: 7cqh; height: 7cqh; object-fit: contain; }
.skin-option.selected {
  opacity: 1;
  border-color: #6ab04c;
  box-shadow: 0 0 0 3px rgba(106,176,76,.4);
}
.skin-option.disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }


/* ---------- Start-Screen: Video-Hintergrund + Redesign ---------- */
.menu-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
#screen-start { background: none; }
#screen-start::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(25,35,55,.2), rgba(43,29,18,.5));
  pointer-events: none;
}
#screen-start .screen-card {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(246,234,211,.95), rgba(232,213,176,.95));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 0 rgba(58,35,23,.55), 0 30px 60px rgba(0,0,0,.55);
  width: min(560px, 92%);
}
#screen-start .title { animation: titleWobble 3.2s ease-in-out infinite; }
@keyframes titleWobble {
  0%, 100% { transform: rotate(-1deg) scale(1); }
  50% { transform: rotate(1deg) scale(1.02); }
}
.btn-row { display: flex; gap: 10px; }
.btn-row .btn-big { flex: 1; font-size: 2.8cqh; padding: 1.7cqh 1.5cqh; }

/* ---------- HUD: alle Top-Elemente einheitlich hoch ---------- */
.hud-left, .hud-score-panel, .hud-counters, #btn-pause { height: 13cqh; }
.hud-score-panel, .hud-counters {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#btn-pause { width: 13cqh; }

/* ---------- Musik-Lautstärke (Pause-Menü) ---------- */
.music-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 4px;
  font-size: 20px;
}
#music-vol {
  flex: 1;
  accent-color: var(--green);
  height: 6px;
  cursor: pointer;
}

/* ---------- Start-Karte: px-Obergrenzen, damit nichts überläuft ---------- */
#screen-start .title { font-size: min(9.5cqh, 58px); }
#screen-start .subtitle-banner { font-size: min(3.7cqh, 22px); }
#screen-start .tagline { font-size: min(3cqh, 18px); margin-bottom: min(3cqh, 14px); }
#screen-start .start-bird { width: min(20cqh, 120px); height: min(20cqh, 120px); }
#screen-start .btn-big { font-size: min(4cqh, 24px); padding: min(2.2cqh, 12px) 20px; }
#screen-start .btn-row .btn-big { font-size: min(2.8cqh, 18px); padding: min(1.7cqh, 10px) 12px; }
#screen-start .hint { font-size: min(2.2cqh, 13px); }
.skin-label { font-size: min(2.6cqh, 16px); }
.skin-option { font-size: min(2.2cqh, 14px); }
.skin-option img { width: min(7cqh, 46px); height: min(7cqh, 46px); }

/* ---------- HUD: px-Obergrenzen (verhindert Überlappung bei hohen Fenstern) ---------- */
.hud-left, .hud-score-panel, .hud-counters, #btn-pause { height: min(13cqh, 92px); }
#btn-pause { width: min(13cqh, 92px); }
.hud-icon-big { width: min(9.6cqh, 64px); height: min(9.6cqh, 64px); }
.hud-score-panel { min-width: min(20cqh, 130px); }
.hud-score { font-size: min(4.8cqh, 34px); }
.hud-name { font-size: min(2.8cqh, 19px); }
.hud-number { font-size: min(3cqh, 20px); }
.hud-heart { width: min(4.4cqh, 30px); height: min(4.4cqh, 30px); }
.hud-icon-small { width: min(4cqh, 27px); height: min(4cqh, 27px); }
.hud-score-label { font-size: min(2cqh, 14px); }
.hud-chaos-label { font-size: min(2.6cqh, 17px); }
.hud-chaos-bar { height: min(4.4cqh, 30px); }
.hud-chaos-icon { width: min(6.3cqh, 42px); height: min(6.3cqh, 42px); }
.pause-bars i { width: min(1.1cqh, 8px); height: min(3.3cqh, 24px); }

/* Chaos-Meter etwas schmaler, damit es nie an die Seiten-Panels stößt */
.hud-chaos { width: 30%; }


/* ============================================================
   Startseite ohne Card: Inhalte direkt auf dem Video
   ============================================================ */
.menu-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(480px, 90%);
  text-align: center;
}
.menu-content .title {
  color: #fff;
  font-size: min(11cqh, 66px);
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 6px 0 rgba(58,35,23,.85), 0 14px 28px rgba(0,0,0,.55);
}
.menu-content .tagline { color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.8); }
.menu-content .hint { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.85); font-weight: 700; }
.menu-content .btn-big { width: 100%; }
.btn-play { font-size: min(4.6cqh, 28px) !important; padding: min(2.6cqh, 16px) 20px !important; }
.btn-settings {
  position: absolute;
  top: 3%; right: 2%;
  z-index: 3;
  width: min(10cqh, 60px); height: min(10cqh, 60px);
  font-size: min(5cqh, 28px);
  line-height: 1;
}

/* ============================================================
   Charaktere-Screen
   ============================================================ */
.skins-card { width: min(680px, 94%); }
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.skin-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdf5, #e8d5b0);
  cursor: pointer;
  font-family: var(--font-cartoon);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(58,35,23,.5);
  transition: transform .1s;
}
.skin-card:hover { transform: translateY(-2px); }
.skin-card img { width: min(14cqh, 84px); height: min(14cqh, 84px); object-fit: contain; }
.skin-card .skin-name { font-weight: 700; font-size: min(2.6cqh, 15px); }
.skin-card.selected {
  border-color: #6ab04c;
  box-shadow: 0 0 0 4px rgba(106,176,76,.45), 0 4px 0 rgba(58,35,23,.5);
  background: linear-gradient(180deg, #f2ffe8, #d8ecc2);
}
.skin-card.coming { opacity: .55; filter: grayscale(1); cursor: default; }
.skin-q {
  font-size: min(10cqh, 54px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wood-dark);
  min-height: min(14cqh, 84px);
  display: flex;
  align-items: center;
}

/* ============================================================
   Ladebildschirm
   ============================================================ */
.loading-screen {
  background: linear-gradient(180deg, #7cc4ef 0%, #dff2fb 65%, #8ecf5a 100%);
  z-index: 50;
  backdrop-filter: none;
}
.loading-inner { text-align: center; }
.loading-bird {
  width: min(24cqh, 130px); height: min(24cqh, 130px);
  object-fit: cover;
  border-radius: 24%;
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 rgba(58,35,23,.35);
  animation: bounce 1.2s ease-in-out infinite;
  margin-bottom: 14px;
}
.loading-title {
  font-size: min(7cqh, 40px);
  font-weight: 700;
  letter-spacing: 3px;
  color: #6d1f35;
  text-shadow: 0 3px 0 rgba(58,35,23,.35);
}
.loading-screen .loading-text {
  color: var(--wood-dark);
  text-shadow: none;
  font-size: min(3.6cqh, 20px);
}

/* ============================================================
   HUD links: kompakt, nichts abgeschnitten
   ============================================================ */
.hud-left { padding: 6px 14px; }
.hud-left-info { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.hud-name { font-size: min(2.4cqh, 15px); letter-spacing: .5px; }
.hud-hearts { margin: 1px 0; }
.hud-hearts .hud-heart { width: min(4cqh, 24px); height: min(4cqh, 24px); }
.hud-bombs img.hud-icon-small { width: min(3.4cqh, 21px); height: min(3.4cqh, 21px); }
.hud-bombs .hud-number { font-size: min(2.6cqh, 17px); }


/* ============================================================
   Charakter-Carousel
   ============================================================ */
.skin-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 8px;
}
.skin-arrow { font-size: min(5cqh, 30px); color: #fff; flex-shrink: 0; }
.skin-stage {
  position: relative;
  width: min(46cqh, 260px);
  height: min(42cqh, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fffdf5, #e2cda2);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: inset 0 4px 12px rgba(58,35,23,.25), 0 4px 0 rgba(58,35,23,.5);
}
.skin-stage img {
  width: 78%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.3));
}
.skin-stage img.coming { filter: grayscale(1) opacity(.7); }
.skin-stage-name {
  font-weight: 700;
  font-size: min(3.2cqh, 19px);
  color: var(--ink);
  margin-top: 4px;
}
.skin-stage-badge {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: min(2.4cqh, 14px);
  letter-spacing: 1px;
  padding: 3px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(58,35,23,.5);
}
.skin-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.skin-dots i {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(58,35,23,.25);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform .1s;
}
.skin-dots i.active { background: var(--green); transform: scale(1.25); }
#btn-skin-select:disabled {
  opacity: .55;
  filter: grayscale(.6);
  cursor: not-allowed;
}


/* ============================================================
   Mobile (Touch): Buttons & HUD deutlich größer
   ============================================================ */
@media (pointer: coarse) {
  .btn-jump { width: 24cqh; height: 24cqh; font-size: 10cqh; }
  .btn-bomb {
    width: 19cqh; height: 19cqh;
    right: calc(3.5% + 27cqh);
    bottom: calc(11% + env(safe-area-inset-bottom, 0px));
  }
  .btn-bomb img { width: 12cqh; height: 12cqh; }
  .btn-dash { width: 21cqh; height: 21cqh; font-size: 5cqh; }

  .hud-left, .hud-score-panel, .hud-counters, #btn-pause { height: min(17cqh, 96px); }
  #btn-pause { width: min(17cqh, 96px); }
  .hud-icon-big { width: min(12cqh, 66px); height: min(12cqh, 66px); }
  .hud-name { font-size: min(3.2cqh, 17px); }
  .hud-hearts .hud-heart { width: min(5.4cqh, 28px); height: min(5.4cqh, 28px); }
  .hud-bombs img.hud-icon-small { width: min(4.6cqh, 24px); height: min(4.6cqh, 24px); }
  .hud-bombs .hud-number { font-size: min(3.4cqh, 19px); }
  .hud-number { font-size: min(4cqh, 22px); }
  .hud-icon-small { width: min(5.2cqh, 28px); height: min(5.2cqh, 28px); }
  .hud-score { font-size: min(6.2cqh, 38px); }
  .hud-score-label { font-size: min(2.6cqh, 15px); }
  .hud-score-panel { min-width: min(26cqh, 150px); }
  .hud-chaos-label { font-size: min(3.2cqh, 18px); }
  .hud-chaos-bar { height: min(5.6cqh, 32px); }
  .hud-chaos-icon { width: min(8cqh, 46px); height: min(8cqh, 46px); }
}

/* (90°-Rotations-Hack entfernt: im Hochkant-Modus erscheint
   stattdessen wieder der "Bitte Gerät drehen"-Hinweis) */


/* ============================================================
   Mobile-Feinschliff: Carousel-Pfeile, Menü-Buttons, Zahnrad
   ============================================================ */
@media (pointer: coarse) {
  /* Charakter-Auswahl: Pfeile weiter außen + größer */
  .skin-carousel { gap: min(9cqh, 56px); }
  .skin-arrow {
    width: min(13cqh, 72px); height: min(13cqh, 72px);
    font-size: min(7cqh, 38px);
  }
  /* Charaktere / Anleitung größer */
  .btn-row .btn-big {
    font-size: min(3.8cqh, 22px);
    padding: min(2.6cqh, 15px) 2cqh;
  }
  /* Zahnrad: minimal weiter rein (oben/rechts) + etwas größer */
  .btn-settings {
    top: 1.8%; right: 1.2%;
    width: min(12cqh, 68px); height: min(12cqh, 68px);
    font-size: min(6cqh, 32px);
  }
}


/* ============================================================
   Feinschliff-Runde: Pfeile ganz außen, Buttons, Zahnrad
   ============================================================ */
/* Carousel: Pfeile an die Außenkanten des Popups */
.skin-carousel {
  justify-content: space-between;
  width: 100%;
  gap: 0;
}

@media (pointer: coarse) {
  /* Charaktere / Anleitung nochmal größer */
  .btn-row .btn-big {
    font-size: min(4.6cqh, 26px);
    padding: min(3.2cqh, 18px) 2cqh;
  }
  /* Zahnrad: mehr Abstand zur Ecke (weiter rein) */
  .btn-settings { top: 4.5%; right: 3.5%; }
}


/* ============================================================
   Mobile: Game-Over- (und Pause-) Popup größer & besser bedienbar
   ============================================================ */
@media (pointer: coarse) {
  #screen-gameover .screen-card,
  #screen-pause .screen-card {
    padding: min(3.4cqh, 20px) min(6cqh, 34px);
    width: min(560px, 88%);
  }
  #screen-gameover .screen-title,
  #screen-pause .screen-title { font-size: min(9cqh, 44px); }
  .go-score { font-size: min(11cqh, 56px); }
  .go-score-label { font-size: min(3.2cqh, 16px); }
  .go-best { font-size: min(3.6cqh, 18px); }
  .go-new-best { font-size: min(3.8cqh, 19px); }
  .go-stat { font-size: min(4.6cqh, 24px); }
  .go-stat .hud-icon-small { width: min(6cqh, 30px); height: min(6cqh, 30px); }
  #screen-gameover .btn-big,
  #screen-pause .btn-big {
    font-size: min(4.6cqh, 26px);
    padding: min(3cqh, 17px) 2cqh;
  }
  #screen-pause .btn-secondary,
  #screen-gameover .btn-secondary { font-size: min(4cqh, 22px); }
}


/* ============================================================
   Charaktere: X zum Schließen (oben rechts im Popup)
   ============================================================ */
.skins-card { position: relative; }
.skins-x {
  position: absolute;
  top: 10px; right: 10px;
  width: min(9cqh, 46px); height: min(9cqh, 46px);
  font-size: min(4.5cqh, 22px);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #e66a5f, #a52a1d);
  z-index: 2;
}

/* ============================================================
   Startseite Mobile: Charaktere/Anleitung ENDLICH groß
   (spezifischer Selektor, schlägt die Desktop-Regel)
   ============================================================ */
@media (pointer: coarse) {
  #screen-start .btn-row .btn-big {
    font-size: min(5cqh, 28px);
    padding: min(3.4cqh, 20px) 2cqh;
  }
}

/* ============================================================
   Pause-Popup Mobile: kompakt, passt ohne Scrollen
   ============================================================ */
@media (pointer: coarse) {
  #screen-pause .screen-card {
    padding: min(2cqh, 12px) min(5cqh, 28px);
    max-height: 96%;
  }
  #screen-pause .screen-title {
    font-size: min(6.5cqh, 32px);
    margin-bottom: min(1.2cqh, 8px);
  }
  #screen-pause .btn-big {
    margin: min(1cqh, 6px) auto;
    padding: min(2.2cqh, 12px) 2cqh;
    font-size: min(4cqh, 22px);
  }
  #screen-pause .btn-secondary { font-size: min(3.6cqh, 19px); }
  #screen-pause .music-vol-row {
    margin: min(0.8cqh, 5px) 4px;
    font-size: min(3.6cqh, 18px);
  }
}


/* ============================================================
   Startseite: Logo-Grafik statt Text-Titel
   ============================================================ */
.menu-logo {
  width: min(88%, 560px);
  max-height: min(24cqh, 190px);
  object-fit: contain;
  filter: drop-shadow(0 8px 0 rgba(58,35,23,.45)) drop-shadow(0 18px 30px rgba(0,0,0,.5));
  animation: logoFloat 3.2s ease-in-out infinite;
  margin: min(1cqh, 6px) 0;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(-.6deg) scale(1); }
  50% { transform: translateY(-6px) rotate(.6deg) scale(1.015); }
}


/* ============================================================
   Startseite Mobile: kompakter, damit nichts abgeschnitten wird
   (Vogel + Logo + Banner + Buttons passen in die Bildschirmhöhe)
   ============================================================ */
@media (pointer: coarse) {
  .menu-content { gap: 2px; justify-content: center; max-height: 100%; }
  #screen-start .start-bird {
    width: min(18cqh, 96px);
    height: min(18cqh, 96px);
    margin-bottom: -2px;
  }
  .menu-logo {
    max-height: min(18cqh, 110px);
    margin: min(0.6cqh, 4px) 0;
  }
  #screen-start .subtitle-banner {
    font-size: min(3.2cqh, 18px);
    padding: 2px 14px;
    margin: min(0.6cqh, 4px) 0 2px;
  }
  #screen-start .tagline { margin-bottom: min(1.4cqh, 8px); }
  #screen-start .btn-play { padding: min(2.4cqh, 14px) 20px !important; }
  #screen-start .btn-big { margin: min(1cqh, 6px) auto; }
  #screen-start .hint { margin-top: min(0.8cqh, 5px); }
}


/* ============================================================
   Lautstärkeregler: ALLE identisch (grün, volle Breite)
   – vorher galt das Styling nur für #music-vol
   ============================================================ */
.music-vol-row input[type="range"] {
  flex: 1;
  width: 100%;
  accent-color: var(--green);
  height: 6px;
  cursor: pointer;
}
/* mehr Luft um die Regler, Buttons minimal enger als Ausgleich */
.music-vol-row { margin: 14px 8px; }
@media (pointer: coarse) {
  #screen-pause .music-vol-row { margin: min(2cqh, 12px) 8px; }
  #screen-pause .btn-big { margin: min(0.9cqh, 5px) auto; }
}

/* ---------- Muenz-Konto (Shop) ---------- */
.wallet-badge {
  position: absolute;
  top: 3%; left: 2%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: min(1.4cqh, 8px);
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 rgba(58,35,23,.55), inset 0 2px 0 rgba(255,255,255,.6);
  padding: min(1.2cqh, 8px) min(2.6cqh, 16px);
  font-weight: 700;
  font-size: min(3.6cqh, 20px);
  color: var(--ink);
}
.wallet-badge img { height: min(4.6cqh, 26px); display: block; }
.wallet-in-card { top: 12px; left: 14px; }

/* Preisschild am Skin (noch nicht freigeschaltet) */
.skin-stage-price {
  position: absolute;
  top: 10px; right: 8px;
  transform: rotate(4deg);
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #ffd23f, #f5a623);
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 700;
  font-size: min(2.6cqh, 15px);
  padding: 4px 10px;
  box-shadow: 0 3px 0 rgba(58,35,23,.4);
}
.skin-stage-price img { height: min(3.2cqh, 18px); display: block; }

/* Muenz-Gutschrift auf dem Game-Over-Screen */
.go-wallet {
  font-weight: 700;
  color: var(--ink);
  font-size: min(3cqh, 17px);
  margin-bottom: 10px;
}

/* ---------- Startseite: Seiten-Panels (Missionen / Rekorde) ---------- */
.side-panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(160px, 19vw, 240px);
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 4px 0 rgba(58,35,23,.55), inset 0 2px 0 rgba(255,255,255,.6);
  padding: min(2cqh, 12px) min(2.4cqh, 14px);
  color: var(--ink);
}
.side-left { left: 2%; }
.side-right { right: 2%; }
.side-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: min(2.9cqh, 16px);
  letter-spacing: 1px;
  margin-bottom: min(1.8cqh, 10px);
}
#best-trophy img { height: clamp(38px, 9cqh, 54px); display: block; }
.mission { margin-bottom: min(2cqh, 12px); }
.mission:last-child { margin-bottom: 0; }
.mission.done .m-text { opacity: .65; }
.m-text {
  font-weight: 700;
  font-size: min(2.3cqh, 13px);
  margin-bottom: 3px;
}
.m-bar {
  height: min(1.7cqh, 10px);
  background: rgba(58,35,23,.22);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.m-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8bc34a, #5a9e2f);
  border-radius: 999px;
}
.m-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-weight: 700;
  font-size: min(2.1cqh, 12px);
  color: #7a5a10;
}
.m-reward img { height: min(2.8cqh, 15px); }
.best-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-weight: 700;
  font-size: min(2.4cqh, 14px);
  padding: min(1.1cqh, 7px) 0;
  border-bottom: 2px dashed rgba(58,35,23,.25);
}
.best-row:last-child { border-bottom: none; }
.best-val { font-size: min(3.1cqh, 18px); }
/* sehr schmale Screens: Panels wuerden das Menue quetschen */
@media (max-width: 720px) { .side-panel { display: none; } }

/* ---------- Startseite: kombinierte Rekorde+Missionen-Karte ---------- */
#panel-side { width: clamp(190px, 22vw, 265px); }
.plank {
  background: linear-gradient(180deg, #9c6b3f, #6f4522);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(58,35,23,.45), inset 0 2px 0 rgba(255,255,255,.25);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  font-weight: 700;
  font-size: min(2.7cqh, 15px);
  letter-spacing: 2px;
  text-align: center;
  padding: min(1cqh, 6px) 8px;
  margin-bottom: min(1.6cqh, 10px);
}
.plank-2 { margin-top: min(2.2cqh, 14px); }
.best-main {
  display: flex;
  align-items: center;
  gap: min(1.8cqh, 12px);
  padding: min(0.8cqh, 5px) 0 min(1cqh, 6px);
}
.best-trophy { font-size: clamp(28px, 6.4cqh, 38px); line-height: 1; }
.best-trophy img { height: clamp(38px, 9cqh, 54px); display: block; }
.best-label {
  font-weight: 700;
  font-size: min(2.1cqh, 12px);
  opacity: .75;
  letter-spacing: .5px;
}
.best-big {
  font-weight: 700;
  font-size: min(4.6cqh, 27px);
  line-height: 1.1;
}
.m-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.m-top .m-reward { margin-top: 0; flex-shrink: 0; }
.m-bar { position: relative; height: min(2.4cqh, 14px); }
.m-nums {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: min(1.9cqh, 10px);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  letter-spacing: .5px;
}

/* ---------- Top-Badges (Muenzen + Rekord) ---------- */
.top-badges {
  position: absolute;
  top: 3%; left: 2%;
  z-index: 3;
  display: flex;
  gap: min(1.6cqh, 10px);
}
.top-badges .wallet-badge { position: static; }
#record-icon { height: min(4.6cqh, 26px); display: block; }

/* ---------- Missions-Lade (rechter Rand, ausfahrbar) ---------- */
.missions-drawer {
  position: absolute;
  top: 50%; right: 0;
  transform: translate(100%, -50%);
  transition: transform .35s cubic-bezier(.25, .9, .35, 1.15);
  z-index: 4;
}
.missions-drawer.open { transform: translate(0, -50%); }
.missions-card {
  width: clamp(200px, 24vw, 270px);
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--ink);
  border-right: none;
  border-radius: 16px 0 0 16px;
  box-shadow: 0 4px 0 rgba(58,35,23,.55), inset 0 2px 0 rgba(255,255,255,.6);
  padding: min(2cqh, 12px) min(2.4cqh, 14px);
  color: var(--ink);
}
.missions-tab {
  position: absolute;
  left: 1px; top: 50%;
  transform: translate(-100%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #9c6b3f, #6f4522);
  border: 3px solid var(--ink);
  border-right: none;
  border-radius: 14px 0 0 14px;
  box-shadow: -3px 3px 0 rgba(58,35,23,.35);
  padding: min(2cqh, 12px) min(1.4cqh, 9px);
  cursor: pointer;
  font-family: inherit;
}
.missions-tab:active { transform: translate(-100%, -50%) scale(.96); }
.mt-icon { font-size: min(4cqh, 24px); line-height: 1; }
.mt-label {
  writing-mode: vertical-rl;
  color: #fff;
  font-weight: 700;
  font-size: min(2cqh, 11px);
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.missions-note {
  margin-top: min(1.4cqh, 8px);
  text-align: center;
  font-weight: 700;
  font-size: min(1.9cqh, 11px);
  opacity: .6;
}
.m-done-badge {
  color: #3e8e22;
  font-weight: 700;
  font-size: min(2.1cqh, 12px);
  flex-shrink: 0;
}
.mission.done .m-bar i { background: linear-gradient(90deg, #6fae3f, #4c8c26); }

/* ---------- Anleitung: Desktop/Mobile-Steuerung + Icon-Legende ---------- */
.help-mobile { display: none; }
body.touch-mode .help-mobile { display: grid; }
body.touch-mode .help-desktop { display: none; }
#screen-help .screen-card { max-width: min(720px, 92%); }
.help-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: min(1.4cqh, 8px);
  margin-bottom: min(2cqh, 12px);
}
.hi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.5);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: min(1cqh, 6px) 4px;
}
.hi img { height: min(6.5cqh, 36px); }
.hi span {
  font-size: min(1.9cqh, 11px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  text-align: center;
}

/* ---------- Missionen-Popup ---------- */
#screen-missions .screen-card { width: min(480px, 88%); }
#screen-missions .mission { text-align: left; margin-bottom: min(2.4cqh, 15px); }
#screen-missions .m-text { font-size: min(3cqh, 16px); }
#screen-missions .m-bar { height: min(3cqh, 17px); }
#screen-missions .m-nums { font-size: min(2.2cqh, 12px); }
#screen-missions .m-reward { font-size: min(2.6cqh, 14px); }
#screen-missions .m-reward img { height: min(3.4cqh, 18px); }
#screen-missions .missions-note {
  font-weight: 700;
  font-size: min(2.2cqh, 12px);
  color: var(--ink);
  opacity: .6;
  margin-bottom: min(2cqh, 12px);
}

/* ---------- Game Over: kompakt, passt ohne Scrollen (Mobile) ---------- */
@media (pointer: coarse) {
  #screen-gameover .screen-card {
    padding: min(2cqh, 12px) min(5cqh, 28px);
    max-height: 97%;
    overflow: hidden;
  }
  #screen-gameover .screen-title {
    font-size: min(6.5cqh, 32px);
    margin-bottom: min(1cqh, 6px);
  }
  .go-score-box {
    padding: min(1cqh, 6px) min(4cqh, 24px);
    margin-bottom: min(1.4cqh, 8px);
  }
  .go-score { font-size: min(9cqh, 44px); }
  .go-best { font-size: min(3cqh, 15px); }
  .go-new-best { font-size: min(3.2cqh, 16px); }
  .go-stats { margin-bottom: min(1cqh, 6px); gap: min(3cqh, 18px); }
  .go-stat { font-size: min(4cqh, 20px); }
  .go-wallet { font-size: min(2.6cqh, 14px); margin-bottom: min(1.2cqh, 7px); }
  #screen-gameover .btn-big {
    margin: min(0.8cqh, 5px) auto;
    padding: min(2.2cqh, 12px) 2cqh;
    font-size: min(4cqh, 22px);
  }
}

/* ---------- Popups ueber der Startseite (Missionen/Anleitung) ---------- */
.screen-overlay { background: rgba(43,29,18,.45); }
.missions-pop, .help-pop { position: relative; }
.missions-pop { width: min(440px, 88%); }
.missions-pop .plank { margin-bottom: min(2.2cqh, 14px); }
.pop-x {
  position: absolute;
  top: 10px; right: 10px;
  width: min(9cqh, 46px); height: min(9cqh, 46px);
  font-size: min(4.5cqh, 22px);
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #e66a5f, #a52a1d);
  z-index: 2;
}

/* ---------- Einmalige Spiel-Einfuehrung ---------- */
#tutorial {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.tut-center {
  position: absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.4cqh, 9px);
}
.tut-bubble {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(58,35,23,.55), inset 0 2px 0 rgba(255,255,255,.6);
  color: var(--ink);
  font-weight: 700;
  font-size: min(3.6cqh, 20px);
  padding: min(1.8cqh, 11px) min(3.2cqh, 20px);
  max-width: 76vw;
  text-align: center;
  animation: tutPulse .9s infinite alternate;
}
@keyframes tutPulse { from { transform: scale(1); } to { transform: scale(1.045); } }
#tut-skip {
  pointer-events: auto;
  background: linear-gradient(180deg, #9c6b3f, #6f4522);
  border: 3px solid var(--ink);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: min(2.6cqh, 14px);
  padding: min(1.2cqh, 7px) min(2.8cqh, 16px);
  box-shadow: 0 3px 0 rgba(58,35,23,.45);
  cursor: pointer;
}
#tut-skip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,35,23,.45); }
.tut-arrow {
  position: absolute;
  font-size: min(9cqh, 52px);
  animation: tutBounce .55s infinite alternate;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
}
.arrow-off { display: none; }
@keyframes tutBounce { from { transform: translateY(0); } to { transform: translateY(-14px); } }
.tut-arrow.point-jump {
  right: calc(3.5% + 4cqh);
  bottom: calc(6% + 19cqh + env(safe-area-inset-bottom, 0px));
}
.tut-arrow.point-dash {
  left: calc(3.5% + 3.5cqh);
  bottom: calc(6% + 17cqh + env(safe-area-inset-bottom, 0px));
}
.tut-arrow.point-bomb {
  right: calc(3.5% + 22cqh);
  bottom: calc(9% + 15cqh + env(safe-area-inset-bottom, 0px));
}

/* Missions-Popup: X halb aussen an der Ecke, ueberlappt keinen Inhalt */
#screen-missions .screen-card { overflow: visible; }
.missions-pop .pop-x { top: -14px; right: -14px; }
.missions-pop .plank { margin-top: min(0.6cqh, 4px); }

/* Mobile: Muenz-/Rekord-Badges buendig zum Zahnrad (gleicher Randabstand) */
@media (pointer: coarse) {
  .top-badges { top: 4.5%; left: 3.5%; }
}

/* Tutorial-Pfeil: echter SVG-Pfeil, per JS exakt ueber dem Button */
.tut-arrow { width: min(10cqh, 54px); }
.tut-arrow svg { width: 100%; height: auto; display: block; }

/* Anleitung: feste Breite -> kein Groessen-Sprung beim Oeffnen */
.help-pop { width: min(720px, 92%); }

/* Charaktere: Preisschild in die Ecke des Vorschau-Containers */
.skin-stage-price { top: -10px; right: -10px; }