/* /css/game.css */
/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* `el.hidden = true` muss immer gewinnen: Klassen mit `display: flex` hoben es auf
   („Leave party“ ohne Gruppe, Playbot 19.10.). */
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #18211b;   /* wie Startbild und Ladebildschirm */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Spiel, kein Dokument: schnelles Klicken (Doppelklick) mit Maus/Touchpad
   markierte Namen, Knopf-Beschriftungen und HUD-Texte blau (Maus-Audit 29.09.).
   Felder und der Chat-Verlauf bleiben markierbar (kopieren). */
body {
  -webkit-user-select: none;
  user-select: none;
}

input, textarea, [contenteditable="true"], #chat-messages {
  -webkit-user-select: text;
  user-select: text;
}

#game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#game-container canvas {
  display: block;
}

/* Connection status indicator */
#connection-status {
  position: fixed;
  top: 10px;
  right: 10px;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffcc00;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  z-index: 1000;
  border: 1px solid #333;
}

/* Player count */
#player-count {
  position: fixed;
  top: 50px;
  right: 10px;
  padding: 8px 16px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #88ccff;
  border-radius: 5px;
  font-size: 14px;
  z-index: 1000;
  border: 1px solid #333;
}

/* Instructions panel */
#instructions {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  border-radius: 10px;
  font-size: 14px;
  z-index: 900;
  border: 2px solid #444;
  opacity: 0;
  transition: opacity 1s ease;
  max-width: 250px;
}

#instructions h3 {
  margin-bottom: 10px;
  color: #ffcc00;
  font-size: 16px;
}

#instructions p {
  margin-bottom: 5px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  #instructions {
    bottom: auto;
    top: 200px;   /* unter Statusbox und Minikarte */
    right: 50%;
    transform: translateX(50%);
  }
}

/* /css/ui.css */
/* Auth UI Styles */
#auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

#auth-container {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid #4a90e2;
  border-radius: 15px;
  padding: 30px 40px;
  width: 400px;
  box-shadow: 0 0 30px rgba(74, 144, 226, 0.3);
}

#auth-title {
  color: #4a90e2;
  text-align: center;
  margin-bottom: 20px;
  font-size: 28px;
  text-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}

#auth-tabs {
  display: flex;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #444;
  color: #888;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 16px;
}

.auth-tab:first-child {
  border-radius: 5px 0 0 5px;
}

.auth-tab:last-child {
  border-radius: 0 5px 5px 0;
}

.auth-tab.active {
  background: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.auth-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.2);
  color: #ccc;
}

.auth-field {
  margin-bottom: 15px;
}

.auth-field label {
  display: block;
  color: #ccc;
  margin-bottom: 5px;
  font-size: 14px;
}

.auth-field input {
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #444;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  box-sizing: border-box;
}

.auth-field input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

#auth-submit {
  width: 100%;
  padding: 12px;
  background: #4a90e2;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

#auth-submit:hover {
  background: #357abd;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
}

#auth-submit:active {
  transform: translateY(0);
}

#auth-submit:disabled {
  background: #555;
  cursor: not-allowed;
  transform: none;
}

#auth-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  display: none;
}

#auth-message.error {
  display: block;
  background: rgba(231, 76, 60, 0.2);
  border: 1px solid #e74c3c;
  color: #e74c3c;
}

#auth-message.success {
  display: block;
  background: rgba(46, 204, 113, 0.2);
  border: 1px solid #2ecc71;
  color: #2ecc71;
}

#auth-loading {
  text-align: center;
  color: #4a90e2;
  margin-top: 15px;
  font-size: 16px;
}

/* Logout Button */
#logout-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 4px 8px;
  background: rgba(231, 76, 60, 0.6);
  border: 1px solid #e74c3c;
  border-radius: 3px;
  color: white;
  font-size: 11px;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.3s;
  display: none;
}

#logout-btn:hover {
  background: rgba(192, 57, 43, 0.8);
}

/* Chat: client/css/chat.css */

/* Player Stats UI */
#stats-container {
  position: fixed;
  top: 10px;
  left: 10px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  border: 2px solid #444;
  z-index: 1000;
  min-width: 200px;
}

#player-name {
  color: #00ff00;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

#health-bar-container,
#exp-bar-container {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #333;
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
}

#health-bar {
  height: 100%;
  background: linear-gradient(90deg, #ff0000, #ff3333);
  border-radius: 5px;
  transition: width 0.3s ease;
  width: 100%;
}

#exp-bar {
  height: 100%;
  background: linear-gradient(90deg, #9933ff, #cc66ff);
  border-radius: 5px;
  transition: width 0.3s ease;
  width: 0%;
}

#health-text,
#exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px black;
}

#player-level {
  color: #ffcc00;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #stats-container {
    min-width: 150px;
    padding: 10px;
  }

  #player-name {
    font-size: 14px;
  }

  #health-bar-container,
  #exp-bar-container {
    height: 16px;
  }
}

@media (max-width: 480px) {
  #stats-container {
    top: 5px;
    left: 5px;
  }
}

/* Inventory UI */
#inventory-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  max-height: 600px;
  background-color: rgba(20, 20, 30, 0.95);
  border-radius: 10px;
  border: 2px solid #555;
  z-index: 2000;
  padding: 15px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

#inventory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #555;
  padding-bottom: 10px;
}

#inventory-header h3 {
  margin: 0;
  color: #ffcc00;
}

#inventory-close {
  background: #cc3333;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#inventory-close:hover {
  background: #ff4444;
}

#inventory-equipment {
  margin-bottom: 15px;
}

#inventory-equipment h4,
#inventory-stats h4,
#inventory-items h4 {
  margin: 0 0 10px 0;
  color: #aaddff;
  font-size: 14px;
}

.equip-slot {
  display: flex;
  justify-content: space-between;
  background: rgba(50, 50, 70, 0.8);
  padding: 8px 12px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: 1px solid #444;
}

.equip-slot:hover {
  background: rgba(70, 70, 100, 0.8);
}

.slot-label {
  color: #888;
  font-weight: bold;
}

.slot-item {
  color: #aaffaa;
}

.slot-item.empty {
  color: #666;
  font-style: italic;
}

#inventory-stats {
  margin-bottom: 15px;
  background: rgba(40, 40, 60, 0.8);
  padding: 10px;
  border-radius: 5px;
}

#inventory-stats div {
  margin-bottom: 3px;
}

#stat-attack { color: #ff6666; }
#stat-defense { color: #66aaff; }
#stat-maxhealth { color: #66ff66; }

#inventory-items {
  margin-bottom: 10px;
}

#inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  padding: 5px;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 5px;
}

.inventory-slot {
  background: rgba(60, 60, 80, 0.8);
  border: 1px solid #555;
  border-radius: 5px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.inventory-slot:hover {
  background: rgba(80, 80, 120, 0.8);
  border-color: #888;
}

.inventory-slot .item-name {
  font-size: 11px;
  color: #ddd;
  word-break: break-word;
}

/* Neu im Beutel (InventoryUI.noteNew) */
.inventory-slot .item-new {
  position: absolute;
  top: 2px;
  left: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--gold, #ffd24a);
  color: #2a2016;
  font-size: 8px;
  font-weight: 700;
  line-height: 11px;
  pointer-events: none;
}
#mobile-btn-inventory.has-new::after,
.desk-btn[data-act="bag"].has-new::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold, #ffd24a);
  border: 2px solid var(--ink, #1a1410);
  pointer-events: none;
}
#mobile-btn-inventory { position: relative; }

/* Verkaufswert im Gegenstands-Menü */
.item-context-menu .item-sell {
  padding: 5px 15px;
  font-size: 11px;
  color: #e8c66a;
  border-bottom: 1px solid #555;
}

/* Leerer Beutel (am PC zeigen leere Felder, desk.css) */
.inventory-empty-note {
  grid-column: 1 / -1;
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #a9a59a);
}
body:not(.touch-device) .inventory-empty-note { display: none; }

.inventory-slot .item-quantity {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  color: #ffcc00;
  font-weight: bold;
}

/* Seltenheit: Farben aus windows.css (--rar), einheitlich in allen Fenstern (Rahmen unten dort) */

/* Gold im Kopf neben × (GoldUI-Pille, client/css/gold.css) */
#inventory-gold { flex: none; }

/* Item context menu */
.item-context-menu {
  position: absolute;
  background: rgba(30, 30, 40, 0.98);
  border: 1px solid #666;
  border-radius: 5px;
  padding: 5px 0;
  z-index: 3000;
  min-width: 120px;
}

.item-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 15px;
  background: none;
  border: none;
  color: #ddd;
  text-align: left;
  cursor: pointer;
}

.item-context-menu button:hover {
  background: rgba(80, 80, 120, 0.8);
  color: #fff;
}

/* Loot notification */
.loot-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 30, 40, 0.95);
  border: 2px solid #ffcc00;
  border-radius: 10px;
  padding: 20px;
  z-index: 2500;
  color: #ffffff;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.loot-notification h3 {
  color: #ffcc00;
  margin: 0 0 15px 0;
}

.loot-item {
  padding: 5px;
  margin: 5px 0;
  color: #aaffaa;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Shop UI */
#shop-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-height: 700px;
  background-color: rgba(25, 25, 40, 0.98);
  border-radius: 10px;
  border: 2px solid #aa8844;
  z-index: 2000;
  padding: 15px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

#shop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 2px solid #aa8844;
  padding-bottom: 10px;
}

#shop-header h3 {
  margin: 0;
  color: #ffcc00;
}

#shop-gold { flex: none; }

#shop-close {
  background: #cc3333;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#shop-close:hover {
  background: #ff4444;
}

#shop-npc-message {
  background: rgba(50, 50, 70, 0.8);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-style: italic;
  color: #aaddff;
  min-height: 20px;
}

#shop-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.shop-tab {
  flex: 1;
  padding: 10px;
  background: rgba(60, 60, 80, 0.8);
  border: 1px solid #555;
  border-radius: 5px 5px 0 0;
  color: #aaa;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.shop-tab:hover {
  background: rgba(80, 80, 100, 0.8);
  color: #fff;
}

.shop-tab.active {
  background: rgba(100, 100, 140, 0.8);
  color: #ffcc00;
  border-bottom-color: transparent;
}

#shop-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 5px;
  margin-bottom: 10px;
}

.shop-item {
  background: rgba(60, 60, 80, 0.8);
  border: 1px solid #555;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.2s;
}

.shop-item:hover {
  background: rgba(80, 80, 120, 0.8);
  border-color: #888;
  transform: scale(1.05);
}

.shop-item.selected {
  border-color: #ffcc00;
  background: rgba(100, 100, 140, 0.8);
}

.shop-item .item-name {
  font-size: 12px;
  color: #ddd;
  word-break: break-word;
  margin-bottom: 5px;
}

.shop-item .item-price {
  font-size: 11px;
  color: #ffcc00;
  font-weight: bold;
}

.shop-item .item-stock {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: #88ff88;
}

.shop-item.out-of-stock {
  opacity: 0.5;
  cursor: not-allowed;
}

.shop-item.out-of-stock .item-stock {
  color: #ff4444;
}

.shop-item[class*="rarity-"] { border-left: 4px solid var(--rar); }

#shop-item-details {
  background: rgba(40, 40, 60, 0.9);
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #555;
  min-height: 120px;
}

.sell-btn-inline {
  background: rgba(80, 140, 80, 0.9);
  color: #fff;
  border: 1px solid #4a7;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s;
}

.sell-btn-inline:hover {
  background: rgba(100, 170, 100, 1);
}

.sell-btn-inline.sell-btn-all {
  background: rgba(80, 100, 160, 0.9);
  border-color: #68a;
}

.sell-btn-inline.sell-btn-all:hover {
  background: rgba(100, 120, 190, 1);
}

#shop-item-name {
  color: #ffcc00;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

#shop-item-desc {
  color: #aaa;
  font-size: 12px;
  margin-bottom: 8px;
}

#shop-item-stats {
  color: #88ff88;
  font-size: 12px;
  margin-bottom: 8px;
}

#shop-item-price {
  color: #ffcc00;
  font-weight: bold;
  margin-bottom: 10px;
}

#shop-action-btn {
  background: #228822;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  transition: background 0.2s;
}

#shop-action-btn:hover {
  background: #33aa33;
}

#shop-action-btn:disabled {
  background: #555;
  cursor: not-allowed;
}

#shop-action-btn.sell-btn {
  background: #cc6600;
}

#shop-action-btn.sell-btn:hover {
  background: #ff8800;
}

/* Quest UI */
#quest-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 650px;
  max-height: 700px;
  background-color: rgba(25, 25, 40, 0.98);
  border-radius: 10px;
  border: 2px solid #4a8844;
  z-index: 2000;
  padding: 15px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

#quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 2px solid #4a8844;
  padding-bottom: 10px;
}

#quest-header h3 {
  margin: 0;
  color: #88ff88;
}

#quest-close {
  background: #cc3333;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#quest-close:hover {
  background: #ff4444;
}

#quest-npc-message.is-error { color: #ff9a8f; font-weight: 700; }
#quest-npc-message {
  background: rgba(50, 70, 50, 0.8);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-style: italic;
  color: #aaffaa;
  min-height: 20px;
}

#quest-content {
  display: flex;
  gap: 10px;
}

#quest-list {
  flex: 1;
  max-height: 400px;
  overflow-y: auto;
  background: rgba(30, 30, 50, 0.8);
  border-radius: 5px;
  padding: 10px;
}

.quest-item {
  background: rgba(60, 60, 80, 0.8);
  border: 1px solid #555;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.quest-item:hover {
  background: rgba(80, 80, 120, 0.8);
  border-color: #888;
}

.quest-item.selected {
  border-color: #88ff88;
  background: rgba(70, 100, 70, 0.8);
}

.quest-item-name {
  font-weight: bold;
  color: #ddd;
  margin-bottom: 5px;
}

.quest-item-status {
  font-size: 11px;
  font-weight: bold;
}

.quest-available .quest-item-status {
  color: #ffcc00;
}

.quest-active .quest-item-status {
  color: #aaaaff;
}

.quest-completed .quest-item-status {
  color: #88ff88;
}

.no-quests {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

#quest-details {
  flex: 1.5;
  background: rgba(40, 40, 60, 0.9);
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #555;
}

#quest-title {
  color: #ffcc00;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

#quest-desc {
  color: #ccc;
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 1.4;
}

#quest-objectives h4,
#quest-rewards h4 {
  color: #aaddff;
  font-size: 14px;
  margin: 0 0 8px 0;
}

.quest-objective {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  background: rgba(50, 50, 70, 0.8);
  border-radius: 3px;
  margin-bottom: 5px;
  font-size: 12px;
}

.objective-complete {
  color: #88ff88;
  text-decoration: line-through;
}

.objective-progress {
  color: #ffcc00;
  font-weight: bold;
}

.quest-reward-list {
  background: rgba(50, 50, 70, 0.8);
  padding: 8px;
  border-radius: 3px;
}

.reward-item {
  color: #88ff88;
  font-size: 12px;
  margin-bottom: 3px;
}

#quest-action-btn {
  background: #228822;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  margin-top: 15px;
  transition: background 0.2s;
}

#quest-action-btn:hover {
  background: #33aa33;
}

#quest-action-btn:disabled {
  background: #555;
  cursor: not-allowed;
}

/* Quest Tracker (HUD) */
/* Ohne aktive Quests nichts zeigen — ein Kasten mit „No active quests"
   kostet nur Platz. QuestUI.updateTracker setzt die Klasse. */
#quest-tracker.is-empty {
  display: none;
}

#quest-tracker {
  position: fixed;
  top: 90px;
  right: 10px;
  width: 250px;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  border: 1px solid #4a8844;
  z-index: 1000;
  padding: 10px;
  color: #ffffff;
  font-size: 12px;
}

#quest-tracker-title {
  color: #88ff88;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #4a8844;
  padding-bottom: 5px;
}

.tracker-quest {
  margin-bottom: 10px;
}

.tracker-quest-name {
  color: #ffcc00;
  font-weight: bold;
  margin-bottom: 3px;
}

.tracker-objective {
  color: #ccc;
  font-size: 11px;
  margin-left: 10px;
  margin-bottom: 2px;
}

.tracker-objective.complete {
  color: #88ff88;
  text-decoration: line-through;
}

/* Crafting UI */
#crafting-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  max-height: 700px;
  background-color: rgba(25, 25, 40, 0.98);
  border-radius: 10px;
  border: 2px solid #cc8844;
  z-index: 2000;
  padding: 15px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  display: flex;
  flex-direction: column;
}

#crafting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 2px solid #cc8844;
  padding-bottom: 10px;
}

#crafting-header h3 {
  margin: 0;
  color: #ffbb66;
}

#crafting-close {
  background: #cc3333;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#crafting-close:hover {
  background: #ff4444;
}

#crafting-npc-message {
  background: rgba(50, 50, 70, 0.8);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-style: italic;
  color: #ffddaa;
  min-height: 20px;
}

#crafting-recipes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
  padding: 6px 4px;
}

.crafting-recipe {
  background: rgba(40, 40, 60, 0.85);
  border: 1px solid #5a4a33;
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.crafting-recipe[class*="rarity-"]:not(.rarity-common) { border-color: var(--rar); }

/* Herstellen: Ladebalken auf der Karte, danach Abzeichen „✓ …“ (CraftingUI.startCraft) */
.crafting-recipe { position: relative; }
.crafting-recipe .craft-progress {
  height: 10px;
  margin-top: 8px;
  border: 1px solid #c8a24a;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.crafting-recipe .craft-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c8742a, #ffd24a);
  box-shadow: 0 0 6px rgba(255, 200, 80, 0.6);
  transition-property: width;
  transition-timing-function: linear;
}
.crafting-recipe.is-crafting { border-color: #ffd24a; }
/* „2/5“ und „Stop“ unter dem Balken (Herstellen Stück für Stück, Server-Takt) */
.crafting-recipe .craft-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.crafting-recipe .craft-progress-label { font-weight: 700; color: #ffd24a; }
.crafting-recipe .craft-stop {
  min-height: 40px;
  min-width: 64px;
  padding: 6px 12px;
  font: inherit;
  font-weight: 700;
  color: var(--cream, #f4e6c4);
  background: #7a3a2e;
  border: 2px solid var(--ink, #1a1410);
  border-radius: 9px;
  cursor: pointer;
}
.crafting-recipe .craft-stop:disabled { opacity: 0.6; cursor: default; }
/* Sprung von einer Zutat: Karte kurz aufleuchten */
.crafting-recipe.craft-jump { animation: craft-jump 1.2s ease; }
@keyframes craft-jump {
  0%, 60% { box-shadow: 0 0 0 3px #ffd24a, 0 0 14px rgba(255, 210, 74, 0.7); }
  100% { box-shadow: none; }
}
.crafting-recipe .craft-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  background: rgba(24, 52, 22, 0.88);
  color: #c9f29a;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  padding: 0 12px;
  pointer-events: none;
  animation: craft-done 2.4s ease forwards;
}
@keyframes craft-done {
  0% { opacity: 0; transform: scale(0.94); }
  10% { opacity: 1; transform: scale(1.02); }
  18% { transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
.crafting-recipe.craft-fail { animation: craft-fail 0.36s ease; }
@keyframes craft-fail {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.crafting-recipe-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.crafting-recipe .recipe-name {
  color: #ffcc00;
  font-weight: bold;
  font-size: 15px;
}

.crafting-recipe .recipe-stats {
  color: #88ddff;
  font-size: 12px;
}

.crafting-recipe .recipe-desc {
  color: #bbb;
  font-size: 12px;
  font-style: italic;
}

.recipe-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ingredient {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.ingredient-have {
  background: rgba(70, 130, 70, 0.4);
  color: #c8ffc8;
  border: 1px solid rgba(120, 200, 120, 0.5);
}

.ingredient-missing {
  background: rgba(130, 60, 60, 0.4);
  color: #ffc8c8;
  border: 1px solid rgba(200, 100, 100, 0.5);
}

.craft-btn {
  align-self: flex-end;
  background: #cc8844;
  color: white;
  border: none;
  padding: 6px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.15s;
}

.craft-btn:hover:not(:disabled) {
  background: #dd9955;
}

.craft-btn:disabled {
  background: #555;
  color: #999;
  cursor: not-allowed;
}

.crafting-empty {
  text-align: center;
  color: #888;
  padding: 20px;
  font-style: italic;
}

@media (max-width: 768px) {
  #crafting-container {
    width: calc(100% - 32px);
    max-height: calc(100vh / var(--ui) - 80px);
    max-height: calc(100dvh / var(--ui) - 80px);
  }
}

/* Werte auf dem Feld (InventoryUI.statText) und im Menü mit Vergleich (▲/▼) */
.inventory-slot .item-stats { font-size: 10px; color: #b9e6a0; line-height: 1.1; margin-top: 1px; white-space: nowrap; }
.item-context-menu .ctx-stats { padding: 5px 15px; font-size: 12px; color: #b9e6a0; border-bottom: 1px solid #555; }
.item-context-menu .ctx-stats em { font-style: normal; margin-left: 4px; }
.item-context-menu .ctx-stats em.up { color: #6fcf5a; }
.item-context-menu .ctx-stats em.down { color: #ff7a6a; }
.item-context-menu .ctx-vs { color: #c8b89a; font-size: 10px; margin-top: 2px; }
.item-context-menu .ctx-destroy { color: #ff9a8a; }
.item-context-menu .ctx-destroy.is-armed { background: #7a2a22; color: #fff; }
.shop-pad-hint { grid-column: 1 / -1; font-size: 12px; color: #d9b86e; text-align: center; padding: 2px 0; }

/* Laden ⇄ Markt beim selben Händler (ShopUI #shop-to-market, MarketUI .market-to-shop, 12.10.2026) */
.shop-switch {
  flex: none;
  min-height: 34px;
  padding: 4px 10px;
  margin-left: auto;
  margin-right: 8px;
  border: 2px solid var(--ink, #221a12);
  border-radius: 8px;
  background: #3a2e1f;
  color: var(--cream, #f2e6c8);
  font: 700 13px var(--font-pixel, sans-serif);
  cursor: pointer;
}
.shop-switch[hidden] { display: none; }
.shop-switch:hover, .shop-switch:focus-visible { background: #4a3a26; }
body.touch-device .shop-switch { min-height: 40px; }

/* schmale Handys: Wechsel-Knopf in eine eigene Zeile unter den Kopf, sonst schob er das × aus dem Bild (360 px) */
#shop-header { flex-wrap: wrap; }
@media (max-width: 420px) {
  #shop-header .shop-switch { order: 5; flex-basis: 100%; margin: 6px 0 0; }
}

/* /css/mobile.css */
/* Touch-Steuerung (nur mit body.touch-device, siehe MobileControls).
   Aufteilung: rechts steuern (Daumen), links handeln. Farben und Knopf-Stil
   stehen in hud.css. */

#mobile-controls {
  display: none;
}

body.touch-device #mobile-controls {
  display: block;
}

/* Steuerfeld: rechte untere Bildschirmhälfte. Der Stick erscheint dort, wo
   der Daumen aufsetzt; der Ring in Ruhe zeigt nur, wo das Feld ist. */
#joystick-zone {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(58vw / var(--ui));
  height: calc(46vh / var(--ui));
  height: calc(46dvh / var(--ui));
  z-index: 1500;
  touch-action: none;
}

#joystick-idle {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px dashed rgba(246, 234, 206, 0.28);
  background: radial-gradient(circle, rgba(246, 234, 206, 0.10) 0 26px, transparent 27px);
  pointer-events: none;
  transition: opacity 0.2s;
}

#joystick-zone.is-active #joystick-idle {
  opacity: 0;
}

#joystick-base {
  display: none;
  position: absolute;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 3px solid rgba(246, 234, 206, 0.55);
  background: rgba(24, 33, 27, 0.35);
  box-shadow: 0 0 0 2px rgba(34, 26, 18, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#joystick-thumb {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brass);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Handeln: unten links, großer Aktionsknopf, der Beutel direkt darüber.
   Vorher stand der Beutel rechts neben dem Aktionsknopf, angehoben — fast in
   der Mitte unten (Feedback 29.09.: „kann auch woanders hin“), und am 360-px-
   Handy ragte er 29 px ins Stick-Feld (das beginnt bei 42 % der Breite). Über
   dem Aktionsknopf liegt er in derselben Daumen-Ecke (kurzer Weg nach oben),
   am Rand und weit weg von der Figur. */
#action-cluster {
  position: fixed;
  left: calc(10px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* nur die Knöpfe fangen Klicks, nicht die Lücke dazwischen (Maus-Audit 29.09.) */
  pointer-events: none;
}

#action-cluster > * {
  pointer-events: auto;
}

/* Laptop mit Touchscreen, gerade mit Maus/Touchpad bedient (MobileControls:
   body.mouse-active): das Stick-Feld (rechte untere Bildhälfte) fing sonst
   jeden Mausklick auf die Welt ab. Der erste Fingertipp schaltet es zurück. */
body.touch-device.mouse-active #joystick-zone {
  pointer-events: none;
}

/* Weiter-Knopf: rechts neben dem Aktionsknopf, nur bei mehreren Zielen (MobileControls) */
#action-cluster { position: fixed; }
#mobile-btn-next {
  position: absolute;
  left: calc(100% + 10px);
  bottom: 14px;
  width: 52px;
  height: 52px;
  padding: 0;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
#mobile-btn-next[hidden] { display: none; }
#mobile-btn-next .next-arrow { font-size: 20px; line-height: 1; color: var(--cream); }
#mobile-btn-next .next-count { font-size: 11px; font-weight: 700; color: var(--gold, #ffd24a); line-height: 1; }

/* Essen-Knopf über dem Beutel: nur hungrig mit Essen dabei (GameScene.refreshEatBtn), pulsiert leicht */
#mobile-btn-eat {
  width: 52px;
  height: 52px;
  gap: 0;
  animation: eat-pulse 1.4s ease-in-out infinite alternate;
}
#mobile-btn-eat .eat-icon { display: flex; line-height: 0; }
#mobile-btn-eat .eat-label { font-size: 10px; font-weight: 700; line-height: 1; color: var(--gold, #ffd24a); }
@keyframes eat-pulse {
  from { box-shadow: 0 0 0 0 rgba(255, 210, 74, 0); }
  to { box-shadow: 0 0 0 4px rgba(255, 210, 74, 0.45); }
}
/* PC: Hungerleiste anklicken oder F */
body:not(.touch-device) #mobile-btn-eat { display: none; }

/* Handy quer: wenig Höhe — Beutel wieder daneben (sonst stieße der Stapel an
   Minikarte und Chat-Knopf) */
@media (orientation: landscape) and (max-height: 520px) {
  #action-cluster {
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
  }

  #mobile-btn-inventory {
    order: 2;
    margin-bottom: 44px;
  }
  #mobile-btn-eat { order: 3; margin-bottom: 44px; }
}

/* ── Übersteuerungen fürs Handy ────────────────────── */

body.touch-device #instructions {
  display: none !important;
}

/* Chat (eingeklappt/offen, Handy und PC): client/css/chat.css */

/* Angepinnte Quests, aufgeklappt: auf dem Handy schmal rechts, auf Höhe der
   Minikarte — unter der Statusbox, sonst überdeckt die Leiste deren rechte Ecke.
   Die Kurzfassung (eine Zeile) steht unter dem ☰ (windows.css). */
body.touch-device #quest-tracker {
  top: var(--hud-bottom);
  right: 8px;
  width: min(190px, calc(100% - 16px));
  padding: 8px 10px;
}

/* Fenster (Inventar, Laden, Quest): ans Handy anpassen */
body.touch-device #inventory-container,
body.touch-device #shop-container,
body.touch-device #quest-container,
body.touch-device #crafting-container {
  width: calc(100% - 16px);
  max-width: 420px;
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  overflow-y: auto;
  padding: 10px;
}

/* Tippflächen am Handy ≥ 40 px (Eingabe-Parität 28.09.: Reiter 32 px,
   „Sell 1“ 27 px, Stecknadel 21 px, Heimkehr 34 px trafen daneben). Wo mehr
   Höhe die Liste aufbläht, wächst nur die unsichtbare Trefferfläche. */
body.touch-device .cat-tab,
body.touch-device .shop-tab,
body.touch-device .craft-btn {
  min-height: 40px;
}

body.touch-device .sell-btn-inline,
body.touch-device .skill-pin {
  position: relative;
}

body.touch-device .sell-btn-inline::after,
body.touch-device .skill-pin::after,
body.touch-device #recall-btn::after {
  content: '';
  position: absolute;
  inset: -9px -3px;
}

/* über der Fortschrittsleiste darunter (die liegt sonst obenauf) */
body.touch-device .skill-pin {
  z-index: 1;
}

body.touch-device .skill-pin::after {
  inset: -12px -4px;
}

body.touch-device #recall-btn::after {
  inset: -4px;
  border-radius: 50%;
}

/* UI-Audit 29.09. (scripts/ui-audit.js, Handy/Tablet): weitere Tippflächen unter
   40 px. Minikarten-Zoom bleibt sichtbar 26 px (sitzt am Kreis), trifft aber gut
   40 px — nach rechts mehr, links ist gleich der Bildschirmrand. */
body.touch-device #minimap-zoom::after {
  content: '';
  position: absolute;
  inset: -10px -14px -10px -6px;
}

body.touch-device #quest-tracker.is-compact,
body.touch-device .journal-pin,
body.touch-device .cb-flee {
  min-height: 40px;
  box-sizing: border-box;
}

body.touch-device #quest-tracker.is-compact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* über dem Stick-Feld: am kleinen Handy (360×640) mit Gruppenrahmen rutscht die
     Quest-Leiste in dessen obere Kante, ein Tipp startete den Stick statt das Tagebuch */
  z-index: 1550;
}

/* Gruppen-Kopfzeile: sichtbar 32 px, Trefferfläche 40 px (die Statusbox soll
   mit Gruppe am 360×640-Handy nicht bis in die Bildmitte reichen) */
body.touch-device .pf-head {
  position: relative;
  z-index: 1;
  min-height: 32px;
  box-sizing: border-box;
}

/* nach oben in den Abstand zur Hunger-Zeile (nicht antippbar), nicht nach
   unten — dort beginnen die Kacheln */
body.touch-device .pf-head::after {
  content: '';
  position: absolute;
  inset: -11px -2px 0;
}

/* Schmales Handy (≤ 380 px): Minikarte etwas kleiner, Heimkehr-Knopf nicht
   über ihren Rand hinaus — sonst ragen beide in die freie Mitte */
@media (max-width: 380px) {
  body.touch-device {
    --minimap: 92px;
  }

  body.touch-device #recall-btn {
    left: calc(8px + var(--minimap) - 38px);
  }
}

body.touch-device .item-context-menu button {
  min-height: 44px;
}

/* Ultimate: Tippfläche ≥ 40 px, aber nicht mehr über die ganze Breite (Christian 13.10.: „Energie-Leiste sehr groß“) */
body.touch-device #combat-ui .cb-ult {
  height: 40px;
  width: min(240px, 70%);
  align-self: center;
}

/* ── Linkshänder (Menü „Stick: Left“, body.stick-left): Seiten gespiegelt ──
   Stick-Feld links unten, Aktionsknopf + Beutel rechts unten, Weiter-Knopf links daneben. */
body.stick-left #joystick-zone {
  right: auto;
  left: 0;
}

body.stick-left #joystick-idle {
  right: auto;
  left: calc(14px + env(safe-area-inset-left));
}

body.stick-left #action-cluster {
  left: auto;
  right: calc(10px + env(safe-area-inset-right));
}

body.stick-left #mobile-btn-next {
  left: auto;
  right: calc(100% + 10px);
}

@media (orientation: landscape) and (max-height: 520px) {
  /* quer: Beutel nach innen (links vom Aktionsknopf), der Aktionsknopf bleibt am Rand */
  body.stick-left #mobile-btn-inventory {
    order: 0;
  }
}

/* ── Handy: HUD in die Ecken (Thone 18.10.: „Spielerkarte kleiner und in die Ecke, man kann manche Benachrichtigung
   nicht lesen“; Menü, Aktionsknöpfe und Stick weiter an den Rand). Spielerkarte schmaler (Gesicht 34 px), die
   Gruppenrahmen darunter behalten ihre Tippflächen; Minikarte/Quest-Leiste/Chat folgen über --hud-bottom. */
body.touch-device #stats-container {
  top: calc(4px + env(safe-area-inset-top));
  left: calc(4px + env(safe-area-inset-left));
  width: 188px;              /* 216 → 188: Gruppenrahmen darunter bleiben voll groß (Tippflächen ≥ 40 px) */
  padding: 4px 5px 5px;
  row-gap: 3px;
}
body.touch-device #hud-profile { grid-template-columns: 34px 1fr auto; column-gap: 6px; row-gap: 3px; padding: 2px 3px 3px; }
body.touch-device .hud-face { width: 34px; height: 34px; background-position: -19px -11px; }
body.touch-device #player-name { font-size: 14px; }
body.touch-device #menu-btn {
  top: calc(4px + env(safe-area-inset-top));
  right: calc(4px + env(safe-area-inset-right));
  width: 46px;
  height: 46px;
}
body.touch-device #minimap { left: calc(4px + env(safe-area-inset-left)); }

/* /css/hud.css */
/* HUD im Stil der Welt: dunkles Waldgrün, Messingrand, cremefarbene
   Pixel-Schrift. Gilt für Handy und Desktop; Touch-Aufteilung in mobile.css. */

:root {
  --panel: rgba(24, 33, 27, 0.9);
  --panel-solid: #18211b;
  --ink: #221a12;
  --brass: #d9b86e;
  --brass-dark: #8c6a35;
  --cream: #f6eace;
  --muted: #b7c2a8;
  --hp: #e0493f;
  --hp-dark: #8f2621;
  --xp: #9bd46a;
  --gold: #f2c75c;
  /* Unterkante der Statusbox + Abstand; main.js misst sie nach (die Box wächst mit ihren Zeilen) */
  --hud-bottom: calc(92px + env(safe-area-inset-top));
  /* Minikarte: Größe steuert auch, wo der Chat darunter anfängt */
  --minimap: 104px;
  --font-pixel: 'Pixelify Sans', ui-rounded, system-ui, sans-serif;
  /* HUD-Maßstab, setzt main.js (applyUiScale) */
  --ui: 1;
}

/* Großer Bildschirm: HUD, Fenster und Kampfoberfläche mitwachsen lassen, das
   Spielbild nicht (dessen Größe regelt der Kamera-Zoom). Achtung: zoom
   vergrößert auch vh/dvh — in gezoomten Elementen calc(100vh / var(--ui)). */
body > :not(#game-container) {
  zoom: var(--ui);
}

/* Vor dem Spielstart (Anmelden, Laden) kein HUD — sonst hängen halbe
   Kästen über dem Ladebalken. GameScene nimmt die Klasse beim Spawn weg. */
body.pre-game #stats-container,
body.pre-game #chat-container,
body.pre-game #connection-status,
body.pre-game #player-count,
body.pre-game #quest-tracker,
body.pre-game #mobile-controls,
body.pre-game #menu-btn,
body.pre-game #logout-btn,
body.pre-game #instructions {
  display: none !important;
}

/* Im Kampf zeigt die Kampfszene alles Nötige; HUD-Knöpfe würden die
   Kampfknöpfe verdecken und deren Tipps schlucken. */
body.in-combat #mobile-controls,
body.in-combat #menu-btn,
body.in-combat #stats-container,
body.in-combat #chat-container,
body.in-combat #quest-tracker,
body.in-combat #quest-journal,
body.in-combat #look-picker,
body.in-combat #instructions {
  display: none !important;
}

/* Spielerzahl und Logout wohnen im Menü */
#player-count,
#logout-btn {
  display: none !important;
}

/* ── Gemeinsamer Kasten ───────────────────────────── */
#stats-container,
#menu-btn,
.hud-btn,
.menu-sheet,
#quest-tracker,
#connection-status,
#instructions {
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-family: var(--font-pixel);
}

/* ── Spielerkarte oben links ──────────────────────── */
/* Oben der Knopf fürs Profil (Gesicht, Name, Leisten — ProfileUI.js), darunter
   hängt PartyUI die Gruppen-Rahmen an (eigene Zeile, eigener Tipp). */
#stats-container {
  top: calc(8px + env(safe-area-inset-top));
  left: 8px;
  min-width: 0;
  width: 216px;
  padding: 5px 6px 6px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4px;
}

#hud-profile {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-areas: "face name name" "face hp hp" "face xp xp" "food food day";
  column-gap: 7px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 3px 4px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#hud-profile:hover { background: rgba(255, 240, 200, 0.06); }
#hud-profile:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }
#hud-profile:active .hud-face { transform: translateY(1px); }
#hud-profile > span { display: block; }

/* Kaputte Waffe/Rüstung (InventoryUI.updateBrokenBadge): Hammer unten rechts am Gesicht */
.hud-broken {
  position: absolute;
  right: -4px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #8a2a1e;
  border: 1px solid #f0a090;
  color: #fff;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.hud-broken[hidden] { display: none; }

/* Kopf aus dem ersten Bild des Lauf-Blatts (24×24, 4×4 Bilder), 3-fach */
.hud-face {
  grid-area: face;
  align-self: start;
  position: relative;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background-color: #4d6a4a;
  background-image: none;
  background-repeat: no-repeat;
  background-size: 288px 288px;
  background-position: -16px -8px;
  box-shadow: inset 0 0 0 1px var(--brass-dark), inset 0 -10px 0 rgba(0, 0, 0, 0.18);
  image-rendering: pixelated;
}

#player-name {
  grid-area: name;
  color: var(--cream);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Level als Abzeichen unten am Gesicht: der Name bekommt die ganze Breite */
#player-level {
  grid-area: face;
  align-self: end;
  justify-self: center;
  position: relative;
  z-index: 1;
  margin-bottom: -2px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--gold);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 4px;
  border-radius: 4px;
  margin: 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  white-space: nowrap;
}

.hud-bar,
#health-bar-container,
#exp-bar-container {
  position: relative;
  margin: 0;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

#health-bar,
#exp-bar,
#food-bar {
  display: block;
  height: 100%;
}

#health-bar-container {
  grid-area: hp;
  height: 16px;
}

#health-bar {
  background: linear-gradient(180deg, #f58a7e 0 30%, var(--hp) 30% 75%, #a8322b 75% 100%);
  border-radius: 1px;
  transition: width 0.3s ease;
}

#health-bar-container.is-low {
  border-color: #ff5a4f;
}
#health-bar-container.is-low #health-bar {
  animation: food-low 0.7s ease-in-out infinite alternate;
}

#exp-bar-container {
  grid-area: xp;
  height: 8px;
}

#exp-bar {
  background: linear-gradient(180deg, #b6a6ff 0 40%, var(--xp) 40% 100%);
  border-radius: 0;
  transition: width 0.4s ease;
}

/* Viertel-Striche auf der XP-Leiste: man sieht, wie weit es noch ist */
#exp-bar-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent calc(25% - 1px), rgba(13, 19, 15, 0.7) calc(25% - 1px) 25%, transparent 25% calc(50% - 1px), rgba(13, 19, 15, 0.7) calc(50% - 1px) 50%, transparent 50% calc(75% - 1px), rgba(13, 19, 15, 0.7) calc(75% - 1px) 75%, transparent 75%);
  pointer-events: none;
}

#health-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  white-space: nowrap;
}

#exp-text {
  display: none;
}

/* ── Menüknopf oben rechts ────────────────────────── */
#menu-btn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 22px;
  height: 4px;
  background: var(--cream);
  box-shadow: 0 2px 0 var(--ink);
  position: relative;
}

.burger::before,
.burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.burger::before { top: -8px; }
.burger::after { top: 8px; }

/* Verbindung: nur zeigen, wenn sie weg ist */
#connection-status {
  top: calc(8px + env(safe-area-inset-top));
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--gold);
}

#connection-status.is-connected {
  display: none;
}

/* ── Knöpfe ───────────────────────────────────────── */
.hud-btn {
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.06s, filter 0.15s, opacity 0.15s;
}

.hud-btn:active,
.hud-btn.is-pressed {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 0 0 2px var(--brass), 0 1px 0 rgba(0, 0, 0, 0.35);
}

.hud-btn-lg {
  width: 88px;
  height: 88px;
  --u: 48px;
}

.hud-btn-sm {
  width: 62px;
  height: 62px;
  --u: 40px;
}

.hud-btn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink);
  line-height: 1;
}

/* Aktionsknopf ohne Ziel in Reichweite: gedämpft, aber tippbar */
.hud-btn-lg.is-idle {
  opacity: 0.55;
}

.hud-btn-lg.is-ready {
  box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 3px rgba(242, 199, 92, 0.35), 0 3px 0 rgba(0, 0, 0, 0.35);
}

/* ── Pixel-Icons (assets/ui/icons.png, 20-px-Zellen) ── */
.ui-icon {
  --u: inherit;
  display: block;
  width: var(--u, 32px);
  height: var(--u, 32px);
  background-image: var(--icons-img, url('/assets/ui/icons.png'));
  background-repeat: no-repeat;
  /* Zellenzahl = Einträge in assets/ui/icons.json (20 seit 24.10.2026: spear, fist) */
  background-size: calc(var(--u, 32px) * 20) var(--u, 32px);
  background-position: calc(var(--ix, 0) * var(--u, 32px) * -1) 0;
  image-rendering: pixelated;
  flex: none;
}

.ui-icon[data-icon="sword"] { --ix: 0; }
.ui-icon[data-icon="axe"] { --ix: 1; }
.ui-icon[data-icon="pick"] { --ix: 2; }
.ui-icon[data-icon="bag"] { --ix: 3; }
.ui-icon[data-icon="chest"] { --ix: 4; }
.ui-icon[data-icon="scroll"] { --ix: 5; }
.ui-icon[data-icon="letter"] { --ix: 6; }
.ui-icon[data-icon="book"] { --ix: 7; }
.ui-icon[data-icon="potion"] { --ix: 8; }
.ui-icon[data-icon="key"] { --ix: 10; }
.ui-icon[data-icon="gate"] { --ix: 11; }
.ui-icon[data-icon="coin"] { --ix: 12; }
.ui-icon[data-icon="heart"] { --ix: 9; }
.ui-icon[data-icon="gem"] { --ix: 13; }
.ui-icon[data-icon="shield"] { --ix: 14; }
.ui-icon[data-icon="helmet"] { --ix: 15; }
.ui-icon[data-icon="apple"] { --ix: 16; }
.ui-icon[data-icon="mushroom"] { --ix: 17; }
.ui-icon[data-icon="spear"] { --ix: 18; }
.ui-icon[data-icon="fist"] { --ix: 19; }

/* ── Menüblatt ────────────────────────────────────── */
#game-menu,
#feedback-dialog {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 12, 9, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-menu[hidden],
#feedback-dialog[hidden] {
  display: none;
}

.menu-sheet {
  width: min(420px, calc(100% - 16px));
  border-radius: 12px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: menu-in 0.16s ease-out;
}

body.touch-device #game-menu,
body.touch-device #feedback-dialog {
  align-items: flex-end;
}

body.touch-device .menu-sheet {
  width: 100%;
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

/* Menü nie höher als der sichtbare Schirm: als Gast (Passwort-Feld) wuchs das unten
   angedockte Blatt am Handy über den oberen Rand, das × war unerreichbar (Feedback
   29.09., Chrome Android). Jetzt scrollt das Blatt innen, der Kopf mit × bleibt stehen. */
.menu-sheet {
  max-height: calc(100dvh / var(--ui) - 16px);
  overflow-y: auto;
  /* Scrollleiste im Rahmenton — Android zeigte sie hell als „weißen Balken am Rand“ (Feedback #32, Spielermenü) */
  scrollbar-width: thin;
  scrollbar-color: var(--brass-dark) transparent;
  overscroll-behavior: contain;
}
.menu-sheet > * {
  /* Blatt ist eine Flex-Spalte mit max-height: ohne das schrumpften am kurzen Handy
     die Knöpfe statt zu scrollen („Feedback & bugs“ 46 → 32 px, UI-Audit 29.09.) */
  flex-shrink: 0;
}
.menu-sheet > .menu-head {
  position: sticky;
  top: -14px;                 /* = padding-top des Blatts */
  z-index: 2;
  margin: -14px -14px 0;
  padding: 14px 14px 8px;
  background: var(--panel);
}

@keyframes menu-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.menu-online {
  flex: 1;
  min-height: 40px;            /* Tippfläche am Handy */
  padding: 0 4px;
  border: 0;
  background: none;
  font: 13px var(--font-pixel);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.menu-online::after { content: ' ▾'; font-size: 10px; }
.menu-online[aria-expanded="true"]::after { content: ' ▴'; }
.menu-online:hover, .menu-online:focus-visible { color: var(--cream); }

/* Wer ist online (online:list): Namen als kleine Zeilen, kämpft/weg dahinter */
.menu-online-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  max-height: calc(30dvh / var(--ui, 1));
  overflow-y: auto;
  margin: -4px 0 10px;
  font: 12px var(--font-pixel);
}

.menu-online-list span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--cream);
  white-space: nowrap;
}

.menu-online-list span.is-me { color: var(--gold); }
.menu-online-list span em { font-style: normal; color: var(--muted); margin-left: 4px; }
.menu-online-list span.is-away { opacity: 0.6; }

.menu-x {
  flex: none;                 /* in engen Köpfen nicht unter 40 px quetschen */
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  font-family: var(--font-pixel);
  cursor: pointer;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.menu-tile,
.menu-logout,
.menu-feedback,
.menu-pill {
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-tile {
  --u: 48px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.menu-tile:active,
.menu-logout:active,
.menu-feedback:active,
.menu-pill:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.4);
}

.menu-tile.is-on {
  background: #3b4a33;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}

.menu-label {
  flex: 1;
  font-size: 15px;
  color: var(--cream);
  font-family: var(--font-pixel);
}

.menu-pill {
  width: 48px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
}

.menu-zoom {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-pixel);
  color: var(--gold);
  font-size: 15px;
}

/* UI size: Wert ist selbst ein Knopf (Tipp/A schaltet reihum), sonst wie der Zoom-Wert */
.menu-uiscale {
  min-width: 64px;
  height: 40px;
  padding: 0 6px;
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--gold);
  background: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-hint {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--muted);
  margin-top: -6px;
  padding: 0 2px;
}

body:not(.touch-device) .menu-hint {
  display: none;
}

.menu-logout {
  --u: 28px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  background: #4a2622;
}

/* ── Quest-Tracker im selben Stil ─────────────────── */
#quest-tracker {
  border-radius: 8px;
}

#quest-tracker-title {
  color: var(--gold);
  font-family: var(--font-pixel);
  border-bottom-color: var(--brass-dark);
}

#instructions {
  border-radius: 8px;
}

.menu-toggle {
  width: 64px;
  font-size: 15px;
}

/* Verbindung weg: über allem, bis nach dem Wiederverbinden neu geladen wird */
#reconnect-note {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.72);
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 20px;
  text-shadow: 0 2px 0 var(--ink);
}

/* Verbindung kurz weg (App im Hintergrund, Funkloch): kleine Pille statt
   Vollbild, Spielbild gedimmt, Eingaben gesperrt, bis main.js (EryndorNet)
   still wieder angemeldet und die Szene nachgeführt hat. Kein Neuladen. */
#net-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 19500;
  min-height: 40px;
  padding: 8px 16px 8px 34px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(28, 38, 30, 0.94);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
#net-pill[hidden] { display: none; }
#net-pill::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  border-right-color: transparent;
  animation: net-spin 0.9s linear infinite;
}
#net-pill.is-tap { pointer-events: auto; cursor: pointer; color: var(--gold); }
#net-pill.is-tap::before { animation: none; border-color: var(--gold); }
@keyframes net-spin { to { transform: rotate(360deg); } }
body.net-offline #game-container { filter: saturate(0.55) brightness(0.72); transition: filter 0.3s; }
/* Eingaben sperren (HUD und Spielbild); die Pille liegt darüber */
body.net-offline::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 19000;
}

/* ── Gebietsbanner beim Betreten eines Gebiets ────── */
#region-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1500;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-pixel);
  opacity: 0;
}

/* Server-Ansagen (Boss besiegt/zurück, Ereignisse): HTML-Banner mittig unter dem HUD, gut lesbar auf Handy und PC
   (GameScene.showAnnouncement; vorher ein Phaser-Banner hinter Statusfeld und Tracker) */
#announce-banner {
  position: fixed;
  top: max(18%, calc(var(--hud-bottom) + 16px));
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 1550;
  width: max-content;
  max-width: min(560px, calc(100vw / var(--ui) - 32px));
  padding: 10px 18px 11px;
  box-sizing: border-box;
  font: 700 18px/1.25 var(--font-pixel);
  text-align: center;
  color: #f6eace;
  text-shadow: 0 2px 0 var(--ink);
  background: linear-gradient(180deg, rgba(40, 32, 22, 0.96), rgba(22, 18, 12, 0.96));
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #8c6a35, 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
}
#announce-banner.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.25s, transform 0.25s, visibility 0s; }
#announce-banner[data-type="event"], #announce-banner[data-type="boss"] { box-shadow: inset 0 0 0 2px #f2c75c, 0 0 18px rgba(242, 199, 92, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45); }
#announce-banner[data-type="warning"], #announce-banner[data-type="maintenance"] { box-shadow: inset 0 0 0 2px #e0652a, 0 6px 18px rgba(0, 0, 0, 0.45); }
/* Handy: unter Minikarte und Chat-Zeile (wie #region-banner), kleiner */
body.touch-device #announce-banner { top: max(22%, calc(var(--hud-bottom) + var(--minimap) + 50px)); font-size: 15px; padding: 8px 12px 9px; }
body.in-combat #announce-banner { top: 12%; }

#region-banner.is-on {
  animation: region-in 3.2s ease-out forwards;
}

#region-banner .rb-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
}

#region-banner .rb-sub {
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 2px 0 var(--ink);
  margin-top: 2px;
}

/* Beim Verlassen des Dorfs: draußen jagen Gegner */
#region-banner .rb-warn {
  font-size: 13px;
  font-weight: 700;
  color: #ff5a4f;
  text-shadow: 0 2px 0 var(--ink);
  margin-top: 3px;
}

#region-banner .rb-warn:empty {
  display: none;
}

body.in-combat #region-banner {
  display: none;
}

/* Handy: unter Minikarte und Chat-Zeile statt darüber (Playbot 19.10.: „Greenhollow“ lag auf der
   Chat-Kurzzeile neben der Minikarte) — Chat steht bei --hud-bottom + --minimap + 14 px, eine Zeile hoch */
body.touch-device #region-banner {
  top: max(22%, calc(var(--hud-bottom) + var(--minimap) + 50px));
}
body.touch-device #region-banner .rb-name { font-size: 26px; }

@keyframes region-in {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Pfeile am Rand: Heim und Questziel ────────────── */
.nav-arrow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  width: 0;
  height: 0;
}

.nav-arrow[hidden] {
  display: none;
}

body.pre-game .nav-arrow,
body.in-combat .nav-arrow {
  display: none;
}

/* Spitze: Kreis mit Dreieck, dreht sich zum Ziel */
.nav-tip {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 2px 0 rgba(0, 0, 0, 0.35);
}



#nav-home .nav-tip {
  box-shadow: inset 0 0 0 2px #5f8f3e, 0 2px 0 rgba(0, 0, 0, 0.35);
}


.nav-label {
  position: absolute;
  left: 22px;
  top: -9px;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 0 0 4px rgba(0, 0, 0, 0.8);
}


.nav-arrow.label-left .nav-label {
  left: auto;
  right: 22px;
}

.nav-arrow.label-up .nav-label {
  top: -38px;
  left: -40px;
}

/* ── Minikarte (oben links unter der Statusbox) ───── */
#minimap {
  position: fixed;
  top: var(--hud-bottom);
  left: 8px;
  width: var(--minimap);
  height: var(--minimap);
  z-index: 1100;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  background: #1b241d;
  cursor: pointer;
  opacity: 0.92;
}

#minimap canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

/* Zoom der Minikarte (zwei Stufen), unten links am Kreis — rechts sitzt die Heimkehr */
#minimap-zoom {
  position: fixed;
  top: calc(var(--hud-bottom) + var(--minimap) - 24px);
  left: 4px;
  width: 26px;
  height: 26px;
  z-index: 1101;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--panel-solid);
  box-shadow: inset 0 0 0 1px var(--brass-dark);
  color: var(--cream);
  font: 700 16px/1 var(--font-pixel);
  cursor: pointer;
}

body.pre-game #minimap-zoom,
body.in-combat #minimap-zoom,
body.pre-game #minimap,
body.in-combat #minimap,
body.in-combat #world-map {
  display: none;
}

/* ── Große Karte ──────────────────────────────────── */
#world-map {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.6);
  padding: 12px;
}

#world-map[hidden] {
  display: none;
}

.wm-sheet {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  height: min(760px, calc(100dvh / var(--ui) - 24px));
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  padding: 10px;
  font-family: var(--font-pixel);
  color: var(--cream);
}

.wm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.wm-title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.wm-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.wm-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(24, 33, 27, 0.85);
  border: 1px solid var(--brass-dark);
  font-size: 12px;
  color: var(--cream);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.6s;
}

.wm-hint.wm-hint-off {
  opacity: 0;
}

/* „Me“ ist der wichtigste Knopf der Karte: breiter und in Gold */
.menu-pill.wm-center {
  width: auto;
  padding: 0 12px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--gold);
}

/* Absolut im Rahmen: ein Canvas im Flex-Layout nimmt sonst seine
   Pixelgröße als Seitenverhältnis und füllt die Höhe nicht */
.wm-canvas {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 2px solid var(--ink);
  touch-action: none;
  cursor: grab;
  image-rendering: pixelated;
}

.wm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.wm-legend i.wm-me {
  background: #fff;
  clip-path: polygon(100% 50%, 0 0, 30% 50%, 0 100%);
  border: 0;
}

.wm-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
}

/* ── Heimkehr-Schnellknopf an der Minikarte ───────── */
#recall-btn {
  position: fixed;
  top: calc(var(--hud-bottom) + var(--minimap) - 30px);
  left: calc(8px + var(--minimap) - 30px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 1150;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#recall-btn[hidden] {
  display: none;
}

#recall-btn .ui-icon {
  --u: 22px;
}

/* Gratis-Heimkehr gesperrt und keine Rolle: matt; Restzeit oben rechts */
#recall-btn.is-locked { opacity: 0.55; }
.recall-count[hidden], .recall-cd[hidden] { display: none; }
.recall-cd {
  position: absolute;
  left: -8px;           /* oben rechts sitzt der Tasten-Hinweis „R“ */
  top: -6px;
  min-width: 18px;
  height: 15px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--ink);
  border: 1px solid var(--brass-dark);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 13px;
  text-align: center;
}

.recall-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--brass-dark);
  border: 1px solid var(--ink);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

body.pre-game #recall-btn,
body.in-combat #recall-btn {
  display: none;
}

/* Seite nie per Pinch zoomen (Kamera-Zoom macht das Spiel selbst) */
html,
body {
  touch-action: pan-x pan-y;
}

/* Pfeile klein und farbcodiert: Farbe = Pin-Farbe der Quest (--nav) */

.nav-quest .nav-tip {
  box-shadow: inset 0 0 0 2px var(--nav, var(--brass-dark)), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.nav-quest .nav-label {
  color: var(--nav, var(--gold));
}

#nav-home .nav-label {
  color: #9bd46a;
}

.nav-tip {
  transform-origin: 50% 50%;
}

.nav-arrow .nav-tip {
  width: 28px;
  height: 28px;
  left: -14px;
  top: -14px;
}


.nav-label {
  font-size: 11px;
  left: 18px;
  top: -8px;
}

.nav-arrow.label-left .nav-label {
  right: 18px;
}

.nav-arrow.label-up .nav-label {
  top: -30px;
  left: -14px;
}

/* Pfeilspitze: SVG-Dreieck (zeigt bei 0° nach rechts, dreht mit .nav-tip) */
.nav-tip svg {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  fill: var(--nav, var(--cream));
  transform-origin: 50% 50%;
}

#nav-home .nav-tip svg {
  fill: #9bd46a;
}

/* Kreis deckend: sonst scheint Gelände durch und die Spitze wirkt wie ein Stern */
.nav-arrow .nav-tip {
  background: var(--panel-solid);
}

/* Handy: dicht am Rand (NavArrows.place), Kreis 30 px, Meter 12 px in einer Pille (seit 12.10.; 22 px und 10 px
   waren im Durchspiel-Test kaum lesbar). Antippen erklärt den Pfeil (NavArrows.explain), Trefferfläche 44 px. */
body.touch-device .nav-arrow .nav-tip {
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
}

body.touch-device .nav-tip svg {
  left: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
}

body.touch-device .nav-label {
  font-size: 12px;
  font-weight: 700;
  left: 17px;
  top: -10px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(16, 22, 18, 0.78);
}

body.touch-device .nav-arrow.label-left .nav-label {
  left: auto;
  right: 17px;
}

body.touch-device .nav-arrow.label-up .nav-label {
  top: -36px;
  left: -15px;
}

/* Spitze antippbar (Pfeil selbst bleibt durchlässig) */
.nav-arrow .nav-tip {
  pointer-events: auto;
  cursor: pointer;
}

body.touch-device .nav-arrow .nav-tip::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}

.nav-arrow.no-label .nav-label {
  display: none;
}

/* Handy quer: wenig Höhe — Minikarte kleiner, damit sie nicht auf dem Aktionsknopf liegt */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch-device {
    --minimap: 76px;
  }

  body.touch-device #recall-btn {
    top: calc(var(--hud-bottom) + var(--minimap) - 26px);
    left: calc(8px + var(--minimap) - 24px);
    width: 34px;
    height: 34px;
  }
}

/* Beutel am Todesort (Survival) */
#nav-bag .nav-tip {
  box-shadow: inset 0 0 0 2px #ff5a4f, 0 2px 0 rgba(0, 0, 0, 0.35);
}

#nav-bag .nav-label {
  color: #ff5a4f;
}


/* Hunger (Survival): dünne Leiste unter der XP, rechts Tag/Nacht */
#food-bar-container {
  grid-area: food;
  position: relative;
  height: 8px;
  margin: 0;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

#food-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #f2c27a 0 40%, #e0a24a 40% 100%);
  transition: width 0.4s ease;
}

#food-bar-container.is-low #food-bar {
  background: #ff5a4f;
  animation: food-low 1s ease-in-out infinite alternate;
}

/* Hungrig: die Leiste wird höher und sagt, was los ist — die dünne Linie wurde übersehen
   (Meryem verlor Leben „im Wald“ und wusste nicht warum). */
#food-text {
  display: none;
  position: absolute;
  inset: 0;
  font-size: 9px;
  line-height: 11px;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  color: #fff6e0;
  text-shadow: 0 1px 0 #2a0c0c;
  white-space: nowrap;
  overflow: hidden;
}
#food-bar-container.is-low { height: 15px; }
#food-bar-container.is-low #food-text { display: block; }
#food-bar-container.is-starving { border-color: #ff5a4f; background: #4a1414; }

#starve-vignette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  box-shadow: inset 0 0 90px 18px rgba(200, 30, 30, 0.55);
  animation: starve-pulse 1.6s ease-in-out infinite alternate;
}
body.is-starving #starve-vignette { display: block; }
body.pre-game #starve-vignette, body.in-combat #starve-vignette { display: none; }
@keyframes starve-pulse {
  from { opacity: 0.25; }
  to { opacity: 0.9; }
}

@keyframes food-low {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

#day-indicator {
  grid-area: day;
  justify-self: end;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1;
  color: #f2c75c;
  text-shadow: 0 1px 0 var(--ink);
  white-space: nowrap;
}

#day-indicator.is-night {
  color: #9fb4ff;
}

/* Gast: Charakter mit Passwort sichern */
.menu-guest {
  font-family: var(--font-pixel);
  background: #2f3a24;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.35);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-guest[hidden],
.menu-guest-form[hidden] {
  display: none;
}

.menu-guest-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--cream);
}

.menu-guest-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Passwort + Auge (zweimal: Tippfehler würden den Gast aussperren) */
.menu-guest-row {
  display: flex;
  gap: 6px;
}

.menu-guest-eye {
  flex: 0 0 44px;
  min-height: 44px;
  font-size: 18px;
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.menu-guest-eye.is-on {
  background: var(--brass);
}

.menu-guest-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.menu-guest-save {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  background: #3f7a45;
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 0 16px;
  min-height: 44px;
  cursor: pointer;
}

.menu-guest-msg:empty {
  display: none;
}

.menu-guest-msg {
  font-size: 13px;
}

.menu-guest-msg.error {
  color: #ff9a8a;
}

.menu-guest-msg.success {
  color: #9bd46a;
}

/* Gast: Name ändern (über dem Passwort-Teil, durch eine Linie getrennt) */
.menu-guest-rename {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(232, 220, 192, 0.18);
}

.menu-guest-label {
  font-size: 13px;
  color: var(--muted);
}

/* Feedback */
.menu-feedback {
  --u: 28px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
}

.feedback-sheet {
  max-height: calc(100dvh / var(--ui) - 16px);
  overflow-y: auto;
}

.feedback-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.feedback-kind,
.feedback-shot,
.feedback-send {
  font-family: var(--font-pixel);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.feedback-kind {
  height: 40px;
  font-size: 15px;
  background: #2a352c;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}

.feedback-kind.is-on {
  color: var(--ink);
  background: var(--brass);
}

.feedback-text {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.feedback-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-shot {
  position: relative;
  width: 96px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  background: #121912;
}

.feedback-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feedback-shot.is-off img {
  opacity: 0.3;
  filter: grayscale(1);
}

.feedback-shot-tag {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(8, 12, 9, 0.8);
  color: var(--cream);
}

.feedback-add {
  font-size: 13px;
  color: var(--muted);
  border-style: dashed;
}

.feedback-note {
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* Das @ der Pixelschrift ist winzig — in der Adresse eine normale Schrift dafür */
.feedback-mail { color: var(--cream); white-space: nowrap; }
.feedback-mail .at { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.15em; font-weight: 600; padding: 0 1px; }

.feedback-msg:empty {
  display: none;
}

.feedback-msg {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--cream);
}

.feedback-msg.error {
  color: #ff9a8a;
}

.feedback-send {
  height: 46px;
  font-size: 17px;
  font-weight: 700;
  background: #3f7a45;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.feedback-send:disabled {
  opacity: 0.6;
}

/* Controller (GamepadInput.js): Fokusrahmen in Fenstern, Statuszeile im Menü */
.pad-focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(242, 199, 92, 0.25) !important;
}

.menu-pad {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px 6px;
}

/* Am PC mit Controller: nur der Aktionsknopf aus der Touch-Steuerung, als
   Anzeige, was A gerade tut (reden, kämpfen, abbauen) */
body.pad-active:not(.touch-device) #mobile-controls {
  display: block;
}

body.pad-active:not(.touch-device) #joystick-zone,
body.pad-active:not(.touch-device) #mobile-btn-inventory {
  display: none;
}

body.pad-active:not(.touch-device) #mobile-btn-interact {
  pointer-events: none;
}

/* unten links liegt am PC der Chat: Knopf nach rechts unten, dafür die
   Tastatur-Hilfe weg (mit Controller passt sie ohnehin nicht) */
body.pad-active:not(.touch-device) #action-cluster {
  left: auto;
  right: 24px;
  bottom: 24px;
}

body.pad-active:not(.touch-device) #instructions {
  display: none;
}

body.pad-active #mobile-btn-interact {
  position: relative;
}

body.pad-active #mobile-btn-interact::after {
  content: 'A';
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3f9b4f;
  color: #fff;
  font: 700 13px/22px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
}

/* Kampf mit Controller: Direkttasten als Abzeichen auf den Knöpfen (A löst
   den goldumrandeten Knopf aus, siehe GamepadInput.combat) */
body.pad-active #combat-ui button[data-a] {
  position: relative;
}

body.pad-active #combat-ui button[data-a]::before {
  position: absolute;
  top: -7px;
  left: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 10px;
  color: #fff;
  font: 700 11px/20px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
  z-index: 2;
}

body.pad-active #combat-ui button[data-a="skill"][data-slot="0"]::before { content: 'X'; background: #2f6fb8; }
body.pad-active #combat-ui button[data-a="skill"][data-slot="1"]::before { content: 'Y'; background: #b8952f; }
body.pad-active #combat-ui button[data-a="guard"]::before { content: 'B'; background: #b83a2f; }
body.pad-active #combat-ui button[data-a="potion"]::before { content: 'LT'; background: #555; }
body.pad-active #combat-ui button[data-a="ultimate"]::before { content: 'RT'; background: #555; }

body.pad-active #combat-ui .pad-focus::after {
  content: 'A';
  position: absolute;
  bottom: -7px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3f9b4f;
  color: #fff;
  font: 700 11px/20px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
  z-index: 2;
}

/* Ultimate-Balken schneidet überstehende Abzeichen ab: dort nach innen */
body.pad-active #combat-ui button.cb-ult[data-a]::before { top: 9px; left: 8px; }
body.pad-active #combat-ui button.cb-ult.pad-focus::after { bottom: 9px; right: 8px; }

/* Am PC mit Maus/Tastatur (kein Touch, kein Pad): der Aktionsknopf erscheint
   nur mit Ziel in Reichweite, rechts unten, mit Tasten-Abzeichen „E“ — vorher
   gab es am PC gar keine Aktionstaste und keinen Hinweis (nur Anklicken).
   Anklickbar bleibt er auch (MobileControls). */
body:not(.touch-device):not(.pad-active):not(.pre-game) #mobile-controls {
  display: block;
}

body:not(.touch-device):not(.pad-active) #joystick-zone,
body:not(.touch-device):not(.pad-active) #mobile-btn-inventory,
body:not(.touch-device):not(.pad-active) #mobile-btn-interact.is-idle {
  display: none;
}

body:not(.touch-device):not(.pad-active) #action-cluster {
  left: auto;
  right: 24px;
  bottom: 24px;
}

body:not(.touch-device):not(.pad-active) #mobile-btn-interact {
  position: relative;
}

/* Steuerungs-Hilfe (Taste H) über dem Aktionsknopf — beide standen rechts unten, der Knopf lag auf dem Text
   (Daniel 12.10., Bild „Controls“ hinter „Talk“). Knopf 24 px vom Rand + ~96 px hoch + Abstand. */
@media (min-width: 769px) {
  body:not(.touch-device) #instructions {
    bottom: 140px;
  }
}

/* am PC und mit Pad steht der Cluster rechts unten: Weiter-Knopf links daneben, mit Tasten-Abzeichen */
body:not(.touch-device) #mobile-btn-next {
  left: auto;
  right: calc(100% + 10px);
}
body:not(.touch-device) #mobile-btn-next::after {
  position: absolute;
  top: -6px;
  left: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 11px;
  color: #fff;
  font: 700 12px/22px var(--font-pixel);
  text-align: center;
}
body:not(.touch-device):not(.pad-active) #mobile-btn-next::after { content: 'Tab'; background: #555; }
body.pad-active:not(.touch-device) #mobile-btn-next::after { content: 'B'; background: #c0392b; }
body.pad-active:not(.touch-device) #mobile-btn-next { pointer-events: none; }

body:not(.touch-device):not(.pad-active) #mobile-btn-interact::after,
body:not(.touch-device):not(.pad-active) #recall-btn::after,
body.pad-active #recall-btn::after {
  content: 'E';
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 11px;
  background: #555;
  color: #fff;
  font: 700 13px/22px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
}

/* Heimkehr-Knopf: Taste R bzw. RT am Pad */
body:not(.touch-device):not(.pad-active) #recall-btn::after { content: 'R'; top: -8px; right: -8px; }
body.pad-active #recall-btn::after { content: 'RT'; top: -8px; right: -10px; font-size: 11px; }

/* Kampf mit Tastatur: Direkttasten als Abzeichen (GamepadInput.combatKey) */
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a] {
  position: relative;
}

body:not(.touch-device):not(.pad-active) #combat-ui button[data-a]::before {
  position: absolute;
  top: -7px;
  left: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 10px;
  background: #555;
  color: #fff;
  font: 700 11px/20px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
  z-index: 2;
}

body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="attack"]::before { content: '1'; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="skill"][data-slot="0"]::before { content: '2'; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="skill"][data-slot="1"]::before { content: '3'; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="guard"]::before { content: '4'; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="potion"]::before { content: '5'; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="ultimate"]::before { content: 'U'; top: 9px; left: 8px; }
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a="flee"]::before { display: none; }

/* Skill-Leiste (SkillsUI.renderHud): unter der Quest-Leiste, Stand der
   Berufe, die man gerade farmt oder angepinnt hat */
#skill-hud {
  position: fixed;
  top: calc(var(--hud-bottom) + 90px);
  right: 12px;
  width: 190px;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel);
  border: 2px solid var(--brass-dark);
  border-radius: 8px;
  color: var(--cream);
  font-family: var(--font-pixel);
  cursor: pointer;
}

#skill-hud[hidden] {
  display: none;
}

.skill-hud-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 3px;
}

.skill-hud-head b {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Level bleibt immer sichtbar, auch bei „Stone Skipping“ am Handy */
.skill-hud-head span {
  flex: none;
  margin-left: 6px;
  color: #9fd0ff;
  font-weight: 700;
}

.skill-hud-bar {
  height: 12px;
}

.skill-hud-bar span {
  font-size: 9px;
}

.skill-pin {
  margin-left: auto;
  font: 700 11px var(--font-pixel);
  color: var(--muted);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  cursor: pointer;
}

.skill-pin.is-on {
  color: var(--ink);
  background: var(--brass);
}

body.pre-game #skill-hud,
body.in-combat #skill-hud {
  display: none;
}

/* Neustart-Ankündigung (Deploy): oben mittig, über allem, auch im Kampf */
#restart-notice {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5000;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 16px;
  text-align: center;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: rgba(60, 22, 18, 0.95);
  border: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--ink), 0 0 18px rgba(242, 199, 92, 0.35);
}

#restart-notice[hidden] {
  display: none;
}

#restart-notice .rn-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
}

#restart-notice .rn-text {
  font-size: 13px;
  margin-top: 2px;
}

/* ── Gruppe (PartyUI.js, docs/PARTY.md) ───────────── */
/* Rahmen sitzen in der Statusbox (volle Breite, eigene Zeile): die Box wächst,
   --hud-bottom zieht Minikarte, Chat und Quest-Leiste mit nach unten. */
#party-frames {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  font-family: var(--font-pixel);
}

#party-frames[hidden] {
  display: none;
}

.pf-head,
.pf-main,
.pf-join {
  font-family: var(--font-pixel);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #2a352c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pf-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 700;
}

.pf-title { color: #c9a0ff; }
.pf-count { flex: 1; text-align: left; color: var(--muted); font-weight: 600; }
.pf-caret { transition: transform 0.15s; }
#party-frames.is-collapsed .pf-caret { transform: rotate(-90deg); }
#party-frames.is-collapsed .pf-list { display: none; }

.pf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pf-member {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pf-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 40px;
  padding: 3px 7px 4px;
  text-align: left;
  box-shadow: inset 3px 0 0 #c9a0ff;
}

.pf-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.pf-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #e3d0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-lvl { font-size: 11px; color: var(--gold); }

.pf-hp {
  display: block;
  height: 5px;
  background: #0d130f;
  border-radius: 2px;
  overflow: hidden;
}

.pf-hp i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--hp);
  transition: width 0.3s;
}

.pf-hp i.is-low { background: #ff8a3d; }
.pf-info { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-member.is-fighting .pf-info { color: #ffb3a8; }
.pf-member.is-far .pf-main { opacity: 0.75; }
.pf-member.is-offline .pf-main,
.pf-member.is-down .pf-main { opacity: 0.5; box-shadow: inset 3px 0 0 #6d6477; }
/* bewusstlos im Kampf (Verbindung weg) */
.pf-member.is-ko .pf-main { opacity: 0.6; filter: grayscale(1); }
.pf-member.is-ko .pf-info { color: #cfd8ff; }

.pf-join {
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  background: #6b2b25;
  color: #ffe1a8;
  animation: pf-pulse 1.2s ease-in-out infinite;
}

.pf-join[hidden] { display: none; }

@keyframes pf-pulse {
  50% { box-shadow: 0 0 0 2px rgba(255, 179, 168, 0.55); }
}

/* Handy: Mitglieder als Kacheln in EINER Reihe (Name, LP, Stand) statt
   untereinander. Drei Mitglieder machten die Statusbox ~300 px hoch — am
   360×640-Handy bis in die Bildmitte, Minikarte und Chat rutschten mit
   (UI-Audit „freie Mitte“ 29.09.: 44 % der Mitte bedeckt). Level steht im
   Gruppenfenster. */
body.touch-device .pf-list {
  flex-direction: row;
}

body.touch-device .pf-member {
  flex: 1 1 0;
  min-width: 0;
}

body.touch-device .pf-main {
  gap: 2px;
  padding: 3px 5px 4px;
}

body.touch-device .pf-lvl {
  display: none;
}

body.touch-device .pf-name {
  font-size: 12px;
}

body.touch-device .pf-info {
  font-size: 10px;
}

/* „Join fight“ am Handy: oben zwischen Statusbox (8 + 200 px) und ☰, nicht als
   eigene Zeile in der Statusbox; nur einer, auch wenn mehrere kämpfen */
body.touch-device .pf-join {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 216px;
  height: 44px;
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1600;
}

body.touch-device .pf-member:has(> .pf-join:not([hidden])) ~ .pf-member > .pf-join {
  display: none;
}

/* Fenster der Gruppe: wie das Menüblatt */
.party-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 12, 9, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-overlay[hidden] { display: none; }
body.touch-device .party-overlay { align-items: flex-end; }
#player-popup, #recall-choice { z-index: 3050; }

.party-sheet {
  max-height: calc(100vh / var(--ui) - 24px);
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
}

.menu-sheet::-webkit-scrollbar { width: 6px; }
.menu-sheet::-webkit-scrollbar-track { background: transparent; }
.menu-sheet::-webkit-scrollbar-thumb { background: var(--brass-dark); border-radius: 3px; }

.party-btn {
  min-height: 44px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
}

.party-btn:disabled,
.party-pill:disabled {
  opacity: 0.45;
  cursor: default;
}

.party-pill {
  width: auto;
  min-width: 48px;
  padding: 0 10px;
  font-size: 14px;
}

.pw-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.pw-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-pixel);
}

.pw-name {
  font-size: 15px;
  font-weight: 700;
  color: #e3d0ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pw-meta { font-size: 12px; color: var(--muted); }
.pw-join { background: #6b2b25; }
.pw-kick { background: #4a2622; }

.pw-sub {
  font-family: var(--font-pixel);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  border-top: 1px solid rgba(217, 184, 110, 0.3);
  padding-top: 8px;
}

.pw-members,
.pw-nearby,
.pp-actions,
.rc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.party-note {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--muted);
}

.party-note b { color: var(--cream); }

/* Einladung: Karte oben in der Mitte, Balken läuft 30 s ab */
#party-invite {
  position: fixed;
  z-index: 3100;
  top: calc(64px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100% - 16px));
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: var(--panel-solid);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #8d6bc2, 0 4px 0 rgba(0, 0, 0, 0.4), 0 0 18px rgba(201, 160, 255, 0.3);
}

#party-invite.ui-pop { --pop-base: translateX(-50%); }
#party-invite[hidden] { display: none; }
.pi-text { font-size: 15px; text-align: center; }
.pi-name { color: #e3d0ff; }

.pi-timer {
  height: 4px;
  background: #0d130f;
  border-radius: 2px;
  overflow: hidden;
}

.pi-timer i {
  display: block;
  height: 100%;
  width: 100%;
  background: #c9a0ff;
}

.pi-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pi-accept { background: #2f5a2c; }
.pi-decline { background: #4a2622; }

/* Im Kampf: Rahmen und Einladung weg (Kampfknöpfe; Pad bliebe sonst im Fenster-Modus) */
body.in-combat #party-invite,
body.in-combat .party-overlay,
body.pre-game #party-invite {
  display: none !important;
}

/* Menü hat mit „Wiki“ und „Market“ acht Kacheln: überall 4 × 2. Am Handy darf das Blatt
   nicht höher werden — sonst rutschen Kopf, Zoom, UI size und Gast-Passwort aus dem Bild
   (Eingabe-Parität 29.09., 412×860). */
.menu-grid { grid-template-columns: repeat(4, 1fr); }
body.touch-device .menu-grid { grid-template-columns: repeat(4, 1fr); }
body.touch-device .menu-tile { height: 72px; --u: 40px; }
/* Neunte Kachel „Ranks“ (29.09., docs/RANKS.md): 3 × 3 statt 4 × 2 + einer allein. Damit
   das Blatt nur wenig höher wird, sind die Kacheln etwas flacher (am PC 80 statt 92 px,
   am Handy 60 statt 72 px); am Handy scrollt das Blatt ohnehin unter dem stehenden Kopf. */
.menu-grid { grid-template-columns: repeat(3, 1fr); }
body.touch-device .menu-grid { grid-template-columns: repeat(3, 1fr); }
.menu-tile { height: 80px; --u: 40px; }
body.touch-device .menu-tile { height: 60px; --u: 28px; gap: 4px; }
body.touch-device .menu-look-face { width: 28px; height: 28px; margin: 0; background-size: 112px 112px; }

/* Bildschirmtastatur für Controller (PadKeyboard.js): unten mittig, über allem.
   Im gezoomten Body-Kind (--ui): Breite/Höhe daher durch var(--ui). Tasten ≥ 40 px. */
#pad-keyboard {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: min(640px, calc(100vw / var(--ui) - 16px));
  max-height: calc(100dvh / var(--ui) - 16px);
  overflow: auto;
  z-index: 4000;
  padding: 8px;
  border: 2px solid var(--ink, #221a12);
  border-radius: 10px;
  background: rgba(34, 26, 18, 0.96);
  color: var(--cream, #f6eace);
  font-family: var(--font-pixel);
  box-sizing: border-box;
}
#pad-keyboard[hidden] { display: none; }
#pad-keyboard .pk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 40px; }
#pad-keyboard .pk-label { color: #d9b86e; font-size: 13px; white-space: nowrap; }
#pad-keyboard .pk-value {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; background: #f6eace; color: #221a12;
  font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: clip; direction: rtl; text-align: left;
}
#pad-keyboard .pk-x { min-width: 40px; min-height: 40px; }
#pad-keyboard .pk-row { display: flex; gap: 4px; margin-top: 4px; }
#pad-keyboard .pk-key {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 2px;
  border: 2px solid #8c6a35; border-radius: 6px; background: #3a2e20; color: #f6eace;
  font-family: var(--font-pixel); font-size: 17px; cursor: pointer;
}
#pad-keyboard .pk-key.is-wide { flex-grow: 1.6; font-size: 14px; }
#pad-keyboard .pk-key.is-space { flex-grow: 4; font-size: 13px; }
#pad-keyboard .pk-key.is-on { background: #8c6a35; }
#pad-keyboard .pk-key.is-done { background: #4f7a3a; border-color: #9bd46a; }
#pad-keyboard .pk-key.pad-focus { outline: 3px solid #f2c75c; outline-offset: 1px; }
#pad-keyboard .pk-help { margin-top: 6px; font-size: 11px; color: #c8b89a; text-align: center; }

/* Wahl vor dem Bosskampf (BossModeUI): Auftritt mit Bild, Titel, zwei Karten. Tippflächen ≥ 40 px. */
#boss-mode {
  position: fixed; inset: 0; z-index: 3500;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(120, 20, 14, 0.55), rgba(8, 4, 3, 0.88) 70%);
  padding: 12px; box-sizing: border-box;
}
#boss-mode[hidden] { display: none; }
#boss-mode .bm-box {
  position: relative;
  width: min(620px, calc(100vw / var(--ui) - 24px));
  max-height: calc(100dvh / var(--ui) - 24px); overflow: auto;
  padding: 16px; border: 3px solid var(--ink, #221a12); border-radius: 12px;
  background: linear-gradient(180deg, #2a1c16 0%, #1c1411 100%);
  box-shadow: inset 0 0 0 2px #7a2a20, 0 0 40px rgba(200, 54, 46, 0.35), 0 10px 0 rgba(0, 0, 0, 0.4);
  color: var(--cream, #f6eace); font-family: var(--font-pixel);
  box-sizing: border-box;
}
#boss-mode .menu-x { position: absolute; top: 8px; right: 8px; min-width: 40px; min-height: 40px; z-index: 1; }

/* Kopf: Bild links, Name groß */
#boss-mode .bm-hero { display: flex; align-items: center; gap: 16px; margin: 0 40px 14px 0; }
#boss-mode .bm-portrait {
  flex: none; width: 124px; height: 124px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 60%, #5a1e18 0%, #2a120e 62%, #160a08 100%);
  border: 3px solid #221a12; box-shadow: inset 0 0 0 2px #c8362e, 0 0 22px rgba(200, 54, 46, 0.5);
  overflow: hidden;
}
#boss-mode .bm-pic { image-rendering: pixelated; display: none; }
#boss-mode .bm-portrait.has-pic .bm-pic { display: block; animation: bm-breathe 2.4s ease-in-out infinite; }
#boss-mode .bm-portrait:not(.has-pic)::before { content: '☠'; font-size: 54px; color: #c8362e; }
#boss-mode .bm-names { display: grid; gap: 3px; min-width: 0; }
#boss-mode .bm-kicker { color: #ff8a7a; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
#boss-mode .bm-title {
  font-size: 30px; line-height: 1.05; color: #f2c75c; letter-spacing: 0.04em;
  text-shadow: 0 3px 0 #221a12, 0 0 18px rgba(242, 199, 92, 0.35);
}
#boss-mode .bm-sub { font-size: 14px; color: #d8c8a8; font-style: italic; }

/* Zwei Karten nebeneinander (schmal: untereinander) */
#boss-mode .bm-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#boss-mode .bm-choice {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 132px; padding: 12px 12px 10px; text-align: left;
  border: 2px solid #8c6a35; border-radius: 10px; background: #3a2e20; color: #f6eace;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3);
  font-family: var(--font-pixel); cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
#boss-mode .bm-choice:hover { transform: translateY(-2px); border-color: #d9b86e; }
#boss-mode .bm-choice b { display: block; font-size: 22px; }
#boss-mode .bm-choice > span { display: block; font-size: 13px; color: #d8c8a8; line-height: 1.35; }
#boss-mode .bm-tags { display: flex !important; flex-wrap: wrap; gap: 5px; margin-top: auto; }
#boss-mode .bm-tags em {
  font-style: normal; font-size: 12px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(217, 184, 110, 0.4); color: #e8d8b0;
}
#boss-mode .bm-choice kbd {
  position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border-radius: 4px; background: #2b2f2c; border: 1px solid #6c6455; color: var(--cream);
  font: 700 12px/18px var(--font-pixel); text-align: center;
}
body.touch-device #boss-mode .bm-choice kbd,
body.pad-active #boss-mode .bm-choice kbd { display: none; }
#boss-mode .bm-choice.is-heroic {
  border-color: #c8362e;
  background: linear-gradient(160deg, #5a2420 0%, #3a1614 100%);
  animation: bm-glow 1.8s ease-in-out infinite;
}
#boss-mode .bm-choice.is-heroic b { color: #ff8a7a; }
#boss-mode .bm-choice.is-heroic b::before { content: '☠ '; }
#boss-mode .bm-choice.is-heroic .bm-tags em { border-color: rgba(255, 138, 122, 0.55); color: #ffd0c8; background: rgba(200, 54, 46, 0.2); }
#boss-mode .bm-choice.pad-focus { outline: 3px solid #f2c75c; outline-offset: 2px; }

/* Warnung als Leiste unten */
#boss-mode .bm-warn {
  margin-top: 12px; padding: 8px 10px; display: grid; gap: 3px;
  border-left: 4px solid #c8362e; border-radius: 6px; background: rgba(200, 54, 46, 0.12);
}
#boss-mode .bm-warn b { color: #ff8a7a; font-size: 13px; }
#boss-mode .bm-warn span { font-size: 12px; color: #e8d2c4; line-height: 1.35; }
#boss-mode .bm-warn .bm-extra { color: #b8f080; font-weight: 700; }

/* Auftritt: Rahmen fällt ein, Name blendet auf, Karten folgen */
#boss-mode.is-in .bm-box { animation: bm-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
#boss-mode.is-in .bm-title { animation: bm-name 0.7s ease-out; }
#boss-mode.is-in .bm-choice { animation: bm-card 0.45s ease-out backwards; }
#boss-mode.is-in .bm-choice.is-heroic { animation: bm-card 0.45s ease-out 0.08s backwards, bm-glow 1.8s ease-in-out 0.6s infinite; }
@keyframes bm-in { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes bm-name { from { opacity: 0; letter-spacing: 0.4em; } to { opacity: 1; letter-spacing: 0.04em; } }
@keyframes bm-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bm-glow {
  0%, 100% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 0 rgba(200, 54, 46, 0); }
  50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 18px rgba(200, 54, 46, 0.55); }
}
@keyframes bm-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.03); } }

@media (max-width: 520px) {
  #boss-mode .bm-choices { grid-template-columns: 1fr; }
  #boss-mode .bm-choice { min-height: 0; }
  #boss-mode .bm-portrait { width: 84px; height: 84px; }
  #boss-mode .bm-title { font-size: 22px; }
  #boss-mode .bm-hero { gap: 10px; }
}
.cb-heroic { color: #ff8a7a; font-weight: 700; }

/* „Stick“-Zeile im Menü nur mit Touch (MobileControls.setStickLeft) */
body:not(.touch-device) .menu-touch-only {
  display: none;
}

/* Spieler-Menü (#player-popup): eigene Datei player-popup.css */

/* /css/gold.css */
/* ── Gold einheitlich (client/js/ui/GoldUI.js, 25.10.2026) ──────────────────────────────
   .gold-bal  = eigener Kontostand im Kopf/Fuß eines Fensters (Pille wie im Waffen-Fenster)
   .gold-cost = Preis/Kosten/Belohnung inline (Münze + Zahl), erbt Schriftgröße vom Umfeld */

.gold-bal {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 6px;
  border: 2px solid var(--ink, #221a12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--gold, #f2c75c);
  font-family: var(--font-pixel);
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gold-bal[hidden] { display: none; }
.gold-bal .ui-icon { --u: 20px; }
.gold-bal b { font-weight: 700; }
/* klein (Fuß von Repair/Kutsche, Beutel-Kopf am Handy) */
.gold-bal.is-sm { font-size: 13px; padding: 1px 8px 1px 4px; }
.gold-bal.is-sm .ui-icon { --u: 20px; margin: -2px -2px; }

.gold-cost {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
  color: var(--gold, #f2c75c);
  vertical-align: -0.2em;
  font-variant-numeric: tabular-nums;
}
/* Münze hat 4 px Rand in der 20-px-Zelle: enger an die Zahl */
.gold-cost .ui-icon { --u: 20px; margin: -4px -1px -4px -4px; }
/* auf hellen/farbigen Knöpfen die Knopfschrift behalten (Gold auf Messing wäre unlesbar) */
button .gold-cost, .gold-cost.is-plain { color: inherit; }
/* Münz-Pixel ist cremeweiß wie alle UI-Icons — beim Gold golden färben (auf Knöpfen bleibt es hell) */
.gold-bal .ui-icon, .gold-cost .ui-icon { filter: sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.02); }
button .gold-cost .ui-icon, .gold-cost.is-plain .ui-icon { filter: none; }

/* /css/worldmap.css */
/* ── Karte: Wegpunkte, Dungeon-Eingänge, Feld am Punkt (25.10.2026, client/js/ui/WorldMap.js + MapArt.js) ── */

/* Knopf „Wegpunkt am Fadenkreuz“ in der Kopfzeile: Nadel aus MapArt (als Bild gesetzt) */
.menu-pill.wm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wm-pin-ico,
.wm-legend i.wm-lg-wp,
.wm-legend i.wm-lg-dg {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  border: 0;
}

.wm-pin-ico {
  width: 18px;
  height: 20px;
}

.wm-legend i.wm-lg-wp {
  width: 9px;
  height: 10px;
}

.wm-legend i.wm-lg-dg {
  width: 13px;
  height: 11px;
}

/* Feld neben dem Punkt (liegt im Kartenfeld .wm-body, Lage setzt WorldMap.openPop in HUD-Pixeln) */
.wm-pop {
  position: absolute;
  z-index: 3;
  width: min(250px, calc(100% - 12px));
  box-sizing: border-box;
  padding: 8px 10px 10px;
  border-radius: 10px;
  background: var(--panel-solid);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 4px 0 rgba(0, 0, 0, 0.4);
  color: var(--cream);
  font-family: var(--font-pixel);
}

.wm-pop[hidden] {
  display: none;
}

.wm-pop-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wm-pop-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  overflow-wrap: anywhere;
}

.wm-pop .menu-x.wm-pop-x {
  flex: none;
}

.wm-pop-sub {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--muted);
}

.wm-pop-row {
  display: flex;
  gap: 6px;
}

.wm-pop-btn,
.wm-kind {
  min-height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--brass-dark);
  color: var(--cream);
  font: 600 13px/1.1 var(--font-pixel);
  cursor: pointer;
}

.wm-pop-btn {
  flex: 1;
  padding: 0 10px;
}

.wm-pop-btn.wm-pop-danger {
  color: #ffb3a8;
}

.wm-pop-btn:disabled,
.wm-kind:disabled {
  opacity: 0.45;
  cursor: default;
}

.wm-pop-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.wm-kind {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  text-align: left;
}

/* Farbfleck der Vorlage (wie die Nadel) */
.wm-kind i {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--c);
  border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* Pfeil am Rand zum verfolgten Wegpunkt (NavArrows): mint, gestrichelter Ring — Quests haben volle Ringe */
.nav-arrow.nav-wp .nav-tip {
  box-shadow: none;
  border: 2px dashed var(--nav, #5cf2c6);
  outline: 2px solid var(--ink);
}

.nav-arrow.nav-wp .nav-label {
  color: var(--nav, #5cf2c6);
}

/* Kopfzeile mit dem zusätzlichen Knopf: auf kleinen Handys enger, Knöpfe bleiben ≥ 40 px */
.wm-head .menu-pill {
  flex: none;
  min-width: 40px;
}

@media (max-width: 400px) {
  .wm-head {
    gap: 5px;
  }

  .wm-title {
    font-size: 18px;
  }

  .menu-pill.wm-center {
    padding: 0 8px;
  }
}

/* /css/windows.css */
/* Fenster im HUD-Stil (Farben aus hud.css): Inventar, Laden, Crafting,
   Quests, Kontextmenü, Beute-Leiste, Anmeldung. Überschreibt ui.css. */

/* ── Gemeinsamer Fensterrahmen ────────────────────── */
#inventory-container,
#shop-container,
#quest-container,
#crafting-container,
#auth-container,
.item-context-menu {
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--font-pixel);
}

#inventory-container,
#shop-container,
#quest-container,
#crafting-container {
  width: min(560px, calc(100% - 16px));
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  overflow-y: auto;
  padding: 14px;
  z-index: 2800;
}

/* Kopfzeile: Titel in Gold, Schließen-Knopf rechts */
#inventory-header,
#shop-header,
#quest-header,
#crafting-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px -2px 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brass-dark);
}

#inventory-header h3,
#shop-header h3,
#quest-header h3,
#crafting-header h3 {
  flex: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

#inventory-close,
#shop-close,
#quest-close,
#crafting-close {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 18px;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

/* Unterüberschriften */
#inventory-container h4,
#quest-objectives h4,
#quest-rewards h4 {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

/* NPC-Sprechzeile */
#shop-npc-message,
#quest-npc-message,
#crafting-npc-message {
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: var(--cream);
  font-size: 14px;
  line-height: 1.35;
  font-style: normal;
  position: relative;
}

/* NPC antwortet (QuestUI.typeMessage): blinkende Schreibmarke, solange getippt wird */
#quest-npc-message.is-talking::after {
  content: '▌';
  margin-left: 2px;
  opacity: 0.8;
  animation: npc-caret 0.6s steps(2) infinite;
}
@keyframes npc-caret { 50% { opacity: 0; } }

#shop-npc-message:empty,
#quest-npc-message:empty,
#crafting-npc-message:empty {
  display: none;
}

/* Knöpfe (Kaufen, Annehmen, Herstellen …) */
#shop-action-btn,
#quest-action-btn,
.craft-btn,
.item-context-menu button,
.sell-btn-inline,
#auth-submit {
  font-family: var(--font-pixel);
  font-weight: 700;
  color: var(--cream);
  background: #3f7a45;
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-shadow: 0 1px 0 var(--ink);
}

#shop-action-btn:active,
#quest-action-btn:active,
.craft-btn:active,
.item-context-menu button:active,
.sell-btn-inline:active,
#auth-submit:active {
  transform: translateY(2px);
  box-shadow: none;
}

#shop-action-btn:disabled,
.craft-btn:disabled {
  background: #3a3f3a;
  color: var(--muted);
  cursor: default;
}

/* ── Item-Icons ───────────────────────────────────── */
.item-icon {
  display: inline-block;
  flex: none;
  width: var(--u, 32px);
  height: var(--u, 32px);
  background-image: var(--items-img, url('/assets/ui/items.png'));
  background-repeat: no-repeat;
  background-size: calc(var(--u, 32px) * var(--n, 31)) var(--u, 32px);
  background-position: calc(var(--i, 30) * var(--u, 32px) * -1) 0;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* Seltenheit als Rahmenfarbe der Felder */
.rarity-common { --rar: #8c6a35; }
.rarity-uncommon { --rar: #6fcf5a; }
.rarity-rare { --rar: #5aa7ff; }
.rarity-epic { --rar: #c77dff; }
/* Boss-Beute (seit 30.09.2026): Stufen nach Material — Holz common, Kupfer uncommon, Eisen rare,
   Stahl epic, Boss legendary (Nathaniel: „andere Rahmen für die Waffen-Stufen“) */
.rarity-legendary { --rar: #ff9a3a; }
.inventory-slot[class*="rarity-"], .trade-slot[class*="rarity-"] { border: 2px solid var(--rar); }
.inventory-slot.rarity-common, .trade-slot.rarity-common { border-color: #5a4a36; }
.inventory-slot.rarity-epic, .trade-slot.rarity-epic { box-shadow: 0 0 5px var(--rar); }
.inventory-slot.rarity-legendary, .trade-slot.rarity-legendary { box-shadow: 0 0 8px var(--rar), inset 0 0 6px rgba(255, 154, 58, 0.35); }
.rarity-legendary { --rar: #f2c75c; }

/* ── Inventar ─────────────────────────────────────── */
#inventory-container {
  display: none;
}

#inventory-equipment {
  display: grid;
  /* 3×2: Waffe, Nebenhand, Rüstung / Schmuck 1–3 (2 und 3 ab Lv 20/40) */
  /* minmax(0, …): lange Wörter (deutsch „Nebenhand“, „Holzspitzhacke“) dürfen die Spalten nicht verbreitern */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

#inventory-equipment h4 {
  grid-column: 1 / -1;
}

.equip-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.2);
  min-height: 78px;
  justify-content: center;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.equip-slot .slot-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equip-slot .slot-item {
  font-size: 12px;
  color: var(--cream);
  text-align: center;
}

#stat-role {
  margin-left: auto;
  color: var(--gold);
}

.equip-slot .slot-item.empty {
  color: #6c7a68;
}

/* Gesperrter Schmuckplatz (InventoryUI: „🔒 Lv 20“) */
.equip-slot.is-locked {
  opacity: 0.6;
  border-style: dashed;
  background: #1c221d;
}

#inventory-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

#inventory-stats h4 {
  margin: 0;
}

#inventory-stats div {
  margin: 0;
}

#stat-attack { color: #ff8a7a; }
#stat-defense { color: #8fc2ff; }
#stat-maxhealth { color: #9bd46a; }

#inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  max-height: calc(44vh / var(--ui));
  max-height: calc(44dvh / var(--ui));
  padding: 8px;
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
}

.inventory-slot {
  background: #232e25;
  border: 2px solid var(--rar, var(--ink));
  border-radius: 9px;
  min-height: 80px;
  padding: 6px 4px 4px;
  gap: 3px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, background 0.15s;
}

.inventory-slot:hover {
  background: #2e3b30;
  border-color: var(--rar, var(--brass));
  transform: translateY(-1px);
}

.inventory-slot .item-name {
  font-size: 11px;
  line-height: 1.1;
  color: var(--cream);
  text-align: center;
}

.inventory-slot .item-quantity {
  top: 4px;
  right: 5px;
  bottom: auto;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--ink), 0 0 2px var(--ink);
}

#inventory-gold { flex: none; display: flex; }

/* Kontextmenü eines Items */
.item-context-menu {
  border-radius: 12px;
  padding: 6px;
  min-width: 190px;
  z-index: 3100;
  overflow: hidden;
}

.item-context-menu > div {
  border-bottom-color: var(--brass-dark) !important;
  font-family: var(--font-pixel);
}

.item-context-menu button {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 9px 12px;
  text-align: left;
  font-size: 14px;
}

.item-context-menu button:last-child {
  background: #3a3f3a;
}

/* ── Laden ────────────────────────────────────────── */
#shop-header #shop-gold { flex: none; display: flex; }

#shop-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.shop-tab {
  flex: 1;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 8px;
  cursor: pointer;
}

.shop-tab.active {
  color: var(--ink);
  background: var(--brass);
}

#shop-items {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  max-height: calc(36vh / var(--ui));
  max-height: calc(36dvh / var(--ui));
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px;
}

.shop-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon price" "btn btn";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  background: #232e25;
  border: 2px solid var(--ink);
  border-left: 4px solid var(--rar, var(--ink)) !important;
  border-radius: 9px;
  padding: 7px;
  position: relative;
  text-align: left;
}

.shop-item .item-icon {
  grid-area: icon;
}

.shop-item .item-name {
  grid-area: name;
  font-size: 12px;
  color: var(--cream);
  line-height: 1.1;
}

.shop-item .item-price {
  grid-area: price;
  font-size: 12px;
  color: var(--gold);
}

.shop-item .item-stock {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: var(--muted);
}

.shop-item .sell-btn-row {
  grid-area: btn;
  margin-top: 4px;
}

.shop-item.selected {
  background: #33422f;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.sell-btn-inline {
  padding: 5px 8px;
  font-size: 11px;
}

.sell-btn-inline.sell-btn-all {
  background: #3e5f8a;
}

#shop-item-details {
  margin-top: 10px;
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 12px;
  min-height: 0;
}

/* großes Bild nur in der PC-Seitenspalte (desk.css) */
#shop-item-icon { display: none; }

#shop-item-name {
  color: var(--gold);
  font-size: 17px;
}

#shop-item-desc {
  color: var(--cream);
  font-size: 13px;
}

#shop-item-stats {
  color: #9bd46a;
  font-size: 13px;
}

#shop-item-price {
  color: var(--gold);
  font-size: 14px;
}

#shop-action-btn {
  margin-top: 8px;
  padding: 10px 22px;
  font-size: 16px;
}

/* ── Crafting ─────────────────────────────────────── */
#crafting-recipes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Rezept für eine laufende Quest: oben, goldener Rahmen, Hinweiszeile */
.crafting-section.is-quest {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.crafting-recipe.recipe-quest {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(242, 199, 92, 0.35), 0 0 14px rgba(242, 199, 92, 0.25);
}

.recipe-quest-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}

.quest-service-btn.is-quest {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(242, 199, 92, 0.4);
}

/* Zwischenüberschrift je Rezeptart (Potions, Weapons …), CraftingUI */
.crafting-section {
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  color: var(--brass);
  letter-spacing: 0.5px;
  padding: 6px 2px 0;
  border-bottom: 2px solid var(--brass-dark);
}

.crafting-section:first-child {
  padding-top: 0;
}

.crafting-recipe {
  background: #232e25;
  border: 2px solid var(--ink);
  border-left: 4px solid var(--rar, var(--ink));
  border-radius: 10px;
  padding: 10px 12px;
}

.crafting-recipe-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.crafting-recipe-header .recipe-stats {
  margin-left: auto;
}

.recipe-name {
  flex: 0 1 auto;
  text-align: left;
  font-size: 16px;
  color: var(--cream);
  font-weight: 700;
}

.recipe-stats {
  font-size: 12px;
  color: #9bd46a;
}

.recipe-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0;
}

.recipe-ingredients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}

.ingredient {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px 3px 4px;
  border-radius: 7px;
  border: 2px solid var(--ink);
  background: #1a221c;
}

.ingredient-have {
  color: #b9e6a0;
}

.ingredient-missing {
  color: #ff9a8f;
  background: #2e1c1a;
}

/* Qualität beim Herstellen (CraftingUI.qualityBlock, shared/Quality.ts): Chancen und Fund-Schalter */
.recipe-quality { margin: -2px 0 8px; display: flex; flex-direction: column; gap: 5px; }
.recipe-quality-odds { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; opacity: 0.95; }
button.recipe-boost {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%;
  min-height: 40px; padding: 4px 10px 4px 6px; border-radius: 7px; border: 2px dashed #5a7a8a;
  background: #18222a; color: #cfe8f2; font: inherit; font-size: 12px; cursor: pointer; text-align: left;
}
button.recipe-boost.is-on { border-style: solid; border-color: #7fd0ff; background: #1c3240; color: #fff; }
button.recipe-boost:disabled { opacity: 0.55; cursor: default; }

/* Säge-Takt beim Möbelbauen (CraftingUI.startSaw, shared/SawCheck): Brett, grünes Feld, Strich, drei Punkte */
.saw-check { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.saw-board {
  position: relative; height: 40px; border-radius: 4px; border: 2px solid #3a2414; cursor: pointer; touch-action: manipulation;
  background: repeating-linear-gradient(0deg, #9a6a38 0 5px, #8d5f31 5px 9px, #a3733f 9px 14px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.saw-zone {
  position: absolute; top: 0; bottom: 0; background: rgba(110, 220, 110, 0.38); border-left: 2px solid #8ff08f;
  border-right: 2px solid #8ff08f; display: flex; justify-content: center; transition: background 0.12s;
}
.saw-sweet { height: 100%; background: rgba(255, 236, 140, 0.55); }
.saw-zone.is-perfect { background: rgba(255, 214, 80, 0.6); }
.saw-zone.is-hit { background: rgba(140, 255, 140, 0.6); }
.saw-zone.is-miss { background: rgba(255, 110, 100, 0.35); border-color: #ff8a80; }
.saw-mark {
  position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px;
  background: #e8eef2; box-shadow: 0 0 0 1px #20262a, 0 0 6px rgba(255, 255, 255, 0.6);
}
.saw-row { display: flex; align-items: center; gap: 8px; }
.saw-pips { display: flex; gap: 4px; }
.saw-pip {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #6b5a44; display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.35);
}
.saw-pip.is-perfect { border-color: #ffd24a; background: #8a6a12; }
.saw-pip.is-hit { border-color: #8ff08f; background: #2f6a2f; }
.saw-pip.is-miss { border-color: #ff8a80; background: #5a2622; }
.saw-say { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; color: #e8e0d0; }
.saw-say.is-perfect { color: #ffd24a; }
.saw-say.is-hit { color: #8ff08f; }
.saw-say.is-miss { color: #ff9a8f; }
button.saw-btn {
  min-height: 44px; min-width: 96px; padding: 4px 14px; border-radius: 8px; border: 2px solid #ffd24a; cursor: pointer;
  background: #5a3a1c; color: #fff; font: inherit; font-weight: 700; touch-action: manipulation;
}
button.saw-btn:disabled { opacity: 0.5; cursor: default; }

/* Herstellbare Zutat = Knopf zum Rezept (CraftingUI.jumpTo, Feedback #51) */
button.ingredient-link {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-height: 32px;
  border-color: #8a6a2e;
  text-align: left;
}
button.ingredient-link:hover:not(:disabled) { border-color: #ffd24a; }
button.ingredient-link:disabled { cursor: default; opacity: 0.6; }
.ingredient-go {
  font-style: normal;
  font-size: 11px;
  color: #ffd24a;
  margin-left: 2px;
}
body.touch-device button.ingredient-link { min-height: 40px; }

/* „← Back to …“ über der Liste nach einem Sprung */
/* Zwischenüberschrift je Handwerksstufe (CraftingUI.sortRecipes) */
.craft-level-head {
  grid-column: 1 / -1;
  margin: 4px 2px -4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid rgba(140, 106, 53, 0.45);
  padding-bottom: 2px;
}
.craft-level-head:first-child { margin-top: 0; }

.craft-back {
  align-self: flex-start;
  justify-self: start;
  grid-column: 1 / -1;   /* PC: Rezepte als Raster — der Knopf steht über der ganzen Breite */
  min-height: 40px;
  padding: 6px 14px;
  font: inherit;
  font-weight: 700;
  color: var(--cream);
  background: #3a3550;
  border: 2px solid var(--ink);
  border-radius: 9px;
  cursor: pointer;
}
.craft-back:disabled { opacity: 0.6; cursor: default; }

.craft-btn {
  padding: 8px 20px;
  font-size: 15px;
}

/* Menge + Knopf in einer Zeile (bricht schmal um): − [12] + Max  [Smelt ×12] */
.craft-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.craft-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.craft-qty .trade-step { min-width: 40px; min-height: 40px; padding: 6px 8px; }
.craft-qty .craft-qty-num { width: 64px; min-height: 40px; font-size: 17px; }

/* ── Quests ───────────────────────────────────────── */
#quest-content {
  flex-direction: column;
  gap: 10px;
}

#quest-list,
#quest-details {
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px;
  max-height: none;
}

.quest-item {
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 9px 10px;
  margin-bottom: 6px;
  color: var(--cream);
  cursor: pointer;
}

.quest-item.quest-available { border-left: 4px solid var(--gold); }
.quest-item.quest-active { border-left: 4px solid #5aa7ff; }
.quest-item.quest-completed { border-left: 4px solid #9bd46a; }

.quest-item.selected {
  box-shadow: inset 0 0 0 2px var(--brass);
}

#quest-title {
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
}

#quest-desc {
  font-size: 13px;
  color: var(--cream);
  line-height: 1.35;
  margin-bottom: 10px;
}

.quest-objective {
  font-size: 13px;
  color: var(--cream);
}

.reward-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gold);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 7px;
  padding: 3px 8px;
  margin: 0 6px 6px 0;
}

#quest-action-btn {
  margin-top: 8px;
  padding: 10px 22px;
  font-size: 16px;
}

/* Tracker */
.tracker-quest-name {
  color: var(--cream);
  font-family: var(--font-pixel);
}

.tracker-objective {
  color: var(--muted);
  font-family: var(--font-pixel);
}

.tracker-objective.complete {
  color: #9bd46a;
}

.tracker-empty {
  color: var(--muted);
  font-size: 12px;
}

/* ── Beute-Leiste ─────────────────────────────────── */
/* Lage (links/Breite/oben) setzt GameToast.place() nach den sichtbaren
   HUD-Kästen; die Werte hier gelten nur bis zur ersten Einblendung. */
#toast-feed {
  position: fixed;
  z-index: 2700;
  right: 12px;
  top: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

/* Handy: rechte Spalte unter ☰ und Quest-Leiste (GameToast.layout), klein —
   nie mehr mittig neben der Figur (Feedback 29.09.) */
body.touch-device #toast-feed {
  top: calc(56px + env(safe-area-inset-top));
  gap: 4px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-left: 4px solid var(--rar, var(--brass));
  border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-pixel);
  color: var(--cream);
  font-size: 14px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  animation: toast-in 0.22s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}

.toast-qty {
  color: var(--gold);
  font-weight: 700;
}

.toast-text {
  padding: 7px 12px;
}

.toast-gold { color: var(--gold); }
.toast-warn { color: #f0a46c; }
.toast-bad { border-left-color: #e0493f; }

.toast-qty.is-bump {
  display: inline-block;
  animation: toast-bump 0.25s ease-out;
}

/* Beute-Zeile: mehrere Items nebeneinander („+1 Oak Log · +2 Stick“) */
.toast-item {
  flex-wrap: wrap;
  column-gap: 0;
  row-gap: 2px;
}

.toast-part {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.toast-part + .toast-part::before {
  content: '·';
  margin: 0 7px 0 5px;
  color: var(--muted);
}

body.touch-device .toast {
  font-size: 12px;
  gap: 5px;
  padding: 3px 9px 3px 5px;
  border-radius: 8px;
  border-left-width: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

body.touch-device .toast-text {
  padding: 4px 9px;
}

body.touch-device .toast-part {
  gap: 3px;
}

body.touch-device .toast-part + .toast-part::before {
  margin: 0 5px 0 3px;
}

/* Berufs-XP (GameToast.prof): kleine Zeile oben im Stapel, verschwindet nach
   3 s — ersetzt die große Dauer-Leiste (#skill-hud zeigt nur noch Angepinntes) */
.prof-chip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon name gain" "icon bar num";
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 150px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px 8px 4px 5px;
  border-radius: 8px;
  background: rgba(24, 33, 27, 0.82);
  border: 1px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(159, 208, 255, 0.45);
  font-family: var(--font-pixel);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  animation: toast-in 0.22s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}

.prof-chip .ui-icon,
.prof-chip .pc-glyph {
  grid-area: icon;
  --u: 20px;
}

.prof-chip .pc-glyph {
  font-size: 16px;
  color: #9fd0ff;
  text-align: center;
  width: 20px;
}

.pc-name {
  grid-area: name;
  display: flex;
  gap: 5px;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
}

/* Name darf gekürzt werden, das Level nie */
.pc-name b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pc-name em {
  flex: none;
  font-style: normal;
  color: #9fd0ff;
}

.pc-gain {
  grid-area: gain;
  color: #9fd0ff;
  font-weight: 700;
}

.pc-bar {
  grid-area: bar;
  height: 4px;
  border-radius: 2px;
  background: #0d130f;
  overflow: hidden;
}

.pc-bar i {
  display: block;
  height: 100%;
  background: #9fd0ff;
  transition: width 0.3s;
}

.pc-num {
  grid-area: num;
  font-size: 10px;
  color: var(--muted);
}

.prof-chip.is-levelup {
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 2px rgba(242, 199, 92, 0.35);
}

.prof-chip.is-levelup .pc-gain {
  color: var(--gold);
}

.prof-chip.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

body.pre-game #toast-feed .prof-chip,
body.in-combat #toast-feed .prof-chip {
  display: none;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-bump {
  50% { transform: scale(1.35); }
}

/* ── Anmeldung ────────────────────────────────────── */
#auth-overlay {
  background: radial-gradient(ellipse at 50% 30%, #2b3b2d 0%, #18211b 55%, #0d130f 100%);
}

#auth-container {
  width: min(360px, calc(100% - 24px));
  padding: 22px 20px;
}

#auth-title {
  font-family: var(--font-pixel);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--ink);
}

.auth-tab {
  font-family: var(--font-pixel);
  font-size: 15px;
  color: var(--muted);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 9px;
}

.auth-tab.active {
  color: var(--ink);
  background: var(--brass);
}

.auth-field label {
  font-family: var(--font-pixel);
  color: var(--muted);
}

.auth-field input {
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}

#auth-submit {
  font-size: 17px;
  padding: 11px;
}

#auth-continue {
  font-family: var(--font-pixel);
  font-size: 15px;
  background: #2a352c;
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 9px 20px;
  cursor: pointer;
}

#auth-continue-row {
  margin-top: 12px;
  text-align: center;
}

#auth-continue-name {
  color: var(--gold);
}

#auth-hint {
  margin-top: 12px;
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

#auth-message,
#auth-loading {
  font-family: var(--font-pixel);
}

/* UI size auf der Anmeldung (nur Handheld/großer Monitor, AuthUI.wireUiScale) */
.auth-uiscale {
  display: block;
  margin: 12px auto 0;
  min-height: 40px;
  padding: 8px 16px;
  font-family: var(--font-pixel);
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: 2px solid #2f3b31;
  border-radius: 9px;
  cursor: pointer;
}

.auth-uiscale[hidden] {
  display: none;
}

/* Feld mit Knopf daneben: 🎲 (Zufallsname), 👁 (Passwort zeigen) */
.auth-input-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.auth-input-row input {
  flex: 1;
  min-width: 0;
}

.auth-side-btn {
  flex: 0 0 44px;
  min-height: 44px;
  font-size: 20px;
  line-height: 1;
  background: #2a352c;
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.auth-side-btn[hidden] {
  display: none;
}

.pw-eye.is-on {
  background: var(--brass);
}

/* ── Charakter-Erstellung ─────────────────────────── */
#create-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, #2b3b2d 0%, #18211b 55%, #0d130f 100%);
}

#create-overlay[hidden] {
  display: none;
}

#create-container {
  --fig: 192px;
  width: min(380px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 16px 18px 18px;
  margin: auto;
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--font-pixel);
}

.create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#create-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--ink);
}

#create-close[hidden] {
  display: none;
}

.create-look {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
}

.create-arrow {
  flex: 0 0 48px;
  height: 64px;
  font-family: var(--font-pixel);
  font-size: 34px;
  line-height: 1;
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
}

.create-stage {
  width: calc(var(--fig) + 16px);
  height: calc(var(--fig) + 8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 88%, rgba(0, 0, 0, 0.45) 0 18%, transparent 19%), #1c261d;
  border: 2px solid var(--ink);
  cursor: pointer;
}

/* 4×4-Laufblatt (24 px je Bild), Reihe 0 = nach unten: auf der Stelle laufen */
.create-figure {
  width: var(--fig);
  height: var(--fig);
  background-repeat: no-repeat;
  background-size: calc(var(--fig) * 4) calc(var(--fig) * 4);
  background-position: 0 0;
  image-rendering: pixelated;
}

.create-figure.is-walking {
  animation: create-walk 0.72s steps(4) infinite;
}

@keyframes create-walk {
  from { background-position: 0 0; }
  to { background-position: calc(var(--fig) * -4) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .create-figure.is-walking { animation: none; }
}

/* Pfeile pulsieren, bis man einmal gewechselt hat (CharacterCreator.render) */
.create-arrow.is-nudge { animation: create-nudge 1.4s ease-in-out infinite; }
@keyframes create-nudge {
  0%, 100% { transform: scale(1); box-shadow: none; }
  50% { transform: scale(1.12); box-shadow: 0 0 10px rgba(242, 199, 92, 0.75); }
}
@media (prefers-reduced-motion: reduce) { .create-arrow.is-nudge { animation: none; box-shadow: 0 0 8px rgba(242, 199, 92, 0.75); } }

.create-count {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.create-fixed {
  text-align: center;
  font-size: 16px;
  margin: 4px 0 10px;
  color: var(--cream);
}

#create-start {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 18px;
  color: var(--cream);
  background: #3f7a45;
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 0 var(--ink);
  cursor: pointer;
}

#create-start:disabled {
  background: #555;
  cursor: default;
}

#create-message:empty {
  display: none;
}

#create-message {
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}

#create-message.error {
  color: #ff9a8a;
}

.create-keys {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}

/* Niedriges Handy-Querformat / kleine Handys: Figur kleiner, alles ohne Scrollen */
@media (max-height: 640px) {
  #create-container { --fig: 128px; padding-top: 10px; }
}

/* Handy: Fenster fast bildschirmbreit, Laden-Raster zweispaltig */
body.touch-device #shop-items {
  grid-template-columns: repeat(2, 1fr);
}

body.touch-device #inventory-grid {
  /* minmax(0, …): sonst setzt ein langes Wort (Starforged Greatsword) die Mindestbreite der Spalte
     und das Raster ragt bei 360 px um ein paar px aus dem Fenster (ui-audit hscroll, 14.10.2026) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Dienste eines NPCs im Gespräch (Laden, Schmiede, Brauen) */
#quest-services {
  display: flex;
  gap: 8px;
  margin: -4px 0 12px;
}

.quest-service-btn {
  --u: 26px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--brass);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.quest-service-btn .ui-icon {
  filter: brightness(0.25);
}

/* Arena-Ränge bei Enrique (QuestUI.renderArena): Rangleiter — Medaille I–V in Metallfarbe, Name, Titel/Satz, Belohnung
   mit Item-Icons, Status rechts. Dunkle Karten mit farbigem Rand statt bunter Kacheln (Daniel 19.10.: „kann schöner“) */
#arena-ranks { margin: -4px 0 12px; }
.arena-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 2px 6px; font-family: var(--font-pixel); color: var(--brass);
}
.arena-head b { font-size: 16px; letter-spacing: 0.5px; }
.arena-head span { font-size: 13px; color: #cdbf9c; }
.arena-ladder { display: flex; flex-direction: column; gap: 6px; }
.arena-rank {
  --metal: #c98a4b; --metal-hi: #f0c08a;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 7px 10px 7px 8px;
  font-family: var(--font-pixel); color: #f3ead2; text-align: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--metal) 22%, #1a2219) 0%, #1a2219 55%);
  border: 2px solid color-mix(in srgb, var(--metal) 70%, #000);
  border-left-width: 6px; border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.arena-rank.arena-silver { --metal: #aab4bf; --metal-hi: #eef3f8; }
.arena-rank.arena-gold { --metal: #e0ad3a; --metal-hi: #fff0b0; }
.arena-rank.arena-champion { --metal: #d9603a; --metal-hi: #ffb08a; }
.arena-rank.arena-legend { --metal: #9a7ae0; --metal-hi: #e4d6ff; }
.arena-medal {
  flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #20180e;
  background: radial-gradient(circle at 35% 30%, var(--metal-hi), var(--metal) 60%, color-mix(in srgb, var(--metal) 60%, #000) 100%);
  border: 2px solid #20180e; border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.arena-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.arena-main b { font-size: 16px; color: var(--metal-hi); }
.arena-main small { font-size: 12px; line-height: 1.25; color: #cdbf9c; overflow-wrap: anywhere; }
.arena-reward { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12px; }
.arena-purse, .arena-item { display: inline-flex; align-items: center; gap: 4px; color: #f2c75c; }
.arena-item { color: #eadcb8; }
.arena-coin {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff0b0, #f2c75c 55%, #b8860b);
  border: 1px solid #3a2a10;
}
.arena-state {
  flex: none; min-width: 58px; padding: 6px 8px; text-align: center;
  font-size: 13px; font-weight: 700; color: #20180e;
  background: var(--brass); border: 2px solid #20180e; border-radius: 7px;
}
.arena-rank.is-won .arena-state { background: #5fbf5a; }
.arena-rank.is-locked { cursor: not-allowed; filter: saturate(0.35); opacity: 0.7; }
.arena-rank.is-locked .arena-state { background: #4a4a44; color: #cdbf9c; }
.arena-rank:not(:disabled):hover, .arena-rank:not(:disabled):focus-visible { border-color: var(--metal-hi); }

/* Handy: pro Fenster genau EIN Scrollbereich. Verschachtelte Listen mit
   eigenem overflow fingen den Wisch ab — gescrollt hat es nur, wenn der
   Finger zufällig auf der richtigen Fläche lag. */
body.touch-device #inventory-container,
body.touch-device #shop-container,
body.touch-device #quest-container,
body.touch-device #crafting-container {
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body.touch-device #inventory-grid,
body.touch-device #shop-items,
body.touch-device #quest-list,
body.touch-device #quest-details,
body.touch-device #crafting-recipes {
  max-height: none;
  overflow: visible;
}

/* ── Angepinnte Quests (Tracker) ──────────────────── */
#quest-tracker {
  cursor: pointer;
  width: 220px;
  padding: 8px 10px;
}

#quest-tracker .tracker-quest {
  margin-bottom: 8px;
}

#quest-tracker .tracker-quest:last-child {
  margin-bottom: 0;
}

#quest-tracker .tracker-quest-name {
  font-size: 13px;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--ink);
}

#quest-tracker .tracker-objective {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 6px;
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--cream);
}

#quest-tracker .tracker-objective .quest-bar {
  grid-column: 1 / -1;
}

.tracker-obj-count {
  color: var(--muted);
}

#quest-tracker .tracker-objective.is-return {
  display: block;
  color: #9bd46a;
}

#quest-tracker .tracker-quest.is-ready .tracker-quest-name::before {
  content: '? ';
  color: #9bd46a;
}

/* Fortschrittsbalken (Tracker und Tagebuch) */
.quest-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  overflow: hidden;
}

.quest-bar-fill {
  display: block;
  height: 100%;
  background: var(--brass);
  transition: width 0.4s ease-out;
}

.is-done .quest-bar-fill,
.is-ready .quest-bar-fill {
  background: #9bd46a;
}

/* ── Quest-Tagebuch ───────────────────────────────── */
#quest-journal {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
  overflow-y: auto;
}

#quest-journal[hidden] {
  display: none;
}

.journal-sheet {
  width: min(520px, 100%);
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  overflow-y: auto;
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--font-pixel);
  padding: 14px;
}

.journal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--brass-dark);
}

.journal-title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.journal-pins {
  font-size: 12px;
  color: var(--muted);
}

.journal-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 12px 4px;
}

.journal-card {
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.journal-card.is-pinned {
  box-shadow: inset 0 0 0 2px var(--brass-dark);
}

.journal-card.is-ready {
  box-shadow: inset 0 0 0 2px #5f8f3e;
}

.journal-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-card-name {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.journal-pin {
  font-family: var(--font-pixel);
  font-size: 13px;
  min-width: 72px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--muted);
  cursor: pointer;
}

/* Quest abbrechen: unauffällig unten rechts, scharf gestellt rot (QuestJournal.abandonBtn) */
.journal-abandon {
  display: block;
  margin: 8px 0 0 auto;
  font-family: var(--font-pixel);
  font-size: 12px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.journal-abandon.is-armed { background: #5a1f1a; color: #ffd1c9; border-color: #ff5a4f; }
body.touch-device .journal-abandon { min-height: 40px; }

.journal-pin[aria-pressed='true'] {
  background: var(--brass-dark);
  color: var(--cream);
}

.journal-card-giver {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.is-ready .journal-card-giver {
  color: #9bd46a;
}

.journal-card-desc {
  font-size: 13px;
  line-height: 1.35;
  margin: 8px 0;
  color: var(--cream);
  opacity: 0.9;
}

.journal-objectives {
  margin: 6px 0 8px;
}

.journal-obj {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  column-gap: 6px;
  align-items: center;
  font-size: 13px;
  margin-bottom: 6px;
}

.journal-obj .quest-bar {
  grid-column: 2 / -1;
}

.journal-obj-check {
  color: #9bd46a;
  font-weight: 700;
}

.journal-obj-count {
  color: var(--muted);
}

.journal-obj-wait {
  margin: -2px 0 4px 22px;
  font-size: 12px;
  color: #b9a8e8;
}

.journal-obj.is-done .journal-obj-text {
  color: var(--muted);
}

.journal-rewards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(140, 106, 53, 0.5);
  font-size: 12px;
}

.journal-rewards-label {
  color: var(--muted);
  margin-right: 2px;
}

.journal-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
}

.journal-reward.is-xp {
  color: #9bd46a;
}

.journal-reward.is-gold {
  color: var(--gold);
}

/* Tracker-Kurzfassung (Handy): je Quest eine Zeile, direkt unter dem ☰ neben der
   Statusbox — nicht unter ihr, sie wächst mit Gruppenrahmen bis in die Bildmitte.
   Statusbox seit 12.10. 216 px + 8 px Rand = 224 px, dazu 12 px Abstand (#42 Heron:
   „Overlay overlapping the profile card and the quests“ — gerechnet war noch mit 200 px).
   Aufgeklappt (Tipp) steht sie wie vorher unter der Statusbox (mobile.css). */
body.touch-device #quest-tracker.is-compact {
  top: calc(56px + env(safe-area-inset-top));
  width: auto;
  max-width: min(220px, calc(100% - 204px));   /* Statusbox seit 18.10. schmaler (188 px) */
  padding: 4px 8px;
  background: rgba(24, 33, 27, 0.78);   /* 0,55 bis 12.10.: auf hellem Pflaster kaum lesbar */
  box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.6);
  border-width: 1px;
}

.tracker-line {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink);
}

.tracker-line-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracker-line-count {
  color: var(--gold);
  flex: none;
}

/* „+2“: weitere angepinnte Quests (Kurzfassung) */
.tracker-more {
  flex: none;
  align-self: center;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(242, 199, 92, 0.2);
  color: var(--gold);
  font-size: 11px;
  line-height: 16px;
}

.tracker-line.is-ready .tracker-line-text,
.tracker-line.is-ready .tracker-line-count {
  color: #9bd46a;
}

/* Kopfzeile mit Schließen-Knopf bleibt beim Scrollen oben stehen
   (die Fenster scrollen als Ganzes; ihr Innenabstand ist 14 px) */
#inventory-header,
#shop-header,
#quest-header,
#crafting-header,
.journal-head {
  position: sticky;
  top: -14px;
  z-index: 5;
  background: var(--panel-solid);
  margin-top: -14px;
  padding-top: 14px;
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.6);
}

/* Handy: Fenster haben dort 10 px Innenabstand (mobile.css) */
body.touch-device #inventory-header,
body.touch-device #shop-header,
body.touch-device #quest-header,
body.touch-device #crafting-header {
  top: -10px;
  margin-top: -10px;
  padding-top: 10px;
}

/* Pin-Farbpunkt: gleiche Farbe wie Pfeil und Kartenmarker */
.q-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  vertical-align: 1px;
}

/* Handy-Kurzfassung: eine Zeile je Quest, Punkt groß genug, um ihn dem Randpfeil zuzuordnen */
body.touch-device #quest-tracker.is-compact .tracker-line {
  font-size: 13px;
  line-height: 1.3;   /* drei Zeilen enden über den Gruppenrahmen (360×640 mit 4er-Gruppe) */
  align-items: center;
}

body.touch-device #quest-tracker.is-compact .q-dot {
  width: 10px;
  height: 10px;
}

.q-dot.is-off {
  display: none;
}

.tracker-line {
  align-items: center;
}

.tracker-line .q-dot {
  margin-right: 0;
}

#quest-tracker .tracker-quest.is-ready .tracker-quest-name::before {
  content: none;
}

/* ── Snappy: Fenster ploppen auf, Knöpfe geben beim Drücken nach ── */
@keyframes ui-pop {
  from { opacity: 0; transform: var(--pop-base, translate(0, 0)) scale(0.94); }
  to { opacity: 1; transform: var(--pop-base, translate(0, 0)) scale(1); }
}

.ui-pop {
  animation: ui-pop 140ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* zentrierte Fenster tragen translate(-50%, -50%) — beim Poppen behalten */
#inventory-container.ui-pop,
#shop-container.ui-pop,
#quest-container.ui-pop,
#crafting-container.ui-pop,
/* Markt, Handel, Beutel/Lager: fehlten — beim Aufploppen sprang das Fenster 140 ms nach
   rechts unten (UI-Audit 1080@200: Reiter „My listings“ außerhalb des Bildes angetippt) */
#market-window.ui-pop,
#market-pick.ui-pop,
#trade-window.ui-pop,
#trade-qty.ui-pop,
.loot-box.ui-pop {
  --pop-base: translate(-50%, -50%);
}

button,
.menu-tile,
.hud-btn,
.inventory-slot,
.shop-item,
.quest-item,
.recipe-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  transition: transform 70ms ease-out, filter 70ms ease-out;
}

button:active:not(:disabled) {
  transform: scale(0.95);
  filter: brightness(1.12);
}

.inventory-slot:active,
.shop-item:active,
.quest-item:active,
.recipe-item:active {
  transform: scale(0.97);
  filter: brightness(1.15);
}

/* Neue Aufträge (Quest-Zeichen „!“) in Tracker und Tagebuch */
.is-offer,
.is-offer .tracker-line-text {
  color: var(--cream);
}

#quest-tracker .tracker-objective.is-offer {
  display: block;
}

.journal-offers {
  border: 2px dashed rgba(246, 234, 206, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.journal-offers-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
}

.journal-offer {
  font-size: 13px;
  color: var(--cream);
  line-height: 1.5;
}

/* aufgeklappter Tracker: Auftragszeile darf umbrechen, nie über den Rand */
#quest-tracker .tracker-objective.is-offer .tracker-line-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── Figurenwahl („Look“) ─────────────────────────── */
#look-picker {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#look-picker[hidden] {
  display: none;
}

.look-sheet {
  width: min(520px, 100%);
  max-height: calc(100dvh / var(--ui) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brass-dark) transparent;
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  padding: 14px;
  color: var(--cream);
  font-family: var(--font-pixel);
}

.look-sheet .journal-head {
  position: sticky;
  top: -14px;
  margin-top: -14px;
  padding-top: 14px;
  background: var(--panel-solid);
  z-index: 2;
}

.look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}

.look-choice {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.4);
  cursor: pointer;
  padding: 0;
}

.look-choice.is-on {
  background: rgba(217, 184, 110, 0.18);
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Figuren-Baukasten (CharacterPicker.buildEditor): Figur + Zufall/Zurück oben und „Save look“
   unten bleiben stehen, nur die Zeilen dazwischen scrollen. Farben sind Farbfelder zum Antippen,
   alles andere ‹ Wert ›. Tippflächen 40 px. */
.look-sheet.is-editor { display: flex; flex-direction: column; overflow: hidden; }
.look-sheet.is-editor .journal-head { position: static; margin-top: 0; padding-top: 0; flex: none; }
.look-editor { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.le-top { display: flex; gap: 12px; align-items: center; flex: none; }
.le-stage {
  --fig: 96px;
  flex: none;
  width: 112px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.4);
}
.le-side { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.le-btn {
  min-height: 40px;
  font-family: var(--font-pixel); font-size: 16px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.4);
  cursor: pointer;
}
.le-btn:disabled { opacity: 0.45; cursor: default; }
.le-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 12px;
  align-content: start;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--brass-dark) transparent;
  padding-right: 2px;
}
.le-row { display: grid; grid-template-columns: 1fr 40px 76px 40px; align-items: center; gap: 4px; }
.le-row.is-swatch { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.le-swhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.le-swhead .le-val { font-size: 13px; color: var(--muted); }
.le-swatches { display: flex; flex-wrap: wrap; gap: 2px; }
.le-sw {
  width: 40px; height: 40px; padding: 0;
  font-family: var(--font-pixel); font-size: 20px; line-height: 1; color: var(--muted);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.le-sw:not(.is-none)::after {
  content: ''; position: absolute; inset: 5px; border-radius: 4px;
  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.18);
}
.le-sw.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.le-label { font-size: 14px; color: var(--muted); white-space: nowrap; }
.le-val { text-align: center; font-size: 15px; white-space: nowrap; }
.le-arrow {
  width: 40px; height: 40px;
  font-family: var(--font-pixel); font-size: 22px; line-height: 1;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.le-foot {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding-top: 8px; border-top: 2px solid rgba(140, 106, 53, 0.4);
}
.le-note { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); }
.le-note.is-dirty { color: var(--gold); font-weight: 700; }
.le-apply {
  flex: 0 0 auto; min-width: 150px; min-height: 44px; font-size: 17px;
  color: #1a140c; background: var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.le-apply.is-on { color: var(--cream); background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(140, 106, 53, 0.4); opacity: 0.75; }

/* 24×24-Bild aus dem 4×4-Blatt (96×96), 3-fach, erstes Bild = nach unten */
.look-face,
.menu-look-face {
  display: block;
  width: 72px;
  height: 72px;
  background-repeat: no-repeat;
  background-size: 288px 288px;
  background-position: 0 0;
  image-rendering: pixelated;
}

.menu-look-face {
  width: 40px;
  height: 40px;
  margin: -2px 0 0;
  background-size: 160px 160px;
  /* Bild setzt CharacterPicker (eigene Figur aus dem Baukasten) */
}

/* Zutaten zu Herstell-Zielen (Questfenster, Tagebuch, Tracker) */
.craft-needs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 2px 0 8px 22px;
  font-size: 12px;
  color: var(--muted);
}
.craft-needs-label {
  flex-basis: 100%;
}
.craft-needs.is-ready .craft-needs-label {
  color: #9bd46a;
}
.craft-need {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 2px;
  border: 1px solid rgba(140, 106, 53, 0.6);
  border-radius: 6px;
  background: rgba(20, 26, 21, 0.6);
  color: var(--cream);
}
.craft-need.is-have {
  color: #9bd46a;
}
/* Anteil aus der Lagertruhe (im Dorf zählt sie beim Herstellen mit) */
.craft-need-stored,
.ingredient-own.ingredient-stored {
  font-style: normal;
  opacity: 0.75;
}
#quest-tracker .craft-need-stored {
  display: none;
}
#quest-tracker .craft-needs {
  margin: 1px 0 3px;
  font-size: 10px;
  gap: 2px 4px;
}
#quest-objectives .craft-needs {
  margin-left: 0;
}

/* ── Berufe (SkillsUI) ────────────────────────────── */
#skills-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#skills-window[hidden] { display: none; }

.skills-sheet { width: min(440px, 100%); }

.skill-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
}

.skill-lv { color: var(--gold); font-weight: 700; }

.skill-bar {
  position: relative;
  height: 14px;
  margin: 6px 0;
  background: #10160f;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
}

.skill-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(180deg, #b7e0ff 0 45%, #9fd0ff 45% 100%);
}

.skill-bar span {
  position: relative;
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 10px;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink);
}

.skill-next { font-size: 13px; color: var(--cream); }
.skill-perks { font-size: 12px; color: var(--muted); margin-top: 2px; }

.skill-open {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
  color: #9bd46a;
}

.skills-hint { font-size: 12px; color: var(--muted); padding: 2px 4px; }

.recipe-locked { opacity: 0.7; }
.recipe-locked .craft-btn { font-size: 12px; }

/* Kategorie-Reiter über Laden- und Rezeptliste (CategoryTabs.js) */
.cat-tabs {
  display: flex;
  flex-wrap: nowrap;             /* eine Zeile, seitlich wischen: umgebrochen fraß */
  overflow-x: auto;              /* die Leiste am Handy drei Zeilen Platz */
  scrollbar-width: none;
  gap: 6px;
  margin: 0 0 10px;
  padding-bottom: 2px;
}

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

/* Mit Maus: umbrechen, alle Reiter sichtbar (seitliches Wischen gibt es dort nicht) */
@media (hover: hover) and (pointer: fine) {
  .cat-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.cat-tab {
  flex: 0 0 auto;
}

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
}

/* Leerer Zähler nimmt keinen Platz (sonst saß der Reiterinhalt links neben der Mitte — Hollow Nights, Daniel 16.10.) */
.cat-tab em:empty { display: none; }

.cat-tab em {
  font-style: normal;
  font-size: 11px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 0 6px;
}

.cat-tab.active {
  color: var(--ink);
  background: var(--brass);
  border-color: var(--brass-dark);
}

.cat-tab.is-quest {
  border-color: var(--gold);
}

.cat-tab.is-quest.active {
  background: var(--gold);
}

body.pad-active .cat-tabs::before {
  content: 'LB';
  align-self: center;
  font: 700 10px/18px var(--font-pixel);
  color: #fff;
  background: #555;
  border-radius: 9px;
  padding: 0 5px;
}

body.pad-active .cat-tabs::after {
  content: 'RB';
  align-self: center;
  font: 700 10px/18px var(--font-pixel);
  color: #fff;
  background: #555;
  border-radius: 9px;
  padding: 0 5px;
}

/* Skills-Fenster: Stecknadel rechts neben dem Level */
.skill-row {
  gap: 8px;
}

/* ── Wirtschaft (28.09.): Beutelplätze, Besitz im Rezept, Schmiedelohn ── */
.inv-count {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.inv-count.is-full {
  color: #ff9a8f;
}
.ingredient-own {
  font-style: normal;
  font-size: 11px;
  opacity: 0.75;
  margin-left: 2px;
}
.ingredient.recipe-fee {
  padding-left: 8px;
  color: var(--gold);
}
.ingredient.recipe-fee.ingredient-missing {
  color: #ff9a8f;
}
.shop-item.shop-locked {
  opacity: 0.7;
}

/* Gast-Hinweis (GuestReminder.js): klein, oben mittig, blockiert das Spiel nicht */
#guest-reminder {
  position: fixed;
  z-index: 2800;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--hud-bottom) + 8px);
  width: min(460px, calc(100vw / var(--ui) - 32px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #2f3a24;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.45), 0 6px 18px rgba(0, 0, 0, 0.45);
}
#guest-reminder[hidden] {
  display: none;
}
/* Beim Aufploppen (UIFx.pop) mittig bleiben — ohne das sprang er 140 ms lang
   um die halbe Breite nach rechts (am Handy halb aus dem Bild) */
#guest-reminder.ui-pop { --pop-base: translateX(-50%); }
#guest-reminder .gr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
}
#guest-reminder .gr-text b {
  color: var(--gold);
  font-size: 15px;
}
#guest-reminder .gr-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#guest-reminder button {
  font-family: var(--font-pixel);
  font-size: 15px;
  min-height: 40px;
  padding: 0 14px;
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 9px;
  cursor: pointer;
}
#guest-reminder .gr-save {
  font-weight: 700;
  background: #3f7a45;
}
#guest-reminder .gr-later {
  background: #2a352c;
}
/* Tasten-Hinweis je Gerät: Pad ≡/B, Tastatur M/Esc, Touch keiner */
#guest-reminder .gr-key {
  display: none;
  margin-left: 8px;
  padding: 0 5px;
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink);
  background: var(--cream);
  border-radius: 4px;
}
body.pad-active #guest-reminder .gr-key-pad,
body:not(.touch-device):not(.pad-active) #guest-reminder .gr-key-kbd {
  display: inline-block;
}
.menu-guest.is-highlight {
  box-shadow: inset 0 0 0 2px var(--gold);
}

/* Wirkung eines Gegenstands (shared/ItemTraits): Tooltip, Handwerk, Laden, Wiki */
.item-trait {
  color: var(--gold);
  font-size: 12px;
  line-height: 1.3;
}
.recipe-trait { margin: 4px 0 2px; }

/* Belohnung zur Wahl (QuestUI.choiceCards, 11.10.2026): eine Karte je Paket */
.reward-choice { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.reward-choice-head { font-size: 13px; font-weight: 700; color: var(--gold); }
.reward-choice-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 8px 10px;
  text-align: left;
  font-family: inherit;
  color: var(--cream);
  background: #1a221c;
  border: 2px solid var(--ink);
  border-radius: 9px;
  cursor: pointer;
}
.reward-choice-card:hover { background: #232e25; }
.reward-choice-card.is-picked { border-color: var(--gold); background: #2c2a18; box-shadow: 0 0 0 2px rgba(242, 199, 92, 0.35); }
.reward-choice-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.reward-role { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #3a3f3a; }
.reward-role.role-tank { background: #2f5a8e; }
.reward-role.role-healer { background: #3f6e3f; }
.reward-role.role-dps { background: #8e3a2f; }
.reward-choice-items { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.reward-choice-item { display: inline-flex; align-items: center; gap: 4px; }
.reward-choice-text { font-size: 12px; color: var(--muted); }

/* Werkstatt: Quest bei diesem NPC abgabebereit (CraftingUI.syncTurnIn, Feedback #63) */
.crafting-turnin {
  display: block;
  width: calc(100% - 4px);
  min-height: 40px;
  margin: 4px 2px 8px;
  border: 2px solid #221a12;
  border-radius: 8px;
  background: linear-gradient(180deg, #e2b64f, #b98a2c);
  box-shadow: inset 0 0 0 2px #fff0b8, 0 3px 0 rgba(0, 0, 0, 0.35);
  color: #221a12;
  font: 700 14px var(--font-pixel);
  cursor: pointer;
}
.crafting-turnin[hidden] { display: none; }

/* Rucksack: „Sort“ rechts in der Zeile „Items 3/20“ (Feedback #61) */
.inv-items-head { display: flex; align-items: center; gap: 4px; }
.inv-sort {
  margin-left: auto;
  padding: 3px 10px;
  border: 2px solid #221a12;
  border-radius: 6px;
  background: var(--panel-solid, #2a2116);
  box-shadow: inset 0 0 0 1px var(--brass-dark, #8c6a35);
  color: var(--cream, #f2e6c8);
  font: 700 12px var(--font-pixel);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
body.touch-device .inv-sort { min-height: 40px; min-width: 56px; }

/* Freunde einladen (InviteUI.js): Text, QR-Code (antippen = groß), Link, Teilen/Kopieren, wer gekommen ist */
#invite-dialog {
  position: fixed; inset: 0; z-index: 3200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 8, 5, 0.55);
}
#invite-dialog[hidden] { display: none; }
.invite-sheet { width: min(380px, calc(100vw / var(--ui, 1) - 24px)); max-height: calc(100dvh / var(--ui, 1) - 24px); overflow-y: auto; }
.invite-text { margin: 4px 2px 10px; font-size: 13px; line-height: 1.35; color: var(--cream, #f2e6c8); }
.invite-qr {
  display: block; margin: 0 auto 4px; padding: 0;
  border: 2px solid #221a12; border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--brass-dark, #8c6a35);
  cursor: zoom-in;
}
.invite-qr canvas { display: block; width: 180px; height: 180px; image-rendering: pixelated; border-radius: 6px; }
#invite-dialog.is-qr-big .invite-qr { cursor: zoom-out; }
#invite-dialog.is-qr-big .invite-qr canvas { width: min(320px, calc(100vw / var(--ui, 1) - 64px)); height: min(320px, calc(100vw / var(--ui, 1) - 64px)); }
.invite-qr-note { text-align: center; font-size: 12px; color: var(--muted, #b8a987); margin-bottom: 10px; }
.invite-link {
  width: 100%; box-sizing: border-box; padding: 8px 10px; margin-bottom: 8px;
  border: 2px solid #221a12; border-radius: 6px; background: #15100b; color: var(--cream, #f2e6c8);
  font: 13px var(--font-pixel);
}
.invite-actions { display: flex; gap: 8px; }
.invite-btn {
  flex: 1; min-height: 40px;
  border: 2px solid #221a12; border-radius: 8px;
  background: var(--panel-solid, #2a2116); box-shadow: inset 0 0 0 1px var(--brass-dark, #8c6a35);
  color: var(--cream, #f2e6c8); font: 700 14px var(--font-pixel); cursor: pointer;
}
.invite-btn.invite-share { background: linear-gradient(180deg, #e2b64f, #b98a2c); color: #221a12; box-shadow: inset 0 0 0 2px #fff0b8; }
.invite-btn[hidden] { display: none; }
.invite-msg { min-height: 18px; margin: 6px 2px 2px; font-size: 13px; }
.invite-msg.ok { color: #9fe08a; }
.invite-stats { margin: 8px 2px 4px; font-size: 13px; color: var(--gold, #f2c75c); }
.invite-friends { list-style: none; margin: 0; padding: 0; }
.invite-friends li { display: flex; justify-content: space-between; padding: 4px 6px; border-bottom: 1px solid rgba(140, 106, 53, 0.3); font-size: 13px; }
.invite-friends li span { color: var(--muted, #b8a987); }

/* Feedback: Sprachnachricht (FeedbackUI.startVoice) */
.feedback-voice { margin: 6px 0 4px; }
.feedback-voice-btn {
  width: 100%; min-height: 40px;
  border: 2px dashed rgba(140, 106, 53, 0.8); border-radius: 8px;
  background: rgba(24, 19, 13, 0.6); color: var(--cream, #f2e6c8);
  font: 700 14px var(--font-pixel); cursor: pointer;
}
.feedback-voice-btn.is-rec { border-style: solid; border-color: #d9603b; color: #ffb4a0; animation: fb-rec 1s ease-in-out infinite; }
@keyframes fb-rec { 50% { background: rgba(120, 30, 20, 0.45); } }
.feedback-voice-row { display: flex; align-items: center; gap: 8px; }
.feedback-voice-row audio { flex: 1; min-width: 0; height: 40px; }
.feedback-voice-del {
  width: 40px; height: 40px; flex: none;
  border: 2px solid #221a12; border-radius: 50%;
  background: var(--panel-solid, #2a2116); color: var(--cream, #f2e6c8); font: 700 18px/1 var(--font-pixel); cursor: pointer;
}

.invite-reward { margin: 10px 2px 2px; padding: 8px 10px; border-radius: 8px; background: rgba(47, 138, 128, 0.18); border: 1px solid rgba(47, 138, 128, 0.6); font-size: 12px; line-height: 1.4; color: var(--cream, #f2e6c8); }
.invite-reward b { color: var(--gold, #f2c75c); }

/* /css/combat.css */
/* Kampfbildschirm v2 (CombatScene): Karten und Knöpfe im HUD-Stil.
   Unten gehört den Daumen: Gruppe, Ultimate-Leiste, vier große Knöpfe. */

#combat-ui {
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;          /* Tipps auf freie Fläche gehen ans Spiel (Timing) */
  font-family: var(--font-pixel);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
}

.cb-card {
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 7px 9px;
}

.cb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}

.cb-lv {
  font-size: 11px;
  color: var(--gold);
}

/* Aufgerückt im Bosskampf (Battle.syncPlayers): „⇧ Lv 30“ in Türkis mit Rahmen, nicht umbrechen */
.cb-lv.cb-sync {
  flex: none;
  white-space: nowrap;
  color: #8fe8d8;
  padding: 0 4px;
  border: 1px solid rgba(143, 232, 216, 0.55);
  border-radius: 4px;
  background: rgba(20, 70, 64, 0.45);
}

.cb-bar {
  position: relative;
  height: 9px;
  margin-top: 5px;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

.cb-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  transition: width 0.25s;
}

.cb-bar span {
  position: absolute;
  inset: 0;
  /* Zahl mittig in der Innenfläche: alle Kästen sind border-box, eine
     line-height = height (13 px) setzte die Zeile 2 px zu tief, in der kleinen
     Wachen-Leiste (6 px innen) war die Unterhälfte der Zahl weg (UI-Audit 29.09.) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  text-align: center;
  /* Umriss rundum: auf dem hellgrünen Spieler-Balken waren „112/148“ kaum zu lesen (Playbot 19.10.) */
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink);
}

.cb-hp { height: 13px; }
.cb-hp span { font-size: 10px; }
.cb-hp i { background: linear-gradient(180deg, #f06a5f 0 45%, #e0493f 45% 100%); }
.cb-player .cb-hp i { background: linear-gradient(180deg, #b4e68b 0 45%, #9bd46a 45% 100%); }
.cb-stagger { height: 6px; }
.cb-stagger i { background: var(--gold); }
.cb-gauge { height: 6px; }
.cb-gauge i { background: #9fd0ff; transition: none; }
.cb-energy { height: 5px; }
.cb-energy i { background: #c77dff; }

/* Balken mit kurzem Wort davor (Turn, Stun, Ult) — CombatScene.meter, 11.10.2026 */
.cb-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
}
.cb-meter[hidden] { display: none; }
.cb-meter > em {
  flex: none;
  width: 26px;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  color: var(--muted);
  text-transform: uppercase;
}
.cb-meter > .cb-bar { flex: 1; margin-top: 0; }

/* Einer gegen einen: Zugleiste sagt nichts Neues (Platz bleibt, damit nichts springt) */
#combat-ui.solo-fight .cb-turns { visibility: hidden; }

/* Neu freigeschaltet (Skills ab Lv 2/3, Ultimate ab Lv 4): Abzeichen bis zum Ende des ersten Kampfs damit */
.cb-actions button.is-new::after,
.cb-ult.is-new::after {
  content: 'NEW';
  position: absolute;
  top: -7px;
  right: -3px;
  padding: 1px 4px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--gold);
  color: #221a12;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  z-index: 1;
}
.cb-ult[hidden] { display: none; }

/* Gegner oben */
.cb-enemies {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cb-enemy {
  width: min(360px, 100%);
}

.cb-enemy.is-boss {
  width: min(460px, 100%);
  border-color: #3a1a12;
  box-shadow: inset 0 0 0 2px #b0503a, 0 3px 0 rgba(0, 0, 0, 0.35);
}

.cb-enemy.is-stunned {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(242, 199, 92, 0.6);
}

.cb-intent {
  --u: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding: 4px 8px 4px 4px;
  border-radius: 7px;
  background: #1a221c;
  border: 2px solid var(--ink);
  font-size: 13px;
}

.cb-intent.atk { color: #ffd1c9; }
.cb-intent.warn { color: var(--gold); animation: cb-pulse 0.9s ease-in-out infinite; }
.cb-intent.danger { color: #ff8a7a; border-color: #5a1a12; animation: cb-pulse 0.6s ease-in-out infinite; }
.cb-intent.def { color: #9fd0ff; }
.cb-intent.stun { color: var(--gold); }

@keyframes cb-pulse {
  50% { filter: brightness(1.35); }
}

/* Ansage in der Mitte */
.cb-banner {
  position: fixed;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, 0.6);
  /* umbrechen statt über den Rand: „KING SLIME DEFEATED!“ und Co. sind am
     Handy (412 px) breiter als der Bildschirm */
  width: max-content;
  max-width: calc(100% - 24px);
  text-align: center;
  line-height: 1.1;
  transition: opacity 0.2s, transform 0.2s;
}

.cb-banner.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Überfall (CombatScene.create): rot statt gold */
.cb-banner.is-bad {
  color: #ff7a66;
}

/* Unten: Log, Gruppe, Ultimate, Aktionen */
.cb-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(520px, 100%);
  margin: 0 auto;
}

/* Übungskampf: drei Ziele als Marken, darunter EIN Satz zum nächsten (CombatScene.updateTutorial).
   Klein gehalten und während eines Rings ausgeblendet — es lag über der Figur und dem Abwehrring. */
.cb-tut {
  width: min(520px, 100%);
  margin: 0 auto 6px;
  padding: 5px 9px 6px;
  background: rgba(20, 16, 10, 0.88);
  border: 2px solid var(--gold);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.3;
  color: #fff6e0;
  box-sizing: border-box;
}
.cb-tut[hidden] { display: none; }
.cb-tut-head { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 3px; }
.cb-tut-title { color: var(--gold); font-weight: 700; margin-right: 2px; }
.cb-tut-chip {
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 246, 224, 0.25);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.cb-tut-chip.is-next { color: #1a140c; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.cb-tut-chip.is-done { color: #9ccf8a; border-color: rgba(156, 207, 138, 0.5); }
.cb-tut-how { color: #fff6e0; }

.cb-hint {
  text-align: center;
  font-size: 14px;
  min-height: 20px;
  color: var(--muted);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.cb-hint.is-turn {
  color: var(--gold);
  font-weight: 700;
}

.cb-hint.is-alert {
  color: #ffd9a0;
  font-weight: 700;
  animation: cb-pulse 0.5s ease-in-out infinite;
}

.cb-log {
  font-size: 12px;
  color: var(--muted);
  text-shadow: 0 1px 2px #000;
  min-height: 30px;
}

.cb-party {
  display: flex;
  gap: 6px;
}

.cb-player {
  flex: 1;
  min-width: 0;
  padding: 5px 7px;
}

.cb-player .cb-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.cb-player.is-me {
  flex: 1.6;
}

.cb-player.is-ready {
  box-shadow: inset 0 0 0 2px #9fd0ff, 0 0 10px rgba(159, 208, 255, 0.5);
}

.cb-player.is-down {
  opacity: 0.45;
}

/* Bewusstlos (Verbindung weg, CombatController.knockOut): grau, „zZ“ neben dem Namen */
.cb-player.is-ko {
  opacity: 0.7;
  filter: grayscale(1);
}

.cb-ko {
  margin-left: 4px;
  color: #cfd8ff;
  font-size: 0.85em;
}

/* Gift (Mycelia): violetter Rand, grüner LP-Balken wird giftviolett, „☠×3“ neben dem Namen */
.cb-player.is-poisoned { box-shadow: 0 0 0 2px #b07adf inset; }
.cb-player.is-poisoned .cb-hp i { background: linear-gradient(180deg, #c89ae8 0 45%, #9a64c4 45% 100%); }
.cb-slow, .cb-bleed, .cb-burn { margin-left: 4px; font-size: 0.85em; }
/* Robin: Brand — orangeroter Rand, Balken glüht; Abzeichen 🔥×N */
.cb-burn { color: #ffb347; font-weight: 700; }
.cb-player.is-burning { box-shadow: 0 0 0 2px #ff8a2a inset; }
.cb-player.is-burning .cb-hp i { background: linear-gradient(180deg, #ffc84a 0 45%, #d24a12 45% 100%); }
.cb-player.is-slowed .cb-gauge i { filter: saturate(0.5) brightness(0.85); }

/* Waffen-Eigenarten (CombatPerks.perkBadges, 14.10.2026): kleine Abzeichen unter den Balken */
.cb-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.cb-perk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  color: var(--cream);
  background: rgba(13, 19, 15, 0.55);
}
.cb-perk.is-streak { color: #9fd0ff; }
.cb-perk.is-streak.is-max { color: #fff6d8; background: rgba(242, 199, 92, 0.35); }
.cb-perk.is-charge { color: #9fd0ff; }
.cb-perk.is-charge.is-max { color: #0d130f; background: #9fd0ff; font-weight: 700; }
.cb-perk.is-ward { color: #fff1a8; background: rgba(242, 199, 92, 0.25); }
.cb-perk.is-wound { color: #ffb0a6; background: rgba(216, 50, 42, 0.45); }
.cb-pips { display: inline-flex; gap: 2px; }
.cb-pips i {
  width: 6px;
  height: 6px;
  background: rgba(246, 234, 206, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.cb-perk.is-streak .cb-pips i.on { background: #f2c75c; }
.cb-perk.is-streak.is-max .cb-pips i.on { background: #fff6d8; }
.cb-perk.is-charge .cb-pips i.on { background: #9fd0ff; }

.cb-poison {
  margin-left: 4px;
  color: #d8b4ff;
  font-size: 0.85em;
  white-space: nowrap;
}

#combat-ui button {
  pointer-events: auto;
  font-family: var(--font-pixel);
  color: var(--cream);
  border: 2px solid var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.cb-actions {
  display: grid;
  /* Attack · Skill 1 · Skill 2 · Guard · Potion (Skills aus der Rolle). Spalten nach den sichtbaren Knöpfen:
     auf Lv 1 nur drei (Skills ab Lv 2/3), dann füllen sie die Breite statt Lücken rechts */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}

.cb-actions button[hidden] { display: none; }

.cb-actions button {
  --u: 30px;
  position: relative;
  height: 68px;
  border-radius: 12px;
  background: #2a352c;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.06s, filter 0.15s, opacity 0.15s;
}

.cb-actions button[data-a="attack"] { background: #8e3a2f; }
.cb-actions button[data-a="heavy"],
.cb-actions button[data-slot="0"] { background: #8a5a2a; }
.cb-actions button[data-slot="1"] { background: #6a4a8e; }
.cb-actions button[data-a="guard"] { background: #2f5a8e; }
.cb-actions button[data-a="potion"] { background: #3f6e3f; }

.cb-actions button:active {
  transform: translateY(2px) scale(0.97);
}

.cb-actions button:disabled,
.cb-flee:disabled {
  opacity: 0.38;
  filter: grayscale(0.6);
}

#combat-ui.my-turn .cb-actions button:not(:disabled) {
  animation: cb-ready 1.2s ease-in-out infinite;
}

@keyframes cb-ready {
  50% { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(242, 199, 92, 0.55); }
}

.cb-actions em {
  position: absolute;
  top: 4px;
  right: 6px;
  font-style: normal;
  font-size: 12px;
  color: var(--gold);
}

.ui-icon.cb-shield { --ix: 14; }

/* Ultimate: Leiste, die sich füllt; voll = leuchtet */
.cb-ult {
  position: relative;
  height: 38px;
  border-radius: 10px;
  background: #241a2e;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.cb-ult-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #6b3fa0, #c77dff);
  transition: width 0.3s;
}

.cb-ult-label {
  position: relative;
  text-shadow: 0 1px 0 var(--ink);
}

.cb-ult.is-full {
  animation: cb-ult 0.8s ease-in-out infinite;
}

.cb-ult:disabled .cb-ult-label {
  opacity: 0.55;
}

@keyframes cb-ult {
  50% { box-shadow: 0 0 16px rgba(199, 125, 255, 0.8); filter: brightness(1.2); }
}

.cb-flee {
  align-self: center;
  padding: 5px 18px;
  border-radius: 8px;
  background: #3a3f3a;
  font-size: 12px;
}

/* Desktop: etwas luftiger */
body:not(.touch-device) .cb-actions button {
  height: 60px;
}

/* ---------------------------------------------------------------- Boss (CombatBoss.js) */

/* Ziel wählen: Gegnerkarten sind antippbar, sobald es mehr als einen Gegner gibt.
   Solange ein Ring läuft, reicht die Karte den Tipp ans Timing weiter. */
#combat-ui.many-foes .cb-enemy {
  pointer-events: auto;
  cursor: pointer;
}

.cb-enemies { flex-wrap: wrap; }

#combat-ui.many-foes .cb-enemy:not(.is-boss) {
  width: min(170px, 46%);
}

/* Wachen des Bosses: eine Zeile + LP */
.cb-enemy.is-mini {
  padding: 4px 7px 5px;
}

.cb-enemy.is-mini .cb-row {
  font-size: 12px;
}

.cb-enemy.is-mini .cb-hp {
  height: 12px;
  margin-top: 3px;
}

.cb-enemy.is-mini .cb-hp span {
  font-size: 9px;
}

.cb-mini-intent {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cb-mini-intent.danger, .cb-mini-intent.atk { color: #ffd1c9; }
.cb-mini-intent.stun { color: var(--gold); }

.cb-enemy.is-target {
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px var(--gold), 0 3px 0 rgba(0, 0, 0, 0.35);
}

.cb-enemy.is-feasting {
  box-shadow: inset 0 0 0 2px #9bd46a, 0 0 16px rgba(155, 212, 106, 0.7);
  animation: cb-pulse 0.5s ease-in-out infinite;
}

/* Phasen-Rauten auf der Bosskarte */
.cb-phase {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.cb-phase i {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: #3a2a1c;
  border: 1px solid var(--ink);
}

.cb-phase i.on {
  background: #ff8a7a;
}

/* Fressen brechen: Schaden-Balken (grün → voll = gebrochen) und Restzeit */
.cb-feast { height: 14px; border-color: #20361a; }
.cb-feast i { background: linear-gradient(180deg, #c8f0a0 0 45%, #9bd46a 45% 100%); }
.cb-feast span { font-size: 10px; font-weight: 700; color: #fff; }
.cb-feast-time { height: 4px; margin-top: 2px; }
.cb-feast-time i { background: #ff8a7a; transition: none; }

/* Steinschale (Stone Warden, harden): graue Karte + klarer Hinweis, was hilft */
.cb-enemy.is-shelled {
  box-shadow: inset 0 0 0 2px #c8bca8, 0 0 12px rgba(200, 188, 168, 0.6);
}
.cb-shell {
  margin-top: 3px;
  padding: 1px 4px;
  border: 1px solid var(--ink);
  background: #6f665a;
  color: #f6eace;
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}

/* Namenskarte beim Auftritt */
.cb-bosscard {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scaleX(0.2);
  opacity: 0;
  /* Handy: nie breiter als der Schirm (Playtest 29.09.: „THE STONE WARDEN“ war
     in einer Zeile 472 px breit und links wie rechts abgeschnitten) — der Name
     wird kleiner und bricht notfalls um */
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 10px clamp(14px, calc(6vw / var(--ui)), 34px) 12px;
  text-align: center;
  background: linear-gradient(90deg, transparent, rgba(20, 8, 6, 0.9) 12%, rgba(20, 8, 6, 0.9) 88%, transparent);
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  overflow-wrap: break-word;
  text-wrap: balance;
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.cb-bosscard.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1);
}

.cb-bosscard small {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #ff8a7a;
}

.cb-bosscard b {
  display: block;
  font-size: clamp(26px, calc(8.5vw / var(--ui)), 40px);
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: clamp(1px, calc(0.6vw / var(--ui)), 3px);
  text-shadow: 0 3px 0 var(--ink), 0 0 16px rgba(242, 199, 92, 0.5);
}

.cb-bosscard em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--cream);
}

/* Beute-Schau nach dem Sieg */
.cb-spoils {
  position: fixed;
  left: 50%;
  top: 42%;
  width: min(340px, calc(100% - 32px));
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  padding: 14px 16px 16px;
  text-align: center;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* Goldener Schein als Verlauf statt box-shadow mit 40 px Unschärfe: die musste
   beim Einblenden jedes Bild neu gerechnet werden (Messung 29.09., 412×860:
   4–5 Bilder über 33 ms, längstes 43–69 ms; mit Verlauf 0 Bilder, 20–33 ms).
   Fläche und Goldrand liegen darüber (::after), sonst tönte der Schein sie. */
.cb-spoils::before,
.cb-spoils::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.cb-spoils::before {
  inset: -28px;
  border-radius: 36px;
  background: radial-gradient(farthest-side, rgba(242, 199, 92, 0.45) 70%, rgba(242, 199, 92, 0));
}

.cb-spoils::after {
  inset: 0;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--gold);
}

.cb-spoils.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cb-spoils h3 {
  margin: 0 0 4px;
  font-size: 24px;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.cb-spoil-xp {
  font-size: 18px;
  font-weight: 700;
  color: #9bd46a;
  text-shadow: 0 2px 0 var(--ink);
}

.cb-spoils ul {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cb-spoils li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  background: #1a221c;
  border: 2px solid var(--ink);
  border-radius: 8px;
  opacity: 0;
  animation: cb-spoil-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

/* Viel Beute (Boss + Wachen, 12 Sorten): Liste scrollt, das Fenster (Mitte bei
   42 %) bleibt im Bild — vorher 772 px hoch, am Handy oben „Spoils“ und XP weg
   (UI-Audit 29.09.). Seit 15.10. als Spalte mit Höchsthöhe statt fester 170 px
   für den Rest: mit zwei Hinweisen (Splitter aus, Rucksack voll) ragte die Karte
   am Handy oben hinaus. Die Liste gibt nach, alles andere behält seine Höhe. */
.cb-spoils {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: calc(80dvh / var(--ui));
}
.cb-spoils > * { flex-shrink: 0; }
.cb-spoils ul {
  align-self: stretch;
  flex: 0 1 auto;
  min-height: 88px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cb-spoils li b { flex: 1; text-align: left; font-size: 14px; }
.cb-spoils li em { font-style: normal; color: var(--gold); }

@keyframes cb-spoil-in {
  from { opacity: 0; transform: translateY(8px) scale(0.8); }
  to { opacity: 1; transform: none; }
}

.cb-spoil-note {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 10px;
}

/* Sternsplitter fällt wegen Überlevel aus (CombatBoss.showSpoils, dimShard) */
.cb-spoil-dim { color: #b8c4dc; font-style: italic; }

.cb-spoil-go {
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 28px;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}

/* ---------------------------------------------------------------- Nachzügler (Aggro)
   Gegner, die dich gejagt haben, treten mitten im Kampf bei ('arrive'). Bis zu drei
   Gegner: schmale Karten in EINER Reihe (412 px Handy: 3 × ~128 px), sonst deckten
   zwei Kartenreihen die Figuren zu. */
#combat-ui.three-foes .cb-enemies { flex-wrap: nowrap; gap: 5px; }
#combat-ui.three-foes .cb-enemy:not(.is-boss) {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
}
#combat-ui.mirror-foes .cb-enemy.is-boss {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 6px;
}
#combat-ui.three-foes .cb-enemy .cb-row { font-size: 12px; gap: 4px; }
#combat-ui.three-foes .cb-enemy .cb-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#combat-ui.three-foes .cb-enemy .cb-lv { flex: none; }
#combat-ui.three-foes .cb-enemy .cb-intent {
  --u: 14px;
  gap: 3px;
  margin-top: 5px;
  padding: 3px 4px 3px 2px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Neu dazugekommen: Karte leuchtet kurz rot auf */
.cb-enemy.is-new { animation: cb-arrive 0.8s ease-out 2; }
@keyframes cb-arrive {
  0% { box-shadow: inset 0 0 0 2px #ff8a7a, 0 0 18px rgba(255, 106, 95, 0.9); transform: translateY(-4px); }
  100% { box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35); transform: none; }
}

/* ---------------------------------------------------------------- Wer ist dran? (CombatTurns.js)
   Oben eine Zugleiste: Angreifer (rot ▶), „You“ bei vollem Balken, Wartende 1-2-3, dann der Rest
   nach Restzeit. Der Angreifer leuchtet rot mit „Red Slime → you!“, Wartende tragen ihre Nummer. */
.cb-top {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cb-turns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 24px;
  max-width: 100%;
  overflow: hidden;
}

.cb-turns.is-empty { visibility: hidden; }

.cb-tchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  height: 24px;
  padding: 0 7px 0 3px;
  border-radius: 12px;
  background: #1a221c;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  font-size: 11px;
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;
}

/* Pfeil zwischen den Einträgen: die Leiste liest sich von links nach rechts */
.cb-tchip + .cb-tchip::before {
  content: '›';
  position: absolute;
  left: -9px;
  color: var(--muted);
  font-size: 12px;
  text-shadow: 0 1px 0 var(--ink);
}

.cb-tchip b {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 92px;
  font-weight: 700;
}

.cb-t-icon {
  width: 18px;
  height: 18px;
  flex: none;
  object-fit: contain;
  image-rendering: pixelated;
}

.cb-t-dot {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  flex: none;
  border-radius: 50%;
  background: #ff8a7a;
  border: 1px solid var(--ink);
}

.cb-t-dot.is-you { background: #9bd46a; }

.cb-t-badge {
  flex: none;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cb-t-badge.is-now { background: #ff6a5f; color: #fff; }

.cb-tchip.is-now {
  color: #fff;
  background: #5a1a12;
  border-color: #2a0c08;
  box-shadow: 0 0 0 2px #ff6a5f, 0 0 10px rgba(255, 106, 95, 0.7);
  animation: cb-pulse 0.6s ease-in-out infinite;
}

.cb-tchip.is-q { color: var(--gold); }
.cb-tchip.is-you { color: #10200c; background: #9bd46a; border-color: #2c4a1c; }
.cb-tchip.is-you-wait { color: #b4e68b; }
.cb-tchip.is-later { color: var(--muted); }
.cb-tchip.is-calm { opacity: 0.7; }

/* Angreifer: Karte rot, „Red Slime → you!“ über der Absicht */
.cb-enemy.is-acting {
  box-shadow: inset 0 0 0 2px #ff6a5f, 0 0 0 2px #ff6a5f, 0 0 16px rgba(255, 106, 95, 0.75);
}

.cb-now {
  margin: -2px 0 3px;
  padding: 1px 6px;
  border-radius: 5px;
  background: #5a1a12;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: cb-pulse 0.6s ease-in-out infinite;
}

.cb-qn {
  flex: none;
  min-width: 15px;
  height: 15px;
  margin-right: 2px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  display: inline-block;
  vertical-align: 1px;
}

#combat-ui.three-foes .cb-now { font-size: 10px; padding: 1px 3px; }

/* Handy: vier Einträge passen nur mit gekürzten Namen („Red Sl…“). Dann nennen nur der
   Angreifer und „You“ Namen, Wartende und Spätere zeigen Bild + Nummer — die Nummer
   steht auch an Karte und Figur. */
@media (max-width: 560px) {
  .cb-tchip.is-q b,
  .cb-tchip.is-later b { display: none; }
  .cb-tchip.is-q, .cb-tchip.is-later { padding-right: 3px; }
}

/* Ultimate-Leiste schneidet über den Rand ab (overflow): Abzeichen innen rechts */
.cb-ult.is-new::after { top: 50%; right: 8px; transform: translateY(-50%); }

/* ---------------------------------------------------------------- Schlanke Karten in den Ecken
   Christian/Thone (13.10.2026): die Gegnerkarte lag breit über dem Bild, die Ultimate-Leiste war groß.
   Jetzt wie der Spielerrahmen in der Welt: kleines Bild, Name + Lv, LP-Balken, darunter dünne Stun-/Turn-/Ult-
   Linien. Gegner oben links, die Gruppe (du zuerst) oben rechts; unten nur noch Hinweis, Ultimate, Knöpfe.
   Ab drei Gegnern (Rudel, Spiegelbilder) behalten die Gegner die ganze Breite in einer Reihe, die Gruppe darunter. */
.cb-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
#combat-ui.three-foes .cb-head { flex-wrap: wrap; }
#combat-ui.three-foes .cb-head .cb-enemies { flex-basis: 100%; }
#combat-ui.three-foes .cb-head .cb-party { margin-left: auto; }

.cb-head .cb-enemies {
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 5px;
  min-width: 0;
  max-width: 60%;
}
#combat-ui.three-foes .cb-head .cb-enemies { flex-direction: row; max-width: 100%; }
#combat-ui:not(.three-foes) .cb-enemies .cb-enemy,
#combat-ui:not(.three-foes) .cb-enemies .cb-enemy.is-boss { width: 214px; max-width: 100%; }
#combat-ui:not(.three-foes) .cb-enemies .cb-enemy.is-mini { width: 176px; }

.cb-head .cb-party {
  flex: 0 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 40%;
}
.cb-head .cb-player,
.cb-head .cb-player.is-me {
  flex: none;
  width: 150px;
  max-width: 100%;
}
.cb-head .cb-player:not(.is-me) { width: 128px; }

/* Karte: Bild links, rechts Name, LP, Linien */
.cb-head .cb-card { padding: 4px 6px 5px; border-radius: 8px; }
.cb-id {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cb-body { flex: 1; min-width: 0; }
.cb-face {
  flex: none;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #2a3a2c;
  object-fit: contain;
  image-rendering: pixelated;
}
.cb-player:not(.is-me) .cb-face { width: 24px; height: 24px; }
.cb-head .cb-row { font-size: 12px; gap: 5px; }
.cb-head .cb-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cb-head .cb-lv { flex: none; font-size: 10px; }
.cb-head .cb-hp { height: 11px; margin-top: 3px; }
.cb-head .cb-hp span { font-size: 9px; }
.cb-head .cb-meter { margin-top: 2px; gap: 3px; }
.cb-head .cb-meter > em { width: 20px; font-size: 7px; }
.cb-head .cb-stagger, .cb-head .cb-gauge, .cb-head .cb-energy { height: 4px; border-width: 1px; }
.cb-head .cb-intent {
  --u: 14px;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 6px 2px 3px;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-head .cb-now { font-size: 10px; margin: -1px 0 3px; }
.cb-head .cb-feast { height: 11px; }
.cb-head .cb-feast span { font-size: 8px; }

/* Ultimate: flache Leiste statt großem Balken */
.cb-ult { height: 26px; border-radius: 8px; font-size: 12px; }

/* Handy schmal (≤ 380 px): Gruppe etwas schmaler, damit Boss-Karten Platz haben */
@media (max-width: 380px) {
  #combat-ui:not(.three-foes) .cb-enemies .cb-enemy { width: 196px; }
  .cb-head .cb-player, .cb-head .cb-player.is-me { width: 136px; }
}
/* Drei schmale Karten in einer Reihe: ohne Bild, sonst bleibt vom Namen nur „Gr…“ */
#combat-ui.three-foes .cb-enemy .cb-face { display: none; }

/* Schwache Verbindung im Kampf (CombatScene.netHint): klein oben mittig, verdeckt nichts Wichtiges */
#combat-ui .cb-net {
  position: absolute; left: 50%; top: calc(4px + env(safe-area-inset-top)); transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px;
  background: rgba(60, 30, 20, 0.85); border: 1px solid #d9603b; color: #ffcbb8;
  font-size: 11px; white-space: nowrap; pointer-events: none; z-index: 5;
}
#combat-ui .cb-net[hidden] { display: none; }

/* /css/trade.css */
/* Handel zwischen Spielern (client/js/ui/TradeUI.js). Farben aus hud.css.
   Alles im gezoomten HUD (hud.css: zoom var(--ui)) — vh/dvh daher durch --ui.
   Tippflächen ≥ 40 px (Handy), Anklickbares als <button> (Pad-Fokus). */

.trade-box {
  position: fixed;
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4), 0 12px 40px rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  color: var(--cream);
  font-family: var(--font-pixel);
  padding: 12px;
}

.trade-box[hidden] {
  display: none !important;
}

.trade-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brass-dark);
}

.trade-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
  /* umbrechen statt „…“: in der Mengenwahl stand das Wichtigste hinten
     („… — how many? (max 99)“), am Handy war es weg (UI-Audit 29.09.) */
  overflow-wrap: anywhere;
}

.trade-head .menu-x { flex: none; }

/* Scrollt das Fenster selbst (Markt, Handel, Lager, Beutel am Handy), bleibt der
   Kopf mit × oben stehen — sonst war das × nach dem Scrollen ans Listenende
   weg (UI-Audit 29.09., wie beim Menü). top/margin = −padding der .trade-box. */
.trade-box > .trade-head {
  position: sticky;
  top: -12px;
  z-index: 3;
  margin: -12px -12px 10px;
  padding: 12px 12px 8px;
  background: var(--panel-solid);
  border-radius: 12px 12px 0 0;
}

.trade-box h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Knöpfe ───────────────────────────────────────── */
.trade-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 14px;
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-shadow: 0 1px 0 var(--ink);
}

.trade-btn.trade-go { background: #3f7a45; }
.trade-btn.trade-no { background: #7a3f3f; }
.trade-btn.trade-ready.is-on { background: #8c6a35; }

.trade-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: none;
}

.trade-btn:disabled {
  background: #3a3f3a;
  color: var(--muted);
  cursor: default;
}

.trade-btn[hidden] { display: none; }

/* ── Anfrage ──────────────────────────────────────── */
#trade-request {
  top: calc(var(--hud-bottom) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 16px));
  z-index: 3200;
  text-align: center;
}

.trade-req-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}

.trade-req-bar {
  height: 6px;
  background: #121912;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.trade-req-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transition: width 0.25s linear;
}

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

.trade-req-btns .trade-btn { flex: 1; }

/* ── Handelsfenster ───────────────────────────────── */
#trade-window {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 16px));
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 2900;
}

.trade-status {
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
}

.trade-status.is-locked {
  border-color: var(--brass);
  color: var(--gold);
}

.trade-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trade-side {
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px;
  min-width: 0;
}

.trade-side.is-them { border-color: #3b4a3d; }
#trade-window.is-locked .trade-side { border-color: var(--brass); }

.trade-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.trade-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  min-width: 0;
  padding: 4px 2px;
  background: #232e25;
  border: 2px solid var(--rar, var(--ink));
  border-radius: 8px;
  color: var(--cream);
  font-family: var(--font-pixel);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

button.trade-slot { cursor: pointer; }
button.trade-slot:disabled { cursor: default; opacity: 0.75; }

.trade-slot.is-empty {
  border-style: dashed;
  border-color: #2e3a30;
  background: transparent;
  box-shadow: none;
}

.trade-slot-qty {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  color: var(--gold);
  text-shadow: 0 1px 0 var(--ink), 0 0 2px var(--ink);
}

.trade-slot-name {
  font-size: 10px;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-gold {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 9px;
  text-align: center;
  cursor: pointer;
}

/* Betrag = GoldUI.cost (Münze + Zahl, client/css/gold.css) */
.trade-gold.is-static { cursor: default; display: flex; align-items: center; justify-content: center; }
.trade-gold:disabled { cursor: default; opacity: 0.8; }

.trade-actions {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.trade-actions .trade-btn { flex: 1; }

.trade-bag-head { margin-top: 4px !important; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trade-bag-head .trade-bag-text { min-width: 0; }
/* Pille behält Groß-/Kleinschrift der Zahl, nicht die der Überschrift */
.trade-bag-head .gold-bal { text-transform: none; letter-spacing: 0; }

.trade-bag {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px;
}

.trade-bag .trade-slot { min-height: 64px; }

.trade-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  padding: 8px;
  text-align: center;
}

/* ── Mengenwahl ───────────────────────────────────── */
#trade-qty {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 16px));
  z-index: 3000;
}

.trade-qty-item {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.trade-qty-item:empty { display: none; }

.trade-qty-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.trade-qty-row {
  display: flex;
  gap: 6px;
}

.trade-step { padding: 8px 10px; }

.trade-qty-input {
  width: 86px;
  min-height: 44px;
  font-family: var(--font-pixel);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 9px;
}

/* ── Spieler-Menü (nur das alte Handels-Popup ohne PartyUI: .trade-box) ──
   Feedback #41 (Heron): ohne .trade-box galt max-width auch für PartyUIs Ebene #player-popup — sie war 16 px schmaler
   als der Schirm, das Blatt endete rechts zu früh. */
#player-popup.trade-box {
  z-index: 3100;
  min-width: 180px;
  max-width: calc(100% - 16px);
}

#player-popup.trade-box.is-centered {
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
}

#player-popup.trade-box .trade-btn { width: 100%; }

/* Handy hochkant: Angebote untereinander */
@media (max-width: 420px) {
  .trade-sides { grid-template-columns: 1fr; }
}

/* ── Duell-Einladung (DuelUI): wie die Handelsanfrage ── */
#duel-request {
  top: calc(var(--hud-bottom) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 16px));
  z-index: 3200;
  text-align: center;
}
.duel-req-sub {
  font-size: 13px;
  color: var(--muted);
  margin: -4px 0 8px;
}

/* /css/wiki.css */
/* Wiki / Codex (client/js/ui/WikiUI.js, docs/WIKI.md). Fenster wie die
   übrigen (journal-sheet), Liste links, Eintrag rechts; schmal (Handy,
   großer UI-Maßstab) untereinander. Maße in px — body > * wird per --ui
   gezoomt, darum vh immer durch var(--ui). */

#wiki-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#wiki-window[hidden] { display: none; }
body.in-combat #wiki-window { display: none !important; }

.wiki-sheet {
  width: min(780px, 100%);
  height: min(640px, calc(100vh / var(--ui) - 32px));
  height: min(640px, calc(100dvh / var(--ui) - 32px));
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* Liste und Eintrag scrollen einzeln */
  container-type: inline-size;
}

.wiki-sheet .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
}

.wiki-progress {
  font-size: 13px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.wiki-tabs { flex: 0 0 auto; }

.wiki-search-row { flex: 0 0 auto; margin: 0 0 8px; }

#wiki-search {
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  padding: 6px 10px;
  font: 14px var(--font-pixel);
  color: var(--cream);
  background: #10160f;
  border: 2px solid var(--ink);
  border-radius: 8px;
  outline: none;
}

#wiki-search:focus,
#wiki-search.pad-focus { border-color: var(--brass); }

.wiki-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(200px, 38%) 1fr;
  gap: 10px;
}

.wiki-list,
.wiki-detail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wiki-list {
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiki-group {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 8px 2px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wiki-group:first-child { margin-top: 0; }
.wiki-group em { font-style: normal; color: var(--muted); font-size: 11px; }

.wiki-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 3px 8px 3px 4px;
  text-align: left;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}

.wiki-entry:hover { background: #2b382d; }
.wiki-entry.is-selected { border-color: var(--brass); background: #33412f; }
.wiki-entry.is-unknown,
.wiki-entry.is-locked { color: var(--muted); }

.wiki-pic {
  flex: 0 0 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.wiki-entry-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.wiki-entry-text b {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-entry-text small { font-size: 11px; color: var(--muted); }
.wiki-mark { color: var(--xp); font-weight: 700; }

.wiki-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

.item-icon.is-silhouette,
.wiki-place-pic.is-silhouette { filter: brightness(0); opacity: 0.85; }

.wiki-place-pic { font-size: 22px; line-height: 1; }
.wiki-nopic { font-size: 20px; color: var(--muted); }
.wiki-empty { color: var(--muted); font-size: 14px; padding: 12px 4px; }

/* Eintrag */
.wiki-card { font-size: 14px; }

.wiki-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.wiki-big-pic {
  flex: 0 0 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 60%, rgba(217, 184, 110, 0.18), rgba(0, 0, 0, 0.25) 70%);
  border: 2px solid var(--ink);
  border-radius: 10px;
}

.wiki-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wiki-card-title b { font-size: 20px; color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.wiki-card-title small { font-size: 12px; color: var(--muted); }

.wiki-state {
  align-self: flex-start;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--cream);
}

.is-defeated .wiki-state,
.is-crafted .wiki-state { background: #3d5a2a; }
.is-seen .wiki-state,
.is-known .wiki-state { background: #4a4226; }

.wiki-card-body p { margin: 6px 0; line-height: 1.35; }
.wiki-hint { color: var(--cream); font-style: italic; }
.wiki-trait { border-left: 3px solid var(--gold, #f2c75c); padding-left: 8px; }
.wiki-trait b { color: var(--gold, #f2c75c); }
.wiki-muted { color: var(--muted); font-size: 12px; }
/* Rückkehr-Zeichen (besiegter Weltboss): still grau, regt sich warm, bebt orange */
.wiki-boss-sign { margin: 0 0 6px; font-weight: 600; color: #c9c1b6; }
.wiki-boss-sign.is-stirring { color: #f2dca0; }
.wiki-boss-sign.is-rising { color: #ffb36b; }

.wiki-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(140, 106, 53, 0.35);
  font-size: 13px;
}

.wiki-row span { color: var(--muted); }
.wiki-row b { text-align: right; font-weight: 600; }

.wiki-sub {
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}

.wiki-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }

.wiki-stats span {
  min-width: 56px;
  padding: 3px 8px;
  background: #10160f;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-weight: 700;
}

.wiki-stats em { font-style: normal; font-size: 10px; color: var(--muted); margin-right: 4px; }

.wiki-loot,
.wiki-sources { list-style: none; margin: 0; padding: 0; }

.wiki-loot li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 13px;
}

.wiki-loot em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; }
.wiki-sources li { font-size: 13px; padding: 2px 0; }
.wiki-sources li::before { content: '• '; color: var(--brass); }

/* „‹ Back“ nur in der schmalen Ansicht */
.wiki-back { display: none; }

/* Schmal (Handy, UI 200 % auf kleinem Schirm), 24.10.2026: Liste über die ganze Höhe, ein angetippter Eintrag wird
   zur eigenen Seite mit „‹ Back“ (B/Esc). Vorher klebte der Eintrag unten (bis 48 % hoch) und die Liste war ein
   schmaler Streifen — man sah weder genug Liste noch den ganzen Eintrag (Daniel am Handy). */
@container (max-width: 560px) {
  .wiki-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
  .wiki-sheet:not(.is-reading) .wiki-detail { display: none; }
  .wiki-sheet.is-reading .wiki-list,
  .wiki-sheet.is-reading .wiki-search-row { display: none; }
  .wiki-sheet.is-reading .wiki-detail { display: block; }
  .wiki-back {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin: 0 0 8px;
    padding: 4px 14px 4px 10px;
    font: 15px var(--font-pixel);
    color: var(--cream);
    background: #232e25;
    border: 2px solid var(--ink);
    border-radius: 8px;
    cursor: pointer;
  }
  .wiki-back:hover, .wiki-back.pad-focus { border-color: var(--brass); }
  .wiki-big-pic { flex-basis: 76px; height: 76px; }
  .wiki-card-title b { font-size: 17px; }
}

body.touch-device .wiki-entry { min-height: 48px; }
body.touch-device #wiki-window { padding: 8px; }
body.touch-device .wiki-sheet { height: calc(100dvh / var(--ui) - 16px); max-height: calc(100dvh / var(--ui) - 16px); padding: 10px; }
body.touch-device #wiki-search { min-height: 40px; font-size: 16px; }   /* 16 px: kein Zoom beim Tippen (iOS) */

/* Reiter „Tips“ (shared/Tips.ts): Liste über die ganze Breite, Tipptext gleich im Eintrag, mehrzeilig */
.wiki-body.is-tips { grid-template-columns: 1fr; }
.wiki-body.is-tips .wiki-detail { display: none; }
.wiki-body.is-tips .wiki-entry { flex-shrink: 0; align-items: flex-start; padding-top: 6px; padding-bottom: 6px; cursor: default; }
.wiki-body.is-tips .wiki-entry.is-selected { border-color: var(--ink); background: #232e25; }
.wiki-body.is-tips .wiki-entry.pad-focus { border-color: var(--brass); }
.wiki-body.is-tips .wiki-entry-text b { white-space: normal; color: var(--gold); }
.wiki-tip-text { font-size: 13px !important; color: var(--cream) !important; line-height: 1.3; margin-top: 2px; }
.wiki-tip-pic { font-size: 18px; color: var(--gold); }
.wiki-body.is-tips .wiki-pic { flex-basis: 28px; height: 28px; }
.wiki-tip-more { margin: 0 4px 6px 40px; font-size: 12px; font-style: italic; color: var(--muted); }

/* Reiter „Guide“ (shared/Guide.ts): Seiten mit Einleitung, Abschnitten und Tipps */
.wiki-guide-pic { display: flex; align-items: center; justify-content: center; }
.wiki-guide-pic .ui-icon { transform: scale(1.5); }
.wiki-guide-pic.is-big .ui-icon { transform: scale(3); }
.wiki-guide-pic.is-silhouette { filter: brightness(0); opacity: 0.6; }
.wiki-guide-intro {
  font-size: 12px !important; color: var(--cream) !important; opacity: 0.8; line-height: 1.25; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wiki-body.is-guide .wiki-entry { flex-shrink: 0; padding-top: 5px; padding-bottom: 5px; }
.wiki-body.is-guide .wiki-entry-text b { color: var(--gold); }
.wiki-body.is-guide .wiki-entry.is-locked .wiki-entry-text b { color: var(--muted); }
.wiki-body.is-guide .wiki-state { display: none; }
.wiki-guide-lead { font-size: 15px; color: var(--cream); }
.wiki-guide-tips {
  margin-top: 12px; padding: 6px 10px 8px; border: 2px solid var(--ink); border-radius: 8px;
  background: linear-gradient(180deg, rgba(217, 184, 110, 0.14), rgba(0, 0, 0, 0.18));
}
.wiki-guide-tips .wiki-sub { margin-top: 2px; }
.wiki-guide-tips ul { list-style: none; margin: 0; padding: 0; }
.wiki-guide-tips li { font-size: 13px; padding: 3px 0 3px 18px; position: relative; line-height: 1.3; }
.wiki-guide-tips li::before { content: '✦'; position: absolute; left: 2px; color: var(--gold); }

/* /css/ranks.css */
/* Ranglisten (client/js/ui/RanksUI.js, docs/RANKS.md). Fenster wie das Wiki
   (journal-sheet), Liste scrollt allein, eigene Zeile darunter angeheftet.
   Maße in px — body > * wird per --ui gezoomt, darum vh immer durch var(--ui). */

#ranks-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#ranks-window[hidden] { display: none; }
body.in-combat #ranks-window { display: none !important; }

.ranks-sheet {
  width: min(560px, 100%);
  height: min(680px, calc(100vh / var(--ui) - 32px));
  height: min(680px, calc(100dvh / var(--ui) - 32px));   /* Handy: sichtbare Höhe mit Adressleiste */
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* nur die Liste scrollt */
}

.ranks-sheet .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.ranks-sheet .journal-title { flex: 1 1 auto; min-width: 0; }

.ranks-period {
  display: inline-flex;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}

.ranks-pill,
.ranks-chip {
  font: 600 13px var(--font-pixel);
  color: var(--cream);
  background: #232e25;
  border: 0;
  min-height: 34px;
  padding: 0 10px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.ranks-period .ranks-pill + .ranks-pill { border-left: 2px solid var(--ink); }
.ranks-pill.is-on { background: var(--brass); color: var(--ink); }

.ranks-tabs { flex: 0 0 auto; }

.ranks-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 6px;
  scrollbar-width: thin;
}

.ranks-chips[hidden] { display: none; }
.ranks-period[hidden] { display: none; }

.ranks-chip {
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #1b241d;
}

.ranks-chip.is-on {
  background: #3b4a33;
  color: var(--gold);
  box-shadow: inset 0 0 0 2px var(--brass);
}

.ranks-board-head {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 2px 6px;
}

.ranks-board-title { color: var(--gold); font-size: 16px; }
.ranks-board-count { color: var(--muted); font-size: 12px; white-space: nowrap; }

.ranks-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 2px;
}

.ranks-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 3px 10px 3px 6px;
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 8px;
  flex: 0 0 auto;
}

.ranks-rank { font-weight: 700; color: var(--muted); text-align: center; }
.ranks-row.r1 .ranks-rank { color: var(--gold); }
.ranks-row.r2 .ranks-rank { color: #d6dde6; }
.ranks-row.r3 .ranks-rank { color: #d49a5c; }

.ranks-who { min-width: 0; display: flex; flex-direction: column; }
.ranks-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ranks-who small,
.ranks-val small { color: var(--muted); font-size: 12px; font-weight: 400; }

.ranks-val {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ranks-row.is-me {
  background: #3b4a33;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.ranks-party { font-style: normal; color: #c9a0ff; margin-right: 4px; }
.ranks-row.is-party:not(.is-me) { box-shadow: inset 3px 0 0 #c9a0ff; }

.ranks-me {
  flex: 0 0 auto;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 2px dashed var(--brass-dark);
}

.ranks-me[hidden] { display: none; }

.ranks-empty { color: var(--muted); font-size: 14px; padding: 12px 4px; }

.ranks-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ranks-note { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.3; }
.ranks-foot .ranks-hide { border: 2px solid var(--ink); border-radius: 999px; flex: 0 0 auto; }

/* Handy: Tippflächen ≥ 40 px, Kopf darf umbrechen */
body.touch-device .ranks-pill,
body.touch-device .ranks-chip { min-height: 40px; font-size: 14px; }
body.touch-device .ranks-sheet { height: calc(100dvh / var(--ui) - 20px); max-height: calc(100dvh / var(--ui) - 20px); }
body.touch-device #ranks-window { padding: 10px; }

@media (max-width: 420px) {
  .ranks-sheet .journal-head { flex-wrap: wrap; row-gap: 6px; }
  .ranks-period { order: 3; width: 100%; }
  .ranks-period .ranks-pill { flex: 1 1 50%; }
  .ranks-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-right: 8px; }
}

/* /css/board.css */
/* Dorf-Aushang (client/js/ui/BoardUI.js, docs/NEWS.md): Reiter „What's new“ (Blog-Karten,
   Titelgeschichte oben), „Rankings“ (RanksUI-Blatt eingehängt), „Homes“ (HomesUI), „Polls“ und
   „Mail“ (MailUI, nur wenn vorhanden). Fenster wie Ranks/Wiki (journal-sheet), nur der Inhalt
   scrollt. Maße in px — body > * wird per --ui gezoomt, darum vh/dvh immer durch var(--ui). */

#board-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.6);
  padding: 16px;
}

#board-window[hidden] { display: none; }
body.in-combat #board-window { display: none !important; }

.board-sheet {
  width: min(660px, 100%);
  height: min(760px, calc(100vh / var(--ui) - 32px));
  height: min(760px, calc(100dvh / var(--ui) - 32px));   /* Handy: sichtbare Höhe mit Adressleiste */
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* nur der Reiter-Inhalt scrollt */
  padding: 0;
  /* Holzrahmen oben, darunter das dunkle Blatt */
  background: linear-gradient(180deg, #2a2116 0, #221b12 64px, var(--panel-solid) 64px);
}

/* Kopf: Holzleiste mit Siegel, Unterzeile und × */
.board-sheet > .board-head {
  position: static;
  margin: 0;
  padding: 10px 12px 10px 14px;
  gap: 10px;
  box-shadow: none;
  flex: 0 0 auto;
  border-bottom: 2px solid var(--ink);
  background:
    repeating-linear-gradient(180deg, rgba(255, 220, 160, 0.035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #5a4127, #4a3420);
  box-shadow: inset 0 -2px 0 var(--brass-dark), inset 0 2px 0 rgba(255, 230, 180, 0.12);
  border-radius: 11px 11px 0 0;
}

.board-crest {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
  background: radial-gradient(circle at 40% 35%, #e9cf8b, #b8913f 70%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.board-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.board-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d7bf8f;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-sheet .journal-title { flex: none; min-width: 0; font-size: 24px; line-height: 1.05; }

/* Reiter: eine Leiste, alle gleich breit, Symbol + Name; Zahl als roter Punkt */
.board-tabs.cat-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  margin: 0;
  padding: 8px 10px;
  background: #121912;
  border-bottom: 2px solid var(--ink);
  box-shadow: inset 0 -1px 0 #2c3a2a;
}

.board-tabs .cat-tab {
  position: relative;
  flex: 1 1 auto;              /* lange Namen („What's new“) bekommen mehr Platz */
  min-width: 0;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 6px;
  font-size: 15px;
  border-radius: 8px;
  background: #1f2a1f;
  border: 2px solid var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
  color: #c4ceb5;
  white-space: nowrap;
}

.board-tabs .cat-tab:hover:not(.active) { background: #29372a; color: var(--cream); }

.board-tabs .cat-tab.active {
  color: var(--ink);
  background: linear-gradient(180deg, #ecd28f, var(--brass));
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--brass-dark), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.board-tab-ico { font-style: normal; font-size: 16px; line-height: 1; }
/* CategoryTabs legt die Beschriftung in ein <span>: Symbol und Name darin nebeneinander */
.board-tabs .cat-tab > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.board-tab-long, .board-tab-short { overflow: hidden; text-overflow: ellipsis; }
.board-tab-short { display: none; }

.board-tabs .cat-tab em:empty { display: none; }
.board-tabs .cat-tab em {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font: 700 12px/16px var(--font-pixel);
  color: #fff;
  background: #c4432f;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-align: center;
  z-index: 1;
}

/* LB/RB am Pad: Schilder klein an den Enden der Leiste */
body.pad-active .board-tabs.cat-tabs::before,
body.pad-active .board-tabs.cat-tabs::after { flex: none; }

#board-window .board-panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 12px 14px;
}

.board-panel[hidden] { display: none; }

/* ── What's new: Blog-Karten, neueste oben, Titelgeschichte groß ── */
.board-news,
.board-polls,
.board-mail,
.board-homes {
  scrollbar-width: thin;
  scrollbar-color: var(--brass-dark) transparent;
}

.board-news {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.board-entry {
  flex: 0 0 auto;
  background: #252e22;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: inset 0 0 0 2px #384432, 0 3px 0 rgba(0, 0, 0, 0.3);
}

.board-entry.is-new {
  background: #2f3a29;
  box-shadow: inset 0 0 0 2px var(--brass), 0 3px 0 rgba(0, 0, 0, 0.3);
}

/* Umfragen nutzen weiter Kopf + Titel als Zeile */
.board-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.board-entry-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--gold);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.board-entry-head time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.board-new {
  flex: 0 0 auto;
  align-self: center;
  font: 700 11px/16px var(--font-pixel);
  color: #fff;
  background: #c4432f;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0 7px;
  letter-spacing: 0.06em;
}

.board-entry p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cream);
  overflow-wrap: anywhere;
}

/* Beitrag: Bild links (breit) bzw. oben (Handy), Text daneben */
.board-post {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
}

.board-post-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.board-post-fig {
  position: relative;
  flex: 0 0 34%;
  max-width: 200px;
  margin: 0;
}

.board-post-fig img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  image-rendering: pixelated;
  background: #1a2118;
  border: 2px solid var(--ink);
  border-radius: 8px;
}

.board-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

.board-post-meta time {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.board-tag {
  font: 700 11px/16px var(--font-pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 7px;
  border: 1px solid var(--ink);
  border-radius: 5px;
  color: #fff8e6;
  background: #4f5a46;
  white-space: nowrap;
}

.board-tag.is-update { background: #3d6787; }
.board-tag.is-feature { background: #4c7f36; }
.board-tag.is-community { background: #85508f; }
.board-tag.is-event { background: #b5612a; }
.board-tag.is-wanted { background: #8e2a22; }
.board-tag.is-cover { background: var(--brass); color: var(--ink); }

.board-post .board-post-lead { margin: 0; }
.board-post-body { display: none; flex-direction: column; gap: 6px; margin-top: 4px; }
.board-post.is-open .board-post-body { display: flex; }
.board-post-body p { margin: 0; color: #e4dcc3; }

.board-more {
  align-self: flex-start;
  min-height: 40px;
  margin-top: 2px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #33402c;
  box-shadow: inset 0 0 0 2px #4d5d3d;
  color: var(--gold);
  font: 600 14px/1.2 var(--font-pixel);
  cursor: pointer;
}

.board-more:hover { background: #3e4d34; }
.board-more::after { content: ' ▾'; }
.board-post.is-open .board-more::after { content: ' ▴'; }

/* Titelgeschichte: Bild über die volle Breite, großer Titel, ganzer Text */
.board-post.is-cover {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #2b2a1d;
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 4px 0 rgba(0, 0, 0, 0.35);
}

.board-post.is-cover.is-new { box-shadow: inset 0 0 0 2px var(--brass), 0 4px 0 rgba(0, 0, 0, 0.35); }

.board-post.is-cover .board-post-fig { flex: none; max-width: none; }

.board-post.is-cover .board-post-fig img {
  aspect-ratio: 16 / 9;
  max-height: 300px;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
}

.board-ribbon {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 2px 9px;
  font: 700 12px/18px var(--font-pixel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, #f1d894, var(--brass));
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
/* Pixel-Szene (NewsScenes): oben mittig steht die Schlagzeile („VYRMATHRA HAS FALLEN“) — am Handy lag das Band links
   oben darüber (Daniel 24.10.2026). Dort unten rechts auf den Boden. */
.board-scene .board-ribbon { top: auto; left: auto; right: 8px; bottom: 8px; }

.board-post.is-cover .board-post-text { padding: 12px 14px 14px; gap: 6px; }
.board-post.is-cover .board-entry-title { font-size: 23px; }
.board-post.is-cover .board-post-lead { font-size: 15px; color: var(--cream); }
.board-post.is-cover .board-post-body { display: flex; }

.board-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 2px -2px;
  color: var(--brass);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.board-divider::before,
.board-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brass-dark), transparent);
}

.board-empty { color: var(--muted); font-size: 14px; padding: 12px 4px; }

/* Post (MailUI) und Häuser: Platz wie die anderen Reiter, nur der Inhalt scrollt */
.board-mail {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Rankings: das RanksUI-Blatt ohne eigenen Rahmen, Titel und × (die hat der Aushang) */
.board-ranks {
  display: flex;
  flex-direction: column;
}

.ranks-sheet.is-embedded {
  width: 100%;
  height: auto;
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.ranks-sheet.is-embedded .journal-title,
.ranks-sheet.is-embedded #ranks-close { display: none; }

.ranks-sheet.is-embedded .journal-head {
  justify-content: flex-end;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 6px;
}

/* LB/RB wechseln die Aushang-Reiter — das Pad-Schild nur an dieser Leiste */
body.pad-active .ranks-sheet.is-embedded .cat-tabs::before,
body.pad-active .ranks-sheet.is-embedded .cat-tabs::after { display: none; }

/* Handy: Tippflächen ≥ 40 px, fast volle Höhe */
body.touch-device .board-sheet { height: calc(100dvh / var(--ui) - 20px); max-height: calc(100dvh / var(--ui) - 20px); }
body.touch-device #board-window { padding: 10px; }

/* Schmal (Handy hochkant, kleines Fenster): Reiter als Symbol über kurzem Namen, Bilder oben */
@media (max-width: 600px) {
  .board-tabs.cat-tabs { padding: 6px 6px; gap: 4px; }
  .board-tabs .cat-tab { flex: 1 1 0; padding: 4px 2px; min-height: 50px; font-size: 12px; }
  .board-tabs .cat-tab > span { flex-direction: column; gap: 3px; }
  .board-tab-long { display: none; }
  .board-tab-short { display: inline; }
  .board-tab-ico { font-size: 17px; }
  .board-post { flex-direction: column; align-items: stretch; gap: 8px; }
  .board-post-fig { flex: none; max-width: none; }
  .board-post-fig img { aspect-ratio: 16 / 9; }
  .board-post.is-cover .board-entry-title { font-size: 20px; }
}

@media (max-width: 420px) {
  #board-window { padding: 8px; }
  .board-sheet > .board-head { padding: 8px 10px; }
  .board-crest { width: 34px; height: 34px; font-size: 18px; }
  .board-sheet .journal-title { font-size: 21px; }
  .board-panel { padding: 10px 8px 12px; }
  .board-more { align-self: stretch; }
  .ranks-sheet.is-embedded .journal-head { flex-wrap: wrap; }
}

/* Umfragen (Reiter „Polls“, BoardUI.renderPolls): Antworten als große Knöpfe (≥ 40 px), nach der Stimme Balken
   mit Prozent; die eigene Antwort golden. Danach optional ein eigener Vorschlag. */
.board-polls {
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

/* Umfrage: „NEW · Open until …“ als kleine Zeile über der Frage (Daniel 20.10.: NEW saß gequetscht zwischen Frage
   und Datum und schwebte bei zweizeiligen Fragen in der Mitte) — die Frage bekommt die ganze Breite */
.board-poll-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; min-height: 18px; }
.board-poll-meta time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.board-poll-q { display: block; }

.board-poll-opts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.board-poll-opt,
.board-poll-send {
  min-height: 42px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #3a4630;
  box-shadow: inset 0 0 0 2px #56653f;
  color: var(--cream);
  font: 600 14px/1.2 var(--font-pixel);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.board-poll-opt:hover:not(:disabled) { background: #46553a; }
/* Antworten mit Bild (Logos der Namens-Umfrage): Logo 160×64 doppelt groß, Name darunter; schmal einfach groß */
.board-poll-opts.has-images .board-poll-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; text-align: center; }
.board-poll-logo { width: 320px; max-width: 100%; height: auto; aspect-ratio: 160 / 64; image-rendering: pixelated; }
.board-poll-thumb { position: relative; flex: none; width: 80px; height: 32px; }   /* halb so groß: weich verkleinert statt Pixel zu verschlucken */
.board-poll-opt:disabled { opacity: 0.55; cursor: default; }

.board-poll-results { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.board-poll-results li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #1f261b;
  overflow: hidden;
  font-size: 14px;
}

.board-poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: #4a5a39;
}

.board-poll-results li.is-mine { box-shadow: inset 0 0 0 2px var(--brass); }
.board-poll-results li.is-mine .board-poll-bar { background: #7a6430; }

.board-poll-label { position: relative; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--cream); }
.board-poll-pct { position: relative; flex: none; color: var(--gold); font-size: 13px; white-space: nowrap; }

.board-poll-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.board-poll-note.is-locked { color: var(--gold); }

.board-poll-idea { display: flex; gap: 6px; margin-top: 8px; }

.board-poll-idea input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #151b13;
  color: var(--cream);
  font: 14px var(--font-pixel);
}

.board-poll-send { flex: none; text-align: center; background: #6a5426; box-shadow: inset 0 0 0 2px #8c6a35; }

/* ── Zahlen im Beitrag (news.json stats/chart, 15.10.2026) ───────────── */
.board-numbers { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.board-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.board-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: 8px 6px;
  text-align: center;
  background: linear-gradient(180deg, rgba(236, 210, 143, 0.12), rgba(0, 0, 0, 0.18));
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, 0.15), 0 2px 0 rgba(0, 0, 0, 0.3);
}
.board-stat-icon { font-size: 20px; line-height: 1; }
.board-stat-num {
  font: 700 24px/1.1 var(--font-pixel);
  color: #ffd25a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.board-stat-num small { font-size: 14px; margin-left: 2px; color: #f0d79a; }
.board-stat-label { font-size: 12px; line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; }

.board-chart {
  margin: 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.board-chart figcaption {
  font: 700 12px/1.2 var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0d79a;
  margin-bottom: 8px;
}
.board-chart ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board-chart li {
  display: grid;
  grid-template-columns: minmax(84px, 30%) 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream);
}
.board-chart-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-chart-bar { height: 14px; background: rgba(255, 255, 255, 0.07); border-radius: 7px; overflow: hidden; }
.board-chart-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 7px;
  background: linear-gradient(90deg, #c98a2e, #ffd25a);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  transform-origin: left center;
}
.board-chart li:first-child .board-chart-bar i { background: linear-gradient(90deg, #d26a2e, #ffb347); }
.board-chart b {
  font: 700 14px/1 var(--font-pixel);
  color: #ffd25a;
  min-width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Abspielen (BoardUI.playNumbers, einmal je Öffnen) */
.board-numbers.is-play .board-stat { animation: board-stat-pop 0.5s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.board-numbers.is-play .board-chart-bar i { animation: board-bar-grow 1.1s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i) * 110ms + 450ms); }
.board-numbers.is-play .board-chart li { animation: board-row-in 0.4s ease-out both; animation-delay: calc(var(--i) * 110ms + 380ms); }
@keyframes board-stat-pop { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes board-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes board-row-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .board-numbers.is-play .board-stat, .board-numbers.is-play .board-chart-bar i, .board-numbers.is-play .board-chart li { animation: none; }
}

/* Handy: zwei Kacheln je Reihe */
@media (max-width: 640px) {
  .board-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board-stat { min-height: 72px; }
  .board-stat-num { font-size: 21px; }
}

/* Pixel-Szene statt Bild (client/js/ui/NewsScenes.js): 2:1, pixelgenau skaliert, Rahmen wie die Bilder */
.board-scene-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0a0818;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.board-post.is-cover .board-scene-canvas { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; }

/* Steckbrief (news.json `poster`, BoardUI.posterHtml, 27.10.2026): Pergament, leicht schief an die Holzwand genagelt.
   Das Bild im Inneren ist ein 64×64-Canvas (NewsScenes 'wanted'), ganzzahlig hochskaliert. */
.board-wanted-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 10px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #5a3a22, #4a2f1c);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.board-post.is-cover .board-wanted-wrap { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: 18px 12px 20px; }
.board-wanted {
  position: relative;
  width: 100%;
  max-width: 236px;
  padding: 12px 12px 10px;
  text-align: center;
  color: #3a2414;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 248, 225, 0.5), transparent 70%),
    linear-gradient(180deg, #ecd9a8, #dcc28a);
  box-shadow: inset 0 0 0 2px #b8955a, inset 0 0 18px rgba(120, 70, 20, 0.45), 0 4px 0 rgba(0, 0, 0, 0.45);
  clip-path: polygon(0 2%, 6% 0, 30% 1%, 55% 0, 80% 1.5%, 100% 0, 99% 30%, 100% 62%, 98.5% 100%, 70% 99%, 42% 100%, 14% 98.5%, 0 100%, 1% 64%);
  transform: rotate(-1.5deg);
}
.board-wanted-nail {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: #6b6e74;
  box-shadow: inset -2px -2px 0 #3c3e44, inset 1px 1px 0 #a9adb5;
}
.board-wanted-head {
  margin-top: 6px;
  font: 700 34px/1 var(--font-pixel);
  letter-spacing: 0.12em;
  color: #7a1c14;
  text-shadow: 2px 2px 0 rgba(58, 36, 20, 0.25);
}
.board-wanted-by {
  margin-top: 3px;
  font: 600 11px/1.2 var(--font-pixel);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a4a2a;
}
.board-wanted-portrait {
  width: 128px;
  height: 128px;
  margin: 8px auto 6px;
  border: 3px solid #3a2414;
  box-shadow: 0 0 0 2px #b8955a;
  background: #0b0d24;
}
.board-wanted-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.board-wanted-name {
  font: 700 24px/1.1 var(--font-pixel);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2a180c;
  overflow-wrap: anywhere;
}
.board-wanted-deed {
  margin-top: 4px;
  font: 600 13px/1.3 var(--font-pixel);
  color: #4a2e18;
}
.board-wanted-reward {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 2px dashed rgba(90, 58, 34, 0.45);
  font-family: var(--font-pixel);
}
.board-wanted-reward small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a4a2a; }
.board-wanted-reward b { font-size: 22px; color: #7a1c14; }
.board-wanted-coin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff2b0, #f2c75c 45%, #b8862a);
  box-shadow: inset 0 0 0 2px #8a6420;
}
@media (prefers-reduced-motion: reduce) { .board-wanted { transform: none; } }
/* Als kleiner Beitrag (nicht Titelgeschichte): Bild links ist schmal — nur Kopf, Bild, Name, Summe */
.board-post:not(.is-cover) .board-wanted-wrap { padding: 8px 6px; }
.board-post:not(.is-cover) .board-wanted { padding: 8px 6px 6px; }
.board-post:not(.is-cover) .board-wanted-head { font-size: 18px; }
.board-post:not(.is-cover) .board-wanted-portrait { width: 64px; height: 64px; margin: 4px auto; }
.board-post:not(.is-cover) .board-wanted-name { font-size: 14px; }
.board-post:not(.is-cover) .board-wanted-by,
.board-post:not(.is-cover) .board-wanted-deed,
.board-post:not(.is-cover) .board-wanted-reward small { display: none; }
.board-post:not(.is-cover) .board-wanted-reward b { font-size: 14px; }

/* /css/carriage.css */
/* Kutsche (client/js/ui/CarriageUI.js, shared/Carriage.ts): Fenster wie der Aushang (journal-sheet), nur die Liste
   scrollt. Maße in px — body > * wird per --ui gezoomt, darum vh/dvh immer durch var(--ui). */

#carriage-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#carriage-window[hidden] { display: none; }
body.in-combat #carriage-window { display: none !important; }

.carriage-sheet {
  width: min(460px, 100%);
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.carriage-sheet > .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.carriage-sheet .journal-title { flex: 1 1 auto; min-width: 0; }

.carriage-intro {
  flex: 0 0 auto;
  font-size: 13px;
  color: #c9bfa4;
  margin-bottom: 8px;
}

.carriage-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carriage-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "pic info go";
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 6px 8px;
  border: 1px solid #4a3d29;
  border-radius: 6px;
  background: rgba(30, 24, 16, 0.6);
}

.carriage-row.is-locked { opacity: 0.75; }
.carriage-row.is-locked .carriage-name { color: #b8ad92; }

/* Gebiets-Vignette (assets/own/ui/regions.png, 48×32 Bild-px in 2×, Rahmen ist eingebacken) und Kompass (17 px in 2×) —
   Ausschnitte per background-position aus CarriageArt, nie gedreht oder krumm skaliert */
.carriage-pic {
  grid-area: pic;
  display: block;
  width: 96px;
  height: 64px;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.carriage-pic.is-empty { background: rgba(0, 0, 0, 0.25); border-radius: 4px; }

.carriage-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.carriage-dir {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #e8d9a8;
  white-space: nowrap;
}
.carriage-compass {
  flex: 0 0 auto;
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.carriage-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: #f2e6c8;
  overflow-wrap: anywhere;
}

.carriage-name small {
  display: block;
  font-size: 12px;
  color: #a99d82;
}

.carriage-go {
  grid-area: go;
  min-height: 40px;
  min-width: 96px;
  padding: 4px 10px;
  font: inherit;
  font-size: 14px;
  color: #221a12;
  background: #e2b64f;
  border: 2px solid #7a5a1c;
  border-radius: 6px;
  cursor: pointer;
}

.carriage-go:disabled { background: #6e6450; color: #2c271e; cursor: default; }
.carriage-fare { font-weight: 700; margin-right: 4px; }
.carriage-lock { grid-area: go; font-size: 18px; min-width: 40px; text-align: center; }

/* schmale Handys (Daniel 25.10.2026: „Ride-Button an die Seite, da ist so viel Platz — weniger Scrollen“): Knopf
   rechts neben dem Text, schmal, Preis über „Ride“ — eine Zeile ist so hoch wie das Bild */
@media (max-width: 479px) {
  .carriage-row { column-gap: 8px; padding: 6px; }
  .carriage-go { min-width: 58px; min-height: 52px; padding: 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
  .carriage-fare { margin-right: 0; }
  .carriage-name { font-size: 14px; }
  .carriage-name small { font-size: 11px; }
  .carriage-dir { font-size: 12px; gap: 4px; flex-wrap: wrap; white-space: normal; }
  .carriage-lock { min-width: 32px; font-size: 16px; }
}

/* Gold im Kopf neben × (GoldUI-Pille, client/css/gold.css) */
.carriage-gold { flex: none; display: flex; margin-left: auto; }

.carriage-empty { font-size: 14px; color: #a99d82; padding: 10px; }

/* Haltestelle am nächsten zum eigenen Todesbeutel (CarriageUI bagNote) */
.carriage-bag { font-size: 11px; color: #ffb4ad; }
.carriage-bag::before { content: '● '; color: #ff5a4f; }
.carriage-bag.is-walk { padding: 4px 8px 6px; font-size: 12px; }

/* /css/favors.css */
/* Bitten der Bewohner (client/js/ui/FavorUI.js, shared/Favors.ts): Fenster wie die Kutsche (journal-sheet), nur
   die Liste scrollt. Maße in px — body > * wird per --ui gezoomt, darum vh/dvh immer durch var(--ui). */

#favor-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#favor-window[hidden] { display: none; }
body.in-combat #favor-window { display: none !important; }

.favor-sheet {
  width: min(480px, 100%);
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.favor-sheet > .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.favor-sheet .journal-title { flex: 1 1 auto; min-width: 0; }

.favor-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.favor-row {
  padding: 8px 10px;
  border: 1px solid #4a3d29;
  border-radius: 6px;
  background: rgba(30, 24, 16, 0.6);
}

.favor-row.is-done { opacity: 0.6; }

.favor-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: 15px;
  color: #f2e6c8;
}

.favor-who b { font-weight: 600; }
.favor-who small { font-size: 12px; color: #a99d82; }
.favor-hearts { margin-left: auto; color: #e0708a; letter-spacing: 1px; font-size: 14px; }
.favor-next { flex-basis: 100%; text-align: right; font-size: 11px; color: #a99d82; }

.favor-ask {
  margin: 6px 0 8px;
  font-size: 14px;
  font-style: italic;
  color: #e6dcc0;
  overflow-wrap: anywhere;
}

.favor-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.favor-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #d9a07a;
}

.favor-item.is-have { color: #9fd18b; }
.favor-reward { font-size: 13px; color: #f2c75c; }
.favor-event { color: #ffb050; font-weight: 700; }

.favor-give {
  margin-left: auto;
  min-height: 40px;
  min-width: 96px;
  padding: 4px 12px;
  font: inherit;
  font-size: 14px;
  color: #221a12;
  background: #e2b64f;
  border: 2px solid #7a5a1c;
  border-radius: 6px;
  cursor: pointer;
}

.favor-give:disabled { background: #6e6450; color: #2c271e; cursor: default; }
.favor-done { margin-left: auto; min-width: 96px; text-align: center; color: #9fd18b; font-size: 14px; }

.favor-foot {
  flex: 0 0 auto;
  margin-top: 8px;
  font-size: 12px;
  color: #a99d82;
  text-align: right;
}

.favor-empty { font-size: 14px; color: #a99d82; padding: 10px; }

/* Questbuch: Abschnitt „Village requests“ (QuestJournal.renderJournal) */
.journal-favors { margin: 0 0 10px; padding: 8px 10px; border: 1px solid #6b5631; border-radius: 6px; background: rgba(60, 46, 22, 0.35); }
.journal-favors-title { font-size: 14px; color: #f2c75c; margin-bottom: 4px; }
.journal-favor { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #e6dcc0; padding: 2px 0; }
.journal-favor.is-done { opacity: 0.55; text-decoration: line-through; }
.journal-favor.is-ready { color: #9fd18b; }
.journal-favors-open {
  margin-top: 6px;
  min-height: 40px;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: #221a12;
  background: #e2b64f;
  border: 2px solid #7a5a1c;
  border-radius: 6px;
  cursor: pointer;
}

/* Truhe hilft aus (FavorUI: Rucksack + Lagertruhe) */
.favor-store { display: block; margin-top: 4px; color: #b7c2a8; font-size: 12px; text-align: right; }

/* Dank im Fenster nach der Abgabe (13.10.: vorher ging das Fenster einfach zu) */
.favor-row.is-thanked { opacity: 1; border-color: #f2c75c; }
.favor-thanks {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(242, 199, 92, 0.12);
  border: 1px solid rgba(242, 199, 92, 0.5);
  animation: favor-thanks-in 0.4s ease-out;
}
.favor-thanks-say { color: #f6eace; font-size: 14px; font-style: italic; margin-bottom: 5px; }
.favor-thanks-gain { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #f2c75c; font-size: 14px; font-weight: 700; }
.favor-thanks-gift { color: #9fd18b; }
@keyframes favor-thanks-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* /css/profile.css */
/* Profil (client/js/ui/ProfileUI.js): Fenster wie Kutsche/Bitten (journal-sheet), nur der
   Inhalt scrollt, Knöpfe unten angeheftet. Maße in px — body > * wird per --ui gezoomt,
   darum vh/dvh immer durch var(--ui). */

#profile-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.55);
  padding: 16px;
}

#profile-window[hidden] { display: none; }
body.in-combat #profile-window { display: none !important; }

.profile-sheet {
  width: min(520px, 100%);
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.profile-sheet > .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin-bottom: 6px;
}

.profile-sheet .journal-title { flex: 1 1 auto; min-width: 0; }

.prf-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brass-dark) transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 2px;
}

/* ── Kopf: Gesicht, Name, Level · Rolle, seit ── */
.prf-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(217, 184, 110, 0.14), rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}

.prf-face {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background-color: #4d6a4a;
  box-shadow: inset 0 0 0 1px var(--brass-dark), inset 0 -18px 0 rgba(0, 0, 0, 0.18);
}

.prf-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.prf-name {
  font-size: 20px;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.prf-line { font-size: 14px; color: var(--gold); }
.prf-since { font-size: 12px; color: var(--muted); }

/* ── Abschnitte ── */
.prf-sec h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.prf-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Leisten mit Zahlen */
.prf-vitals {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prf-meter {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.prf-ml { color: var(--cream); }
.prf-mv { color: var(--cream); white-space: nowrap; font-variant-numeric: tabular-nums; }

.prf-bar {
  position: relative;
  display: block;
  height: 12px;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

.prf-bar > i {
  display: block;
  height: 100%;
  background: var(--brass);
  transition: width 0.3s ease;
}

.prf-hp .prf-bar > i { background: linear-gradient(180deg, #f58a7e 0 30%, var(--hp) 30% 75%, #a8322b 75% 100%); }
.prf-food .prf-bar > i { background: linear-gradient(180deg, #f2c27a 0 40%, #e0a24a 40% 100%); }
.prf-xp .prf-bar > i { background: linear-gradient(180deg, #b6a6ff 0 40%, var(--xp) 40% 100%); }

.prf-hint {
  margin: -2px 0 2px 64px;
  font-size: 11px;
  color: var(--muted);
}

/* Kacheln: Kampfwerte, Rekorde */
.prf-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.prf-combat { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.prf-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #4a3d29;
  border-radius: 6px;
  background: rgba(30, 24, 16, 0.6);
}

.prf-tile b {
  font-size: 16px;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.prf-tile small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
}

.prf-tile.has-rank b { padding-right: 30px; }
.prf-tile .prf-sub { color: #c8b98f; }

.prf-rank {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  color: var(--cream);
  background: #3a4a3c;
}

.prf-rank.is-top { color: var(--ink); background: var(--gold); }

/* Ausrüstung */
.prf-gearrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.prf-gear {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px 2px 3px;
  border: 1px solid #4a3d29;
  border-radius: 6px;
  background: rgba(30, 24, 16, 0.6);
  font-size: 12px;
}

.prf-gear .item-icon { flex: 0 0 auto; }
.prf-gear-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bosse */
.prf-bosses {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prf-boss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 5px 8px;
  border: 1px solid #4a3d29;
  border-radius: 6px;
  background: rgba(30, 24, 16, 0.6);
  font-size: 13px;
}

.prf-boss b { flex: 1 1 auto; color: var(--cream); }
.prf-kills { color: var(--gold); font-weight: 700; }
.prf-best { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; color: var(--muted); }

/* Berufe */
.prf-profs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prf-prof {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.prf-prof b { text-align: right; color: var(--gold); }

/* ── Knöpfe unten ── */
.prf-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
}

.prf-btn {
  font: 600 13px var(--font-pixel);
  color: var(--cream);
  background: #232e25;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  min-height: 40px;
  padding: 0 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.prf-btn:hover { background: #2f3d31; }
.prf-btn.prf-armor.is-on { background: #2d4a30; border-color: #8fd18a; }

@media (max-width: 420px) {
  .prf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prf-combat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prf-foot .prf-btn { flex: 1 1 auto; }
}

/* Titel aus den Arena-Rängen (Ranks.profile title, shared/Arena.ts) */
.prf-title { display: block; font-size: 13px; color: #b8860b; font-weight: 700; }

/* /css/weapons.css */
/* Fenster „Waffen“ (client/js/ui/WeaponsUI.js): Meisterschaft je Kampfstil und Skilltree. Fenster wie Profil
   (journal-sheet), Kopf/Reiter/Fuß fest, nur der Inhalt scrollt. Maße in px — body > * wird per --ui gezoomt,
   darum vh/dvh immer durch var(--ui). Breit: Baum + Beschreibung rechts; schmal (.is-compact, JS misst die
   Breite): Baum allein, Beschreibung als Blatt von unten. --acc = Farbe des Stils (WeaponsUI.ACCENT). */

#weapons-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.6);
  padding: 16px;
}

#weapons-window[hidden] { display: none; }
body.in-combat #weapons-window { display: none !important; }

.wpn-sheet {
  --acc: #f2c75c;
  --tile: 64px;
  --cap: 92px;
  position: relative;
  width: min(940px, 100%);
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wpn-sheet > .journal-head {
  position: static;
  margin-top: 0;
  padding-top: 0;
  box-shadow: none;
  flex: 0 0 auto;
  margin-bottom: 8px;
}

.wpn-sheet .journal-title { flex: 1 1 auto; min-width: 0; }

/* .wpn-gold = GoldUI-Pille (client/css/gold.css) */

/* ── Reiter je Stil ── */
.wpn-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  padding-top: 6px;
}

.wpn-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px 4px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #243128, #18211b);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.18), 0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.wpn-tab:hover { background: linear-gradient(180deg, #2c3b30, #1d2820); }
.wpn-tab:active { transform: translateY(1px); }
.wpn-tab.is-unplayed { opacity: 0.55; }
.wpn-tab.is-unplayed .wpn-ico { filter: grayscale(0.8) brightness(0.8); }
.wpn-tab.is-on {
  opacity: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 28%, #2a3a2e), #1a241d);
  box-shadow: inset 0 0 0 2px var(--acc), 0 0 12px color-mix(in srgb, var(--acc) 45%, transparent), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.wpn-tab-ico { flex: none; display: flex; }
.wpn-tab-name { max-width: 100%; font-size: 13px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.wpn-tab-lv {
  position: absolute;
  top: 3px;
  right: 4px;
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #0e1410;
  color: var(--gold);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.wpn-tab.has-points .wpn-tab-lv { background: var(--gold); color: var(--ink); animation: wpnBadge 1.6s ease-in-out infinite; }
.wpn-tab-eq {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 0 6px;
  border-radius: 6px;
  border: 1px solid var(--ink);
  background: var(--brass);
  color: var(--ink);
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Inhalt ── */
.wpn-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "tree hero" "tree detail";
  align-items: start;
  gap: 10px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brass-dark) transparent;
  padding: 6px 2px 2px;
}
.wpn-hero { grid-area: hero; }
.wpn-tree { grid-area: tree; }
.wpn-detail { grid-area: detail; }

/* Kopf: Medaille, Name, Stufe, XP, Punkte */
.wpn-hero {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(217, 184, 110, 0.1), rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}
.wpn-loading { color: var(--muted); padding: 20px; }
.wpn-medal {
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--acc) 35%, #2b3a2f), #121914 72%);
  box-shadow: inset 0 0 0 3px var(--brass-dark), inset 0 0 0 5px rgba(0, 0, 0, 0.4), 0 0 18px color-mix(in srgb, var(--acc) 40%, transparent);
}
.wpn-hero-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wpn-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.wpn-name { font-size: 22px; color: var(--cream); text-shadow: 0 2px 0 var(--ink); }
.wpn-eq {
  padding: 1px 8px;
  border-radius: 6px;
  border: 2px solid var(--ink);
  background: var(--brass);
  color: var(--ink);
  font-size: 12px;
}
.wpn-points {
  padding: 2px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #0e1410;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.wpn-points.is-free {
  background: linear-gradient(180deg, #ffe08a, #e0a83a);
  color: var(--ink);
  font-weight: 700;
  animation: wpnBadge 1.6s ease-in-out infinite;
}
.wpn-lvl { color: var(--gold); font-size: 15px; }
.wpn-xp {
  position: relative;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: #0b100c;
  overflow: hidden;
}
.wpn-xp i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 60%, #fff), var(--acc));
  box-shadow: 0 0 8px var(--acc);
  transition: width 0.6s ease-out;
}
.wpn-xp span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 4px #000;
}
.wpn-blurb { color: var(--muted); font-size: 13px; font-style: italic; }
.wpn-fist { color: #f6d9a8; font-size: 13px; }
.wpn-hint { color: #cfe3b8; font-size: 13px; }

/* ── Baum ── */
.wpn-tree {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background:
    radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 6px),
    #111813;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.18), inset 0 6px 18px rgba(0, 0, 0, 0.5);
}
.wpn-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wpn-col + .wpn-col { border-left: 1px dashed rgba(217, 184, 110, 0.14); }
.wpn-branch {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-bottom: 8px;
  text-align: center;
}
.wpn-branch b { color: var(--gold); font-size: 16px; text-shadow: 0 2px 0 var(--ink); }
.wpn-branch small { color: var(--muted); font-size: 11px; }

.wpn-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  max-width: 140px;
  min-height: 44px;
  padding: 4px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--cream);
  font-family: var(--font-pixel);
  cursor: pointer;
}
.wpn-node:focus-visible { outline: none; }
.wpn-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, #2f3f33, #141b16 75%);
  box-shadow: inset 0 0 0 2px #3a4a3e, 0 3px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
}
.wpn-node:hover .wpn-tile { transform: translateY(-2px); }
.wpn-node:active .wpn-tile { transform: translateY(1px) scale(0.97); }
.wpn-node-name {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Ränge: ●●○ */
.wpn-pips, .wpn-d-pips { display: flex; gap: 4px; }
.wpn-pips i, .wpn-d-pips i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #2a332c;
}
.wpn-pips i.on, .wpn-d-pips i.on {
  background: radial-gradient(circle at 35% 35%, #fff6c8, var(--gold) 55%, #b07d24);
  box-shadow: 0 0 6px rgba(242, 199, 92, 0.8);
}
.wpn-pips i.is-new { animation: wpnPip 0.6s cubic-bezier(0.3, 1.8, 0.5, 1) both; }

/* Zustände */
.wpn-node.is-locked .wpn-tile { filter: grayscale(1) brightness(0.45); }
.wpn-node.is-locked .wpn-node-name { opacity: 0.6; }
.wpn-node.is-open .wpn-tile { filter: grayscale(0.55) brightness(0.75); }
.wpn-lock {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 18px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #8c8f86;
  filter: none;
}
.wpn-lock::before {
  content: '';
  position: absolute;
  left: 2px;
  top: -9px;
  width: 6px;
  height: 7px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 0 0 1px #b7bab0;
}
.wpn-node.is-learnable .wpn-tile {
  border-color: #3a2a12;
  box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px color-mix(in srgb, var(--acc) 60%, transparent), 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: wpnGlow 1.8s ease-in-out infinite;
}
.wpn-node.is-learnable .wpn-node-name { color: var(--cream); }
.wpn-node.is-partial .wpn-tile {
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--acc) 40%, #2f3f33), #141b16 78%);
}
.wpn-node.is-partial .wpn-node-name { color: var(--cream); }
.wpn-node.is-maxed .wpn-tile {
  border-color: #5a3a10;
  background: radial-gradient(circle at 50% 35%, #6a5422, #2a1f0e 80%);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 14px rgba(255, 220, 120, 0.35), 0 0 12px rgba(242, 199, 92, 0.45), 0 3px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.wpn-node.is-maxed .wpn-tile::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: wpnShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
.wpn-node.is-maxed .wpn-node-name { color: var(--gold); }
.wpn-node.is-sel .wpn-tile { transform: translateY(-2px); outline: 3px solid var(--cream); outline-offset: 2px; }

/* Schlussknoten: größer, goldener Zierrahmen mit Eck-Nieten */
.wpn-node.is-cap .wpn-tile {
  width: var(--cap);
  height: var(--cap);
  border-radius: 14px;
  border: 4px solid #3a2810;
  background: radial-gradient(circle at 50% 38%, #34402f, #10150f 78%);
  box-shadow:
    inset 0 0 0 2px #c79a3e,
    inset 0 0 0 5px #3a2810,
    inset 0 0 0 7px rgba(242, 199, 92, 0.35),
    0 0 0 2px #8c6a35,
    0 4px 0 rgba(0, 0, 0, 0.55);
}
.wpn-node.is-cap .wpn-tile::before {
  content: '';
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background:
    radial-gradient(circle, #ffe9a0 0 3px, #8c6a35 3.5px 5px, transparent 5.5px) 0 0 / 18px 18px no-repeat,
    radial-gradient(circle, #ffe9a0 0 3px, #8c6a35 3.5px 5px, transparent 5.5px) 100% 0 / 18px 18px no-repeat,
    radial-gradient(circle, #ffe9a0 0 3px, #8c6a35 3.5px 5px, transparent 5.5px) 0 100% / 18px 18px no-repeat,
    radial-gradient(circle, #ffe9a0 0 3px, #8c6a35 3.5px 5px, transparent 5.5px) 100% 100% / 18px 18px no-repeat;
}
.wpn-node.is-cap .wpn-node-name { font-size: 13px; color: #e8d6a8; }
.wpn-node.is-cap.is-locked .wpn-tile { filter: grayscale(0.9) brightness(0.5); }
.wpn-node.is-cap.is-learnable .wpn-tile { animation: wpnGlowCap 1.8s ease-in-out infinite; }
.wpn-node.is-cap.is-maxed .wpn-tile {
  background: radial-gradient(circle at 50% 38%, #7a6026, #2a1f0e 80%);
  box-shadow:
    inset 0 0 0 2px #ffe08a,
    inset 0 0 0 5px #5a3a10,
    inset 0 0 18px rgba(255, 220, 120, 0.4),
    0 0 0 2px var(--gold),
    0 0 22px rgba(242, 199, 92, 0.6),
    0 4px 0 rgba(0, 0, 0, 0.55);
}

/* Verbindungslinien */
.wpn-link {
  position: relative;
  flex: none;
  width: 8px;
  height: 22px;
  margin: 2px 0;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #0a0e0b;
  overflow: hidden;
}
.wpn-link.to-cap { height: 26px; }
.wpn-link i {
  position: absolute;
  inset: 0;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(180deg, #fff3c0, var(--gold) 40%, var(--acc));
}
.wpn-link.is-lit { box-shadow: 0 0 8px color-mix(in srgb, var(--gold) 70%, transparent); }
.wpn-link.is-lit i { transform: scaleY(1); }
.wpn-link.is-lighting i { animation: wpnFill 0.55s 0.12s ease-out both; }
.wpn-link.is-ready i {
  transform: scaleY(1);
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, transparent) 0 4px, transparent 4px 8px);
  background-size: 100% 16px;
  opacity: 0.7;
  animation: wpnFlow 0.9s linear infinite;
}

/* ── Beschreibung (breit: rechts) ── */
.wpn-detail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: linear-gradient(180deg, #202b23, #161e18);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  min-height: 180px;
}
.wpn-detail[hidden] { display: none; }
.wpn-d-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--muted); font-size: 14px; }
.wpn-d-empty p { margin: 0; }
.wpn-d-empty-ico { opacity: 0.6; margin-top: 8px; }
.wpn-d-rule { font-size: 12px; opacity: 0.85; }
.wpn-d-head { display: flex; align-items: center; gap: 10px; }
.wpn-d-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--acc) 30%, #2f3f33), #141b16 78%);
  box-shadow: inset 0 0 0 2px var(--brass-dark);
}
.wpn-d-head.is-cap .wpn-d-tile { box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px rgba(242, 199, 92, 0.5); }
.wpn-d-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wpn-d-title b { font-size: 18px; color: var(--cream); overflow-wrap: anywhere; }
.wpn-d-title small { color: var(--muted); font-size: 12px; }
.wpn-d-ranks { display: flex; align-items: center; gap: 8px; color: var(--gold); font-size: 13px; }
.wpn-d-text { margin: 0; font-size: 14px; line-height: 1.35; color: var(--cream); }
.wpn-d-text em { font-style: normal; color: var(--gold); font-weight: 700; }
.wpn-d-row { display: flex; flex-direction: column; gap: 2px; }
.wpn-d-row.is-next .wpn-d-text { color: #cfe3b8; }
.wpn-d-row.is-next em { color: #b9f08a; }
.wpn-d-k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.wpn-d-req { font-size: 12px; color: var(--muted); }
.wpn-d-why { font-size: 13px; color: #ffb39c; }
.wpn-learn {
  margin-top: 4px;
  min-height: 46px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe08a, #e0a83a 60%, #b07d24);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.45);
}
.wpn-learn:not([disabled]):hover { filter: brightness(1.08); }
.wpn-learn:not([disabled]):active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(0, 0, 0, 0.45); }
.wpn-learn[disabled] { background: #3a443c; color: #8d9886; box-shadow: none; cursor: default; }
.wpn-learn.is-maxed[disabled] { background: linear-gradient(180deg, #6a5422, #3a2c12); color: var(--gold); }
.wpn-sheet-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #2a352c;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ── Fuß: Umverteilen ── */
.wpn-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--brass-dark);
}
.wpn-foot-hint, .wpn-confirm { flex: 1 1 200px; min-width: 0; color: var(--muted); font-size: 13px; }
.wpn-confirm { color: var(--cream); font-size: 14px; }
.wpn-foot-btns { display: flex; gap: 8px; margin-left: auto; }
.wpn-btn {
  min-height: 44px;
  padding: 4px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #34443a, #222d25);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 15px;
  cursor: pointer;
  margin-left: auto;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.3), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.wpn-foot-btns .wpn-btn { margin-left: 0; }
.wpn-btn small { color: var(--gold); font-size: 12px; margin-left: 4px; }
.wpn-btn[disabled] { opacity: 0.45; cursor: default; }
.wpn-btn.is-danger { background: linear-gradient(180deg, #a8483a, #6e2a22); }

/* Meldung im Fenster */
.wpn-toast {
  position: absolute;
  left: 50%;
  top: 56px;
  z-index: 20;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #2b2a1c;
  color: var(--cream);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.wpn-toast[hidden] { display: none; }
.wpn-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.wpn-toast.is-bad { background: #4a201b; color: #ffd5c8; }
.wpn-toast.is-good { background: #233a1e; color: #d8f5c0; }

/* ── Icons (assets/own/ui/mastery.png, 24-px-Streifen; ohne Blatt: Buchstabe) ── */
.wpn-ico {
  --s: 48px;
  display: block;
  flex: none;
  width: var(--s);
  height: var(--s);
  image-rendering: pixelated;
}
.wpn-ico.has-img {
  background-image: var(--mastery-img);
  background-repeat: no-repeat;
  background-size: calc(var(--s) * var(--n, 1)) var(--s);
  background-position: calc(var(--i, 0) * var(--s) * -1) 0;
}
.wpn-ico.no-img {
  display: grid;
  place-items: center;
  border-radius: 22%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc, #f2c75c) 55%, #fff), color-mix(in srgb, var(--acc, #f2c75c) 70%, #000));
  color: #1a140c;
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: calc(var(--s) * 0.55);
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ── Lern-Animation ── */
.wpn-node.is-burst .wpn-tile { animation: wpnPop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both; z-index: 3; }
.wpn-node.is-burst .wpn-tile > .wpn-ico { animation: wpnFlash 0.7s ease-out both; }
.wpn-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff4c0;
  box-shadow: 0 0 6px #ffd76a, 0 0 2px #fff;
  pointer-events: none;
  animation: wpnSpark 0.9s var(--d, 0s) cubic-bezier(0.15, 0.7, 0.3, 1) both;
  z-index: 4;
}
.wpn-spark.is-acc { background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.wpn-ring {
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 3px solid #fff1b0;
  pointer-events: none;
  animation: wpnRing 0.8s ease-out both;
  z-index: 2;
}
.wpn-node.is-unlocked-now .wpn-tile { animation: wpnWake 1s 0.45s ease-out both; }
.wpn-sheet.is-capflash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 230, 150, 0.35), transparent 65%);
  pointer-events: none;
  animation: wpnCapFlash 1.2s ease-out both;
  z-index: 15;
}

@keyframes wpnGlow {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 0 2px color-mix(in srgb, var(--acc) 50%, transparent), 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent), 0 3px 0 rgba(0, 0, 0, 0.5); }
  50% { box-shadow: inset 0 0 0 2px #fff0b0, 0 0 0 3px color-mix(in srgb, var(--acc) 85%, transparent), 0 0 18px color-mix(in srgb, var(--gold) 70%, transparent), 0 3px 0 rgba(0, 0, 0, 0.5); }
}
@keyframes wpnGlowCap {
  0%, 100% { box-shadow: inset 0 0 0 2px #c79a3e, inset 0 0 0 5px #3a2810, inset 0 0 0 7px rgba(242, 199, 92, 0.35), 0 0 0 2px #8c6a35, 0 0 8px rgba(242, 199, 92, 0.3), 0 4px 0 rgba(0, 0, 0, 0.55); }
  50% { box-shadow: inset 0 0 0 2px #ffe08a, inset 0 0 0 5px #3a2810, inset 0 0 0 7px rgba(242, 199, 92, 0.6), 0 0 0 3px var(--gold), 0 0 26px color-mix(in srgb, var(--acc) 70%, transparent), 0 4px 0 rgba(0, 0, 0, 0.55); }
}
@keyframes wpnBadge {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.2); }
}
@keyframes wpnShine {
  0%, 70% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes wpnFill {
  from { transform: scaleY(0); filter: brightness(2); }
  to { transform: scaleY(1); filter: brightness(1); }
}
@keyframes wpnFlow {
  from { background-position: 0 0; }
  to { background-position: 0 16px; }
}
@keyframes wpnPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes wpnFlash {
  0% { filter: brightness(3) saturate(0.2); }
  100% { filter: brightness(1); }
}
@keyframes wpnSpark {
  0% { transform: translate(0, 0) scale(var(--z, 1)) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(180deg); opacity: 0; }
}
@keyframes wpnRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes wpnPip {
  0% { transform: scale(0.2); filter: brightness(3); }
  60% { transform: scale(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes wpnWake {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.8); transform: scale(1.06); }
  100% { filter: brightness(1); transform: scale(1); }
}
@keyframes wpnCapFlash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wpn-node .wpn-tile, .wpn-points.is-free, .wpn-tab .wpn-tab-lv, .wpn-link i, .wpn-node.is-maxed .wpn-tile::after { animation: none !important; }
}

/* ── Schmal (Handy hochkant, kleines Fenster) ── */
.wpn-sheet.is-compact {
  --tile: 58px;
  --cap: 70px;
}
.wpn-sheet.is-compact .wpn-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "hero" "tree"; }
.wpn-sheet.is-compact .wpn-tabs { gap: 4px; }
.wpn-sheet.is-compact .wpn-tab { padding: 4px 2px; gap: 1px; min-height: 50px; }
.wpn-sheet.is-compact .wpn-tab-lv { position: static; }
.wpn-sheet.is-compact .wpn-tab-name { display: none; }
.wpn-sheet.is-compact .wpn-tab-lv { min-width: 18px; height: 16px; font-size: 10px; line-height: 12px; padding: 0 3px; }
.wpn-sheet.is-compact .wpn-tab-eq { font-size: 9px; line-height: 12px; top: -7px; padding: 0 4px; }
.wpn-sheet.is-compact .wpn-hero { gap: 10px; padding: 8px 10px; align-items: flex-start; }
.wpn-sheet.is-compact .wpn-medal { width: 64px; height: 64px; }
.wpn-sheet.is-compact .wpn-name { font-size: 19px; }
.wpn-sheet.is-compact .wpn-tree { padding: 10px 2px 12px; gap: 2px; }
.wpn-sheet.is-compact .wpn-branch b { font-size: 14px; }
.wpn-sheet.is-compact .wpn-node-name { font-size: 11px; }
.wpn-sheet.is-compact .wpn-link { height: 14px; }
.wpn-sheet.is-compact .wpn-link.to-cap { height: 18px; }
.wpn-sheet.is-compact .wpn-node.is-cap .wpn-tile::before { inset: -8px; }

/* Beschreibung als Blatt von unten */
.wpn-sheet.is-compact .wpn-detail {
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  min-height: 0;
  max-height: 72%;
  overflow-y: auto;
  border-radius: 16px 16px 12px 12px;
  border-width: 3px;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, #243028, #161e18);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 -10px 30px rgba(0, 0, 0, 0.6);
  animation: wpnSheetIn 0.22s ease-out both;
}
.wpn-sheet.is-compact .wpn-detail::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 44px;
  height: 4px;
  margin-left: -22px;
  border-radius: 2px;
  background: rgba(217, 184, 110, 0.45);
}
.wpn-sheet.is-compact .wpn-d-head { padding-right: 44px; }
/* Blatt offen: Baum bleibt hell und antippbar (anderer Knoten = anderer Inhalt), Kopf und Fuß nur leicht zurück */
.wpn-sheet.is-compact.has-sheet .wpn-hero,
.wpn-sheet.is-compact.has-sheet .wpn-foot { filter: brightness(0.75) saturate(0.85); transition: filter 0.2s; }
/* kleines Handy: weniger Rand, damit 7 Reiter ≥ 40 px breit bleiben */
@media (max-width: 480px) {
  #weapons-window { padding: 8px; }
}
.wpn-sheet.is-compact { padding: 10px; }
.wpn-sheet.is-compact .wpn-tabs { gap: 3px; }
@keyframes wpnSheetIn {
  from { transform: translateY(40%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Nach dem Kampf: Meisterschafts-Zeile im Einblendungs-Stapel (GameToast.prof) */
.prof-chip.is-mastery .wpn-ico { --s: 24px; }
.prof-chip.is-mastery .pc-bar i { background: var(--acc, #f2c75c); }

/* ☰ zeigt das „!“ der Waffen-Kachel auch, solange das Menü zu ist (Handy) */
#menu-btn.has-wpn-badge::after {
  content: '!';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  font: 700 12px/18px var(--font-pixel);
  text-align: center;
  pointer-events: none;
}
.wpn-badge { background: #e0a83a !important; color: var(--ink) !important; animation: wpnBadge 1.6s ease-in-out infinite; }
#desk-bar .desk-btn { position: relative; }
/* oben links: oben rechts steht die Taste (kbd, desk.css) */
#desk-bar .wpn-badge { position: absolute; top: -6px; left: 6px; right: auto; }

/* Skills des Stils (WeaponsUI.skillsHtml): unter der Medaille, über die ganze Breite des Kopfs */
.wpn-skills { grid-column: 1 / -1; flex-basis: 100%; margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(140, 106, 53, 0.45); }
.wpn-hero { flex-wrap: wrap; }
.wpn-skills-h { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); cursor: pointer; list-style: none; }
.wpn-skills-h::-webkit-details-marker { display: none; }
.wpn-skills-h::after { content: '▸'; font-size: 12px; transition: transform 0.15s; }
.wpn-skills[open] > .wpn-skills-h::after { transform: rotate(90deg); }
.wpn-skills[open] > .wpn-skills-h { margin-bottom: 4px; }
.wpn-sheet.is-compact .wpn-skills { margin-top: 2px; padding-top: 2px; }
.wpn-sheet.is-compact .wpn-skills-h, body.touch-device .wpn-skills-h { min-height: 40px; font-size: 12px; }
.wpn-skills ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpn-skills li { display: flex; gap: 8px; align-items: flex-start; }
.wpn-skills li .ui-icon { flex: 0 0 auto; margin-top: 2px; }
.wpn-skills li b { font-size: 13px; color: var(--cream); }
.wpn-skills li small { margin-left: 6px; font-size: 10px; color: var(--muted); }
.wpn-skills li p { margin: 1px 0 0; font-size: 12px; line-height: 1.3; color: var(--cream); opacity: 0.85; }
.wpn-skills li.is-ult b { color: #ffd978; }

/* /css/dungeon.css */
/* Höhlen-Dungeons (client/js/scenes/Dungeon.js, docs/DUNGEONS_PORTALS.md): Fenster „Enter the cave?“ am Höhlenmund.
   Maße in px (body > * zoomt per --ui), Höhen über dvh / var(--ui). */
#dungeon-prompt {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 5, 9, 0.55);
  padding: 16px;
}
#dungeon-prompt[hidden] { display: none; }
body.in-combat #dungeon-prompt { display: none !important; }

.dgp-sheet {
  position: relative;
  width: min(360px, 100%);
  max-height: calc(100dvh / var(--ui) - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  color: var(--cream);
  font-family: var(--font-pixel);
  background: linear-gradient(180deg, #1d1922, #121016);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 0 0 2px #5a4a6a inset, 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(127, 227, 255, 0.08);
  text-align: center;
}
.dgp-sheet .menu-x { position: absolute; top: 8px; right: 8px; }
.dgp-title { font-size: 20px; color: var(--gold); text-shadow: 0 2px 0 var(--ink); margin: 2px 32px 2px; }
.dgp-sub { font-size: 13px; color: #9fe6ff; min-height: 16px; }
.dgp-text { font-size: 13px; line-height: 1.35; margin: 10px 0 14px; color: var(--cream); opacity: 0.9; }
.dgp-btns { display: flex; gap: 10px; justify-content: center; }
.dgp-btns button {
  min-height: 44px;
  min-width: 120px;
  padding: 6px 16px;
  font: 15px var(--font-pixel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.dgp-go { color: var(--ink); background: linear-gradient(180deg, #ffd978, #e0a83a); }
.dgp-no { color: var(--cream); background: #2b2730; }
.dgp-btns button:hover, .dgp-btns button.pad-focus { outline: 2px solid var(--brass); outline-offset: 1px; }

/* Dungeon-Endtruhe im Truhenfenster (ChestUI.open dungeon): Gold-Rahmen, Beute erscheint schnell nacheinander mit
   Schimmer nach Seltenheit (zusammen < 0,6 s — belohnend, aber ohne Warten) */
#chest-window.is-treasure { box-shadow: 0 0 0 2px #f2c75c, 0 0 26px rgba(242, 199, 92, 0.35), 0 10px 30px rgba(0, 0, 0, 0.55); }
#chest-window.is-treasure h3 { color: #ffd978; text-shadow: 0 2px 0 #221a12, 0 0 10px rgba(255, 210, 90, 0.5); }
#chest-window .trade-slot.is-pop { animation: dg-loot-pop 0.32s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--pop-i, 0) * 70ms); }
#chest-window .trade-slot.is-pop.rarity-rare,
#chest-window .trade-slot.is-pop.rarity-epic,
#chest-window .trade-slot.is-pop.rarity-legendary { animation-name: dg-loot-pop, dg-loot-shine; animation-duration: 0.32s, 1.6s; animation-iteration-count: 1, 2; }
@keyframes dg-loot-pop { from { transform: scale(0.3) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dg-loot-shine { 0%, 100% { box-shadow: 0 0 0 rgba(255, 220, 120, 0); } 50% { box-shadow: 0 0 14px rgba(255, 220, 120, 0.75); } }
@media (prefers-reduced-motion: reduce) { #chest-window .trade-slot.is-pop { animation: none; } }

/* Bild der Höhle/Gruft oben im Fenster (assets/own/dungeon/prompt.png, tools/art/dungeon/prompt.js): 144×64 in 2×,
   Blatt = 6 Bilder nebeneinander × 2 Reihen (cave, crypt). Animation über die Spalten mit steps() — Pixelkunst, kein
   Überblenden. Bei schmalem Fenster schrumpft es mit (Prozent-Lagen). */
.dgp-art {
  width: 288px;
  max-width: 100%;
  aspect-ratio: 144 / 64;
  margin: 30px auto 10px;   /* unter dem × (oben rechts) */
  border-radius: 6px;
  background-image: var(--dgp-img);
  background-repeat: no-repeat;
  background-size: 600% 200%;
  background-position: 0% 0%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 2px var(--ink), 0 4px 14px rgba(0, 0, 0, 0.55);
  animation: dgp-play 0.84s steps(6, end) infinite;
}
.dgp-art[hidden] { display: none; }
#dungeon-prompt[data-kind="crypt"] .dgp-art { background-position-y: 100%; }
@keyframes dgp-play { from { background-position-x: 0%; } to { background-position-x: 120%; } }

/* Auftritt: Dunkel pulst einmal von den Rändern, das Bild steigt aus dem Schwarz auf */
#dungeon-prompt.dgp-enter { animation: dgp-dark 0.7s ease-out; }
#dungeon-prompt.dgp-enter .dgp-art { animation: dgp-play 0.84s steps(6, end) infinite, dgp-reveal 0.7s ease-out; }
@keyframes dgp-dark {
  0% { background: rgba(6, 5, 9, 0); box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }
  40% { background: rgba(6, 5, 9, 0.7); box-shadow: inset 0 0 120px 40px rgba(0, 0, 0, 0.8); }
  100% { background: rgba(6, 5, 9, 0.55); box-shadow: inset 0 0 80px 10px rgba(0, 0, 0, 0.4); }
}
@keyframes dgp-reveal {
  0% { filter: brightness(0); transform: scale(0.96); }
  60% { filter: brightness(1.15); transform: scale(1); }
  100% { filter: brightness(1); }
}
#dungeon-prompt[data-kind="crypt"] .dgp-sheet { box-shadow: 0 0 0 2px #4a4a66 inset, 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 40px rgba(122, 220, 210, 0.1); }

@media (prefers-reduced-motion: reduce) {
  .dgp-art, #dungeon-prompt.dgp-enter .dgp-art { animation: none; background-position-x: 0%; }
  #dungeon-prompt.dgp-enter { animation: none; }
}

/* Tages-Wendung im Eingangsfenster (shared/Dungeons DG_MODIFIERS, 25.10.2026): Abzeichen in der Unterzeile, Satz darunter */
.dgp-mod {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--ink);
  background: linear-gradient(180deg, #ffd978, #e0a83a);
  border: 2px solid var(--ink);
  border-radius: 999px;
  vertical-align: 1px;
}
.dgp-mod[data-mod="dark"] { color: #e8e0ff; background: linear-gradient(180deg, #4a3e6a, #241c38); }
.dgp-mod[data-mod="swarming"] { background: linear-gradient(180deg, #ffb07a, #d8683a); }
.dgp-mod[data-mod="fortified"] { color: #f2ece0; background: linear-gradient(180deg, #8a8494, #4f4a5a); }
.dgp-modtext { font-size: 12px; color: #c9bfd8; margin-top: 4px; min-height: 0; }
.dgp-modtext:empty { display: none; }

/* /css/skip.css */
/* Steine werfen (client/js/ui/SkipUI.js): kleine Anzeige ganz unten in der Mitte (zwischen Aktionsknopf und Stick),
   damit das Wasser frei bleibt — die Kamera schiebt das Bild zusätzlich in Wurfrichtung. Messingrahmen wie die
   Fenster, Segment-Balken mit goldener Zone (je Stein anders), Winkel als kleine Seitenansicht (SVG), Bewertungswort.
   Feste px (body > * wird per --ui gezoomt). Antippen der Anzeige zählt als Druck. */

#skip-hud {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1600;
  width: 196px;
  padding: 8px 12px 7px;
  border: 2px solid #221a12;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #8c6a35, inset 0 0 0 3px #3a2a14, inset 0 4px 0 rgba(255, 236, 190, 0.06), 0 4px 0 rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.3);
  background: linear-gradient(180deg, rgba(52, 41, 27, 0.96), rgba(26, 20, 14, 0.96));
  color: #f2e6c8;
  text-align: center;
  font-family: var(--font-pixel, sans-serif);
  font-size: 12px;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

#skip-hud[hidden] { display: none; }
/* Wurf läuft: Hinweis-Band (Hints) und Wegweiser-Pfeile nicht darüber/darunter — sie lagen genau dort (17.10.) */
body.skip-hud-on #hint-pill,
body.skip-hud-on .nav-arrow { visibility: hidden; }
body.in-combat #skip-hud { display: none !important; }

/* in der Zone: Rahmen glüht gold */
#skip-hud.in-zone { box-shadow: inset 0 0 0 2px #ffd25a, inset 0 0 0 3px #3a2a14, 0 0 10px rgba(255, 210, 90, 0.55); }
#skip-hud.new-best { box-shadow: inset 0 0 0 2px #ffd25a, inset 0 0 0 3px #3a2a14, 0 0 14px rgba(255, 210, 90, 0.8); }

.skip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(140, 106, 53, 0.45);
  white-space: nowrap;
}

.skip-stone { overflow: hidden; text-overflow: ellipsis; font-weight: 700; color: #f6eace; }
.skip-best { color: #f2c75c; font-size: 11px; }

.skip-label { font-size: 9px; letter-spacing: 2px; color: #b8a987; text-align: left; margin: 2px 0 2px; }

/* Steinbeutel: Plätze mit Steinfarbe (--stone), Rand nach Seltenheit, Sterne darunter; leere dunkel.
   Neuer Fund blinkt kurz. Seit 12.10. bis zu 10 Plätze (Skipping-Level) — sie brechen um. */
.skip-pouch { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 1px 0 4px; }
.skip-pouch-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 150px; }
.skip-slot {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 13px; height: 15px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}
.skip-slot i {
  display: block;
  width: 11px; height: 7px;
  border: 1px solid #221a12;
  border-radius: 50%;
  background: var(--stone, #2c241a);
}
.skip-slot:empty::before {
  content: '';
  display: block;
  width: 11px; height: 7px;
  border: 1px solid #221a12;
  border-radius: 50%;
  background: #2c241a;
}
.skip-slot em { font-style: normal; font-size: 7px; line-height: 8px; color: #d9cfb6; }
.skip-slot small { position: absolute; top: -4px; right: -6px; font-size: 7px; color: #a99d82; }
.skip-slot.is-uncommon i { box-shadow: 0 0 0 1px #6fcf5a; }
.skip-slot.is-rare i { box-shadow: 0 0 0 1px #5aa7ff, 0 0 4px #5aa7ff; }
.skip-slot.is-new { animation: skip-pop 0.35s ease-out; }

/* Stein wählen vor dem Wurf: Plätze werden Knöpfe (Tippfläche ≥ 40 px am Handy), markierter golden */
#skip-hud[data-phase="choose"] { width: auto; min-width: 184px; max-width: min(340px, calc(100vw / var(--ui, 1) - 24px)); cursor: default; }
#skip-hud[data-phase="choose"] .skip-label,
#skip-hud[data-phase="choose"] .skip-power,
#skip-hud[data-phase="choose"] .skip-angle { display: none; }
#skip-hud[data-phase="choose"] .skip-pouch-slots { max-width: none; gap: 6px; }
#skip-hud[data-phase="choose"] .skip-head { white-space: normal; }
.skip-slot.is-btn {
  width: 40px; height: 40px;
  justify-content: center;
  gap: 2px;
  border: 2px solid #3a2a14;
  border-radius: 6px;
  background: #1d1710;
  cursor: pointer;
}
.skip-slot.is-btn i { width: 18px; height: 11px; }
.skip-slot.is-btn em { font-size: 10px; line-height: 11px; color: #f2c75c; }
.skip-slot.is-btn small { top: 1px; right: 2px; font-size: 9px; }
.skip-slot.is-btn.is-sel { border-color: #ffd25a; box-shadow: 0 0 6px rgba(255, 210, 90, 0.6); }
.skip-x { display: none; }
#skip-hud[data-phase="choose"] .skip-x {
  display: block;
  position: absolute;
  top: -18px; right: -14px;
  width: 30px; height: 30px;
  border: 2px solid #221a12;
  border-radius: 50%;
  background: #2a2116;
  color: #f2e6c8;
  font: 700 16px/1 var(--font-pixel, sans-serif);
  cursor: pointer;
}
body.touch-device #skip-hud[data-phase="choose"] .skip-x { width: 40px; height: 40px; top: -22px; right: -18px; }
/* × an der Ecke des Rahmens, nicht an der Beutel-Zeile — dort lag es am Handy auf „Best“ (Daniel 24.10.2026);
   die Kopfzeile lässt rechts Platz dafür */
#skip-hud[data-phase="choose"] .skip-pouch { position: static; }
#skip-hud[data-phase="choose"] .skip-head { padding-right: 16px; }
body.touch-device #skip-hud[data-phase="choose"] .skip-head { padding-right: 22px; }

/* Combo im Flug: Rahmen glüht orange */
#skip-hud.is-combo { box-shadow: inset 0 0 0 2px #ffb347, inset 0 0 0 3px #3a2a14, 0 0 12px rgba(255, 179, 71, 0.7); }

.skip-pouch-n { font-size: 10px; color: #a99d82; min-width: 26px; text-align: left; }

/* Nach einem Fund am Ufer: Kopf, Beutel und Hinweis */
#skip-hud[data-phase="pouch"] .skip-label,
#skip-hud[data-phase="pouch"] .skip-power,
#skip-hud[data-phase="pouch"] .skip-angle { display: none; }
#skip-hud[data-phase="pouch"] .skip-pouch { margin: 2px 0 3px; }
#skip-hud[data-phase="pouch"] { cursor: default; }

/* Kiesbank (13.10.2026): Balken = Wellen-Takt, goldene Zone = Moment, in dem sie zurückweicht */
#skip-hud[data-phase="wave"] .skip-pouch,
#skip-hud[data-phase="wave"] .skip-angle { display: none; }
#skip-hud[data-phase="wave"] .skip-power-fill { background: linear-gradient(90deg, #5aa7ff, #bfe6ff); }
#skip-hud[data-phase="flight"] .skip-pouch { display: none; }

/* Kraft: Segmente (Lücken per Gradient), Füllung grün→gelb→rot, goldene Zone, weißer Zeiger */
.skip-power {
  position: relative;
  height: 16px;
  border: 2px solid #221a12;
  border-radius: 5px;
  background: #15100b;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 236, 190, 0.08);
  overflow: hidden;
}

.skip-power-fill {
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(21, 16, 11, 0.9) 9px 11px),
    linear-gradient(90deg, #4f8c4a, #e2b64f 60%, #d9603b);
}

.skip-power-zone {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 2px solid #ffd25a;
  border-right: 2px solid #ffd25a;
  background: rgba(255, 210, 90, 0.22);
}

.skip-power-cursor {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 3px;
  margin-left: -1.5px;
  background: #fff4c0;
  box-shadow: 0 0 4px #fff4c0, 0 0 0 1px rgba(34, 26, 18, 0.8);
}

/* Winkel: kleine Seitenansicht */
.skip-angle { display: none; height: 74px; margin: 0 auto 2px; width: 92px; }
.skip-angle svg { display: block; overflow: visible; }
.sa-zone { fill: rgba(111, 207, 90, 0.35); stroke: #6fcf5a; stroke-width: 1; }
.sa-arc { stroke: #5c4a2c; stroke-width: 1; stroke-dasharray: 2 2; }
.sa-water { fill: #4f9ccc; }
.sa-needle line { stroke: #f6eace; stroke-width: 2; stroke-linecap: round; }
.sa-needle ellipse { fill: #a89c8a; stroke: #221a12; stroke-width: 1; }

#skip-hud[data-phase="angle"] .skip-angle { display: block; }
#skip-hud[data-phase="angle"] .skip-power,
#skip-hud[data-phase="angle"] .skip-label { display: none; }

/* Flug: nur Zähler, Bewertung und Hinweis */
#skip-hud[data-phase="flight"] { width: 150px; background: rgba(24, 19, 13, 0.7); }
#skip-hud[data-phase="flight"] .skip-power,
#skip-hud[data-phase="flight"] .skip-label,
#skip-hud[data-phase="flight"] .skip-angle,
#skip-hud[data-phase="flight"] .skip-stone { display: none; }
#skip-hud[data-phase="flight"] .skip-head { justify-content: center; }

.skip-count { font-size: 28px; line-height: 30px; color: #f2c75c; text-shadow: 0 2px 0 #221a12, 0 0 10px rgba(255, 210, 90, 0.35); }
.skip-count:empty { display: none; }
.skip-count.pop { animation: skip-pop 0.22s ease-out; }

.skip-rating { font-size: 13px; font-weight: 700; min-height: 16px; text-shadow: 0 1px 0 #221a12; }
.skip-rating:empty { display: none; }
.skip-rating[data-kind="perfect"] { color: #ffd25a; }
.skip-rating[data-kind="good"] { color: #9fe08a; }
.skip-rating[data-kind="ok"] { color: #f2e6c8; }
.skip-rating[data-kind="bad"] { color: #e8846a; }
.skip-rating.pop { animation: skip-pop 0.3s ease-out; }

.skip-hint { font-size: 11px; color: #c9bfa4; min-height: 13px; }

@keyframes skip-pop {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* Handy: schmaler, damit sie zwischen Aktionsknöpfe und Stick passt (SkipUI.place sucht den Platz; passt sie nicht,
   steht sie darüber) */
body.touch-device #skip-hud { width: 144px; padding: 7px 9px 6px; }
body.touch-device #skip-hud[data-phase="flight"] { width: 124px; }
body.touch-device #skip-hud .skip-head { font-size: 11px; gap: 4px; }
body.touch-device #skip-hud .skip-best { font-size: 10px; }

/* /css/market.css */
/* Markt unter Spielern (client/js/ui/MarketUI.js). Baut auf trade.css auf
   (.trade-box, .trade-btn, .trade-slot, .trade-qty-input) und den Reitern aus
   windows.css (.cat-tab). Alles im gezoomten HUD — vh/dvh daher durch --ui.
   Tippflächen ≥ 40 px (Handy), Anklickbares als <button> (Pad-Fokus). */

#market-window {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 16px));
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 2850;
}

#market-pick {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 16px));
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2950;
}

.market-box .trade-head h3 { flex: 1; }

/* Kontostand als GoldUI-Pille (client/css/gold.css) */
.market-gold { flex: none; display: flex; }

.market-tabs .cat-tab { flex: 1 0 auto; justify-content: center; font-size: 15px; min-height: 40px; }

.market-notice {
  font-size: 13px;
  line-height: 1.3;
  padding: 6px 10px;
  margin-bottom: 10px;
  border: 2px solid var(--brass-dark);
  border-radius: 10px;
  background: #232e25;
  color: var(--cream);
}

.market-notice.is-away {
  border-color: #7a3f3f;
  color: var(--muted);
}

.market-pane[hidden] { display: none; }

.market-searchbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.market-search {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 16px;               /* ≥ 16 px: iOS zoomt beim Tippen sonst hinein */
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 9px;
}

.market-sort { flex: none; min-width: 96px; }

/* Kategorien: umbrechende Reihe (nicht .cat-tabs — LB/RB gehören den Hauptreitern) */
.market-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.market-cats .cat-tab { min-height: 36px; }

.market-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.market-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  width: 100%;
  padding: 6px 10px;
  text-align: left;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #232e25;
  border: 2px solid var(--rar, var(--ink));
  border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

button.market-row { cursor: pointer; }
.market-row.is-mine { opacity: 0.7; }
.market-row.is-static { cursor: default; }

.market-row-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.market-row-name {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-row-sub {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-row-price {
  flex: none;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}

.market-cancel { flex: none; padding: 6px 10px; font-size: 13px; }

.market-bag { margin-bottom: 10px; }

.market-collect {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
}

.market-collect.has-gold { border-color: var(--brass); }
.market-collect-text { flex: 1; font-size: 14px; line-height: 1.3; }
.market-collect.has-gold .market-collect-text { color: var(--gold); font-weight: 700; }

.market-sold { display: flex; flex-direction: column; gap: 4px; }
.market-sold-row { font-size: 13px; color: var(--muted); }

/* Kauf-/Einstell-Wahl */
.market-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.market-pick-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}

.market-pick-desc strong { font-size: 16px; color: var(--cream); }

.market-pick-info { font-size: 14px; margin-bottom: 8px; }

.market-hist {
  font-size: 13px;
  line-height: 1.35;
  padding: 6px 10px;
  margin-bottom: 10px;
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 10px;
  color: var(--cream);
}

.market-hist-sales { color: var(--muted); margin-top: 2px; }

.market-stepper { margin-bottom: 10px; }
.market-stepper[hidden] { display: none; }

.market-step-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.market-step-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.market-num { width: 96px; }

.market-sum {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: 4px 0;
}

.market-msg {
  min-height: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--muted);
}

.market-msg.is-error { color: #e48a7a; }

#market-pick .trade-actions .trade-btn { flex: 1; }

/* Handy hochkant: Stepper kompakter */
@media (max-width: 420px) {
  .market-step-row .trade-step { padding: 8px; min-width: 42px; }
  .market-num { width: 72px; }
  .market-row-price { font-size: 15px; }
}

/* /css/homes.css */
/* Häuser im Oberdorf — Versteigerung (client/js/ui/HomesUI.js, docs/HOUSING.md).
   Fenster wie der Markt (.trade-box, market.css), Zeilen wie die Zettel am Aushang
   (.board-entry, board.css). Dieselbe Liste hängt im Aushang-Reiter „Homes“.
   Maße in px im gezoomten HUD — vh/dvh durch var(--ui). Tippflächen ≥ 40 px. */

#homes-window {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(600px, calc(100% - 16px));
  max-height: calc(100vh / var(--ui) - 24px);
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 2860;
}

#homes-bid {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 16px));
  max-height: calc(100vh / var(--ui) - 24px);
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 2960;
}

body.in-combat #homes-window,
body.in-combat #homes-bid { display: none !important; }

#homes-bid .trade-actions .trade-btn { flex: 1; }

.homes-bid-info p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cream);
  overflow-wrap: anywhere;
}

/* Reiter „Homes“ am Aushang: nur die Liste scrollt */
.board-homes {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}

.homes-me {
  background: #1d251c;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.homes-me p {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.homes-me b { color: var(--gold); }

.homes-me .homes-rules { color: var(--muted); font-size: 13px; }

.homes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.homes-size {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.homes-row-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.homes-row-text { flex: 1 1 auto; min-width: 0; }

.homes-row-text p {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--cream);
  overflow-wrap: anywhere;
}

.homes-amt { color: var(--gold); white-space: nowrap; }

.homes-status.is-good { color: #a8dd8a; }
.homes-status.is-bad { color: #e48a7a; }

.homes-bid-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.homes-row.is-leading { box-shadow: inset 0 0 0 2px #6fae55; }
.homes-row.is-outbid { box-shadow: inset 0 0 0 2px #b8412f; }
.homes-row.is-owner { box-shadow: inset 0 0 0 2px var(--brass); background: #353f2c; }
.homes-row.is-sold { opacity: 0.85; }

/* Handy hochkant: Knopf unter den Text */
@media (max-width: 420px) {
  .homes-row-body { flex-wrap: wrap; }
  .homes-bid-btn { flex: 1 1 100%; }
  .homes-size { display: none; }
}

/* Unterhalt fürs eigene Haus (Schritt 6): Zeile mit zwei Knöpfen, am Handy umbrechend, Tippfläche ≥ 44 px */
.homes-upkeep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.homes-upkeep .homes-upkeep-btn { min-height: 44px; padding: 4px 12px; }

/* Exposé (Daniel 14.10.: „wie beim Immobilienmakler“): Bild links mit Banner, rechts Lage, Fläche, Ausstattung,
   Preis und Gebot. Am Handy das Bild über die volle Breite. */
.homes-card { display: flex; gap: 12px; align-items: stretch; }
.homes-photo { position: relative; flex: 0 0 42%; max-width: 260px; }
.homes-pic {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  background: #4f8a3f;
  image-rendering: pixelated;
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.homes-banner {
  position: absolute; left: 6px; top: 6px;
  padding: 2px 8px; border-radius: 6px;
  background: #b8412f; color: #fff4e0; border: 2px solid var(--ink);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.homes-banner.is-sold { background: #4a6a3a; }
.homes-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.homes-where { opacity: 0.85; font-size: 13px; margin: 0; }
.homes-facts { list-style: none; margin: 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.homes-facts li { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 233, 168, 0.25); }
.homes-upkeep-note { opacity: 0.75; font-size: 12px !important; }
.homes-card .homes-bid-btn { align-self: flex-start; min-height: 44px; margin-top: 4px; }
@media (max-width: 560px) {
  .homes-card { flex-direction: column; }
  .homes-photo { flex: 0 0 auto; max-width: none; }
  /* ganzes Haus samt Dach (das unterscheidet sie am meisten), Rand in Wiesenfarbe */
  .homes-pic { height: 150px; min-height: 0; object-fit: contain; object-position: center; background: #4f8a3f; }
  .homes-card .homes-bid-btn { align-self: stretch; }
}

/* /css/loot.css */
/* Beutel am Todesort (client/js/ui/DeathBagUI.js) und Lagertruhe im Dorf
   (client/js/ui/StorageUI.js). Grundformen aus trade.css (.trade-box, -slot,
   -btn). Alles im gezoomten HUD — vh/dvh daher durch --ui. Tippflächen ≥ 40 px. */

.loot-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 16px));
  max-height: calc(100dvh / var(--ui) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  z-index: 2950;
}

#death-notice { z-index: 3150; width: min(420px, calc(100% - 16px)); }

.loot-notice-text {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.35;
}

.loot-grid { max-height: calc(46dvh / var(--ui)); overflow-y: auto; }

.loot-grid .trade-slot { min-height: 64px; }

.trade-gold[hidden] { display: none; }

/* Lagertruhe: Rucksack | Truhe nebeneinander, am Handy untereinander (trade.css ≤ 420 px) */
#storage-window { width: min(680px, calc(100% - 16px)); }
#storage-window .trade-side h4 { text-transform: none; letter-spacing: 0; }
#storage-window .loot-grid { max-height: calc(40dvh / var(--ui)); }
#storage-qty { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 16px)); z-index: 3000; }
#storage-window .trade-btn[hidden] { display: none; }
@media (max-width: 560px) {
  #storage-window .trade-sides { grid-template-columns: 1fr; }
  #storage-window .loot-grid { max-height: calc(24dvh / var(--ui)); }
}

/* Zimmer in der Taverne (docs/HOUSING.md): Miete bei Bram (LodgingUI), Einrichten (Furnish.js) */
#lodging-window { width: min(420px, calc(100% - 16px)); }
.lodging-status { font-size: 16px; line-height: 1.35; }
.lodging-note { margin: 6px 0 10px; opacity: 0.85; font-size: 14px; line-height: 1.35; }
#lodging-window .trade-btn[hidden] { display: none; }

/* „Furnish“ nur im eigenen Zimmer, oben in der Mitte (frei von Statusbox links und Karte rechts) */
.furnish-btn {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2900;
  min-height: 44px;
  padding: 6px 16px;
  background: var(--panel-solid);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 4px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-pixel);
  font-size: 16px;
  cursor: pointer;
}
.furnish-btn[hidden] { display: none; }
/* Handy (Daniel 14.10.: „oben echt ungünstig“ — dort liegen Statusbox und Quest-Leiste): unten in der Mitte,
   zwischen Stick-Feld und Aktionsknöpfen, mit dem Daumen erreichbar */
body.touch-device .furnish-btn {
  top: auto;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* Leiste beim Aufstellen: unten in der Mitte, Rahmen im Raum bleibt sichtbar */
.furnish-place {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(460px, calc(100% - 16px));
  z-index: 2950;
  padding: 8px;
  background: var(--panel-solid);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--font-pixel);
}
.furnish-place[hidden] { display: none; }
.furnish-label { font-size: 14px; line-height: 1.3; margin: 0 2px 6px; text-align: center; }
.furnish-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.furnish-row .trade-btn { min-height: 44px; min-width: 44px; }
.furnish-arrow { padding: 0 10px; }

/* Treppe der Taverne: wessen Zimmer? (eigenes + Gruppe) */
#room-picker { width: min(380px, calc(100% - 16px)); }
.room-picker-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.room-picker-list .trade-btn { min-height: 44px; text-align: left; }

/* Treppe der Taverne: wessen Zimmer? (eigenes + Gruppe) */
#room-picker { width: min(380px, calc(100% - 16px)); }
.room-picker-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.room-picker-list .trade-btn { min-height: 44px; text-align: left; }

/* Briefkasten (MailUI): Briefe als aufklappbare Karten; ungelesen mit Punkt, Anhang mit Geschenk */
#mail-window { width: min(520px, calc(100% - 16px)); }
.mail-list { display: flex; flex-direction: column; gap: 8px; }
.mail-card { border: 2px solid var(--ink); border-radius: 10px; background: rgba(0, 0, 0, 0.22); overflow: hidden; }
.mail-card.is-unread { box-shadow: inset 0 0 0 2px var(--brass); }
.mail-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px;
  background: none; border: 0; color: var(--cream); font-family: var(--font-pixel); text-align: left; cursor: pointer; }
.mail-dot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: transparent; }
.mail-card.is-unread .mail-dot { background: #e8b84a; }
.mail-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mail-meta b { font-size: 15px; overflow-wrap: anywhere; }
.mail-meta small { opacity: 0.75; font-size: 12px; }
.mail-gift { font-size: 18px; }
.mail-body { padding: 0 12px 10px 30px; }
.mail-body p { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.mail-claim { min-height: 44px; margin-top: 6px; }
.mail-claimed { color: #a8dd8a; }
.menu-tile { position: relative; }
.menu-badge { position: absolute; top: 4px; right: 6px; min-width: 18px; padding: 0 4px; border-radius: 9px;
  background: #c0392b; color: #fff; font-size: 12px; line-height: 18px; text-align: center; }
.menu-badge[hidden] { display: none; }

/* ── Haltbarkeit (shared/Durability.ts, InventoryUI.wearBar) und Reparieren bei Gareth (RepairUI) ── */
.inventory-slot, .equip-slot { position: relative; }
.dur-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
  pointer-events: none;
}
.dur-bar i { display: block; height: 100%; background: #8fcf6a; }
.dur-bar.is-low i { background: #e8c34a; }
.dur-bar.is-crit i, .dur-bar.is-broken i { background: #ff5a4f; }
.item-broken {
  position: absolute;
  top: 2px;
  right: 3px;
  padding: 0 3px;
  border-radius: 3px;
  background: #ff5a4f;
  color: #2a0c0c;
  font-size: 8px;
  font-weight: 700;
  line-height: 11px;
  pointer-events: none;
}
.inventory-slot.is-broken .item-icon, .equip-slot.is-broken .item-icon { filter: grayscale(0.7) brightness(0.8); }
.item-context-menu .item-crafted-by { padding: 3px 15px 5px; font-size: 11px; color: #c9b88a; font-style: italic; border-bottom: 1px solid #555; }
.item-context-menu .item-durability { padding: 5px 15px; font-size: 11px; color: #b9d79a; border-bottom: 1px solid #555; }
.item-context-menu .item-durability.is-low { color: #e8c34a; }
.item-context-menu .item-durability.is-crit, .item-context-menu .item-durability.is-broken { color: #ff8a7a; }

#repair-window { width: min(480px, calc(100% - 16px)); }
.repair-intro { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.repair-list { display: flex; flex-direction: column; gap: 8px; max-height: calc(50dvh / var(--ui)); overflow-y: auto; }
.repair-empty { padding: 16px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.repair-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}
.repair-row.is-broken { box-shadow: inset 0 0 0 2px #ff5a4f; }
.repair-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.repair-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repair-main small { font-size: 11px; color: var(--muted); }
.repair-main .dur-bar { position: relative; left: 0; right: 0; bottom: 0; height: 6px; }
.repair-row.is-low .dur-bar i { background: #e8c34a; }
.repair-row.is-crit .dur-bar i, .repair-row.is-broken .dur-bar i { background: #ff5a4f; }
.repair-one, .repair-all {
  min-height: 40px;
  min-width: 72px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--brass-dark, #7a5a2a);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 13px;
  cursor: pointer;
}
.repair-one:disabled, .repair-all:disabled { opacity: 0.5; cursor: default; }
.repair-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.repair-gold { flex: none; display: flex; }
.repair-gold[hidden] { display: none; }

/* Verbessern (Feedback #71, RepairUI Reiter „Improve“) */
.repair-tabs { margin: 0 0 8px; }
.upgrade-row .repair-main small b { font-weight: 700; }
.uc-need { color: #ff8a7a !important; }
.uc-costs { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12px; }
.uc-cost { display: inline-flex; align-items: center; gap: 2px; color: var(--cream); white-space: nowrap; }
.uc-cost.is-missing, .uc-cost.is-missing .gold-cost { color: #ff8a7a; }
.uc-cost .item-icon, .uc-cost canvas, .uc-cost img { flex: none; }
.upgrade-row.is-up { animation: uc-glow 1.2s ease-out; }
.upgrade-row.is-crack { animation: uc-crack 0.45s ease-in-out; box-shadow: inset 0 0 0 2px #ff5a4f; }
@keyframes uc-glow { 0% { box-shadow: 0 0 0 0 rgba(242, 199, 92, 0.9), inset 0 0 18px rgba(242, 199, 92, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(242, 199, 92, 0), inset 0 0 0 rgba(242, 199, 92, 0); } }
@keyframes uc-crack { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .upgrade-row.is-up, .upgrade-row.is-crack { animation: none; } }
/* Bestätigung liegt im Fenster über der Liste (Pad: #upgrade-confirm steht in GamepadInput.OVERLAYS vor dem Fenster) */
.upgrade-confirm {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(12, 9, 6, 0.72);
  border-radius: inherit;
}
.upgrade-confirm[hidden] { display: none; }
.uc-card {
  width: min(340px, 100%);
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--panel, #2a2117);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  text-align: center;
}
.uc-card h4 { margin: 0 0 6px; font-family: var(--font-pixel); font-size: 16px; color: var(--cream); overflow-wrap: anywhere; }
.uc-card p { margin: 4px 0; font-size: 13px; color: var(--muted); }
.uc-card .uc-step { font-size: 15px; color: var(--cream); }
.uc-card .uc-chance { font-family: var(--font-pixel); font-size: 18px; color: var(--gold, #f2c75c); }
.uc-card .uc-fail.is-risk { color: #ff8a7a; }
.uc-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.uc-btns button {
  min-height: 44px;
  min-width: 96px;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 14px;
  cursor: pointer;
}
.uc-back { background: rgba(0, 0, 0, 0.3); color: var(--cream); }
.uc-try { background: var(--brass-dark, #7a5a2a); color: var(--cream); }
.uc-try:disabled { opacity: 0.6; cursor: default; }

/* /css/chat.css */
/* Chat (ChatUI.js, docs/CHAT.md) — Handy und PC.
   Eingeklappt: 💬-Knopf + höchstens drei kurze Zeilen, die nach 15 s
   verblassen; die Welt darunter bleibt antippbar (pointer-events: none).
   Offen: Blatt im HUD-Stil mit Reitern, Verlauf, Kanal-Knopf und Eingabe.
   Schrift überall die Pixel-Schrift des HUD (vorher: Eingabe und Knöpfe in
   Systemschrift, Zeitstempel grau-kursiv — sah nach einem anderen Spiel aus). */

#chat-container {
  --chat-other: #cfe3ff;       /* Namen anderer (wie über der Figur) */
  --chat-me: var(--gold);
  --chat-party: #c9a0ff;       /* wie Gruppenrahmen und Namen der Gruppe */
  --chat-local: #9bd46a;
  --chat-whisper: #ffa8dc;
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  width: 380px;
  max-width: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-pixel);
  color: var(--cream);
  pointer-events: none;
}

#chat-container button,
#chat-container input {
  font-family: var(--font-pixel);
}

#chat-container .chat-head,
#chat-input-container {
  display: none;
}

.chat-body {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 0;
}

/* Handy: Knopf oben (direkt unter der Minikarte), Zeilen daneben nach unten */
body.touch-device .chat-body {
  align-items: flex-start;
}

/* kein Platz über Aktionsknopf/Stick (kleines Handy, viele Gruppenrahmen): ganz weg, Menü → Chat bleibt */
#chat-container.no-room:not(.chat-open) {
  visibility: hidden;
}

/* ── 💬-Knopf (eingeklappt) ───────────────────────── */
.chat-btn {
  --u: 26px;
  pointer-events: auto;
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chat-btn:active {
  transform: translateY(2px);
}

/* Sprechblase (eigene Pixel per CSS). Vorher der Brief aus dem Icon-Satz —
   am Handy für „Feedback“ gehalten (Feedback 29.09.: „✉-Knopf“). */
.chat-glyph {
  position: relative;
  display: block;
  width: 22px;
  height: 15px;
  margin-top: -3px;
  border-radius: 5px;
  background: var(--cream);
  box-shadow: 0 2px 0 var(--ink);
}

.chat-glyph::after {
  content: '';
  position: absolute;
  left: 4px;
  bottom: -5px;
  border-style: solid;
  border-width: 6px 5px 0 0;
  border-color: var(--cream) transparent transparent transparent;
}

.chat-glyph::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  width: 3px;
  height: 3px;
  background: var(--ink);
  box-shadow: 5px 0 0 var(--ink), 10px 0 0 var(--ink);
}

.chat-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #e0493f;
  color: #fff;
  font: 700 11px/18px var(--font-pixel);
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
  pointer-events: none;
}

.chat-badge[hidden] {
  display: none;
}

.chat-badge.is-mention {
  background: var(--gold);
  color: var(--ink);
}

/* ── Zeilen ───────────────────────────────────────── */
#chat-messages {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-message {
  max-width: 100%;
  margin: 0 0 3px;
  overflow-wrap: anywhere;       /* lange Wörter/Links umbrechen statt überstehen */
}

.chat-message.is-other-tab,
.chat-message.is-muted {
  display: none !important;
}

.chat-time {
  color: var(--muted);
  opacity: 0.55;
  font-size: 11px;
  margin-right: 5px;
}

.chat-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  vertical-align: 1px;
}

.tag-local { background: var(--chat-local); }
.tag-party { background: var(--chat-party); }
.tag-whisper { background: var(--chat-whisper); }

.chat-username {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: 700 13px/1.35 var(--font-pixel);
  color: var(--chat-other);
  text-shadow: inherit;
}

button.chat-username {
  cursor: pointer;
}

button.chat-username:hover {
  text-decoration: underline;
}

.chat-username.is-me { color: var(--chat-me); }
.chat-username.is-mate,
.ch-party .chat-username { color: var(--chat-party); }
.ch-whisper .chat-username { color: var(--chat-whisper); }

/* Level klein vor dem Namen */
.chat-lvl {
  display: inline-block;
  min-width: 16px;
  margin-right: 4px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--ink);
  background: var(--brass);
  vertical-align: 1px;
}

.chat-colon {
  color: var(--muted);
  margin-right: 4px;
}

.chat-text { color: var(--cream); }
.ch-whisper .chat-text { color: #ffd6ee; }
.chat-at { color: #9fd3ff; }
.chat-at.is-me {
  color: var(--ink);
  background: var(--gold);
  border-radius: 3px;
  padding: 0 2px;
}

/* Links bleiben Text (nicht anklickbar, docs/CHAT.md) — nur erkennbar gemacht */
.chat-link {
  color: var(--muted);
  text-decoration: underline dotted;
}

.chat-message.is-mention {
  background: rgba(242, 199, 92, 0.16);
  box-shadow: inset 3px 0 0 var(--gold);
  padding-left: 6px;
  border-radius: 3px;
}

.chat-system { color: var(--brass); }
.ch-event .chat-system { color: var(--muted); }
.ch-party.kind-sys .chat-system { color: var(--chat-party); }
.chat-help .chat-system { white-space: pre-line; }
.chat-divider { align-self: center; opacity: 0.7; font-size: 11px; }

.chat-count {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 7px;
  font-size: 11px;
  line-height: 14px;
  color: var(--ink);
  background: var(--muted);
}

/* Kurzfassung langer Zeilen: nur eingeklappt (dort stehen drei Zeilen über der Welt) */
#chat-container .chat-short { display: none; }

/* ── Eingeklappt ──────────────────────────────────── */
#chat-container:not(.chat-open) .chat-message {
  display: none;
}

#chat-container:not(.chat-open) .chat-message.in-peek {
  display: block;
  margin: 0 0 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(13, 19, 15, 0.62);
  text-shadow: 0 1px 0 #000;
  transition: opacity 0.6s;
}

#chat-container:not(.chat-open) .chat-message.is-mention.in-peek {
  background: rgba(60, 48, 16, 0.78);
}

#chat-container:not(.chat-open) .chat-message.is-fading {
  opacity: 0;
}

#chat-container:not(.chat-open) .chat-time,
#chat-container:not(.chat-open) .has-short {
  display: none;
}

#chat-container:not(.chat-open) .chat-short {
  display: inline;
}

#chat-container:not(.chat-open) .chat-system.chat-short {
  white-space: normal;
}

/* ── Offen ────────────────────────────────────────── */
#chat-container.chat-open {
  pointer-events: auto;
  z-index: 2600;
  width: 440px;
  max-height: calc(100dvh / var(--ui) - 32px);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 4px 0 rgba(0, 0, 0, 0.35);
}

#chat-container.chat-open .chat-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.chat-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.chat-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  padding: 0 4px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chat-tab.is-on {
  color: var(--gold);
  background: #3b4a33;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.chat-tab .chat-badge {
  top: -8px;
  right: -4px;
}

#chat-container.chat-open .chat-btn {
  display: none;
}

#chat-container.chat-open .chat-body {
  flex: 1 1 auto;
}

#chat-container.chat-open #chat-messages {
  display: block;
  height: 260px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 2px;
  box-sizing: border-box;
}

#chat-container.chat-open #chat-messages::-webkit-scrollbar { width: 8px; }
#chat-container.chat-open #chat-messages::-webkit-scrollbar-thumb { background: var(--brass-dark); border-radius: 4px; }

#chat-container.chat-open #chat-input-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.chat-chan {
  flex: none;
  height: 40px;
  min-width: 58px;
  padding: 0 8px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.chat-chan.ch-world,
.qc-chan.ch-world.is-on { background: var(--brass); }
.chat-chan.ch-local,
.qc-chan.ch-local.is-on { background: var(--chat-local, #9bd46a); }
.chat-chan.ch-party,
.qc-chan.ch-party.is-on { background: var(--chat-party, #c9a0ff); }

#chat-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  color: var(--cream);
  font-size: 15px;
  outline: none;
}

#chat-input:focus {
  box-shadow: inset 0 0 0 2px var(--brass);
}

#chat-input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

#chat-input.is-command {
  color: var(--gold);
}

.chat-quick-btn,
#chat-send {
  flex: none;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  color: var(--cream);
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}

.chat-quick-btn {
  width: 40px;
  padding: 0;
  background: #2a352c;
  font-size: 20px;
  line-height: 1;
}

#chat-send {
  padding: 0 12px;
  background: var(--brass-dark);
  font-size: 14px;
  font-weight: 700;
}

.chat-quick-btn:active,
#chat-send:active,
.chat-chan:active,
.chat-tab:active {
  transform: translateY(2px);
}

/* ── Handy ────────────────────────────────────────── */

/* Eingeklappt unter der Minikarte (samt überstehendem Heimkehr-Knopf, +14 px) */
body.touch-device #chat-container {
  top: calc(var(--hud-bottom) + var(--minimap) + 14px);
  bottom: auto;
  left: 8px;
  width: min(250px, calc(100% - 100px));
  max-width: none;
}

body.touch-device #chat-messages {
  font-size: 12px;
}

/* Eingeklappt am Handy: nur die neueste Zeile (ChatUI.PEEK_TOUCH), einzeilig
   mit „…“ — umgebrochen reichte sie bis in die Bildmitte (UI-Audit 29.09.) */
body.touch-device #chat-container:not(.chat-open) .chat-message.in-peek {
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.touch-device #chat-container:not(.chat-open) .chat-message.in-peek .chat-short {
  white-space: nowrap;
}

body.touch-device .chat-username {
  font-size: 12px;
}

/* Offen: Blatt oben über die ganze Breite; Höhe nach dem sichtbaren Bereich
   (visualViewport, ChatUI.updateViewport) — so bleibt die Eingabe über der
   Bildschirmtastatur. --chat-vvh/--chat-vvtop sind Bildschirm-px, also / --ui. */
body.touch-device #chat-container.chat-open {
  top: calc(var(--chat-vvtop, 0px) / var(--ui) + 8px + env(safe-area-inset-top));
  left: 8px;
  width: min(560px, calc(100% - 16px));
  max-height: calc(var(--chat-vvh, 100dvh) / var(--ui) - 16px - env(safe-area-inset-top));
}

/* Höhe nach Inhalt, höchstens 42 % des sichtbaren Bereichs — vorher immer 42 %, mit einer Zeile
   ein großer leerer Kasten (Feedback #26) */
body.touch-device #chat-container.chat-open #chat-messages {
  height: auto;
  max-height: calc(var(--chat-vvh, 100dvh) / var(--ui) * 0.42);
  min-height: 80px;
  font-size: 13px;
}

/* Beim Tippen (Bildschirmtastatur offen, ChatUI.watchViewport): Blatt = sichtbarer Bereich, die
   Nachrichten füllen den Rest, das Feld sitzt direkt über der Tastatur */
body.touch-device #chat-container.chat-open.chat-typing {
  height: calc(var(--chat-vvh, 100dvh) / var(--ui) - 16px - env(safe-area-inset-top));
}

body.touch-device #chat-container.chat-open.chat-typing .chat-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.touch-device #chat-container.chat-open.chat-typing #chat-messages {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  min-height: 0;
}

body.touch-device .chat-tab {
  height: 40px;
}

/* Fremde Namen: Tippfläche ≥ 40 px (Innenabstand am Namen, die Zeile hält den Platz frei) → Spieler-Popup */
body.touch-device #chat-container.chat-open .chat-message.kind-msg {
  min-height: 40px;
  box-sizing: border-box;
  padding-top: 11px;
  padding-bottom: 11px;
  margin: 0;
  box-shadow: inset 0 -1px 0 rgba(217, 184, 110, 0.12);   /* Trennlinie ohne Rand: Tippfläche bleibt volle 40 px */
}

body.touch-device #chat-container.chat-open button.chat-username {
  padding: 12px 4px;
  margin: -12px -4px;
  min-width: 44px;             /* kurze Namen („Al“ + Level) auch 40 px breit */
  box-sizing: border-box;
  text-align: left;
}

/* Tasten-Hinweis unter dem Feld: nur offen, nur mit Tastatur (am Handy gibt es kein Esc) */
#chat-hint { display: none; }

body:not(.touch-device) #chat-container.chat-open #chat-hint {
  display: block;
  flex: none;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 14px;
  overflow-wrap: anywhere;
}

#chat-hint.is-whisper { color: var(--chat-whisper, #ff9ecb); }

body.touch-device #chat-input {
  font-size: 16px; /* unter 16px zoomt der Browser beim Fokus die Seite */
}

/* ── Schnellauswahl ───────────────────────────────── */
#quick-chat { z-index: 3060; }

.qc-sheet {
  width: min(460px, calc(100% - 16px));
}

.qc-chans {
  display: flex;
  gap: 6px;
}

.qc-chan {
  flex: 1;
  min-height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--muted);
  font: 700 14px var(--font-pixel);
  cursor: pointer;
}

.qc-chan.is-on {
  color: var(--ink);
}

.qc-chan[hidden] { display: none; }

.qc-phrases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.qc-emotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}

.qc-btn {
  min-height: 44px;
  padding: 4px 6px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--cream);
  font: 600 15px var(--font-pixel);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  cursor: pointer;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

.qc-emote {
  font-size: 22px;
  line-height: 1;
}

.qc-btn:active,
.qc-chan:active {
  transform: translateY(2px);
}

/* Ping bei @Erwähnung / Flüstern */
.toast-chat {
  border-left-color: var(--gold);
  color: var(--cream);
}

/* /css/title.css */
/* Titelszene (08.10.2026, „der Anfang braucht einen Wow-Effekt“, client/js/ui/TitleScene.js): hinter Ladebild,
   Anmeldung und Figurenwahl liegt das echte Dorf aus eigener Grafik (client/img/title/village.png, npm run bake:art
   -- --only=title) im Abendlicht — langsame Kamerafahrt, flackernde Laternen, Glühwürmchen, großes Logo.
   Nur solange body.pre-game; danach weg. Ohne Bewegung bei prefers-reduced-motion. */

#title-scene {
  position: fixed;
  inset: 0;
  z-index: 5000;
  overflow: hidden;
  background: #101814;
  pointer-events: none;
}

body:not(.pre-game) #title-scene { display: none; }

.ts-world {
  position: absolute;
  left: 0; top: 0;
  background: url(/img/title/village.png) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform-origin: 0 0;
  animation: ts-pan 70s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ts-pan {
  from { transform: translate(var(--px0, 0px), var(--py0, 0px)); }
  to { transform: translate(var(--px1, 0px), var(--py1, 0px)); }
}

/* Lichter liegen ÜBER dem Abend-Schleier (sonst dunkelt er sie mit ab), gleiche Größe und Fahrt wie die Welt */
.ts-world.ts-glow { background: none; }

/* Abend: oben violett-blau, unten warm; dunkler Rand */
.ts-dusk {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(52, 50, 120) 0%, rgb(78, 74, 140) 50%, rgb(120, 86, 110) 100%);
  mix-blend-mode: multiply;
}

.ts-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(4, 6, 14, 0.8) 100%);
}

.ts-light {
  position: absolute;
  width: 0; height: 0;
}

.ts-light::before {
  content: '';
  position: absolute;
  left: calc(var(--r) * -1); top: calc(var(--r) * -1);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 130, 0.95) 0%, rgba(255, 170, 70, 0.45) 30%, rgba(255, 140, 50, 0.12) 55%, transparent 72%);
  mix-blend-mode: screen;
  animation: ts-flicker 2.6s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

@keyframes ts-flicker {
  0% { opacity: 0.85; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.06); }
  70% { opacity: 0.78; transform: scale(0.97); }
  100% { opacity: 0.95; transform: scale(1.03); }
}

.ts-fly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #e8ff9a;
  box-shadow: 0 0 6px 2px rgba(220, 255, 140, 0.7);
  opacity: 0;
  animation: ts-fly var(--t, 9s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

@keyframes ts-fly {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  50% { transform: translate(var(--fx, 30px), var(--fy, -20px)); opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(var(--fx, 30px) * 1.6), calc(var(--fy, -20px) * 0.4)); }
}

/* Logo */
.ts-logo {
  position: absolute;
  left: 50%;
  top: max(18px, 7vh);
  top: max(18px, 7dvh);
  transform: translateX(-50%);
  text-align: center;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
  white-space: nowrap;
}

.ts-logo h1 {
  margin: 0;
  font-size: clamp(46px, 13vw, 104px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #f2c75c;
  background: linear-gradient(180deg, #fff2b0 0%, #f2c75c 45%, #c98a2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #221a12) drop-shadow(0 0 18px rgba(255, 190, 90, 0.35));
  animation: ts-logo-in 1.2s ease-out both;
}

.ts-logo p {
  margin: 8px 0 0;
  font-size: clamp(13px, 3.4vw, 18px);
  color: #e8dcc0;
  text-shadow: 0 2px 0 #221a12;
  animation: ts-logo-in 1.2s 0.35s ease-out both;
}

@keyframes ts-logo-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Ladebild, Anmeldung und Figurenwahl liegen über der Szene: durchsichtig statt eigener dunkler Fläche */
#boot-splash { background: transparent !important; }
#boot-splash .bs-title { display: none; }
#boot-splash .bs-bar, #boot-splash .bs-text { top: auto !important; bottom: 18%; }
#boot-splash .bs-text { bottom: calc(18% - 30px); text-shadow: 0 2px 0 #221a12; }
#auth-overlay, #create-overlay { background: transparent !important; }
/* Abstand unter dem Logo — aber nie so viel, dass das Fenster unten herausragt (UI 200 % auf 1080p: Login-Knopf
   abgeschnitten, UI-Audit 11.10.2026). ~400 UI-px Fensterhöhe: dann rückt es hoch, notfalls über das Logo.
   Das Blatt ist mitgezoomt: Bildschirmhöhe durch --ui teilen (wie überall im HUD). */
#auth-overlay { align-items: flex-start; padding-top: max(8px, min(calc(max(18px, 7vh) + clamp(46px, 13vw, 104px) + 64px), calc(100dvh / var(--ui, 1) - 412px))); box-sizing: border-box; overflow-y: auto; }
#auth-overlay #auth-title { display: none; }
#auth-container, #create-overlay > * { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); }
/* Figurenwahl offen: das Anmeldefenster darunter nicht durchscheinen lassen (beide Ebenen sind jetzt durchsichtig) */
body.creating #auth-container { visibility: hidden; }

/* sehr flach (Handy quer): Logo kleiner, Formular höher */
@media (max-height: 520px) {
  .ts-logo h1 { font-size: 40px; }
  .ts-logo p { display: none; }
  #auth-overlay { padding-top: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-world, .ts-light::before, .ts-fly { animation: none; }
  .ts-fly { opacity: 0.8; }
}

/* ---- Startbildschirm für Neue (16.10.2026): EIN großer Knopf ins Spiel, Fortschritt darunter ----
   index.html StartScreen (vor allen Skripten), AuthUI.quickPlay. Der bisherige Weg (Name, Figur) steckt hinter
   „Customize hero“; solange der Startblock steht, bleiben Reiter, Formular und Hinweis weg. */
#auth-container.is-start #auth-tabs,
#auth-container.is-start #auth-form,
#auth-container.is-start #auth-hint,
#auth-container.is-start #auth-continue-row,
#auth-container.is-start #auth-loading { display: none !important; }
#auth-container:not(.is-start) #auth-start { display: none; }
#auth-start { display: grid; gap: 12px; text-align: center; font-family: 'Pixelify Sans', system-ui, sans-serif; }
#auth-start .as-event {
  justify-self: center; padding: 4px 12px; border-radius: 999px; font-size: 14px;
  background: #3a2210; border: 2px solid #f08a24; color: #ffd08a;
}
#auth-start .play-now {
  min-height: 64px; padding: 12px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 28px; font-weight: 700; letter-spacing: 0.04em; color: #221a12;
  background: linear-gradient(180deg, #ffe48a 0%, #f2c75c 55%, #c98a2c 100%);
  border: 3px solid #221a12; box-shadow: 0 4px 0 #6b4a1c, 0 0 22px rgba(255, 190, 90, 0.35);
  animation: play-pulse 1.8s ease-in-out infinite;
}
#auth-start .play-now:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b4a1c; }
#auth-start .play-now:focus-visible { outline: 3px solid #fff2b0; outline-offset: 3px; }
#auth-start .play-now.is-wanted { animation: none; font-size: 22px; filter: saturate(0.85); }
@keyframes play-pulse { 0%, 100% { box-shadow: 0 4px 0 #6b4a1c, 0 0 12px rgba(255, 190, 90, 0.25); } 50% { box-shadow: 0 4px 0 #6b4a1c, 0 0 28px rgba(255, 190, 90, 0.6); } }
#auth-start .as-progress { display: grid; gap: 4px; justify-items: center; }
#auth-start .as-bar { width: 100%; height: 10px; border-radius: 5px; background: #221a12; border: 2px solid #8c6a35; overflow: hidden; box-sizing: border-box; }
#auth-start .as-bar i { display: block; height: 100%; width: 0; background: #d9b86e; transition: width 0.3s linear; }
#auth-start #as-pct { font-size: 13px; color: #b7c2a8; }
#auth-start .as-pitch { margin: 0; font-size: 14px; color: #e8dcc0; }
#auth-start .as-alt { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; color: #8c7a5a; }
#auth-start .as-link {
  min-height: 40px; padding: 6px 10px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; color: #d9b86e; text-decoration: underline; text-underline-offset: 3px;
}
#auth-start .as-link:focus-visible { outline: 2px solid #f2c75c; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { #auth-start .play-now { animation: none; } }
@media (max-width: 400px) { #auth-start .as-alt span { display: none; } #auth-start .as-alt { flex-direction: column; gap: 0; } }

/* /css/intro.css */
/* Ankunft mit der Kutsche (client/js/scenes/Intro.js): Kinobalken, Textzeile, Ruf des Ältesten. Während der Szene
   sind alle Anzeigen weg (body.cinematic) — nur das Spielbild und diese Ebene. Feste px (body > * wird gezoomt). */

body.cinematic > *:not(#game-container):not(#intro-overlay):not(script) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* nur beim Einblenden nach der Szene weich (sonst änderte das alle Fenster) */
body.cinematic-fade > * { transition: opacity 0.7s; }

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  pointer-events: auto;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
}

#intro-overlay.is-done { opacity: 0; pointer-events: none; }

.io-bar {
  position: absolute;
  left: 0; right: 0;
  height: calc(11vh / var(--ui, 1));
  height: calc(11dvh / var(--ui, 1));
  background: #07090b;
  transition: transform 0.6s ease;
}

.io-top { top: 0; transform: translateY(-100%); }
.io-bottom { bottom: 0; transform: translateY(100%); }
#intro-overlay.is-on .io-bar { transform: none; }
#intro-overlay.is-done .io-bar.io-top { transform: translateY(-100%); }
#intro-overlay.is-done .io-bar.io-bottom { transform: translateY(100%); }

.io-caption {
  position: absolute;
  left: 50%; top: calc(16vh / var(--ui, 1));
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
}

.io-caption.is-on { opacity: 1; }
.io-caption h2 { margin: 0; font-size: 40px; color: #f2c75c; text-shadow: 0 3px 0 #221a12, 0 0 16px rgba(255, 190, 90, 0.4); letter-spacing: 0.06em; }
.io-caption p { margin: 8px 0 0; font-size: 17px; color: #f2e6c8; text-shadow: 0 2px 0 #221a12; }

.io-dialog {
  position: absolute;
  left: 50%;
  bottom: calc(11vh / var(--ui, 1) + 16px);
  bottom: calc(11dvh / var(--ui, 1) + 16px);
  transform: translate(-50%, 12px);
  width: min(520px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 12px 16px;
  border: 2px solid #221a12;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #8c6a35, 0 6px 20px rgba(0, 0, 0, 0.5);
  background: rgba(24, 19, 13, 0.94);
  color: #f2e6c8;
  font-size: 16px;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s;
}

.io-dialog.is-on { opacity: 1; transform: translate(-50%, 0); }
.io-dialog b { display: block; color: #f2c75c; font-size: 14px; margin-bottom: 3px; }

.io-skip {
  position: absolute;
  right: 14px;
  bottom: calc(11vh / var(--ui, 1) - 26px);
  bottom: calc(11dvh / var(--ui, 1) - 26px);
  font-size: 12px;
  color: #8f8775;
}

/* /css/hints.css */
/* Hinweise im richtigen Moment (client/js/ui/Hints.js) und ruhige Anzeigen für neue Helden. */

#hint-pill {
  position: fixed;
  left: 50%;
  bottom: calc(118px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1550;
  max-width: calc(100% - 40px);
  padding: 8px 14px;
  border: 2px solid #221a12;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px #8c6a35, 0 4px 14px rgba(0, 0, 0, 0.45);
  background: rgba(24, 19, 13, 0.9);
  color: #f6eace;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
  font-size: 15px;
  text-align: center;
  pointer-events: none;
}

#hint-pill[hidden] { display: none; }
#hint-pill.pop { animation: hint-in 0.35s ease-out; }
#hint-pill::before { content: '✦ '; color: #f2c75c; }
body.in-combat #hint-pill { display: none; }

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Ruhige Anzeigen: bis zum ersten Gespräch mit dem Ältesten keine Minikarte, Heimkehr, Chat */
body.hud-new #minimap,
body.hud-new #minimap-zoom,
body.hud-new #recall-btn,
body.hud-new #chat-container { opacity: 0; pointer-events: none; }
body #minimap, body #minimap-zoom, body #recall-btn, body #chat-container { transition: opacity 0.8s; }

/* „Controls“-Wand nur noch auf Wunsch (Taste H) */
#instructions { display: none; }
body.show-controls #instructions { display: block !important; opacity: 1 !important; }

/* /css/tips.css */
/* Tipps beim Warten (client/js/ui/LoadingTips.js, Liste shared/Tips.ts): Startbild und „Reconnecting…“.
   Beide Elemente hängen direkt an body bzw. #boot-splash → per --ui gezoomt; Breiten darum durch var(--ui). */

.bs-tip,
#net-tip {
  box-sizing: border-box;
  width: min(520px, calc(100vw / var(--ui, 1) - 32px));
  padding: 8px 12px;
  font: 15px/1.35 'Pixelify Sans', system-ui, sans-serif;
  color: #e8dcc0;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  background: rgba(18, 24, 19, 0.78);
  border: 2px solid #221a12;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
}

.bs-tip b,
#net-tip b {
  margin-right: 6px;
  color: #f2c75c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.bs-tip.is-in,
#net-tip.is-in { animation: tip-in 0.5s ease-out 0.4s both; }

@keyframes tip-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Startbild: knapp unter „Loading the world…“ (title.css: Balken 18 % von unten, Text 30 px tiefer, mittig) */
#boot-splash .bs-tip {
  top: calc(82% + 52px);
  transform: translateX(-50%);
  max-height: calc(18% - 60px);
  overflow: hidden;
}

/* Verbindung weg: unter der Pille, über dem gedimmten Spielbild */
#net-tip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100vw / var(--ui, 1) - 32px));
  z-index: 19500;
}

#net-tip[hidden],
.bs-tip[hidden] { display: none; }

/* Sehr niedrige Fenster (Handy quer): kein Platz unter dem Ladebalken */
@media (max-height: 520px) {
  #boot-splash .bs-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-tip.is-in, #net-tip.is-in { animation: none; opacity: 1; }
}

/* /css/desk.css */
/* PC-Ansicht (Daniel 12.10.: „auf PC sieht es aus wie ein Handyspiel“). Alles hier gilt nur ohne
   body.touch-device — Handy und Tablet bleiben, wie sie sind. Ein Touch-Laptop wechselt mit der Eingabe
   (MobileControls.setTouchMode). Aufbau:
   - unten mittig die Leiste (DeskHud.js) mit Tasten-Abzeichen statt ☰ mit Kacheln
   - darüber die Aktion „E Talk“ als Hinweis-Pille statt runder Daumenknopf
   - Spielerkarte breiter, XP mit Zahl; Minikarte größer
   - Menü (Esc) nur noch Einstellungen — die Fenster stehen in der Leiste */

/* ── Leiste ───────────────────────────────────────── */
#desk-bar {
  display: none;
}

body:not(.touch-device):not(.pre-game):not(.in-combat) #desk-bar {
  display: flex;
}

#desk-bar {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 1450;
  gap: 4px;
  padding: 5px 6px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  font-family: var(--font-pixel);
}

.desk-btn {
  --u: 26px;
  position: relative;
  width: 62px;
  height: 52px;
  padding: 4px 0 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 2px solid transparent;
  border-radius: 7px;
  background: rgba(13, 19, 15, 0.55);
  color: var(--cream);
  font: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}

.desk-btn:hover {
  background: rgba(255, 240, 200, 0.1);
  border-color: var(--brass-dark);
}

.desk-btn:active {
  transform: translateY(1px);
}

.desk-btn.is-open {
  background: rgba(242, 199, 92, 0.18);
  border-color: var(--gold);
}

.desk-label {
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  text-shadow: 0 1px 0 var(--ink);
  white-space: nowrap;
}

.desk-btn:hover .desk-label,
.desk-btn.is-open .desk-label {
  color: var(--cream);
}

.desk-btn kbd {
  position: absolute;
  top: -7px;
  right: -4px;
  min-width: 18px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 4px;
  background: #2b2f2c;
  border: 1px solid #6c6455;
  box-shadow: 0 2px 0 var(--ink);
  color: var(--cream);
  font: 700 10px/15px var(--font-pixel);
  text-align: center;
}

/* zu schmal für Mitte + Chat: rechts unten (DeskHud.place) */
#desk-bar.at-right {
  left: auto;
  right: 10px;
  transform: none;
}

/* Pad am PC: Tasten-Abzeichen der Tastatur passen nicht */
body.pad-active #desk-bar kbd {
  display: none;
}

/* Kopf wie auf der Spielerkarte (DeskHud.mark kopiert das Bild) */
.desk-face {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background-color: #4d6a4a;
  background-repeat: no-repeat;
  background-size: 187px 187px;
  background-position: -10px -5px;
  image-rendering: pixelated;
}

/* Karte: gefaltetes Blatt aus CSS-Pixeln (kein Kartensymbol im Icon-Satz) */
.desk-map {
  position: relative;
  width: 24px;
  height: 20px;
  margin-top: 3px;
  background:
    linear-gradient(90deg, #d8c48f 0 33%, #c1ab72 33% 66%, #d8c48f 66%);
  border: 2px solid var(--ink);
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px #8c6a35;
}

.desk-map::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 4px;
  width: 4px;
  height: 4px;
  background: var(--hp);
  box-shadow: -5px 5px 0 -1px #5f8f4e;
}

.desk-btn .burger {
  margin: 10px 0 0;
  transform: scale(0.75);
}

/* ☰ oben rechts: am PC übernimmt die Leiste */
body:not(.touch-device) #menu-btn {
  display: none;
}

/* Menü am PC (ohne Pad): Kacheln stehen in der Leiste — bleibt Einstellungen, Feedback, Konto */
body:not(.touch-device):not(.pad-active) #game-menu .menu-grid {
  display: none;
}

/* ── Aktion: Hinweis-Pille über der Leiste ────────── */
body:not(.touch-device):not(.pad-active) #action-cluster {
  left: 50%;
  right: auto;
  bottom: 86px;
  transform: translateX(-50%);
}

body:not(.touch-device):not(.pad-active) #mobile-btn-interact {
  --u: 24px;
  width: auto;
  height: 40px;
  padding: 0 14px 0 40px;
  flex-direction: row;
  gap: 8px;
  border-radius: 20px;
}

body:not(.touch-device):not(.pad-active) #mobile-btn-interact .hud-btn-label {
  font-size: 15px;
}

/* Taste E links in der Pille statt oben rechts am Kreis */
body:not(.touch-device):not(.pad-active) #mobile-btn-interact::after {
  top: 50%;
  left: 8px;
  right: auto;
  transform: translateY(-50%);
  min-width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #2b2f2c;
  border: 1px solid #6c6455;
  font: 700 13px/22px var(--font-pixel);
}

/* Weiter (Tab): kleine Pille links daneben */
body:not(.touch-device):not(.pad-active) #mobile-btn-next {
  width: auto;
  height: 32px;
  bottom: 4px;
  padding: 0 10px 0 38px;
  border-radius: 16px;
}

body:not(.touch-device):not(.pad-active) #mobile-btn-next::after {
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  border-radius: 5px;
  background: #2b2f2c;
  border: 1px solid #6c6455;
  height: 20px;
  line-height: 18px;
}

/* Leiste rechts: Pille über deren Mitte, nicht über dem Chat */
body.desk-bar-right:not(.touch-device):not(.pad-active) #action-cluster {
  left: auto;
  right: 160px;
  transform: none;
}

/* ── Spielerkarte ─────────────────────────────────── */
body:not(.touch-device) #stats-container {
  width: 280px;
}

body:not(.touch-device) #hud-profile {
  grid-template-columns: 48px 1fr auto;
}

body:not(.touch-device) #hud-profile .hud-face {
  width: 48px;
  height: 48px;
  background-size: 346px 346px;
  background-position: -19px -10px;
}

body:not(.touch-device) #player-name {
  font-size: 16px;
}

body:not(.touch-device) #health-bar-container {
  height: 18px;
}

body:not(.touch-device) #health-text {
  font-size: 12px;
}

/* XP mit Zahl: am PC ist Platz dafür */
body:not(.touch-device) #exp-bar-container {
  height: 13px;
}

body:not(.touch-device) #exp-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  white-space: nowrap;
  z-index: 1;
}

/* ── Minikarte größer (Heimkehr/Zoom/Chat rechnen mit --minimap) ── */
body:not(.touch-device) {
  --minimap: 148px;
}

/* ── Chat: bleibt unten links, über der Leiste frei ── */
body:not(.touch-device) #chat-container {
  bottom: 12px;
}

/* ── Quest-Leiste: ☰ ist weg, also ganz nach oben rechts ── */
body:not(.touch-device) #quest-tracker {
  top: 10px;
  width: 250px;
}

/* Einsteiger-Hinweis über der Aktions-Pille */
body:not(.touch-device) #hint-pill {
  bottom: 136px;
}

/* ── Beutel: rechts angedockt, Welt in der Mitte bleibt frei ── */
.inventory-slot.is-empty {
  display: none;
}

body:not(.touch-device) #inventory-container {
  top: 10px;
  right: 10px;
  left: auto;
  transform: none;
  --pop-base: translate(0, 0);
  width: 400px;
  max-height: calc(100dvh / var(--ui) - 96px);
  padding: 12px;
}

body:not(.touch-device) #inventory-header h3 {
  font-size: 20px;
}

body:not(.touch-device) #inventory-close {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

/* Ausrüstung als eine Reihe */
body:not(.touch-device) #inventory-equipment {
  /* zwei Reihen: Waffe, Nebenhand, Rüstung / Schmuck 1–3 (sechs nebeneinander brachen die Beschriftung um) */
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

body:not(.touch-device) .equip-slot {
  min-height: 74px;
  padding: 6px 3px;
  gap: 3px;
}

body:not(.touch-device) .equip-slot .slot-label {
  font-size: 9px;
}

body:not(.touch-device) .equip-slot .slot-item {
  font-size: 11px;
  line-height: 1.1;
}

body:not(.touch-device) #inventory-stats {
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

/* Raster: 5 feste Felder je Reihe, leere Plätze sichtbar */
body:not(.touch-device) #inventory-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-height: none;
  padding: 6px;
}

body:not(.touch-device) .inventory-slot {
  min-height: 70px;
}

body:not(.touch-device) .inventory-slot.is-empty {
  display: block;
  background: rgba(35, 46, 37, 0.45);
  border: 2px dashed rgba(140, 106, 53, 0.35);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

/* ── Kampf: breit statt Handy-Spalte ──────────────────
   Links die eigene Gruppe (und das Protokoll darüber), rechts Ultimate und die Aktionsleiste mit
   Tasten 1–5 — wie eine Hotbar. Hinweise und Übung oben über die ganze Breite. */
body:not(.touch-device) #combat-ui .cb-bottom {
  display: grid;
  width: min(1000px, 100%);
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  grid-template-areas:
    "tut tut"
    "hint hint"
    "log ult"
    "log actions"
    ". flee";
  column-gap: 14px;
  row-gap: 8px;
  align-items: end;
}

body:not(.touch-device) #combat-ui .cb-tut { grid-area: tut; width: min(640px, 100%); }
body:not(.touch-device) #combat-ui .cb-hint { grid-area: hint; font-size: 16px; }
body:not(.touch-device) #combat-ui .cb-log { grid-area: log; font-size: 15px; align-self: end; }
body:not(.touch-device) #combat-ui .cb-ult { grid-area: ult; }
body:not(.touch-device) #combat-ui .cb-actions { grid-area: actions; }
body:not(.touch-device) #combat-ui .cb-flee { grid-area: flee; justify-self: end; align-self: start; }

/* Drei Gegner: Gruppe unten links wie früher (CombatScene.renderDom hängt sie um) */
body:not(.touch-device) #combat-ui .cb-bottom .cb-party { grid-area: log; flex-wrap: wrap; align-self: end; }
body:not(.touch-device) #combat-ui .cb-bottom .cb-party ~ .cb-log { display: none; }
/* Karten oben am PC lesbar: in 1080p waren Name, LP und Absicht neben der Aktionsleiste winzig (Playbot 17.10.).
   Ganze Kopfzeile größer — fitBoss misst die Kartenunterkante und rückt große Bosse selbst darunter. */
@media (min-height: 700px) {
  body:not(.touch-device) #combat-ui .cb-head { zoom: 1.25; }
}
/* Gruppe oben rechts (combat.css „Schlanke Karten“), am PC etwas größer */
body:not(.touch-device) #combat-ui .cb-head .cb-player.is-me { width: 190px; }
body:not(.touch-device) #combat-ui .cb-head .cb-player:not(.is-me) { width: 160px; }
body:not(.touch-device) #combat-ui:not(.three-foes) .cb-enemies .cb-enemy { width: 250px; }

body:not(.touch-device) #combat-ui .cb-actions button {
  --u: 32px;
  height: 74px;
  font-size: 13px;
}

/* Tasten-Abzeichen im Kampf: eckig wie auf der Leiste */
body:not(.touch-device):not(.pad-active) #combat-ui button[data-a]::before {
  border-radius: 4px;
  background: #2b2f2c;
  border: 1px solid #6c6455;
}

/* ── Laden, Handwerk, Markt am PC (13.10.2026, Daniel: „Markt, Laden und Handwerk am PC schöner“) ──
   Vorher schmale Handy-Spalten (560–640 px) mitten im Bild, der Markt lag über der Leiste unten.
   Jetzt breit, die Höhe endet über #desk-bar (Mitte 40 px höher, unten 120 px frei), und zweispaltig:
   Laden = Waren links, Auswahl mit großem Bild rechts; Handwerk und Markt = Karten/Zeilen in zwei Spalten.
   JS setzt display inline (block/none) — daher :not([style*="none"]) + !important für grid/flex. */
body:not(.touch-device) #shop-container,
body:not(.touch-device) #crafting-container,
body:not(.touch-device) #market-window {
  top: calc(50% - 40px);
  width: min(980px, calc(100% - 32px));
  max-height: calc(100dvh / var(--ui) - 120px);
}

/* Laden */
body:not(.touch-device) #shop-container:not([style*="none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-rows: auto auto auto auto 1fr;   /* höhere Auswahl-Spalte verlängert nur die Warenzeile */
  grid-template-areas: "head head" "msg msg" "tabs side" "cats side" "items side";
  align-content: start;   /* Zeilen so hoch wie ihr Inhalt; wenig Ware = kleines Fenster */
  column-gap: 14px;
  overflow-y: auto;   /* sehr niedrige Ansicht (1080 bei UI 200 %): ganzes Fenster scrollt */
}

body:not(.touch-device) #shop-header { grid-area: head; }
body:not(.touch-device) #shop-npc-message { grid-area: msg; }
body:not(.touch-device) #shop-tabs { grid-area: tabs; align-self: start; }
body:not(.touch-device) #shop-container > .cat-tabs { grid-area: cats; align-self: start; }

body:not(.touch-device) #shop-items {
  grid-area: items;
  /* Fensterhöhe minus Kopf, Satz, Reiter (~280 px): scrollt in sich, Fenster bleibt über der Leiste */
  max-height: max(230px, calc(100dvh / var(--ui) - 400px));
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-bottom: 0;
}

/* Verkaufen: keine Auswahl-Spalte (jede Karte hat ihre Knöpfe) → Waren über die ganze Breite */
body:not(.touch-device) #shop-container:has(#shop-item-details[style*="none"]) {
  grid-template-areas: "head head" "msg msg" "tabs tabs" "cats cats" "items items";
  grid-template-rows: auto;   /* ohne Seitenspalte nichts zu strecken; 1fr würde bei UI 200 % die Karten zusammenschieben */
}

body:not(.touch-device) #shop-container:has(#shop-item-details[style*="none"]) #shop-items {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

body:not(.touch-device) .shop-item {
  min-height: 64px;
  padding: 8px 10px;
}

body:not(.touch-device) .shop-item .item-name {
  font-size: 14px;
  padding-right: 26px;   /* Platz für „x99“ oben rechts */
}

body:not(.touch-device) .shop-item .item-price { font-size: 13px; }

body:not(.touch-device) .shop-item:not(.out-of-stock):hover {
  background: #2c3a2c;
  cursor: pointer;
}

body:not(.touch-device) .shop-sell-item { cursor: default; }
body:not(.touch-device) .shop-item .sell-btn-row { justify-content: flex-start !important; }

body:not(.touch-device) .sell-btn-inline {
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
}

body:not(.touch-device) #shop-item-details {
  grid-area: side;
  margin-top: 0;
}

body:not(.touch-device) #shop-item-details:not([style*="none"]) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 12px 14px;
  min-height: 0;
  overflow-y: auto;
}

body:not(.touch-device) #shop-item-icon:not(:empty) {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  flex: none;
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px var(--brass-dark);
}

body:not(.touch-device) #shop-item-icon:not(:empty) > * { transform: scale(1.1); }

body:not(.touch-device) #shop-items > .shop-pad-hint { grid-column: 1 / -1; }
body:not(.touch-device) #shop-item-desc { line-height: 1.4; }

/* nichts gewählt: Hinweis mittig statt leerer Spalte */
body:not(.touch-device) #shop-item-details:has(#shop-item-icon:empty) { justify-content: center; }
body:not(.touch-device) #shop-item-icon:empty + #shop-item-name { color: var(--muted); font-size: 15px; }

body:not(.touch-device) #shop-action-btn {
  margin-top: auto;
  width: 100%;
  min-height: 44px;
  flex: none;
  position: sticky;   /* niedrige Ansicht (UI 200 %): Spalte scrollt, Kaufen bleibt sichtbar */
  bottom: 0;
}

/* Handwerk: Rezepte als Karten in zwei Spalten, Liste scrollt, Kopf bleibt */
body:not(.touch-device) #crafting-container:not([style*="none"]) {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}

body:not(.touch-device) #crafting-container > .cat-tabs { flex: none; flex-wrap: wrap; }

body:not(.touch-device) #crafting-recipes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
}

body:not(.touch-device) #crafting-recipes > .crafting-section,
body:not(.touch-device) #crafting-recipes > .crafting-empty { grid-column: 1 / -1; }

body:not(.touch-device) .crafting-recipe {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body:not(.touch-device) .crafting-recipe .craft-actions { margin-top: auto; }
body:not(.touch-device) .crafting-recipe:hover { border-color: var(--brass-dark); }
body:not(.touch-device) .recipe-desc { margin: 4px 0; }

/* Markt: Angebote und eigene Angebote in zwei Spalten, mehr Fächer je Reihe beim Verkaufen */
body:not(.touch-device) #market-window .market-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.touch-device) #market-window button.market-row:hover { background: #2c3a2c; }

body:not(.touch-device) #market-window .market-searchbar { max-width: 620px; }

/* /css/player-popup.css */
/* ── Spieler-Menü (#player-popup, PlayerPopup in PartyUI.js) ──────────────
   Kleine Spielerkarte statt sieben gleicher Knöpfe (Daniel 15.10.2026): Kopf mit Gesicht, Level-Abzeichen
   (wie die eigene Statusbox) und Zustand, Hauptaktionen als Kacheln mit Symbol, Leises (Mute) klein unten.
   Handy: Blatt unten (höchstens 480 px breit), PC: kompakt, neben der Figur (.is-anchored) oder mittig. */

.pp-sheet {
  width: min(360px, calc(100% - 16px));
  gap: 10px;
  background: var(--panel-solid);   /* nicht durchscheinend: Schrift der Welt dahinter störte unter den Kacheln */
}

body.touch-device .pp-sheet {
  max-width: 480px;
}

/* Neben der Figur: Welt bleibt gut sichtbar, die Karte gehört sichtbar zu ihr */
#player-popup.is-anchored { background: rgba(8, 12, 9, 0.22); }
.pp-sheet.is-anchored {
  position: fixed;
  margin: 0;
}

/* ── Kopf: Spielerkarte ── */
.pp-head { gap: 8px; }
.menu-sheet > .pp-head { padding-bottom: 4px; }

.pp-card {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(217, 184, 110, 0.14), rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  font-family: var(--font-pixel);
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}

.pp-card.is-link { cursor: pointer; }
.pp-card.is-link:hover,
.pp-card.is-link:focus-visible { box-shadow: inset 0 0 0 1px var(--brass); outline: none; }
.pp-card.is-link:active { transform: translateY(1px); }

/* Gesicht: Ausschnitt aus dem ersten Bild des 4×4-Laufblatts, 3-fach (wie #hud-face) */
.pp-face {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background-color: #4d6a4a;
  background-repeat: no-repeat;
  background-size: 288px 288px;
  background-position: -12px -6px;
  box-shadow: inset 0 0 0 1px var(--brass-dark), inset 0 -12px 0 rgba(0, 0, 0, 0.18);
  image-rendering: pixelated;
}

/* Ohne Figur in Sicht (aus dem Chat): Fragezeichen statt Gesicht */
.pp-face.is-empty {
  background-image: none;
}
.pp-face.is-empty::before {
  content: '?';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: rgba(246, 234, 206, 0.55);
}

.pp-lvl {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--ink);
  background: var(--gold);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.pp-lvl[hidden] { display: none; }

.pp-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.pp-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pp-status {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.pp-status > span { white-space: nowrap; }   /* umbrechen nur zwischen den Teilen */
.pp-status .is-party { color: #c9a0ff; }    /* = PARTY_COLOR */
.pp-status .is-busy { color: #ff9a8a; }
.pp-status .is-muted { color: #e0a24a; }

.pp-more {
  display: none;
  flex: none;
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
}

.pp-card.is-link .pp-more { display: block; }

/* ── Kacheln ── */
.pp-actions {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 8px;
}

.pp-actions[hidden] { display: none; }

.pp-tile {
  --u: 32px;
  min-height: 78px;
  padding: 8px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pp-tile:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--brass); }
.pp-tile:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.4);
}

.pp-tl {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
}

.pp-sub {
  font-size: 11px;
  line-height: 1.15;
  color: #e8c48a;
  text-align: center;
}

.pp-sub:empty { display: none; }

/* Geht gerade nicht: gedämpft, Grund darunter — bleibt aber antippbar (nennt den Grund) und für das Pad erreichbar */
.pp-tile.is-off {
  background: #232b24;
  cursor: help;
}
.pp-tile.is-off .ui-icon,
.pp-tile.is-off .pp-tl { opacity: 0.45; }

.pp-tile.is-nope { animation: pp-nope 0.28s ease-out; }
@keyframes pp-nope {
  20% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  80% { transform: translateX(-1px); }
}

.pp-why {
  margin-top: -2px;
  font-size: 13px;
  text-align: center;
  color: #e8c48a;
}

.pp-why[hidden],
.pp-why:empty { display: none; }

/* ── Leise Aktionen (Mute) und Zurück: klein, abgesetzt ── */
.pp-foot {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -4px;
}

.pp-foot[hidden] { display: none; }

.pp-quiet {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 13px var(--font-pixel);
  color: var(--muted);
  text-decoration: underline dotted rgba(183, 194, 168, 0.6);
  text-underline-offset: 3px;
  cursor: pointer;
}

.pp-quiet:hover,
.pp-quiet:focus-visible { color: var(--cream); background: rgba(0, 0, 0, 0.2); outline: none; }

/* ── Wahl (Duel: normal / gleiche Stufe) ── */
.pp-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pp-choice[hidden] { display: none; }

.pp-ch-head {
  --u: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: var(--gold);
}

.pp-ch-head b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-ch-note {
  margin-top: -4px;
  font-size: 12px;
  color: var(--muted);
}

.pp-opt {
  min-height: 56px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  text-align: left;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  cursor: pointer;
}

.pp-opt:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--brass); }
.pp-opt:active { transform: translateY(2px); }
.pp-opt b { font-size: 15px; }
.pp-opt small { font-size: 12px; color: var(--muted); }

.pp-back { align-self: center; }

/* /css/event.css */
/*
 * Hollow Nights — Event-Fenster (client/js/ui/HollowNightsUI.js, docs/HOLLOW_NIGHTS.md).
 * Herbstlich-schaurig: Nachtviolett, Kürbisorange, Laternenschein. Maße in px (UI-Zoom über --ui),
 * Höhen in dvh / var(--ui). Handy: eine Spalte Aufgaben, zwei Spalten Belohnungen; PC: drei bis vier.
 */
#event-window {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 6, 16, 0.66);
  padding: 16px;
}
#event-window[hidden] { display: none; }
body.in-combat #event-window { display: none !important; }
body.touch-device #event-window { padding: 10px; }

.hn-sheet {
  --hn-orange: #f08a24;
  --hn-orange-hi: #ffb04a;
  --hn-violet: #2a1a3c;
  --hn-violet-2: #3a2452;
  --hn-violet-3: #5a3a7a;
  --hn-glow: rgba(255, 160, 60, 0.35);
  width: min(760px, 100%);
  height: min(820px, calc(100vh / var(--ui) - 32px));
  height: min(820px, calc(100dvh / var(--ui) - 32px));
  max-height: calc(100vh / var(--ui) - 32px);
  max-height: calc(100dvh / var(--ui) - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--cream);
  font-family: var(--font-pixel);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #7a4a1c, 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 60px rgba(240, 138, 36, 0.18), 0 12px 40px rgba(0, 0, 0, 0.6);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(240, 138, 36, 0.28), transparent 60%),
    linear-gradient(180deg, #2e1c40 0, #1e1428 100%);
}

/* ── Kopf ── */
.hn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 6px;
  flex: none;
}
.hn-crest {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 176, 74, 0.45) 0, rgba(255, 120, 30, 0.12) 55%, transparent 72%);
  animation: hn-flicker 2.4s ease-in-out infinite;
}
@keyframes hn-flicker { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(1.18); } 60% { filter: brightness(0.94); } }
.hn-px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.hn-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hn-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a6e8; }
.hn-title {
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--hn-orange-hi);
  text-shadow: 0 2px 0 #4a1c08, 0 0 18px rgba(255, 140, 40, 0.5);
}
.hn-head .menu-x { flex: none; }

.hn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 14px 10px;
  flex: none;
}
.hn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 14px;
  background: rgba(20, 12, 28, 0.7);
  border: 2px solid var(--hn-violet-3);
  white-space: nowrap;
}
.hn-chip small { font-size: 12px; color: #d8c4ec; margin-left: 2px; white-space: normal; }
.hn-chip-embers { border-color: #b8641c; background: linear-gradient(180deg, #4a2410, #2e160a); font-size: 15px; }
.hn-chip-embers b { color: var(--hn-orange-hi); font-size: 17px; }
.hn-chip-phase.is-night { border-color: #8a6ad0; background: linear-gradient(180deg, #2c2058, #1a1438); white-space: normal; }
.hn-chip-phase.is-day { border-color: #8a7a4a; white-space: normal; }
.hn-chip-charm { border-color: #c8a04a; color: #ffe8a8; }
.hn-chip-stored { border-color: #d9b86e; color: #ffe8a8; background: rgba(90, 60, 20, 0.55); white-space: normal; border-radius: 14px; max-width: 100%; }   /* Handy: umbrechen statt abschneiden */
.hn-ember-ico { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.hn-ember-ico > * { width: 20px !important; height: 20px !important; }

/* ── Reiter ── */
.hn-tabs.cat-tabs {
  flex: none;
  padding: 6px 12px;
  gap: 6px;
  border-top: 2px solid rgba(240, 138, 36, 0.35);
  border-bottom: 2px solid rgba(240, 138, 36, 0.35);
  background: rgba(14, 8, 20, 0.5);
}
.hn-tabs .cat-tab {
  flex: 1 1 0;
  min-height: 42px;
  font-size: 15px;
  justify-content: center;
  background: linear-gradient(180deg, #3a2452, #2a1a3c);
  border-color: #5a3a7a;
  color: #e8dcf4;
}
.hn-tabs .cat-tab em { background: #f08a24; color: #2a1406; }
.hn-tabs .cat-tab.active { background: linear-gradient(180deg, #8a4a14, #5a2c0c); border-color: var(--hn-orange); color: #fff2dc; }
.hn-tabs .cat-tab i { font-style: normal; margin-right: 4px; }

/* ── Inhalt ── */
.hn-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--hn-violet-3) transparent;
  overscroll-behavior: contain;
}
.hn-panel[hidden] { display: none; }
.hn-intro { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #e8dcf4; }
.hn-intro b { color: var(--hn-orange-hi); }
.hn-foot { margin: 14px 2px 0; font-size: 13px; line-height: 1.4; color: #b8a8cc; }
.hn-empty { padding: 24px 8px; text-align: center; color: #c8b8dc; font-size: 15px; }

/* Aufgaben */
.hn-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.hn-task {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(58, 36, 82, 0.9), rgba(38, 24, 54, 0.9));
  border: 2px solid var(--hn-violet-3);
  box-shadow: inset 0 0 18px rgba(240, 138, 36, 0.08);
}
.hn-task.is-done { border-color: #6a9a4a; }
.hn-task.is-soon { opacity: 0.62; border-style: dashed; background: rgba(30, 20, 42, 0.8); }
.hn-task-art {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 150, 50, 0.3), rgba(20, 12, 28, 0.85) 70%);
  border: 2px solid #1a1020;
}
.hn-task-art .ui-icon { width: 36px; height: 36px; }
.hn-task-art canvas { max-width: 100%; max-height: 100%; }
.hn-soon-mark { font-size: 30px; font-weight: 700; color: #8a7aa8; }
.hn-task-body { flex: 1 1 auto; min-width: 0; }
.hn-task-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.hn-task h4 { margin: 0; font-size: 17px; color: var(--hn-orange-hi); }
.hn-task.is-soon h4 { color: #c8b8dc; }
.hn-task p { margin: 0 0 6px; font-size: 14px; line-height: 1.38; color: #ece2f6; }
.hn-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #2a3a20; border: 1px solid #6a8a4a; white-space: nowrap; }
.hn-tag.is-night { background: #2a2050; border-color: #8a6ad0; }
.hn-tag.is-once { background: #3a2a14; border-color: #a8782c; }
.hn-rate { display: block; font-size: 12px; color: #c9a6e8; margin-bottom: 6px; }
.hn-progress {
  font-size: 14px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(10, 6, 14, 0.55);
  border-left: 3px solid var(--hn-orange);
}
.hn-progress b { color: var(--hn-orange-hi); }

/* Belohnungen */
.hn-rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.hn-reward {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 10px 10px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(58, 36, 82, 0.95), rgba(32, 20, 46, 0.95));
  border: 2px solid var(--hn-violet-3);
  min-width: 0;
}
.hn-reward.is-ready { border-color: var(--hn-orange); box-shadow: 0 0 0 1px rgba(255, 160, 60, 0.35), 0 0 22px var(--hn-glow); }
.hn-reward.is-owned { border-color: #6a9a4a; }
.hn-reward.rar-legendary { background: linear-gradient(180deg, rgba(92, 64, 24, 0.95), rgba(40, 24, 18, 0.95)); }
.hn-reward-art {
  height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-radius: 9px;
  background:
    radial-gradient(70% 60% at 50% 70%, rgba(255, 150, 60, 0.25), transparent 70%),
    repeating-linear-gradient(0deg, #5c3a24 0 6px, #4a2e1c 6px 8px);
  border: 2px solid #1a1020;
}
.hn-reward-art > * { max-width: 100%; }
.hn-reward h4 { margin: 0 0 2px; font-size: 16px; color: #fff2dc; line-height: 1.2; }
.hn-reward.rar-legendary h4 { color: #ffd77a; }
.hn-reward-kind { font-size: 12px; color: #c9a6e8; margin-bottom: 6px; }
.hn-reward p { margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: #ddd0ea; flex: 1 1 auto; }
.hn-reward-foot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hn-price { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; color: var(--hn-orange-hi); }
.hn-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: #140c1c; border: 1px solid #000; overflow: hidden; }
.hn-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c8601c, #ffb04a); }
.hn-buy {
  min-height: 42px;
  border-radius: 9px;
  border: 2px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: #2a1406;
  background: linear-gradient(180deg, #ffc060, #e07a24);
  box-shadow: 0 3px 0 #6a300c;
}
.hn-buy:hover:not(:disabled) { filter: brightness(1.08); }
.hn-buy.is-confirm { background: linear-gradient(180deg, #fff2a8, #ffc040); animation: hn-pulse 0.8s ease-in-out infinite; }
@keyframes hn-pulse { 50% { box-shadow: 0 3px 0 #6a300c, 0 0 14px rgba(255, 220, 120, 0.8); } }
.hn-buy:disabled { cursor: default; color: #b8a8cc; background: #2a1e38; box-shadow: none; border-color: #120a18; }
.hn-buy.is-owned { color: #c8f0a8; background: #24361c; }
.hn-owned-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #24361c;
  border: 1px solid #6a9a4a;
  color: #c8f0a8;
}
.hn-owned-badge.is-once { background: #4a3410; border-color: #d9a943; color: #ffe8a8; }

/* Rangliste */
.hn-ranklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hn-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(46, 30, 66, 0.9);
  border: 2px solid var(--hn-violet-3);
}
.hn-rank.is-me { border-color: var(--hn-orange); box-shadow: 0 0 14px var(--hn-glow); }
.hn-rank-n { flex: none; width: 34px; text-align: center; font-size: 18px; font-weight: 700; color: #c9a6e8; }
.hn-rank-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.hn-rank-name small { color: #b8a8cc; font-size: 12px; margin-left: 4px; }
.hn-rank-v { flex: none; font-size: 17px; font-weight: 700; color: var(--hn-orange-hi); }
.hn-rank-me { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(10, 6, 14, 0.6); font-size: 14px; border-left: 3px solid var(--hn-orange); }

/* Menü-Kachel, PC-Leiste, Aushang */
.menu-tile-event { border-color: #b8641c !important; }
.menu-event-ico { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255, 150, 50, 0.7)); }
.desk-btn .desk-emoji { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 5px rgba(255, 150, 50, 0.7)); }
.hn-board-banner {
  /* nicht stauchen: .board-news ist eine Flex-Spalte (am Handy lief der Text sonst über den Rahmen, 17.10.) */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #b8641c;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-pixel);
  color: var(--cream);
  background: radial-gradient(100% 140% at 0% 50%, rgba(240, 138, 36, 0.45), transparent 60%), linear-gradient(180deg, #3a2452, #22163a);
  box-shadow: 0 0 18px rgba(240, 138, 36, 0.25);
}
.hn-board-banner > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.hn-board-banner b { font-size: 17px; color: #ffb04a; }
.hn-board-banner small { font-size: 13px; color: #e2d4f0; }
.hn-board-glow { font-size: 30px; filter: drop-shadow(0 0 8px rgba(255, 150, 50, 0.9)); }
.hn-board-go { font-size: 28px; color: #ffb04a; }

/* Schmal (Handy hochkant) */
@media (max-width: 600px) {
  .hn-head { padding: 10px 10px 4px; gap: 8px; }
  .hn-crest { width: 46px; height: 46px; }
  .hn-crest canvas { width: 36px !important; height: 30px !important; }
  .hn-title { font-size: 24px; }
  .hn-chips { padding: 2px 10px 8px; }
  .hn-chip { font-size: 13px; min-height: 28px; padding: 2px 8px; }
  .hn-panel { padding: 10px 10px 14px; }
  .hn-tasks { grid-template-columns: 1fr; }
  .hn-task { padding: 10px; gap: 10px; }
  .hn-task-art { width: 50px; height: 50px; }
  .hn-rewards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hn-reward { padding: 8px; }
  .hn-reward-art { height: 84px; }
  .hn-reward p { font-size: 12px; }
  .hn-buy { font-size: 14px; }
}
@media (max-width: 370px) {
  .hn-reward-art canvas { transform: scale(0.85); transform-origin: bottom center; }
  .hn-tabs .cat-tab { font-size: 13px; }
}