/* Icon-Schrift: ersetzt Emojis im ganzen Spiel durch einheitliche Gold-Icons
   (game-icons.net, CC BY 3.0). Gebaut aus tools/icons/icon-map.json -
   unicode-range sorgt dafür, dass sie NUR für diese Zeichen greift. */
@font-face {
  font-family: 'OP Icons';
  src: url('assets/fonts/op-icons.woff2?v=3') format('woff2');
  font-display: block;
  unicode-range: U+23ED, U+23F1, U+23FB, U+2600, U+2620, U+2691, U+2693, U+2694, U+2697, U+2699, U+26A0, U+26A1, U+26AB, U+26C8, U+26D4, U+26F5, U+2705, U+2709, U+2714, U+2728, U+2734, U+2744, U+274C, U+2764, U+2B06, U+2B50, U+FE0F, U+1F0CF, U+1F300, U+1F30A, U+1F310, U+1F311, U+1F31F, U+1F32B, U+1F37A, U+1F381, U+1F383, U+1F389, U+1F393, U+1F396, U+1F39A, U+1F39F, U+1F3A1, U+1F3A8, U+1F3AF, U+1F3B0, U+1F3B2, U+1F3C5, U+1F3C6, U+1F3DD, U+1F3EA, U+1F3F0, U+1F3F4, U+1F3FA, U+1F409, U+1F412, U+1F419, U+1F41A, U+1F422, U+1F441, U+1F451, U+1F464, U+1F465, U+1F47B, U+1F480, U+1F48E, U+1F4A3, U+1F4A5, U+1F4A8, U+1F4AC, U+1F4B0, U+1F4B5, U+1F4C5, U+1F4CB, U+1F4CF, U+1F4D0, U+1F4D6, U+1F4DC, U+1F4E6, U+1F4F6, U+1F507, U+1F50A, U+1F511, U+1F512, U+1F514, U+1F517, U+1F525, U+1F527, U+1F528, U+1F52D, U+1F52E, U+1F54A, U+1F5D1, U+1F5E1, U+1F5FA, U+1F5FC, U+1F6A2, U+1F6A9, U+1F6D2, U+1F6E0, U+1F6E1, U+1F6E2, U+1F916, U+1F92B, U+1F95A, U+1F964, U+1F988, U+1F99C, U+1F9AA, U+1F9D4, U+1F9E8, U+1F9E9, U+1F9EA, U+1F9ED, U+1F9EF, U+1FA7A, U+1FA99, U+1FA9A, U+1FA9D, U+1FA9F;
}

/* Eigene Bild-Icons (client/icons.js ersetzt Emojis/Icon-Zeichen durch <img class="op-ic">) */
img.op-ic {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.28em;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55));
}
.nav-icon img.op-ic { width: 24px; height: 24px; vertical-align: middle; }

:root {
  --ocean-deep: #071c2e;
  --ocean-mid: #0d3a5c;
  --gold: #d9a441;
  --gold-bright: #f2c464;
  --parchment: #ecdcb8;
  --parchment-dark: #c9b285;
  --danger: #b3372c;
  --success: #3f8f5c;
  --wood: #4a2c1a;
  --wood-dark: #2e1a10;

  /* --- Flaches Karten-HUD (kein Holz/Zierrahmen mehr, nur noch dünne
     goldene Linien auf dunklem Marineblau) --- */
  --hud-bg: #0a1420;
  --hud-bg-soft: #0d1a29;
  --hud-border: #7a5a2e;
  --hud-border-soft: rgba(122,90,46,0.5);
  --hud-accent-cyan: #5ecbe8;
  --hud-text-muted: #7f8ea0;
}

* { box-sizing: border-box; }

/* Formular-Elemente erben die Seitenschrift sonst nicht - Icon-Schrift
   trotzdem voranstellen, damit Emojis auf Knöpfen ebenfalls Icons werden. */
button, input, select, textarea { font-family: 'OP Icons', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* verhindert das iOS-Bounce-/Rubberband-Scrollen der ganzen Seite */
  touch-action: pan-x pan-y; /* erlaubt Wischen in inneren Panels, aber kein Doppeltipp-/Pinch-Zoom auf der Seite */
  font-family: 'OP Icons', 'Georgia', 'Trebuchet MS', serif;
  background: radial-gradient(ellipse at center, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
  color: var(--parchment);
}
/* Zusätzliche Sperre gegen Safari-iOS-Seiten-Scroll: html/body bleiben fix
   im Viewport verankert, unabhängig vom Inhalt darunter. */
html { position: fixed; inset: 0; }
body { position: fixed; inset: 0; overflow: hidden; }

.screen {
  width: 100%;
  height: 100%;
  position: relative;
}
.hidden { display: none !important; }

/* ===== Ladebildschirm ===== */
#loading-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* Gleicher Hintergrund wie Login/Hauptseite (Standbild statt Video) */
  background:
    linear-gradient(180deg, rgba(5,11,18,0.55) 0%, rgba(5,11,18,0.35) 40%, rgba(5,11,18,0.9) 100%),
    url('assets/loading/Hintergrund.jpg') center 30% / cover no-repeat,
    #050b12;
}
#loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}

#loading-card {
  position: relative;
  z-index: 1;
  width: min(90vw, 440px);
  text-align: center;
  padding: 22px 28px 26px;
  background: rgba(8,18,30,0.62);
  border: 1px solid rgba(217,164,65,0.6);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}
#loading-card h1 {
  margin: 0 0 24px;
  font-size: 28px;
  color: var(--gold-bright);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 1px;
}
#loading-label {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--parchment);
}

/* Knochen-Ladebalken (Assets: client/assets/loading/) */
.bone-loader {
  --progress: 0%;
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 2139 / 291;
  isolation: isolate;
}
.bone-track {
  position: absolute;
  left: 9.5%;
  right: 9.5%;
  top: 40%;
  height: 28%;
  background: #080c0de6;
  overflow: hidden;
  border-radius: 999px;
  z-index: 0;
}
.bone-fill {
  /* Textur immer in voller Balkenbreite, Fortschritt deckt sie nur auf
     (statt sie auf die Füllbreite zu stauchen - dann sah sie bis ~80 % wie flache Farbe aus) */
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--progress)) 0 0 round 999px);
  transition: clip-path .35s ease;
  /* Verlauf darunter als Sofort-Ersatz, falls die Textur noch lädt */
  background: linear-gradient(180deg, #f3d27a 0%, #d99a3a 45%, #9c5f1c 100%);
  border-radius: 999px;
  filter: drop-shadow(0 0 4px #cd903b);
}
.bone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.bone-marker {
  position: absolute;
  left: calc(9.5% + .81 * var(--progress));
  top: 32%;
  height: 46%;
  width: auto;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 2px 3px #000);
  transition: left .35s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bone-fill, .bone-marker { transition: none; }
}

#loading-count {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--parchment-dark);
}

/* ===== Auth Screen ===== */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,164,65,0.08), transparent 60%),
    radial-gradient(ellipse at center, var(--ocean-mid) 0%, var(--ocean-deep) 100%);
}

.auth-card {
  width: min(90vw, 380px);
  background: linear-gradient(160deg, #2b1710 0%, #1b0f0a 100%);
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(217,164,65,0.06);
  text-align: center;
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 28px;
  color: var(--gold-bright);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  letter-spacing: 1px;
}

.subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--parchment-dark);
  font-style: italic;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 4px;
}

.tab {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--parchment-dark);
  font-family: inherit;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab.active {
  background: var(--gold);
  color: #1b0f0a;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-form input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--parchment-dark);
  background: rgba(236, 220, 184, 0.95);
  color: #241608;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.auth-form input:focus {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(217,164,65,0.25);
}

.btn-primary {
  margin-top: 6px;
  padding: 13px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1b0f0a;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(217,164,65,0.35);
  transition: transform 0.1s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217,164,65,0.5); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }

.auth-message {
  min-height: 18px;
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--danger);
}
.auth-message.success { color: var(--success); }

/* ===== Game Screen: Seafight-artiger Holzrahmen ===== */
#game-screen { background: #050d16; }

:root {
  --wood-light: #7a5230;
  --wood-mid: #4e3319;
  --wood-dark: #2a1a0c;
  --wood-plank: repeating-linear-gradient(
    180deg,
    #5c3d20 0px, #5c3d20 3px,
    #4a3018 3px, #4a3018 6px
  );
  --hud-bottom: 96px; /* Höhe der schwebenden unteren Leiste (HP + Hotbar) */
  --sidebar-right: 66px; /* Sidebar-Breite + Abstand - hier docken Chat/Crew an */
}

#map-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* --- Ressourcen-Badges oben links im Spielfeld --- */
#resource-badges {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  padding-left: calc(var(--sidebar-right) - 2px); /* Platz für die Icon-Sidebar, die links darunter liegt */
  /* Der Container ragt (wegen padding-left) über die Sidebar: selbst klick-
     durchlässig, nur die Anzeigen darin fangen Klicks (sonst blockiert er z. B.
     im Sturm, wenn eine Zeile mehr dazukommt, den Schiff-Button) */
  pointer-events: none;
}
#resource-badges > * { pointer-events: auto; }

.top-stat {
  font-size: 11px;
  font-weight: bold;
  color: var(--parchment);
  background: rgba(6,12,20,0.55);
  border: 1px solid rgba(217,164,65,0.35);
  border-radius: 5px;
  padding: 4px 10px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Gold · Perlen · Seelen in einer schmalen Leiste */
#resource-strip { display: flex; gap: 0; padding: 0; }
#resource-strip > span { padding: 4px 10px; border-right: 1px solid rgba(217,164,65,0.25); }
#resource-strip > span:last-child { border-right: none; }

/* Ziel-Anzeige (wie die Sidebar: dunkles Glas, goldener Rand) */
.target-frame {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 210px;
  max-width: 280px;
  padding: 6px 12px 7px 6px;
  background: rgba(6,12,20,0.6);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 12px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  animation: tf-in 0.18s ease-out;
}
.target-frame.hidden { display: none; }
@keyframes tf-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tf-portrait {
  width: 64px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 60%, rgba(40,70,100,0.55), rgba(6,12,20,0.2) 70%);
  border: 1px solid rgba(217,164,65,0.25);
}
.tf-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tf-kicker { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236,220,184,0.6); }
.target-frame.attacker .tf-kicker { color: #ff8a6a; }
.target-frame.attacker { border-color: rgba(226,96,74,0.55); }
.tf-name {
  font: bold 13px 'OP Icons', Georgia, serif;
  color: var(--gold-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-hp {
  height: 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(217,164,65,0.35);
  border-radius: 4px;
  overflow: hidden;
}
.tf-hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #e2604a, #a8291f);
  transition: width 0.2s ease-out;
}
.target-frame.friendly .tf-hp-fill { background: linear-gradient(180deg, #6fd27a, #2f8f3c); }
.tf-hp-text { font-size: 11px; font-weight: bold; color: var(--parchment); font-variant-numeric: tabular-nums; }

/* --- Linke Icon-Sidebar (Navigation): eine durchgehende, dünn umrandete
   Leiste mit Icon+Label je Zeile, wie im Referenz-Stil --- */
#side-nav {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  width: 50px;
  height: auto;
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(6,12,20,0.6);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 12px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Sichtbar, damit vergrößerte Icons (Dock-Effekt) und Tooltips über den
     Rand hinausragen dürfen - bei sehr niedrigen Fenstern siehe Media Query */
  overflow: visible;
  transition: height 0.25s ease;
}
#side-nav::-webkit-scrollbar { display: none; }

/* Eingerollt: die Leiste zieht sich von unten nach oben zusammen, bis nur
   noch der Kompass mit dem Ausklapp-Tab übrig bleibt. */
#side-nav.collapsed {
  height: 46px;
  padding-bottom: 0;
  overflow: hidden;
}
#side-nav.collapsed .nav-group, #side-nav.collapsed > .nav-item { display: none; }

/* Ausklapp-Tab: eigenständiges Element NEBEN #side-nav (nicht darin verschachtelt),
   damit er nicht vom overflow:hidden der Leiste im eingerollten Zustand
   abgeschnitten wird und immer klickbar bleibt. Fest auf Höhe des Kompass
   positioniert, sitzt halb überlappend am rechten Rand der Sidebar. */
#side-nav-toggle {
  position: absolute;
  left: 51px; /* = 8px (nav-left) + 50px (nav-width) - 7px Überlappung */
  top: 17px; /* vertikal mittig zur 46px hohen Kompass-Zeile */
  z-index: 5;
  width: 20px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--hud-border);
  border-radius: 5px;
  background: var(--hud-bg);
  color: var(--gold-bright);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.2s ease;
}
#side-nav-toggle:hover { background: rgba(217,164,65,0.15); }
#side-nav.collapsed + #side-nav-toggle { transform: rotate(180deg); }

@media (min-width: 700px) {
  #side-nav-toggle { left: 55px; } /* = 8px + 54px (nav-width) - 7px */
}

.nav-compass {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 18px;
  color: var(--gold-bright);
  border-bottom: 1px solid var(--hud-border-soft);
}

.nav-item {
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--parchment);
  cursor: pointer;
}
/* Icon als kleine Kachel (ohne Hover-Effekt) */
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  box-shadow: inset 0 0 0 1px rgba(217,164,65,0.18), 0 2px 5px rgba(0,0,0,0.35);
  pointer-events: none;
}
/* etwas Luft unter dem Kompass */
.nav-compass + .nav-item { margin-top: 6px; }
.nav-item:active .nav-icon { filter: brightness(0.85); }
/* Beschriftung als Tooltip rechts neben dem Icon (wie im macOS-Dock) */
.nav-label {
  position: absolute;
  left: calc(100% + 26px);
  top: 50%;
  transform: translate(-6px, -50%);
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(10,20,32,0.94);
  border: 1px solid var(--hud-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.3px;
  color: var(--parchment);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 20;
}
.nav-item:hover .nav-label { opacity: 1; transform: translate(0, -50%); }
.nav-item.nav-item-soon .nav-icon { opacity: 0.5; }
.nav-item.nav-item-soon .nav-label::after { content: ' · soon'; color: var(--hud-text-muted); font-weight: normal; }

/* Gruppen: ein Icon, das Untermenü klappt rechts daneben auf */
.nav-group { position: relative; }
.nav-group.open .nav-item .nav-icon { background: rgba(242,196,100,0.22); box-shadow: inset 0 0 0 1px rgba(242,196,100,0.6); }
.nav-group.open .nav-item .nav-label { opacity: 0; }
.nav-flyout {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  min-width: 128px;
  padding: 4px;
  background: rgba(8,14,22,0.94);
  border: 1px solid var(--hud-border);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  z-index: 30;
}
.nav-flyout::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(8,14,22,0.94);
  border-left: 1px solid var(--hud-border);
  border-bottom: 1px solid var(--hud-border);
}
.nav-group.open .nav-flyout { display: flex; }
.nav-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--parchment);
  font: bold 12px 'OP Icons', Georgia, serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.nav-sub { position: relative; padding-right: 26px; }
.nav-sub > span:first-child { width: 18px; text-align: center; font-size: 14px; }
.nav-sub:hover { background: rgba(217,164,65,0.14); }
.nav-sub.nav-item-soon { opacity: 0.5; }
.nav-sub.nav-item-soon::after { content: 'soon'; margin-left: auto; font-size: 9px; font-weight: normal; color: var(--hud-text-muted); }
.nav-sub-danger { color: #e0907f; }
.nav-item-danger .nav-icon { color: #e0907f; }
.nav-item-danger .nav-label { color: #e0907f; }

@media (min-width: 700px) {
  #side-nav { width: 54px; }
  .nav-item { height: 40px; }
  .nav-icon { width: 32px; height: 32px; font-size: 17px; }
  :root { --sidebar-right: 70px; }
}
/* Sehr niedrige Fenster: Leiste darf wieder scrollen (ohne Dock-Überhang) */
@media (max-height: 600px) {
  #side-nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  #side-nav::-webkit-scrollbar { display: none; }
}

.frame-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: url('assets/ui/buttons/normal.png') center / 100% 100% no-repeat;
  color: var(--gold-bright);
  cursor: pointer;
  font-size: 15px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.frame-btn:hover { background-image: url('assets/ui/buttons/aktiv.png'); }
.frame-btn:active { background-image: url('assets/ui/buttons/gedrueckt.png'); }

/* --- Spielfeld --- */
#viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

#overlay-canvas, #hud-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
#hud-canvas { z-index: 2; display: none; }
#hud-canvas.on { display: block; }
#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Knochenhand statt Standard-Fadenkreuz; Hotspot liegt an der Fingerspitze
     (oben links im Bild), damit die Spitze exakt auf den Klickpunkt zeigt. */
  cursor: url('assets/cursors/knochenhand.png') 0 0, crosshair;
  touch-action: none; /* eigenes Pinch-to-Zoom statt Browser-Seitenzoom */
}


/* ===== Jumpscare-Overlay ===== */
/* ===== Logout-Countdown-Banner ===== */
#logout-countdown-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #2b1e10, #17100c);
  border: 2px solid var(--gold-bright);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(242,196,100,0.4), 0 6px 18px rgba(0,0,0,0.6);
  color: var(--parchment);
  font-family: 'OP Icons', Georgia, serif;
  font-size: 13px;
  white-space: nowrap;
}
#btn-logout-countdown-cancel {
  padding: 5px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--wood-light);
  border-radius: 6px;
  color: var(--parchment);
  font-size: 12px;
  cursor: pointer;
}
#btn-logout-countdown-cancel:hover { background: rgba(255,255,255,0.16); }

#jumpscare-overlay {
  position: fixed;
  inset: 0;
  z-index: 500; /* über allem anderen, inkl. Panels */
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none; /* Spieler soll nichts wegklicken müssen, es geht von selbst weg */
}
#jumpscare-overlay.hidden { display: none; }
#jumpscare-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: jumpscare-shake 0.4s ease-in-out 3, jumpscare-fadeout 0.6s ease-in 1.6s forwards;
}
@keyframes jumpscare-shake {
  0%, 100% { transform: scale(1.08) translate(0, 0); }
  20% { transform: scale(1.1) translate(-1.2%, 0.8%); }
  40% { transform: scale(1.1) translate(1%, -1%); }
  60% { transform: scale(1.1) translate(-0.8%, -0.6%); }
  80% { transform: scale(1.1) translate(1.2%, 0.6%); }
}
@keyframes jumpscare-fadeout {
  to { opacity: 0; }
}

.achievement-toast-instance {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2b1e10, #17100c);
  border: 2px solid var(--gold-bright);
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(242,196,100,0.5), 0 8px 24px rgba(0,0,0,0.6);
  color: var(--parchment);
  font-family: 'OP Icons', Georgia, serif;
  animation: achievement-toast-in 0.35s ease-out, achievement-toast-out 0.45s ease-in var(--toast-ms, 3200ms) forwards;
  pointer-events: none;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .achievement-toast-instance { top: 58px; padding: 9px 14px; gap: 9px; font-size: 14px; }
  .achievement-toast-icon { font-size: 22px; }
}
.achievement-toast-icon { font-size: 28px; }
.achievement-toast-kicker { font-size: 10px; letter-spacing: 1.5px; color: var(--gold-bright); text-transform: uppercase; }
@keyframes achievement-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes achievement-toast-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

#killfeed {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  max-width: 90%;
}
.killfeed-entry {
  padding: 4px 12px;
  background: rgba(10,6,3,0.72);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 5px;
  color: var(--parchment);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: killfeed-in 0.25s ease-out, killfeed-out 0.6s ease-in 4.4s forwards;
}
.killfeed-entry .killfeed-attacker { color: #7fe08a; font-weight: bold; }
.killfeed-entry .killfeed-victim { color: #e08a7f; font-weight: bold; }
.killfeed-entry .killfeed-bounty { color: #f2d478; font-weight: bold; }
@keyframes killfeed-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes killfeed-out {
  to { opacity: 0; }
}

/* --- Minimap: Zierrahmen (Diamant mit Kompass/Steuerrad/Anker/Lilie) --- */
#minimap-frame {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 104px;
  z-index: 4;
  background: rgba(6,12,20,0.6);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 6px;
  overflow: hidden;
}
.minimap-n {
  position: absolute;
  left: 6px;
  top: 5px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--hud-border);
  background: var(--hud-bg-soft);
  color: var(--gold-bright);
  font-size: 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#minimap-inner {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0d2338;
}
#minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* --- Zoom-Balken: vertikal, unter der Minimap --- */
#zoom-control {
  position: absolute;
  top: 142px;
  right: 8px;
  width: 30px;
  height: 110px;
  background: rgba(6,12,20,0.6);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 6px;
  z-index: 4;
}
#zoom-in-label, #zoom-out-label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--gold-bright);
  font-weight: bold;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
#zoom-in-label { top: 4px; }
#zoom-out-label { bottom: 4px; }
#zoom-slider {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  transform: translate(-50%, -50%) rotate(-90deg);
  accent-color: var(--gold-bright);
  cursor: pointer;
}

#minimap-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  border-top: 1px solid var(--hud-border-soft);
  font-size: 10px;
  font-weight: bold;
  color: var(--parchment-dark);
}

@media (min-width: 700px) {
  #minimap-frame { width: 130px; }
  #zoom-control { top: 168px; }
  #quests-panel { top: 290px; width: 260px; }
}

/* --- Quests-Panel: einklappbar, unter dem Zoom-Balken --- */
#quests-panel {
  position: absolute;
  top: 262px;
  right: 8px;
  width: 230px;
  max-width: 78vw;
  z-index: 4;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  overflow: hidden;
}
#quests-header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hud-border-soft);
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#quests-header span:first-child { flex: 1; text-align: left; }
#quests-count {
  min-width: 15px;
  padding: 1px 5px;
  background: var(--hud-bg-soft);
  border: 1px solid var(--hud-border-soft);
  border-radius: 8px;
  font-size: 9px;
  color: var(--parchment-dark);
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Mindestens eine fertige, noch nicht abgeholte Quest wartet - auch bei
   geschlossenem Panel sichtbar (siehe updateQuestsBadge() in game.js). */
#quests-count.quests-count-ready {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: #241408;
  font-weight: bold;
}
#quests-close {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  color: var(--parchment-dark);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#quests-close:hover { color: var(--gold-bright); }
#chat-close {
  margin-left: auto;
  background: none;
  border: none;
  padding: 2px 2px 2px 8px;
  color: var(--parchment-dark);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#chat-close:hover { color: var(--gold-bright); }
#quests-body {
  padding: 8px 9px 10px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-border) transparent;
}
#quests-body::-webkit-scrollbar { width: 6px; }
#quests-body::-webkit-scrollbar-thumb { background: var(--hud-border); border-radius: 3px; }
.quests-placeholder {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--parchment-dark);
  margin: 8px 0 0;
}
.quests-placeholder-small { margin-top: 6px; font-size: 10px; font-style: italic; }

/* --- Abschnitts-Überschrift im Quests-Panel: trennt Daily Quests (oben, mit
   Reset-Hinweis) von den Lebenszeit-Quests (unten) - siehe renderQuestsPanel()
   in game.js. --- */
.quest-section-header {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hud-border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.quest-section-header:first-child { margin-top: 0; }
.quest-section-sub {
  text-transform: none;
  letter-spacing: normal;
  font-size: 9.5px;
  font-style: italic;
  color: var(--hud-text-muted);
}

/* --- Quest-Karten: eine pro Eintrag aus QUESTS oder DAILY_QUEST_POOL
   (server/game/GameState.js), gerendert von renderQuestsPanel() in game.js --- */
.quest-card {
  background: var(--hud-bg-soft);
  border: 1px solid var(--hud-border-soft);
  border-radius: 6px;
  padding: 8px 9px;
  margin-bottom: 7px;
}
.quest-card:last-child { margin-bottom: 0; }
.quest-card.ready { border-color: var(--gold-bright); box-shadow: 0 0 8px rgba(242,196,100,0.25); }
.quest-card.claimed { opacity: 0.55; }
.quest-card-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.quest-card-icon { font-size: 15px; line-height: 1.3; flex-shrink: 0; }
.quest-card-title { flex: 1; min-width: 0; }
.quest-card-label {
  font-size: 11.5px;
  font-weight: bold;
  color: var(--parchment);
}
.quest-card.claimed .quest-card-label { text-decoration: line-through; }
.quest-card-desc {
  font-size: 10px;
  line-height: 1.4;
  color: var(--hud-text-muted);
  margin: 2px 0 0;
}
.quest-card-progress-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}
.quest-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.4);
  border-radius: 4px;
  overflow: hidden;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 0.25s ease;
}
.quest-card.claimed .quest-progress-fill { background: var(--hud-text-muted); }
.quest-progress-label {
  font-size: 9.5px;
  color: var(--parchment-dark);
  white-space: nowrap;
  flex-shrink: 0;
}
.quest-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 6px;
}
.quest-reward {
  font-size: 9.5px;
  color: var(--hud-accent-cyan);
}
.quest-claim-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright));
  border: none;
  border-radius: 5px;
  color: #241408;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
}
.quest-claim-btn:hover { filter: brightness(1.08); }
.quest-claim-btn:disabled {
  background: var(--hud-bg);
  border: 1px solid var(--hud-border-soft);
  color: var(--hud-text-muted);
  cursor: default;
}
.quest-claimed-badge {
  font-size: 9.5px;
  color: var(--hud-text-muted);
  font-style: italic;
}

/* --- Crew: Panel, wird über den Chat/Crew-Button in der Sidebar geöffnet --- */
#crew-panel {
  position: absolute;
  left: var(--sidebar-right);
  bottom: 10px;
  width: min(calc(100vw - var(--sidebar-right) - 18px), 240px);
  z-index: 3;
}
#crew-panel .admin-card {
  width: 100%;
  max-height: 60vh;
  padding: 12px 14px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
#crew-panel .admin-header h2 { font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#crew-panel .quests-placeholder { font-size: 11px; }

#crew-member-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#crew-member-list li {
  font-size: 12px;
  color: var(--hud-text);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  padding: 4px 8px;
}
#crew-invite-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
#crew-invite-input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  color: var(--hud-text);
  padding: 5px 8px;
  font-size: 12px;
}
#crew-invite-btn, #crew-leave-btn {
  background: var(--gold);
  color: #1a1408;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
#crew-leave-btn {
  width: 100%;
  background: rgba(200,60,60,0.85);
  color: #fff;
  margin-bottom: 6px;
}
#crew-invite-btn:hover, #crew-leave-btn:hover { filter: brightness(1.1); }

#crew-invite-toast {
  position: absolute;
  left: var(--sidebar-right);
  bottom: 220px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hud-bg);
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  font-size: 12px;
  color: var(--hud-text);
  max-width: min(calc(100vw - var(--sidebar-right) - 18px), 280px);
}
#crew-invite-toast button {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  color: var(--hud-text);
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}
#crew-invite-accept:hover { background: rgba(70,160,70,0.5); }
#crew-invite-decline:hover { background: rgba(160,70,70,0.5); }

#connection-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.8);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 16px 28px;
  font-size: 15px;
  font-weight: bold;
  color: var(--gold-bright);
  z-index: 5;
}


/* ===== Fähigkeiten-Hotbar (jetzt Teil der unteren Statusleiste) ===== */
#combat-row {
  position: relative;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  margin: 0 auto;
  background: rgba(6,12,20,0.62);
  border: 1px solid rgba(217,164,65,0.45);
  border-radius: 6px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: auto;
}

#hotbar {
  display: flex;
  gap: 0;
  flex: 1;
  min-width: 0;
  /* nicht scrollbar: alle 10 Plätze passen (Slotgröße passt sich an) */
  overflow: hidden;
  touch-action: manipulation;
  scrollbar-width: none; /* Firefox */
}
#hotbar::-webkit-scrollbar {
  display: none; /* Chrome/Safari - Leiste bleibt optisch sauber, Scrollen per Wisch geht trotzdem */
}
#hotbar { counter-reset: hotbar-slot; }

.hotbar-slot {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.hotbar-slot {
  position: relative;
  width: 32px;
  height: 34px;
  padding: 0;
  border: none;
  border-right: 1px solid var(--hud-border-soft);
  background: transparent;
  cursor: pointer;
  counter-increment: hotbar-slot;
}
.hotbar-slot:last-child { border-right: none; }
.hotbar-slot::before {
  content: counter(hotbar-slot);
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 7px;
  font-weight: normal;
  color: rgba(236,220,184,0.4);
  z-index: 1;
  pointer-events: none;
}
.hotbar-slot:hover { background: rgba(217,164,65,0.06); }
.hotbar-slot:active { background: rgba(217,164,65,0.16); }
.hotbar-slot img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  pointer-events: none;
}
.hotbar-slot.slot-disabled {
  cursor: default;
  filter: grayscale(0.9) brightness(0.55);
}
.hotbar-slot.toggled {
  background: rgba(217,164,65,0.22);
  box-shadow: inset 0 0 0 1.5px var(--gold-bright);
}
.hotbar-slot.toggled img {
  filter: drop-shadow(0 0 3px rgba(242,196,100,0.9));
}
.hotbar-slot .cooldown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  height: 0%;
  pointer-events: none;
  transition: height 0.15s linear;
}
.stock-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 8px;
  font-weight: bold;
  color: rgba(242,196,100,0.8);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}
/* Leere Slots: abgedunkelt statt roter Zahl */
.hotbar-slot:disabled, .hotbar-slot.no-stock { cursor: default; }
.hotbar-slot:disabled img, .hotbar-slot.no-stock img { filter: grayscale(0.8) brightness(0.5); }
.hotbar-slot:disabled .stock-badge, .hotbar-slot.no-stock .stock-badge { color: rgba(236,220,184,0.35); }

#hotbar-message {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 12px;
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  border-radius: 6px;
  color: var(--gold-bright);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}
#hotbar-message.show { opacity: 1; }

@media (min-width: 700px) {
  .hotbar-slot { width: 40px; height: 42px; }
}
/* Aktionsleiste: Tastenkürzel statt laufender Nummer */
.hotbar-slot::before { content: attr(data-key); }

/* Schnellwahl-Leiste (Munition/Harpunen/Items per Ziehen ablegen) */
#quickbar { display: flex; gap: 3px; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(217,164,65,0.35); }
.qs-slot { position: relative; width: 38px; height: 40px; padding: 0; border-radius: 4px; cursor: pointer; touch-action: none;
  border: 1px solid rgba(217,164,65,0.35); background: radial-gradient(circle at 50% 35%, rgba(40,30,16,0.85), rgba(8,6,3,0.92)); }
.qs-slot.empty { border-style: dashed; border-color: rgba(217,164,65,0.22); background: rgba(8,6,3,0.45); }
.qs-slot img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; pointer-events: none; }
.qs-slot kbd { position: absolute; left: 2px; top: 1px; z-index: 1; font: 8px/1 Georgia, serif; color: rgba(239,226,196,0.6); background: none; border: 0; padding: 0; pointer-events: none; }
.qs-slot .qs-n { position: absolute; right: 2px; bottom: 1px; z-index: 1; font-size: 8px; font-weight: 700; color: rgba(242,196,100,0.9); text-shadow: 0 1px 2px #000; pointer-events: none; }
.qs-slot .qs-cd { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; font-size: 12px; font-weight: 700; color: #fff3dc; text-shadow: 0 1px 3px #000; pointer-events: none; }
.qs-slot.cooling img { filter: grayscale(0.7) brightness(0.45); }
.qs-slot.no-stock img { filter: grayscale(0.85) brightness(0.45); }
.qs-slot.on { box-shadow: inset 0 0 0 1.5px var(--gold-bright, #f2c464), 0 0 8px rgba(242,196,100,0.45); }
.qs-slot:hover { border-color: rgba(242,196,100,0.65); }
.qs-slot:focus-visible { outline: 2px solid #fff3dc; outline-offset: 1px; }
.qs-slot.pressed { animation: qs-press .22s ease; }
@keyframes qs-press { 40% { transform: scale(0.9); } }
#quickbar.drop-ready .qs-slot { border-color: rgba(242,196,100,0.55); }
#quickbar .qs-slot.drop-over { border: 1.5px solid #f2c464; background: rgba(242,196,100,0.18); }
.qs-ghost { position: fixed; left: 0; top: 0; z-index: 9999; width: 44px; height: 44px; pointer-events: none; border-radius: 6px; border: 1px solid #f2c464; background: rgba(20,14,6,0.85); box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
.qs-ghost img { width: 100%; height: 100%; object-fit: contain; }
#ammo-popup .ammo-option, #harpoon-popup .ammo-option, #consumables-popup .ammo-option { touch-action: none; }
@media (prefers-reduced-motion: reduce) { .qs-slot.pressed { animation: none; } }

/* Kleine Auswahl-Markierung auf dem Munitions-Slot (zeigt aktive Munitionsart) */
.slot-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fd8f2;
  border: 1px solid rgba(0,0,0,0.5);
  pointer-events: none;
}
.slot-badge.ammo-elite { background: #f2c464; }

/* Munitions-Auswahl-Popup ("kleine HUD") */
#ammo-popup {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  z-index: 6;
}
.ammo-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 6px 4px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--wood-light);
  border-radius: 6px;
  color: var(--parchment);
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}
.ammo-option:hover { background: rgba(255,255,255,0.12); }
.ammo-option.selected { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright); }
.ammo-option img { width: 28px; height: 28px; object-fit: contain; }
.ammo-stock {
  font-size: 9px;
  font-weight: normal;
  color: var(--parchment-dark);
}
.ammo-stock.empty { color: #d9534f; font-weight: bold; }

#ammo-popup-shop-link, #consumables-popup-shop-link {
  align-self: stretch;
  padding: 6px 4px;
  background: rgba(217,164,65,0.12);
  border: 1.5px dashed var(--gold);
  border-radius: 6px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
#ammo-popup-shop-link:hover, #consumables-popup-shop-link:hover { background: rgba(217,164,65,0.22); }

#harpoon-popup, #consumables-popup {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
  z-index: 6;
}
.consumable-icon { font-size: 26px; line-height: 1; }
.ammo-option[data-item] { width: 84px; } /* Verbrauchsgüter-Beschriftung ist länger als bei Munition, etwas breiter */

/* ===== Shop-Panel (siehe .game-shop weiter unten) ===== */

/* ===== Einstellungen (Tabs + Hotkeys) ===== */
#settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--wood-light);
  padding-bottom: 8px;
}
.settings-tab-btn, .leaderboard-tab-btn {
  flex: 1;
  padding: 7px 10px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--wood-light);
  border-radius: 6px;
  color: var(--parchment-dark);
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.settings-tab-btn:hover, .leaderboard-tab-btn:hover { background: rgba(255,255,255,0.1); }
.settings-tab-btn.active, .leaderboard-tab-btn.active {
  background: rgba(217,164,65,0.18);
  border-color: var(--gold);
  color: var(--gold-bright);
}

#settings-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.settings-tab-content.hidden { display: none; }
.settings-placeholder {
  font-size: 12px;
  color: var(--parchment-dark);
  font-style: italic;
  text-align: center;
  padding: 24px 0;
}

.hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hotkey-label { font-size: 12px; color: var(--parchment); }
.hotkey-key-btn {
  min-width: 84px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid var(--wood-light);
  border-radius: 6px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.hotkey-key-btn:hover { background: rgba(255,255,255,0.14); }
#ambient-volume-slider {
  width: 120px;
  accent-color: var(--gold);
}

.hotkey-key-btn.listening {
  border-color: var(--gold);
  color: var(--parchment);
  animation: hotkey-pulse 1s ease-in-out infinite;
}
@keyframes hotkey-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

#btn-hotkeys-reset {
  margin-top: 10px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.05);
  border: 1.5px dashed var(--wood-light);
  border-radius: 6px;
  color: var(--parchment-dark);
  font-size: 11px;
  cursor: pointer;
  width: 100%;
}
#btn-hotkeys-reset:hover { background: rgba(255,255,255,0.1); color: var(--parchment); }

/* ===== Bestenliste ===== */
#leaderboard-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--wood-light);
  padding-bottom: 8px;
}
#leaderboard-scope-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.leaderboard-scope-btn {
  flex: 1;
  padding: 5px 8px;
  background: transparent;
  border: 1px solid var(--wood-light);
  border-radius: 5px;
  color: var(--parchment-dark);
  font-size: 11px;
  cursor: pointer;
}
.leaderboard-scope-btn:hover { background: rgba(255,255,255,0.06); }
.leaderboard-scope-btn.active {
  background: rgba(217,164,65,0.15);
  border-color: var(--gold);
  color: var(--gold-bright);
  font-weight: bold;
}
#leaderboard-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.leaderboard-rank {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-weight: bold;
  color: var(--parchment-dark);
  font-size: 13px;
}
.leaderboard-row:nth-child(1) .leaderboard-rank { color: #f2d478; font-size: 16px; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #cfd6de; font-size: 15px; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #d19a5f; font-size: 14px; }
.leaderboard-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--parchment);
  font-size: 13px;
}
.leaderboard-value {
  flex-shrink: 0;
  color: var(--gold-bright);
  font-weight: bold;
  font-size: 13px;
}
.leaderboard-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--parchment-dark);
  font-size: 12px;
  font-style: italic;
}

#achievements-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.achievement-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.achievement-row .achievement-icon { font-size: 24px; width: 30px; text-align: center; flex-shrink: 0; }
.achievement-row .achievement-label { font-size: 13px; color: var(--parchment); }
.achievement-row.locked { opacity: 0.4; }
.achievement-row.locked .achievement-icon { filter: grayscale(1); }
.achievement-row.unlocked .achievement-icon { text-shadow: 0 0 10px rgba(242,196,100,0.7); }
.achievement-row.unlocked .achievement-label { color: var(--gold-bright); font-weight: bold; }
.achievement-row .achievement-desc { display: block; margin-top: 2px; font-size: 11px; font-weight: normal; color: var(--parchment); opacity: 0.7; }


/* ===== Shop-Panel: "Hafenmarkt"-Design =============================== */
/* Unter .game-shop skopiert, damit generische Klassennamen wie .badge/
   .locked/.price nicht mit anderswo im Spiel verwendeten Klassen gleichen
   Namens kollidieren. #shop-panel (Overlay-Hintergrund + Flex-Zentrierung)
   bleibt unverändert bestehen, .game-shop ersetzt darin nur die vorherige
   .admin-card als zentriertes Karten-Element. */
.game-shop {
  --shop-gold: #d7a43a;
  --shop-gold-light: #f1ce78;
  --shop-text: #e8d4ad;

  width: min(720px, calc(100vw - 32px));
  max-height: 82vh;
  display: flex;
  flex-direction: column;

  color: var(--shop-text);

  background:
    radial-gradient(circle at 50% 0%, rgba(124,77,24,.16), transparent 45%),
    linear-gradient(180deg, #21150d 0%, #130c08 100%);

  border: 2px solid var(--shop-gold);
  border-radius: 14px;

  box-shadow:
    0 0 0 2px #24160b,
    0 0 0 4px #684617,
    0 20px 60px rgba(0,0,0,.85),
    inset 0 0 35px rgba(0,0,0,.7);

  overflow: hidden;
  font-family: 'OP Icons', Georgia, "Times New Roman", serif;
}

.game-shop .shop-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 55px 16px 22px;
  background: linear-gradient(180deg, rgba(72,48,23,.85), rgba(25,16,10,.95));
  border-bottom: 1px solid #60421d;
  box-shadow: inset 0 -1px 0 rgba(218,166,61,.15);
}
.game-shop .shop-kicker {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  letter-spacing: 3px;
  color: #8f7448;
}
.game-shop .shop-header h2 {
  margin: 0;
  color: var(--shop-gold-light);
  font-size: 26px;
  text-shadow: 0 2px 2px #000, 0 0 12px rgba(218,164,58,.15);
}
.game-shop .shop-balance {
  margin-left: auto;
  min-width: 100px;
  padding: 7px 13px;
  text-align: right;
  background: #0d0b08;
  border: 1px solid #61471f;
  border-radius: 5px;
  box-shadow: inset 0 0 10px #000;
}
.game-shop .shop-balance span {
  display: block;
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #79684d;
}
.game-shop .shop-balance strong { color: #e8bc58; font-size: 17px; }

.game-shop .shop-close {
  position: absolute;
  right: 15px;
  top: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #cbb583;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 28px;
  cursor: pointer;
  transition: .2s;
}
.game-shop .shop-close:hover { color: #fff0bd; transform: scale(1.15); }

.game-shop .shop-tabs {
  display: flex;
  padding: 8px 12px;
  background: #0d0907;
  border-bottom: 1px solid #4a3319;
}
.game-shop .shop-tabs button {
  flex: 1;
  padding: 9px 5px;
  color: #877353;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: 'OP Icons', Georgia, serif;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}
.game-shop .shop-tabs button.active {
  color: #f0ca71;
  border-bottom-color: var(--shop-gold);
  background: linear-gradient(180deg, transparent, rgba(215,164,58,.07));
}

.game-shop .shop-content {
  flex: 1;
  min-height: 0;
  max-height: none;
  padding: 16px;
  overflow-y: auto;
}
.game-shop .shop-content::-webkit-scrollbar { width: 5px; }
.game-shop .shop-content::-webkit-scrollbar-thumb { background: #72501d; border-radius: 5px; }

.game-shop .featured-item {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 17px;
  padding: 15px;
  background: linear-gradient(135deg, #291c13, #17100c);
  border: 1px solid #74501f;
  border-radius: 8px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.65), 0 3px 10px rgba(0,0,0,.4);
}
.game-shop .featured-item::after {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(219,167,62,.08);
  border-radius: 5px;
}
.game-shop .featured-badge {
  position: absolute;
  top: -7px;
  left: 12px;
  padding: 3px 9px;
  color: #181008;
  background: linear-gradient(#efcc73, #a36f21);
  border: 1px solid #f2d482;
  border-radius: 2px;
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px #000;
}
.game-shop .ship-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 125px;
  background: radial-gradient(circle, #1b211f, #070807 70%);
  border: 1px solid #44301b;
  border-radius: 6px;
  overflow: hidden;
}
.game-shop .ship-image img {
  max-width: 115px;
  max-height: 115px;
  object-fit: contain;
  filter: drop-shadow(0 8px 5px rgba(0,0,0,.8));
}
.game-shop .ship-info h3 { margin: 2px 0 6px; color: #efc66c; font-size: 23px; }
.game-shop .rarity {
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #a5813f;
}
.game-shop .ship-info p {
  max-width: 390px;
  margin: 0 0 12px;
  color: #b9a17a;
  font-size: 14px;
  line-height: 1.35;
}
.game-shop .buy-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 9px 15px;
  color: #1c1208;
  background: linear-gradient(180deg, #e0b64d, #9c6c20);
  border: 1px solid #f2ce70;
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.55);
  font-family: 'OP Icons', Georgia, serif;
  font-weight: bold;
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.game-shop .buy-button:hover { transform: translateY(-1px); filter: brightness(1.12); }
.game-shop .buy-button:active { transform: translateY(1px); }
.game-shop .buy-button:disabled {
  opacity: .55;
  cursor: default;
  filter: grayscale(.4);
  transform: none;
}

.game-shop .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 19px 3px 9px;
  padding-bottom: 7px;
  color: #d9c39a;
  border-bottom: 1px solid #4a331a;
  font-size: 17px;
  font-weight: bold;
}
.game-shop .section-icon { margin-right: 5px; }
.soon-tag { font-size: 10px; color: var(--parchment-dark); font-weight: normal; font-style: italic; }
.game-shop .inventory {
  color: #806c4c;
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

.game-shop .shop-item-desc {
  margin: -4px 3px 8px;
  color: #8a7c60;
  font-size: 11px;
  line-height: 1.4;
}
.game-shop .item-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.game-shop .shop-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 12px;
  color: var(--shop-text);
  background: radial-gradient(circle at 50% 0%, rgba(123,81,29,.15), transparent 60%), #211710;
  border: 1px solid #67451f;
  border-radius: 7px;
  box-shadow: inset 0 0 15px rgba(0,0,0,.45);
  cursor: pointer;
  transition: border-color .2s, transform .2s, background .2s;
}
.game-shop .shop-item:hover { transform: translateY(-2px); border-color: var(--shop-gold); background-color: #2a1c12; }
.game-shop .shop-item .amount { color: #efc25c; font-size: 24px; font-weight: bold; }
.game-shop .item-name {
  margin: 3px 0 8px;
  color: #7f705a;
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.game-shop .price { color: #d9c28d; font-size: 14px; }
.game-shop .badge {
  position: absolute;
  top: -6px;
  right: 7px;
  padding: 2px 5px;
  color: #221608;
  background: var(--shop-gold);
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 7px;
  font-weight: bold;
  border-radius: 2px;
}
.game-shop .elite-item { background: radial-gradient(circle at 50% 20%, rgba(44,89,103,.17), transparent 60%), #181713; }
.game-shop .elite-item:hover { border-color: #7fa6a5; }
.game-shop .ice-item { background: radial-gradient(circle at 50% 20%, rgba(122,196,222,.22), transparent 60%), #151b1f; border-color: #3f6a78; }
.game-shop .ice-item:hover { border-color: #9fdcf0; }
.game-shop .ice-item .price { color: #a8e4f5; }
.game-shop .glow-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-bottom: 6px;
  border: 1px solid rgba(255,255,255,0.25);
}
.game-shop .shop-item.equipped { border-color: #7fe08a; box-shadow: inset 0 0 15px rgba(127,224,138,.25); }
.game-shop .shop-item.equipped .price { color: #7fe08a; }
.game-shop .glow-item { cursor: default; }
.game-shop .glow-equip-row { display: flex; gap: 5px; margin-top: 6px; width: 100%; }
.game-shop .glow-equip-btn {
  flex: 1;
  padding: 4px 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--shop-gold);
  border-radius: 4px;
  color: var(--shop-text);
  font-family: 'OP Icons', Arial, sans-serif;
  font-size: 9px;
  cursor: pointer;
}
.game-shop .glow-equip-btn:hover { background: rgba(255,255,255,0.14); }
.game-shop .glow-equip-btn.active { background: rgba(127,224,138,0.25); border-color: #7fe08a; color: #7fe08a; font-weight: bold; }
.game-shop .locked { opacity: .4; filter: grayscale(.6); cursor: not-allowed; }
.game-shop .shop-message {
  min-height: 16px;
  margin: 0;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--shop-gold-light);
  border-top: 1px solid #4a3319;
}

@media (max-width: 600px) {
  .game-shop { width: calc(100vw - 28px); max-height: 78vh; border-radius: 12px; }
  .game-shop .shop-header { padding: 14px 50px 12px 15px; }
  .game-shop .shop-header h2 { font-size: 21px; }
  .game-shop .shop-balance { min-width: 75px; }
  .game-shop .shop-content { padding: 12px; }
  .game-shop .featured-item { grid-template-columns: 105px 1fr; gap: 12px; padding: 12px; }
  .game-shop .ship-image { min-height: 110px; }
  .game-shop .ship-image img { max-width: 95px; max-height: 100px; }
  .game-shop .ship-info h3 { font-size: 19px; }
  .game-shop .ship-info p { font-size: 12px; }
  .game-shop .buy-button { padding: 7px 10px; gap: 10px; font-size: 12px; }
  .game-shop .shop-item { min-height: 83px; }
  .game-shop .shop-item .amount { font-size: 21px; }
}

/* ===== Verschiebbare Fenster: Chat/Quests/Crew lassen sich per Header
   frei im Spielfeld ziehen (siehe makeDraggable() in game.js). Buttons
   innerhalb eines Griffs bleiben normal klickbar. ===== */
.panel-drag-handle {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.panel-dragging {
  opacity: 0.92;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7) !important;
}
#chat-panel-handle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 7px 12px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid var(--hud-border-soft);
  border-radius: 8px 8px 0 0; /* passt zur Panel-Rundung, da #chat-panel kein overflow:hidden mehr hat */
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* ===== Chat: Panel, wird über den Chat-Button in der Sidebar geöffnet ===== */
#chat-panel {
  position: absolute;
  left: var(--sidebar-right);
  bottom: 10px;
  width: min(calc(100vw - var(--sidebar-right) - 18px), 320px);
  height: 220px;
  display: flex;
  flex-direction: column;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  /* Kein overflow:hidden hier - das Emoji-Popup und die Befehlsvorschläge
     klappen sich per "bottom: 100%" oberhalb des Panels auf und würden sonst
     abgeschnitten/unsichtbar. Die passenden Ecken werden stattdessen an
     Kopf- und Fußzeile selbst abgerundet (siehe unten). */
  z-index: 3;
}

#chat-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 14px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--hud-border-soft);
}
.chat-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--hud-text-muted);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 0 4px;
}
.chat-tab:hover { color: var(--parchment); }
.chat-tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}
.chat-tab.chat-tab-soon { opacity: 0.5; }

#chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.5;
  color: #d8e4ec;
  scrollbar-width: thin;
  scrollbar-color: var(--hud-border) transparent;
}
#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--hud-border); border-radius: 3px; }

.chat-line { margin-bottom: 3px; word-break: break-word; }
.chat-line .chat-author { color: var(--gold-bright); font-weight: bold; }
.chat-line .chat-author.chat-author-me { color: #7fe08a; }
.chat-line-whisper { font-style: italic; opacity: 0.9; }
.chat-line-whisper .chat-author-whisper { color: #c07fe0; font-weight: bold; font-style: normal; }
.chat-line-system { font-size: 10px; color: var(--parchment-dark); font-style: italic; margin-bottom: 3px; }

#chat-input-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-top: 1px solid var(--hud-border-soft);
  border-radius: 0 0 8px 8px; /* passt zur Panel-Rundung, da #chat-panel kein overflow:hidden mehr hat */
  background: var(--hud-bg);
}

#chat-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 11px;
  font-family: inherit;
}
#chat-input::placeholder { color: rgba(255,255,255,0.35); }

#chat-emoji-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
#chat-emoji-btn:hover { background: rgba(217,164,65,0.14); }

#chat-command-suggestions {
  position: absolute;
  left: 4%;
  bottom: 100%;
  margin-bottom: 6px;
  width: 92%;
  max-height: 160px;
  overflow-y: auto;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  z-index: 4;
}
#chat-command-suggestions.hidden { display: none; }
.chat-command-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: var(--parchment);
  font-size: 11px;
  font-family: inherit;
  padding: 6px 10px;
  cursor: pointer;
}
.chat-command-suggestion:last-child { border-bottom: none; }
.chat-command-suggestion:hover { background: rgba(255,255,255,0.1); }
.chat-command-suggestion .cmd-usage { color: var(--gold-bright); font-weight: bold; }
.chat-command-suggestion .cmd-desc { color: var(--parchment-dark); margin-left: 6px; }

#chat-emoji-popup {
  position: absolute;
  left: 4%;
  bottom: 100%;
  margin-bottom: 6px;
  width: 92%;
  max-height: 150px;
  overflow-y: auto;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  z-index: 4;
}
#chat-emoji-popup button {
  background: transparent;
  border: none;
  font-size: 17px;
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}
#chat-emoji-popup button:hover { background: rgba(255,255,255,0.12); }

#chat-send {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--gold-bright);
  font-size: 13px;
  cursor: pointer;
}
#chat-send:hover { background: rgba(217,164,65,0.14); }

/* --- Schwebende untere Leiste: HP-Balken, dünne EXP/ELP-Linien, Hotbar --- */
#bottom-bar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: calc(100vw - 16px);
  pointer-events: none; /* nur die Kinder fangen Klicks - das Meer darunter bleibt bedienbar */
}
#status-strip {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: auto;
}
#hp-row { display: flex; align-items: center; gap: 6px; }
#hp-bar-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 18px;
  background: rgba(6,12,20,0.7);
  border: 1px solid rgba(217,164,65,0.45);
  border-radius: 4px;
  overflow: hidden;
}
#hp-bar-channel { position: absolute; inset: 0; overflow: hidden; }
#hp-bar { height: 100%; width: 100%; background: linear-gradient(180deg, #6fce8a, var(--success)); transition: width 0.2s ease-out; }
#hp-bar.low-hp { filter: hue-rotate(-120deg) saturate(1.4) brightness(1.05); }
#hp-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  pointer-events: none;
}
/* EXP (gold) und ELP (cyan): schmale Balken mit Beschriftung und Zahl */
.thin-line-wrap { display: flex; align-items: center; gap: 6px; height: 12px; }
.thin-line-label {
  flex-shrink: 0;
  width: 26px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.4px;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
#elp-label { color: #9fe4f2; }
#exp-bar-wrap, #elp-bar-wrap {
  position: relative;
  flex: 1;
  height: 12px;
  background: rgba(6,12,20,0.7);
  border: 1px solid rgba(217,164,65,0.35);
  border-radius: 3px;
  overflow: hidden;
}
#exp-bar-channel, #elp-bar-channel { position: absolute; inset: 0; }
#exp-bar, #elp-bar { height: 100%; width: 0%; transition: width 0.2s ease-out; }
#exp-bar { background: linear-gradient(90deg, #b3801f, #e8b752); }
#elp-bar { background: linear-gradient(90deg, #2a8ea6, #7fdcf0); }
.thin-line-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  font-size: 9px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  white-space: nowrap;
  pointer-events: none;
}
#elp-block.hidden { display: none; }

/* Kampf-Bilanz (im Logbuch) */
#battle-readout { margin-left: auto; display: inline-flex; gap: 8px; font-weight: bold; color: var(--parchment); }
.logbook-range { display: flex; align-items: center; }

/* Ammo-/Consumable-Popups fangen Klicks selbst */
#ammo-popup, #consumables-popup, #harpoon-popup { pointer-events: auto; }

@media (max-width: 699px) {
  #bottom-bar { bottom: 6px; }
  /* Chat und Crew liegen auf dem Handy über der unteren Leiste */
  #chat-panel, #crew-panel { bottom: calc(var(--hud-bottom) + 6px); }
  #crew-invite-toast { bottom: calc(var(--hud-bottom) + 200px); }
}

/* ===== Admin-Panel / Designs-Panel (gleiches Overlay) ===== */
#admin-panel, #designs-panel, #shop-panel, #settings-panel, #leaderboard-panel, #achievements-panel {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.admin-card {
  width: min(92vw, 480px);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #241408 0%, #160b06 100%);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* Auf der Karte (game.html) gibt es keine Holzoptik mehr - Designs/
   Einstellungen/Crew nutzen dasselbe flache Marineblau/Gold-Theme wie
   der Rest des Karten-HUDs. Der Hafenmarkt & Co. auf der Hauptseite
   behalten ihren bisherigen Stil (Basisregel oben). */
#designs-panel .admin-card,
#settings-panel .admin-card,
#crew-panel .admin-card {
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
}

#session-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.65);
}
#session-summary-card { width: min(360px, calc(100vw - 32px)); }
.session-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: var(--parchment);
}
.session-summary-row strong { color: var(--gold-bright); }
#btn-session-summary-close { width: 100%; margin-top: 14px; }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.admin-header h2 { margin: 0; font-size: 18px; color: var(--gold-bright); }
.admin-header button {
  background: none;
  border: none;
  color: var(--parchment-dark);
  font-size: 18px;
  cursor: pointer;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 4px;
}
.admin-tab {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--parchment-dark);
  font-family: inherit;
  font-weight: bold;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}
.admin-tab.active { background: var(--gold); color: #1b0f0a; }

.admin-list { overflow-y: auto; flex: 1; }
.admin-list.hidden { display: none; }

.btn-secondary {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--parchment-dark);
  background: rgba(255,255,255,0.06);
  color: var(--parchment);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); }

.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
}
.admin-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-row-name .badge-admin { color: var(--gold-bright); margin-left: 4px; }
.admin-row-name .badge-banned { color: var(--danger); margin-left: 4px; }
.admin-row-stat { font-size: 11px; color: var(--parchment-dark); white-space: nowrap; }
.admin-row button {
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}
.btn-kick { background: var(--danger); color: #fff; }
.btn-ban { background: var(--danger); color: #fff; }
.btn-unban { background: var(--success); color: #fff; }
.admin-empty { padding: 16px; text-align: center; color: var(--parchment-dark); font-size: 13px; }

.admin-message {
  min-height: 16px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--gold-bright);
}

/* ===== Designs-Panel ===== */

/* Tab-Leiste oben (Ships/Designs/Elite) - schlichte Unterstrich-Tabs statt
   gefüllter Pillen, damit die Kartenbilder darunter der eigentliche
   Blickfang bleiben. Umschalten passiert rein per CSS-Klasse
   (.designs-tab-panel.hidden), siehe switchDesignsTab() in game.js - alle
   drei Grids sind unabhängig vom aktiven Tab immer schon gerendert. */
.designs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hud-border-soft);
}
.designs-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 7px 4px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--parchment-dark);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.designs-tab:hover { color: var(--parchment); }
.designs-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.designs-tab-panel.hidden { display: none; }

#designs-designs-locked {
  margin-bottom: 10px;
  padding: 12px;
  background: rgba(0,0,0,0.25);
  border: 1.5px dashed var(--wood-light);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--parchment-dark);
}
#designs-designs-locked.hidden { display: none; }

#designs-progress {
  margin-bottom: 12px;
}
#designs-points-label {
  font-size: 13px;
  font-weight: bold;
  color: var(--parchment);
  margin-bottom: 5px;
}
#designs-points-value {
  color: var(--gold-bright);
}
#designs-progress-bar-wrap {
  height: 10px;
  background: #1a0f08;
  border: 1px solid var(--wood-light);
  border-radius: 5px;
  overflow: hidden;
}
#designs-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d9a441, #f2c464);
  transition: width 0.3s ease-out;
}
#designs-progress-next {
  margin-top: 4px;
  font-size: 11px;
  color: var(--parchment-dark);
}

#designs-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* wichtig in Flex-Spalten, sonst wird nicht wirklich gescrollt, sondern der Inhalt wächst */
}

/* Ein Grid-Layout für alle drei Tabs (ersetzt die früheren separaten
   #designs-*-grid-Regeln - die IDs bleiben nur noch fürs Ansprechen aus
   game.js erhalten, das Aussehen kommt jetzt einheitlich von hier). */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.design-grid:empty { display: none; }

#designs-grid { margin-top: 14px; }

/* Kleine, zurückhaltende Zwischen-Überschriften innerhalb des Ships-Tabs
   (Starter Ship vs. Elite Ship/Ironbond) - die Haupt-Gliederung übernehmen
   jetzt die Tabs oben, diese Labels sind nur noch ein leiser Hinweis. */
#designs-starter-header,
#designs-gate-header {
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hud-text-muted);
}
#designs-starter-header { margin-top: 0; }
#designs-gate-header {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--wood-light);
}
#designs-gate-grid:empty { display: none; }
#designs-gate-locked {
  margin-top: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.25);
  border: 1.5px dashed var(--wood-light);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--parchment-dark);
}
#designs-gate-locked.hidden { display: none; }
#designs-gate-shop-link {
  display: block;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(217,164,65,0.15);
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-bright);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
#designs-gate-shop-link:hover { background: rgba(217,164,65,0.28); }

#designs-progress.hidden, #designs-grid.hidden { display: none; }

/* --- Design-Karten: Bild groß, dunkle Namensleiste darunter in
   Großbuchstaben, goldener Rahmen + "SELECTED"-Plakette oben links bei der
   aktiven Karte, Anker-Symbol übers Bild (nicht über die Namensleiste) bei
   noch gesperrten Karten - angelehnt ans vom Nutzer gezeigte Referenzbild. */
.design-card {
  position: relative;
  border: 2px solid var(--wood-light);
  border-radius: 8px;
  overflow: hidden;
  background: #0e0803;
  cursor: pointer;
  text-align: center;
}
.design-card.selected {
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 2px rgba(242,196,100,0.5), 0 0 14px rgba(242,196,100,0.35);
}
.design-card.locked { cursor: default; }
.design-card-image { position: relative; }
.design-card-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  filter: brightness(1);
}
.design-card.locked .design-card-image img { filter: grayscale(0.85) brightness(0.35); }
.design-card-label {
  padding: 6px 5px;
  background: rgba(0,0,0,0.35);
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--parchment);
}
.design-card.selected .design-card-label { color: var(--gold-bright); }
.design-card-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.6);
  font-size: 26px;
}
.design-card-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  background: var(--gold);
  color: #1b0f0a;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ */
/* Kessel & Bonusmap                                                   */
/* ------------------------------------------------------------------ */
.nav-item { position: relative; }
.nav-badge {
  position: absolute;
  z-index: 2;
  transition: transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
  top: 0;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #8e5bd6;
  color: #fff;
  font: 700 10px/16px 'OP Icons', 'Trebuchet MS', sans-serif;
  text-align: center;
  box-shadow: 0 0 6px rgba(142,91,214,0.8);
}
#cauldron-panel {
  position: absolute;
  left: calc(var(--sidebar-right) + 8px);
  top: 60px;
  width: min(calc(100vw - var(--sidebar-right) - 24px), 320px);
  z-index: 6;
}
#cauldron-panel .admin-card {
  width: 100%;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
#cauldron-panel .admin-header h2 { font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
.cauldron-section {
  border: 1px solid var(--hud-border-soft);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.12));
}
.cauldron-section-bonus { border-color: rgba(142,91,214,0.55); background: linear-gradient(180deg, rgba(142,91,214,0.10), rgba(0,0,0,0.15)); }
.cauldron-row { display: flex; align-items: center; gap: 10px; }
.cauldron-icon { font-size: 24px; width: 30px; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.cauldron-text { flex: 1; min-width: 0; }
.cauldron-title { font-size: 13px; font-weight: 700; color: var(--gold-bright); }
.cauldron-sub { font-size: 10.5px; color: var(--hud-text-muted); line-height: 1.3; }
.cauldron-count { font: 700 18px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--parchment); min-width: 32px; text-align: right; }
.cauldron-actions { display: flex; gap: 6px; margin-top: 8px; }
.cauldron-btn {
  flex: 1;
  background: var(--gold);
  color: #1a1408;
  border: none;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cauldron-btn:hover:not(:disabled) { filter: brightness(1.12); }
.cauldron-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cauldron-btn-danger { width: 100%; margin-top: 8px; background: linear-gradient(180deg, #9a64e0, #6b3fae); color: #fff; }
.cauldron-progress { height: 6px; margin-top: 8px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
#cauldron-parts-bar { height: 100%; width: 0; background: linear-gradient(90deg, #d9a441, #f2c464); transition: width 0.3s ease; }
#cauldron-pot { position: relative; height: 0; overflow: visible; }
#cauldron-pot.brewing span {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d7b8ff, #8e5bd6);
  animation: cauldron-bubble 0.9s ease-out forwards;
}
#cauldron-pot.brewing span:nth-child(2) { margin-left: -24px; animation-delay: 0.12s; }
#cauldron-pot.brewing span:nth-child(3) { margin-left: 18px; animation-delay: 0.24s; }
@keyframes cauldron-bubble {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(-46px) scale(1.2); opacity: 0; }
}
#cauldron-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
#cauldron-results li {
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid var(--hud-border-soft);
  background: rgba(255,255,255,0.05);
  color: var(--parchment);
  opacity: 0;
  animation: cauldron-pop 0.35s ease-out forwards;
}
#cauldron-results li.rare { border-color: #b98cf5; color: #e2cffc; box-shadow: 0 0 8px rgba(142,91,214,0.6); }
#cauldron-results li.epic { border-color: var(--gold-bright); color: var(--gold-bright); box-shadow: 0 0 10px rgba(242,196,100,0.7); }
@keyframes cauldron-pop {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  100% { opacity: 1; transform: none; }
}
#cauldron-loot-details { margin-top: 8px; font-size: 11px; color: var(--hud-text-muted); }
#cauldron-loot-details summary { cursor: pointer; }
#cauldron-loot { list-style: none; margin: 6px 0 0; padding: 0; }
#cauldron-loot li { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
#cauldron-premium { margin: 0; color: var(--gold-bright); }
#bonus-leave-btn {
  position: absolute;
  right: 46px;
  top: 150px;
  z-index: 5;
  background: rgba(10,20,32,0.9);
  color: var(--parchment);
  border: 1.5px solid #8e5bd6;
  border-radius: 6px;
  padding: 7px 12px;
  font: 700 12px 'OP Icons', Georgia, serif;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(142,91,214,0.4);
}
#bonus-leave-btn:hover { filter: brightness(1.2); }

#bonus-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  animation: cauldron-pop 0.3s ease-out;
}
#bonus-summary-card {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--hud-bg);
  border: 1.5px solid #8e5bd6;
  box-shadow: 0 0 30px rgba(142,91,214,0.45);
}
.bonus-summary-intro { margin: 0 0 8px; font-size: 12px; color: var(--hud-text-muted); }
.bonus-summary-section { margin: 12px 0 2px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #b98cf5; }
.bonus-summary-drop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 8px;
  border-radius: 6px;
  border: 1px dashed var(--hud-border-soft);
  font-size: 12px;
  color: var(--hud-text-muted);
}
.bonus-summary-drop img { width: 64px; height: 64px; border-radius: 4px; filter: grayscale(0.8) brightness(0.6); }
.bonus-summary-drop.won { border: 1.5px solid var(--gold-bright); color: var(--parchment); box-shadow: 0 0 14px rgba(242,196,100,0.5); }
.bonus-summary-drop.won img { filter: none; }
.bonus-summary-drop.won strong { color: var(--gold-bright); }
#btn-bonus-summary-close { width: 100%; margin-top: 14px; }

/* --- Fragmente je Bonusmap (0.16) --- */
.frag-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.frag-row { --accent: #8e5bd6; display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 5px; border-left: 3px solid var(--accent); background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 14%, transparent), rgba(0,0,0,0.1) 75%); }
.frag-row.theme-storm { --accent: #7fa7e0; }
.frag-row.theme-sunken { --accent: #3fc1b8; }
.frag-row.theme-inferno { --accent: #e0663a; }
.frag-row.locked { opacity: 0.5; filter: saturate(0.4); }
.frag-icon { font-size: 20px; width: 24px; text-align: center; }
.frag-main { flex: 1; min-width: 0; }
.frag-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 11.5px; color: var(--parchment); }
.frag-head strong { flex: 1 0 100%; min-width: 0; color: var(--gold-bright); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frag-count, .frag-maps { font-variant-numeric: tabular-nums; white-space: nowrap; }
.frag-row .cauldron-progress { margin-top: 4px; height: 4px; }
.frag-bar { height: 100%; background: var(--accent); transition: width 0.3s ease; }
.frag-hint { margin: 8px 0 0; font-size: 10.5px; color: var(--hud-text-muted); }
.frag-lock { font-size: 10px; color: var(--hud-text-muted); margin-top: 3px; }
.frag-actions { display: flex; flex-direction: column; gap: 3px; }
.frag-actions .cauldron-btn { flex: none; padding: 3px 8px; font-size: 11px; min-width: 52px; }
/* --- Bonusmaps (0.15): Kartenwahl, Crew-Einladung, Wochenrennen --- */
#bonus-picker {
  position: fixed; inset: 0; z-index: 190;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
}
#bonus-picker-card {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  animation: cauldron-pop 0.25s ease-out;
}
#bonus-picker .admin-header h2 { font-size: 15px; letter-spacing: 0.5px; }
.bonus-picker-loading { color: var(--hud-text-muted); font-size: 12px; }
.bonus-picker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--parchment); margin-bottom: 8px; }
.bonus-picker-top b { color: var(--gold-bright); font-size: 14px; }
.bonus-abandon { background: none; border: 1px solid rgba(179,55,44,0.7); color: #e89a8f; border-radius: 4px; font-size: 11px; padding: 3px 8px; cursor: pointer; }
.bonus-abandon:hover { background: rgba(179,55,44,0.2); }
.bonus-map-card .bonus-abandon { display: block; margin: 6px auto 0; }
.bonus-curse { border: 1px solid rgba(186,80,60,0.6); background: linear-gradient(90deg, rgba(120,24,16,0.35), rgba(0,0,0,0.1)); border-radius: 6px; padding: 7px 10px; margin-bottom: 10px; }
.bonus-curse-title { font-size: 12.5px; font-weight: 700; color: #f0a48f; }
.bonus-curse-desc { font-size: 11px; color: var(--parchment-dark); margin-top: 2px; }
.bonus-curse-desc b { color: var(--gold-bright); }
.bonus-picker-tabs { display: flex; gap: 4px; margin-bottom: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 3px; }
.bonus-picker-tabs button { flex: 1; background: none; border: none; color: var(--parchment-dark); font-size: 12px; padding: 6px; border-radius: 6px; cursor: pointer; }
.bonus-picker-tabs button.active { background: rgba(242,196,100,0.16); color: var(--gold-bright); font-weight: 700; }
.bonus-map-list { display: flex; flex-direction: column; gap: 8px; }
.bonus-map-card {
  --accent: #8e5bd6;
  border: 1px solid var(--hud-border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 9px 10px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(0,0,0,0.12) 70%);
}
.bonus-map-card.theme-storm { --accent: #7fa7e0; }
.bonus-map-card.theme-sunken { --accent: #3fc1b8; }
.bonus-map-card.theme-inferno { --accent: #e0663a; }
.bonus-map-card.locked { opacity: 0.55; filter: saturate(0.4); }
.bonus-map-card.running { box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent); }
.bonus-map-head { display: flex; align-items: center; gap: 10px; }
.bonus-map-icon { font-size: 26px; width: 32px; text-align: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.bonus-map-name { display: flex; flex-direction: column; min-width: 0; }
.bonus-map-name strong { font-size: 14px; color: var(--gold-bright); }
.bonus-map-name span { font-size: 10.5px; color: var(--hud-text-muted); }
.bonus-map-name { flex: 1; }
.bonus-map-stock { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 3px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); background: rgba(0,0,0,0.3); line-height: 1.1; }
.bonus-map-stock b { font: 700 20px Georgia, serif; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.bonus-map-stock span { font-size: 9.5px; color: var(--parchment); white-space: nowrap; }
.bonus-map-stock em { font-style: normal; font-size: 9.5px; color: var(--hud-text-muted); margin-top: 1px; white-space: nowrap; }
.bonus-map-stock.empty b { color: var(--hud-text-muted); }
.bonus-map-desc { margin: 6px 0 4px; font-size: 11.5px; line-height: 1.35; color: var(--parchment-dark); }
.bonus-map-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--parchment); margin-bottom: 7px; }
.bonus-map-card .cauldron-btn { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff 15%), color-mix(in srgb, var(--accent) 70%, #000 30%)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.bonus-picker-hint { font-size: 10.5px; color: var(--hud-text-muted); margin: 10px 0 0; line-height: 1.4; }
.bonus-race { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bonus-race-map { border: 1px solid var(--hud-border-soft); border-radius: 6px; padding: 7px 10px; background: rgba(0,0,0,0.15); }
.bonus-race-title { font-size: 12.5px; font-weight: 700; color: var(--gold-bright); margin-bottom: 4px; }
.bonus-race-map ol { list-style: none; margin: 0; padding: 0; }
.bonus-race-map li { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; font-size: 11.5px; color: var(--parchment); padding: 2px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.bonus-race-map li:first-child { border-top: none; }
.bonus-race-map li b { color: var(--parchment-dark); }
.bonus-race-map li:first-child b { color: var(--gold-bright); }
.bonus-race-map li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bonus-race-map li em { font-style: normal; font-variant-numeric: tabular-nums; color: #cfe3ff; }
.bonus-race-map li.empty { display: block; color: var(--hud-text-muted); font-style: italic; }
.bonus-race-mine { margin-top: 4px; font-size: 11px; color: #b8e6c7; }
#bonus-invite {
  position: fixed; left: 50%; top: 92px; transform: translateX(-50%);
  z-index: 195; width: min(380px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: 8px;
  background: var(--hud-bg); border: 1.5px solid var(--gold);
  box-shadow: 0 0 22px rgba(242,196,100,0.35), 0 8px 20px rgba(0,0,0,0.6);
  animation: cauldron-pop 0.3s ease-out;
}
.bonus-invite-title { font-size: 13px; color: var(--parchment); }
.bonus-invite-title b { color: var(--gold-bright); }
.bonus-invite-sub { font-size: 11px; color: var(--hud-text-muted); margin: 3px 0 8px; }
.bonus-invite-actions { display: flex; align-items: center; gap: 6px; }
.bonus-invite-actions .bonus-decline { background: rgba(255,255,255,0.1); color: var(--parchment); }
.bonus-invite-time { min-width: 34px; text-align: right; font: 700 13px Georgia, serif; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #bonus-picker-card, #bonus-invite { animation: none; } }

/* ------------------------------------------------------------------ */
/* Seelenportal / Raidmap                                              */
/* ------------------------------------------------------------------ */
#souls-display { color: #9ff3e0; }
#doubloons-display { color: #ffcf7a; pointer-events: auto; }
#doubloons-display.hidden { display: none; }
#raid-panel {
  position: absolute;
  left: 50%;
  top: 90px;
  transform: translateX(-50%);
  width: min(calc(100vw - 32px), 330px);
  z-index: 6;
}
#raid-panel .admin-card {
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(20,48,50,0.96), var(--hud-bg));
  border: 1.5px solid #3fd1b5;
  box-shadow: 0 0 26px rgba(63,209,181,0.35);
}
#raid-panel .admin-header h2 { font-size: 15px; color: #9ff3e0; text-transform: uppercase; letter-spacing: 0.5px; }
.raid-intro { margin: 0 0 10px; font-size: 11.5px; line-height: 1.4; color: var(--hud-text-muted); }
.raid-intro strong { color: #9ff3e0; }
.raid-row { display: flex; justify-content: space-between; padding: 5px 2px; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 12.5px; color: var(--parchment); }
.raid-row strong { color: #9ff3e0; }
.raid-status { margin: 10px 0 4px; font-size: 11.5px; color: var(--parchment); }
.raid-progress { margin-top: 5px; }
#raid-status-bar { height: 100%; width: 0; background: linear-gradient(90deg, #2fa58f, #9ff3e0); transition: width 0.3s ease; }
#raid-status-bar.boss { background: linear-gradient(90deg, #c0392b, #ff8a70); }
#raid-action-btn { background: linear-gradient(180deg, #3fd1b5, #1f8f7a); color: #06231e; }
#raid-hint { margin: 6px 0 0; }

/* =========================================================================
   Logbuch (30-Tage-Rückblick)
   ========================================================================= */
#logbook-panel {
  position: absolute;
  left: calc(var(--sidebar-right) + 8px);
  top: 60px;
  width: min(calc(100vw - var(--sidebar-right) - 24px), 380px);
  z-index: 6;
}
#logbook-panel .admin-card {
  width: 100%;
  max-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  background: var(--hud-bg);
  border: 1.5px solid var(--hud-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
#logbook-panel .admin-header { gap: 6px; margin-bottom: 6px; }
#logbook-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#logbook-refresh { font-size: 16px !important; transition: transform .4s ease; }
#logbook-refresh.spinning { animation: logbook-spin .8s linear infinite; }
@keyframes logbook-spin { to { transform: rotate(360deg); } }
#logbook-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#logbook-body > *:not(.logbook-list), #logbook-panel .admin-header { flex-shrink: 0; }
#btn-logbook-close { font-size: 15px !important; }
.logbook-range { font-size: 10.5px; color: var(--hud-text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }

.logbook-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 10px;
}
.logbook-stat {
  border: 1px solid var(--hud-border-soft);
  border-radius: 6px;
  padding: 6px 4px 5px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15));
  min-width: 0;
}
.logbook-stat-value { font: 700 13px/1.15 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--parchment); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logbook-stat-label { font-size: 9.5px; color: var(--hud-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logbook-stat-icon { font-size: 12px; margin-right: 2px; }
.logbook-stat.primary .logbook-stat-value { color: var(--gold-bright); font-size: 14px; }

.logbook-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.logbook-chip {
  border: 1px solid var(--hud-border-soft);
  background: rgba(255,255,255,0.03);
  color: var(--parchment-dark);
  font: 600 10.5px 'OP Icons', 'Trebuchet MS', sans-serif;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
}
.logbook-chip:hover { color: var(--parchment); border-color: var(--hud-border); }
.logbook-chip.active { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.logbook-chart-head { margin-bottom: 6px; }

.logbook-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 54px;
  padding: 0 1px;
  border-bottom: 1px solid var(--hud-border-soft);
}
.logbook-bar {
  flex: 1;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--gold-bright), #9c6a22);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity .15s ease, filter .15s ease;
}
.logbook-bar.empty { background: rgba(255,255,255,0.08); opacity: 1; }
.logbook-bar.today { box-shadow: 0 0 6px rgba(242,196,100,0.7); }
.logbook-bar:hover, .logbook-bar.hover { opacity: 1; filter: brightness(1.25); }
.logbook-chart-tip { font-size: 10.5px; color: var(--hud-text-muted); min-height: 15px; margin: 3px 0 8px; text-align: center; }
.logbook-chart-tip b { color: var(--parchment); }

#logbook-filters { margin-bottom: 6px; }
.logbook-list { overflow-y: auto; min-height: 80px; flex: 1; padding-right: 2px; overscroll-behavior: contain; }
.logbook-day { margin-top: 8px; }
.logbook-day-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 2px 4px;
  background: var(--hud-bg);
  border-bottom: 1px solid var(--hud-border-soft);
}
.logbook-day-title { font: 700 12px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--gold-bright); }
.logbook-day-meta { font-size: 10px; color: var(--hud-text-muted); text-align: right; }
.logbook-day-stats { display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 10.5px; color: var(--parchment-dark); padding: 5px 2px 3px; }
.logbook-entry { display: flex; gap: 8px; align-items: flex-start; padding: 5px 2px; border-bottom: 1px dashed rgba(255,255,255,0.06); font-size: 11.5px; line-height: 1.35; color: var(--parchment); }
.logbook-entry:last-child { border-bottom: none; }
.logbook-time { flex: 0 0 34px; color: var(--hud-text-muted); font: 10.5px/1.6 'OP Icons', 'Trebuchet MS', sans-serif; font-variant-numeric: tabular-nums; }
.logbook-icon { flex: 0 0 18px; text-align: center; }
.logbook-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.logbook-text b { color: var(--gold-bright); font-weight: 700; }
.logbook-sub { display: block; color: var(--hud-text-muted); font-size: 10.5px; margin-top: 1px; }
.logbook-entry.good .logbook-text b { color: #8fe0a8; }
.logbook-entry.bad .logbook-icon { filter: saturate(0.6); }
.logbook-entry.bad .logbook-text { color: #e7b3a9; }
.logbook-entry.epic { background: linear-gradient(90deg, rgba(242,196,100,0.12), transparent 70%); border-radius: 4px; }
.logbook-empty { font-size: 11px; color: var(--hud-text-muted); padding: 10px 2px; text-align: center; }

@media (max-width: 520px) {
  #logbook-panel { top: 50px; }
  #logbook-panel .admin-card { max-height: calc(100vh - 170px); padding: 10px; }
  .logbook-stat-value { font-size: 12px; }
}

/* Händler der Hafenstadt: ein Panel, je nach Händler andere Abschnitte */
#cauldron-panel[data-mode="alchemist"] .sec-cartographer,
#cauldron-panel[data-mode="cartographer"] .sec-alchemist { display: none; }
.cauldron-far-hint {
  margin: 0 0 8px;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px dashed rgba(242,196,100,0.55);
  background: rgba(242,196,100,0.08);
  color: var(--gold-bright);
  font-size: 11.5px;
}

/* Munition: 6 Sorten - auf schmalen Bildschirmen 3×2 statt einer Reihe */
#ammo-popup { flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(436px, calc(100vw - 24px)); }
#ammo-popup .ammo-option img, #harpoon-popup .ammo-option img { width: 34px; height: 34px; border-radius: 5px; }
#harpoon-popup { flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(320px, calc(100vw - 24px)); }
#harpoon-popup .ammo-option { width: 68px; }
#ammo-slot-icon { border-radius: 6px; }
@media (max-width: 560px) {
  #ammo-popup { display: grid; grid-template-columns: repeat(3, 64px); }
  #ammo-popup.hidden { display: none; }
}

/* ===== Werft: Kanonen-Tab ===== */
#designs-tab-cannons { padding: 2px 2px 8px; }
.cannon-cap { border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 10px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)); }
.cannon-cap-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--parchment-dark); text-transform: uppercase; letter-spacing: 0.6px; }
.cannon-cap-top strong { font: 700 18px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--gold-bright); letter-spacing: 0; }
.cannon-cap-bar { height: 7px; margin: 7px 0 5px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.cannon-cap-bar div { height: 100%; background: linear-gradient(90deg, #b8862e, #f2c464); transition: width .25s ease; }
.cannon-cap-sub { font-size: 11px; color: var(--hud-text-muted); }
/* Balance v2: Deckausbau */
.deck-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 4px; font-size: 12px; color: var(--hud-text); }
.deck-buy { display: inline-flex; flex-direction: column; align-items: center; padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(217,164,65,0.6); background: rgba(217,164,65,0.12); color: var(--gold-bright, #f2c464); font: inherit; font-size: 12px; cursor: pointer; }
.deck-buy small { font-size: 11px; opacity: 0.85; }
.deck-buy:disabled { opacity: 0.45; cursor: not-allowed; }
.consumable-left { font-style: normal; font-size: 11px; color: var(--gold-bright, #f2c464); margin-left: 4px; }
.cannon-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 8px 0 10px; }
.cannon-stats div { border: 1px solid var(--hud-border-soft); border-radius: 6px; padding: 5px 2px; text-align: center; background: rgba(0,0,0,0.2); }
.cannon-stats span { display: block; font-size: 9.5px; color: var(--hud-text-muted); white-space: nowrap; }
.cannon-stats strong { font: 700 13px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--parchment); }
#cannon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.cannon-card { border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 9px 10px; background: linear-gradient(180deg, rgba(217,164,65,0.07), rgba(0,0,0,0.25)); }
.cannon-card.elite { border-color: rgba(142,91,214,0.6); background: linear-gradient(180deg, rgba(142,91,214,0.12), rgba(0,0,0,0.28)); }
.cannon-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cannon-head img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }
.cannon-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cannon-name strong { font-size: 13px; color: var(--gold-bright); }
.cannon-card.elite .cannon-name strong { color: #d7b8ff; }
.cannon-tier { font-size: 9.5px; letter-spacing: 0.8px; color: var(--hud-text-muted); }
.cannon-owned { font: 700 18px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--parchment); text-align: right; line-height: 1; }
.cannon-owned small { display: block; font: 400 9.5px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--hud-text-muted); margin-top: 2px; }
.cannon-bar { display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; gap: 6px; font-size: 10.5px; color: var(--parchment-dark); margin: 2px 0; }
.cannon-bar div { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.cannon-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9c6a22, #f2c464); }
.cannon-card.elite .cannon-bar i { background: linear-gradient(90deg, #6b3fae, #c39bff); }
.cannon-bar b { text-align: right; font-weight: 600; color: var(--parchment); }
.cannon-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cannon-install, .cannon-buys { display: flex; gap: 4px; }
.cannon-step, .cannon-buy { flex: 1; border: 1px solid var(--hud-border-soft); background: rgba(255,255,255,0.05); color: var(--parchment); border-radius: 5px; padding: 5px 2px; font: 700 11.5px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; }
.cannon-buy { background: var(--gold); color: #1a1408; border-color: var(--gold); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cannon-card.elite .cannon-buy { background: linear-gradient(180deg, #9a64e0, #6b3fae); color: #fff; border-color: #9a64e0; }
.cannon-buy small { font: 600 9.5px 'OP Icons', 'Trebuchet MS', sans-serif; opacity: 0.85; }
.cannon-step:hover:not(:disabled), .cannon-buy:hover:not(:disabled) { filter: brightness(1.15); }
.cannon-step:disabled, .cannon-buy:disabled { opacity: 0.38; cursor: not-allowed; }
.cannon-note { font-size: 10.5px; color: var(--hud-text-muted); line-height: 1.45; margin: 10px 2px 0; }
@media (max-width: 520px) {
  .cannon-stats { grid-template-columns: repeat(3, 1fr); }
  #cannon-list { grid-template-columns: 1fr; }
}

/* Event-Munition + Event-Anzeige */
.ammo-option.ammo-event { border-color: rgba(242,150,60,0.75); background: linear-gradient(180deg, rgba(242,150,60,0.14), rgba(0,0,0,0.2)); }
#event-display { color: #ffc27a; white-space: nowrap; }

/* Aktions-Items (Icons aus dem Paket) */
.consumable-img { width: 34px; height: 34px; border-radius: 5px; }
.hotbar-slot img[src*="assets/items/"] { border-radius: 6px; }

/* Versenkt-Dialog */
#respawn-panel { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(40,6,6,0.45), rgba(0,0,0,0.7)); }
#respawn-panel.hidden { display: none; }
.respawn-card { width: min(92vw, 380px); padding: 20px 18px 14px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, #16100c, #0a0a0e); border: 1.5px solid #7a3a2e; box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 30px rgba(160,40,30,0.25); animation: respawn-in .35s ease-out; }
@keyframes respawn-in { from { transform: translateY(12px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.respawn-skull { font-size: 34px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.respawn-card h2 { margin: 4px 0 2px; font: 700 20px 'OP Icons', Georgia, serif; color: #e8a08e; letter-spacing: 0.5px; }
.respawn-killer { margin: 0 0 14px; color: var(--parchment-dark); font-size: 13px; }
.respawn-options { display: flex; flex-direction: column; gap: 8px; }
.respawn-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--hud-border); background: rgba(255,255,255,0.05); color: var(--parchment); cursor: pointer; }
.respawn-btn strong { font: 700 14px 'OP Icons', Georgia, serif; }
.respawn-btn span { font-size: 11.5px; color: var(--hud-text-muted); }
.respawn-btn:hover:not(:disabled) { filter: brightness(1.18); }
.respawn-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.respawn-btn-paid { background: linear-gradient(180deg, #9a64e0, #6b3fae); border-color: #9a64e0; color: #fff; }
.respawn-btn-paid span { color: #eadcff; }
.respawn-btn-harbor { background: linear-gradient(180deg, rgba(217,164,65,0.25), rgba(217,164,65,0.08)); border-color: var(--gold); }
.respawn-timer { height: 4px; margin-top: 14px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
#respawn-timer-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #7a3a2e, #e8a08e); transition: width .2s linear; }
.respawn-timer-text { margin: 6px 0 0; font-size: 11px; color: var(--hud-text-muted); }

/* Premium-Design: Perlenpreis auf der gesperrten Karte */
.design-card-price {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(142,91,214,0.85);
  border: 1px solid #d7b8ff;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(142,91,214,0.6);
}
.design-card.locked[data-premium] .design-card-image img { filter: saturate(0.7) brightness(0.7); }

/* Munitions-Slot: Auswahlpunkt links unten, Bestand rechts unten */
.hotbar-slot[data-ability="ammo"] .slot-badge { right: auto; left: 2px; }
.stock-badge.empty { color: #d9534f; }

/* ===== Seekarte ===== */
#seachart-panel {
  position: absolute;
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
  width: min(calc(100vw - 20px), 600px);
  z-index: 6;
}
#seachart-panel .admin-card { padding: 12px 14px 10px; width: 100%; box-sizing: border-box; }
#seachart-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#seachart-grid { display: grid; gap: 6px; margin: 4px 0 2px; }
.sc-stage-label {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  padding-right: 6px; font-size: 10px; font-weight: bold; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.sc-stage-label small { font-weight: normal; color: var(--hud-text-muted); text-transform: none; letter-spacing: 0; }
.sc-tile {
  position: relative;
  min-height: 54px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: bold; color: var(--parchment);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  cursor: default;
}
.sc-tile.sc-empty { border-style: dashed; border-color: rgba(255,255,255,0.06); background: transparent; }
.sc-tile.sc-pve { background: linear-gradient(180deg, rgba(60,130,210,0.55), rgba(30,80,150,0.55)); border-color: rgba(120,180,255,0.5); }
.sc-tile.sc-pvp { background: linear-gradient(180deg, rgba(70,160,90,0.55), rgba(30,100,60,0.55)); border-color: rgba(120,220,140,0.5); }
.sc-tile.sc-harbor { background: linear-gradient(180deg, rgba(217,164,65,0.45), rgba(120,80,20,0.5)); border-color: rgba(242,196,100,0.7); }
.sc-tile.sc-locked { filter: saturate(0.35) brightness(0.6); }
.sc-tile.sc-here { box-shadow: 0 0 0 2px var(--gold-bright), 0 0 14px rgba(242,196,100,0.7); }
.sc-tile .sc-sub { font-size: 9px; font-weight: normal; color: rgba(236,220,184,0.8); }
.sc-tile .sc-name { max-width: 100%; padding: 0 4px; font-size: 10px; line-height: 1.15; font-weight: 600; font-style: italic; color: #fff3dc; text-align: center; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.sc-tile .sc-name i { font-style: normal; color: #ff9a86; }
/* Reviername beim Betreten einer Kampfkarte */
#region-banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 6px); z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; text-align: center; }
#region-banner b { font: 700 34px/1.1 'Cinzel', Georgia, serif; color: #f3d48a; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9); }
#region-banner span { font: 14px Georgia, serif; color: rgba(236,220,184,0.9); text-shadow: 0 1px 6px rgba(0,0,0,0.9); padding-top: 4px; border-top: 1px solid rgba(243,212,138,0.55); }
#region-banner.show { animation: region-in 3.6s ease forwards; }
@keyframes region-in { 0% { opacity: 0; transform: translate(-50%, 6px); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0); } }
@media (max-width: 600px) { #region-banner b { font-size: 24px; } #region-banner span { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { #region-banner.show { animation: region-fade 3.6s linear forwards; } @keyframes region-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } }
.sc-tile .sc-you { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 9px; padding: 1px 6px; border-radius: 8px; background: var(--gold-bright); color: #2a1a0c; white-space: nowrap; }
.sc-tile .sc-lock { position: absolute; top: 3px; right: 5px; font-size: 10px; }
.sc-tile .sc-guild { position: absolute; top: 3px; left: 4px; display: flex; align-items: center; gap: 3px; font-size: 9px; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.25); }
.sc-tile .sc-guild i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.seachart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 10px; color: var(--parchment-dark); }
.seachart-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sc-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.25); }
.sc-swatch.sc-pve { background: rgba(60,130,210,0.8); }
.sc-swatch.sc-pvp { background: rgba(70,160,90,0.8); }
.sc-swatch.sc-harbor { background: rgba(217,164,65,0.8); }
.sc-swatch.sc-here { background: transparent; box-shadow: 0 0 0 2px var(--gold-bright); }
.sc-swatch.sc-locked { background: rgba(80,80,80,0.8); }
#minimap-footer { position: relative; }
#minimap-chart-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
}
#minimap-chart-btn:hover { transform: translateY(-50%) scale(1.15); }
@media (max-width: 600px) {
  .sc-tile { min-height: 48px; font-size: 11px; }
  .sc-tile .sc-sub { font-size: 8px; }
  .sc-stage-label { font-size: 9px; }
  #seachart-panel { top: 50px; }
}

/* ===== Werft: Talente ===== */
#designs-tab-talents { padding: 2px 2px 8px; }
#talent-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)); margin-bottom: 10px; }
#talent-summary strong { font: 700 18px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--gold-bright); }
#talent-summary .talent-sub { font-size: 11px; color: var(--hud-text-muted); }
#talent-reset { padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(142,91,214,0.7); background: rgba(142,91,214,0.2); color: #e9dcff; font: 700 11px 'OP Icons', Georgia, serif; cursor: pointer; }
#talent-reset:disabled { opacity: 0.45; cursor: default; }
#talent-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.talent-branch { border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 8px 9px; background: linear-gradient(180deg, rgba(217,164,65,0.06), rgba(0,0,0,0.25)); }
.talent-branch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 12px; font-weight: bold; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.6px; }
.talent-branch-head span { font-size: 10px; font-weight: normal; color: var(--hud-text-muted); text-transform: none; letter-spacing: 0; }
.talent-row { display: grid; grid-template-columns: 24px 1fr auto 28px; align-items: center; gap: 6px; padding: 5px 4px; border-radius: 6px; }
.talent-row + .talent-row { border-top: 1px solid rgba(255,255,255,0.05); }
.talent-row.locked { opacity: 0.5; }
.talent-icon { font-size: 16px; text-align: center; }
.talent-text { min-width: 0; display: flex; flex-direction: column; }
.talent-text strong { font-size: 12px; color: var(--parchment); }
.talent-text span { font-size: 10px; color: var(--hud-text-muted); }
.talent-rank { font: 700 12px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--gold-bright); white-space: nowrap; }
.talent-rank small { font-weight: normal; color: var(--hud-text-muted); }
.talent-plus { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 15px/1 'OP Icons', Georgia, serif; cursor: pointer; }
.talent-plus:disabled { opacity: 0.3; cursor: default; }
.talent-plus:hover:not(:disabled) { background: rgba(217,164,65,0.3); }

/* ===== Gilde ===== */
#guild-panel {
  position: absolute;
  left: calc(var(--sidebar-right) + 8px);
  top: 60px;
  width: min(calc(100vw - var(--sidebar-right) - 24px), 380px);
  z-index: 6;
}
#guild-panel .admin-card { padding: 12px 14px; width: 100%; box-sizing: border-box; max-height: calc(100vh - 24px); overflow-y: auto; }
#guild-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#guild-panel .quests-placeholder { font-size: 11px; }
.guild-form { display: flex; gap: 6px; margin: 6px 0; }
.guild-form input, #guild-invite-input {
  min-width: 0; flex: 1; background: rgba(0,0,0,0.35); border: 1px solid var(--hud-border); border-radius: 4px; color: var(--hud-text); padding: 5px 8px; font-size: 12px;
}
#guild-tag-input { flex: 0 0 64px; text-transform: uppercase; text-align: center; }
.guild-color-row { display: flex; gap: 6px; margin: 4px 0 8px; }
.guild-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.guild-color.selected { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6); }
#guild-create-btn, #guild-invite-btn, #guild-accept-btn, .guild-row-btns button {
  background: var(--gold); color: #1a1408; border: none; border-radius: 4px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
#guild-create-btn { width: 100%; }
.guild-btn-muted { background: rgba(255,255,255,0.1) !important; color: var(--parchment) !important; border: 1px solid var(--hud-border) !important; }
.guild-btn-danger { background: rgba(217,83,79,0.25) !important; color: #f0a9a6 !important; border: 1px solid rgba(217,83,79,0.7) !important; }
.guild-row-btns { display: flex; gap: 6px; margin-top: 8px; }
#guild-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#guild-head .guild-tag { padding: 2px 7px; border-radius: 5px; font-weight: bold; font-size: 12px; color: #111; }
#guild-head strong { font-size: 14px; color: var(--parchment); }
#guild-head span { margin-left: auto; font-size: 11px; color: var(--hud-text-muted); }
#guild-member-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#guild-member-list li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hud-text); background: rgba(255,255,255,0.04); border: 1px solid var(--hud-border); border-radius: 4px; padding: 4px 8px; }
#guild-member-list li .dot { width: 7px; height: 7px; border-radius: 50%; background: #666; }
#guild-member-list li.online .dot { background: #5bc26a; box-shadow: 0 0 5px #5bc26a; }
#guild-member-list li .rank { font-size: 10px; color: var(--gold-bright); text-transform: uppercase; letter-spacing: 0.4px; }
#guild-member-list li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#guild-member-list li .acts { display: flex; gap: 3px; }
#guild-member-list li .acts button { padding: 1px 5px; font-size: 10px; border-radius: 3px; border: 1px solid var(--hud-border); background: rgba(255,255,255,0.06); color: var(--parchment); cursor: pointer; }
#guild-invite-row { display: flex; gap: 6px; margin-bottom: 4px; }
.chat-line-guild .chat-author { color: #9fd3ff; }
#chat-messages[data-channel="global"] .chat-line-guild { display: none; }
#chat-messages[data-channel="guild"] .chat-line:not(.chat-line-guild):not(.chat-line-system) { display: none; }
#chat-messages[data-channel="guild"] .chat-line-whisper { display: none; }
#chat-messages[data-channel="guild"] .chat-line-tavern { display: none; }
#chat-messages[data-channel="global"] .chat-line-tavern { display: none; }
#chat-messages[data-channel="tavern"] .chat-line:not(.chat-line-tavern):not(.chat-line-system) { display: none; }
#chat-messages[data-channel="tavern"] .chat-line-whisper { display: none; }
.chat-line-tavern .chat-author { color: #e8a04a; }

/* Kanonen-Aufwertung */
.cannon-upgrade { margin-top: 2px; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(217,164,65,0.6); background: linear-gradient(180deg, rgba(217,164,65,0.22), rgba(217,164,65,0.08)); color: var(--gold-bright); font: 700 11px 'OP Icons', Georgia, serif; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cannon-upgrade small { font-weight: normal; color: var(--parchment); }
.cannon-upgrade:disabled { opacity: 0.45; cursor: default; }
.cannon-upgrade:hover:not(:disabled) { filter: brightness(1.15); }
.cannon-lvl { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(217,164,65,0.25); color: var(--gold-bright); margin-left: 4px; }

/* --- Täglicher Login-Bonus --- */
#loginbonus-panel {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  width: min(calc(100vw - 20px), 520px);
  z-index: 6;
}
#loginbonus-panel .admin-card { padding: 12px 14px 12px; }
#loginbonus-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#loginbonus-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 8px; }
.lb-day {
  position: relative;
  min-height: 92px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px;
  text-align: center;
}
.lb-day .lb-dayno { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hud-text-muted); font-weight: bold; }
.lb-day .lb-icon { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.lb-day .lb-reward { font-size: 10.5px; font-weight: bold; color: var(--parchment); line-height: 1.2; }
.lb-day.done { opacity: 0.55; border-color: rgba(120,200,120,0.5); }
.lb-day.done .lb-check { position: absolute; top: 3px; right: 5px; color: #8de08d; font-size: 11px; font-weight: bold; }
.lb-day.today {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(242,196,100,0.22), rgba(242,196,100,0.06));
  box-shadow: 0 0 14px rgba(242,196,100,0.35);
}
.lb-day.today .lb-dayno { color: var(--gold-bright); }
.lb-day:nth-child(7) { border-color: rgba(190,140,255,0.45); }
.lb-info { font-size: 12px; color: var(--hud-text-muted); text-align: center; }
@media (max-width: 560px) {
  #loginbonus-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Werft: Schiffsausbau --- */
#upgrade-list { display: flex; flex-direction: column; gap: 6px; }
.upgrade-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--hud-border-soft); border-radius: 8px; background: linear-gradient(180deg, rgba(217,164,65,0.06), rgba(0,0,0,0.25)); }
.upgrade-icon { font-size: 22px; text-align: center; }
.upgrade-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upgrade-text strong { font-size: 12.5px; color: var(--parchment); }
.upgrade-text .upgrade-lvl { font-weight: normal; color: var(--gold-bright); font-size: 11px; margin-left: 4px; }
.upgrade-text > span { font-size: 10.5px; color: var(--hud-text-muted); }
.upgrade-pips { display: flex; gap: 3px; margin-top: 3px; }
.upgrade-pips i { width: 14px; height: 6px; border-radius: 2px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
.upgrade-pips i.on { background: linear-gradient(180deg, #ffe08a, #c9962e); border-color: #e8c266; box-shadow: 0 0 5px rgba(242,196,100,0.5); }
.upgrade-buy { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 11px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; white-space: nowrap; }
.upgrade-buy:disabled { opacity: 0.4; cursor: default; }
.upgrade-buy:hover:not(:disabled) { background: rgba(217,164,65,0.3); }

/* --- Werft: Crew --- */
#crew-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)); margin-bottom: 10px; }
#crew-summary strong { font: 700 18px 'OP Icons', 'Trebuchet MS', sans-serif; color: var(--gold-bright); }
.crew-slots { display: flex; gap: 5px; }
.crew-slot { width: 30px; height: 30px; border-radius: 6px; border: 1px dashed rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 17px; color: rgba(255,255,255,0.3); }
.crew-slot.filled { border-style: solid; background: rgba(255,255,255,0.06); color: inherit; }
.crew-slot.filled.rare { border-color: #6fb4ff; }
.crew-slot.filled.epic { border-color: #c48cff; box-shadow: 0 0 6px rgba(196,140,255,0.5); }
#crew-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 7px; }
.crew-card { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; gap: 4px 9px; padding: 8px 9px; border: 1px solid var(--hud-border-soft); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25)); }
.crew-card.rare { border-color: rgba(111,180,255,0.45); }
.crew-card.epic { border-color: rgba(196,140,255,0.55); background: linear-gradient(180deg, rgba(196,140,255,0.08), rgba(0,0,0,0.3)); }
.crew-card.active { box-shadow: inset 0 0 0 1px rgba(242,196,100,0.5), 0 0 10px rgba(242,196,100,0.15); }
.crew-card:not(.owned) { opacity: 0.85; }
.crew-portrait { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.12), rgba(0,0,0,0.5)); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.crew-card.epic .crew-portrait { border-color: #c48cff; }
.crew-card.rare .crew-portrait { border-color: #6fb4ff; }
.crew-text { min-width: 0; display: flex; flex-direction: column; }
.crew-text strong { font-size: 12px; color: var(--parchment); }
.crew-text strong em { font-style: normal; font-weight: normal; color: var(--hud-text-muted); font-size: 10.5px; margin-left: 4px; }
.crew-text > span { font-size: 10.5px; color: var(--hud-text-muted); }
.crew-text .crew-rarity { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.5px; color: #bfc7d2; }
.crew-card.rare .crew-rarity { color: #6fb4ff; }
.crew-card.epic .crew-rarity { color: #c48cff; }
.crew-text b { color: var(--gold-bright); }
.crew-hire, .crew-toggle { grid-column: 2; justify-self: start; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 11px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; }
.crew-hire:disabled, .crew-toggle:disabled { opacity: 0.4; cursor: default; }
.crew-toggle.off { border-color: #8de08d; color: #8de08d; background: rgba(120,220,120,0.12); }
.crew-hire:hover:not(:disabled), .crew-toggle:hover:not(:disabled) { filter: brightness(1.2); }
/* Piraten (Entern gegen Spieler) im Crew-Tab */
.pirate-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; padding-bottom: 9px; margin-bottom: 2px; border-bottom: 1px solid var(--hud-border-soft); }
.pirate-box .talent-sub { display: block; margin-top: 2px; }
.pirate-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pirate-buy { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 11px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; }
.pirate-buy:disabled { opacity: 0.4; cursor: default; }
.pirate-buy:hover:not(:disabled) { filter: brightness(1.2); }

/* --- Schatzkarten --- */
#treasure-panel { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); width: min(calc(100vw - 20px), 420px); z-index: 6; }
#treasure-panel .admin-card { padding: 12px 14px 10px; }
#treasure-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#treasure-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; max-height: 50vh; overflow-y: auto; }
.treasure-empty { font-size: 12px; color: var(--hud-text-muted); text-align: center; padding: 14px 0; }
.treasure-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--hud-border-soft); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25)); }
.treasure-row.here { border-color: rgba(242,196,100,0.6); background: linear-gradient(180deg, rgba(242,196,100,0.1), rgba(0,0,0,0.3)); }
.treasure-icon { font-size: 20px; text-align: center; }
.treasure-text { display: flex; flex-direction: column; min-width: 0; }
.treasure-text strong { font-size: 12px; color: var(--parchment); }
.treasure-text span { font-size: 10.5px; color: var(--hud-text-muted); }
.treasure-go { padding: 5px 9px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 11px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; white-space: nowrap; }
.treasure-go:hover { background: rgba(217,164,65,0.3); }
.nav-badge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #d8342a; color: #fff; font: 700 10px/16px 'OP Icons', 'Trebuchet MS', sans-serif; text-align: center; }

/* --- Weltboss --- */
#worldboss-display { cursor: pointer; border-color: rgba(255,90,70,0.7); background: linear-gradient(180deg, rgba(120,20,15,0.75), rgba(40,8,6,0.75)); color: #ffd9d2; font-family: 'OP Icons', Georgia, serif; animation: wb-pulse 2.4s ease-in-out infinite; }
#worldboss-display b { color: #ff8a70; }
@keyframes wb-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,90,70,0); } 50% { box-shadow: 0 0 12px rgba(255,90,70,0.6); } }
#seachart-boss { font-size: 11.5px; color: #ffd9d2; border: 1px solid rgba(255,90,70,0.5); background: rgba(120,20,15,0.3); border-radius: 6px; padding: 6px 9px; margin-bottom: 8px; text-align: center; }
#seachart-boss b { color: #ff8a70; }
.sc-tile.sc-boss { border-color: #ff6a50; box-shadow: 0 0 12px rgba(255,90,70,0.5); }
.sc-bossbadge { position: absolute; top: 3px; right: 4px; font-size: 9px; font-weight: bold; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 4px; letter-spacing: 0.3px; }

/* Kurze Bildschirme (Handy quer): Fenster nicht über den Rand wachsen lassen, Inhalt scrollt */
#seachart-body, #loginbonus-grid, #treasure-list, #guild-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#seachart-body { max-height: calc(100vh - 150px); }
#loginbonus-grid { max-height: calc(100vh - 190px); }
@media (max-height: 520px) {
  #seachart-panel, #loginbonus-panel, #treasure-panel, #guild-panel { top: 8px; }
  #seachart-panel .admin-card, #loginbonus-panel .admin-card, #treasure-panel .admin-card { max-height: calc(100vh - 16px); overflow: hidden; }
  #loginbonus-grid { grid-template-columns: repeat(7, 1fr); }
  .lb-day { min-height: 70px; }
  .lb-day .lb-icon { font-size: 17px; }
}

/* --- Pets --- */
#pets-panel { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); width: min(calc(100vw - 20px), 460px); z-index: 6; }
#pets-panel .admin-card { padding: 12px 14px 10px; max-height: calc(100vh - 90px); }
#pets-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#pets-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 9px 12px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)); margin-bottom: 10px; }
#pets-summary strong { font-size: 14px; color: var(--gold-bright); }
#pets-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 260px); }
.pet-card { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--hud-border-soft); border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25)); }
.pet-card.active { border-color: rgba(242,196,100,0.7); box-shadow: 0 0 10px rgba(242,196,100,0.2); }
.pet-card:not(.owned) { opacity: 0.85; }
.pet-portrait { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(0,0,0,0.5)); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.pet-card.active .pet-portrait { border-color: var(--gold-bright); }
.pet-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.pet-text strong { font-size: 12.5px; color: var(--parchment); }
.pet-text strong em { font-style: normal; font-weight: normal; color: var(--hud-text-muted); font-size: 10.5px; margin-left: 4px; }
.pet-text .pet-lvl { font-style: normal; font-size: 10px; color: var(--gold-bright); margin-left: 6px; }
.pet-text > span { font-size: 10.5px; color: var(--hud-text-muted); }
.pet-text b { color: var(--gold-bright); }
.pet-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.pet-btn { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--gold); background: rgba(217,164,65,0.15); color: var(--gold-bright); font: 700 11px 'OP Icons', 'Trebuchet MS', sans-serif; cursor: pointer; }
.pet-btn.ghost { border-color: rgba(255,255,255,0.3); color: var(--parchment); background: rgba(255,255,255,0.05); }
.pet-btn:disabled { opacity: 0.4; cursor: default; }
.pet-btn:hover:not(:disabled) { filter: brightness(1.2); }

/* --- Glücksrad --- */
#wheel-panel { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); width: min(calc(100vw - 20px), 380px); z-index: 6; }
#wheel-panel .admin-card { padding: 12px 14px 12px; align-items: center; }
#wheel-panel .admin-header { width: 100%; }
#wheel-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#wheel-wrap { position: relative; width: min(320px, calc(100vw - 60px)); aspect-ratio: 1; margin: 4px auto 6px; }
#wheel-canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }
#wheel-pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 26px; color: #ff6a50; text-shadow: 0 2px 4px rgba(0,0,0,0.8); z-index: 2; line-height: 1; }
#wheel-result { min-height: 22px; font-size: 14px; color: var(--parchment); text-align: center; margin: 2px 0 6px; }
#wheel-result b { color: var(--gold-bright); }
#wheel-actions { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
#btn-wheel-spin { padding: 8px 22px; border-radius: 8px; border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(242,196,100,0.35), rgba(217,164,65,0.15)); color: var(--gold-bright); font: 700 13px 'OP Icons', Georgia, serif; cursor: pointer; letter-spacing: 0.4px; }
#btn-wheel-spin:disabled { opacity: 0.45; cursor: default; }
#btn-wheel-spin:hover:not(:disabled) { filter: brightness(1.2); }

/* --- Taverne --- */
#tavern-panel { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); width: min(calc(100vw - 20px), 560px); z-index: 6; }
#tavern-panel .admin-card { padding: 12px 14px 10px; max-height: calc(100vh - 70px); background: linear-gradient(170deg, #2a1a0e 0%, #160c06 100%); }
#tavern-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#tavern-online { font-size: 11px; color: var(--hud-text-muted); margin-right: 8px; }
#tavern-tabs { margin-bottom: 8px; }
#tavern-body { overflow-y: auto; max-height: calc(100vh - 170px); }
.tavern-tab { background: transparent; border: none; color: var(--hud-text-muted); font: bold 11px 'OP Icons', Georgia, serif; padding: 6px 7px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
#tavern-tabs { flex-wrap: nowrap; overflow-x: auto; }
.tavern-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.tavern-betrow { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 8px 0; }
.tavern-btn { padding: 7px 14px; border-radius: 7px; border: 1px solid var(--gold); background: linear-gradient(180deg, rgba(242,196,100,0.32), rgba(217,164,65,0.12)); color: var(--gold-bright); font: 700 12px 'OP Icons', Georgia, serif; cursor: pointer; }
.tavern-btn.ghost { border-color: rgba(255,255,255,0.3); color: var(--parchment); background: rgba(255,255,255,0.05); }
.tavern-btn.small { padding: 4px 9px; font-size: 11px; }
.tavern-btn:disabled { opacity: 0.4; cursor: default; }
.tavern-btn:hover:not(:disabled) { filter: brightness(1.2); }
/* Blackjack */
.bj-table { border-radius: 12px; border: 2px solid #5a3a1a; background: radial-gradient(ellipse at 50% 30%, #1f5a3a, #0f3322 70%); padding: 12px 12px 10px; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
.bj-row { display: flex; align-items: center; gap: 10px; min-height: 76px; }
.bj-label { width: 92px; font-size: 11px; color: #d9e8dc; text-transform: uppercase; letter-spacing: 0.5px; }
.bj-label b { display: block; font-size: 16px; color: #fff; }
.bj-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.bj-card { width: 46px; height: 64px; border-radius: 6px; background: #f7f1e3; color: #1a1a1a; font: 700 15px 'OP Icons', Georgia, serif; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 5px; box-shadow: 0 3px 6px rgba(0,0,0,0.5); animation: bj-deal 0.35s ease-out; }
.bj-card.red { color: #b4231f; }
.bj-card.back { background: repeating-linear-gradient(45deg, #3a2a6a 0 6px, #2a1c50 6px 12px); border: 2px solid #f7f1e3; }
.bj-card span:last-child { align-self: flex-end; transform: rotate(180deg); }
@keyframes bj-deal { from { opacity: 0; transform: translateY(-18px) rotate(-6deg); } to { opacity: 1; transform: none; } }
.bj-result { text-align: center; font: 700 15px 'OP Icons', Georgia, serif; color: var(--gold-bright); min-height: 20px; margin: 4px 0; text-shadow: 0 1px 3px #000; }
.bj-result.lose { color: #ff8a70; } .bj-result.win { color: #8de08d; }
#bj-actions { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
/* Slot */
#slot-machine { border-radius: 14px; border: 3px solid #b8860b; background: linear-gradient(180deg, #4a1d1d, #2a0f0f); padding: 14px; box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 18px rgba(184,134,11,0.25); }
#slot-reels { display: flex; gap: 8px; justify-content: center; }
.slot-reel { width: 84px; height: 96px; border-radius: 8px; background: linear-gradient(180deg, #fff6dc, #e8d9b0 50%, #cdbb8d); display: flex; align-items: center; justify-content: center; font-size: 44px; box-shadow: inset 0 6px 12px rgba(0,0,0,0.25), inset 0 -6px 12px rgba(0,0,0,0.25); overflow: hidden; }
.slot-reel.spinning { animation: slot-blur 0.08s linear infinite; }
@keyframes slot-blur { 0% { transform: translateY(-6px); filter: blur(1px); } 100% { transform: translateY(6px); filter: blur(1px); } }
.slot-reel.hit { box-shadow: 0 0 0 3px #ffd36b, 0 0 18px #ffd36b; }
#slot-result { text-align: center; font: 700 15px 'OP Icons', Georgia, serif; color: var(--gold-bright); min-height: 22px; margin-top: 10px; text-shadow: 0 1px 3px #000; }
#slot-result.jackpot { color: #ff6a50; font-size: 18px; animation: wb-pulse 0.6s ease-in-out infinite; }
.slot-paytable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 14px; font-size: 10.5px; color: var(--hud-text-muted); margin-top: 6px; }
.slot-paytable span b { color: var(--gold-bright); float: right; }
/* Würfel */
#dice-lobby { display: flex; flex-direction: column; gap: 6px; }
.dice-create { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 11px; color: var(--hud-text-muted); }
.dice-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--hud-border-soft); border-radius: 8px; background: rgba(255,255,255,0.03); font-size: 12px; color: var(--parchment); }
.dice-row small { color: var(--hud-text-muted); display: block; font-size: 10.5px; }
.dice-empty { font-size: 12px; color: var(--hud-text-muted); text-align: center; padding: 10px; }
#dice-table { border-radius: 12px; border: 2px solid #5a3a1a; background: radial-gradient(ellipse at 50% 30%, #4a2d14, #22120a 75%); padding: 10px 12px; box-shadow: inset 0 0 40px rgba(0,0,0,0.5); }
.dt-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--parchment); margin-bottom: 6px; }
.dt-head b { color: var(--gold-bright); }
.dt-player { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,0.07); font-size: 12px; color: var(--parchment); }
.dt-player.me { color: var(--gold-bright); }
.dt-player.winner { background: rgba(242,196,100,0.12); border-radius: 6px; }
.dt-player .dt-name small { display: block; color: var(--hud-text-muted); font-size: 10px; }
.dt-dice { display: flex; gap: 5px; }
.die { width: 32px; height: 32px; border-radius: 7px; background: linear-gradient(145deg, #fffaf0, #e6dcc3); box-shadow: 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 3px rgba(0,0,0,0.15); user-select: none; display: flex; align-items: center; justify-content: center; }
.die .pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 24px; height: 24px; }
.die .pips b { width: 6px; height: 6px; border-radius: 50%; }
.die .pips b.on { background: #1a1a1a; box-shadow: inset 0 1px 1px rgba(255,255,255,0.3); }
.die.hidden-die { background: #4a3a2a; color: transparent; }
.die.keep { outline: 2px solid var(--gold-bright); box-shadow: 0 0 10px rgba(242,196,100,0.6); }
.die.pick { cursor: pointer; }
.dt-actions { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.dt-result { text-align: center; font: 700 14px 'OP Icons', Georgia, serif; color: var(--gold-bright); margin-top: 6px; }
.tavern-curtabs { display: inline-flex; gap: 3px; margin-right: 8px; border: 1px solid var(--hud-border-soft); border-radius: 6px; padding: 2px; }
.tavern-cur { background: transparent; border: none; border-radius: 4px; color: var(--hud-text-muted); font: bold 11px 'OP Icons', Georgia, serif; padding: 4px 8px; cursor: pointer; }
.tavern-cur.active { background: rgba(217,164,65,0.25); color: var(--gold-bright); }
.tavern-betrow { align-items: center; }

/* --- Taverne: Liar's Dice, Higher/Lower, Turnier, Bestenliste, Münzwurf --- */
.dice-kinds { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.tavern-kind { background: rgba(255,255,255,0.04); border: 1px solid var(--hud-border-soft); border-radius: 6px; color: var(--hud-text-muted); font: bold 11px 'OP Icons', Georgia, serif; padding: 5px 9px; cursor: pointer; }
.tavern-kind.active { border-color: var(--gold); color: var(--gold-bright); background: rgba(217,164,65,0.18); }
.die.small { width: 24px; height: 24px; border-radius: 5px; }
.die.small .pips { width: 18px; height: 18px; gap: 1px; } .die.small .pips b { width: 4px; height: 4px; }
.liar-bid { font-size: 12px; color: var(--parchment); text-align: center; margin: 4px 0; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.liar-bid b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-bright); }
.liar-bid b .pips { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 16px; height: 16px; background: #f7f1e3; border-radius: 3px; padding: 1px; vertical-align: middle; }
.liar-bid b .pips b { width: 3px; height: 3px; border-radius: 50%; } .liar-bid b .pips b.on { background: #1a1a1a; }
.liar-event { font-size: 11.5px; color: #ffd9b0; text-align: center; margin: 3px 0 6px; font-style: italic; }
.liar-out { font-size: 11px; color: #ff8a70; }
.dt-player.turn { background: rgba(242,196,100,0.08); border-radius: 6px; }
.liar-controls { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: center; }
.liar-controls > b { color: var(--gold-bright); font-size: 14px; min-width: 34px; text-align: center; }
.tavern-btn.danger { border-color: #ff6a50; color: #ff8a70; background: rgba(255,90,70,0.15); }
.war-row { display: flex; justify-content: center; gap: 36px; padding: 10px 0; }
.war-seat { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.war-seat .bj-card { width: 64px; height: 90px; font-size: 20px; }
.war-seat.winner .bj-card { box-shadow: 0 0 0 3px var(--gold-bright), 0 0 16px rgba(242,196,100,0.7); }
.war-name { font-size: 12px; color: var(--parchment); } .war-seat.me .war-name { color: var(--gold-bright); }
.war-won { font-size: 12px; font-weight: bold; color: #8de08d; }
.tourney-head h3 { margin: 0 0 6px; font-size: 14px; color: var(--gold-bright); }
.tourney-head p { font-size: 12px; color: var(--parchment); margin: 4px 0; line-height: 1.4; }
.bracket { display: flex; gap: 10px; overflow-x: auto; padding: 6px 0; }
.bracket-round { display: flex; flex-direction: column; gap: 6px; min-width: 150px; justify-content: space-around; }
.bracket-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--hud-text-muted); text-align: center; }
.bracket-match { border: 1px solid var(--hud-border-soft); border-radius: 6px; padding: 4px 7px; font-size: 11px; color: var(--parchment); display: flex; flex-direction: column; gap: 1px; background: rgba(255,255,255,0.03); }
.bracket-match.live { border-color: #ff8a70; }
.bracket-match .vs { font-size: 9px; color: var(--hud-text-muted); text-align: center; }
.bracket-match .won { color: var(--gold-bright); font-weight: bold; }
.lb-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lb-card { border: 1px solid var(--hud-border-soft); border-radius: 8px; padding: 7px 9px; background: rgba(255,255,255,0.03); }
.lb-title { font-size: 11px; font-weight: bold; color: var(--gold-bright); margin-bottom: 4px; }
.lb-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--parchment); padding: 2px 0; }
.lb-row b { color: #ffd36b; } .lb-row.muted { color: var(--hud-text-muted); }
#flip-popup { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: min(calc(100vw - 20px), 360px); z-index: 7; }
#flip-popup .admin-card { padding: 14px; }
#flip-text { font-size: 13px; color: var(--parchment); text-align: center; margin-bottom: 8px; }
.bot-tag { font-size: 11px; opacity: 0.8; }

/* --- Sprache --- */
.lang-btn.active { background: rgba(217,164,65,0.3); color: var(--gold-bright); border-color: var(--gold); }
.auth-lang { text-align: center; margin: 6px 0 2px; font-size: 12px; color: var(--hud-text-muted, #bba); }
.auth-lang .lang-btn { background: none; border: none; color: inherit; cursor: pointer; font: inherit; padding: 2px 4px; }
.auth-lang .lang-btn.active { color: #f2c464; font-weight: bold; text-decoration: underline; }

/* ===== Tutorial-Karte (neue Spieler) ===== */
#tutorial-card {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 60;
  width: min(380px, calc(100vw - 24px));
  padding: 14px 16px 12px;
  background: rgba(8, 18, 30, 0.9);
  border: 1px solid rgba(217, 164, 65, 0.6);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--parchment);
  animation: tut-in .35s ease-out;
  pointer-events: auto;
}
#tutorial-card.hidden { display: none; }
@keyframes tut-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tut-kicker { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--parchment-dark); }
.tut-title { margin: 4px 0 4px; font-size: 18px; font-weight: bold; color: var(--gold-bright); }
.tut-text { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.tut-progress { display: flex; gap: 5px; margin-bottom: 8px; }
.tut-progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.tut-progress i.done { background: var(--gold); }
.tut-progress i.now { background: linear-gradient(90deg, var(--gold-bright), rgba(242,196,100,0.3)); animation: tut-pulse-bar 1.4s ease-in-out infinite; }
@keyframes tut-pulse-bar { 50% { opacity: 0.5; } }
.tut-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tut-skip { background: none; border: none; color: var(--parchment-dark); font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
.tut-btn { padding: 9px 18px; border: none; border-radius: 9px; font: inherit; font-weight: bold; color: #120b04; background: linear-gradient(180deg, #f6d27c, #d9a441); cursor: pointer; box-shadow: 0 6px 18px rgba(217,164,65,0.35); }
.tut-btn:disabled { opacity: 0.6; }
.tut-reward { margin: 4px 0 12px; padding: 8px 10px; border-radius: 8px; background: rgba(217,164,65,0.12); color: var(--gold-bright); font-weight: bold; font-size: 13px; text-align: center; }
.tut-highlight { position: relative; z-index: 5; animation: tut-glow 1.2s ease-in-out infinite; border-radius: 10px; }
@keyframes tut-glow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(242,196,100,0.9), 0 0 12px 2px rgba(242,196,100,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(242,196,100,0.4), 0 0 26px 8px rgba(242,196,100,0.35); }
}
@media (prefers-reduced-motion: reduce) { #tutorial-card, .tut-highlight, .tut-progress i.now { animation: none; } }
.settings-legal { font-size: 11px; }
.settings-legal a { color: var(--gold-bright); }

/* Karte verlassen (Logout auf der Karte) */
#leave-map-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 8, 14, 0.82);
  color: var(--gold-bright); font-size: 20px; letter-spacing: 1px;
  animation: leave-fade .25s ease-out;
}
@keyframes leave-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== Gildeninseln im Gildenfenster ===== */
#guild-islands-box { margin: 10px 0 8px; padding-top: 8px; border-top: 1px solid rgba(217,164,65,0.25); }
.guild-islands-title { font-size: 12px; font-weight: bold; letter-spacing: 1px; color: var(--gold-bright); margin-bottom: 6px; }
.guild-islands-empty { margin: 0; font-size: 11px; line-height: 1.45; color: var(--parchment-dark); }
.gi-card { padding: 8px 10px; margin-bottom: 8px; border: 1px solid rgba(217,164,65,0.3); border-radius: 9px; background: rgba(0,0,0,0.22); }
.gi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; color: var(--parchment); }
.gi-prot { font-size: 11px; color: #9fd4ff; }
.gi-warn { font-size: 11px; color: #ff8a70; animation: tut-pulse-bar 1.2s ease-in-out infinite; }
.gi-tower { display: grid; grid-template-columns: 38px 1fr 62px auto; align-items: center; gap: 8px; padding: 3px 0; font-size: 11px; color: var(--parchment); }
.gi-tower.down .gi-tname, .gi-tower.down .gi-hp { color: #e0866f; }
.gi-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.gi-bar i { display: block; height: 100%; }
.gi-hp { text-align: right; font-variant-numeric: tabular-nums; }
.gi-ok { color: #7fe08a; text-align: center; min-width: 30px; }
.gi-repair { padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(217,164,65,0.55); background: rgba(217,164,65,0.12); color: var(--gold-bright); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.gi-repair:hover:not(:disabled) { background: rgba(217,164,65,0.25); }
.gi-repair:disabled { opacity: 0.45; cursor: not-allowed; }
.gi-repair-all { display: block; width: 100%; margin-top: 6px; padding: 6px; font-weight: bold; }

/* Füll-Textur erst, wenn der Hintergrund geladen ist (game.js setzt .ready) */
.bone-loader.ready .bone-fill {
  background: url('assets/loading/Fuellung.webp') center / 100% 100% no-repeat,
    linear-gradient(180deg, #f3d27a 0%, #d99a3a 45%, #9c5f1c 100%);
}
.bone-loader .bone-frame:not([src]), .bone-loader .bone-marker:not([src]) { visibility: hidden; }

/* --- Leistungsanzeige (FPS / Ping), links neben der Minimap --- */
#perf-badge {
  position: absolute;
  top: 8px;
  right: 118px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(6,12,20,0.6);
  border: 1px solid rgba(217,164,65,0.4);
  border-radius: 6px;
  font: bold 11px/1.2 'OP Icons', ui-monospace, Consolas, monospace;
  color: var(--parchment-dark);
  white-space: nowrap;
  cursor: default;
  user-select: none;
  transition: border-color .2s, box-shadow .2s;
}
#perf-badge.hidden { display: none; }
#perf-badge .perf-sep { opacity: .45; }
#perf-badge .good { color: #7fdc7f; }
#perf-badge .ok { color: #f2c94c; }
#perf-badge .bad { color: #ff6b5e; }
#perf-badge.stutter { border-color: rgba(255,107,94,0.75); box-shadow: 0 0 6px rgba(255,107,94,0.35); }
@media (min-width: 700px) {
  #perf-badge { right: 144px; }
}

/* --- Einstellungen: Grafik-Tab --- */
.gfx-presets { display: flex; gap: 4px; }
.gfx-presets .hotkey-key-btn { min-width: 0; padding: 5px 9px; }
.gfx-preset.active {
  background: rgba(217,164,65,0.22);
  border-color: var(--gold);
  color: var(--gold-bright);
}
.gfx-toggle.off { color: var(--parchment-dark); opacity: .8; }
.gfx-res { display: flex; align-items: center; gap: 8px; }
#gfx-res, #fps-cap { width: 110px; accent-color: var(--gold); }
#fps-cap-row.hidden { display: none; }
#gfx-res-value, #fps-cap-value { min-width: 54px; text-align: right; font-size: 11px; font-weight: bold; color: var(--gold-bright); }
.gfx-note { font-size: 11px; color: var(--parchment-dark); font-style: italic; margin: 6px 4px; line-height: 1.4; }
.gfx-note.hidden { display: none; }

/* =====================================================================
   Einheitliches Fenster-Theme – alles wie die Seitenleiste:
   dunkles Glas (rgba 6,12,20 / 60 %), dünner goldener Rand, 12px Rundung,
   leichter Weichzeichner dahinter, eine gemeinsame Schrift.
   Gilt nur im Spiel (#game-screen); Hub und Login behalten ihren Stil.
   ===================================================================== */
:root {
  --win-bg: rgba(6,12,20,0.6);
  --win-bg-solid: rgba(6,12,20,0.88);   /* Ausklappmenüs/Tooltips über bewegtem Hintergrund */
  --win-border: rgba(217,164,65,0.4);
  --win-border-soft: rgba(217,164,65,0.2);
  --win-radius: 12px;
  --win-radius-sm: 8px;
  --win-shadow: 0 8px 24px rgba(0,0,0,0.35);
  --ui-font: 'OP Icons', 'Segoe UI', 'Trebuchet MS', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Fenster */
#game-screen .admin-card,
#game-screen .respawn-card,
#chat-panel,
#quests-panel,
#flip-popup,
#bonus-summary-card,
#session-summary-card,
#tutorial-card,
#ammo-popup,
#harpoon-popup,
#consumables-popup,
#chat-emoji-popup,
#crew-invite-toast,
#logout-countdown-banner,
.achievement-toast-instance,
#side-nav,
.target-frame,
#minimap-frame,
#zoom-control,
#combat-row {
  background: var(--win-bg) !important;
  border: 1px solid var(--win-border) !important;
  border-radius: var(--win-radius) !important;
  box-shadow: var(--win-shadow) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* kleine HUD-Chips: gleicher Look, kleinere Rundung */
#game-screen .top-stat,
#perf-badge {
  background: var(--win-bg) !important;
  border: 1px solid var(--win-border) !important;
  border-radius: var(--win-radius-sm) !important;
}
/* Ausklappmenüs und Tooltips der Leiste */
.nav-flyout,
.nav-label {
  background: var(--win-bg-solid) !important;
  border: 1px solid var(--win-border) !important;
  border-radius: var(--win-radius-sm) !important;
}
/* Trennlinien und Unterbereiche in Fenstern im selben Gold */
#game-screen .admin-header { border-bottom: 1px solid var(--win-border-soft); padding-bottom: 8px; }
#game-screen .admin-header h2,
#game-screen .respawn-card h2 { color: var(--gold-bright); font-weight: 700; letter-spacing: 0.4px; }
#settings-tabs { border-bottom-color: var(--win-border-soft); }
#game-screen .hotkey-row { border-bottom-color: rgba(217,164,65,0.12); }

/* Eine Schrift für die gesamte Spieloberfläche (Ausnahme: Zahlenanzeige FPS/Ping) */
#game-screen,
#game-screen *:not(#perf-badge):not(#perf-badge *) {
  font-family: var(--ui-font) !important;
}
/* Reiterleisten: mit der schmaleren Fensterbreite nie über den Rand hinaus */
#game-screen .designs-tabs { flex-wrap: wrap; row-gap: 2px; }
#game-screen .designs-tab { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: 11px; letter-spacing: 0.2px !important; padding-left: 4px; padding-right: 4px; }

/* --- Oben mittig: Kartenwechsel-Knopf + Meldungen + Kill-Feed ---------------- */
#top-center-stack {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  max-width: calc(100vw - 360px);
}
#top-center-stack #killfeed { position: static; transform: none; }
#top-center-stack #hotbar-message {
  position: static;
  transform: none;
  font-size: 13px;
  padding: 7px 16px;
  white-space: normal;
  text-align: center;
  max-width: 560px;
}
#map-change-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 20px;
  background: linear-gradient(180deg, rgba(242,196,100,0.28), rgba(6,12,20,0.75)) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 12px;
  color: var(--gold-bright);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45), 0 0 14px rgba(242,196,100,0.25);
  animation: mc-in 0.2s ease-out;
}
#map-change-btn.hidden { display: none; }
#map-change-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 20px rgba(242,196,100,0.4); }
#map-change-btn:disabled { cursor: not-allowed; filter: grayscale(0.6) brightness(0.8); }
#map-change-btn .mc-main { display: flex; gap: 6px; align-items: baseline; }
#map-change-btn .mc-target { color: #fff3d6; }
#map-change-btn .mc-target::before { content: '→ '; color: var(--gold-bright); }
#map-change-btn .mc-key { margin-left: 6px; padding: 1px 6px; border: 1px solid var(--win-border); border-radius: 4px; background: rgba(0,0,0,0.35); font: 700 11px var(--ui-font); color: var(--parchment); }
#map-change-btn .mc-key:empty { display: none; }
#map-change-btn .mc-note { font-size: 11px; font-weight: 600; color: var(--parchment-dark); }
#map-change-btn .mc-note:empty { display: none; }
@keyframes mc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Erfolgs-Hinweise (falls eingeschaltet) unter den Meldungen */
.achievement-toast-instance { top: 150px !important; }

/* --- Benachrichtigungen (Seitenleiste 🔔) ------------------------------------ */
#notifications-panel { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: min(calc(100vw - 20px), 440px); z-index: 6; }
#notifications-panel .admin-card { padding: 12px 14px 10px; }
#notifications-panel .admin-header h2 { flex: 1; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
#notifications-panel .notif-clear { font-size: 11px !important; font-weight: 700; color: var(--parchment-dark); margin-right: 6px; border: 1px solid var(--win-border-soft) !important; border-radius: 6px; padding: 3px 8px; }
#notifications-panel .notif-clear:hover { color: var(--gold-bright); }
#notif-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; max-height: 55vh; overflow-y: auto; }
.notif-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--win-border-soft); border-radius: 8px; background: rgba(255,255,255,0.03); }
.notif-row.unread { border-color: rgba(242,196,100,0.55); background: rgba(242,196,100,0.08); }
.notif-icon { font-size: 20px; text-align: center; }
.notif-text { display: flex; flex-direction: column; min-width: 0; }
.notif-kicker { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-bright); }
.notif-label { font-size: 12.5px; color: var(--parchment); line-height: 1.35; }
.notif-time { font-size: 10px; color: var(--hud-text-muted); white-space: nowrap; align-self: start; }
.notif-empty { font-size: 12px; color: var(--hud-text-muted); text-align: center; padding: 16px 0; }
#btn-notifications .nav-badge { top: 2px; right: 2px; transform: none; background: #d8342a; color: #fff; }
#btn-notifications .nav-badge.hidden { display: none; }
#top-center-stack #hotbar-message { background: var(--win-bg); border: 1px solid var(--win-border); border-radius: 10px; backdrop-filter: blur(3px); }

.respawn-btn.hidden { display: none; }

/* Bild-Icons in Porträts/Katalogzeilen etwas größer als im Fließtext */
.crew-portrait img.op-ic { width: 36px; height: 36px; vertical-align: middle; border-radius: 50%; }
.pet-portrait img.op-ic { width: 40px; height: 40px; vertical-align: middle; }
.talent-icon img.op-ic { width: 26px; height: 26px; vertical-align: middle; }
.upgrade-icon img.op-ic { width: 32px; height: 32px; vertical-align: middle; }

/* Wellen-Animation gibt es nur im Design "Bronze" */
html:not(.theme-bronze) #gfx-waves-row { display: none; }

/* Kompass: das Motiv (mit Öse) sitzt im Bild leicht rechts oben - so
   verschieben, dass der ganze Kompass mittig über den Kacheln steht */
.nav-compass img.op-ic { transform: translate(-3%, 2%); }

/* Ladebildschirm als Abdeckung über dem schon laufenden Spiel, bis die
   eigene Karte wirklich gezeichnet ist (game.js revealMapWhenReady) */
#loading-screen.over { position: fixed; inset: 0; z-index: 9999; }

/* ---- Winterkalender (Winterfest) ---------------------------------------- */
/* --- Winterkalender: Monatsblatt mit Frostkönig im Hintergrund --- */
#wintercal-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 780px); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 7; }
#wintercal-panel .admin-card { padding: 12px 14px 12px; }
#wintercal-panel .admin-header h2 { flex: 1; text-transform: uppercase; letter-spacing: 0.6px; }
#wintercal-panel .admin-header h2 img.op-ic { width: 26px; height: 26px; vertical-align: -6px; }
.wc-sub { margin: 4px 2px 8px; font-size: 12px; color: var(--parchment-dark); }
.wc-board {
  position: relative;
  padding: 10px 10px 12px;
  border-radius: 10px;
  background:
    radial-gradient(110% 85% at 50% 52%, rgba(3,10,18,0.05), rgba(3,8,14,0.55) 60%, rgba(3,8,14,0.92) 100%),
    url('assets/winter/calendar_bg.webp?v=2') center 58% / cover no-repeat,
    #030a12;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.75), 0 6px 14px rgba(0,0,0,0.5);
}
.wc-month + .wc-month { margin-top: 14px; }
.wc-title { margin: 2px 0 8px; text-align: center; font-family: var(--font-display, Georgia, serif); font-size: clamp(18px, 3.4vw, 28px); letter-spacing: 1px; text-transform: uppercase; color: #f2c46c; text-shadow: 0 2px 6px rgba(0,0,0,0.85); }
.wc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, 0.8vw, 7px); }
.wc-wd { text-align: center; font-weight: 700; font-size: clamp(9px, 1.7vw, 13px); letter-spacing: 0.6px; text-transform: uppercase; color: #f2d79a; padding: 2px 0 4px; text-shadow: 0 1px 3px #000; }
.wc-wd.we { color: #f0954a; }
.wc-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  border: 1px solid rgba(214,150,58,0.78);
  border-radius: 6px;
  background: rgba(3,10,18,0.3);
  color: #f6e6c0;
  font: inherit;
  text-align: left;
  overflow: hidden;
}
.wc-cell.empty { border-color: rgba(214,150,58,0.22); background: rgba(3,10,18,0.12); }
.wc-num { position: absolute; left: 7%; top: 6%; font-weight: 700; font-size: clamp(9px, 1.8vw, 14px); color: #f6e3b4; text-shadow: 0 1px 3px #000; line-height: 1; }
.wc-num.we { color: #f0a050; }
.wc-num.today { display: grid; place-items: center; width: 1.9em; height: 1.9em; left: 4%; top: 3%; border-radius: 50%; background: #d9963a; color: #2a1606; text-shadow: none; box-shadow: 0 0 10px rgba(240,170,70,0.7); }
.wc-chip {
  position: absolute; left: 4%; right: 4%; bottom: 6%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 2px 4px; border-radius: 4px;
  background: rgba(0,0,0,0.62);
  font-size: clamp(7px, 1.1vw, 10px); line-height: 1.2;
}
.wc-chip b, .wc-chip small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-chip b { font-weight: 700; color: #f6e6c0; }
.wc-chip.row { flex-direction: row; align-items: center; gap: 4px; background: rgba(0,0,0,0.5); }
.wc-chip.row b { font-size: 1.1em; flex: 1 1 auto; min-width: 0; text-overflow: clip; }
.wc-chip.row .wc-ic { flex: none; width: 1.35em; height: 1.35em; }
.wc-door.ready .wc-chip { align-items: center; }
.wc-door.finale24 { border-color: rgba(150,215,255,0.8); }
.wc-chip small { font-size: 0.9em; color: #9fd8ff; }
.wc-chip .wc-ic { display: block; width: clamp(14px, 2.8vw, 24px); height: clamp(14px, 2.8vw, 24px); }
.wc-chip .wc-ic img.op-ic { width: 100%; height: 100%; vertical-align: top; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.wc-chip img.wc-design { width: 100%; max-height: 2.6em; object-fit: cover; border-radius: 3px; }
.wc-door { cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; }
.wc-door.locked { cursor: not-allowed; }
.wc-door.locked .wc-chip b { color: rgba(246,230,192,0.55); }
.wc-door.opened { background: rgba(20,46,64,0.55); border-color: rgba(150,215,255,0.65); cursor: default; }
.wc-door.opened .wc-chip b { color: #d9f1ff; }
.wc-door.ready { border-color: #ffe09a; background: rgba(60,38,8,0.5); animation: wc-pulse 1.6s ease-in-out infinite; }
.wc-door.ready .wc-chip { background: linear-gradient(180deg, #e9b75a, #b47a22); }
.wc-door.ready .wc-chip b { color: #241302; }
.wc-door.ready:hover { transform: scale(1.05); z-index: 1; }
@keyframes wc-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,224,154,0.9), 0 0 8px 1px rgba(170,225,255,0.45); } 50% { box-shadow: 0 0 0 1px #ffe09a, 0 0 18px 5px rgba(170,225,255,0.85); } }
.wc-door.opening { animation: wc-open 0.7s ease-out; }
@keyframes wc-open { 0% { transform: perspective(400px) rotateY(0); filter: brightness(1.6); } 60% { transform: perspective(400px) rotateY(-25deg) scale(1.08); filter: brightness(1.3); } 100% { transform: none; filter: none; } }
.wc-finale { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(214,150,58,0.7); border-radius: 8px; background: linear-gradient(90deg, rgba(40,90,110,0.35), rgba(3,10,18,0.5)); }
.wc-finale img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px rgba(150,215,255,0.5); }
.wc-fin-text { flex: 1; min-width: 0; }
.wc-finale strong { display: block; color: var(--gold-bright); font-size: 13.5px; }
.wc-finale span { display: block; font-size: 11.5px; color: var(--parchment-dark); }
.wc-prog { position: relative; height: 14px; margin-top: 6px; border-radius: 7px; background: rgba(0,0,0,0.55); border: 1px solid rgba(214,150,58,0.5); overflow: hidden; }
.wc-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4fb6d8, #b9ecff); }
.wc-prog em { position: relative; display: block; text-align: center; font-style: normal; font-size: 10.5px; line-height: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.wc-finale.done { border-color: #9fdcff; box-shadow: 0 0 14px rgba(150,215,255,0.45); }
.wc-finale.lost { border-color: rgba(200,90,70,0.7); }
.wc-door.missed { cursor: not-allowed; background: rgba(3,8,14,0.55); border-color: rgba(214,150,58,0.35); }
.wc-door.missed .wc-chip { background: rgba(70,20,16,0.7); }
.wc-door.missed .wc-chip b { color: rgba(255,190,170,0.8); text-decoration: line-through; }
.wc-pz { position: absolute; right: 5%; top: 4%; font-size: clamp(11px, 2vw, 17px); line-height: 1; filter: drop-shadow(0 0 4px rgba(150,215,255,0.9)); }
.wc-pz img.op-ic { width: clamp(13px, 2.2vw, 20px); height: clamp(13px, 2.2vw, 20px); vertical-align: top; }
.wc-pz.got { filter: drop-shadow(0 0 5px rgba(255,214,120,1)); }
.wc-door.missed .wc-pz { filter: grayscale(1) brightness(0.6); }
.wc-puzzle { flex: none; display: grid; grid-template-columns: repeat(2, 38px); grid-template-rows: repeat(2, 38px); gap: 3px; }
.wc-piece { position: relative; border-radius: 4px; background: url('assets/elite/special_frostkoenig.jpg?v=2') 0 0 / 200% 200% no-repeat; box-shadow: 0 0 0 1px rgba(150,215,255,0.55); }
.wc-piece:not(.got)::before { content: ''; position: absolute; inset: 0; border-radius: 4px; background: rgba(2,6,12,0.84); }
.wc-piece em { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; color: #cfe9ff; }
.wc-piece.lost { box-shadow: 0 0 0 1px rgba(220,90,70,0.8); }
.wc-piece.lost em { color: #ff9a85; text-decoration: line-through; }
.design-card-badge.admin-test { background: rgba(120,60,160,0.9); color: #fff; }

.designs-empty { grid-column: 1 / -1; margin: 8px 4px; font-size: 12.5px; color: var(--parchment-dark); }

/* Neustart-Countdown oben mittig auf der Karte */
#restart-notice { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 8px; background: rgba(8,14,22,0.88); border: 1px solid rgba(232,176,72,0.85); color: #f6e6c0; font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); pointer-events: none; white-space: nowrap; }
#restart-notice b { font-variant-numeric: tabular-nums; color: #ffd36b; font-size: 18px; min-width: 3.2em; text-align: center; }
#restart-notice.urgent { border-color: #ff6a50; animation: rn-pulse 1s ease-in-out infinite; }
#restart-notice.urgent b { color: #ff8a70; }
@keyframes rn-pulse { 50% { box-shadow: 0 0 18px rgba(255,90,60,0.7); } }
/* Hinweis „Captcha erforderlich“ oben mittig (wie der Neustart-Countdown), Klick öffnet die Kontrolle */
#botcheck-notice { position: static; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 14px; border-radius: 8px; background: rgba(8,14,22,0.9); border: 1px solid rgba(232,176,72,0.85); color: #f6e6c0; font: inherit; font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); white-space: nowrap; cursor: pointer; pointer-events: auto; }
#botcheck-notice.hidden { display: none; }
#botcheck-notice b { font-variant-numeric: tabular-nums; color: #ffd36b; font-size: 18px; min-width: 3.2em; text-align: center; }
#botcheck-notice .bn-cta { padding: 3px 10px; border-radius: 6px; background: linear-gradient(180deg, #f2c464, #d9a441); color: #1c1208; font-weight: 700; font-size: 13px; }
#botcheck-notice:hover { border-color: #ffd36b; }
#botcheck-notice:focus-visible { outline: 2px solid #ffd36b; outline-offset: 2px; }
#botcheck-notice.urgent { border-color: #ff6a50; animation: rn-pulse 1s ease-in-out infinite; }
#botcheck-notice.urgent b { color: #ff8a70; }
#botcheck-close { margin-left: 8px; width: 28px; height: 28px; flex: none; border-radius: 7px; cursor: pointer; background: rgba(5,11,18,0.6); color: var(--parchment, #ecdcb8); border: 1px solid rgba(255,255,255,0.18); }
#botcheck-close:hover { border-color: rgba(217,164,65,0.7); }
#botcheck-panel .bc-head { align-items: center; }
#botcheck-panel .bc-head h2 { flex: 1; }
@media (prefers-reduced-motion: reduce) { #botcheck-notice.urgent { animation: none; } }
/* Handy: Countdown klein und schmal zwischen Seitenleiste und Minimap */
@media (max-width: 760px), (max-height: 520px) {
  #restart-notice { top: 50px; gap: 5px; padding: 3px 9px; font-size: 11px; border-radius: 6px; background: rgba(8,14,22,0.72); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  #restart-notice .rn-icon { font-size: 11px; }
  #restart-notice b { font-size: 13px; min-width: 2.6em; }
  #botcheck-notice { gap: 5px; padding: 3px 4px 3px 9px; font-size: 11px; border-radius: 6px; }
  #botcheck-notice b { font-size: 13px; min-width: 2.6em; }
  #botcheck-notice .bn-cta { font-size: 11px; padding: 2px 7px; }
}

/* ===== Gilde: Reiter, Gildenkasse, Turm-Ausbau ===== */
.guild-tabs { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid rgba(217,164,65,0.3); }
.guild-tab { flex: 1; white-space: nowrap; padding: 6px 4px 7px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--hud-text-muted, #b9a888); font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; letter-spacing: 0.3px; }
.guild-tab:hover { color: var(--parchment); }
.guild-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.gb-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gb-stat { position: relative; padding: 9px 12px 8px; border-radius: 9px; border: 1px solid rgba(217,164,65,0.45); background: linear-gradient(160deg, rgba(242,196,100,0.16), rgba(0,0,0,0.25)); overflow: hidden; }
.gb-stat.gb-pearls { border-color: rgba(178,140,255,0.45); background: linear-gradient(160deg, rgba(178,140,255,0.16), rgba(0,0,0,0.25)); }
.gb-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--parchment-dark, #b9a888); }
.gb-value { display: block; font-size: 18px; font-weight: bold; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.gb-pearls .gb-value { color: #d5c2ff; }
.gb-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; opacity: 0.35; }
.gb-hint { margin: 6px 0 0; font-size: 10.5px; color: var(--parchment-dark, #b9a888); line-height: 1.4; }
.gb-hint-top { margin: -2px 0 6px; }
.gb-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(217,164,65,0.2); }
.gb-title { font-size: 12px; font-weight: bold; letter-spacing: 1px; color: var(--gold-bright); margin-bottom: 6px; text-transform: uppercase; }
.gb-deposit { display: flex; gap: 6px; align-items: stretch; }
.gb-deposit label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--hud-border); background: rgba(0,0,0,0.3); }
.gb-deposit label span { font-size: 12px; }
#guild-pay-member { flex: 1; min-width: 0; padding: 0 6px; border-radius: 6px; border: 1px solid var(--hud-border); background: rgba(0,0,0,0.3); color: var(--parchment); font: inherit; font-size: 12px; }
#guild-pay-member option { background: #1d140b; }
.gb-deposit input { flex: 1; min-width: 0; width: 100%; padding: 6px 2px; border: 0; background: none; color: var(--parchment); font: inherit; font-size: 12px; outline: none; -moz-appearance: textfield; }
.gb-deposit input::-webkit-outer-spin-button, .gb-deposit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gb-deposit button, #guild-upgrade-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(217,164,65,0.7); background: linear-gradient(180deg, #e2b450, #a87a26); color: #241606; font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.gb-deposit button:disabled, #guild-upgrade-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.5); }
.gb-tax-text { margin: 0 0 6px; font-size: 11px; color: var(--parchment); line-height: 1.45; }
.gb-tax-text b { color: var(--gold-bright); }
#guild-bank-log { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
#guild-bank-log li { display: grid; grid-template-columns: 42px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; font-size: 11px; color: var(--parchment); background: rgba(255,255,255,0.035); border-radius: 4px; }
#guild-bank-log li.empty { display: block; color: var(--parchment-dark, #b9a888); background: none; }
#guild-bank-log .when { color: var(--parchment-dark, #b9a888); font-size: 10px; font-variant-numeric: tabular-nums; }
#guild-bank-log .what { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
#guild-bank-log .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
#guild-bank-log .pos { color: #8fe09a; }
#guild-bank-log .neg { color: #f0a08a; }
.gf-card { padding: 10px 12px; margin-bottom: 8px; border-radius: 9px; border: 1px solid rgba(217,164,65,0.45); background: linear-gradient(160deg, rgba(242,196,100,0.12), rgba(0,0,0,0.28)); }
.gf-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--parchment); }
.gf-lvl { font-weight: bold; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.gf-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: 8px 0 6px; }
.gf-pips i { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.gf-pips i.on { background: linear-gradient(90deg, #f2c464, #d98b2b); box-shadow: 0 0 5px rgba(242,196,100,0.5); }
.gf-home { margin: 2px 0 8px; padding: 6px 8px; border-radius: 6px; background: rgba(91,194,106,0.1); border: 1px solid rgba(91,194,106,0.3); font-size: 11px; line-height: 1.4; color: #bfe8c4; }
.gf-effect { font-size: 11px; color: var(--parchment); margin-bottom: 8px; }
.gf-next { color: #8fe09a; }
#guild-upgrade-btn { width: 100%; }
.gf-hint { margin: 5px 0 0; font-size: 10.5px; color: var(--parchment-dark, #b9a888); }
.gf-max { color: #8fe09a; }
.gi-lvl { font-size: 11px; color: var(--gold-bright); }
@media (max-width: 600px) {
  .guild-tab { font-size: 11px; padding: 5px 2px 6px; }
  .gb-icon { display: none; }
  .gb-value { font-size: 16px; }
  #guild-bank-log li { grid-template-columns: 36px 1fr; }
  #guild-bank-log .amt { grid-column: 2; }
}

/* ===== Jolly Roger (Event): Dublonen, Event-Shop, Aufgaben ===== */
#jolly-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 560px); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 7; }
#jolly-panel .admin-card { padding: 12px 14px; background: linear-gradient(180deg, rgba(40,10,10,0.94), rgba(14,10,10,0.96)); border-color: rgba(200,60,50,0.55); }
#jolly-panel .admin-header h2 { flex: 1; text-transform: uppercase; letter-spacing: 0.6px; color: #ffcf8a; }
.jr-purse { display: grid; grid-template-columns: 58px 1fr; gap: 4px 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(242,196,100,0.4); background: radial-gradient(ellipse at 15% 50%, rgba(242,196,100,0.18), rgba(0,0,0,0.3) 70%); }
.jr-purse > img { width: 58px; height: 58px; object-fit: contain; grid-row: span 2; filter: drop-shadow(0 0 8px rgba(255,200,90,0.5)); }
.jr-purse-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--parchment-dark); }
.jr-purse strong { font-size: 24px; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.jr-purse-hint { margin: 0; font-size: 11px; line-height: 1.4; color: var(--parchment); }
.jr-section-title { margin: 12px 0 6px; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #ff8a70; }
.jr-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.jr-design { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 9px; border: 1px solid rgba(200,60,50,0.45); background: rgba(0,0,0,0.3); text-align: center; }
.jr-design img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.jr-design strong { font-size: 12px; color: var(--parchment); min-height: 2.4em; display: flex; align-items: center; }
.jr-design.owned { border-color: rgba(127,224,138,0.5); }
.jr-buy, .jr-claim { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(242,196,100,0.7); background: linear-gradient(180deg, #c8462f, #7d2117); color: #ffe3b0; font: inherit; font-size: 12px; font-weight: bold; cursor: pointer; white-space: nowrap; }
.jr-buy img, .jr-claim img { width: 18px; height: 18px; object-fit: contain; }
.jr-buy:disabled, .jr-claim:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.jr-owned { font-size: 12px; color: #7fe08a; font-weight: bold; }
.jr-quests { display: flex; flex-direction: column; gap: 6px; }
.jr-quest { display: grid; grid-template-columns: 1fr 120px auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
.jr-quest.done { border-color: rgba(242,196,100,0.6); box-shadow: 0 0 10px rgba(242,196,100,0.15) inset; }
.jr-quest.claimed { opacity: 0.6; }
.jr-q-text { display: flex; flex-direction: column; min-width: 0; }
.jr-q-text strong { font-size: 12.5px; color: var(--parchment); }
.jr-q-text span { font-size: 11px; color: var(--parchment-dark); }
.jr-q-bar { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,0.45); overflow: hidden; }
.jr-q-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #a5281c, #e2703a); }
.jr-q-bar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 10.5px; line-height: 16px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
@media (max-width: 600px) {
  .jr-shop { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .jr-design { padding: 5px; }
  .jr-design strong { font-size: 11px; }
  .jr-quest { grid-template-columns: 1fr auto; }
  .jr-q-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Balance v2: Seeprüfungen */
#trials-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 560px); max-height: calc(100vh - 70px); overflow-y: auto; z-index: 7; }
#trials-panel .admin-card { padding: 12px 14px; }
.trials-lede { margin: 0 0 10px; font-size: 12px; color: var(--hud-text-muted); line-height: 1.5; }
.trial-card { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); display: flex; flex-direction: column; gap: 6px; }
.trial-card.active { border-color: rgba(242,196,100,0.6); }
.trial-card.done { opacity: 0.6; }
.trial-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.trial-head strong { color: var(--gold-bright, #f2c464); }
.trial-req { display: grid; grid-template-columns: 1fr 130px; gap: 8px; align-items: center; font-size: 12px; }
.trial-req .jr-q-bar { height: 14px; }
.trial-accept { padding: 5px 12px; border-radius: 6px; border: 1px solid rgba(242,196,100,0.7); background: rgba(242,196,100,0.15); color: #f2c464; font: inherit; font-size: 12px; cursor: pointer; }
.trial-accept:disabled { opacity: 0.45; cursor: not-allowed; }

/* Teleporter: Eintrag im Ausrüstungs-Popup + Seekarte im Auswahlmodus */
#consumables-popup .ammo-option.on-cooldown { opacity: 0.55; }
#seachart-teleport {
  display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; padding: 8px 10px;
  border: 1px solid rgba(110,210,255,0.55); border-radius: 10px;
  background: linear-gradient(90deg, rgba(40,130,200,0.28), rgba(10,30,50,0.6));
}
#seachart-teleport.hidden { display: none; }
#seachart-teleport img { width: 38px; height: 38px; border-radius: 6px; flex: none; }
#seachart-teleport div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#seachart-teleport strong { color: #d8f4ff; font-size: 13px; }
#seachart-teleport span { color: rgba(220,236,245,0.8); font-size: 11px; }
#btn-teleport-cancel {
  flex: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px;
  background: rgba(5,11,18,0.6); color: var(--parchment, #ecdcb8); border: 1px solid rgba(255,255,255,0.18);
}
#btn-teleport-cancel:hover { border-color: rgba(110,210,255,0.7); }
#seachart-panel.teleport-mode .sc-tile:not(.sc-pick):not(.sc-empty) { filter: saturate(0.3) brightness(0.55); }
#seachart-panel.teleport-mode .sc-tile.sc-pick { cursor: pointer; }
#seachart-panel.teleport-mode .sc-tile.sc-pick:hover,
#seachart-panel.teleport-mode .sc-tile.sc-pick:focus-visible {
  box-shadow: 0 0 0 2px #8fe3ff, 0 0 16px rgba(110,210,255,0.75); transform: translateY(-1px);
}

/* Teleporter-Countdown (5 s) oben mittig */
#teleport-countdown {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; margin: 6px auto 0; padding: 8px 10px 8px 8px;
  width: max-content; max-width: calc(100vw - 32px);
  border: 1px solid rgba(110,210,255,0.6); border-radius: 12px;
  background: linear-gradient(90deg, rgba(20,70,120,0.85), rgba(6,16,28,0.88));
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 22px rgba(80,190,255,0.25);
  position: relative;
}
#teleport-countdown.hidden { display: none; }
#teleport-countdown .tc-ring { width: 48px; height: 48px; transform: rotate(-90deg); flex: none; }
#teleport-countdown .tc-track { fill: rgba(5,15,25,0.7); stroke: rgba(255,255,255,0.12); stroke-width: 4; }
#teleport-countdown .tc-fill { fill: none; stroke: #8fe3ff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .1s linear; filter: drop-shadow(0 0 4px rgba(120,220,255,0.8)); }
#teleport-countdown .tc-num {
  position: absolute; left: 8px; top: 8px; width: 48px; height: 48px; display: grid; place-items: center;
  font-family: var(--font-display, Georgia, serif); font-size: 22px; font-weight: 700; color: #e9fbff;
  text-shadow: 0 0 10px rgba(120,220,255,0.9);
}
#teleport-countdown .tc-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#teleport-countdown strong { color: #d8f4ff; font-size: 14px; letter-spacing: 0.4px; }
#teleport-countdown .tc-target { color: #fff; font-size: 13px; }
#teleport-countdown small { color: rgba(220,236,245,0.7); font-size: 10.5px; }
#btn-teleport-abort {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px;
  background: rgba(5,11,18,0.6); color: #d8f4ff; border: 1px solid rgba(255,255,255,0.18);
}
#btn-teleport-abort:hover { border-color: rgba(255,140,120,0.8); color: #ffb4a6; }
@media (prefers-reduced-motion: reduce) { #teleport-countdown .tc-fill { transition: none; } }

/* Bot-Prüfung des Hafenmeisters */
#botcheck-panel {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px;
  background: rgba(3,8,13,0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); pointer-events: auto;
}
#botcheck-panel.hidden { display: none; }
#botcheck-panel .bc-card {
  width: min(380px, 100%); padding: 18px 20px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(24,18,12,0.97), rgba(10,8,6,0.97));
  border: 1px solid rgba(217,164,65,0.6); box-shadow: 0 30px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--parchment, #ecdcb8); text-align: center;
}
#botcheck-panel .bc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#botcheck-panel h2 { margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 18px; color: var(--gold-bright, #f2c464); letter-spacing: 0.5px; text-align: left; }
#botcheck-panel .bc-timer { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--gold-bright, #f2c464); }
#botcheck-panel .bc-timer.urgent { color: #ff9a86; }
#botcheck-panel .bc-intro { margin: 8px 0 12px; font-size: 13px; line-height: 1.45; color: rgba(236,220,184,0.85); text-align: left; }
#botcheck-panel .bc-image-wrap { position: relative; display: inline-block; border-radius: 6px; overflow: hidden; border: 1px solid rgba(217,164,65,0.45); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
#botcheck-image { display: block; width: 260px; max-width: 100%; height: auto; image-rendering: auto; }
#botcheck-refresh {
  position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  background: rgba(20,12,6,0.75); color: #f2e2bf; border: 1px solid rgba(217,164,65,0.5); font-size: 15px; line-height: 1;
}
#botcheck-refresh:disabled { opacity: 0.35; cursor: default; }
#botcheck-form { display: flex; gap: 8px; margin-top: 12px; }
#botcheck-input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; font: 600 20px/1 var(--font-display, Georgia, serif); letter-spacing: 6px; text-transform: uppercase; text-align: center;
  background: rgba(5,11,18,0.7); color: #fff3d8; border: 1px solid rgba(217,164,65,0.4);
}
#botcheck-input:focus { outline: none; border-color: var(--gold-bright, #f2c464); box-shadow: 0 0 0 3px rgba(217,164,65,0.2); }
#botcheck-panel .bc-confirm {
  flex: none; padding: 0 16px; border-radius: 8px; cursor: pointer; font: 700 14px var(--font-display, Georgia, serif);
  background: linear-gradient(180deg, var(--gold-bright, #f2c464), var(--gold, #d9a441)); color: #1c1208; border: 0;
}
#botcheck-panel .bc-note { min-height: 18px; margin: 8px 0 4px; font-size: 13px; color: rgba(242,196,100,0.9); }
#botcheck-panel .bc-note.warn { color: #ffb4a6; }
#botcheck-input::placeholder { letter-spacing: 1px; text-transform: none; font-weight: 400; font-size: 15px; color: rgba(236,220,184,0.45); }
#botcheck-panel .bc-note.ok { color: #a8e6a0; }
#botcheck-panel .bc-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; text-align: left; }
#botcheck-panel .bc-later { flex: none; padding: 7px 12px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px; background: rgba(5,11,18,0.6); color: var(--parchment, #ecdcb8); border: 1px solid rgba(255,255,255,0.18); }
#botcheck-panel .bc-later:disabled { opacity: 0.4; cursor: default; }
#botcheck-panel .bc-rule { font-size: 11px; line-height: 1.4; color: rgba(236,220,184,0.6); }
#auction-panel { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); width: min(calc(100vw - 16px), 720px); z-index: 7; pointer-events: auto; }
#auction-panel.hidden { display: none; }

.design-card-perk { margin-top: 2px; font-size: 10.5px; line-height: 1.25; color: #9fd6a8; text-align: center; padding: 0 4px 4px; }

/* Weltereignis-Hinweis oben (wie Captcha/Neustart) */
#worldevent-notice { position: static; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: linear-gradient(180deg, rgba(14,30,40,0.92), rgba(6,14,22,0.92)); border: 1px solid rgba(127,211,200,0.8); color: #e8f6f2; font: inherit; font-size: 15px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); white-space: nowrap; cursor: pointer; pointer-events: auto; }
#worldevent-notice.hidden { display: none; }
#worldevent-notice .we-icon { font-size: 18px; }
#worldevent-notice b { font-variant-numeric: tabular-nums; color: #9fe8d8; min-width: 3em; text-align: center; }
#worldevent-notice.kind-ghost { border-color: rgba(190,170,255,0.85); }
#worldevent-notice.kind-ghost b { color: #cdbbff; }
#worldevent-notice.kind-kraken { border-color: rgba(255,140,110,0.85); }
#worldevent-notice.kind-kraken b { color: #ffb19a; }
#worldevent-notice.kind-convoy, #worldevent-notice.kind-shoal { border-color: rgba(240,184,90,0.85); }
#worldevent-notice.kind-convoy b, #worldevent-notice.kind-shoal b { color: #ffd36b; }
#worldevent-notice.flash { animation: we-flash 1.2s ease 2; }
@keyframes we-flash { 50% { box-shadow: 0 0 0 4px rgba(255,211,107,0.45), 0 4px 16px rgba(0,0,0,0.5); } }
@media (prefers-reduced-motion: reduce) { #worldevent-notice.flash { animation: none; } }

/* Wind-Anzeige neben dem Zoom-Balken */
#wind-gauge { position: absolute; z-index: 4; width: 96px; padding: 4px 4px 5px; border-radius: 8px; background: rgba(6,12,20,0.6); border: 1px solid rgba(217,164,65,0.4); text-align: center; pointer-events: auto; }
#wind-gauge.hidden { display: none; }
#wind-gauge svg { display: block; width: 58px; height: 58px; margin: 0 auto; }
#wind-gauge .wg-ring { fill: rgba(8,22,34,0.75); stroke: rgba(217,164,65,0.55); stroke-width: 1.5; }
#wind-gauge .wg-ticks path { stroke: rgba(236,220,184,0.55); stroke-width: 1.5; }
#wind-gauge .wg-n { font: bold 8px Georgia, serif; fill: rgba(236,220,184,0.8); text-anchor: middle; }
#wind-gauge .wg-arrow { transform-origin: 32px 32px; transition: transform 1s linear; }
#wind-gauge .wg-arrow path:first-child { fill: #cfeefa; stroke: #0b2433; stroke-width: 1; }
#wind-gauge .wg-tail { stroke: rgba(207,238,250,0.7); stroke-width: 2; stroke-dasharray: 3 3; fill: none; }
#wind-gauge .wg-text { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; font-size: 10.5px; line-height: 1.2; font-variant-numeric: tabular-nums; }
#wind-gauge .wg-wind.good, #wind-gauge .wg-cur.good { color: #9fe2ad; }
#wind-gauge .wg-wind.bad, #wind-gauge .wg-cur.bad { color: #ff9a86; }
#wind-gauge .wg-wind.calm { color: rgba(236,220,184,0.75); }
@media (prefers-reduced-motion: reduce) { #wind-gauge .wg-arrow { transition: none; } }

/* --- Handy / kleines Fenster: Ziel- und Angreifer-Anzeige kompakt, damit im
   Kampf genug vom Meer sichtbar bleibt (kein Porträt, schmal, nur ein
   Angreifer-Fenster mit „+N“ für weitere) --- */
.tf-more { position: absolute; right: 6px; top: 4px; font-size: 10px; font-weight: bold; color: #ff8a6a; font-variant-numeric: tabular-nums; }
.tf-more.hidden { display: none; }
.target-frame { position: relative; }
@media (max-width: 760px), (max-height: 520px) {
  .target-frame { min-width: 0; width: 136px; max-width: 136px; gap: 0; padding: 3px 7px 4px; border-radius: 8px !important; animation: none; }
  .target-frame .tf-portrait { display: none; }
  .target-frame .tf-info { gap: 1px; }
  .target-frame .tf-kicker { font-size: 8px; letter-spacing: 0.06em; }
  .target-frame .tf-name { font-size: 11px; }
  .target-frame .tf-hp { height: 5px; }
  .target-frame .tf-hp-text { font-size: 9px; }
  #resource-badges { gap: 3px; }
}

/* Offenes Untermenü der Seitenleiste liegt über den Anzeigen oben links
   (Story-Aufgabe, Gezeit, Ziel-Anzeige) */
#side-nav:has(.nav-group.open) { z-index: 9; }
#side-nav .nav-flyout { background: linear-gradient(180deg, #1c140b, #0c0805) !important; }

/* --- Actionitems: Abschnitt im Ausrüstungs-Popup, laufende Wirkungen --- */
#consumables-popup { max-height: min(70vh, 560px); overflow-y: auto; flex-wrap: wrap; justify-content: center; width: max-content; max-width: min(94vw, 474px); }
#consumables-popup .action-option { width: 84px; }
#consumables-popup .action-head { flex-basis: 100%; text-align: center; padding: 6px 10px 2px; font: 600 11px Georgia, serif; letter-spacing: 0.04em; color: rgba(236,220,184,0.7); border-top: 1px solid rgba(217,164,65,0.25); margin-top: 4px; }
#action-buffs { display: flex; justify-content: center; gap: 6px; margin-bottom: 4px; pointer-events: none; min-height: 0; }
#action-buffs:empty { display: none; }
#action-buffs .ab { position: relative; width: 34px; height: 34px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(217,164,65,0.6), 0 2px 6px rgba(0,0,0,0.5); }
#action-buffs .ab img { width: 100%; height: 100%; display: block; }
#action-buffs .ab b { position: absolute; left: 0; right: 0; bottom: 0; font: 700 9px Georgia, serif; text-align: center; color: #fff; background: rgba(0,0,0,0.65); font-variant-numeric: tabular-nums; }