/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@15.5.27_@types+node@22.20.5_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.27_@types+node@22.20.5_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* Grundlayout und Mobilansicht. Touch-Steuerung erscheint nur bei grobem Zeiger (Finger). */

html,
body {
  margin: 0;
  background: #111;
  color: #eee;
  font-family: system-ui;
}

a {
  color: #8fc7ff;
}
a:hover {
  color: #c4e1ff;
}

.link-button {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Spielseite --- */

.game-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
}

.game-shell {
  display: grid;
  justify-items: center;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  max-width: 720px;
  padding: 0 8px;
  box-sizing: border-box;
}

/* Spielbild mit Overlay und Hilfezeile */
.game-main {
  display: grid;
  justify-items: center;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
}

/* Bildschirm und Bedienelemente; auf dem Desktop nur der Bildschirm */
.game-stage {
  display: grid;
  grid-template-areas: "screen";
  justify-items: center;
  width: 100%;
}

/* Rahmen in Größe des Spielbilds; darin Bild und Overlay (GameHud) übereinander */
.game-frame {
  grid-area: screen;
  position: relative;
  /* Das Overlay richtet sich nach der Größe des Bilds (@container weiter unten) */
  container-type: size;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 3 / 2;
  background: #000;
}
/* Desktop: useDesktopZoom setzt Breite und Höhe ganzzahlig */
.game-frame[style] {
  max-width: none;
}

.game-screen {
  position: absolute;
  inset: 0;
}

/* Nur auf Touch-Geräten (siehe @media (pointer: coarse)) */
.touch-only {
  display: none;
}

.game-help {
  font-size: 12px;
  opacity: 0.6;
  margin: 0;
  text-align: center;
}

/* --- Touch-Steuerung --- */

.dpad,
.action-keys,
.pad-key {
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Auf dem Handy wertet iOS langes Drücken und schnelles Doppeltippen neben den Knöpfen sonst als
 * Markieren (Lupe, Kopieren-Menü, Bild sichern) oder Zoomen. Im Spiel gibt es nichts zu markieren;
 * nur Eingabefelder (Chat, Preise, Anmeldung) behalten Auswahl und Einfügen.
 */
@media (pointer: coarse) {
  .game-page,
  .game-page * {
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  .game-page {
    touch-action: manipulation;
  }
  .game-page img,
  .game-page canvas {
    -webkit-user-drag: none;
  }
  .game-page input,
  .game-page textarea {
    -moz-user-select: text;
         user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
  }
}

.pad-slot-dpad {
  grid-area: dpad;
}
.pad-slot-keys {
  grid-area: keys;
}

.dpad {
  position: relative;
  width: 132px;
  height: 132px;
}

.dpad-arm {
  position: absolute;
  background: #2b2f2d;
  border: 1px solid #454b48;
  box-sizing: border-box;
}
.dpad-up,
.dpad-down {
  left: 44px;
  width: 44px;
  height: 52px;
}
.dpad-up {
  top: 0;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
}
.dpad-down {
  bottom: 0;
  border-radius: 0 0 8px 8px;
  border-top: none;
}
.dpad-left,
.dpad-right {
  top: 44px;
  width: 52px;
  height: 44px;
}
.dpad-left {
  left: 0;
  border-radius: 8px 0 0 8px;
  border-right: none;
}
.dpad-right {
  right: 0;
  border-radius: 0 8px 8px 0;
  border-left: none;
}
/* Mittelstück, damit das Kreuz geschlossen wirkt */
.dpad::after {
  content: "";
  position: absolute;
  left: 44px;
  top: 44px;
  width: 44px;
  height: 44px;
  background: #2b2f2d;
}
.dpad[data-dir="up"] .dpad-up,
.dpad[data-dir="down"] .dpad-down,
.dpad[data-dir="left"] .dpad-left,
.dpad[data-dir="right"] .dpad-right {
  background: #4a524e;
}

.action-keys {
  display: flex;
  gap: 14px;
  align-items: center;
}

.pad-key {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid #6a3b4a;
  background: #8a2f4b;
  color: #f4dfe6;
  font: 700 20px system-ui;
  padding: 0;
}
.pad-key:active {
  background: #b23d61;
}
/* B mit eingeschalteten Turbotretern */
.pad-key-active {
  background: #2e7d4f;
  border-color: #4fbf7a;
  box-shadow: 0 0 10px rgba(79, 191, 122, 0.6);
}
/* A etwas höher als B, wie auf dem GBA */
.pad-key-a {
  transform: translateY(-18px);
}

@media (pointer: coarse) {
  .touch-only {
    display: inline;
  }
  .pad-slot.touch-only {
    display: flex;
  }
  .no-touch {
    display: none;
  }

  /* Hochformat: Bildschirm oben, darunter Steuerkreuz links und A/B rechts */
  .game-stage {
    grid-template-areas:
      "screen screen"
      "dpad keys";
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    align-items: center;
  }
  .pad-slot-dpad {
    justify-self: start;
    margin-left: 8px;
  }
  .pad-slot-keys {
    justify-self: end;
    margin-right: 8px;
    padding-top: 18px;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
  }
}

/*
 * Desktop: Bild in ganzzahligem Zoom so groß wie möglich (Größe setzt useDesktopZoom), auf
 * breiten Bildschirmen Status, Chat, Team und Tausch als Spalte rechts daneben.
 */
@media (pointer: fine) {
  .game-shell {
    max-width: none;
    padding: 8px;
  }
}

/*
 * Vollbild (useFullscreen; Knopf unter dem Bild, auf Touch-Geräten neben A/B): nur Bild und
 * Steuerung, mittig auf Schwarz. Dient zugleich als Ersatz, wo die Fullscreen-API fehlt (iPhone).
 */
html.game-fullscreen,
html.game-fullscreen body {
  overflow: hidden;
}
.game-fullscreen .game-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  align-content: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing: border-box;
}

/* Kleiner Knopf wie Start/Select auf dem GBA (Vollbild) */
.pad-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid #454b48;
  background: #2b2f2d;
  color: #cfd6d2;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pad-small:active {
  background: #4a524e;
}

/* Querformat auf dem Handy: Steuerkreuz und A/B links und rechts neben dem Bildschirm */
@media (pointer: coarse) and (orientation: landscape) {
  .game-shell {
    max-width: none;
  }
  .game-stage {
    grid-template-areas: "dpad screen keys";
    grid-template-columns: 1fr auto 1fr;
    column-gap: 12px;
  }
  /* Höhe so wählen, dass links und rechts je 150 px für die Knöpfe bleiben */
  .game-frame {
    width: auto;
    height: min(calc(100dvh - 16px), calc((100vw - 324px) / 1.5), 480px);
    max-width: none;
  }
  .action-keys {
    gap: 10px;
  }
  /* Die Knöpfe erklären sich selbst; so passt alles auf eine Bildschirmhöhe */
  .game-help {
    display: none;
  }
  .pad-slot-dpad {
    justify-self: center;
    margin-left: 0;
  }
  .pad-slot-keys {
    justify-self: center;
    margin-right: 0;
    align-items: center;
  }
}

/*
 * Vollbild auf dem Handy: Bild so groß wie der Bildschirm (3:2 bleibt), Steuerkreuz und A/B
 * halbtransparent darüber, über der Menüleiste unten im Bild. Der Vollbild-Knopf sitzt über A/B.
 */
@media (pointer: coarse) {
  .game-fullscreen .game-stage {
    grid-template-areas: "screen";
    grid-template-columns: minmax(0, 1fr);
  }
  .game-fullscreen .game-frame {
    width: min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.5));
    height: auto;
    max-width: none;
  }
  .game-fullscreen .pad-slot {
    grid-area: auto;
    position: absolute;
    z-index: 1;
    bottom: calc(44px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0;
    opacity: 0.6;
  }
  .game-fullscreen .pad-slot-dpad {
    left: calc(12px + env(safe-area-inset-left));
  }
  .game-fullscreen .pad-slot-keys {
    right: calc(12px + env(safe-area-inset-right));
    flex-direction: column-reverse;
    align-items: flex-end;
  }
}

/*
 * --- Overlay über dem Spielbild (GameHud) ---
 * Halbtransparente Flächen wie in MMOs. Das Overlay selbst lässt Klicks durch, nur seine
 * Elemente fangen sie ab.
 */

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 12px;
  line-height: 1.35;
  color: #eef2f6;
  --hud-bg: rgba(18, 24, 34, 0.78);
  --hud-border: rgba(255, 255, 255, 0.14);
  --hud-accent: #6fb7ff;
}
.hud > * {
  pointer-events: auto;
}
.hud button {
  font: inherit;
  color: inherit;
}
.hud-panel {
  background: var(--hud-bg);
  border: 1px solid var(--hud-border);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Oben links: Ort, Geld, Verbindung */
.hud-info {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 4px 8px;
  max-width: 45%;
}
.hud-info strong {
  letter-spacing: 0.02em;
}

/* Hinweise des Servers oben in der Mitte */
.hud-notice {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50%;
  padding: 6px 10px;
  cursor: pointer;
  text-align: center;
}

/* Entwicklungsszene: auffälliger Knopf zum Abbrechen, unten über dem Textfenster */
.evolution-cancel {
  position: absolute;
  left: 50%;
  bottom: 36%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 8px 16px;
  border: 2px solid #fff;
  border-radius: 6px;
  background: #c03028;
  color: #fff;
  font: inherit;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.evolution-cancel:hover,
.evolution-cancel:active {
  background: #e04038;
}

/* Rechts: Spielerzahl und darunter das Team */
.hud-right {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  justify-items: end;
  grid-gap: 4px;
  gap: 4px;
  pointer-events: none;
}
.hud-right > * {
  pointer-events: auto;
}
.hud-online {
  padding: 2px 6px;
  white-space: nowrap;
}
/* Begegnungszähler (Shiny-Jagd) unter der Spielerzahl */
/* Zwei Zeilen: oben alle Arten (Σ), darunter die gewählte Art; Zahlen rechtsbündig untereinander */
.hud-encounter {
  display: grid;
  grid-template-columns: 24px auto auto;
  align-items: center;
  padding: 1px 6px 1px 2px;
  cursor: pointer;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hud-encounter:hover {
  border-color: var(--hud-accent);
}
.hud-encounter-all {
  justify-self: center;
  font-size: 13px;
  font-weight: bold;
  opacity: 0.7;
}
.hud-encounter-sum {
  font-size: 11px;
  opacity: 0.85;
  padding-top: 2px;
}
.hud-encounter-star {
  color: #f8d040;
  font-size: 11px;
  text-align: left;
}
.hud-encounter > strong {
  padding-left: 4px;
}
.hud-encounter-star:not(:empty) {
  padding-left: 3px;
}
.hud-party {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.hud-party-slot {
  display: grid;
  justify-items: center;
  grid-gap: 2px;
  gap: 2px;
  padding: 2px 3px 4px;
  cursor: pointer;
}
.hud-party-slot:hover {
  border-color: var(--hud-accent);
}
.hud-icon {
  display: inline-block;
  image-rendering: pixelated;
  vertical-align: middle;
  flex: none;
}
/* Schillernde Pokémon: roter Stern oben rechts am Bild */
.hud-icon-shiny {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}
.hud-shiny-star {
  position: absolute;
  top: -2px;
  right: -2px;
  color: #f85040;
  font-size: 11px;
  line-height: 1;
  text-shadow:
    0 0 2px #000,
    0 0 1px #000;
  pointer-events: none;
}
.hud-hp {
  display: inline-block;
  height: 5px;
  background: #2b3240;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
}
.hud-hp > span {
  display: block;
  height: 100%;
}

/* Unten links: Chat und Mitspieler */
.hud-chat {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: clamp(240px, 38%, 400px);
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 42%;
  min-height: 0;
}
.hud-chat-closed {
  width: auto;
}
.hud-chat > .chat-panel,
.hud-chat > .trade-panel,
.hud-chat > .hud-empty {
  min-height: 0;
  overflow: auto;
  padding: 4px 6px 6px;
}
.chat-panel {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 0;
}
.chat-lines {
  height: 96px;
  overflow-y: auto;
  font-size: 12px;
}
.chat-form {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.chat-input {
  flex: 1 1;
  min-width: 0;
  font-size: 12px;
  padding: 3px 5px;
  background: rgba(0, 0, 0, 0.45);
  color: inherit;
  border: 1px solid var(--hud-border);
  border-radius: 4px;
}
.trade-line {
  margin-top: 4px;
}

/* Freunde (Reiter im Chatfenster) */
.friends-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 0;
  font-size: 12px;
}
.friends-lines {
  height: 96px;
  overflow-y: auto;
  margin-top: 4px;
}
.friends-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 1px 0;
}
.friends-head {
  margin: 4px 0 2px;
  opacity: 0.8;
  font-weight: bold;
}
.friends-results {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hud-border);
}
.friends-muted {
  opacity: 0.6;
  font-size: 11px;
}
.friends-error {
  color: #f0b070;
  margin-top: 2px;
}
.friends-dot {
  color: #6b7380;
  font-size: 10px;
}
.friends-dot-on,
.friends-online,
.friends-count,
.friends-tag {
  color: #8af070;
}
.friends-link {
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  opacity: 0.6;
}
.friends-head-new {
  color: #8af070;
}
.friends-badge {
  display: inline-block;
  min-width: 15px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 8px;
  background: #3fa34d;
  color: #fff;
  font-size: 10px;
  line-height: 15px;
  text-align: center;
}
.hud-notice-friend {
  border-color: #5fc46e;
  color: #c9f5c0;
}
.trade-player {
  display: inline-block;
  margin: 0 10px 4px 0;
}

/* Reiter (Chat, Rucksack) */
.hud-tabs {
  display: flex;
  gap: 2px;
  align-items: center;
  border-bottom: 1px solid var(--hud-border);
  padding: 2px 4px 0;
}
.hud-tab {
  background: none;
  border: none;
  padding: 3px 7px;
  cursor: pointer;
  opacity: 0.75;
  border-bottom: 2px solid transparent;
}
.hud-tab-active {
  opacity: 1;
  border-bottom-color: var(--hud-accent);
}

/* Textfenster der NPCs und Kampf belegen den unteren Rand: Chat und Menü treten zurück */
.hud-chat,
.hud-menu {
  transition:
    opacity 0.15s,
    visibility 0.15s;
}
.hud-text-shown .hud-chat,
.hud-text-shown .hud-menu {
  opacity: 0;
  visibility: hidden;
}

/* Unten rechts: Rucksack, Trainerpass, Pokédex */
.hud-menu {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}
.hud-menu-button {
  width: 34px;
  height: 34px;
  padding: 5px;
  cursor: pointer;
  color: #dfe8f2;
}
.hud-menu-button svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hud-menu-button:hover:not(:disabled),
.hud-menu-active {
  border-color: var(--hud-accent);
  color: #fff;
}
.hud-menu-button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Links in der Mitte: Schnellzugriff auf registrierte Basis-Items (Tasten 1–5) */
.hud-quick {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  transition:
    opacity 0.15s,
    visibility 0.15s;
}
.hud-text-shown .hud-quick {
  opacity: 0;
  visibility: hidden;
}
.hud-quick-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
}
.hud-quick-slot:hover:not(:disabled) {
  border-color: var(--hud-accent);
}
.hud-quick-empty {
  opacity: 0.55;
  border-style: dashed;
}
.hud-quick-key {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 9px;
  line-height: 1.2;
  opacity: 0.8;
  pointer-events: none;
}
.hud-row.hud-register {
  gap: 2px;
  flex-wrap: wrap;
  margin: 4px 0;
}

/* Fenster */
.hud-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(300px, 70%);
  max-height: 80%;
  display: grid;
  grid-template-rows: auto 1fr;
  z-index: 2;
}
.hud-window-wide {
  width: min(460px, 76%);
}
/* Das PC-Lager braucht Platz für Team, Box und Bericht */
.hud-window-wide:has(.pc-storage) {
  width: min(560px, 92%);
  max-height: 92%;
}
/* Verschoben: Position aus HudWindow (links oben, in Prozent des Overlays) */
.hud-window-moved {
  transform: none;
}
.hud-window-title {
  cursor: move;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}
.hud-window-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 4px 10px;
  border-bottom: 1px solid var(--hud-border);
}
.hud-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.hud-window-body {
  overflow: auto;
  padding: 8px 10px;
  min-height: 0;
}
.hud
  button:not(.hud-tab):not(.hud-close):not(.hud-panel):not(.hud-item):not(.hud-team-row):not(
    .dex-btn
  ) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.hud button:disabled {
  cursor: default;
  opacity: 0.45;
}

.hud-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hud-grow {
  flex: 1 1;
  min-width: 0;
}
.hud-small {
  font-size: 11px;
  opacity: 0.75;
}
.hud-empty {
  opacity: 0.7;
  margin: 6px 0;
}
.hud-plain-list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
}
.hud-selected {
  background: rgba(111, 183, 255, 0.2) !important;
}

/* Team */
.hud-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  grid-gap: 10px;
  gap: 10px;
}
.hud-team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.hud-team-row,
.hud-item {
  width: 100%;
  display: flex;
  gap: 6px;
  align-items: center;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 4px;
  cursor: pointer;
}
.hud-team-row:hover,
.hud-item:hover {
  border-color: var(--hud-border);
}
/* Ziehen zum Tauschen: Finger zieht die Zeile statt die Seite zu scrollen */
.hud-team-row[data-party-index],
.hud-party-slot[data-party-index] {
  touch-action: none;
  /* Kein Markieren und kein Bild-Ziehen des Browsers, das bräche das eigene Ziehen ab */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
[data-party-index] img {
  -webkit-user-drag: none;
}
.hud-dragging {
  opacity: 0.5;
}
.hud-drag-over {
  border-color: #6fb7ff !important;
  border-style: dashed !important;
}
.hud-team-name {
  flex: 1 1;
  min-width: 0;
  display: grid;
}
.hud-mon-head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.hud-mon > * + * {
  margin-top: 6px;
}
.hud-status {
  color: #f8b040;
  font-weight: 700;
}
.hud-moves {
  margin: 6px 0;
  padding-left: 18px;
}
.hud-moves li {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 1px 0;
}
.hud-box {
  grid-column: 1 / -1;
}

/* PC-Lager: Team links, Box als 6 × 5 Raster, darüber die 14 Boxen */
.pc-storage {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.pc-storage,
.pc-storage * {
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
}
.pc-storage [data-pc-target] {
  touch-action: none;
}
.pc-storage img {
  -webkit-user-drag: none;
}
.pc-dragging,
.pc-dragging * {
  cursor: -webkit-grabbing !important;
  cursor: grabbing !important;
}
.hud .pc-tabs {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-gap: 2px;
  gap: 2px;
}
.hud button.pc-tab {
  position: relative;
  padding: 2px 0 5px;
  font-size: 11px;
  overflow: hidden;
}
.pc-tab-active {
  border-color: var(--hud-accent) !important;
  background: rgba(111, 183, 255, 0.25) !important;
}
.pc-tab-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: #70f8a8;
}
.pc-main {
  display: grid;
  grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.6fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
}
.pc-head {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 2px;
}
.pc-party-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}
.hud button.pc-party-cell {
  width: 100%;
  min-height: 38px;
  display: flex;
  gap: 4px;
  align-items: center;
  text-align: left;
  padding: 1px 4px;
  cursor: -webkit-grab;
  cursor: grab;
}
.pc-party-name {
  display: grid;
  min-width: 0;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-empty,
.pc-cell:empty {
  cursor: default !important;
}
.hud button.pc-empty {
  border-style: dashed !important;
  background: rgba(255, 255, 255, 0.03);
}
.pc-box {
  border: 1px solid var(--hud-border);
  border-radius: 6px;
  padding: 4px;
}
.pc-wallpaper-0 {
  background: linear-gradient(160deg, rgba(64, 160, 96, 0.35), rgba(32, 96, 64, 0.25));
}
.pc-wallpaper-1 {
  background: linear-gradient(160deg, rgba(64, 128, 208, 0.35), rgba(32, 64, 128, 0.25));
}
.pc-wallpaper-2 {
  background: linear-gradient(160deg, rgba(208, 128, 64, 0.35), rgba(128, 64, 32, 0.25));
}
.pc-wallpaper-3 {
  background: linear-gradient(160deg, rgba(160, 96, 192, 0.35), rgba(96, 48, 128, 0.25));
}
.pc-box-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.pc-box-name {
  flex: 1 1;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 0;
  background: rgba(0, 0, 0, 0.25);
}
.pc-box-name small {
  font-weight: normal;
  opacity: 0.75;
}
.pc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 2px;
  gap: 2px;
}
.hud button.pc-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.18);
  border-color: rgba(255, 255, 255, 0.08);
  cursor: -webkit-grab;
  cursor: grab;
}
.hud button.pc-cell:not(:empty):hover,
.hud button.pc-party-cell:not(.pc-empty):hover {
  border-color: var(--hud-accent);
}
.pc-drop-over {
  border-color: #f8e038 !important;
  border-style: solid !important;
  background: rgba(248, 224, 56, 0.22) !important;
}
.pc-ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -60%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
.pc-info,
.pc-storage > .hud-empty {
  border-top: 1px solid var(--hud-border);
  padding-top: 6px;
  margin: 0;
  /* Platz für den Bericht freihalten, sonst springt das zentrierte Fenster beim Auswählen */
  min-height: 210px;
}
.pc-info-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
}
@media (max-width: 520px) {
  .pc-info-body {
    grid-template-columns: 1fr;
  }
  .pc-party-name {
    display: none;
  }
  .pc-main {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}
.hud-stats table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 2px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.hud-stats th,
.hud-stats td {
  padding: 1px 6px;
  text-align: right;
}
.hud-stats th[scope="row"],
.hud-stats thead th:first-child {
  text-align: left;
  font-weight: normal;
  opacity: 0.85;
}
.hud-stats thead th {
  font-weight: 600;
  opacity: 0.7;
  font-size: 11px;
}
.hud-stats tbody tr + tr td,
.hud-stats tbody tr + tr th {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hud-stats tfoot td,
.hud-stats tfoot th {
  border-top: 1px solid var(--hud-border);
  opacity: 0.8;
}
/* Wesen: gesteigerter Wert rot, gesenkter blau (wie in späteren Statusbildschirmen) */
.hud-stat-up th,
.hud-stat-up td:nth-child(2) {
  color: #ff8a80;
}
.hud-stat-down th,
.hud-stat-down td:nth-child(2) {
  color: #82b1ff;
}
.hud-stat-max {
  color: #ffd54f;
  font-weight: 700;
}

/* Rucksack */
.hud-bag-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-gap: 10px;
  gap: 10px;
  margin-top: 6px;
}
.hud-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hud-description {
  margin: 4px 0 8px;
  opacity: 0.85;
}
.hud-money {
  margin-top: 8px;
  text-align: right;
}

/* Trainerpass */
.hud-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2px 12px;
  gap: 2px 12px;
  margin: 0 0 8px;
}
.hud-card dt {
  opacity: 0.7;
}
.hud-card dd {
  margin: 0;
  font-weight: 600;
}
.hud-badges {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.hud-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  border: 1px dashed var(--hud-border);
  opacity: 0.5;
}
.hud-badge-got {
  border: 1px solid #f8d860;
  background: radial-gradient(circle at 35% 35%, #fff2a8, #d8a020);
  color: #3a2a00;
  opacity: 1;
}
.hud-trainer > div:last-child {
  justify-content: flex-start !important;
}

/* Pokédex */
/* Pokédex im Stil von Smaragd: roter Rahmen (Nationaler Pokédex), helle Felder mit
   GBA-Textschatten, gewählte Zeile orange, gefangene Arten mit Pokéball */
.dex {
  --dex-red: #c83828;
  --dex-red-dark: #882018;
  --dex-paper: #f8f8f0;
  --dex-paper-2: #e8e8d8;
  --dex-ink: #383838;
  --dex-shadow: #d0d0c8;
  --dex-select: #f8b050;
  --dex-blue: #284878;
  outline: none;
  margin: -8px -10px;
  padding: 8px;
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.06) 6px 12px),
    linear-gradient(var(--dex-red), var(--dex-red-dark));
  color: var(--dex-ink);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-shadow: 1px 1px 0 var(--dex-shadow);
  min-height: 100%;
}
.dex:focus-visible {
  box-shadow: inset 0 0 0 2px var(--dex-select);
}
.dex dl,
.dex dd,
.dex p {
  margin: 0;
}
.dex-list-screen {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  height: min(300px, 52cqh);
  min-height: 220px;
}
.dex-side {
  display: grid;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
}
/* Bildfeld wie im Spiel: hell, abgerundet, mit dunklem Rand */
.dex-frame {
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 3px solid #484848;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 60%, #ffffff 0 45%, transparent 46%),
    linear-gradient(var(--dex-paper), var(--dex-paper-2));
  box-shadow:
    inset 0 0 0 2px #a8a8a0,
    0 2px 0 rgba(0, 0, 0, 0.3);
}
.dex-frame img {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
}
.dex-counts {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.dex-counts > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dex-blue);
  color: #f8f8f8;
  text-shadow: 1px 1px 0 #101828;
  border: 2px solid #f8f8f8;
}
.dex-counts dd {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.dex-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  min-height: 0;
  border: 3px solid #484848;
  border-radius: 8px;
  background: var(--dex-paper);
  scrollbar-color: var(--dex-red) var(--dex-paper-2);
}
.dex-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.dex-list li:hover {
  background: rgba(248, 176, 80, 0.35);
}
.dex-list li.dex-selected {
  background: var(--dex-select);
  box-shadow: inset 0 0 0 2px #c86818;
}
.dex-no {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  min-width: 4.2em;
}
.dex-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pokéball der gefangenen Arten */
.dex-ball,
.dex-ball-space {
  flex: none;
  width: 11px;
  height: 11px;
}
.dex-ball {
  border-radius: 50%;
  border: 1px solid #202020;
  background:
    radial-gradient(circle, #f8f8f8 0 1.5px, #202020 1.5px 2.5px, transparent 2.5px),
    linear-gradient(#e83020 0 44%, #202020 44% 56%, #f8f8f8 56%);
}
.dex-hint {
  grid-column: 1 / -1;
  color: #f8f8f8;
  text-shadow: 1px 1px 0 var(--dex-red-dark);
  font-size: 0.9em;
  text-align: right;
}
/* Eintragsseite (PrintMonInfo) */
.dex-entry {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.dex-entry-top {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  gap: 10px;
  align-items: stretch;
}
.dex-entry-data {
  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
  padding: 8px 10px;
  border: 3px solid #484848;
  border-radius: 8px;
  background: var(--dex-paper);
}
.dex-entry-name {
  display: flex;
  gap: 10px;
  font-size: 1.1em;
}
.dex-entry-name span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.dex-entry-category {
  padding-bottom: 4px;
  border-bottom: 2px solid var(--dex-paper-2);
}
.dex-entry-size {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.dex-entry-size > div {
  display: grid;
  grid-template-columns: 4em 1fr;
}
.dex-entry-size dd {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.dex-entry-text {
  min-height: 4.4em;
  padding: 8px 12px;
  border: 3px solid #484848;
  border-radius: 8px;
  background: var(--dex-paper);
  white-space: pre-line;
  text-align: center;
  line-height: 1.5;
}
.dex-entry-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dex-entry-nav .dex-hint {
  flex: 1 1;
}
.dex-btn {
  background: var(--dex-paper);
  color: var(--dex-ink);
  border: 2px solid #484848;
  border-radius: 6px;
  padding: 1px 10px;
  font-weight: 600;
  cursor: pointer;
}
.dex-btn:hover {
  background: var(--dex-select);
}
/* Handy: der Pokédex füllt das Fenster, die Liste (bzw. der Text) nimmt den Platz bis unten ein,
   damit kein leerer roter Rand bleibt. Tastenhinweise entfallen, Zeilen und Knöpfe größer. */
@media (pointer: coarse) {
  .hud-window-body:has(> .dex) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .dex {
    flex: 1 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .dex-list-screen,
  .dex-entry {
    flex: 1 1;
    min-height: 0;
    height: auto;
  }
  .dex-list-screen {
    grid-template-rows: minmax(0, 1fr);
  }
  .dex-hint {
    display: none;
  }
  .dex-entry-nav .dex-hint {
    display: block;
    visibility: hidden;
  }
  .dex-list li {
    padding: 6px 8px;
  }
  .dex-btn {
    padding: 6px 16px;
  }
  .dex-entry {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .dex-entry-text {
    overflow-y: auto;
    align-content: center;
  }
}
/* Hochkant: Bild und Zähler nebeneinander oben, darunter die Liste */
@media (pointer: coarse) and (orientation: portrait) {
  .dex-list-screen {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .dex-side {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .dex-frame {
    width: 104px;
    height: 104px;
  }
  .dex-frame img {
    width: 96px;
    height: 96px;
  }
  /* Eintragsseite: Fenster endet unter dem Text statt mit leerem Feld bis unten */
  .hud-window:has(.dex-entry) {
    bottom: auto;
  }
  .dex-entry {
    grid-template-rows: auto auto auto;
  }
  .dex-entry .dex-frame {
    width: 136px;
    height: 136px;
  }
  .dex-entry .dex-frame img {
    width: 128px;
    height: 128px;
  }
  .dex-entry-top {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .dex-entry-data {
    justify-self: stretch;
  }
}
/* Quer: wenig Höhe, daher Bild nach der Höhe bemessen und die Liste rechts über die volle Höhe */
@media (pointer: coarse) and (orientation: landscape) {
  .dex-frame {
    width: min(136px, 34svh);
    height: min(136px, 34svh);
  }
  .dex-frame img {
    width: min(128px, 30svh);
    height: min(128px, 30svh);
  }
  .dex-list-screen {
    grid-template-columns: auto 1fr;
  }
  .dex-entry-top {
    grid-template-columns: auto 1fr;
  }
}

/* Kleines Spielbild (2× Zoom, Handy): Overlay kompakter, damit Team und Menü nebeneinander passen */
@container (max-height: 440px) {
  .hud {
    font-size: 11px;
  }
  .hud-party {
    gap: 2px;
  }
  .hud-party-slot {
    padding: 1px 2px 3px;
  }
  .hud-party-slot .hud-icon {
    width: 22px;
    height: 22px;
  }
  .hud-party-slot .hud-hp {
    width: 24px !important;
  }
  .hud-menu-button {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
  .hud-quick-slot {
    width: 28px;
    height: 28px;
  }
  .hud-quick-slot .hud-icon {
    width: 20px;
    height: 20px;
  }
  .hud-chat {
    max-height: 58%;
  }
  .hud-chat:not(.hud-chat-closed) {
    right: 110px;
    width: auto;
    max-width: 400px;
  }
  .chat-lines {
    height: 52px;
  }
  .hud-info {
    padding: 2px 6px;
  }
}

/* Sehr kleines Bild (Handy hochkant): Team noch schmaler */
@container (max-height: 300px) {
  .hud-party-slot .hud-icon {
    width: 18px;
    height: 18px;
  }
  .hud-party-slot .hud-hp {
    width: 20px !important;
    height: 4px;
  }
  .hud-party-slot {
    gap: 1px;
  }
}

/* Touch-Geräte: Fenster über die ganze Seite, deckend */
.hud-portal {
  position: fixed;
  z-index: 50;
}
@media (pointer: coarse) {
  .hud-window {
    background: rgba(18, 24, 34, 0.97);
    position: absolute;
    inset: 8px;
    transform: none;
    width: auto;
    max-height: none;
    z-index: 50;
  }
  .hud-team,
  .hud-bag-body {
    grid-template-columns: 1fr;
  }
}

.hud-clock {
  margin-left: 0.5em;
  opacity: 0.8;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* GTS */
.hud-gts-message {
  margin: 6px 0;
  padding: 4px 6px;
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  background: rgba(111, 183, 255, 0.12);
}
.hud-gts-form {
  margin: 6px 0;
}
.hud-gts-form .chat-input {
  flex: 1 1 120px;
}
.hud-gts-select {
  flex: 0 1 auto !important;
}
.hud-gts-kind {
  display: inline-flex;
  gap: 2px;
}
.hud-gts-list > li {
  padding: 3px 0;
  border-bottom: 1px solid var(--hud-border);
}
.hud-gts-details {
  padding: 4px 0 4px 38px;
}
.hud-gts-offer {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 6px;
}
.hud-gts-bag {
  max-height: 160px;
  overflow: auto;
}
.hud-gts-number {
  width: 110px;
  flex: 0 0 auto !important;
}

/* Fenster „Begegnungen“ */
.encounters-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.encounters-chip,
.encounters-reset {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  padding: 1px 8px;
  cursor: pointer;
}
.encounters-chip-on,
.encounters-chip:hover,
.encounters-reset:hover {
  border-color: var(--hud-accent);
}
.encounters-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 4px;
}
.encounters-pin {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}
.encounters-pin:hover {
  border-color: var(--hud-accent);
}
.encounters-info {
  flex: 1 1;
  min-width: 0;
}
.encounters-phase {
  display: grid;
  justify-items: end;
  grid-gap: 1px;
  gap: 1px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.encounters-phase strong {
  font-size: 16px;
}
.encounters-reset {
  font-size: 11px;
  padding: 0 6px;
}
.encounters-sum {
  border-bottom: 1px solid var(--hud-border);
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}
.encounters-sum-icon {
  width: 34px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  opacity: 0.7;
}

/* Spendereffekt aktiv: kleines Abzeichen unter dem Geld, öffnet den Shop */
.hud .hud-donor {
  display: block;
  margin-top: 2px;
  padding: 0 6px;
  background: rgba(47, 158, 95, 0.35);
  border: 1px solid rgba(127, 220, 166, 0.6);
  border-radius: 999px;
  font-size: 11px;
  color: #c9f5da;
  cursor: pointer;
}

/* Shop: Spezial-Items gegen SOL */
.shop {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.shop p {
  margin: 0;
}
.shop-perks {
  padding: 6px 8px;
  border: 1px solid rgba(127, 220, 166, 0.45);
  border-radius: 6px;
  background: rgba(47, 158, 95, 0.12);
}
.shop-perks ul {
  margin: 4px 0;
  padding-left: 18px;
}
.shop-wallets {
  flex-wrap: wrap;
  gap: 4px;
}
.shop-wallets img {
  vertical-align: -2px;
}
.shop-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.shop-product {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--hud-border);
  border-radius: 6px;
}
.shop-buy {
  display: grid;
  justify-items: end;
  grid-gap: 4px;
  gap: 4px;
}
.shop-price {
  font-weight: 700;
  white-space: nowrap;
}
.hud .shop-buy button {
  min-width: 72px;
  padding: 3px 10px;
  border: 1px solid var(--hud-accent);
  border-radius: 4px;
  background: rgba(111, 183, 255, 0.18);
  cursor: pointer;
}
.shop-message {
  padding: 4px 8px;
  border-radius: 4px;
}
.shop-info {
  background: rgba(255, 255, 255, 0.06);
}
.shop-ok {
  background: rgba(47, 158, 95, 0.25);
}
.shop-error {
  background: rgba(240, 138, 138, 0.2);
}