* { box-sizing: border-box; }

:root {
  --bg: #151719;
  --panel: #202326;
  --panel2: #292c30;
  --line: #3a3e43;
  --text: #f2f2ee;
  --muted: #a9aca8;
  --accent: #d9bc58;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr;
}

.sidebar {
  background: #101112;
  border-right: 1px solid var(--line);
  padding: 28px 18px;
}

.brand {
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 36px;
}

nav {
  display: grid;
  gap: 6px;
}

nav a {
  padding: 12px 14px;
  color: var(--muted);
  border-radius: 6px;
}

nav a.active,
nav a:hover {
  background: var(--panel);
  color: var(--text);
}

.content {
  padding: 34px;
  max-width: 1400px;
  width: 100%;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.eyebrow, .label, .panel-title {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 700;
}

h1 {
  margin: 7px 0 0;
  font-size: clamp(26px, 3vw, 42px);
}

.test-user {
  font-size: 10px;
  color: var(--muted);
  display: grid;
  gap: 6px;
}

select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 10px;
  border-radius: 5px;
}

.profile-row {
  display: grid;
  grid-template-columns: 110px 1fr 300px;
  gap: 22px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: 8px;
}

.avatar-placeholder {
  height: 110px;
  width: 110px;
  border: 2px dashed #666;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
}

.profile-name {
  font-size: 25px;
  margin-top: 7px;
}

.placeholder-line {
  height: 10px;
  width: 55%;
  margin-top: 14px;
  background: var(--panel2);
}

.level-box {
  border-left: 1px solid var(--line);
  padding-left: 22px;
}

.level-box strong {
  display: block;
  font-size: 30px;
  margin: 8px 0;
}

.level-box small {
  color: var(--muted);
}

.progress {
  height: 8px;
  background: var(--panel2);
  margin: 10px 0;
  border-radius: 99px;
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
}

.stats-grid article {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 22px;
  min-height: 105px;
  border-radius: 8px;
}

.stats-grid strong {
  display: block;
  font-size: 30px;
  margin-bottom: 8px;
}

.stats-grid span {
  color: var(--muted);
  font-size: 13px;
}

.two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}

.placeholder-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.placeholder-list div,
.tiles button {
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 14px;
  color: var(--muted);
  text-align: left;
}

.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.tiles button {
  cursor: pointer;
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  nav { grid-template-columns: repeat(3, 1fr); }
  .profile-row { grid-template-columns: 90px 1fr; }
  .level-box { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .content { padding: 18px; }
  .topbar { display: block; }
  .test-user { margin-top: 18px; }
  nav { grid-template-columns: 1fr 1fr; }
  .profile-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
}

/* ================================================================
   V0.2 – ERWEITERUNGEN
   ---------------------------------------------------------------
   Gestaltungsregel:
   Funktionalität liegt in HTML/JS, visuelle Mittel hier im CSS.
   Texturen, Hintergründe, Rahmen, Schatten und Button-Optik können
   später hier bzw. über Assets ergänzt werden, ohne die Datenlogik
   neu programmieren zu müssen.
   ================================================================ */

.page-intro { color: var(--muted); max-width: 760px; line-height: 1.6; }

/* Werbeflächen: bewusst zurückhaltend. Inhalt/Banner wird später eingesetzt. */
.ad-slot {
  min-height: 72px;
  margin: 18px 0;
  border: 1px dashed rgba(201,164,91,.22);
  border-radius: 8px;
  background: rgba(255,255,255,.012);
  position: relative;
}
.ad-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Kartenübersicht */
.cards-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 18px 0;
  color: var(--text);
}
.toolbar-note { color: var(--muted); font-size: 12px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.collection-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 235px;
  display: flex;
  flex-direction: column;
}

/*
  Kartenbild ist absichtlich nur eine Gestaltungsfläche.
  Später können hier echte Kartenhintergründe, Texturen oder
  Bilder eingebunden werden, ohne die Karten-Datenabfrage zu ändern.
*/
.collection-card__visual {
  min-height: 165px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, #25282b, #17191b);
}
.collection-card__visual strong { font-size: 21px; line-height: 1.15; }
.collection-card__visual span:last-child { color: var(--muted); font-size: 12px; }
.collection-card__type {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 700;
}
.collection-card__meta {
  padding: 12px 15px;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.collection-card__meta small { color: var(--text); letter-spacing: .04em; }
.loading-card {
  grid-column: 1 / -1;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
}

.placeholder-map {
  min-height: 560px;
  margin-top: 24px;
  border: 1px dashed rgba(201,164,91,.28);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: radial-gradient(circle at center, rgba(201,164,91,.05), transparent 55%);
}

/* Navigation und Kacheln bleiben als eigene Gestaltungsebene editierbar. */
nav a, .tiles a { text-decoration: none; }
.tiles a {
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 14px;
  color: var(--muted);
  text-align: left;
  border-radius: 4px;
}
.tiles a:hover { color: var(--text); }

@media (max-width: 1100px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-toolbar { display: block; }
  .toolbar-note { margin-top: 6px; }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   V0.3 – SAMMELKARTEN-ÜBERSICHT
   ---------------------------------------------------------------
   Die Hexagon-Geometrie ist ausschließlich Gestaltung.
   Anzahl und Besitzstatus kommen aus der Datenbank.
   Texturen, Farben, Schatten und Hintergründe können hier geändert
   werden, ohne die Kartenlogik in cards.js anzufassen.
   ================================================================ */

.game-summary {
  display: grid;
  grid-template-columns: 160px 1.6fr 1fr 1fr;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}

.game-summary__item {
  min-height: 104px;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.game-summary__item:last-child { border-right: 0; }
.game-summary__item strong { font-size: 28px; }
.game-summary__item small { color: var(--muted); }
.game-summary__item--xp .progress { margin: 6px 0 0; }

.collection-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 28px 0 14px;
}

.collection-heading h2 {
  margin: 5px 0 0;
  font-size: 25px;
}

.collection-legend {
  display: flex;
  gap: 18px;
  color: var(--muted);
  font-size: 12px;
  flex-wrap: wrap;
}

.collection-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend-hex {
  width: 22px;
  height: 19px;
  display: inline-block;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--line);
  position: relative;
}

.legend-hex::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  background: var(--panel);
}

.legend-hex--owned { background: var(--accent); }
.legend-hex--owned::after { background: #34302a; }

.master-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 28px 24px;
  padding: 18px 8px 28px;
}

.master-hex {
  appearance: none;
  border: 0;
  padding: 0;
  aspect-ratio: 1 / .88;
  background: transparent;
  cursor: default;
  position: relative;
  min-width: 0;
}

.master-hex::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--line);
}

.master-hex::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--bg);
}

.master-hex__inner {
  position: absolute;
  inset: 3px;
  z-index: 1;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 12px;
  text-align: center;
  overflow: hidden;
}

.master-hex__number {
  color: #777b78;
  font-size: 12px;
  letter-spacing: .08em;
}

.master-hex--empty .master-hex__inner { background: var(--bg); }

.master-hex--owned {
  cursor: pointer;
}

.master-hex--owned::before { background: var(--accent); }
.master-hex--owned::after { background: #34302a; }
.master-hex--owned .master-hex__inner { background: #34302a; }
.master-hex--owned:hover { transform: translateY(-2px); }
.master-hex--owned:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.master-hex--owned .master-hex__number { color: #d9c58e; }
.master-hex__name { margin-top: 5px; font-size: 12px; line-height: 1.15; font-weight: 700; }
.master-hex__level { margin-top: 4px; font-size: 10px; color: var(--muted); }

.card-detail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  margin: 4px 0 28px;
}

.card-detail__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.card-detail h2 { margin: 5px 0 0; }

.detail-close {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 9px 12px;
  border-radius: 5px;
  cursor: pointer;
}

.card-detail__meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.card-detail__meta > div {
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 12px;
}

.card-detail__meta span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 5px;
}

.card-detail__meta strong { font-size: 13px; }
.property-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.property-chip { background: var(--panel2); border: 1px solid var(--line); padding: 8px 10px; font-size: 12px; }
.property-chip strong { margin-left: 5px; color: var(--accent); }
.detail-muted { color: var(--muted); }

@media (max-width: 1100px) {
  .master-card-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .game-summary { grid-template-columns: 1fr 1.5fr; }
  .game-summary__item:nth-child(2) { border-right: 0; }
  .game-summary__item:nth-child(3), .game-summary__item:nth-child(4) { border-top: 1px solid var(--line); }
  .card-detail__meta { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .master-card-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 18px 14px; }
  .collection-heading { align-items: flex-start; flex-direction: column; }
  .game-summary { grid-template-columns: 1fr; }
  .game-summary__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .game-summary__item:last-child { border-bottom: 0; }
  .card-detail__meta { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .master-card-grid { grid-template-columns: repeat(2, minmax(105px, 1fr)); }
  .card-detail__meta { grid-template-columns: 1fr; }
}

/* ================================================================
   V0.3.1 – SEITENRAUM / WERBUNG
   ---------------------------------------------------------------
   Die Werbefläche liegt bewusst außerhalb des Inhaltsflusses.
   Größe, Textur, Rahmen und spätere Banner-Assets können hier
   geändert werden, ohne die Seiten- oder Datenlogik anzupassen.
   ================================================================ */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 22px;
  align-items: start;
}

.page-main { min-width: 0; }

.ad-rail {
  position: sticky;
  top: 28px;
  min-height: 420px;
}

.ad-slot--rail {
  min-height: 260px;
  border: 1px dashed rgba(201,164,91,.28);
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: rgba(169,172,168,.45);
  background: radial-gradient(circle at center, rgba(201,164,91,.04), transparent 65%);
  font-size: 9px;
  letter-spacing: .12em;
}

.ad-slot--rail span { opacity: .7; }

/* ================================================================
   V0.3.1 – HOVER-INFORMATION DER MASTERKARTEN
   ---------------------------------------------------------------
   Diese Information ist bewusst ein reines CSS-Overlay. Sie erscheint
   nur bei Maus-Hover bzw. Tastaturfokus und ist nicht Teil der Karte.
   ================================================================ */
.master-hex { transition: transform .15s ease; }
.master-hex__hovercard {
  z-index: 9999;
  pointer-events: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% - 8px);
  transform: translate(-50%, 5px);
  width: 190px;
  padding: 12px 14px;
  background: #1b1d1f;
  border: 1px solid var(--accent);
  border-radius: 7px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  display: grid;
  gap: 4px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  transition: opacity .12s ease, transform .12s ease;
}

.master-hex__hovercard strong { color: var(--text); font-size: 13px; }
.master-hex__hovercard span { color: var(--muted); font-size: 11px; }
.master-hex:hover .master-hex__hovercard,
.master-hex:focus-visible .master-hex__hovercard {
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ================================================================
   V0.3.1 – KARTEN-DETAILSEITE
   ---------------------------------------------------------------
   Nur Layout/Gestaltung. Die Inhalte kommen aus card-detail.js/API.
   ================================================================ */
.back-link { color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--text); }

.detail-page {
  display: grid;
  gap: 18px;
}

.detail-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px;
}

.detail-card-placeholder {
  aspect-ratio: 5 / 7;
  max-width: 220px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: linear-gradient(145deg, #34302a, #202326);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}
.detail-card-placeholder strong { font-size: 44px; color: var(--accent); }
.detail-hero__text { align-self: center; }
.detail-hero__text h2 { font-size: 34px; margin: 8px 0 12px; }
.detail-hero__text p { color: var(--muted); line-height: 1.6; max-width: 760px; }
.detail-status {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 11px;
  border-radius: 5px;
  font-size: 11px;
  border: 1px solid var(--line);
}
.detail-status.is-owned { border-color: var(--accent); color: var(--accent); }
.detail-status.is-not-owned { color: var(--muted); }

.detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.detail-metrics > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.detail-metrics span, .person-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.detail-metrics strong { font-size: 24px; }
.detail-metrics small { display: block; color: var(--muted); margin-top: 4px; }

.detail-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
}
.detail-section h3 { margin: 18px 0 8px; font-size: 16px; }
.detail-text { color: var(--muted); line-height: 1.65; white-space: pre-line; }

.person-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.person-grid > div { background: var(--panel2); border: 1px solid var(--line); padding: 13px; }

.table-wrap { overflow-x: auto; margin-top: 14px; }
.instance-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.instance-table th, .instance-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.instance-table th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.instance-table td:first-child { color: var(--accent); font-weight: 700; }

.detail-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-list { display: grid; gap: 8px; margin-top: 12px; }
.detail-list__item { background: var(--panel2); border: 1px solid var(--line); padding: 10px 12px; display: grid; gap: 4px; }
.detail-list__item strong { font-size: 12px; }
.detail-list__item span { color: var(--muted); font-size: 11px; }

@media (max-width: 1150px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 150px; }
  .detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .person-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 850px) {
  .page-layout { grid-template-columns: 1fr; }
  .ad-rail { position: static; min-height: 0; }
  .ad-slot--rail { min-height: 100px; }
  .detail-hero { grid-template-columns: 1fr; }
  .detail-card-placeholder { width: 180px; }
  .detail-two-col { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .detail-metrics, .person-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   V0.3.2 – SPIELNAVIGATION / KARTENDECK / SPIELFENSTER
   ---------------------------------------------------------------
   Die beiden Spielaktionen liegen bewusst oben im Seitenkopf.
   Optik, Texturen, Rahmen und Buttonflächen werden ausschließlich
   hier gestaltet; die Navigation selbst bleibt in HTML/JS.
   ================================================================ */
.topbar-right {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.game-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.game-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  background: var(--panel);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}

.game-action:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

.game-action--primary {
  border-color: var(--accent);
  color: #171719;
  background: var(--accent);
}

.game-action--primary:hover { background: #d3b16b; }

/* Kartendeck: 20 Plätze, jede Kartenfläche bleibt ein Hexagon. */
.deck-summary {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 0;
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.deck-summary > div {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 7px;
}

.deck-summary > div:last-child { border-right: 0; }
.deck-summary strong { font-size: 22px; }
.deck-summary .label { font-size: 10px; }

.deck-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 28px 24px;
  padding: 12px 8px 34px;
}

.deck-hex {
  appearance: none;
  border: 0;
  padding: 0;
  aspect-ratio: 1 / .88;
  background: transparent;
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.deck-hex::before,
.deck-hex::after,
.deck-hex__inner {
  position: absolute;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.deck-hex::before { content: ""; inset: 0; background: var(--line); }
.deck-hex::after { content: ""; inset: 2px; background: var(--bg); }
.deck-hex__inner {
  inset: 3px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  text-align: center;
  overflow: hidden;
}

.deck-hex__position { color: #777b78; font-size: 11px; margin-bottom: 6px; }
.deck-hex__inner strong { font-size: 11px; line-height: 1.2; }
.deck-hex__inner small { margin-top: 5px; color: var(--muted); }
.deck-hex__empty { color: var(--muted); font-size: 11px; }
.deck-hex--filled::before { background: var(--accent); }
.deck-hex--filled::after { background: #34302a; }
.deck-hex--filled .deck-hex__inner { background: #34302a; }
.deck-hex:hover { transform: translateY(-2px); }
.deck-hex:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* Spieloberfläche: nur der Rahmen steht bereits; die Spiellogik folgt später. */
.game-shell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  min-height: 600px;
}

.game-shell__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.game-board-placeholder {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  background: #111314;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}

.game-board-row {
  display: flex;
  justify-content: center;
  margin-top: -26px;
}
.game-board-row:first-child { margin-top: 0; }
.game-board-row:nth-child(even) { transform: translateX(54px); }

.board-hex {
  width: 112px;
  height: 98px;
  margin: 0 -1px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--line);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  font-size: 11px;
  letter-spacing: .08em;
}

/* Karten-Detail: Auch die repräsentierte Karte ist immer eine Hexagonfläche. */
.detail-card-placeholder {
  aspect-ratio: 1 / .88;
  width: 220px;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  position: relative;
  padding: 3px;
}

.detail-card-placeholder::before {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: inherit;
  background: linear-gradient(145deg, #34302a, #202326);
}

.detail-card-placeholder > * { position: relative; z-index: 1; }
.detail-card-placeholder strong { font-size: 44px; color: var(--accent); }

@media (max-width: 1100px) {
  .topbar-right { flex-direction: column; align-items: flex-end; }
  .deck-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .board-hex { width: 90px; height: 79px; }
  .game-board-row:nth-child(even) { transform: translateX(44px); }
}

@media (max-width: 760px) {
  .topbar-right { align-items: stretch; }
  .game-actions { justify-content: flex-start; }
  .deck-summary { grid-template-columns: 1fr; }
  .deck-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .deck-summary > div:last-child { border-bottom: 0; }
  .deck-grid { grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 18px 14px; }
  .game-board-placeholder { overflow-x: auto; align-items: flex-start; }
}

@media (max-width: 500px) {
  .deck-grid { grid-template-columns: repeat(2, minmax(105px, 1fr)); }
  .game-actions { display: grid; grid-template-columns: 1fr 1fr; }
}


/* ================================================================
   V0.3.3 – DECKAUSWAHL / INSTANZEN / KARTENPICKER
   ---------------------------------------------------------------
   Fünf Deckflächen sind eigenständige UI-Elemente. Die aktive Fläche
   ist ausschließlich ein Darstellungszustand; Daten kommen aus der API.
   Hexagonflächen bleiben für jede echte Karte/Instanz verbindlich.
   ================================================================ */
.deck-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.deck-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  padding: 10px 18px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
.deck-tab:hover { border-color: var(--accent); color: var(--text); }
.deck-tab.is-active {
  background: var(--accent);
  color: #171719;
  border-color: var(--accent);
}
.deck-active-note {
  min-height: 18px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8,9,10,.76);
}
.modal-backdrop[hidden] { display: none; }
.card-picker {
  width: min(760px, 100%);
  max-height: min(760px, 90vh);
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  padding: 22px;
}
.card-picker--small { width: min(500px, 100%); }
.card-picker__header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.card-picker__header h2 { margin: 5px 0 0; font-size: 24px; }
.modal-close { border:0; background:transparent; color:var(--muted); font-size:28px; line-height:1; cursor:pointer; }
.modal-close:hover { color:var(--text); }
.card-picker__list { display:grid; gap:8px; margin-top:16px; }
.card-picker__item {
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:16px;
  align-items:center;
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  border-radius:6px;
}
.card-picker__item:hover { border-color:var(--accent); }
.card-picker__hex {
  width:92px; height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:var(--accent); color:#171719; text-align:center; padding:8px;
}
.card-picker__hex span { font-weight:700; font-size:10px; line-height:1.15; }
.card-picker__hex small { margin-top:4px; font-size:9px; }
.card-picker__meta { display:grid; gap:4px; color:var(--muted); font-size:11px; }
.card-picker__meta strong { color:var(--accent); font-size:11px; }
.deck-choice-list { display:grid; gap:9px; }
.deck-choice {
  display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:12px;
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--panel2); color:var(--text); text-align:left; cursor:pointer; border-radius:6px;
}
.deck-choice:hover, .deck-choice.is-active { border-color:var(--accent); }
.deck-choice strong { color:var(--accent); }
.deck-choice span { color:var(--muted); }
.deck-choice small { color:var(--accent); font-size:9px; letter-spacing:.08em; }

.instance-grid {
  display:grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap:24px 18px;
  margin-top:16px;
}
.instance-card { min-width:0; display:grid; gap:10px; justify-items:center; }
.instance-hex {
  width:100%; max-width:190px; aspect-ratio:1/.88; background:var(--accent); clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); padding:3px;
}
.instance-hex__inner {
  width:100%; height:100%; clip-path:inherit; background:#34302a; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:14px; box-sizing:border-box;
}
.instance-hex__label { font-size:9px; letter-spacing:.1em; color:var(--muted); }
.instance-hex__inner strong { margin:5px 0; font-size:12px; line-height:1.2; }
.instance-hex__inner span { font-size:10px; color:var(--muted); }
.instance-hex__inner small { margin-top:8px; color:var(--accent); font-size:9px; }
.instance-card__actions { width:100%; display:flex; justify-content:center; }
.add-instance-button { font-size:9px; min-height:32px; padding:0 10px; }

@media (max-width: 1050px) { .instance-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); } }
@media (max-width: 760px) { .instance-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); } }
@media (max-width: 500px) { .instance-grid { grid-template-columns: 1fr; } }


/* V0.3.4 – Bearbeitetes Deck und tatsächliches Spieldeck werden getrennt dargestellt. */
.deck-tab.is-current { outline: 2px solid rgba(214, 175, 94, .65); }
.deck-tab.is-game-deck::after { content: " · SPIELDECK"; font-size: .7em; opacity: .8; }
.deck-play-control { display:flex; justify-content:flex-end; margin: 12px 0 20px; }
.deck-play-control .game-action[disabled] { opacity:.55; cursor:default; }

/* V0.3.4 – Jede konkrete Karteninstanz wird als eigene Hexagonfläche dargestellt. */
.instance-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.instance-card { display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:center; padding:16px; border:1px solid var(--border,#333); border-radius:14px; background:rgba(255,255,255,.02); }
.instance-card__hex, .detail-card-placeholder { aspect-ratio:1.1547; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background:#332f2a; outline:2px solid var(--accent); outline-offset:-2px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; box-sizing:border-box; }
.instance-card__serial { font-size:.72rem; opacity:.8; margin-bottom:8px; }
.instance-card__hex strong { font-size:1rem; }
.instance-card__hex small { margin-top:7px; }
.instance-card__meta { display:flex; flex-direction:column; gap:10px; }
.instance-card__meta > div { display:flex; flex-direction:column; gap:3px; }
.instance-card__meta span { font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; opacity:.7; }
.instance-card__meta .game-action { align-self:flex-start; margin-top:6px; }

/* DECKAUSWAHL: Eine Instanz kann in mehreren Decks liegen, aber nur einmal je Deck. */
.deck-choice.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.deck-choice.is-disabled:hover {
  transform: none;
}
.deck-choice__note {
  margin-left: auto;
  opacity: 0.8;
}


/* ================================================================
   V0.3.10 – MARKTPLATZ
   ---------------------------------------------------------------
   Gestaltung und Datenlogik bleiben getrennt. Farben, Texturen,
   Rahmen, Buttons und Kartenflächen können hier später geändert
   werden, ohne die Marktplatzlogik im JavaScript neu zu schreiben.
   ================================================================ */
.market-toolbar { display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap; }
.market-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0; }
.market-tab { border:1px solid var(--line); background:var(--panel); color:var(--muted); padding:10px 14px; border-radius:6px; cursor:pointer; }
.market-tab.is-active, .market-tab:hover { color:var(--text); border-color:var(--accent); background:var(--panel2); }
.wallet-card { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line); padding:16px 20px; border-radius:8px; min-width:210px; }
.wallet-card strong { font-size:25px; }
.wallet-card span { color:var(--muted); font-size:11px; letter-spacing:.1em; }
.market-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.market-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px; display:grid; gap:12px; }
.market-card__top { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.market-card__hex { width:150px; aspect-ratio:1/0.88; margin:0 auto; display:grid; place-items:center; text-align:center; position:relative; isolation:isolate; }
.market-card__hex::before, .market-card__hex::after { content:""; position:absolute; inset:0; clip-path:polygon(25% 3%,75% 3%,98% 50%,75% 97%,25% 97%,2% 50%); z-index:-2; }
.market-card__hex::before { background:var(--accent); }
.market-card__hex::after { inset:2px; background:#34302a; z-index:-1; }
.market-card__hex strong { font-size:14px; line-height:1.15; }
.market-card__hex small { color:var(--muted); margin-top:5px; }
.market-meta { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.market-meta div { background:var(--panel2); border:1px solid var(--line); padding:9px; border-radius:5px; }
.market-meta span { display:block; color:var(--muted); font-size:9px; letter-spacing:.1em; }
.market-meta strong { display:block; margin-top:3px; }
.market-price { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.market-price strong { color:var(--accent); font-size:22px; }
.market-button { border:1px solid var(--accent); background:var(--accent); color:#151719; padding:10px 13px; border-radius:5px; font-weight:700; cursor:pointer; }
.market-button--secondary { background:transparent; color:var(--text); border-color:var(--line); }
.market-button:hover { filter:brightness(1.06); }
.market-form { display:grid; grid-template-columns:minmax(0,1fr) 180px auto; gap:10px; align-items:end; }
.market-form label { display:grid; gap:6px; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.market-form select, .market-form input { width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:11px; border-radius:5px; }
.market-message { margin:12px 0; padding:12px; background:var(--panel2); border:1px solid var(--line); color:var(--muted); border-radius:6px; }
.market-message.is-error { border-color:#8b5b5b; color:#e0bcbc; }
.market-message.is-success { border-color:var(--accent); color:#e5d2a6; }
@media (max-width:700px) { .market-form { grid-template-columns:1fr; } .market-toolbar { align-items:stretch; } }

/* ================================================================
   V0.3.11 – HOVER-LAYER + MARKTPLATZ
   ---------------------------------------------------------------
   Hoverinformationen liegen bewusst über dem Kartengitter. Die
   Karten selbst bleiben unverändert; Gestaltung kann hier separat
   angepasst werden.
   ================================================================ */
.master-card-grid { position: relative; z-index: 1; }
.master-hex { z-index: 1; }
.master-hex:hover, .master-hex:focus-visible { z-index: 1000; }
.master-hex__hovercard { z-index: 1001 !important; }
.master-hex__hovercard strong { display:block; }

.market-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.market-subtitle { margin:5px 0 0; color:var(--muted); }
.market-tools { display:flex; gap:8px; flex-wrap:wrap; }
.market-tools input, .market-tools select { background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:10px 12px; border-radius:6px; }
.market-card__link { color:inherit; text-decoration:none; display:block; }
.market-card__link:hover { color:inherit; }
.market-card--shop { position:relative; }
.market-card--shop .market-card__hex { margin-top:4px; }
.shop-badge { position:absolute; top:12px; left:12px; font-size:9px; letter-spacing:.1em; color:var(--accent); }
.market-card__shop-number { position:absolute; top:12px; right:12px; color:var(--muted); font-size:11px; }
.market-button:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.wallet-card--spotty strong:last-child { color:var(--accent); }
@media (max-width:760px) { .market-section-head { align-items:stretch; } .market-tools { width:100%; } .market-tools > * { flex:1 1 160px; } }


/* ================================================================
   V0.3.12 – SPOTTY-BELOHNUNGEN + SPIELZENTRALE
   ---------------------------------------------------------------
   Gestaltung und Logik getrennt: Karten, Buttons, Panels und
   Belohnungskarten können hier unabhängig von der Serverlogik
   gestaltet werden.
   ================================================================ */
.reward-balance { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:18px 0 24px; padding:20px 24px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.reward-balance strong { display:block; margin-top:5px; color:var(--accent); font-size:28px; }
.reward-balance__note { color:var(--muted); max-width:520px; text-align:right; }
.reward-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-top:16px; }
.reward-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; display:grid; gap:14px; }
.reward-card.is-done { opacity:.65; }
.reward-card__head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.reward-card__head h3 { margin:5px 0 0; font-size:21px; }
.reward-card__head > strong { color:var(--accent); white-space:nowrap; }
.reward-card p { color:var(--muted); margin:0; line-height:1.5; }
.reward-card__foot { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:13px; }
.reward-state { padding:8px 10px; border:1px solid var(--line); border-radius:5px; }
.reward-state--done { color:var(--accent); border-color:var(--accent); }
.reward-info { margin-top:20px; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:20px; }
.mode-card { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px; display:grid; gap:14px; min-height:260px; }
.mode-card--ready { border-color:var(--accent); }
.mode-card__badge { color:var(--accent); font-size:10px; letter-spacing:.14em; font-weight:700; }
.mode-card h2 { margin:0; font-size:30px; }
.mode-card__subtitle { color:var(--muted); font-size:11px; letter-spacing:.12em; }
.mode-card p { color:var(--muted); line-height:1.5; margin:0; }
.mode-card__meta { border-top:1px solid var(--line); padding-top:12px; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.mode-card .game-action { justify-self:start; }
.game-mode-note { margin-top:18px; }
.game-mode-note p { color:var(--muted); line-height:1.55; }
.game-mode-placeholder { min-height:380px; display:grid; place-items:center; align-content:center; gap:12px; text-align:center; color:var(--muted); }
.game-mode-placeholder strong { color:var(--text); font-size:28px; }
/* Hovercard must be above neighboring hexagons and their stacking contexts. */
.master-card-grid { overflow:visible !important; }
.master-hex { position:relative; z-index:1; }
.master-hex:hover, .master-hex:focus-visible { z-index:9999 !important; }
.master-hex__hovercard { position:absolute !important; z-index:10000 !important; pointer-events:none; }
.master-hex:hover .master-hex__hovercard, .master-hex:focus-visible .master-hex__hovercard { z-index:10001 !important; }
@media (max-width:760px) { .mode-grid { grid-template-columns:1fr; } .reward-balance { align-items:flex-start; flex-direction:column; } .reward-balance__note { text-align:left; } }


/* V0.3.13 – Freundschaften, Geschenkfunktion, Marktplatz-Liste und Langzeitspiel */
.market-list { display:grid; gap:10px; }
.market-list-row { width:100%; text-align:left; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:8px; padding:0; cursor:pointer; overflow:hidden; }
.market-list-row:hover { border-color:var(--accent); background:var(--panel2); }
.market-list-card { display:grid; grid-template-columns:110px minmax(0,1fr) 150px; align-items:center; gap:18px; padding:12px 16px; }
.market-list-card__hex { width:92px; aspect-ratio:1.1547; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background:#34302a; outline:2px solid var(--accent); outline-offset:-2px; display:grid; place-items:center; text-align:center; padding:10px; box-sizing:border-box; }
.market-list-card__hex strong { display:block; font-size:11px; line-height:1.1; }
.market-list-card__hex small { color:var(--muted); display:block; margin-top:4px; }
.market-list-card__main { min-width:0; }
.market-list-card__title { display:flex; align-items:center; gap:10px; min-width:0; }
.market-list-card__title strong { font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.market-list-card__title span { color:var(--muted); font-size:10px; letter-spacing:.08em; }
.market-list-card__meta { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; color:var(--muted); font-size:10px; }
.market-list-card__meta strong { color:var(--text); margin-left:4px; }
.market-list-card__price { display:grid; justify-items:end; gap:2px; }
.market-list-card__price strong { color:var(--accent); font-size:20px; }
.market-list-card__price span { color:var(--muted); font-size:9px; letter-spacing:.1em; }
.market-list-card__price em { color:var(--muted); font-style:normal; font-size:9px; margin-top:5px; }
.market-detail-modal { max-width:760px; }
.market-detail-layout { display:grid; grid-template-columns:180px 1fr; gap:22px; align-items:center; }
.market-detail-hex { width:180px; aspect-ratio:1.1547; clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%); background:#34302a; outline:2px solid var(--accent); outline-offset:-2px; display:grid; place-items:center; text-align:center; padding:20px; box-sizing:border-box; }
.market-detail-hex span,.market-detail-hex small { color:var(--muted); font-size:10px; }
.market-detail-hex strong { font-size:17px; line-height:1.15; margin:6px 0; }
.market-detail-info { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.market-detail-info div { background:var(--panel2); border:1px solid var(--line); padding:11px; border-radius:6px; }
.market-detail-info span,.market-detail-price span { display:block; color:var(--muted); font-size:9px; letter-spacing:.1em; }
.market-detail-info strong { display:block; margin-top:4px; word-break:break-word; }
.market-detail-price { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; display:flex; align-items:center; gap:16px; }
.market-detail-price > strong { color:var(--accent); font-size:25px; }
.instance-card__buttons { display:flex; flex-wrap:wrap; gap:8px; }
.instance-card__buttons .game-action { margin-top:6px; }
.game-action:disabled { opacity:.45; cursor:not-allowed; }
.friend-search-input { width:100%; box-sizing:border-box; background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:11px 12px; border-radius:6px; margin:10px 0; }
.friend-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:12px; }
.friends-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.friends-grid > .panel:first-child { grid-column:1 / -1; }
.longgame-select { display:grid; gap:6px; color:var(--muted); font-size:10px; letter-spacing:.1em; }
.longgame-select select { background:var(--panel2); color:var(--text); border:1px solid var(--line); padding:10px; border-radius:5px; }
@media(max-width:800px){.market-list-card{grid-template-columns:82px minmax(0,1fr);}.market-list-card__price{grid-column:2;justify-items:start;}.market-detail-layout{grid-template-columns:1fr;}.market-detail-hex{margin:auto;}.market-detail-price{grid-column:auto;}.friends-grid{grid-template-columns:1fr;}.friends-grid > .panel:first-child{grid-column:auto;}}

/* Explorer: eigenständiges Kartenspiel-Ökosystem */
.explorer-sidebar { background: #101112; }
.explorer-mark { margin: 20px 18px 14px; padding: 12px 14px; border: 1px solid rgba(202,168,90,.28); border-radius: 10px; background: rgba(202,168,90,.05); display:flex; flex-direction:column; gap:4px; }
.explorer-mark span { font-size:.68rem; letter-spacing:.16em; color:var(--muted); }
.explorer-mark strong { font-size:.92rem; letter-spacing:.08em; }
.explorer-sidebar nav { margin-top: 4px; }
.explorer-sidebar nav a { position:relative; }
.explorer-sidebar nav a.is-active::before { content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; background:var(--accent); border-radius:3px; }
.explorer-exit--sidebar { display:block; margin:22px 18px 0; padding:10px 12px; border:1px solid var(--border,#333); border-radius:8px; color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-align:center; }
.explorer-exit--sidebar:hover { color:var(--text); border-color:var(--accent); }
.explorer-exit-top { white-space:nowrap; }
.explorer-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:24px; }
.explorer-hero h2 { margin:.2rem 0 .55rem; font-size:2rem; }
.explorer-hero p { margin:0; max-width:760px; }
.explorer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.explorer-card { display:flex; flex-direction:column; gap:10px; min-height:170px; padding:24px; border:1px solid var(--border,#333); border-radius:14px; background:#202326; color:inherit; text-decoration:none; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.explorer-card:hover { transform:translateY(-2px); border-color:var(--accent); background:#25282b; }
.explorer-card--large { grid-column:span 2; min-height:190px; }
.explorer-card h2 { margin:0; font-size:1.45rem; }
.explorer-card p { margin:0; color:var(--muted); max-width:720px; }
.explorer-card strong { margin-top:auto; color:var(--accent); font-size:.78rem; letter-spacing:.08em; }
.explorer-status { margin-top:20px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:0; padding:0; overflow:hidden; }
.explorer-status > div { padding:18px 20px; border-right:1px solid var(--border,#333); display:flex; flex-direction:column; gap:6px; }
.explorer-status > div:last-child { border-right:0; }
.explorer-status span { color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; }
.explorer-status strong { font-size:1.25rem; }
@media (max-width: 900px) { .explorer-grid { grid-template-columns:1fr; } .explorer-card--large { grid-column:span 1; } .explorer-status { grid-template-columns:1fr 1fr; } .explorer-hero { flex-direction:column; align-items:flex-start; } }
@media (max-width: 560px) { .explorer-status { grid-template-columns:1fr; } .explorer-status > div { border-right:0; border-bottom:1px solid var(--border,#333); } }

.instance-card__gift-blocked { margin-top:8px; padding:9px 10px; border:1px solid rgba(202,168,90,.22); border-radius:8px; background:rgba(202,168,90,.045); display:flex; flex-direction:column; gap:3px; }
.instance-card__gift-blocked strong { font-size:.67rem; letter-spacing:.08em; color:var(--accent); }
.instance-card__gift-blocked span { font-size:.78rem; color:var(--muted); line-height:1.35; }

/* V0.3.18 – gemeinsame Kontoübersicht im Explorer-Spielökosystem */
.game-overview { margin: 0 0 22px; padding: 0; display:grid; grid-template-columns: minmax(190px,1.45fr) repeat(6,minmax(105px,1fr)); overflow:hidden; border-color:rgba(202,168,90,.22); background:linear-gradient(135deg,rgba(202,168,90,.07),rgba(255,255,255,.02)); }
.game-overview__identity,.game-overview__metric { min-width:0; padding:16px 17px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; gap:4px; }
.game-overview__metric:last-child { border-right:0; }
.game-overview__eyebrow,.game-overview__metric > span { color:var(--muted); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.game-overview__identity strong { font-size:20px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.game-overview__identity > span:last-child { color:var(--muted); font-size:11px; }
.game-overview__metric strong { color:var(--text); font-size:20px; line-height:1.1; }
.game-overview__metric--spotty strong { color:var(--accent); }
.game-overview__metric small { color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-overview__progress { height:4px; background:rgba(255,255,255,.08); border-radius:5px; overflow:hidden; margin-top:3px; }
.game-overview__progress i { display:block; height:100%; width:0; background:var(--accent); transition:width .25s ease; }
.friend-result { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); background:var(--panel2); border-radius:6px; }
.friend-result strong { color:var(--accent); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.friend-result .market-button { flex:0 0 auto; white-space:nowrap; }
.friend-result .market-button:disabled { opacity:.7; cursor:default; }
@media(max-width:1200px){.game-overview{grid-template-columns:1.4fr repeat(3,1fr);}.game-overview__metric{border-bottom:1px solid var(--line);}.game-overview__metric:nth-last-child(-n+3){border-bottom:0;}}
@media(max-width:700px){.game-overview{grid-template-columns:1fr 1fr;}.game-overview__identity{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);}.game-overview__metric{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;}.game-overview__metric:nth-child(odd){border-right:0!important;}.friend-result{align-items:flex-start;flex-direction:column;gap:10px;}.friend-result .market-button{width:100%;}}


/* V0.4.4 – Spielauswertung in der Spielzentrale */
.game-overview__games{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:4px;padding-top:14px;border-top:1px solid #34383b}
.game-overview__games-title{grid-column:1/-1;font-size:11px;letter-spacing:1.5px;font-weight:700;color:#c9a85d}
.game-overview__games>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px;background:#202427;border:1px solid #303538;border-radius:7px}
.game-overview__games>div span{font-size:10px;letter-spacing:1px;color:#9ea4a8}
.game-overview__games>div strong{font-size:18px;color:#f2f2f2}
@media (max-width:900px){.game-overview__games{grid-template-columns:repeat(2,minmax(0,1fr))}.game-overview__games-title{grid-column:1/-1}}

/* Öffentliche Hauptnavigation – SPOT THE WORLD V0.4.18.5 */
.public-shell .app { display:block; min-height:100vh; }
.public-shell .content { max-width:none; width:100%; padding:30px 36px 44px; }
.public-nav { height:50px; display:flex; align-items:center; gap:28px; padding:0 28px; background:#101112; border-bottom:1px solid var(--line); position:relative; z-index:20; }
.public-nav__brand { color:var(--text); font-weight:800; letter-spacing:.09em; white-space:nowrap; margin-right:12px; }
.public-nav__links { display:flex; align-items:center; gap:4px; min-width:0; }
.public-nav__links a { color:var(--muted); text-decoration:none; padding:9px 11px; border-radius:5px; font-size:11px; letter-spacing:.08em; font-weight:700; }
.public-nav__links a:hover,.public-nav__links a.is-active { color:var(--text); background:var(--panel); }
.public-nav__spacer { flex:1; }
.public-nav__auth { display:flex; align-items:center; gap:7px; }
.public-nav__auth a { text-decoration:none; border:1px solid var(--line); color:var(--muted); padding:8px 10px; border-radius:5px; font-size:9px; letter-spacing:.09em; font-weight:700; }
.public-nav__auth a:hover { color:var(--text); border-color:var(--accent); }
.public-nav__auth .is-primary { background:var(--accent); color:#171717; border-color:var(--accent); }
.public-nav__auth .is-primary:hover { filter:brightness(1.04); color:#171717; }
.public-nav__test { color:var(--muted); font-size:9px; letter-spacing:.08em; padding-left:8px; }
@media(max-width:900px){
  .public-nav { height:auto; min-height:56px; padding:10px 14px; gap:10px; flex-wrap:wrap; }
  .public-nav__brand { margin-right:auto; }
  .public-nav__links { order:3; width:100%; overflow:auto; padding-bottom:2px; }
  .public-nav__auth { margin-left:auto; }
}
@media(max-width:900px){
  .public-shell .content { padding:26px 24px 38px; }
}
@media(max-width:560px){
  .public-shell .content { padding:22px 16px 32px; }
  .public-nav__auth a:not(.is-primary) { display:none; }
  .public-nav__links a { font-size:9px; padding:8px 7px; }
}

/* V0.4.18.6 – Mein Bereich / Errungenschaften */
.achievements-panel { margin-top:18px; }
.achievement-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.achievement-card { min-height:82px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; padding:13px; background:var(--panel2); border:1px solid var(--line); border-radius:7px; }
.achievement-card__symbol { color:var(--accent); font-size:23px; text-align:center; }
.achievement-card strong { display:block; font-size:12px; }
.achievement-card small { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.4; }
.achievement-card b { color:var(--accent); font-size:9px; white-space:nowrap; }
.achievement-card--locked { opacity:.58; }
@media(max-width:1000px){ .achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .achievement-grid { grid-template-columns:1fr; } }

/* Multilingual selector */
.stw-language{display:flex;align-items:center;gap:5px;margin-right:8px;color:var(--muted);font-size:8px;letter-spacing:.08em;font-weight:700}
.stw-language span{display:none}.stw-language select{font:inherit;padding:6px 7px;border-radius:5px;background:#181a1c;color:var(--muted);border:1px solid var(--line);cursor:pointer}.stw-language select:focus{border-color:var(--accent);outline:none}
@media(max-width:760px){.stw-language{margin-right:2px}.stw-language select{padding:5px 4px}}

/* V0.4.18.12 – public account/legal refinements */
.member-session{display:flex;align-items:center;gap:10px}.member-session__name{font-size:11px;color:var(--muted);letter-spacing:.06em}.public-footer{margin:42px 0 0;padding:22px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;align-items:center;color:var(--muted);font-size:11px}.public-footer__links{display:flex;gap:16px;flex-wrap:wrap}.public-footer a{color:var(--muted);text-decoration:none}.public-footer a:hover{color:var(--accent)}.legal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.legal-card{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:9px}.legal-card h2{margin:0 0 10px}.legal-note{padding:14px 16px;background:#1a1c1e;border:1px solid var(--line);border-radius:7px;color:var(--muted)}@media(max-width:800px){.legal-grid{grid-template-columns:1fr}.public-footer{display:block}.public-footer__links{margin-top:12px}}

/* V0.4.18.13 – Mein Bereich: Avatar + Entdeckerfortschritt */
.account-avatar{display:grid;place-items:center;overflow:hidden;text-decoration:none;background:linear-gradient(160deg,#202322,#111);border:1px solid rgba(217,188,88,.45)!important;color:var(--accent)!important}.account-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top}.account-avatar-name{font-size:10px;color:var(--muted);margin-top:6px}.account-avatar-link{display:inline-block;margin-top:10px;color:var(--accent);font-size:9px;font-weight:700;text-decoration:none;letter-spacing:.08em}.level-link{color:inherit;text-decoration:none}.level-link:hover{color:var(--accent)}.account-activity-list{display:grid;gap:8px}.account-activity{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.account-activity:last-child{border-bottom:0}.account-activity__symbol{color:var(--accent)}.account-activity strong{display:block;font-size:11px}.account-activity small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.account-activity b{color:var(--accent);font-size:10px}.account-activity-empty{padding:12px 0;color:var(--muted);font-size:10px;line-height:1.55}.achievement-card--locked{opacity:.52}.achievement-card:not(.achievement-card--locked){opacity:1}

/* V0.4.18.18 */
.panel,.stats-grid article,.profile-row,.tiles a{box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 28px rgba(0,0,0,.14)}
.member-stamp-preview{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}.member-stamp-mini{width:112px;min-height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid rgba(217,188,88,.18);background:linear-gradient(145deg,rgba(217,188,88,.08),rgba(255,255,255,.02));border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 18px rgba(0,0,0,.18)}.member-stamp-mini img{width:78px;height:78px;object-fit:contain}.member-stamp-mini span{width:62px;height:62px;border:2px double var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:11px;font-weight:800}.member-stamp-mini small{font-size:8px;color:var(--muted);text-align:center}.member-stamp-empty{color:var(--muted);font-size:10px;padding:12px 0}
@media(min-width:901px){.stats-grid{grid-template-columns:repeat(5,1fr)}}


/* V0.4.18.32 – official public logos */
.public-nav__brand{
  display:block;
  width:180px;
  height:42px;
  flex:0 0 180px;
  background:url('') center left/contain no-repeat;
  color:transparent;
  font-size:0;
  line-height:0;
  overflow:hidden;
  text-decoration:none;
}
.public-nav__brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@media(max-width:900px){
  .public-nav__brand{width:155px;flex-basis:155px;height:38px}
}
@media(max-width:600px){
  .public-nav__brand{width:135px;flex-basis:135px;height:34px}
}
.referral-panel{margin-top:16px}
.referral-box{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.referral-box strong{font-size:13px}
.referral-box p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.referral-code{font-family:monospace;letter-spacing:.18em;color:var(--accent);border:1px solid rgba(217,188,88,.3);background:rgba(217,188,88,.05);padding:12px 16px;border-radius:6px;font-weight:800}
.referral-progress{margin-top:10px;color:var(--muted);font-size:9px;letter-spacing:.06em}
@media(max-width:700px){.referral-box{grid-template-columns:1fr}.referral-code{width:max-content}}

/* V0.5.41 – Authentifizierung, eigenständiges responsives Layout */
.auth-page{width:100%;min-height:calc(100vh - 170px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(32px,6vw,90px) 18px!important;box-sizing:border-box}
.auth-card{display:flex!important;flex-direction:column!important;gap:17px!important;width:min(100%,540px)!important;max-width:540px!important;padding:clamp(24px,4vw,46px)!important;background:#1d2023!important;border:1px solid #45403a!important;border-radius:14px!important;box-shadow:0 20px 70px #0006;box-sizing:border-box}
.auth-card h1{margin:0;font-size:clamp(32px,4vw,46px);line-height:1.1}.auth-card .page-intro{margin:0 0 10px;color:#b8bcc1;line-height:1.55}
.auth-card label{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:100%!important;font-size:12px!important;letter-spacing:.08em;font-weight:700;color:#d4d7dc}
.auth-card input{display:block!important;width:100%!important;min-height:46px!important;padding:12px 14px!important;box-sizing:border-box!important;background:#111315!important;color:#f7f7f7!important;border:1px solid #41464b!important;border-radius:7px!important;font:inherit!important;letter-spacing:normal!important}
.auth-card input:focus{outline:2px solid #dbb957!important;outline-offset:1px}.auth-card button[type=submit]{min-height:46px;width:100%;justify-content:center}.auth-card a{color:#e2bd58!important;text-decoration:none}.auth-card a:hover{text-decoration:underline}.auth-card .auth-note{margin:0;color:#b8bcc1;line-height:1.5}.auth-card .label-note{font-size:11px;color:#aeb3b9}
@media(max-width:600px){.auth-page{padding:25px 12px!important}.auth-card{padding:24px 18px!important}}

/* V0.5.56: real logo replacement, never overlay old CSS background */
.public-nav__brand{background-image:none!important;display:flex;align-items:center;justify-content:flex-start;font-size:0}
.public-nav__brand img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:left center}

/* STW article media sizing correction */
.article-content .stw-video-wrap{position:relative!important;aspect-ratio:16/9!important;height:auto!important;min-height:0!important;overflow:visible!important}.article-content .stw-video-wrap iframe{position:absolute!important;inset:0;width:100%!important;height:100%!important;border:0}.article-content figure{height:auto!important;min-height:0!important}.article-content figure img{display:block;max-width:100%;height:auto!important}
/* R5: Hover-Vorschau blockiert keine Karteninteraktion. */
.worldmap-popup--hover { pointer-events:none !important; }