* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: url('assets/ui/cowaidle_poster.png') top center / 100vw auto no-repeat,
    #ffffff;
  font-family: "Comic Sans MS", "Comic Neue", cursive, sans-serif;
  color: #3a2a10;
}

.game-wrap {
  text-align: center;
  padding: 4px 20px 20px;
  margin-top: 21vh;
}

.hud-bar {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 0 0 12px;
}

.hud-item {
  background: #ffffffcc;
  border: 3px solid #3a2a10;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Fuellstand-Anzeige: --fill wird in updateHUD() (js/game.js) laufend
   gesetzt (0%-100%) -- links vom Fuellstand hellblau, rechts davon die
   normale Kachel-Farbe, harter Uebergang wie ein querliegender Balken. */
#hud-water-item {
  --fill: 0%;
  background: linear-gradient(to right, #8fd6ff var(--fill), #ffffffcc var(--fill));
}

/* Kurzes 1x-Aufleuchten als Hinweis, z.B. "kein Wasser mehr" beim Melken
   oder "nicht genug Milch" beim Verkaufen -- siehe flashHudWarning() in
   js/game.js. */
@keyframes hud-flash-red {
  0% { background: #e5352b; color: #ffffff; border-color: #7a1410; }
  50%, 100% { background: #ffffffcc; color: inherit; border-color: #3a2a10; }
}

.hud-flash-red {
  animation: hud-flash-red 0.4s steps(1, end) 1;
}

/* Buendelt Canvas + Akt-2-Seitenleiste nebeneinander (siehe index.html) --
   in Akt 1 bleibt #act2-sidebar per .hidden ausgeblendet, dann verhaelt
   sich .game-area optisch wie zuvor (nur der Canvas-Rahmen zentriert). */
.game-area {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}

.canvas-frame {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #ffffff;
  border: 6px solid #3a2a10;
  border-radius: 20px;
  box-shadow: 0 10px 0 #00000022;
}

/* Akt-2-Seitenleiste (siehe setAct() in js/game.js) -- ersetzt dort das
   Akt-1-HUD (#hud-bar bleibt oberhalb, wird aber ausgeblendet), bewusst
   rechts vom Spielfeld statt oberhalb, da hier mit der Zeit mehrere Werte
   dazukommen sollen und dafuer mehr Platz braucht als eine Kachel-Reihe. */
/* Redesign-Vorschlag (siehe index.html-Kommentar dort) -- gleiche Werte/IDs,
   aber als warme Karten-/Kachel-Optik statt einer langen Liste. Fixe Breite
   weiterhin wichtig (siehe alter Kommentar): sonst schiebt sich
   .game-area/das Spielfenster bei jedem Wertewechsel sichtbar hin und her. */
#act2-sidebar,
#act2-level2-sidebar {
  align-self: stretch;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(160deg, #fbf3e4, #e8d9b5);
  border: 3px solid #3a2a10;
  border-radius: 14px;
  padding: 14px;
  text-align: left;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #ffffff55;
  overflow-y: auto;
}

#act2-sidebar.hidden,
#act2-level2-sidebar.hidden {
  display: none;
}

/* Geld ganz oben, als goldene Banderole statt einer Zeile in der Liste --
   Geld ist die "wichtigste" Zahl, darum optisch klar abgesetzt. */
.act2-money-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, #ffe6a0, #e8b545);
  border: 2px solid #8a5a2a;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 1.35rem;
  color: #4a2f0a;
  text-shadow: 0 1px 0 #ffffff88;
}

.act2-money-icon {
  font-size: 1.1rem;
}

.act2-money-suffix {
  font-size: 0.9rem;
  opacity: 0.75;
  margin-left: 1px;
}

/* Lakto-Coin-Banderole (siehe #act2-level2-sidebar) -- gleiche Form wie
   die Geld-Banderole, aber naechtlich-violett statt golden, damit man beide
   Waehrungen auf einen Blick unterscheidet. */
.act2-laktocoin-badge {
  background: linear-gradient(180deg, #d9c6ff, #8a6fd4);
  border-color: #4a2f8a;
  color: #2a1a52;
}

/* Wrapper um "Ziel"-Label + Lakto-Coin-Banderole, bewusst OHNE eigenen gap
   -- #act2-level2-sidebar selbst ist ein gap:10px-Flex-Container, der sonst
   auch zwischen Label und Banderole einen sichtbaren Spalt reingedrueckt
   haette (genau das sah man im Screenshot). */
.act2-laktocoin-goal-group {
  display: flex;
  flex-direction: column;
}

/* "Ziel"-Label ueber der Lakto-Coin-Banderole (siehe Chat: Levelziel sind
   20 Lakto-Coins) -- gruen statt violett, bildet mit der Banderole darunter
   optisch EINEN zusammenhaengenden Block (nur oben abgerundet, direkt ohne
   Abstand/Rand an die Banderole anschliessend). */
.act2-laktocoin-goal-label {
  text-align: center;
  font-weight: bold;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: #2f8a4a;
  border-radius: 10px 10px 0 0;
  padding: 3px 0;
}

.act2-laktocoin-goal-group .act2-laktocoin-badge {
  border-radius: 0 0 10px 10px;
  border-top: none;
}

/* Run-Timer direkt unter dem Geld -- bewusst dezenter als die Geld-Banderole. */
.act2-run-time {
  text-align: center;
  font-weight: bold;
  font-size: 0.95rem;
  color: #4a2f0a;
  background: #fff5d6;
  border: 2px solid #8a5a2a;
  border-radius: 8px;
  padding: 3px 8px;
  font-variant-numeric: tabular-nums;
}

/* "Du traegst"-Banner -- blendet sich komplett weg (Hoehe 0), solange man
   nichts traegt (siehe .is-empty, per JS in updateAct2CarryHud() gesetzt),
   statt dauerhaft als leere Box Platz zu belegen. */
#act2-carry-hud {
  background: #eaf7ea;
  border: 2px solid #3f8f3f;
  border-radius: 10px;
  padding: 8px 10px;
  overflow: hidden;
  max-height: 120px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin 0.25s ease, border-width 0.25s ease;
}

#act2-carry-hud.is-empty {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  margin-bottom: -10px; /* kompensiert den 10px gap von #act2-sidebar */
}

.act2-carry-title {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #2a5a2a;
}

#act2-carry-list {
  font-weight: bold;
  font-size: 1.05rem;
  color: #1a8a1a;
  white-space: normal;
}

.act2-carry-empty {
  font-weight: normal;
  color: inherit;
  opacity: 0.6;
}

/* Kartenabschnitte ("Helfer", "Rohstoffe", "Produkte") -- ersetzen die
   frueheren einzelnen .act2-sidebar-item-Zeilen. */
.act2-panel {
  background: #ffffffb3;
  border: 2px solid #3a2a10;
  border-radius: 10px;
  padding: 8px 10px 10px;
}

.act2-panel-title {
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-bottom: 6px;
}

/* Helfer-Zeilen: runder Avatar links, Name in der Mitte, Wert/Status als
   Pille rechts -- statt "🦝 Wasserbär: 3L" als reiner Fliesstext. */
.act2-helper-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.act2-helper-row + .act2-helper-row {
  margin-top: 8px;
}

.act2-helper-row.hidden {
  display: none;
}

.act2-helper-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8d9b5;
  border: 2px solid #3a2a10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.act2-helper-name {
  flex: 1;
  font-weight: bold;
  font-size: 0.85rem;
  min-width: 0;
}

.act2-helper-value {
  flex-shrink: 0;
  max-width: 100px;
  background: #3a2a10;
  color: #fbf3e4;
  border-radius: 8px;
  padding: 2px 7px;
  font-weight: bold;
  font-size: 0.75rem;
  text-align: right;
  white-space: normal;
}

.act2-helper-status {
  text-align: center;
}

/* Rohstoffe/Produkte als 2-spaltiges Kachel-Grid statt einer Liste. */
.act2-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.act2-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fbf3e4;
  border: 2px solid #c9b183;
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
}

.act2-tile-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
}

/* Produkte-Kacheln (fertige Waren) leicht abgesetzt von den Rohstoffen. */
.act2-tile-product {
  background: #fff6e0;
  border-color: #d9a441;
}

.act2-tile-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.act2-tile-value {
  font-weight: bold;
  font-size: 1.05rem;
  line-height: 1.1;
}

.act2-tile-value small {
  font-weight: bold;
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 1px;
}

.act2-tile-label {
  font-size: 0.68rem;
  opacity: 0.75;
  white-space: normal;
}

canvas#game {
  display: block;
  border-radius: 12px;
  image-rendering: -webkit-optimize-contrast;
}

#loading {
  width: 960px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  border-radius: 12px;
  background: #eef7ff;
}

#room-label {
  position: absolute;
  top: 22px;
  left: 22px;
  background: #1a1a1acc;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 1rem;
  pointer-events: none;
}

#hint-bar {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1acc;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 10px;
  font-size: 0.95rem;
  white-space: nowrap;
  pointer-events: none;
}

#market-menu {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 240px;
  background: #1a1a1acc;
  color: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  text-align: left;
}

.market-menu-label {
  font-weight: bold;
  margin-bottom: 6px;
}

#market-menu-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.product-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 2px solid #ffffff66;
  background: #ffffff22;
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
}

.product-name {
  white-space: nowrap;
}

.product-price {
  white-space: nowrap;
  opacity: 0.85;
  font-size: 0.8rem;
}

.product-btn.active {
  background: #b6e6a1;
  color: #1a1a1a;
  border-color: #1a1a1a;
  font-weight: bold;
}

.product-btn.active .product-price {
  opacity: 1;
}

#skilltree-overlay,
#achievements-overlay,
#textdialog-overlay,
#run-summary-overlay,
#chapter-menu-overlay {
  position: fixed;
  inset: 0;
  background: #000000aa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Anders als die uebrigen Overlays bewusst NICHT "position: fixed" (das
   wuerde das ganze Browser-Fenster abdunkeln) -- .canvas-frame ist
   "position: relative", darum bezieht sich "absolute; inset: 0" hier nur
   auf das Spielfenster selbst. */
#tutorial-overlay,
#username-overlay,
#lagerbuch-overlay,
#pc-overlay {
  position: absolute;
  inset: 0;
  background: #000000aa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 14px;
}

#skilltree-overlay.hidden,
#achievements-overlay.hidden,
#textdialog-overlay.hidden,
#run-summary-overlay.hidden,
#tutorial-overlay.hidden,
#username-overlay.hidden,
#chapter-menu-overlay.hidden,
#lagerbuch-overlay.hidden,
#pc-overlay.hidden {
  display: none;
}

/* Reiter-Inhalte in der Vitrine (siehe switchVitrineTab() in js/game.js). */
#achievements-body.hidden,
#leaderboard-body.hidden {
  display: none;
}

.skilltree-panel {
  background: #fffaf0;
  border: 5px solid #3a2a10;
  border-radius: 18px;
  width: min(720px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 0 22px 22px;
}

.skilltree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fffaf0;
  padding-top: 18px;
  padding-bottom: 8px;
}

.skilltree-header h2 {
  margin: 0;
}

.skilltree-money {
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.15rem;
}

#close-skilltree,
#close-achievements,
#close-full-leaderboard,
#close-chapter-menu,
#close-run-summary {
  border: 3px solid #3a2a10;
  background: #ffffff;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 12px;
}

.skill-category h3 {
  margin: 16px 0 8px;
  border-bottom: 2px solid #3a2a10;
  padding-bottom: 4px;
}

.skill-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.skill-card {
  background: #ffffff;
  border: 3px solid #3a2a10;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
}

.skill-card.is-locked {
  filter: blur(4px);
  opacity: 0.7;
  user-select: none;
}

.skill-card-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.skill-level {
  font-weight: normal;
  color: #7a5a2a;
}

.skill-card-effect {
  font-size: 0.85rem;
  margin-bottom: 8px;
  min-height: 1.2em;
}

.skill-buy {
  width: 100%;
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #b6e6a1;
  font-weight: bold;
  padding: 6px 0;
  cursor: pointer;
  font-family: inherit;
}

.skill-buy:disabled {
  background: #dddddd;
  cursor: not-allowed;
  opacity: 0.7;
}

.skill-locked,
.skill-maxed {
  font-size: 0.8rem;
  font-style: italic;
  color: #7a5a2a;
}

@media (max-width: 1000px) {
  .canvas-frame {
    transform: scale(0.85);
    transform-origin: top center;
  }
}

#prestige-cutscene,
#actone-cutscene {
  position: fixed;
  inset: 0;
  background: #05050a;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#prestige-cutscene.hidden,
#actone-cutscene.hidden {
  display: none;
}

#prestige-cutscene.visible,
#actone-cutscene.visible {
  opacity: 1;
  pointer-events: auto;
}

.actone-cutscene-hint {
  color: #ffffffaa;
  font-size: 0.9rem;
}

.prestige-cutscene-moon {
  font-size: 4.5rem;
}

.prestige-cutscene-text {
  color: #ffffff;
  font-size: 1.2rem;
  font-family: inherit;
  text-align: center;
  padding: 0 24px;
}

.prestige-cutscene-stats {
  color: #ffffffcc;
  font-size: 0.95rem;
  font-family: inherit;
  text-align: center;
}

.prestige-cutscene-stats.hidden {
  display: none;
}

#dev-mode-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  border: 3px solid #3a2a10;
  background: #fffaf0;
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
}

#chapter-menu-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

#chapter-menu-btn-icon {
  display: none;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

#chapter-menu-btn-icon.is-loaded {
  display: inline-block;
}

.chapter-menu-header-icon {
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin-right: 4px;
}

.chapter-menu-section {
  margin-bottom: 22px;
}

.chapter-menu-section h3 {
  margin: 0 0 6px;
  border-bottom: 2px solid #3a2a10;
  padding-bottom: 4px;
}

.chapter-menu-hint {
  font-size: 0.85rem;
  color: #7a5a2a;
  margin: 0 0 10px;
}

.chapter-menu-danger-btn {
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #f0a8a0;
  font-weight: bold;
  font-family: inherit;
  padding: 8px 14px;
  cursor: pointer;
}

.chapter-menu-act {
  margin-bottom: 14px;
}

.chapter-menu-act h4 {
  margin: 0 0 6px;
  color: #7a5a2a;
}

.chapter-menu-act.is-coming-soon {
  opacity: 0.6;
}

.chapter-menu-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: normal;
  color: #7a5a2a;
  background: #f0e6d0;
  border: 1px solid #c9a97a;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

.chapter-menu-runs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.chapter-menu-run-btn {
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #b6e6a1;
  font-weight: bold;
  font-family: inherit;
  padding: 8px 6px;
  cursor: pointer;
}

.chapter-menu-run-btn:disabled {
  background: #dddddd;
  color: #888888;
  cursor: not-allowed;
  opacity: 0.7;
}

#online-players-panel {
  position: fixed;
  bottom: 6px;
  left: 6px;
  z-index: 15;
  max-width: 220px;
  font-size: 0.65rem;
  line-height: 1.4;
  color: #e8dcc0;
  background: #1a120aaa;
  border-radius: 6px;
  padding: 4px 8px;
  pointer-events: none;
  user-select: none;
}

#online-players-panel.hidden {
  display: none;
}

.online-players-title {
  opacity: 0.7;
}

.online-players-self {
  color: #ffd84d;
  font-weight: bold;
}

.online-players-location {
  opacity: 0.65;
  font-weight: normal;
}

#devmode-overlay {
  position: fixed;
  inset: 0;
  background: #000000aa;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

#devmode-overlay.hidden {
  display: none;
}

.devmode-panel {
  background: #fffaf0;
  border: 5px solid #3a2a10;
  border-radius: 18px;
  width: min(420px, 92vw);
  padding: 18px 22px 22px;
  text-align: left;
}

.devmode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.devmode-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

#devmode-form {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

#devmode-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 2px solid #3a2a10;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
}

#devmode-form button[type="submit"] {
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #b6e6a1;
  font-weight: bold;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
}

#devmode-log {
  max-height: 160px;
  overflow-y: auto;
  font-size: 0.8rem;
  font-family: monospace;
  background: #00000011;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}

/* --- Erfolge (Achievements) --- */

#achievements-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

/* Dimmung passiert bewusst NICHT ueber card-weites opacity/filter (das
   wuerde unweigerlich auch Titel/Icon mitdimmen) -- stattdessen bekommen
   Rahmen/Hintergrund und die Beschreibung je eigene, gedimmte Farben.
   Titel + Icon sehen darum bei jedem gesperrten Erfolg gleich aus,
   unabhaengig davon, ob er "geheim" ist oder nicht. */
.achievement-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #faf6ec;
  border: 3px solid #c8b898;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
}

.achievement-card.is-unlocked {
  background: #d9f5b0;
  border-color: #3a2a10;
}

.achievement-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.achievement-name {
  font-weight: bold;
  margin-bottom: 4px;
  color: #3a2a10;
}

.achievement-tag {
  font-size: 0.75rem;
  font-weight: bold;
  color: #4a7a2a;
  margin-left: 6px;
}

.achievement-desc {
  font-size: 0.85rem;
  color: #8a7a63;
}

.achievement-card.is-unlocked .achievement-desc {
  color: #3a2a10;
}

.achievement-desc.is-blurred {
  filter: blur(5px);
  user-select: none;
}

/* --- Erfolgs-Pop-ups: unten rechts im Spiel-Bereich (relativ zu
   .canvas-frame, nicht zum ganzen Browser-Fenster), verschwinden von
   selbst wieder --- */

#achievement-popups {
  position: absolute;
  bottom: 22px;
  right: 22px;
  z-index: 5;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: calc(100% - 44px);
}

.achievement-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 320px;
  background: #fffaf0;
  border: 3px solid #3a2a10;
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: 0 6px 0 #00000022;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.achievement-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.achievement-toast-icon {
  font-size: 1.8rem;
}

.achievement-toast-title {
  font-size: 0.75rem;
  color: #7a5a2a;
}

.achievement-toast-name {
  font-weight: bold;
}

.achievement-toast-desc {
  font-size: 0.8rem;
  margin-top: 2px;
}

/* --- Run 4: Text-Dialog (Flaschenpost-Brief/Tagebuch) + Statistik-Screen --- */

.textdialog-panel {
  width: min(560px, 92vw);
}

.tutorial-panel {
  width: min(900px, 92%);
  max-height: 96%;
}

.username-panel {
  width: min(420px, 92%);
  text-align: center;
}

.username-hint {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5a4a30;
  margin: 0 0 14px;
}

#username-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#username-input {
  padding: 8px 12px;
  border: 2px solid #3a2a10;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  text-align: center;
}

#username-form button[type="submit"] {
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #b6e6a1;
  font-weight: bold;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
}

/* Reiter in der Erfolge-/Rangliste-Vitrine (siehe #achievements-overlay) */
.tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.tab-btn {
  flex: 1;
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #ffffffcc;
  font-weight: bold;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  cursor: pointer;
}

.tab-btn.is-active {
  background: #b6e6a1;
}

/* Akt-Auswahl oberhalb der Reiter -- bewusst anders eingefaerbt (gold statt
   gruen), damit klar ist: das ist eine Ebene hoeher als Erfolge/Rangliste. */
.act-tab-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.act-tab-bar.hidden {
  display: none;
}

.act-tab-btn {
  flex: 1;
  border: 2px solid #8a5a2a;
  border-radius: 999px;
  background: #fff5d6;
  color: #4a2f0a;
  font-weight: bold;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 5px 10px;
  cursor: pointer;
}

.act-tab-btn.is-active {
  background: linear-gradient(180deg, #ffe6a0, #e8b545);
}

.leaderboard-level {
  margin-bottom: 16px;
}

.leaderboard-level h3 {
  margin: 0 0 8px;
  border-bottom: 2px solid #3a2a10;
  padding-bottom: 4px;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-weight: bold;
}

.leaderboard-rank {
  width: 1.6em;
  text-align: center;
}

.leaderboard-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-time {
  color: #5a4a30;
}

.leaderboard-empty,
.leaderboard-status {
  font-size: 0.9rem;
  color: #5a4a30;
  text-align: center;
  padding: 12px 0;
}

.tutorial-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.lagerbuch-image {
  display: block;
  width: 100%;
  height: 100%;
  /* "cover" statt "contain" -- das Bild ist etwas schmaler als das
     Spielfenster, "contain" liess darum links/rechts einen duennen Rand mit
     dem Spiel dahinter sichtbar. "cover" fuellt die Flaeche komplett aus
     (Seitenverhaeltnis bleibt erhalten), auf Kosten von etwas
     oben/unten abgeschnittenem Bildinhalt. */
  object-fit: cover;
  border-radius: 12px;
}

.pc-image {
  /* position: absolute statt Flex-Kind -- #pc-overlay zeigt inzwischen 2
     uebereinanderliegende .pc-image (Closeup dauerhaft im Hintergrund,
     Bootscreen nur waehrend ACT2_PC_BOOT_DURATION obendrauf, siehe
     index.html/updatePcBoot()). Ohne "absolute" wuerden sie als Flex-Kinder
     nebeneinander statt uebereinander landen. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Gleiches Seitenverhaeltnis wie lagerbuch.png (1.5), darum aus demselben
     Grund "cover" statt "contain" (siehe .lagerbuch-image). */
  object-fit: cover;
  border-radius: 12px;
}

#pc-bootscreen-image.hidden,
#pc-menu-image.hidden,
#pc-kraeuter-unterwegs.hidden,
#pc-schokolade-unterwegs.hidden,
#pc-upgrades-image.hidden {
  display: none;
}

/* Bestellen-Buttons + Status-Text ueber pc_menu.png (siehe index.html) --
   gleiches Prinzip wie .lagerbuch-craft: Wrapper pointer-events: none,
   nur die Buttons selbst wieder klickbar. */
.pc-menu-buttons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#pc-menu-buttons.hidden {
  display: none;
}

.pc-order-btn {
  position: absolute;
  pointer-events: auto;
  transform: translateX(-50%);
  border: 2px solid #3a2a10;
  background: #dddddd; /* grau, solange nicht bestellbar -- gruen per .is-ready */
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.1vw, 13px);
  padding: 3px 10px;
  cursor: pointer;
}

.pc-order-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Gruen wie die Kaufen-Knoepfe (siehe .pc-upgrade-btn/.skill-buy), sobald
   wirklich bestellt werden kann: genug Geld UND kein Lieferant unterwegs
   (siehe updateAct2PcOrderUI() in js/game.js) -- der Knopf bleibt sonst
   klickbar, um "Lieferant ausgebucht" anzeigen zu koennen. */
.pc-order-btn.is-ready {
  background: #b6e6a1;
}

.pc-order-btn:disabled {
  background: #dddddd;
}

.pc-order-status {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translateX(-50%);
  width: 60%;
  text-align: center;
  font-weight: bold;
  color: #4a3418;
  font-size: clamp(11px, 1.3vw, 15px);
}

/* Upgrades-Ansicht (siehe pc_upgrades.png/renderPcUpgradesList() in
   js/game.js) -- eigene, direkt im PC-Bildschirm integrierte Liste statt
   eines Akt-1-Popups. Die Karten werden per JS in #pc-upgrades-list
   eingefuegt; die Flaeche selbst ist scrollbar, damit spaeter beliebig
   viele Upgrades reinpassen. */
.pc-upgrades-view {
  position: absolute;
  inset: 0;
}

.pc-upgrades-view.hidden {
  display: none;
}

/* In der Taskleiste ganz rechts (dort wo auch "CowaidOS" links drin steht),
   statt im Bildschirm-Inhalt selbst -- vertikal auf der duennen Leiste
   zentriert. */
.pc-upgrades-back-btn {
  position: absolute;
  right: 18.5%;
  top: 12.5%;
  transform: translateY(-50%);
  border: 2px solid #3a2a10;
  background: #b6e6a1; /* immer gruen, wie der Upgrades-Oeffnen-Knopf */
  color: #3a2a10;
  border-radius: 6px;
  font-weight: bold;
  font-size: clamp(9px, 1vw, 11px);
  padding: 2px 8px;
  cursor: pointer;
}

.pc-upgrades-list {
  position: absolute;
  left: 18%;
  top: 16%;
  width: 64%;
  height: 53%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
}

/* Kategorie-Ueberschrift (siehe ACT2_UPGRADE_CATEGORIES/renderPcUpgradesList()
   in js/game.js) -- gruppiert die Karten ("Wasserbär", "Kühe", ...) statt
   einer einzigen langen Liste. Extra margin-top oben drauf (zusaetzlich zum
   10px-gap von .pc-upgrades-list) fuer klareren Abstand zur vorigen Gruppe;
   .is-first (allererste Ueberschrift) braucht das nicht. */
.pc-upgrade-category {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid #3a2a10;
  font-weight: bold;
  font-size: clamp(10px, 1.1vw, 13px);
  color: #3a2a10;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.pc-upgrade-category.is-first {
  margin-top: 0;
}

.pc-upgrade-category-icon {
  font-size: 1rem;
}

.pc-upgrade-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border: 2px solid #3a2a10;
  background: #fbf3e4;
  border-radius: 8px;
  padding: 8px 12px;
}

.pc-upgrade-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.pc-upgrade-title {
  font-weight: bold;
  color: #3a2a10;
  font-size: clamp(11px, 1.3vw, 15px);
  text-align: left;
}

.pc-upgrade-desc {
  color: #5a4326;
  font-size: clamp(9px, 1vw, 12px);
  text-align: left;
}

.pc-upgrade-level {
  flex-shrink: 0;
  color: #3a2a10;
  font-weight: bold;
  font-size: clamp(9px, 1vw, 12px);
  white-space: nowrap;
  text-align: right;
}

.pc-upgrade-btn {
  flex-shrink: 0;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.1vw, 13px);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.pc-upgrade-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Wie .skill-buy in Akt 1: gruen, sobald kaufbar -- grau bei zu wenig
   Geld (disabled). "Max. Level"/"Freigeschaltet" sind ebenfalls disabled. */
.pc-upgrade-btn:not(:disabled) {
  background: #b6e6a1;
}

.pc-upgrade-btn:disabled {
  background: #dddddd;
}

/* Sich drehendes Kuh-Logo waehrend des Bootens, mittig-oben im Bildschirm-
   Bereich von pc_bootscreen.png platziert (per Auge geschaetzt, ueber dem
   dort bereits eingezeichneten "CowaidOS"-Schriftzug). */
#pc-bootscreen-cow {
  position: absolute;
  left: 50%;
  top: 29%;
  width: 12%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: pc-bootscreen-cow-spin 2s linear infinite;
}

#pc-bootscreen-cow.hidden {
  display: none;
}

@keyframes pc-bootscreen-cow-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Lagerbestand-Werte auf der linken Buchseite (siehe #lagerbuch-overlay in
   index.html) -- liegen prozentual ueber dem Bild, damit sie bei jeder
   Fenstergroesse an derselben Buch-Zeile bleiben. pointer-events: none,
   damit ein Klick daneben weiterhin (wie auf dem Bild selbst) das Overlay
   schliessen kann. */
.lagerbuch-values {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lagerbuch-value {
  position: absolute;
  left: 26%;
  width: 20%;
  transform: translateY(-50%);
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-size: clamp(14px, 2.3vw, 28px);
  color: #4a3418;
}

/* Herstellen-Bereich auf der rechten Buchseite (siehe #lagerbuch-overlay in
   index.html) -- gleiches Prinzip wie .lagerbuch-values (prozentual
   positioniert, pointer-events: none auf dem Wrapper, damit ein Klick
   daneben weiterhin das Overlay schliesst). */
.lagerbuch-craft {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lagerbuch-craft-panel {
  position: absolute;
  left: 56%;
  width: 28%;
}

.lagerbuch-craft-recipe {
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  font-size: clamp(12px, 1.6vw, 20px);
  color: #4a3418;
  margin-bottom: 6px;
}

/* Buendelt "Herstellen" + "Auto" nebeneinander -- der margin-left sass
   vorher direkt auf .lagerbuch-craft-btn, sitzt jetzt hier auf dem
   gemeinsamen Wrapper, damit beide Buttons an derselben Stelle wie zuvor
   beginnen. */
.lagerbuch-craft-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 90px;
}

.lagerbuch-craft-btn {
  pointer-events: auto;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 15px);
  padding: 4px 14px;
  cursor: pointer;
}

.lagerbuch-craft-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Gruen, sobald eine Herstellung gestartet werden kann (gleiche Farbe wie
   ueberall, siehe .pc-upgrade-btn) -- grau, solange Zutaten fehlen oder
   schon etwas hergestellt wird. */
.lagerbuch-craft-btn:not(:disabled) {
  background: #b6e6a1;
}

.lagerbuch-craft-btn:disabled {
  background: #dddddd;
}

/* "Auto"-Umschalter (siehe act2ToggleAutoCraft() in js/game.js) -- startet
   die Herstellung von sich aus neu, sobald Zutaten reichen und nichts
   anderes gerade laeuft. Aktiv = ausgefuellt/dunkel, inaktiv = nur Umriss. */
.lagerbuch-craft-auto-btn {
  pointer-events: auto;
  border: 2px solid #3a2a10;
  background: transparent;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.1vw, 13px);
  padding: 4px 10px;
  cursor: pointer;
  opacity: 0.6;
}

.lagerbuch-craft-auto-btn.is-active {
  background: #3a8a3a;
  border-color: #245424;
  color: #ffffff;
  opacity: 1;
}

.lagerbuch-craft-auto-btn.hidden {
  display: none;
}

.lagerbuch-craft-progress {
  margin-top: 8px;
  width: 100%;
  height: 10px;
  border: 2px solid #3a2a10;
  border-radius: 6px;
  background: #e8d9b5;
  overflow: hidden;
}

.lagerbuch-craft-progress.hidden {
  display: none;
}

.lagerbuch-craft-progress-fill {
  height: 100%;
  width: 0%;
  background: #8a5a2a;
}

/* Schwebender Schliessen-Button oben rechts -- kein Panel-Header mehr,
   das Bild selbst fuellt die ganze Flaeche (siehe #lagerbuch-overlay/
   #pc-overlay). */
#close-lagerbuch,
#close-pc {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 3px solid #3a2a10;
  background: #ffffff;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 12px;
}

/* Sprechblase des Verkauf-Waschbaeren (siehe #verkauf-waschbaer-bubble in
   index.html) -- klein, an seine Weltposition gebunden (left/top in %,
   siehe updateAct2VerkaufWaschbaerBubble() in js/game.js), NICHT die ganze
   Flaeche wie Lagerbuch/PC. transform zentriert die Box ueber dem
   angegebenen Punkt (= direkt ueber seinem Kopf). */
.verkauf-waschbaer-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: #fbf3e4;
  border: 2px solid #3a2a10;
  border-radius: 10px;
  padding: 8px;
  width: 170px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.verkauf-waschbaer-bubble.hidden {
  display: none;
}

.verkauf-waschbaer-bubble-title {
  font-weight: bold;
  color: #3a2a10;
  font-size: clamp(9px, 1vw, 11px);
  text-align: center;
  margin-bottom: 2px;
}

.verkauf-produkt-btn {
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 6px;
  font-weight: bold;
  font-size: clamp(9px, 1vw, 11px);
  padding: 3px 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.verkauf-produkt-btn.is-active {
  background: #8a5a2a;
  color: #ffffff;
}

/* Akt 2, Level 2: Vollbild-CowaidOS-Desktop statt Hof-Erkundung (siehe
   #act2-level2-screen in index.html/startAct2Level2() in js/game.js) --
   bewusst rein in CSS (kein eigenes Hintergrundbild noetig): weisser
   Desktop, oben eine duenne Taskleiste wie beim normalen PC, darunter 4
   grosse Kacheln. Noch ohne Funktion dahinter (reine Platzhalter-Flaeche
   fuer spaeter). */
#act2-level2-screen {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#act2-level2-screen.hidden {
  display: none;
}

/* Game-Over-Overlay (siehe act2TriggerGameOver() in js/game.js) -- liegt
   ueber ALLEN Unter-Menus, egal welches gerade offen ist. */
.act2-level2-gameover-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, #3a1414, #0a0404);
}

.act2-level2-gameover-overlay.hidden {
  display: none;
}

.act2-level2-gameover-text {
  font-weight: bold;
  font-size: clamp(32px, 6vw, 56px);
  color: #ff5c5c;
  text-shadow: 0 0 20px #ff5c5c88;
}

.act2-level2-gameover-subtext {
  font-size: clamp(13px, 1.8vw, 17px);
  color: #ffe6a0;
}

/* Levelziel-Wahl + Abschluss-Screen (siehe act2UpdateLevel2Goal()/
   act2ShowLevel2Finish() in js/game.js) -- gleiches Overlay-Grundmuster wie
   .act2-level2-gameover-overlay, aber neutral/festlich statt alarmierend. */
.act2-level2-goal-overlay,
.act2-level2-finish-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00000088;
}

.act2-level2-goal-overlay.hidden,
.act2-level2-finish-overlay.hidden {
  display: none;
}

.act2-level2-goal-box,
.act2-level2-finish-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  padding: 28px 32px;
  background: linear-gradient(160deg, #fbf3e4, #e8d9b5);
  border: 4px solid #3a2a10;
  border-radius: 18px;
  box-shadow: 0 10px 0 #00000055;
  text-align: center;
}

.act2-level2-goal-title,
.act2-level2-finish-title {
  font-weight: bold;
  font-size: clamp(22px, 3vw, 30px);
  color: #3a2a10;
}

.act2-level2-goal-text {
  font-size: clamp(13px, 1.6vw, 16px);
  color: #5a4228;
}

.act2-level2-goal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.act2-level2-goal-buttons .casino-action-btn {
  width: 100%;
}

.act2-level2-finish-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(13px, 1.6vw, 16px);
  color: #5a4228;
}

.act2-level2-taskbar {
  position: relative;
  flex-shrink: 0;
  /* Feste Hoehe statt nur Padding -- sonst wurde die Leiste in Untermenus
     etwas hoeher, weil die Breadcrumb-Knoepfe mehr eigene Hoehe brauchen
     als der blosse "CowaidOS"-Text. */
  height: 46px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6ead0;
  border-bottom: 2px solid #e8d9b5;
  color: #3a2a10;
  font-weight: bold;
  font-size: clamp(12px, 1.6vw, 16px);
  padding: 0 16px;
  /* Eigener Stapelkontext ueber den Unter-Menu-Inhalten darunter -- sonst
     wurde z.B. die Info-Tooltip (siehe .act2-level2-info-tooltip) vom
     spaeter im HTML stehenden, ebenfalls "position:relative" Unter-Menu
     ueberdeckt (bei gleichem/keinem z-index gewinnt in CSS schlicht die
     spaetere DOM-Reihenfolge). */
  z-index: 5;
}

.act2-level2-taskbar-title {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Immer absolut mittig in der Taskleiste, unabhaengig von der Breite des
   Breadcrumbs links -- leer (und damit unsichtbar) im Hauptmenu. */
.act2-level2-current-menu {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: clamp(13px, 1.7vw, 17px);
  color: #3a2a10;
  pointer-events: none;
}

/* Hilfe-Knopf ganz oben rechts (siehe updateAct2Level2InfoBtn() in
   js/game.js) -- bewusst derselbe schlichte Knopf-Stil wie der Home-/
   Breadcrumb-Knopf (kein dunkler Kreis), per margin-left:auto an den
   rechten Rand der Leiste gedrueckt. */
.act2-level2-info-btn {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 5px 12px;
  cursor: help;
}

.act2-level2-info-btn.hidden {
  display: none;
}

.act2-level2-info-tooltip {
  position: absolute;
  top: 130%;
  right: 0;
  width: 360px;
  max-width: 85vw;
  background: #fffaf0;
  border: 2px solid #3a2a10;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.5;
  color: #3a2a10;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 6px 14px #00000033;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.act2-level2-info-btn:hover .act2-level2-info-tooltip,
.act2-level2-info-btn:focus .act2-level2-info-tooltip {
  opacity: 1;
  visibility: visible;
}

.act2-level2-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
}

.act2-level2-breadcrumb.hidden {
  display: none;
}

.act2-level2-breadcrumb-crumb {
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 5px 12px;
  cursor: pointer;
}

.act2-level2-breadcrumb-sep {
  color: #7a5a2a;
  font-weight: bold;
}

.act2-level2-desktop {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.act2-level2-desktop.hidden {
  display: none;
}

/* Hoeher als breit (statt 2x2-Grid) -- alle 4 nebeneinander in einer
   Reihe, gerade so breit, dass sie Platz haben. Platz fuer spaeteren Text
   oben/unten ist schon da (Icon + Label sind bereits zwei getrennte
   Elemente, siehe .act2-level2-tile-label unten). */
.act2-level2-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(140px, 17vw, 195px);
  height: clamp(240px, 29vw, 310px);
  background: #fbf3e4;
  border: 3px solid #3a2a10;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 #c9b183;
}

.act2-level2-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #c9b183;
}

.act2-level2-tile:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #c9b183;
}

/* Blinkt, solange ein gefundener Lakto-Coin noch nicht eingefordert wurde
   (siehe state.act2.mining.found/updateAct2Level2MiningTileIndicator() in
   js/game.js) -- fuer den Fall, dass man den Toast-Hinweis verpasst hat. */
@keyframes act2-mining-tile-pulse {
  0%, 100% {
    border-color: #3a2a10;
    box-shadow: 0 4px 0 #c9b183, 0 0 0 0 rgba(255, 216, 77, 0.7);
  }
  50% {
    border-color: #e8b545;
    box-shadow: 0 4px 0 #c9b183, 0 0 20px 7px rgba(255, 216, 77, 0.7);
  }
}

.act2-level2-tile.is-pulsing {
  animation: act2-mining-tile-pulse 1.1s ease-in-out infinite;
}

/* Ersetzt die frueheren Emoji-Icons (siehe Ordner assets/objects/act2_level2/)
   -- quadratische, fertig gestaltete Icons samt eigenem Hintergrund, darum
   bewusst kein zusaetzlicher Rahmen/Schatten hier noetig. */
.act2-level2-tile-image {
  width: clamp(80px, 11vw, 140px);
  height: clamp(80px, 11vw, 140px);
  object-fit: contain;
  border-radius: 14px;
}

.act2-level2-tile-label {
  font-weight: bold;
  font-size: clamp(14px, 1.9vw, 20px);
  color: #3a2a10;
}

/* Gesperrte Casino-Kachel (siehe state.act2.casinoUnlocked/
   act2UpdateCasinoTileLock() in js/game.js): der Freischalt-Knopf steckt
   direkt in der Kachel selbst (siehe #act2-level2-casino-unlock-btn in
   index.html), aber per position:absolute am unteren Rand -- so bleiben
   Bild/Label exakt gleich zentriert wie bei den anderen 3 Kacheln (sonst
   wuerden sie als zusaetzliches 3. Flex-Kind mit nach oben rutschen).
   Keine zusaetzliche Abdunklung noetig, der Knopf macht den gesperrten
   Zustand bereits klar (analog .markt-price-row-locked-next). */
.act2-level2-tile.is-locked {
  cursor: default;
}

.act2-level2-tile.is-locked:hover {
  transform: none;
  box-shadow: 0 4px 0 #c9b183;
}

#act2-level2-casino-unlock-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
}

/* Unter-Menus (Markt, Mining, spaeter Casino/Krypto-Boerse) -- fuellen die
   gleiche Flaeche wie .act2-level2-desktop (siehe openAct2Level2View() in
   js/game.js). */
.act2-level2-subview {
  flex: 1;
  position: relative;
}

.act2-level2-subview.hidden {
  display: none;
}

/* Markt-Menu (siehe act2MarktRenderFullPriceOverview()/.act2-level2-tile-
   markt-Klick-Handler in js/game.js) -- eine einzige Reihe: links der
   "Handeln"-Knopf, in der Mitte eine durchgehende Preis-Uebersicht aller
   Produkte/Tools/Rohstoffe (keine Reiter mehr noetig), rechts aussen eine
   eigene Spalte mit 3 Upgrade-Platzhaltern. */
.markt-layout {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 24px;
  gap: 24px;
  box-sizing: border-box;
}

.markt-trade-cta {
  flex: 0 0 300px;
  /* Nur so hoch wie der Inhalt braucht (Titel+Text), nicht die ganze
     Zeilenhoehe -- .markt-layout richtet seine Kinder sonst per Default
     (align-items: stretch) auf volle Hoehe aus. Dafuer vertikal mittig in
     der Reihe zentriert. */
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Der ganze Bereich (Titel + Text) ist der Knopf -- analog zu
   .act2-level2-tile im Hauptmenu, nur als Rechteck statt Kachel. Oeffnet
   das bestehende Kurs-Menu (siehe #markt-trade-action-area in index.html). */
.markt-action-area {
  cursor: pointer;
  background: #fbf3e4;
  border: 3px solid #3a2a10;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: 0 4px 0 #c9b183;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.markt-action-area:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #c9b183;
}

.markt-action-area:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #c9b183;
}

.markt-section-title {
  font-weight: bold;
  font-size: clamp(16px, 2vw, 22px);
  color: #3a2a10;
}

.markt-section-intro {
  margin: 0;
  font-size: clamp(11px, 1.3vw, 14px);
  color: #3a2a10;
  line-height: 1.4;
}

.markt-price-overview {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Zentriert den Produkte/Luxus-Block als Ganzes vertikal -- Produkte
     landet dadurch etwas ueber der Mitte, Luxus mit gleichem Abstand
     darunter, je eine Luecke oben/unten zum Rand. */
  justify-content: center;
  gap: 2px;
  overflow-y: auto;
  min-width: 0;
  padding: 4px 10px;
}

.markt-price-category {
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  color: #7a5a2a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 14px;
}

.markt-price-category:first-child {
  margin-top: 0;
}

.markt-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid #e8d9b580;
  font-size: clamp(12px, 1.4vw, 15px);
}

.markt-price-label {
  font-weight: bold;
  color: #3a2a10;
}

.markt-price-range {
  color: #7a5a2a;
  font-family: "Consolas", "Courier New", monospace;
}

/* Noch gesperrte Produkte (ausser dem jeweils naechsten, siehe
   act2MarktRenderFullPriceOverview() in js/game.js) -- Text bleibt
   technisch vorhanden (Platzhalter-Zeichen), aber verschwommen/
   unleserlich per CSS-Blur. */
.markt-blurred {
  filter: blur(4px);
  user-select: none;
}

.markt-price-row-locked-next {
  gap: 10px;
}

/* Gleiches Muster wie .pc-upgrade-btn (Akt 2) / .skill-buy (Akt 1): grau
   (disabled), solange nicht leistbar -- gruen, sobald kaufbar. */
.markt-unlock-btn {
  flex-shrink: 0;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.markt-unlock-btn:not(:disabled) {
  background: #b6e6a1;
}

.markt-unlock-btn:disabled {
  background: #dddddd;
  opacity: 0.6;
  cursor: not-allowed;
}

.markt-unlock-btn.hidden {
  display: none;
}

.markt-upgrades {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-left: 2px solid #e8d9b5;
  padding-left: 18px;
}

.markt-upgrade-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  border-radius: 10px;
  color: #3a2a10;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
  padding: 8px;
  cursor: pointer;
}

/* Gleiches Muster wie .pc-upgrade-btn (Akt 2) / .skill-buy (Akt 1): grau
   (disabled) bei zu wenig Geld oder Max. Level -- gruen, sobald kaufbar. */
.markt-upgrade-slot:not(:disabled) {
  background: #b6e6a1;
}

.markt-upgrade-slot:disabled {
  background: #dddddd;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Kaufen-Menu (siehe act2MarktTradeRenderChart() in js/game.js) -- oben die
   cremefarbene Kopfzeile (Kurs/Auswahl/Kaufen-Knopf), darunter ein dunkles
   "Boersen"-Chart-Panel mit live tickender Kurslinie, fuer das Gefuehl
   eines echten Markts. Absichtlich eine Klasse statt einer ID-Regel --
   eine ID-Regel wuerde .act2-level2-subview.hidden in der Spezifitaet
   schlagen und das Menu dadurch IMMER sichtbar machen, auch wenn .hidden
   gesetzt ist (genau das war der Bug: der Chart war schon im Markt-
   Hauptmenu zu sehen, bevor man ueberhaupt auf Kaufen geklickt hat). */
.markt-trade-view {
  display: flex;
  flex-direction: column;
}

.markt-trade-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 2px solid #e8d9b5;
}

.markt-trade-price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.markt-trade-price-label {
  font-size: clamp(10px, 1.2vw, 13px);
  color: #7a5a2a;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.markt-trade-price-value {
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(20px, 3vw, 30px);
  color: #3a2a10;
  transition: color 0.2s ease;
}

.markt-trade-price-value.is-up {
  color: #1e9e4a;
}

.markt-trade-price-value.is-down {
  color: #c0392b;
}

.markt-trade-select {
  border: 2px solid #3a2a10;
  background: #fbf3e4;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  padding: 8px 14px;
  cursor: pointer;
}

.markt-trade-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.markt-trade-action-btns {
  display: flex;
  gap: 10px;
}

/* Simpler Knopf wie die Breadcrumb-Knoepfe oben in der Taskleiste (siehe
   .act2-level2-breadcrumb-crumb) -- bewusst kein Gold-Gradient/Hover-Lift
   mehr, der Fuellbalken (.markt-trade-confirm-fill) braucht aber weiterhin
   position:relative/overflow:hidden auf dem Knopf selbst. */
.markt-trade-confirm-btn {
  position: relative;
  overflow: hidden;
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  padding: 8px 18px;
  cursor: pointer;
}

.markt-trade-confirm-btn:disabled {
  cursor: not-allowed;
}

/* Laeuft waehrend der 5s-Wartezeit von 0 auf 100% Breite (siehe
   updateAct2MarktTradePending() in js/game.js). */
.markt-trade-confirm-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #3a2a1033;
  pointer-events: none;
}

.markt-trade-confirm-label {
  position: relative;
  z-index: 1;
}

.markt-trade-chart-wrap {
  position: relative;
  flex: 1;
  margin: 18px 20px 24px;
  background: radial-gradient(ellipse at top, #1f2630, #11151b);
  border: 3px solid #3a2a10;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 40px #00000066;
}

.markt-trade-axis-label {
  position: absolute;
  left: 10px;
  color: #9fb3c8;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 12px);
  z-index: 2;
}

.markt-trade-axis-max {
  top: 10px;
}

.markt-trade-axis-min {
  bottom: 10px;
}

.markt-trade-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.markt-trade-gridline {
  stroke: #ffffff14;
  stroke-width: 0.3;
  stroke-dasharray: 2 2;
}

.markt-trade-area {
  fill: #4dd2ff33;
  stroke: none;
  transition: fill 0.2s ease;
}

.markt-trade-area.is-up {
  fill: #3ce07a33;
}

.markt-trade-area.is-down {
  fill: #ff5c5c33;
}

.markt-trade-line {
  fill: none;
  stroke: #4dd2ff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #4dd2ffcc);
  transition: stroke 0.2s ease;
}

.markt-trade-line.is-up {
  stroke: #3ce07a;
  filter: drop-shadow(0 0 4px #3ce07acc);
}

.markt-trade-line.is-down {
  stroke: #ff5c5c;
  filter: drop-shadow(0 0 4px #ff5c5ccc);
}

.markt-trade-ticker {
  position: absolute;
  right: 10px;
  transform: translateY(-50%);
  background: #11151b;
  border: 2px solid #4dd2ff;
  color: #4dd2ff;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px #4dd2ff66;
  white-space: nowrap;
  z-index: 3;
  transition: top 0.3s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.markt-trade-ticker.is-up {
  border-color: #3ce07a;
  color: #3ce07a;
  box-shadow: 0 0 10px 1px #3ce07a66;
}

.markt-trade-ticker.is-down {
  border-color: #ff5c5c;
  color: #ff5c5c;
  box-shadow: 0 0 10px 1px #ff5c5c66;
}

/* --- Casino (siehe act2CasinoRouletteSpin()/act2CasinoSlotsSpin() in
   js/game.js) -- bewusst ein dunkles, gold/rot getranktes "Casino-Zimmer"
   statt des cremefarbenen Farm-Looks, fuer den Kontrast zur restigen
   gemuetlichen CowaidOS-Optik. */
.act2-level2-subview.casino-themed {
  background: radial-gradient(ellipse at top, #3a1414, #180808);
}

.casino-select-layout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.casino-game-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: clamp(160px, 20vw, 220px);
  height: clamp(200px, 26vw, 270px);
  background: linear-gradient(#2a1414, #180a0a);
  border: 3px solid #e8b545;
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #7a4a1a, 0 0 24px #e8b54533;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.casino-game-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 #7a4a1a, 0 0 30px #e8b54555;
}

.casino-game-tile:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #7a4a1a, 0 0 20px #e8b54533;
}

/* Ersetzt das frühere Emoji-Icon, analog .act2-level2-tile-image im
   Hauptmenu (siehe #act2-level2-desktop-view in index.html). */
.casino-game-tile-image {
  width: clamp(80px, 11vw, 140px);
  height: clamp(80px, 11vw, 140px);
  object-fit: contain;
  border-radius: 14px;
}

.casino-game-tile-label {
  font-weight: bold;
  font-size: clamp(16px, 2vw, 20px);
  color: #ffe6a0;
  text-shadow: 0 0 8px #e8b54566;
}

/* Gemeinsame Einsatz-Zeile (Betrag + Schnellwahl-Knoepfe) fuer beide
   Casino-Spiele (siehe act2CasinoWireBetPresets() in js/game.js). */
.casino-bet-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.casino-bet-label {
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  color: #ffe6a0;
}

.casino-bet-input {
  width: 110px;
  border: 2px solid #e8b545;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  font-family: "Consolas", "Courier New", monospace;
  background: #1c1c1f;
  color: #ffe6a0;
}

.casino-bet-input:disabled {
  opacity: 0.6;
}

.casino-bet-preset-btn {
  border: 2px solid #e8b545;
  background: #2a1414;
  color: #ffe6a0;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
  padding: 5px 10px;
  cursor: pointer;
}

.casino-bet-preset-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.casino-action-btn {
  border: 2px solid #e8b545;
  background: #2a1414;
  color: #ffe6a0;
  border-radius: 10px;
  font-weight: bold;
  font-size: clamp(12px, 1.5vw, 16px);
  padding: 9px 18px;
  cursor: pointer;
}

.casino-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.casino-action-btn-primary {
  background: linear-gradient(#ffe6a0, #e8b545);
  color: #3a1414;
  box-shadow: 0 4px 0 #7a4a1a;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.casino-action-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7a4a1a;
}

.casino-action-btn-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #7a4a1a;
}

.casino-action-btn-primary:disabled {
  background: #5a4a30;
  color: #ffe6a0;
}

/* --- Roulette ------------------------------------------------------- */
.roulette-layout {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 24px;
  gap: 28px;
  box-sizing: border-box;
  overflow-y: auto;
}

.roulette-wheel-col {
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-sizing: border-box;
}

.roulette-wheel-wrap {
  position: relative;
  width: 260px;
  height: 260px;
}

.roulette-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid #e8b545;
  box-shadow: 0 0 30px #00000088, inset 0 0 14px #00000066;
  transition: transform 4s cubic-bezier(0.15, 0.6, 0.1, 1);
}

.roulette-wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  white-space: nowrap;
}

.roulette-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #ffe6a0;
  filter: drop-shadow(0 0 4px #000a);
  z-index: 2;
}

.roulette-result {
  min-height: 1.6em;
  text-align: center;
  font-weight: bold;
  font-size: clamp(12px, 1.5vw, 15px);
  color: #ffe6a0;
}

.roulette-result.is-win {
  color: #3ce07a;
}

.roulette-result.is-lose {
  color: #ff5c5c;
}

.roulette-result.is-push {
  color: #ffe6a0;
}

.roulette-recent {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  max-width: 260px;
}

.roulette-recent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  border: 1px solid #00000055;
}

.roulette-recent-red { background: #c0392b; }
.roulette-recent-black { background: #17171a; }
.roulette-recent-green { background: #1c8a4c; }

.roulette-controls {
  flex: 1 1 50%;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  box-sizing: border-box;
}

/* Links die Zahlen (0-8), rechts daneben die 6 Aussenwetten (siehe
   .roulette-outside-bets) -- beide nebeneinander statt untereinander. */
.roulette-bets-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

/* 0 oben alleine ueber die volle Breite, darunter 1-8 paarweise (1|2, 3|4,
   usw.) -- wirkt dadurch eher wie ein echter Casino-Tisch (siehe Chat). */
.roulette-number-grid {
  flex: 1 1 55%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.roulette-number-cell {
  border: 1px solid #e8b545;
  border-radius: 6px;
  padding: 16px 2px;
  font-weight: bold;
  font-size: clamp(14px, 1.8vw, 20px);
  color: #fff;
  cursor: pointer;
}

.roulette-number-cell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.roulette-cell-green {
  grid-column: 1 / -1;
  background: #1c8a4c;
}

.roulette-cell-red { background: #c0392b; }
.roulette-cell-black { background: #17171a; }

.roulette-outside-bets {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roulette-outside-btn {
  flex: 1;
  border: 1px solid #e8b545;
  border-radius: 8px;
  background: #2a1414;
  color: #ffe6a0;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
  padding: 8px 6px;
  cursor: pointer;
}

.roulette-outside-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.roulette-outside-red { background: #c0392b; color: #fff; }
.roulette-outside-black { background: #17171a; color: #fff; }

.roulette-active-bets {
  min-height: 1.8em;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.roulette-active-bets-empty {
  font-size: clamp(10px, 1.2vw, 13px);
  color: #c9b183;
  font-style: italic;
}

.roulette-active-bet-chip {
  border: 1px solid #e8b545;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: bold;
  color: #ffe6a0;
  background: #2a1414;
}

.roulette-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* --- Slotmaschine ------------------------------------------------------- */
.slots-layout {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px;
  box-sizing: border-box;
}

.slots-machine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  background: linear-gradient(#2a1414, #180a0a);
  border: 4px solid #e8b545;
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 0 30px #00000088;
}

.slots-reels {
  display: flex;
  gap: 10px;
  background: #0d0d0f;
  border: 3px solid #7a4a1a;
  border-radius: 12px;
  padding: 14px;
}

.slots-reel {
  width: clamp(70px, 9vw, 96px);
  height: clamp(70px, 9vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1c1f;
  border-radius: 8px;
  overflow: hidden;
}

.slots-symbol {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1;
}

.slots-reel.is-settling .slots-symbol {
  animation: slots-settle 0.3s ease;
}

@keyframes slots-settle {
  0% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.slots-result {
  min-height: 1.6em;
  text-align: center;
  font-weight: bold;
  font-size: clamp(13px, 1.6vw, 16px);
  color: #ffe6a0;
}

.slots-result.is-win {
  color: #3ce07a;
}

.slots-result.is-lose {
  color: #ff5c5c;
}

.slots-result.is-push {
  color: #ffe6a0;
}

.slots-spin-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.slots-paytable {
  background: #1c1c1f;
  border: 3px solid #e8b545;
  border-radius: 14px;
  padding: 16px 20px;
  min-width: 200px;
}

.slots-paytable-title {
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  color: #ffe6a0;
  margin-bottom: 10px;
  text-align: center;
}

.slots-paytable-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: clamp(13px, 1.5vw, 16px);
  color: #fff;
  border-bottom: 1px solid #ffffff22;
}

.slots-paytable-note {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #c9b183;
  font-style: italic;
}

/* Mining-Minispiel (siehe act2MiningOpen() in js/game.js) -- links die
   "Blockchain"-Uebersicht + Nonce-Eingabe, rechts der grosse Hash samt
   Upgrade-Knoepfen/Schwierigkeits-Anzeige/Einforderungs-Knopf. */
.mining-layout {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 24px;
  gap: 24px;
  box-sizing: border-box;
}

.mining-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mining-section-title {
  font-weight: bold;
  font-size: clamp(13px, 1.6vw, 18px);
  color: #3a2a10;
  margin-bottom: 6px;
}

.mining-overview {
  flex: 1;
  margin: 0;
  background: #1c1c1f;
  color: #7dff9b;
  border: 3px solid #3a2a10;
  border-radius: 10px;
  padding: 14px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: clamp(10px, 1.3vw, 14px);
  line-height: 1.5;
  overflow-y: auto;
  white-space: pre;
}

/* Belohnungs- und NONCE-Zeile heben sich gelb vom Rest ab (siehe
   act2MiningRenderOverview() in js/game.js). */
.mining-highlight {
  color: #ffd84d;
  font-weight: bold;
}

.mining-nonce-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mining-nonce-label {
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  color: #3a2a10;
}

.mining-nonce-input {
  width: 140px;
  border: 2px solid #3a2a10;
  border-radius: 8px;
  padding: 5px 8px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  font-family: "Consolas", "Courier New", monospace;
}

.mining-check-btn,
.mining-auto-btn {
  border: 2px solid #3a2a10;
  background: #e8d9b5;
  color: #3a2a10;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 6px 16px;
  cursor: pointer;
}

.mining-auto-btn.is-active {
  background: #5fd16a;
  color: #163a1a;
}

.mining-auto-btn.hidden {
  display: none;
}

.mining-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 12px;
  padding-top: 8px;
}

.mining-upgrades {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Die Karten selbst nutzen .pc-upgrade-card & Co. (siehe index.html) --
   exakt dieselbe Optik wie bei den PC-Upgrades in Akt 2 Level 1, nur
   .pc-upgrade-card ist standardmaessig flex-shrink:0 mit fixer Herkunft
   aus der PC-Liste; hier zur Sicherheit nochmals explizit, falls sich der
   umgebende Flex-Kontext unterscheidet. */
.mining-upgrades .pc-upgrade-card {
  flex-shrink: 0;
}

.mining-difficulty {
  font-weight: bold;
  font-size: clamp(13px, 1.7vw, 19px);
}

.mining-difficulty.is-fail {
  color: #c0392b;
}

.mining-difficulty.is-success {
  color: #2e8b3d;
}

.mining-hash-label {
  font-weight: bold;
  font-size: clamp(13px, 1.6vw, 18px);
  color: #3a2a10;
}

.mining-hash {
  width: 100%;
  word-break: break-all;
  text-align: center;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(16px, 2.6vw, 26px);
  color: #3a2a10;
  background: #fbf3e4;
  border: 3px solid #3a2a10;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.mining-hash-zeros {
  text-shadow: 0 0 1px #3a2a10;
}

.mining-hash-zeros.is-fail {
  color: #c0392b;
}

.mining-hash-zeros.is-success {
  color: #2e8b3d;
}

/* Gleiches Gruen wie .pc-upgrade-btn:not(:disabled) & Co. -- einheitlich
   mit den anderen Kaufen-/Freischalten-Knoepfen. */
.mining-claim-btn {
  border: 2px solid #3a2a10;
  border-radius: 10px;
  background: #b6e6a1;
  color: #3a2a10;
  font-weight: bold;
  font-size: clamp(13px, 1.6vw, 17px);
  padding: 10px 18px;
  cursor: pointer;
}

.mining-claim-btn.hidden {
  display: none;
}

.textdialog-body {
  font-size: 1rem;
  line-height: 1.6;
  white-space: pre-line;
  text-align: left;
}

.run-summary-rank {
  text-align: center;
  font-weight: bold;
  font-size: 1.05rem;
  color: #7a5a2a;
  margin-bottom: 12px;
}

.run-summary-rank.hidden {
  display: none;
}

.run-summary-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.run-summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 3px solid #3a2a10;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
}

.run-summary-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.run-summary-label {
  font-size: 0.8rem;
  color: #7a5a2a;
}

.run-summary-value {
  font-weight: bold;
  font-size: 1.1rem;
}


/* Musik an/aus + Lautstaerke -- oben links direkt neben dem Neustart-Knopf
   (#chapter-menu-btn), gleiche Hoehe (siehe js/music.js). */
#music-controls {
  position: fixed;
  top: 14px;
  left: 54px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
}

#music-volume {
  width: 90px;
  accent-color: #e8b545;
  cursor: pointer;
}

#music-mute-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 30px;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px #0006);
}

/* Ganze Rangliste einer Stufe (siehe openFullLeaderboard() in js/game.js) --
   ueber der Vitrine (#achievements-overlay, z-index 10). */
#full-leaderboard-overlay {
  position: fixed;
  inset: 0;
  background: #00000066;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11;
}

#full-leaderboard-overlay.hidden {
  display: none;
}

.full-leaderboard-panel {
  width: min(520px, 92vw);
}

.leaderboard-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  border-bottom: 2px solid #3a2a10;
  padding-bottom: 4px;
}

.leaderboard-level-header h3 {
  margin: 0;
  border: none;
  padding: 0;
}

.leaderboard-full-btn {
  border: 2px solid #3a2a10;
  border-radius: 8px;
  background: #ffffffcc;
  font-weight: bold;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.leaderboard-full-btn:hover {
  background: #b6e6a1;
}

/* Eigener Eintrag (gleicher Name wie der eigene Rangliste-Name) hervorgehoben. */
.leaderboard-row.is-own {
  background: #fff1b8;
  border-radius: 6px;
}

/* PC-Upgrade, das erst spaeter freigeschaltet werden kann (blurredUntil in
   ACT2_UPGRADES, z.B. Milchschokolade vor dem Kräuterkäse) -- Inhalt
   verschwommen, Karte selbst bleibt als "da kommt noch was" sichtbar. */
.pc-upgrade-card.is-blurred > * {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

/* --- Krypto-Boerse (siehe act2BoerseTickMeme()/act2BoerseTradeStart() in
   js/game.js) -- eigenes dunkles Navy/Lila statt dem warmen Markt-Look oder
   dem Gold/Rot des Casinos, passend zum Kachel-Icon (gruen/rote Pfeile). */
.act2-level2-subview.boerse-themed {
  background: radial-gradient(ellipse at top, #241a3a, #0c0a16);
}

.boerse-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.boerse-kapital-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 2px solid #4a3a7a;
}

.boerse-kapital-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.boerse-kapital-label {
  font-size: clamp(10px, 1.2vw, 13px);
  color: #b19fe0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.boerse-kapital-value {
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(18px, 2.6vw, 26px);
  color: #ffe6a0;
}

.boerse-exchange-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boerse-exchange-group .casino-bet-input {
  width: 90px;
  background: #1a1430;
}

.boerse-exchange-btn {
  border: 2px solid #8a6ef0;
  background: #231a42;
  color: #d9ccff;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.boerse-exchange-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.boerse-exchange-btn-primary {
  background: linear-gradient(#d9ccff, #8a6ef0);
  color: #1a1430;
}

.boerse-exchange-btn-primary:disabled {
  background: #4a3a7a;
  color: #b19fe0;
}

/* Auszahlen-Knopf gehoert nicht zur Einzahlen-Gruppe, darum via
   margin-left:auto an den rechten Rand der Kopfzeile geschoben. */
#boerse-withdraw-btn {
  margin-left: auto;
}

.boerse-trade-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 2px solid #4a3a7a;
}

.boerse-trade-price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.boerse-trade-price-label {
  font-size: clamp(10px, 1.2vw, 13px);
  color: #b19fe0;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.boerse-trade-price-value {
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(18px, 2.6vw, 26px);
  color: #d9ccff;
  transition: color 0.2s ease;
}

.boerse-trade-price-value.is-up {
  color: #3ce07a;
}

.boerse-trade-price-value.is-down {
  color: #ff5c5c;
}

.boerse-trade-select {
  border: 2px solid #8a6ef0;
  background: #1a1430;
  color: #d9ccff;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  padding: 8px 14px;
  cursor: pointer;
}

.boerse-bet-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.boerse-bet-row .casino-bet-input {
  width: 90px;
  background: #1a1430;
}

.boerse-trade-action-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.boerse-sell-wrap {
  position: relative;
}

/* Zaehlt die BUY-Abklingzeit sichtbar ueber dem SELL-Knopf herunter (siehe
   act2BoerseRenderControls() in js/game.js) -- verschwindet, sobald wieder
   verkauft werden kann. */
.boerse-cooldown-label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #231a42;
  border: 2px solid #8a6ef0;
  color: #d9ccff;
  border-radius: 8px;
  padding: 3px 10px;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 13px);
}

.boerse-cooldown-label.hidden {
  display: none;
}

/* Analog .markt-trade-confirm-btn: Fuellbalken (.boerse-trade-fill) laeuft
   waehrend der fixen 20-Tick-Laufzeit von 0 auf 100% (siehe
   act2BoerseRenderControls() in js/game.js). */
.boerse-trade-btn {
  position: relative;
  overflow: hidden;
  border: 2px solid #8a6ef0;
  background: #231a42;
  color: #d9ccff;
  border-radius: 8px;
  font-weight: bold;
  font-size: clamp(12px, 1.4vw, 15px);
  padding: 10px 18px;
  cursor: pointer;
}

.boerse-trade-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.boerse-trade-btn-buy { border-color: #3ce07a; }
.boerse-trade-btn-sell { border-color: #ff5c5c; }

.boerse-trade-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: #ffffff22;
  pointer-events: none;
}

.boerse-trade-label {
  position: relative;
  z-index: 1;
}

.boerse-trade-chart-wrap {
  position: relative;
  flex: 1;
  margin: 18px 20px 24px;
  background: radial-gradient(ellipse at top, #1f2630, #11151b);
  border: 3px solid #4a3a7a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 40px #00000066;
}

.boerse-trade-axis-label {
  position: absolute;
  left: 10px;
  color: #9fb3c8;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 12px);
  z-index: 2;
}

.boerse-trade-axis-max { top: 10px; }
.boerse-trade-axis-min { bottom: 10px; }

.boerse-trade-chart-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.boerse-trade-gridline {
  stroke: #ffffff14;
  stroke-width: 0.3;
  stroke-dasharray: 2 2;
}

.boerse-trade-area {
  fill: #4dd2ff33;
  stroke: none;
  transition: fill 0.2s ease;
}

.boerse-trade-area.is-up { fill: #3ce07a33; }
.boerse-trade-area.is-down { fill: #ff5c5c33; }

.boerse-trade-line {
  fill: none;
  stroke: #4dd2ff;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px #4dd2ffcc);
  transition: stroke 0.2s ease;
}

.boerse-trade-line.is-up {
  stroke: #3ce07a;
  filter: drop-shadow(0 0 4px #3ce07acc);
}

.boerse-trade-line.is-down {
  stroke: #ff5c5c;
  filter: drop-shadow(0 0 4px #ff5c5ccc);
}

.boerse-trade-ticker {
  position: absolute;
  right: 10px;
  transform: translateY(-50%);
  background: #11151b;
  border: 2px solid #4dd2ff;
  color: #4dd2ff;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 14px);
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px #4dd2ff66;
  white-space: nowrap;
  z-index: 3;
  transition: top 0.3s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.boerse-trade-ticker.is-up {
  border-color: #3ce07a;
  color: #3ce07a;
  box-shadow: 0 0 10px 1px #3ce07a66;
}

.boerse-trade-ticker.is-down {
  border-color: #ff5c5c;
  color: #ff5c5c;
  box-shadow: 0 0 10px 1px #ff5c5c66;
}

/* Waagrechte Referenzlinie auf Hoehe des mengen-gewichteten Einstiegspreises
   (siehe act2BoerseAvgBuyPrice()/act2BoerseRenderChart() in js/game.js) --
   nur sichtbar, solange man den Coin tatsaechlich haelt. Gestrichelt und
   gold, damit sie sich klar von der live tickenden Kurslinie abhebt. */
.boerse-avg-line {
  stroke: #e8b545;
  stroke-width: 1;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
}

.boerse-avg-line.hidden {
  display: none;
}

.boerse-avg-label {
  position: absolute;
  left: 10px;
  transform: translateY(-50%);
  background: #11151b;
  border: 2px solid #e8b545;
  color: #e8b545;
  font-family: "Consolas", "Courier New", monospace;
  font-weight: bold;
  font-size: clamp(10px, 1.2vw, 12px);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 3;
}

.boerse-avg-label.hidden {
  display: none;
}