:root {
  --rf-bg: #12161c;
  --rf-panel: #1c232d;
  --rf-ink: #e8edf3;
  --rf-accent: #ff8a2b;
  --rf-bad: #ff4d4d;
  --rf-ok: #4dd6a0;
  --rf-border: #2d3745;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  font-family: system-ui, sans-serif;
  background: var(--rf-bg);
  color: var(--rf-ink);
  overflow: hidden;
  touch-action: manipulation;
}

body > .games-shared-footer { margin-top: 0; padding: 8px 20px; }

#app {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.rf-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.rf-stage canvas { display: block; touch-action: none; }

.rf-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--rf-panel);
  border-bottom: 1px solid var(--rf-border);
  font-weight: 600;
}
.rf-hud .rf-wave { margin-left: auto; font-weight: 500; opacity: 0.85; }

.rf-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: var(--rf-panel);
  border-top: 1px solid var(--rf-border);
}
.rf-towers { display: flex; gap: 8px; flex: 1 1 auto; }

.rf-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  border: 1px solid var(--rf-border);
  border-radius: 10px;
  background: #263040;
  color: var(--rf-ink);
  font: inherit;
  cursor: pointer;
}
.rf-btn:disabled { opacity: 0.4; cursor: default; }
.rf-icon { padding: 6px 10px; }
.rf-tower { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; line-height: 1.2; }
.rf-tower-name { font-size: 0.8rem; }
.rf-tower-cost { font-size: 0.8rem; color: var(--rf-accent); }
.rf-tower.rf-selected { border-color: var(--rf-accent); box-shadow: 0 0 0 2px var(--rf-accent) inset; }
.rf-tower.rf-poor .rf-tower-cost { color: var(--rf-bad); }
.rf-start { background: var(--rf-accent); color: #1a1008; font-weight: 700; border-color: var(--rf-accent); }
.rf-sell { flex: 1 1 100%; background: #4a2630; }

.rf-toast {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 100%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid var(--rf-bad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  text-align: center;
}
.rf-toast.rf-toast-on { opacity: 1; }

.rf-result {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(10, 12, 16, 0.86);
  text-align: center;
}
.rf-result h2 { margin: 0; font-size: 1.8rem; }
.rf-stars { font-size: 2.4rem; color: var(--rf-accent); margin: 0; letter-spacing: 6px; }

.rf-leak {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 90px 30px rgba(255, 40, 40, 0.75);
}

.rf-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 4px 10px;
  font-size: 0.8rem;
  background: #161c24;
  border-bottom: 1px solid var(--rf-border);
  color: #b9c4d2;
}
.rf-preview-empty { visibility: hidden; }
/* Feste Hoehe fuer zwei Zeilen: je Welle aendert sich die Zahl der Gegnerarten (ein-/zweizeilig, nach der letzten Welle leer).
   Waechst oder schrumpft die Leiste, aendert sich die Buehnenhoehe und die Kamera passt den Zoom neu an -- das ganze Bild springt. */
.rf-preview { height: 49px; overflow: hidden; align-content: flex-start; }
.rf-preview-item { white-space: nowrap; }

.rf-preview-title { font-weight: 600; color: #e1e8f0; }

.rf-panel { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; border-radius: 10px; background: #202a38; border: 1px solid var(--rf-border); }
.rf-panel[hidden] { display: none; }
.rf-panel-title { flex: 1 1 100%; font-weight: 700; }
.rf-panel-special { flex: 1 1 100%; font-size: 0.8rem; color: var(--rf-accent); }
.rf-panel-special:empty { display: none; }
.rf-upgrade { flex: 1 1 40%; background: #2d5a46; border-color: #3f8a68; }
.rf-targets { display: flex; gap: 6px; flex: 1 1 100%; }
.rf-targets[hidden] { display: none; }
.rf-target { flex: 1 1 0; font-size: 0.8rem; padding: 4px 6px; }
.rf-target.rf-active { border-color: var(--rf-accent); box-shadow: 0 0 0 2px var(--rf-accent) inset; }
.rf-panel .rf-sell { flex: 1 1 40%; }
.rf-towers { flex: 1 1 100%; }
.rf-tower.rf-locked { opacity: 0.55; }
.rf-start { flex: 1 1 100%; }

/* Kompaktes Turm-Panel: wenig Hoehe, damit das Spielfeld gross bleibt. */
.rf-panel { padding: 4px 8px; gap: 4px 6px; }
.rf-panel-title { flex: 1 1 55%; font-size: 0.95rem; }
.rf-panel-special { flex: 1 1 35%; text-align: right; }
.rf-upgrade, .rf-panel .rf-sell { flex: 1 1 45%; min-height: 38px; padding: 4px 8px; }
.rf-target { min-height: 32px; }

/* Review 3a: fuenf Turmknoepfe passen auch auf 360 px; das Panel schwebt im Spielfeld-Bereich. */
.rf-towers { gap: 4px; }
.rf-tower { min-width: 0; padding: 6px 2px; }
.rf-tower-name { font-size: 0.68rem; overflow-wrap: anywhere; hyphens: auto; text-align: center; line-height: 1.15; }
.rf-tower-cost { font-size: 0.78rem; }
/* Seitenbox im Spielfeld: Turm-Panel und Werte-Karte, halbtransparent, damit das Feld darunter sichtbar bleibt.
   Die Box faengt keine Tipps (nur die Knoepfe des Panels), die Karte nie. */
.rf-side { position: absolute; left: 8px; right: 8px; z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.rf-side-top { top: 8px; }
.rf-side-bottom { bottom: 8px; flex-direction: column-reverse; }
.rf-panel { position: static; flex: none; pointer-events: auto; background: rgba(32, 42, 56, 0.7); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
.rf-statcard { padding: 6px 10px; border-radius: 10px; background: rgba(20, 26, 36, 0.66); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.75rem; line-height: 1.25; }
.rf-statcard[hidden] { display: none; }
.rf-statcard-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 3px; }
.rf-statcard table { width: 100%; border-collapse: collapse; }
.rf-statcard th, .rf-statcard td { padding: 1px 5px; text-align: right; font-weight: 400; white-space: nowrap; }
.rf-statcard th:first-child { text-align: left; }
.rf-statcard tr:first-child th { font-weight: 700; color: var(--rf-accent); }
.rf-statcard .rf-stat-cur { background: rgba(255, 138, 43, 0.3); font-weight: 700; }
.rf-statcard-special { margin: 4px 0 0; color: #ffd9b0; }

/* Pausenmenue, Auto-Start, Herz-Zucken */
.rf-result.rf-pause { background: rgba(10, 12, 16, 0.7); }
.rf-btn.rf-on { background: #1f4a38; border-color: var(--rf-ok); font-weight: 700; }
.rf-btn.rf-warn { background: #5a2a20; border-color: #e0623a; font-weight: 700; }
.rf-version { margin: 8px 0 0; font-size: 0.75rem; opacity: 0.6; }
/* Feste Hoehe: wechselt der Start-Knopf zwischen einer und zwei Zeilen (Countdown, Frueh-Bonus), darf die Leiste nicht
   mitwachsen -- sonst schrumpft die Buehne, das Canvas wird neu skaliert und blitzt auf. */
.rf-bar .rf-start { height: 3.2rem; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; padding-top: 0; padding-bottom: 0; }
@keyframes rf-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) scale(1.15); }
  40% { transform: translateX(4px) scale(1.15); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.rf-shake { color: var(--rf-bad); animation: rf-shake 0.4s; }

/* Level-Auswahl */
.rf-menu { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.rf-menu-title { margin: 0; font-size: 2rem; letter-spacing: 2px; color: var(--rf-accent); text-align: center; }
.rf-menu-total, .rf-menu-unlock { margin: 0; text-align: center; }
.rf-menu-unlock { opacity: 0.8; font-size: 0.9rem; }
.rf-menu-list { display: flex; flex-direction: column; gap: 8px; }
.rf-level { display: flex; justify-content: space-between; align-items: center; min-height: 64px; text-align: left; font-size: 1.05rem; }
.rf-level-stars { color: var(--rf-accent); letter-spacing: 3px; }
.rf-level.rf-locked .rf-level-stars { color: #8a94a3; letter-spacing: 0; font-size: 0.85rem; }
.rf-result .rf-btn { min-width: 220px; }
.rf-menu-note { margin: 0; padding: 8px 10px; border: 1px solid var(--rf-accent); border-radius: 8px; text-align: center; }

/* Endlos und Rangliste (aus Krabbelkrieg uebernommen) */
.rf-menu-endless { margin: 14px 0 0; font-size: 1.2rem; }
.rf-end-level { margin: 0; opacity: 0.7; }
.rf-end-reached { margin: 0; font-weight: 600; }
.rf-end-best { margin: 0; opacity: 0.8; }
.rf-end-rank { margin: 0; font-weight: 600; min-height: 1.2em; padding: 0 12px; }
.rf-notice { margin: 0; padding: 8px 10px; border: 1px solid var(--rf-ok); border-radius: 8px; text-align: center; }
.rf-notice[hidden] { display: none; }
a.rf-btn { text-decoration: none; display: flex; align-items: center; justify-content: center; color: var(--rf-ink); }
a.rf-start { color: #1a1008; }
.rf-rank { gap: 8px; }
.rf-rank h1 { margin: 0; font-size: 1.4rem; text-align: center; color: var(--rf-accent); }
.rf-rank__season { margin: 0; text-align: center; opacity: 0.7; }
.rf-rank__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-rank__tab { flex: 1 0 17%; min-width: 44px; min-height: 44px; padding: 0.5rem 0; }
.rf-rank__tab--on { border-color: var(--rf-accent); box-shadow: 0 0 0 2px var(--rf-accent) inset; font-weight: 700; }
.rf-rank__list { list-style: none; margin: 0; padding: 0; }
.rf-rank__row { display: flex; gap: 10px; padding: 6px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.rf-rank__row--me { background: rgba(255, 138, 43, 0.2); font-weight: 700; }
.rf-rank__pos { min-width: 2rem; text-align: right; }
.rf-rank__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-rank__msg, .rf-rank__you { margin: 6px 0; text-align: center; }