/* =============================================
   App Layout: Sidebar + Content
   ============================================= */

.app-layout {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}

/* Alles, was der Browser selbst heranscrollt — scrollIntoView, Tastaturfokus,
   Sprungmarke —, landete bisher unter den klebenden Leisten: oben unter dem
   Kopfstapel, unten unter der festen Reiterleiste. Der Ausgleich
   `.app-layout { padding-bottom }` wirkt nur fuer das letzte Element der Seite,
   nicht fuer Inhalte in der Seitenmitte wie die fristgebundenen
   Wett-Schaltflaechen. */
:root:has(.header-bar) {
  scroll-padding-top: var(--header-stack-h);
}

/* Sidebar */
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--navy) 0%, #1a365d 100%);
  color: white;
  display: flex;
  flex-direction: column;
  position: sticky;
  /* Unterhalb des gesamten Kopfstapels kleben, nicht am selben Punkt wie
     Kopfzeile, App-Statusleiste und Status-Streifen — sonst verschwindet der
     erste Reiter („Uebersicht") im gescrollten Zustand unter dem blauen Band. */
  top: var(--header-stack-h);
  height: calc(100vh - var(--header-stack-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}

.sidebar-image {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.sidebar-tabs {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  flex: 1;
}

.sidebar-tab {
  padding: 0.85rem 1.25rem;
  border: none;
  background: none;
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  font-family: inherit;
}

/* Icons existieren im HTML, sind aber auf Desktop unsichtbar — dort gilt das
   urspruengliche reine Text-Layout wie vor dem Mobile-Polish. Nur in der
   mobilen Bottom-Bar werden die Icons wieder eingeblendet (siehe Media-Query). */
.sidebar-tab-icon {
  display: none;
}

.sidebar-tab-label {
  display: inline;
}

.sidebar-tab:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

.sidebar-tab.active {
  color: var(--gold);
  background: rgba(214, 158, 46, 0.12);
  border-left-color: var(--gold);
  font-weight: 700;
}

/* Content Area */
.content-area {
  flex: 1;
  padding: 1.5rem 2rem;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile: Bottom Bar statt Sidebar.
   767.98px statt 768px — sonst greift bei exakt 768px diese Regel gleichzeitig
   mit den min-width-768-Regeln (Desktop-Innenmasse, Kopf ohne Umbruch). */
@media (max-width: 767.98px) {
  /* Die feste Reiterleiste am unteren Rand ist 64px hoch (plus Safe-Area). */
  :root {
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .app-layout {
    flex-direction: column;
    padding-bottom: 68px;
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: 64px;
    flex-direction: row;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.28);
    /* Safe-Area fuer iPhones mit Home-Indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .sidebar-image {
    display: none;
  }

  .sidebar-tabs {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
    /* Angenehmeres Touch-Scrolling */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .sidebar-tabs::-webkit-scrollbar { display: none; }

  .sidebar-tab {
    flex: 1 0 auto;
    min-width: 68px;
    /* 2-Zeilen-Layout: Icon oben, Label darunter */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    padding: 0.45rem 0.5rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    border-left: none;
    border-top: 3px solid transparent;
    border-bottom: none;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }

  .sidebar-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: auto;
    line-height: 1;
    margin-bottom: 1px;
  }

  .sidebar-tab-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.01em;
  }

  .sidebar-tab:active {
    background: rgba(184, 132, 52, 0.12);
  }

  .sidebar-tab.active {
    border-top-color: var(--gold);
    border-left-color: transparent;
    background: rgba(184, 132, 52, 0.18);
    color: var(--gold);
  }

  .sidebar-tab.active .sidebar-tab-label {
    font-weight: 700;
  }

  .content-area {
    padding: 1rem;
  }

  /* Fade-Mask an den Raendern deutet an, dass horizontal gescrollt werden kann */
  .sidebar-tabs {
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 18px, #000 calc(100% - 18px), rgba(0,0,0,0) 100%);
  }
}

/* =============================================
   Horizontal Tabs (legacy, z.B. GM Dashboard)
   ============================================= */

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.tabs::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.tab {
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: none;
  background: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.tab.active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

/* Mobile: grosszuegigere Tap-Zone, leichter aktiver Hintergrund fuer bessere Lesbarkeit */
@media (max-width: 767.98px) {
  .tabs {
    gap: 0.15rem;
    padding: 0 0.25rem;
  }
  .tab {
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    border-radius: 6px 6px 0 0;
  }
  .tab.active {
    background: rgba(184, 132, 52, 0.12);
  }
}

.tab:hover {
  color: var(--navy);
}

.tab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.2s ease-out;
}

@media (min-width: 768px) {
  .tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
  }
}

/* Header Bar
   Der Kopfbereich muss auf JEDER Breite genau --header-h hoch bleiben — an ihm
   haengen die sticky-Positionen von Statusleiste, Seitenleiste und
   Kampf-Aktionsleiste. Frueher brach er um (gemessen: 114px bei 320px, 77px bei
   360-700px, 89px bei 769-899px durch den Musik-Spieler) und schob sich ueber
   alles, was bei 56px klebte. Deshalb: nicht umbrechen, sondern schrumpfen
   lassen — und wenn es wirklich nicht reicht, waagerecht scrollen. */
.header-bar {
  background: var(--navy);
  color: white;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-2);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.header-bar h1 {
  color: white;
  font-size: var(--text-lg);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Spielname gibt zuerst nach: der hohe Schrumpffaktor sorgt dafuer, dass
   fast der gesamte Platzmangel hier landet und nicht bei den Bedienelementen
   rechts. Ohne das wuerden Verbindungsanzeige und Farbschema-Schalter aus dem
   sichtbaren Bereich geschoben. */
.header-brand {
  flex: 0 100 auto;
  min-width: 0;
  /* Notbremse: schrumpft die Marke unter ihre Mindestbreite, wird geschnitten
     statt in die Bedienelemente rechts hineingezeichnet. */
  overflow: hidden;
}

.header-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  flex-wrap: nowrap;
  flex: 0 1 auto;
  /* Notbremse: reicht es selbst dann nicht, scrollt der Musik-Spieler
     (white-space: nowrap) in seinem eigenen Bereich, statt den Kopf auf zwei
     Zeilen zu treiben. */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.header-info::-webkit-scrollbar { display: none; }

.header-info span {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .header-bar {
    padding: var(--space-3) var(--space-6);
  }

  .header-bar h1 {
    font-size: var(--text-xl);
  }

  .header-info {
    gap: var(--space-4);
  }

  /* Der Spielname darf schrumpfen, aber nicht verschwinden. Mit
     `flex: 0 100 auto` landete der gesamte Platzmangel in der Marke, bis
     `#header-title` auf 0px zusammengedrueckt war (gemessen bei 810px und
     863px Breite: Titelbreite 0, Inhalt 97px). */
  .header-brand {
    min-width: min(38%, 260px);
  }

  /* Innerhalb der Marke ist der Spielname der flexible Teil. Ohne diese Zeile
     behielten Logo und Status-Abzeichen ihre volle Breite und der Titel bekam
     genau 5px (gemessen bei 863px Breite: img 34, h1 5, Status 89, Runde 36). */
  .header-bar h1 {
    flex: 1 1 auto;
    min-width: 5ch;
  }

  /* Reicht der Platz rechts nicht, scrollt die Leiste in ihrem eigenen Bereich
     — dafuer traegt `.header-info` `overflow-x: auto`. Ohne diese Zeile
     schrumpften stattdessen die Kinder und die Leiste scrollte nie. */
  .header-info > * {
    flex-shrink: 0;
  }
}

/* Player List */
.player-list {
  display: grid;
  gap: var(--space-2);
}

.player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Auf sehr schmalen Schirmen rutschen Guthaben und Schaltflaechen in die
     naechste Zeile, statt aus der Karte herauszuragen. */
  flex-wrap: wrap;
  min-height: var(--touch-min);
  padding: var(--space-3);
  background: var(--card-white);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  gap: var(--space-2);
}

.player-name {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.online-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
}

.online-indicator.online {
  background: var(--success);
}

.player-berry {
  font-family: monospace;
  color: var(--gold);
}

/* Team Grid - Mobile First (improved for wider cards)
   `min(280px, 100%)` statt `280px`: in einem Container schmaler als 280px wurde
   die Spur sonst auf 280px aufgeblasen und lief ueber den Rand hinaus. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-3);
}

/* Ab 480px nur groesserer Abstand — die Spaltenzahl regelt auto-fill selbst.
   Die frueheren Bloecke bei 768 und 1024 wiederholten denselben Wert und sind
   hier zusammengefasst. */
@media (min-width: 480px) {
  .team-grid {
    gap: var(--space-4);
  }
}

.team-slot {
  background: var(--card-white);
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
  padding: var(--space-3);
  text-align: center;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .team-slot {
    min-height: 180px;
    padding: var(--space-4);
  }
}

.team-slot.empty {
  border-style: dashed;
  color: var(--text-muted);
}

.team-slot.filled {
  border-color: var(--navy);
}

.team-slot.ko {
  opacity: 0.5;
  background: #FED7D7;
}

.team-slot.dead {
  opacity: 0.3;
  background: #1a1a1a;
  color: white;
}

.slot-number {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.slot-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border-color);
  margin-bottom: 0.5rem;
}

.slot-name {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.slot-crew {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Auction Display - Mobile First */
.auction-display {
  text-align: center;
  padding: var(--space-4);
}

@media (min-width: 768px) {
  .auction-display {
    padding: var(--space-6);
  }
}

.auction-character {
  margin-bottom: var(--space-5);
}

.auction-character-image {
  width: 120px;
  height: 160px;
  border-radius: 12px;
  object-fit: contain;
  border: 4px solid var(--gold);
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, var(--navy) 0%, #2D4A7C 100%);
}

@media (min-width: 768px) {
  .auction-character-image {
    width: 150px;
    height: 200px;
  }
}

.auction-character-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
}

@media (min-width: 768px) {
  .auction-character-name {
    font-size: var(--text-2xl);
  }
}

.auction-character-crew {
  color: var(--text-secondary);
}

/* Berry-Anzeige: Flash-Animation bei Update, damit Aenderung sichtbar ist */
@keyframes berryFlash {
  0% { transform: scale(1); text-shadow: none; }
  50% { transform: scale(1.12); text-shadow: 0 0 8px var(--gold); color: var(--gold); }
  100% { transform: scale(1); text-shadow: none; }
}

#player-berry {
  display: inline-block;
  transition: color 0.2s ease;
}

#player-berry.berry-flash {
  animation: berryFlash 0.55s ease-out;
}

/* ===== BERRY-LOG (GM) ===== */
.berry-log-summary {
  margin-bottom: 1rem;
}

/* Die Karten tragen Milliardenbetraege ("-196.113.333.334"). Bei 160px
   Mindestbreite blieben davon 131px Textbreite uebrig — 92px zu wenig, ohne
   Umbruchstelle und ohne Schriftanpassung. `min(…, 100%)` verhindert, dass die
   groessere Mindestbreite in schmalen Behaeltern selbst ueberlaeuft. */
.berry-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.berry-summary-card {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-warm);
  /* Bezugsgroesse fuer die Schriftanpassung des Betrags */
  container-type: inline-size;
  container-name: berry-summary;
}

.berry-summary-card.in { border-left: 4px solid var(--success); }
.berry-summary-card.out { border-left: 4px solid var(--danger); }
.berry-summary-card.neutral { border-left: 4px solid var(--gold); }

.berry-summary-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Der Betrag ist ein unumbrechbarer Zifferblock — er muss sich der Karte
   anpassen, statt an ihrem Rand abgeschnitten zu werden. 10.5cqi tragen auch
   "-196.113.333.334" (16 Zeichen) in die Kartenbreite. */
.berry-summary-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

@container berry-summary (min-width: 0px) {
  .berry-summary-value {
    font-size: clamp(0.95rem, 10.5cqi, 1.5rem);
  }
}

.berry-summary-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.berry-log-list {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 65vh;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

/* Die Liste scrollt waagerecht in sich (`.berry-log-list`). Ohne Mindestbreite
   quetschte `width: 100%` die Spalten trotzdem zusammen, bis in der
   Detailspalte jedes Wort einzeln untereinander stand (gemessen: 142px breit,
   104px hoch). Mit der Mindestbreite scrollt die Tabelle, statt zu zerfallen. */
.berry-log-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.87rem;
}

.berry-log-table thead {
  position: sticky;
  top: 0;
  background: var(--bg-warm);
  z-index: 1;
}

.berry-log-table th {
  text-align: left;
  padding: 0.6rem 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.berry-log-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.berry-log-table tbody tr:hover {
  background: rgba(214, 158, 46, 0.05);
}

.berry-log-time {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.berry-log-player {
  font-weight: 600;
  white-space: nowrap;
}

.berry-log-reason {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.berry-log-note {
  color: var(--text-secondary);
  font-size: 0.85rem;
  min-width: 180px;
  max-width: 260px;
}

.berry-log-delta {
  font-family: monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.berry-delta-plus { color: var(--success); }
.berry-delta-minus { color: var(--danger); }

.berry-log-balance {
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== MODERNE UI-POLITUR v31 ===== */
/* Dezente Glass-Morphism Effekte auf Cards + weichere Schatten */
.card {
  backdrop-filter: saturate(1.05);
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

/* Moderner Button-Look: weichere Gradients + subtile Schatten */
.btn {
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, filter 0.15s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning {
  background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.04));
  background-blend-mode: overlay;
}

.btn-gold {
  box-shadow: 0 4px 14px rgba(214, 158, 46, 0.32);
}

/* Sidebar: moderner, weicher Uebergang */
.sidebar {
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
}

.sidebar-tab {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}

/* Der wandernde Reiter ist eine reine Maus-Spielerei. Auf Touch bliebe der
   Versatz nach dem Tippen stehen — deshalb nur bei echtem Zeiger. */
@media (hover: hover) {
  .sidebar-tab:hover {
    padding-left: 1.75rem;
  }
}

.sidebar-tab.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--gold);
}

/* Weichere Input-Felder */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
select,
textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Scroll: smooth */
html {
  scroll-behavior: smooth;
}

/* Modal-Overlay: modernes Backdrop-Blur */
.modal-overlay {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.55);
}

/* Header: feiner Schatten */
.header-bar {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(1.1);
}

/* ===== OZEAN-WELLEN-ANIMATION =====
   Dezenter, animierter Wellen-Effekt am unteren Bildschirmrand fuer
   One-Piece-Atmosphaere. Nicht in Streaming Mode oder reduced-motion. */

.ocean-waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.ocean-waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

.ocean-waves .wave-layer-1 {
  animation: waveMove 14s linear infinite;
  fill: rgba(74, 144, 164, 0.55);
}

.ocean-waves .wave-layer-2 {
  animation: waveMove 22s linear infinite reverse;
  fill: rgba(45, 90, 106, 0.45);
  opacity: 0.75;
}

.ocean-waves .wave-layer-3 {
  animation: waveMove 30s linear infinite;
  fill: rgba(26, 54, 93, 0.35);
  opacity: 0.6;
}

@keyframes waveMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* In Dark Mode leicht helleres Wasser */
[data-theme="dark"] .ocean-waves .wave-layer-1 { fill: rgba(103, 232, 249, 0.35); }
[data-theme="dark"] .ocean-waves .wave-layer-2 { fill: rgba(34, 211, 238, 0.25); }
[data-theme="dark"] .ocean-waves .wave-layer-3 { fill: rgba(125, 211, 252, 0.2); }

/* Streaming Mode: Wellen bleiben (sind nicht sensibel), aber gedimmt */
html[data-streaming="on"] .ocean-waves { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
  .ocean-waves svg,
  .ocean-waves .wave-layer-1,
  .ocean-waves .wave-layer-2,
  .ocean-waves .wave-layer-3 {
    animation: none !important;
  }
  .ocean-waves { opacity: 0.3; }
}

/* Battle-Arena: stilvolleres Hintergrundbild (Parchment + Ocean) */
.battle-arena {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26, 54, 93, 0.07) 0%, rgba(74, 144, 164, 0.05) 100%),
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.02) 0,
      rgba(0, 0, 0, 0.02) 2px,
      transparent 2px,
      transparent 10px
    );
  position: relative;
}

.battle-arena::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .battle-arena {
  background:
    radial-gradient(ellipse at top, rgba(251, 191, 36, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(125, 211, 252, 0.04) 0%, rgba(34, 211, 238, 0.03) 100%),
    rgba(15, 15, 26, 0.3);
}

/* Dezente Animation fuer Card-Hover — moderner wirkender UI */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ===== STREAMING MODE =====
   Blendet sensible Informationen aus, damit die Spieloberflaeche
   streamtauglich ist (keine Gegner-Stats, keine Raum-Infos etc.).
   Aktiviert via <html data-streaming="on">. */

/* Grundlegende Ausblendung ueber data-streaming-hide */
html[data-streaming="on"] [data-streaming-hide] {
  display: none !important;
}

/* Stats verstecken (eigene, fremde, Battle-Stats, Spy-Reveals) */
html[data-streaming="on"] .player-stats-grid,
html[data-streaming="on"] .stats-grid,
html[data-streaming="on"] .stat-item,
html[data-streaming="on"] .compare-grid,
html[data-streaming="on"] #compare-tool,
html[data-streaming="on"] .battle-character-info,
html[data-streaming="on"] #spied-card,
html[data-streaming="on"] .auction-character-details,
html[data-streaming="on"] .category-btn small {
  display: none !important;
}

/* Teamlisten / Team-Slots komplett verstecken (Tab fuer GM auch) */
html[data-streaming="on"] #tab-teams,
html[data-streaming="on"] #tabBtn-teams,
html[data-streaming="on"] #tab-team,
html[data-streaming="on"] #tabBtn-team,
html[data-streaming="on"] #team-grid,
html[data-streaming="on"] #teams-container,
html[data-streaming="on"] #crew-bonus-summary {
  display: none !important;
}

/* Links, Joinlink, Raumpasswort auch in Spieler-Lobby verbergen */
html[data-streaming="on"] #join-link,
html[data-streaming="on"] #copy-link-btn,
html[data-streaming="on"] #room-password,
html[data-streaming="on"] #rotate-pw-btn {
  display: none !important;
}

/* Konto-Budget-Anzeige und Berry-Displays verbergen */
html[data-streaming="on"] #player-berry,
html[data-streaming="on"] .player-berry,
html[data-streaming="on"] .budget-display {
  display: none !important;
}

/* Sicherheits-Hinweis-Banner, wenn Streaming Mode aktiv */
html[data-streaming="on"] body::before {
  content: "\1F4FA Streaming Mode aktiv";
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  background: var(--danger);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* Toggle-Button: aktiver Zustand */
#streaming-toggle-btn[aria-pressed="true"] {
  background: var(--danger);
  color: #fff;
}

/* Team Drag & Drop */
.player-character-card.is-draggable {
  cursor: grab;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

/* Auf Touch-Geraeten Long-Press fuer Drag, Scroll weiterhin erlaubt (pan-y) */
.touch-device .player-character-card.is-draggable {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.player-character-card.is-draggable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

/* Waehrend ein Touch-Drag laeuft: keine Hover-Effekte anderer Karten */
.is-touch-dragging .player-character-card.is-draggable:hover {
  transform: none;
  box-shadow: none;
}

.player-character-card.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: scale(0.98);
}

.player-character-card.drop-target {
  outline: 3px dashed var(--gold);
  outline-offset: -4px;
  box-shadow: 0 0 0 4px rgba(214, 158, 46, 0.18), 0 10px 24px rgba(0, 0, 0, 0.22);
  transform: translateY(-3px) scale(1.02);
}

/* Ghost-Element beim Touch-Drag — folgt dem Finger */
.pointer-drag-ghost {
  border-radius: var(--radius-lg, 12px);
  transition: none !important;
  background: var(--card, #fbf6ea);
}

/* Scroll sperren wenn ein Touch-Drag laeuft */
.is-touch-dragging {
  overscroll-behavior: contain;
}
.is-touch-dragging body {
  overflow: hidden;
}

@keyframes swapPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); box-shadow: 0 0 30px rgba(214, 158, 46, 0.7); }
  100% { transform: scale(1); }
}

.player-character-card.swap-pulse {
  animation: swapPulse 0.5s ease-out;
}

.drag-handle {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 20px;
  line-height: 1;
  color: rgba(184, 132, 52, 0.75);
  letter-spacing: -1px;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .drag-handle {
  color: rgba(244, 199, 120, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.touch-device .drag-handle {
  font-size: 24px;
  top: 8px;
  right: 10px;
}

/* Touch-Drag-Hinweis ueber dem Team-Grid */
.team-touch-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: rgba(184, 132, 52, 0.12);
  border: 1px solid rgba(184, 132, 52, 0.35);
  color: var(--ink, #1f1a12);
  font-size: 0.875rem;
  line-height: 1.35;
}

.team-touch-hint-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: none;
  background: transparent;
  color: var(--ink-soft, #3d3320);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 6px;
}

.team-touch-hint-close:hover,
.team-touch-hint-close:focus-visible {
  background: rgba(184, 132, 52, 0.18);
}

[data-theme="dark"] .team-touch-hint {
  background: rgba(228, 168, 74, 0.12);
  border-color: rgba(228, 168, 74, 0.3);
  color: var(--ink, #e8efff);
}

/* Teufelsfrucht-Bild in Auktion */
.auction-devil-fruit-image {
  object-fit: cover;
  background: radial-gradient(circle at 30% 30%, #4a2448 0%, #2a1a2e 100%);
  border-color: var(--gold);
}

.auction-devil-fruit-fallback {
  font-size: 4rem;
  margin-bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 160px;
  border-radius: 12px;
  border: 4px solid var(--gold);
  background: linear-gradient(135deg, #4a2448 0%, #2a1a2e 100%);
}

@media (min-width: 768px) {
  .auction-devil-fruit-fallback {
    width: 150px;
    height: 200px;
    font-size: 5rem;
  }
}

/* Teufelsfrucht-Beschreibung in Auktion */
.auction-devil-fruit-desc {
  margin: 0.75rem auto 0;
  padding: 0.75rem 1rem;
  background: rgba(214, 158, 46, 0.10);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 460px;
  text-align: left;
  white-space: pre-wrap;
}

[data-theme="dark"] .auction-devil-fruit-desc {
  background: rgba(251, 191, 36, 0.12);
  color: var(--text-primary);
}

/* Auction Countdown (Endphase) */
.auction-countdown-container {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-warm);
  border-radius: var(--radius);
  border: 2px solid var(--gold);
}

.auction-countdown-bar {
  height: 8px;
  background: var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.auction-countdown-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 4px;
  transition: none;
}

.auction-countdown-fill.countdown-critical {
  background: var(--danger, #e53e3e);
}

.auction-countdown-time {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  text-align: center;
  line-height: 1.2;
}

.auction-countdown-time.countdown-critical {
  color: var(--danger, #e53e3e);
  animation: countdownPulse 0.5s ease-in-out infinite alternate;
}

.auction-countdown-label {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@keyframes countdownPulse {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Letztes Gebot Indikator */
.last-bid-indicator {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  font-style: italic;
}

.auction-bid-info {
  background: var(--bg-warm);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (min-width: 768px) {
  .auction-bid-info {
    padding: var(--space-5);
  }
}

.current-bid {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--gold);
}

@media (min-width: 768px) {
  .current-bid {
    font-size: var(--text-3xl);
  }
}

.current-bidder {
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.bid-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .bid-form {
    flex-direction: row;
    gap: var(--space-3);
  }
}

.bid-form input {
  flex: 1;
}

/* Battle Arena - Mobile First (Vertical)
   `minmax(0, 1fr)` statt `1fr`: Rasterfelder haben von Haus aus
   `min-width: auto` und wachsen auf die Mindestbreite ihres Inhalts. Gemessen
   bei 1040px: 502px Inhalt in 496px Sichtbreite. */
.battle-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-radius: 10px;
  transition: background 0.6s ease, border 0.6s ease;
  border: 1px solid transparent;
}

/* Kampffeld-Themen: Hintergrund + Akzentfarbe je nach Austragungsort */
.battle-field-theme {
  position: relative;
  border-radius: 10px;
  padding: 0.75rem;
  margin: 0.5rem 0;
  transition: background 0.6s ease, border 0.6s ease, box-shadow 0.6s ease;
}
.field-hohe-see {
  background: linear-gradient(135deg, rgba(12,74,110,0.55), rgba(30,58,138,0.35));
  border: 1px solid #38bdf8;
  box-shadow: inset 0 0 40px rgba(56,189,248,0.15);
}
.field-stadt {
  background: linear-gradient(135deg, rgba(55,65,81,0.55), rgba(100,116,139,0.35));
  border: 1px solid #94a3b8;
  box-shadow: inset 0 0 40px rgba(148,163,184,0.15);
}
.field-wald {
  background: linear-gradient(135deg, rgba(20,83,45,0.55), rgba(6,78,59,0.35));
  border: 1px solid #4ade80;
  box-shadow: inset 0 0 40px rgba(74,222,128,0.15);
}
.field-skypia {
  background: linear-gradient(135deg, rgba(186,230,253,0.2), rgba(253,242,248,0.12));
  border: 1px solid #f0f9ff;
  box-shadow: inset 0 0 40px rgba(224,242,254,0.2);
}
.field-wueste {
  background: linear-gradient(135deg, rgba(146,64,14,0.45), rgba(202,138,4,0.35));
  border: 1px solid #fbbf24;
  box-shadow: inset 0 0 40px rgba(251,191,36,0.15);
}
.field-marineford {
  background: linear-gradient(135deg, rgba(127,29,29,0.55), rgba(69,10,10,0.45));
  border: 1px solid #ef4444;
  box-shadow: inset 0 0 40px rgba(239,68,68,0.2);
}
.field-mary-joa {
  background: linear-gradient(135deg, rgba(76,29,149,0.5), rgba(180,83,9,0.35));
  border: 1px solid #d4a017;
  box-shadow: inset 0 0 40px rgba(212,160,23,0.2);
}

/* Desktop: Horizontal Layout */
@media (min-width: 1024px) {
  .battle-arena {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-5); /* knapper als vorher fuer kompakte Ansicht */
  }
}

/* Kompakte Charakter-Infozeile (Crew / Kopfgeld / Siege in einer Zeile) */
.battle-character-quickinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0.4rem;
  line-height: 1.3;
}
.battle-character-quickinfo .sep {
  opacity: 0.5;
}

/* Hinweis-Banner fuer eigenen Zug */
.battle-turn-hint {
  background: linear-gradient(135deg, rgba(214,158,46,0.18), rgba(214,158,46,0.08));
  border: 1px solid var(--gold);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-top: 0.5rem;
  animation: turnHintPulse 2s ease-in-out infinite;
}
@keyframes turnHintPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 158, 46, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(214, 158, 46, 0); }
}

.battle-status-card {
  padding: 0.5rem 0.85rem !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* Stats als anklickbare Buttons (nur fuer eigenen Charakter im eigenen Zug) */
/* Layout: 6 Stats in 2 Spalten x 3 Zeilen, 7. Stat (Speed) mittig zentriert darunter.
   Responsive: volle Breite des Containers, bei sehr schmalen Viewports 1 Spalte. */
.stats-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.6rem;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.stats-grid-compact .stat-item:nth-child(7) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 0.2rem);
  min-width: 0;
}

/* Sehr schmale Screens: 1 Spalte, damit Labels+Werte nicht umbrechen */
@media (max-width: 359.98px) {
  .stats-grid-compact {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .stats-grid-compact .stat-item:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
}

/* Ab Tablet: leicht mehr max-width erlauben, damit Stats gut proportioniert sind */
@media (min-width: 768px) {
  .stats-grid-compact {
    max-width: 460px;
    gap: 0.5rem;
  }
}

.stats-grid-compact .stat-item {
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 1px solid transparent;
}

.stats-grid-compact .stat-value {
  font-size: 1rem;
  font-weight: 700;
}

.stats-grid-compact .stat-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
}

[data-theme="dark"] .stats-grid-compact .stat-item {
  background: rgba(255, 255, 255, 0.04);
}

.stats-grid-compact.stats-clickable .stat-attack {
  cursor: pointer;
  background: linear-gradient(135deg, rgba(214,158,46,0.15), rgba(214,158,46,0.06));
  border: 1px solid rgba(214, 158, 46, 0.4);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  position: relative;
}

.stats-grid-compact.stats-clickable .stat-attack:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(214,158,46,0.3), rgba(214,158,46,0.15));
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(214, 158, 46, 0.35);
}

.stats-grid-compact.stats-clickable .stat-attack:active {
  transform: translateY(0);
}

.stats-grid-compact.stats-clickable .stat-attack:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stats-grid-compact .stat-item.locked {
  opacity: 0.5;
  text-decoration: line-through;
  cursor: not-allowed;
}

.stats-grid-compact .stat-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.stats-grid-compact .stat-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.stat-attack.stat-attacking {
  pointer-events: none;
  animation: statAttackPulse 0.5s ease-out;
}

@keyframes statAttackPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); box-shadow: 0 0 18px rgba(229, 62, 62, 0.6); }
  100% { transform: scale(1); }
}

/* Kompakte Battle-Ansicht auf dem Desktop — ohne Scrollen */
@media (min-width: 1024px) {
  /* Battle-Container als Flex-Column mit begrenzter Gesamthoehe */
  #battle-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: calc(100vh - 120px); /* Header + etwas Padding */
  }

  /* Cards im Battle-Container kompakter padden */
  #battle-container .card {
    padding: 0.85rem 1rem;
    margin-bottom: 0;
  }

  /* Battle-Charakter-Bild auf Desktop begrenzt */
  #battle-container .battle-character-image {
    max-height: 160px;
    width: auto;
  }

  /* Stats-Grid kompakter */
  #battle-container .stats-grid {
    margin-top: 0.5rem;
    gap: 0.3rem;
  }

  /* Kategorie-Buttons kompakter */
  #battle-container .category-buttons {
    gap: 0.4rem;
  }
  #battle-container .category-btn {
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
    min-height: 40px;
  }

  /* Event-Log: scrollbar, feste Hoehe */
  #battle-container .battle-duel-log {
    max-height: 130px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.5rem;
    padding-right: 0.25rem;
  }
}

/* Ab 1280px: noch mehr Platzausnutzung */
@media (min-width: 1280px) {
  #battle-container .battle-character-image {
    max-height: 180px;
  }
  #battle-container .battle-duel-log {
    max-height: 160px;
  }
}

.battle-side {
  text-align: center;
}

.battle-vs {
  position: relative;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--danger);
  padding: var(--space-2) 0;
}

.battle-vs-text {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

@media (min-width: 1024px) {
  .battle-vs {
    font-size: var(--text-3xl);
  }
}

.battle-character {
  position: relative;
  padding: var(--space-4);
  background: var(--card-white);
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
}

.battle-character.active {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(214, 158, 46, 0.3);
}

/* Stats Display */
/* Layout: 6 Stats als 2x3 Block, 7. Stat mittig zentriert darunter.
   Auf sehr breiten Monitoren durch max-width begrenzt, damit das Layout kompakt bleibt. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.stats-grid > .stat-item:nth-child(7) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--space-1));
  min-width: 0;
}

/* Sehr schmale Screens: 1 Spalte */
@media (max-width: 359.98px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid > .stat-item:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
}

.stat-item {
  display: flex;
  justify-content: space-between;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warm);
  border-radius: 4px;
  align-items: center;
}

.stat-item.locked {
  opacity: 0.5;
  text-decoration: line-through;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
}

.stat-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Category Buttons */
.category-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (min-width: 480px) {
  .category-buttons {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .category-buttons {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}

.category-btn {
  min-height: var(--touch-min);
  padding: var(--space-3);
  background: var(--navy);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--text-sm);
}

@media (min-width: 768px) {
  .category-btn {
    font-size: var(--text-base);
  }
}

.category-btn:hover:not(:disabled) {
  background: #2D4A7C;
}

.category-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.category-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

.category-btn.locked {
  background: var(--danger);
  opacity: 0.5;
}

/* Shop Items - Mobile First */
.shop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
  }
}

.shop-item {
  background: var(--card-white);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  padding: var(--space-4);
  text-align: center;
}

.shop-item-name {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.shop-item-type {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.shop-item-price {
  font-size: var(--text-xl);
  color: var(--gold);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* Inventory */
.inventory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 480px) {
  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* wie beim Team-Raster: `min(280px, 100%)` verhindert den Ueberlauf in engen
   Containern (Seitenleiste zieht ab 768px 220px ab). */
@media (min-width: 768px) {
  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  }
}

.inventory-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-3);
  background: var(--card-white);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
}

.inventory-item .btn {
  flex-shrink: 0;
}

.inventory-item.used {
  opacity: 0.5;
}

/* Item Info Button */
.item-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
  margin-left: 0.4rem;
  vertical-align: middle;
  line-height: 1;
  padding: 0;
}

.item-info-btn:hover {
  background: var(--gold);
  color: var(--navy);
}

/* Teufelsfrucht Icon */
.devil-fruit-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #805AD5, #553C9A);
  border-radius: var(--radius);
  flex-shrink: 0;
}

/* Audio Player */
.audio-player {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--card-white);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

@media (min-width: 480px) {
  .audio-player {
    flex-wrap: nowrap;
    gap: var(--space-4);
  }
}

.audio-player button {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.audio-player button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.volume-slider {
  flex: 1;
  min-width: 100px;
  max-width: 150px;
  height: var(--touch-min);
}

/* JukeBox Mini-Player (Header) */
.jukebox-player {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(26, 54, 93, 0.9);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  color: white;
  white-space: nowrap;
}

.jukebox-player.hidden {
  display: none;
}

.jukebox-title {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gold);
  font-weight: 600;
}

.jukebox-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.jukebox-toggle:hover {
  background: #e8b42e;
}

.jukebox-volume {
  width: 60px;
  height: 4px;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .jukebox-title {
    max-width: 80px;
  }
  .jukebox-volume {
    width: 40px;
  }
}

/* Log List */
.log-list {
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.log-entry {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
}

.log-entry:last-child {
  border-bottom: none;
}

.log-time {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.log-message {
  margin-top: 0.25rem;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

/* Kopf- und Fusszeile bleiben stehen, gescrollt wird nur der Rumpf.
   Vorher scrollte der ganze Dialog: wer im Vivre-Card-Dialog die
   Kandidatenliste bis ans Ende gescrollt hatte, musste anschliessend noch den
   Dialog selbst scrollen, um „Vorbestellen" zu erreichen — und die Warnung
   „Die Wahl ist endgueltig" lag auf beiden Handy-Profilen ausserhalb des
   Bildes, obwohl sie vor einer unwiderruflichen Entscheidung steht. */
.modal {
  background: var(--card-white);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  animation: modalIn 0.2s ease-out;
}

.modal > .modal-header,
.modal > .modal-footer {
  flex: 0 0 auto;
}

.modal > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Flache Sichtfenster (Handy im Querformat): 80vh sind dort nur 288px, von
   denen Kopf und Fusszeile schon die Haelfte belegen. */
@media (max-height: 479.98px) {
  .modal {
    max-height: 92vh;
  }
}

@media (min-width: 768px) {
  .modal {
    padding: var(--space-5);
  }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-close {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  background: none;
  border: none;
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Toast Notifications — oben rechts platziert, um Bedienung (Bieten-Button) nicht zu verdecken */
.toast-container {
  position: fixed;
  /* Unterhalb des GESAMTEN Kopfstapels, nicht unterhalb der Titelleiste allein.
     Die feste Zahl 64px stammt aus der Zeit vor --header-stack-h und deckte nur
     die 56px hohe Titelleiste ab; in der Lobby kleben darunter noch die
     App-Statusleiste und der Status-Streifen (zusammen bis 133px), sodass jede
     Meldung den Streifen verdeckte. Auf Seiten ohne diese Leisten ergibt die
     Rechnung wieder 64px — der bisherige Wert. */
  top: calc(var(--header-stack-h) + var(--space-2));
  right: var(--space-4);
  left: auto;
  bottom: auto;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
  width: calc(100% - 2 * var(--space-4));
  pointer-events: none; /* Container blockt nichts, nur Kinder */
}

@media (min-width: 480px) {
  .toast-container {
    width: auto;
    min-width: 280px;
    max-width: 380px;
  }
}

.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  color: white;
  font-weight: 500;
  animation: toastIn 0.3s ease-out;
  transition: opacity 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  /* Ein Toast traegt kein einziges Bedienelement: `ui.js` baut ein reines <div>,
     das nach seiner Anzeigedauer von selbst verschwindet. Er darf deshalb NIE ein
     Tippziel sein — er liegt auf --z-toast (1300) ueber Popup, Fristdialog und
     Dialog und wuerde jeden Tipp darunter schlucken.
     Auf einem quer gehaltenen Handy (863x360) reichte ein Stapel aus drei
     Meldungen bis auf Hoehe der Aktionszeile: drei Sekunden lang liess sich weder
     bieten noch ein Dialog bestaetigen. Mit `none` faellt der Tipp durch den Toast
     hindurch auf die Schaltflaeche darunter.
     Bekommt ein Toast spaeter einen Schliessen-Knopf, braucht GENAU DIESER
     `pointer-events: auto` — nicht wieder der ganze Kasten. */
  pointer-events: none;
  line-height: 1.35;
  font-size: 0.92rem;
}

.toast.success {
  background: var(--success);
}

.toast.error {
  background: var(--danger);
}

.toast.warning {
  background: var(--warning);
}

/* Flache Sichtfenster (Handy im Querformat, 863x360): der Toast-Stapel bekommt
   einen Deckel.
   Gemessen in der Lobby (voller Kopfstapel): drei gestapelte Meldungen belegten
   dort rund 62 % des Raums darunter und legten sich bis auf die Aktionszeile.
   Bedienbar ist sie seit `pointer-events: none` wieder (siehe .toast oben) —
   SEHEN konnte der Spieler sie drei Sekunden lang trotzdem nicht.
   Derselbe Haltepunkt deckelt weiter oben schon den Dialog (`.modal`) und in
   crew-effects.css das Crew-Effekt-Popup; hier reiht sich der Stapel ein.
   Drei Stellschrauben, zusammen ein harter Deckel:
     1. kompaktere Meldung: 35px statt 49px je einzeiliger Meldung,
     2. hoechstens die zwei juengsten Meldungen — aeltere sind gelesen oder
        ueberholt, und die juengste ist die, auf die es ankommt,
     3. hoechstens drei Zeilen je Meldung, damit ein langer Text den Deckel
        nicht doch noch sprengt.
   Nachgemessen mit drei Meldungen auf 863x360 (nackte Seite, 296px Raum unter
   dem Kopfstapel): kurze Texte 148px -> 70px (50 % -> 24 %), lange Texte
   287px -> 138px (97 % -> 47 %) — der Fussabdruck halbiert sich. Auf
   handy-hoch (412x915) aendert sich nichts, der Haltepunkt greift dort nicht. */
@media (max-height: 479.98px) {
  .toast-container {
    gap: var(--space-1);
  }

  .toast {
    padding: var(--space-2) var(--space-3);
    font-size: 0.85rem;
    line-height: 1.25;
    /* Zeilenbegrenzung mit Auslassungspunkten. `display: -webkit-box` ist die
       einzige Fassung, die Chromium UND WebKit verstehen — beide Prueflaeufe
       auf flachen Sichtfenstern laufen genau darauf. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Alles ausser den beiden letzten Kindern verschwindet. `nth-last-child`
     zaehlt vom Ende her, deshalb bleibt immer die NEUESTE Meldung stehen —
     `overflow: hidden` am Container haette die neueste abgeschnitten, weil der
     Stapel nach unten waechst. */
  .toast-container > .toast:nth-last-child(n + 3) {
    display: none;
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slotmachine Animation */
.slotmachine {
  background: linear-gradient(135deg, var(--navy) 0%, #1a365d 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  color: white;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border: 3px solid var(--gold);
}

@media (min-width: 480px) {
  .slotmachine {
    padding: var(--space-6);
  }
}

.slotmachine-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.slotmachine-reel {
  background: var(--card-white);
  color: var(--text-primary);
  padding: 1.5rem 2rem;
  border-radius: var(--radius);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border-color);
  transition: all 0.3s ease;
}

.slotmachine-reel.spinning {
  animation: slotSpin 0.08s linear infinite;
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(214, 158, 46, 0.5);
}

@keyframes slotSpin {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  25% {
    opacity: 0.7;
    transform: translateY(-2px);
  }
  50% {
    opacity: 0.4;
    transform: translateY(0);
  }
  75% {
    opacity: 0.7;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   Item Result Animations (Kill, Swap, Nerf)
   ============================================= */

/* Item-Roll Overlay: nicht wegklickbar */
.item-roll-overlay {
  cursor: default;
  user-select: none;
}

.item-result-animation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.item-anim-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,0.3);
}

.item-result-text {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  margin-top: 0.75rem;
  text-shadow: 0 0 10px currentColor, 1px 1px 2px rgba(0,0,0,0.8);
  animation: resultPulse 0.8s ease-in-out 2;
}

@keyframes resultPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* --- KILL Animation --- */
.kill-animation {
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}

.kill-portrait {
  position: relative;
  display: inline-block;
  animation: killShake 0.5s ease-out;
}

.kill-portrait .item-anim-img {
  border-color: #E53E3E;
  filter: grayscale(60%) brightness(0.7);
}

.kill-x {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 5rem;
  font-weight: 900;
  color: #E53E3E;
  text-shadow: 0 0 20px rgba(229, 62, 62, 0.8), 2px 2px 0 #000;
  animation: killStrike 0.6s ease-out 0.2s forwards;
  pointer-events: none;
}

.kill-name {
  margin-top: 0.75rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: #FC8181;
  text-decoration: line-through;
  text-shadow: 0 0 8px rgba(229, 62, 62, 0.6), 1px 1px 2px rgba(0,0,0,0.8);
  text-decoration-thickness: 3px;
}

@keyframes killStrike {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.4) rotate(-20deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-20deg); opacity: 1; }
}

@keyframes killShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-10px); }
  30% { transform: translateX(10px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* --- SWAP Animation --- */
.swap-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  animation: fadeIn 0.3s ease-out;
}

.swap-card {
  text-align: center;
}

.swap-card-left {
  animation: swapSlideRight 1s ease-in-out 0.3s;
}

.swap-card-right {
  animation: swapSlideLeft 1s ease-in-out 0.3s;
}

.swap-card .item-anim-img {
  border-color: #3182CE;
  width: 80px;
  height: 80px;
}

.swap-arrows {
  font-size: 3rem;
  color: #63B3ED;
  font-weight: 900;
  animation: swapPulse 0.6s ease-in-out 0.3s 3;
  text-shadow: 0 0 20px rgba(99, 179, 237, 0.8), 0 0 40px rgba(49, 130, 206, 0.4);
}

.swap-name {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #90CDF4;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

@keyframes swapSlideRight {
  0% { transform: translateX(0); }
  40% { transform: translateX(40px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes swapSlideLeft {
  0% { transform: translateX(0); }
  40% { transform: translateX(-40px); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes swapPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* --- NERF Animation --- */
.nerf-animation {
  text-align: center;
  animation: fadeIn 0.3s ease-out;
}

.nerf-portrait {
  position: relative;
  display: inline-block;
}

.nerf-portrait .item-anim-img {
  border-color: #D69E2E;
}

.nerf-shake {
  animation: nerfShake 0.6s ease-out 0.2s 2;
}

.nerf-arrow {
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 2.5rem;
  color: #FC8181;
  text-shadow: 0 0 15px rgba(252, 129, 129, 0.8), 0 0 30px rgba(229, 62, 62, 0.4);
  animation: nerfArrowBounce 0.5s ease-out 0.5s 3;
}

.nerf-name {
  margin-top: 0.75rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: #F6E05E;
  text-shadow: 0 0 8px rgba(214, 158, 46, 0.6), 1px 1px 2px rgba(0,0,0,0.8);
}

@keyframes nerfShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8px) rotate(-3deg); }
  40% { transform: translateX(8px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(5px) rotate(2deg); }
}

@keyframes nerfArrowBounce {
  0% { transform: translateY(-15px); opacity: 0; }
  60% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Loading Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* ================================
   Auction Planning Styles
   ================================ */

.planning-round {
  background: var(--card-white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  margin-bottom: var(--space-4);
  overflow: hidden;
}

.planning-round.round-character {
  border-color: var(--navy);
}

.planning-round.round-devil-fruit {
  border-color: #805AD5;
}

.round-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-warm);
  flex-wrap: wrap;
  gap: var(--space-2);
}

.round-character .round-header {
  background: rgba(30, 58, 95, 0.1);
}

.round-devil-fruit .round-header {
  background: rgba(128, 90, 213, 0.1);
}

.round-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}

.round-icon {
  font-size: 1.25rem;
}

.round-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.round-auctions {
  padding: var(--space-3);
  min-height: 60px;
}

.planned-auction {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
  cursor: grab;
  transition: all 0.2s;
}

.planned-auction:last-child {
  margin-bottom: 0;
}

.planned-auction:hover {
  background: #E8E0D5;
}

.planned-auction.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.planned-auction.completed {
  opacity: 0.6;
  cursor: default;
}

.auction-order {
  width: 28px;
  height: 28px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.round-devil-fruit .auction-order {
  background: #805AD5;
}

.auction-info {
  flex: 1;
  min-width: 0;
}

.auction-name {
  font-weight: 600;
  display: block;
}

.auction-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.auction-startbid {
  font-family: monospace;
  color: var(--gold);
  font-weight: 500;
}

/* Round Type Selector in Modal */
.round-type-selector {
  display: grid;
  gap: var(--space-3);
}

.round-type-option {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}

.round-type-option:hover {
  border-color: var(--navy);
}

.round-type-option.selected {
  border-color: var(--navy);
  background: rgba(30, 58, 95, 0.05);
}

.round-type-option[data-type="devil_fruit"].selected {
  border-color: #805AD5;
  background: rgba(128, 90, 213, 0.05);
}

.round-type-option input {
  display: none;
}

.round-type-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
}

.round-type-label {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.round-type-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Geplante Shop-Items in der Rundenplanung */
.round-shop-items {
  padding: var(--space-2) var(--space-3);
  border-top: 1px dashed var(--border-color);
  background: rgba(0, 0, 0, 0.02);
}

.shop-items-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.shop-items-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.planned-shop-items-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.planned-shop-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-warm);
  border-radius: var(--radius);
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
}

.planned-shop-item.applied {
  opacity: 0.6;
}

.planned-shop-item .shop-item-type {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: none;
  color: inherit;
}

.planned-shop-item .shop-item-price {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--gold);
  margin-bottom: 0;
}

.planned-shop-item .shop-item-limit {
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Badge for purple (devil fruit) */
.badge-purple {
  background: #805AD5;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 479.98px) {
  .round-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .round-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .planned-auction {
    flex-wrap: wrap;
  }

  .auction-meta {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-2);
  }
}

/* ================================
   Character Image Management
   ================================ */

.image-filter-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.image-filter {
  background: var(--bg-warm);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.image-filter.active {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

.character-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .character-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .character-image-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-5);
  }
}

.character-image-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-white);
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  padding: var(--space-4);
  text-align: center;
  transition: all 0.2s;
}

.character-image-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow);
}

.character-image-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-3);
  position: relative;
}

@media (min-width: 768px) {
  .character-image-preview {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 1024px) {
  .character-image-preview {
    width: 120px;
    height: 120px;
  }
}

.character-image-preview img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  border: 3px solid var(--border-color);
  background: var(--bg-warm);
}

.character-image-card:hover .character-image-preview img {
  border-color: var(--gold);
}

.character-image-name {
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-image-crew {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-image-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.character-image-actions .btn {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

/* Image Upload Preview */
.image-preview-container {
  margin-top: var(--space-3);
  text-align: center;
}

.image-preview-container img {
  max-width: 200px;
  max-height: 200px;
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
}

/* ================================
   Player Character Cards (Mein Team)
   ================================ */

.player-character-card {
  background: var(--card-white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s;
}

.player-character-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow);
}

.player-character-card.empty {
  border-style: dashed;
  justify-content: center;
  min-height: 200px;
}

.player-character-card.filled {
  border-color: var(--navy);
}

.player-character-card.ko {
  opacity: 0.7;
  background: linear-gradient(135deg, #FED7D7 0%, var(--card-white) 100%);
  border-color: var(--warning);
}

.player-character-card.dead {
  opacity: 0.5;
  background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
  color: white;
  border-color: var(--danger);
}

.player-card-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.slot-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.slot-empty-text {
  font-size: var(--text-lg);
  font-weight: 500;
}

.player-card-image-wrapper {
  position: relative;
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
}

.player-card-image {
  width: 80px;
  height: 104px;
  border-radius: 10px;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--gold);
  background: var(--navy);
}

@media (min-width: 768px) {
  .player-card-image {
    width: 96px;
    height: 128px;
  }
}

.player-card-status {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  padding: 2px 8px;
}

.player-card-info {
  margin-bottom: var(--space-3);
}

.player-card-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--space-1) 0;
}

.player-character-card.dead .player-card-name {
  color: white;
}

.player-card-crew {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.player-character-card.dead .player-card-crew {
  color: rgba(255, 255, 255, 0.7);
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}

/* 7. Stat (Speed) mittig unter dem 2x3 Block */
.player-stats-grid > .player-stat-item:nth-child(7) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--space-1));
  min-width: 0;
}

/* Sehr schmale Screens (<360px): auf 1 Spalte zurueckfallen */
@media (max-width: 359.98px) {
  .player-stats-grid {
    grid-template-columns: 1fr;
  }
  .player-stats-grid > .player-stat-item:nth-child(7) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
}

.player-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

.player-character-card.dead .player-stat-item {
  background: rgba(255, 255, 255, 0.1);
}

.player-stat-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.player-character-card.dead .player-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.player-stat-value {
  font-weight: 600;
  color: var(--navy);
}

.player-stat-value.stat-boosted {
  color: #16a34a;
}

.stat-original {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 0.2rem;
}

.player-character-card.dead .player-stat-value {
  color: white;
}

.player-nerf-info {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--danger);
  font-weight: 500;
}

.swap-position-btn {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* ================================
   GM Character Cards (Teams-Ansicht)
   ================================ */

.gm-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}

/* frueher 1200px — auf die gemeinsame Skala gezogen */
@media (min-width: 1280px) {
  .gm-team-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  }
}

.gm-character-card {
  background: var(--card-white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}

.gm-character-card:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow);
}

.gm-character-card.empty {
  border-style: dashed;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.gm-character-card.filled {
  border-color: var(--navy);
}

.gm-character-card.ko {
  background: linear-gradient(135deg, #FED7D7 0%, var(--card-white) 100%);
  border-color: var(--warning);
}

.gm-character-card.dead {
  background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
  color: white;
  border-color: var(--danger);
}

.gm-char-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
}

/* Verwirkter Platz — dieselbe Aussage wie im Spieler-Team-Reiter
   (server/services/characterParity.js). Zuweisen bleibt moeglich: der GM
   darf ueber die Regel hinweggehen. */
.gm-character-card--forfeited {
  border-style: solid;
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--danger) 8%, transparent),
    color-mix(in srgb, var(--danger) 8%, transparent) 6px,
    transparent 6px,
    transparent 13px
  );
}

.gm-character-card--forfeited[data-forfeit-reason="late_join"] {
  border-color: color-mix(in srgb, var(--sea, #2a6d80) 55%, transparent);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--sea, #2a6d80) 8%, transparent),
    color-mix(in srgb, var(--sea, #2a6d80) 8%, transparent) 6px,
    transparent 6px,
    transparent 13px
  );
}

.gm-char-forfeit {
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  color: var(--danger);
  letter-spacing: 0.3px;
}

.gm-character-card--forfeited[data-forfeit-reason="late_join"] .gm-char-forfeit {
  color: var(--sea, #2a6d80);
}

.gm-char-image-wrapper {
  position: relative;
  align-self: center;
  margin-bottom: var(--space-3);
}

.gm-char-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
  background: var(--bg-warm);
}

.gm-char-status-badge {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  padding: 2px 8px;
}

.gm-char-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  text-align: center;
}

.gm-char-name {
  font-size: var(--text-base);
  color: var(--navy);
}

.gm-character-card.dead .gm-char-name {
  color: white;
}

.gm-char-crew {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.gm-character-card.dead .gm-char-crew {
  color: rgba(255, 255, 255, 0.7);
}

.gm-char-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.gm-char-bounty {
  font-size: var(--text-xs);
  color: var(--gold);
  font-weight: 600;
}

.gm-char-fruit {
  font-size: var(--text-xs);
  color: #805AD5;
  font-weight: 500;
}

.gm-char-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.gm-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--bg-warm);
  border-radius: var(--radius);
  font-size: var(--text-xs);
}

.gm-character-card.dead .gm-stat {
  background: rgba(255, 255, 255, 0.1);
}

.gm-stat-label {
  color: var(--text-secondary);
}

.gm-character-card.dead .gm-stat-label {
  color: rgba(255, 255, 255, 0.6);
}

.gm-stat-value {
  font-weight: 600;
  color: var(--navy);
}

.gm-character-card.dead .gm-stat-value {
  color: white;
}

.gm-char-nerf {
  font-size: var(--text-xs);
  color: var(--danger);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--space-2);
}

.gm-character-card .btn {
  align-self: center;
  margin-top: auto;
}

/* ================================
   Expandable Character Info
   ================================ */

.character-expandable {
  cursor: pointer;
  position: relative;
}

.character-expandable::after {
  content: '';
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text-muted);
  transition: transform 0.2s;
}

.character-expandable.expanded::after {
  transform: rotate(180deg);
}

.character-extra-info {
  display: none;
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-color);
  animation: slideDown 0.2s ease-out;
}

.character-expandable.expanded .character-extra-info {
  display: block;
}

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

.character-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.character-detail-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--bg-warm);
  border-radius: var(--radius);
}

.character-detail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-detail-value {
  font-weight: 500;
  color: var(--text-primary);
}

/* Devil Fruit Extra Badge */
.devil-fruit-extra-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, #805AD5, #9F7AEA);
  color: white;
  border-radius: 9999px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-2);
}

.devil-fruit-extra-badge::before {
  content: '';
  font-size: 1em;
}

/* Auction Character Info (always visible) */
.auction-character-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-warm);
  border-radius: var(--radius);
  text-align: left;
  font-size: var(--text-sm);
}

.auction-detail-item {
  display: flex;
  flex-direction: column;
}

.auction-detail-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.auction-detail-value {
  font-weight: 500;
}

/* Battle character image */
.battle-character-image {
  width: 96px;
  height: 128px;
  object-fit: contain;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, #2D4A7C 100%);
  border: 3px solid var(--gold);
  margin: 0 auto 0.75rem;
  display: block;
}

@media (min-width: 768px) {
  .battle-character-image {
    width: 120px;
    height: 160px;
  }
}

/* Battle character info (public, non-stat info) */
.battle-character-info {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Winner banner */
.battle-winner-banner {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #F6E05E 0%, #D69E2E 100%);
  border-radius: var(--radius-lg, 12px);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
  animation: winnerPulse 2s ease-in-out infinite;
}

@keyframes winnerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* Duel result log */
.battle-duel-log {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--bg-warm, #f8f5f0);
  border-radius: var(--radius, 8px);
  max-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.battle-duel-log-item {
  padding: 0.25rem 0;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.battle-duel-log-item:last-child {
  border-bottom: none;
}

/* Spectator notice */
.battle-spectator-notice {
  text-align: center;
  padding: 0.5rem 1rem;
  background: var(--navy);
  color: white;
  border-radius: var(--radius, 8px);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Player slide-in animation for lobby */
@keyframes playerSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.player-item.player-new {
  animation: playerSlideIn 0.4s ease-out;
}

/* ================================
   League Badges
   ================================ */

.league-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.league-badge.league-1 {
  background: var(--navy);
  color: white;
}

.league-badge.league-2 {
  background: linear-gradient(135deg, #D69E2E, #F6E05E);
  color: var(--navy);
}

.league-badge.league-3 {
  background: linear-gradient(135deg, #E53E3E, #FC8181);
  color: white;
}

/* Preisgeld-Anzeige */
.battle-prize-pool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(214, 158, 46, 0.15), rgba(246, 224, 94, 0.1));
  border: 1px solid var(--gold);
  border-radius: 8px;
  text-align: center;
}

.prize-pool-icon {
  font-size: 1.3rem;
}

.prize-pool-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
}

/* Schere-Stein-Papier (SSP) */
.ssp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.ssp-modal {
  background: var(--card-bg, #1a1a2e);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}

.ssp-modal h3 {
  margin: 0 0 0.75rem 0;
  color: var(--gold);
}

.ssp-choices {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.ssp-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg, #16213e);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ssp-choice-btn:hover:not(:disabled) {
  border-color: var(--gold);
  transform: scale(1.05);
}

.ssp-choice-btn.selected {
  border-color: var(--gold);
  background: rgba(214, 158, 46, 0.2);
  box-shadow: 0 0 12px rgba(214, 158, 46, 0.3);
}

.ssp-choice-btn:disabled {
  cursor: default;
}

.ssp-choice-icon {
  font-size: 2.5rem;
}

.ssp-timer {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0.5rem 0;
}

.ssp-timer-urgent {
  color: var(--danger);
}

.ssp-results {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.ssp-result-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  min-width: 80px;
  transition: all 0.3s;
}

.ssp-result-player.eliminated {
  border-color: var(--danger);
  opacity: 0.5;
  text-decoration: line-through;
}

.ssp-result-icon {
  font-size: 2rem;
}

.ssp-result-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.ssp-result-choice {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ssp-winner-modal {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(214, 158, 46, 0.4);
}

.ssp-winner-modal h2 {
  color: var(--gold);
  margin: 0 0 0.75rem 0;
}

/* Modifizierte Stat-Werte (Ermüdung/Momentum) */
.stat-original {
  text-decoration: line-through;
  opacity: 0.5;
  font-size: 0.85em;
  margin-right: 0.2rem;
}

.stat-debuff {
  color: #E53E3E;
  font-weight: 700;
}

.stat-buff {
  color: #38A169;
  font-weight: 700;
}

.stat-modified {
  border-left: 2px solid #E53E3E;
}

.stat-modified.stat-item {
  padding-left: 0.3rem;
}

/* Ermüdungs- & Momentum-Badges */
.battle-modifier {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  text-align: center;
}

.fatigue-badge {
  background: linear-gradient(135deg, #9B2C2C, #E53E3E);
  color: white;
}

.momentum-badge {
  background: linear-gradient(135deg, #2B6CB0, #63B3ED);
  color: white;
  animation: momentum-pulse 2s ease-in-out infinite;
}

@keyframes momentum-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(99, 179, 237, 0.3); }
  50% { box-shadow: 0 0 12px rgba(99, 179, 237, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .momentum-badge { animation: none; }
}

/* 2-Spalten Grid für Formulare */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 479.98px) {
  .grid-2col { grid-template-columns: 1fr; }
}

/* Battle character border by league */
.battle-character.league-2 {
  border-color: var(--gold);
  box-shadow: 0 0 15px rgba(214, 158, 46, 0.3);
}

.battle-character.league-3 {
  border-color: var(--danger);
  box-shadow: 0 0 15px rgba(229, 62, 62, 0.3);
}

/* ================================
   Battle Feedback
   ================================ */

.battle-feedback-item {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.battle-feedback-item:last-child {
  border-bottom: none;
}

.battle-feedback-item.win {
  color: var(--success);
  font-weight: 600;
}

.battle-feedback-item.loss {
  color: var(--danger);
  font-weight: 600;
}

.battle-feedback-item.ko {
  color: var(--warning);
  font-weight: 600;
}

.battle-feedback-item.promotion {
  color: var(--gold);
  font-weight: 700;
}

.battle-feedback-item.info {
  color: var(--navy);
}

.battle-feedback-item:first-child {
  font-size: 1rem;
}

/* Square Character Images */
.character-image-square {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  background: var(--navy);
  border-radius: 12px;
}

/* ================================
   Character Comparison Tool
   ================================ */

.compare-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.compare-label {
  width: 80px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.compare-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compare-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 20px;
}

.compare-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  min-width: 4px;
}

.compare-bar-a {
  background: var(--gold);
  opacity: 0.7;
}

.compare-bar-b {
  background: var(--ocean-blue, #3182CE);
  opacity: 0.7;
}

.compare-winner {
  opacity: 1;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.compare-value {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 40px;
}

/* Emote Bar */
.emote-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.emote-btn {
  font-size: 1.5rem;
  background: none;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  transition: transform 0.15s, border-color 0.15s;
  line-height: 1;
}

.emote-btn:hover {
  transform: scale(1.15);
  border-color: var(--gold);
}

.emote-btn:active {
  transform: scale(0.95);
}

/* Shield Badge */
.shield-badge {
  display: inline-block;
  background: var(--ocean-blue);
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.3rem;
}

/* Spied Badge */
.spied-badge {
  display: inline-block;
  background: #805AD5;
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.3rem;
}

/* Crew Bonus Badge */
.crew-bonus-badge {
  display: inline-block;
  background: #2563eb;
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.3rem;
}

/* Finte Badge */
.finte-badge {
  display: inline-block;
  background: #d97706;
  color: white;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-left: 0.3rem;
}

/* Crew Bonus Zusammenfassung */
.crew-bonus-summary {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ================================
   Betting Panel
   ================================ */

.betting-panel {
  background: linear-gradient(135deg, var(--navy) 0%, #2D4A7C 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  color: white;
}

.betting-panel h3 {
  text-align: center;
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.betting-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-3);
}

.betting-side {
  text-align: center;
  padding: var(--space-3);
  background: rgba(255,255,255,0.1);
  border-radius: var(--radius);
}

.betting-side-name {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.betting-side-total {
  color: var(--gold);
  font-size: var(--text-xl);
  font-weight: 600;
}

.betting-vs {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--gold);
}

.betting-controls {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.betting-controls input {
  width: 120px;
  text-align: center;
}

.bet-btn-attacker {
  background: #2563eb;
  color: white;
  border: none;
}

.bet-btn-attacker:hover {
  background: #1d4ed8;
}

.bet-btn-defender {
  background: #dc2626;
  color: white;
  border: none;
}

.bet-btn-defender:hover {
  background: #b91c1c;
}

.betting-placed {
  text-align: center;
  padding: var(--space-3);
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius);
  font-weight: 600;
}

/* ================================
   Theme Toggle Button
   ================================ */

.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Fuer Seiten ohne Header-Bar (Landing, Join, Rules) */
.theme-toggle-floating {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  background: rgba(26, 54, 93, 0.8);
  border: 1px solid var(--gold);
  backdrop-filter: blur(4px);
}

.theme-toggle-floating:hover {
  background: rgba(26, 54, 93, 0.95);
}

/* =============================================
   Battle-Zufallsgenerator Animationen
   ============================================= */

@keyframes battleCoinFlip {
  0% { transform: rotateY(0deg) scale(0.5); opacity: 0; }
  50% { transform: rotateY(360deg) scale(1.3); opacity: 1; }
  100% { transform: rotateY(720deg) scale(1); opacity: 1; }
}

@keyframes battleResultFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =============================================
   UX-UPGRADE (Audit 2026-04) — neue Komponenten
   Battle-Aktions-Leiste, Status-Bar, Tab-Badges,
   Entity-Card, Modal-Fullscreen, Utilities, FX
   ============================================= */

/* --- Erweiterte CSS-Variablen --- */
:root {
  --curse: #805AD5;
  --curse-light: #9F7AEA;
  --counter: #D97757;
  --streaming: #00B5D8;
  --card-padding: 0.9rem;
  --card-padding-tight: 0.6rem;
  --card-padding-loose: 1.25rem;
}
[data-theme="dark"] {
  --curse: #B794F4;
  --curse-light: #D6BCFA;
  --counter: #F6AD55;
  --streaming: #76E4F7;
}

/* Tabular Figures für alle Berry-/Timer-Ziffern */
.tabular-nums,
#player-berry,
.battle-prize-pool,
.prize-pool-amount,
.bet-total,
#countdown-time,
#gm-countdown-time,
.berry-log-summary,
.last-bid-indicator,
.auction-countdown-bar,
.shop-item-price {
  font-variant-numeric: tabular-nums;
}

/* --- Utility-Klassen (Ersatz für Inline-Styles) --- */
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: 0.25rem; }
.u-mt-2 { margin-top: 0.5rem; }
.u-mt-3 { margin-top: 0.75rem; }
.u-mt-4 { margin-top: 1rem; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: 0.25rem; }
.u-mb-2 { margin-bottom: 0.5rem; }
.u-mb-3 { margin-bottom: 0.75rem; }
.u-mb-4 { margin-bottom: 1rem; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-gap-1 { gap: 0.25rem; }
.u-gap-2 { gap: 0.5rem; }
.u-gap-3 { gap: 0.75rem; }
.u-gap-4 { gap: 1rem; }
.u-font-sm { font-size: 0.85rem; }
.u-font-xs { font-size: 0.75rem; }
.u-hidden { display: none !important; }
.u-opacity-70 { opacity: 0.7; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Button-Loading-Helper --- */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  color: inherit;
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* --- App-Status-Bar (global HUD unter Header) --- */
.app-status-bar {
  position: sticky;
  top: var(--header-h);
  /* Feste Hoehe: an ihr haengen die Ankerpunkte von Status-Streifen,
     Seitenleiste und Kampf-Aktionsleiste (--header-stack-h in main.css). */
  min-height: var(--app-status-bar-h);
  box-sizing: border-box;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: linear-gradient(90deg, rgba(26, 54, 93, 0.95), rgba(26, 54, 93, 0.85));
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  color: rgba(255,255,255,0.95);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.app-status-bar[hidden] { display: none !important; }
.app-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
}
.app-status-chip strong { color: var(--gold-light); }
.app-status-chip.live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: livePulse 1.5s ease-in-out infinite;
}
.app-status-chip.warn::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warning);
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* --- Tab-Badges (Sidebar) --- */
.sidebar-tab { position: relative; }
.sidebar-tab .tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 0.5rem;
  border-radius: 10px;
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1;
}
.sidebar-tab .tab-badge[data-variant="live"] {
  background: var(--success);
  animation: livePulse 1.8s ease-in-out infinite;
}
.sidebar-tab .tab-badge[data-variant="info"] {
  background: var(--navy);
}

/* --- Streaming-Toggle im Header --- */
.streaming-toggle-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  padding: 0.45rem 0.8rem;
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s;
}
.streaming-toggle-btn:hover {
  border-color: var(--streaming);
  color: var(--streaming);
}
.streaming-toggle-btn[aria-pressed="true"] {
  background: var(--streaming);
  color: #fff;
  border-color: var(--streaming);
  box-shadow: 0 0 0 3px rgba(0, 181, 216, 0.2);
}
.streaming-toggle-btn::before {
  content: "●";
  font-size: 0.7rem;
}

/* --- Battle-Aktions-Leiste (KERN der Battle-UX) --- */
.battle-action-bar {
  position: sticky;
  top: var(--header-stack-h); /* Kopf (--header-h) + Status-Leiste (--status-strip-h) */
  z-index: 20; /* höher als Status-Bar (15) */
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(26, 54, 93, 0.92), rgba(45, 90, 106, 0.88));
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(214, 158, 46, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
[data-theme="dark"] .battle-action-bar {
  background: linear-gradient(135deg, rgba(15, 27, 45, 0.95), rgba(26, 54, 93, 0.92));
  border-color: rgba(251, 191, 36, 0.28);
}
.battle-action-bar__title {
  color: rgba(255,255,255,0.7);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.5rem;
}
.battle-action-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
}
.battle-action-bar__btn {
  flex: 1 1 140px;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s, background 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #fff;
  background: rgba(255,255,255,0.08);
  line-height: 1.1;
}
.battle-action-bar__btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.battle-action-bar__btn:active:not(:disabled) {
  transform: translateY(0);
}
.battle-action-bar__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.battle-action-bar__btn--attack {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #1a1a1a;
  border-color: rgba(214, 158, 46, 0.5);
}
.battle-action-bar__btn--attack:hover:not(:disabled) {
  filter: brightness(1.1);
}
.battle-action-bar__btn--finte {
  background: rgba(229, 62, 62, 0.12);
  border-color: var(--danger);
  color: #fff5f5;
}
.battle-action-bar__btn--finte:not(:disabled):hover {
  background: var(--danger);
}
.battle-action-bar__btn--counter {
  background: var(--counter);
  border-color: var(--counter);
  color: #fff;
}
/* Milch (Welle 3, Punkt 5.1) — bewusst hell und unaufgeregt: sie repariert,
   sie greift nicht an. Damit hebt sie sich von Angriff (Gold), Finte (Rot) und
   Gegenangriff ab, ohne mit ihnen um Aufmerksamkeit zu ringen. */
.battle-action-bar__btn--milk {
  background: rgba(226, 232, 240, 0.14);
  border-color: rgba(226, 232, 240, 0.55);
  color: #f7fafc;
}
.battle-action-bar__btn--milk:not(:disabled):hover {
  background: rgba(226, 232, 240, 0.3);
}
.battle-action-bar__btn--curse {
  background: rgba(128, 90, 213, 0.18);
  border-color: var(--curse);
  color: #faf5ff;
}
.battle-action-bar__btn--curse:not(:disabled):hover {
  background: var(--curse);
}
.battle-action-bar__btn--item {
  background: rgba(0, 181, 216, 0.15);
  border-color: var(--streaming);
  color: #e0fbfc;
}
.battle-action-bar__btn--skip {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}
.battle-action-bar__btn--pulse:not(:disabled) {
  animation: actionBtnPulse 1.4s ease-in-out infinite;
}
@keyframes actionBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(229, 62, 62, 0); }
}
.battle-action-bar__btn .action-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.battle-action-bar__btn .action-hint {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 1px;
  white-space: nowrap;
}

/* Finte-Timer-Progress-Bar */
.battle-action-bar__finte-timer {
  margin-top: 0.5rem;
  display: none;
}
.battle-action-bar__finte-timer[data-active="1"] {
  display: block;
}
.finte-progress {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.finte-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--warning) 60%, var(--danger));
  transition: width 0.1s linear;
  border-radius: 4px;
}
.finte-progress__label {
  display: block;
  text-align: center;
  margin-top: 0.25rem;
  color: rgba(255,255,255,0.9);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.finte-progress__label.is-critical {
  color: var(--danger);
  animation: finteTick 0.5s ease-in-out infinite;
}
@keyframes finteTick {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Mobile-Anpassung Aktions-Leiste */
@media (max-width: 767.98px) {
  .battle-action-bar {
    position: sticky;
    top: var(--header-h);
    margin: 0.5rem -0.25rem;
    padding: 0.6rem 0.5rem;
  }
  .battle-action-bar__btn {
    flex: 1 1 calc(50% - 0.5rem);
    font-size: 0.82rem;
    padding: 0.5rem 0.4rem;
    max-width: 100%;
  }
}

/* --- Stat-Pulse-Ring für klickbare Stats --- */
.stats-grid-compact.stats-clickable .stat-attack:not(.is-locked) {
  animation: statClickablePulse 2s ease-in-out infinite;
  cursor: pointer;
}
.stats-grid-compact.stats-clickable .stat-attack:not(.is-locked)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  animation: statClickableRing 2s ease-in-out infinite;
}
.stats-grid-compact.stats-clickable .stat-attack { position: relative; }
.stats-grid-compact .stat-item.locked,
.stats-grid-compact .stat-item:not(.stat-attack).disabled {
  opacity: 0.55;
  cursor: default;
}
@keyframes statClickablePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 158, 46, 0.0); }
  50% { box-shadow: 0 0 0 4px rgba(214, 158, 46, 0.25); }
}
@keyframes statClickableRing {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.02); }
}

/* --- Battle-Log collapsible --- */
.battle-log-shell {
  margin-top: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.5);
}
[data-theme="dark"] .battle-log-shell,
html:not([data-theme="light"]) .battle-log-shell {
  background: rgba(37, 37, 64, 0.55);
}
.battle-log-shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.battle-log-shell__header::after {
  content: "▾";
  transition: transform 0.2s;
}
.battle-log-shell.is-collapsed .battle-log-shell__header::after {
  transform: rotate(-90deg);
}
.battle-log-shell__body {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.75rem;
}
.battle-log-shell.is-collapsed .battle-log-shell__body {
  display: none;
}
.battle-log-shell__new {
  display: none;
  margin-left: auto;
  margin-right: 0.4rem;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--danger);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
}
.battle-log-shell__new.is-visible { display: inline-block; }

/* --- Entity-Card (vereinheitlicht Shop, Markt, Team, Auktion) --- */
.entity-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: var(--card-padding);
  background: var(--card-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.2s;
}
.entity-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
.entity-card__media {
  grid-column: 1;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.entity-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entity-card__body {
  grid-column: 2;
  min-width: 0;
}
.entity-card__title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.entity-card__meta > span { white-space: nowrap; }
.entity-card__meta .sep { opacity: 0.5; }
.entity-card__actions {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
  justify-content: center;
}
.entity-card__footer {
  grid-column: 1 / -1;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.entity-card--compact { padding: var(--card-padding-tight); gap: 0.5rem; }
.entity-card--compact .entity-card__media { width: 48px; height: 48px; }
.entity-card--nested {
  background: rgba(0,0,0,0.03);
  border-style: dashed;
  box-shadow: none;
}
[data-theme="dark"] .entity-card--nested {
  background: rgba(255,255,255,0.04);
}
@media (max-width: 479.98px) {
  .entity-card {
    grid-template-columns: auto 1fr;
  }
  .entity-card__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    margin-top: 0.4rem;
  }
  .entity-card__actions > .btn { flex: 1; }
}

/* --- Segmented Control (GM Auktions-Typ-Wahl) --- */
.segmented-control {
  display: inline-flex;
  padding: 3px;
  background: var(--border-color);
  border-radius: 999px;
  gap: 2px;
}
.segmented-control__item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s;
  font-family: inherit;
  min-height: 36px;
}
.segmented-control__item:hover { color: var(--text-primary); }
.segmented-control__item[aria-pressed="true"] {
  background: var(--card-white);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.segmented-control__item[aria-pressed="true"][data-variant="danger"] { color: var(--danger); }
.segmented-control__item[aria-pressed="true"][data-variant="success"] { color: var(--success); }
[data-theme="dark"] .segmented-control__item[aria-pressed="true"] {
  background: var(--bg-dark);
  color: var(--gold-light);
}

/* --- Modal Fullscreen Variant --- */
.modal-overlay--fullscreen {
  padding: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* 100vw schliesst die senkrechte Bildlaufleiste ein und erzeugt dadurch
   waagerechten Ueberlauf. Der Overlay ist `position: fixed; inset: 0`, also
   deckt sich 100% exakt mit dem sichtbaren Bereich. */
.modal--fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, var(--bg-sand), var(--bg-cream));
}
.modal--fullscreen .modal-header {
  flex-shrink: 0;
}
.modal--fullscreen .modal-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Empty-State-Komponente --- */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
}
.empty-state__icon {
  font-size: 3rem;
  opacity: 0.4;
  margin-bottom: 0.5rem;
  display: block;
}
.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.empty-state__text {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.empty-state__cta {
  display: inline-flex;
  gap: 0.5rem;
}

/* --- Berry-Header Count-Up Highlight --- */
#player-berry {
  transition: color 0.4s, transform 0.4s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
#player-berry::before {
  content: "◉";
  color: var(--gold);
  font-size: 0.9em;
  opacity: 0.8;
}
#player-berry.berry-pulse-up {
  color: var(--success);
  transform: scale(1.08);
}
#player-berry.berry-pulse-down {
  color: var(--danger);
  transform: scale(1.08);
}

/* --- One-Piece-Confetti (Emoji-Fallback, Asset-fähig) --- */
.op-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 900;
}
.op-confetti-piece {
  position: absolute;
  top: -40px;
  font-size: 1.6rem;
  animation: opConfettiFall linear forwards;
  user-select: none;
  will-change: transform, opacity;
}
@keyframes opConfettiFall {
  0% { transform: translateY(-40px) rotate(0deg); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* --- Coin-Drop-Effekt (bei Kauf / Zuschlag) --- */
.coin-drop-overlay {
  position: absolute;
  pointer-events: none;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}
.coin-drop-piece {
  position: absolute;
  top: -10px;
  font-size: 1.2rem;
  color: var(--gold);
  animation: coinDrop 0.9s cubic-bezier(0.3, 0.7, 0.4, 1.1) forwards;
}
@keyframes coinDrop {
  0% { transform: translateY(-10px) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(60px) rotate(420deg); opacity: 0; }
}

/* --- Auktions-Hammer-Effekt --- */
.auction-hammer-fx {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6rem;
  pointer-events: none;
  z-index: 950;
  animation: hammerSlam 0.9s ease-out forwards;
  text-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
@keyframes hammerSlam {
  0% { transform: translate(-50%, -80%) rotate(-45deg) scale(0.6); opacity: 0; }
  45% { transform: translate(-50%, -50%) rotate(-45deg) scale(1); opacity: 1; }
  55% { transform: translate(-50%, -46%) rotate(10deg) scale(1.1); opacity: 1; }
  70% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0; }
}
.auction-hammer-fx__sold {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--danger);
  letter-spacing: 0.15em;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
  animation: soldStamp 0.6s ease-out 0.45s both;
}
@keyframes soldStamp {
  0% { transform: translate(-50%, -10px) rotate(-15deg) scale(0.3); opacity: 0; }
  60% { transform: translate(-50%, 10px) rotate(-8deg) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, 10px) rotate(-8deg) scale(1); opacity: 1; }
}

/* --- Screen-Shake (Battle-Clash / KO) --- */
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
}
.screen-shake {
  animation: screenShake 0.18s ease-in-out;
}

/* --- Kampffeld-Parallax-Hintergründe --- */
.battle-arena[data-field-theme] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.battle-arena[data-field-theme]::before,
.battle-arena[data-field-theme]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
}
.battle-arena[data-field-theme="sea"]::before {
  background: radial-gradient(ellipse at 50% 30%, #67e8f9 0%, transparent 60%),
              linear-gradient(180deg, #0ea5e9 0%, #0369a1 100%);
}
.battle-arena[data-field-theme="sea"]::after {
  background: repeating-linear-gradient(180deg, transparent 0 40px, rgba(255,255,255,0.04) 40px 42px);
  animation: parallaxDrift 22s linear infinite;
}
.battle-arena[data-field-theme="city"]::before {
  background: linear-gradient(180deg, #fbbf24 0%, #b45309 100%);
}
.battle-arena[data-field-theme="forest"]::before {
  background: radial-gradient(ellipse at 50% 40%, #22c55e 0%, transparent 70%),
              linear-gradient(180deg, #166534 0%, #052e16 100%);
}
.battle-arena[data-field-theme="skypia"]::before {
  background: linear-gradient(180deg, #fef3c7 0%, #bfdbfe 100%);
}
.battle-arena[data-field-theme="skypia"]::after {
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7) 0%, transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(255,255,255,0.5) 0%, transparent 45%);
  animation: parallaxDrift 30s linear infinite reverse;
}
.battle-arena[data-field-theme="wueste"]::before,
.battle-arena[data-field-theme="desert"]::before {
  background: linear-gradient(180deg, #fde68a 0%, #92400e 100%);
}
.battle-arena[data-field-theme="marineford"]::before {
  background: linear-gradient(180deg, #1e293b 0%, #7f1d1d 100%);
}
.battle-arena[data-field-theme="maryjoa"]::before,
.battle-arena[data-field-theme="mary-joa"]::before {
  background: radial-gradient(ellipse at top, #fef3c7 0%, transparent 70%),
              linear-gradient(180deg, #f3e8ff 0%, #7c3aed 100%);
}
@keyframes parallaxDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .battle-arena[data-field-theme]::after,
  .stats-grid-compact.stats-clickable .stat-attack,
  .stats-grid-compact.stats-clickable .stat-attack::after,
  .battle-action-bar__btn--pulse:not(:disabled),
  .op-confetti-piece,
  .coin-drop-piece,
  .auction-hammer-fx {
    animation: none !important;
  }
}

/* --- Text-Muted Kontrast-Korrektur (AA auf Sandbeige) --- */
.text-muted {
  color: #4A5568;
}
[data-theme="dark"] .text-muted {
  color: #cbd5e0;
}

/* Ocean-Waves Animation */
.ocean-waves .wave-layer-1 {
  animation: oceanWave 14s ease-in-out infinite;
}
.ocean-waves .wave-layer-2 {
  animation: oceanWave 22s ease-in-out infinite reverse;
}
.ocean-waves .wave-layer-3 {
  animation: oceanWave 30s ease-in-out infinite;
}
@keyframes oceanWave {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2%); }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-waves .wave-layer-1,
  .ocean-waves .wave-layer-2,
  .ocean-waves .wave-layer-3 {
    animation: none;
  }
}

/* --- Auction-Countdown kritisch-State verstärkt --- */
.auction-countdown-bar.countdown-critical {
  animation: countdownPulse 0.4s ease-in-out infinite;
}
@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* --- Depth-Layer Dark Mode --- */
[data-theme="dark"] .card {
  background: #2a2a48;
}
[data-theme="dark"] .card .card,
[data-theme="dark"] .card .entity-card,
[data-theme="dark"] .entity-card--nested {
  background: #33335a;
}
[data-theme="dark"] .modal {
  background: #353562;
}

/* --- Auction: neue stil-extrahierte Klassen --- */
.round-locked-notice {
  background: #FED7D7;
  color: #C53030;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  text-align: center;
}
[data-theme="dark"] .round-locked-notice {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
}

.auction-bid-info--countdown {
  background: linear-gradient(135deg, #1a2e1a, #163e21);
  border: 1px solid #4ecca3;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  color: #fff;
}
.auction-bid-info--countdown .auction-bid-info__label {
  color: #4ecca3;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.auction-bid-info--countdown .current-bid {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}
.auction-bid-info--countdown .auction-bid-info__hint {
  color: #aaa;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.auction-bid-info--blackmarket {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid #e94560;
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  color: #fff;
}
.auction-bid-info--blackmarket .current-bid {
  color: #e94560;
  font-size: 1.1rem;
}
.auction-bid-info--blackmarket .current-bidder {
  color: #ccc;
  font-size: 0.85rem;
}
.auction-bid-info--blackmarket .black-market-my-bid {
  margin-top: 0.5rem;
  color: #4ecca3;
}

.countdown-buy-button {
  width: 100%;
  font-size: 1.3rem;
  padding: 1rem 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #d4a017, #ff6b35);
  color: #000;
  border: 2px solid #d4a017;
  border-radius: 12px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 4px 15px rgba(212,160,23,0.4);
  transition: transform 0.1s, box-shadow 0.15s;
  letter-spacing: 0.5px;
}
.countdown-buy-button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,160,23,0.55);
}
.countdown-buy-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.quick-bid-container {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Market: Entity-Card Helfer --- */
.market-berry {
  color: var(--gold);
  font-weight: 700;
}
.market-comment {
  font-style: italic;
}

/* --- Sidebar-Footer + Lobby-Helper --- */
.sidebar-footer {
  padding: 0.5rem 1.25rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-footer-link {
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  text-decoration: none;
  display: block;
  padding: 0.5rem 0;
  transition: color 0.2s;
}
.sidebar-footer-link:hover,
.sidebar-footer-link:focus {
  color: var(--gold);
}

.avatar-uploader {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
}

.sfx-range {
  flex: 1;
}

/* Charakter-Vergleich im Team-Reiter. Die beiden Auswahlfelder tragen volle
   Charakternamen; ihre natuerliche Mindestbreite liegt bei rund 250px. Ohne
   `min-width: 0` behalten sie die auch als Flex-Kinder und sprengten die Karte
   (auf dem Tablet hochkant rund 530px Innenmass). `flex-wrap` setzt das zweite
   Feld darunter, sobald zwei nebeneinander nicht mehr passen. */
.compare-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.compare-selects > .form-control {
  flex: 1 1 12rem;
  min-width: 0;
}
.compare-vs {
  font-weight: bold;
}

/* =========================================================================
   MOBILE-OPTIMIERUNGEN (<=767px)
   Gezielte Verbesserungen fuer Lesbarkeit, Touch-Bedienung und Navigation.
   Diese Sektion liegt am Ende der Datei, damit sie spaete Ueberschreibungen
   ermoeglicht, ohne die bestehenden Regeln zu invasieren.
   ========================================================================= */

@media (max-width: 767.98px) {
  /* iOS-Zoom beim Input-Fokus verhindern (Safari zoomt <16px) */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Mindest-Lesbarkeit: kleine Helfer-Texte aus dem Logbook-Stil anheben */
  .status-strip,
  .status-strip-item,
  .status-strip-rank {
    font-size: 13px !important;
  }

  /* Auctions-Portrait-Pane Labels sind im Design 10-11px. Auf Mobile
     mindestens 13px, damit man sie im Bett lesen kann. */
  .auction-pane--portrait .text-muted,
  .auction-pane--portrait .auction-meta-label,
  .auction-pane--portrait .auction-meta-value,
  .auction-pane--portrait .auction-detail-label,
  .auction-pane--portrait .auction-detail-value,
  .auction-character-meta-item {
    font-size: 13px !important;
  }

  /* Event-Log / Battle-Feedback und kleine Chips */
  .battle-feedback-item,
  .battle-log-shell,
  .event-log-item,
  .gm-event,
  .log-item,
  .lobby-event-item {
    font-size: 13px !important;
  }

  /* Muted-Texte im Allgemeinen minimal nicht unter 12.5px */
  .text-muted {
    font-size: max(0.8125rem, var(--text-xs, 0.75rem)) !important;
  }

  /* Einheitliche Typo-Tokens fuer Mobile */
  :root {
    --text-xs: 0.8125rem;   /* 13px */
    --text-sm: 0.9rem;      /* ~14.4px */
    --text-base: 1rem;      /* 16px */
  }

  /* Buttons mit guter Daumen-Groesse */
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    min-height: var(--touch-min, 44px);
  }

  /* Kleine Close-Buttons auf touchfreundliche Groesse */
  .btn-icon,
  .modal-close,
  .toast-close {
    min-width: var(--touch-min, 44px);
    min-height: var(--touch-min, 44px);
  }

  /* Form-Labels nicht zu klein */
  .form-group label,
  .form-label,
  fieldset legend {
    font-size: 0.9rem;
  }

  /* Auktion: Portrait kompakter, Bid-Input Touch-freundlich */
  .auction-pane--portrait {
    padding: 14px !important;
    gap: 10px !important;
  }
  .auction-pane--portrait .auction-character-image {
    max-width: 180px !important;
  }
  .auction-bid-input,
  .bid-form input[type="number"],
  .bid-form input[type="text"] {
    min-height: 48px;
  }
  .bid-form button,
  .auction-bid-btn {
    min-height: 48px;
  }

  /* Battle: kompakt, Event-Log ausklappbar-ready */
  #battle-container {
    gap: 0.5rem;
  }
  #battle-container .battle-character {
    padding: 10px !important;
  }
  #battle-container .battle-duel-log,
  #battle-container .battle-event-log {
    max-height: 110px;
  }

  /* Category-Buttons im Battle: groß genug fuer den Daumen */
  .category-buttons .category-btn {
    min-height: 48px;
    font-size: 0.95rem;
  }

  /* Shop/Inventar: sauberer Abstand */
  .shop-item,
  .inventory-item {
    padding: 0.75rem !important;
  }
  .shop-item-name,
  .inventory-item-name {
    font-size: 0.95rem;
  }

  /* Modals: mehr vertikaler Platz nutzen */
  .modal {
    max-height: 90vh;
    margin: 0 0.5rem;
    width: calc(100% - 1rem);
  }

  /* Tabs (horizontale, z.B. Handel-Sub-Tabs) groesser */
  .tab {
    min-height: 48px;
    font-size: 0.9rem;
  }
}

/* =========================================================================
   INSTABUY — Sofortgewinn neben der Bieten-Schaltflaeche
   Farben als eigene Tokens, damit beide Farbschemata bedient werden:
   ueber `data-theme` am <html> UND ueber `prefers-color-scheme`.
   ========================================================================= */

:root {
  --instabuy-bg:       #1f6f8b;
  --instabuy-bg-hover: #185b73;
  --instabuy-border:   #14495c;
  --instabuy-ink:      #ffffff;
}

[data-theme="dark"] {
  --instabuy-bg:       #4fb3d9;
  --instabuy-bg-hover: #6cc6e6;
  --instabuy-border:   #2b7f9f;
  --instabuy-ink:      #04141c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --instabuy-bg:       #4fb3d9;
    --instabuy-bg-hover: #6cc6e6;
    --instabuy-border:   #2b7f9f;
    --instabuy-ink:      #04141c;
  }
}

/* Die Bietleiste liegt in `#auction-container`. public/css/lobby.css wird
   spaeter geladen und setzt `.bid-form .btn` teils mit `!important` — deshalb
   stehen hier bewusst spezifischere Selektoren mit ID davor. */
#auction-container .bid-form .auction-instabuy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch-min);
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  border-radius: 4px;
  background: var(--instabuy-bg) !important;
  color: var(--instabuy-ink) !important;
  border: 1px solid var(--instabuy-border) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  text-shadow: none;
  transition: background 0.15s, transform 0.12s;
}

#auction-container .bid-form .auction-instabuy-btn:hover:not(:disabled) {
  background: var(--instabuy-bg-hover) !important;
  color: var(--instabuy-ink) !important;
  transform: translateY(-1px);
}

#auction-container .bid-form .auction-instabuy-btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* Ausgegraut, aber weiterhin sichtbar — der `title` erklaert den Grund. */
#auction-container .bid-form .auction-instabuy-btn:disabled {
  background: var(--ink-muted) !important;
  border-color: var(--ink-muted) !important;
  color: #fff !important;
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#auction-container .bid-form .auction-instabuy-btn__icon {
  font-size: 15px;
  line-height: 1;
}

/* Eingabe oben ueber die volle Breite, beide Schaltflaechen gleich breit
   darunter.

   Frueher stand die Leiste auf breiten Schirmen dreispaltig
   (Eingabe | Gebot abgeben | Instabuy). Die dritte Spalte nahm dem Eingabefeld
   den Platz: Die Bietleiste sitzt in der mittleren Spalte der Auktionsansicht
   und ist selbst auf einem 1440px-Schirm nur rund 390px breit. Gemessen blieben
   fuer das Feld 104px (desktop) bzw. 65px (tablet-quer) — im Feld stand sichtbar
   „1.000.00" statt „1.000.000". Die Fensterbreite half nicht weiter, weil nicht
   sie, sondern die Spaltenbreite knapp ist. Deshalb gilt die zweizeilige Form
   ueberall; die Schaltflaechen verdraengen sich dabei nie gegenseitig. */
#auction-container .bid-form--instabuy {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "field field"
    "bid   instabuy";
}

#auction-container .bid-form--instabuy .berry-input {
  min-width: 0;
  grid-area: field;
}

#auction-container .bid-form--instabuy #bid-button {
  grid-area: bid;
}

#auction-container .bid-form--instabuy .auction-instabuy-btn {
  grid-area: instabuy;
}

#auction-container .bid-form--instabuy .btn {
  padding-left: 16px;
  padding-right: 16px;
}

/* Sehr schmale Geraete: alles untereinander */
@media (max-width: 479.98px) {
  #auction-container .bid-form--instabuy {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "field"
      "bid"
      "instabuy";
  }
}

/* =========================================================================
   VIVRE CARD — Dialog zur Charakter-Vorbestellung
   ========================================================================= */

/* Breiter Dialog (ui.modal mit size: 'lg') */
.modal--lg {
  max-width: 760px;
}

.vivre-card-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vivre-card-picker__intro {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

.vivre-card-picker__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  gap: var(--space-2);
}

@media (max-width: 479.98px) {
  .vivre-card-picker__controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* input[type="search"] wird von den Basisstilen nicht erfasst — hier
   ausdruecklich auf dieselbe Optik gebracht. */
.vivre-card-picker__search {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--card-white);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vivre-card-picker__search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 132, 52, 0.2);
}

.vivre-card-picker__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Fester, eigener Scroll-Bereich — die Seite selbst scrollt nie mit. */
.vivre-card-picker__scroll {
  max-height: min(46vh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-sand);
}

@media (max-width: 479.98px) {
  .vivre-card-picker__scroll {
    max-height: 40vh;
  }
}

/* Flache Sichtfenster: 46vh sind bei 360px Hoehe nur 166px, und darueber
   liegen noch Einleitung, Suchfeld und Zaehler. Weniger Liste heisst mehr
   Platz fuer Auswahlzeile und Warnung. */
@media (max-height: 479.98px) {
  .vivre-card-picker__scroll {
    max-height: 34vh;
  }
}

.vivre-card-group + .vivre-card-group {
  margin-top: var(--space-3);
}

.vivre-card-group__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.vivre-card-group__count {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-muted);
}

.vivre-card-group__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--space-2);
}

@media (max-width: 479.98px) {
  .vivre-card-group__items {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
}

.vivre-card-candidate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: var(--touch-min);
  padding: 8px 6px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--card-white);
  color: var(--text-primary);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.vivre-card-candidate:hover {
  border-color: var(--gold);
  background: rgba(184, 132, 52, 0.08);
}

.vivre-card-candidate.is-selected,
.vivre-card-candidate[aria-checked="true"] {
  border-color: var(--gold);
  background: rgba(184, 132, 52, 0.18);
  box-shadow: 0 0 10px rgba(184, 132, 52, 0.25);
}

.vivre-card-candidate:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.vivre-card-candidate__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  background: var(--bg-sand);
}

.vivre-card-candidate__name {
  font-size: var(--text-xs);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.vivre-card-picker__selection {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* Die Warnung steht vor einer unwiderruflichen Entscheidung und ist der letzte
   Baustein des Dialogrumpfs. Auf flachen Sichtfenstern lag sie ausserhalb des
   Bildes — deshalb klebt sie am unteren Rand des Rumpfs, solange gescrollt
   werden muss. Passt alles ohne Scrollen, aendert sich nichts. */
.vivre-card-picker__warning {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-left: 3px solid var(--danger);
  /* Zwei Ebenen: die Kartenfarbe des Dialogs ueber einem deckenden Untergrund.
     Im dunklen Schema ist `--card` halbdurchsichtig — allein gesetzt wuerde die
     Kandidatenliste durch die Warnung hindurchscheinen. */
  background-color: var(--bg-warm, #fff);
  background-image: linear-gradient(var(--card, #fff), var(--card, #fff));
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-secondary);
}

.vivre-card-picker__empty {
  margin: 0;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Ausgefilterte Eintraege verschwinden vollstaendig aus dem Fluss. */
.vivre-card-picker .is-filtered-out {
  display: none !important;
}

/* =========================================================================
   ZEIGEGERAET — :hover nur dort, wo es wirklich einen Zeiger gibt

   Bisher gab es in keiner Datei eine Abfrage auf `hover` oder `pointer`.
   Auf Touch-Geraeten setzt der Browser :hover beim Antippen und laesst es
   stehen, bis woanders hingetippt wird. Alles, was dabei die Groesse oder
   Position veraendert (translateY, Schatten, wachsendes Innenmass), bleibt
   sichtbar kleben — die Seitenleisten-Reiter etwa verschoben sich dauerhaft.

   Farbwechsel bleiben erhalten: sie stoeren nicht und dienen als
   Tipp-Rueckmeldung. Zurueckgenommen wird nur die Bewegung.
   ========================================================================= */

@media (hover: none) {
  .card:hover {
    box-shadow: var(--shadow);
  }

  .btn:hover:not(:disabled) {
    transform: none;
    filter: none;
  }

  .character-card:hover,
  .player-character-card.is-draggable:hover,
  .character-image-card:hover,
  .gm-character-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  .stats-grid-compact.stats-clickable .stat-attack:hover {
    transform: none;
    box-shadow: none;
  }

  #auction-container .bid-form .auction-instabuy-btn:hover:not(:disabled) {
    transform: none;
  }
}

/* Feinzeiger (Maus/Trackpad): der Klickbereich darf knapper sein.
   Grobzeiger (Finger): Mindestmass durchsetzen, unabhaengig von der Breite —
   ein Tablet im Querformat ist 1080px breit und wird trotzdem getippt. */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .btn-ghost,
  .btn-brass-pulse,
  .theme-toggle-btn,
  .tab,
  .sidebar-tab,
  .modal-close,
  .category-btn {
    min-height: var(--touch-min);
  }

  /* Der Farbschema-Schalter ist rund und 36px breit: die Hoehe kam ueber die
     Regel oben, die Breite fehlte. */
  .theme-toggle-btn {
    min-width: var(--touch-min);
  }

  /* Die Seitenleisten-Reiter stehen in einem Spaltenflex. Ohne diese Zeile
     druecken sieben Reiter in einer 304px hohen Leiste einander unter das
     Mindestmass, statt die Leiste scrollen zu lassen. */
  .sidebar-tab {
    flex-shrink: 0;
  }

  .item-info-btn,
  .jukebox-toggle,
  .team-touch-hint-close,
  .crew-info-btn,
  .roster-bar__arrow {
    /* optisch unveraendert, aber mit tastbarer Trefferflaeche */
    position: relative;
  }

  .item-info-btn::after,
  .jukebox-toggle::after,
  .team-touch-hint-close::after,
  .crew-info-btn::after,
  .roster-bar__arrow::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--touch-min);
    height: var(--touch-min);
    transform: translate(-50%, -50%);
  }

  /* Schieberegler: die Schiene bleibt schlank, die Greifflaeche waechst.
     Gemessen waren 4px (Kopf-Lautstaerke) bis 20px Hoehe. */
  input[type="range"] {
    min-height: var(--touch-min);
  }

  /* Kontrollkaestchen liefern browserseitig 13-22px. Der zugehoerige
     <label>-Text ist der eigentliche Tippbereich — er bekommt deshalb das
     Mindestmass, das Kaestchen selbst waechst nur massvoll mit. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* `:where()` haelt die Spezifitaet bei der eines blossen `label`: Beschriftungen
     mit eigener Klassenregel (z. B. .crew-effect-checklist__row, .ce-check)
     behalten ihr Layout, alle uebrigen bekommen hier erstmals eines. */
  label:where(:has(> input[type="checkbox"])),
  label:where(:has(> input[type="radio"])) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
  }
}

/* ==========================================================================
   Welle 3, Phase 5 — Hoody Jones Drogen
   ========================================================================== */

/* Merker auf der eigenen Charakterkarte im Team-Reiter.
   Gleiche Bauart und Position wie `.bounty-target-mark` (public/js/bounty.js),
   nur in einer anderen Ecke — beide koennen gleichzeitig auf derselben Karte
   stehen und duerfen sich nicht ueberdecken. Angehaengt wird er von
   `applyDrugMarkers` in public/js/shop.js. */
.drug-mark {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(135deg, #553C9A, #805AD5);
  color: #fff;
  pointer-events: none;
}

/* Die Karte muss den Merker halten koennen. `.bounty-target-mark` setzt
   `position: relative` per Inline-Stil; hier steht es im Stylesheet, damit der
   Merker auch ohne Kopfgeld sitzt. */
.player-character-card:has(> .drug-mark) {
  position: relative;
}

/* Plakette im Kampf (public/js/battle.js renderDrugBadge).
   `.battle-modifier` bringt nur die Form mit — die Farbe kommt wie bei
   `.fatigue-badge` erst ueber die Zusatzklasse. Vier Zustaende, vier Farben:
   Zuschlag wirkt, Nachhang wirkt, Dosis wartet, Nachhang wartet. Der Text
   nennt den Zustand ausserdem im Klartext, Farbe allein traegt hier nichts. */
.drug-badge.is-buff {
  background: linear-gradient(135deg, #276749, #48BB78);
  color: #fff;
}

.drug-badge.is-penalty {
  background: linear-gradient(135deg, #744210, #D69E2E);
  color: #fff;
}

.drug-badge.is-armed,
.drug-badge.is-pending {
  background: linear-gradient(135deg, #4A5568, #718096);
  color: #fff;
}