/* Hidden attribute fix - HTML [hidden] muss display: none ueberschreiben
   sonst gewinnt display:flex auf .modal etc. und alle Overlays sind beim Start sichtbar. */
[hidden] { display: none !important; }

/* ── Result-Alternatives (bei niedriger Confidence) ──────── */
.result-alternatives {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.alt-title {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.alt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.alt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
}
.alt-card:hover, .alt-card:active {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.alt-image {
  width: 100%;
  aspect-ratio: 0.72;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  margin-bottom: 4px;
}
.alt-name {
  font-size: 0.7rem;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alt-dist {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.result-confidence.medium { color: var(--warn); }
.result-confidence.low    { color: var(--error); font-weight: 600; }

/* No-Match-Modus: keine "winner"-Karte, alle Kandidaten gleichberechtigt */
.no-match-title {
  color: var(--warn);
  text-align: center;
  font-size: 1.15rem;
}
.no-match-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
  margin: 8px 0 16px;
}
.alt-grid-large {
  grid-template-columns: repeat(4, 1fr);
}
.alt-grid-large .alt-card {
  padding: 10px 6px;
}
.alt-grid-large .alt-name {
  font-size: 0.75rem;
  white-space: normal;
  line-height: 1.25;
  height: 2.5em;
}
.alt-image.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 2rem;
  font-weight: 700;
}

/* ── Live-Mode ──────────────────────────────────────── */
/* Canvas-Overlay MUSS exakt der video-Geometrie folgen (object-fit:cover).
   width/height:100% + object-fit:cover stellt sicher dass das interne
   Canvas-Pixel-Koord-System dem Video-natural-Size 1:1 entspricht. */
.live-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 5;
}

.live-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.live-toggle:hover { border-color: var(--accent); }

.live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.2s;
}

.live-toggle.active {
  background: rgba(239, 68, 68, 0.18);
  border-color: var(--error);
  color: var(--error);
}
.live-toggle.active .live-dot {
  background: var(--error);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.7); }
  50%      { box-shadow: 0 0 0 12px rgba(248, 113, 113, 0); }
}

.live-status {
  position: absolute;
  top: 70px;
  right: 16px;
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  color: var(--text-dim);
  z-index: 10;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Result-Body scrollt, Actions bleiben unten sichtbar */
#result-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 6px;
}
.result-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, var(--bg-elevated) 30%);
  padding: 12px 0 16px;
  margin-top: 8px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.result-actions .btn { flex: 1; }

/* ── Result-Compare: Aufnahme / YOLO-Crop / Match nebeneinander ──── */
/* Kompakter: kleinere Bilder, eine Zeile, fits in 100px Hoehe */
.result-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 4px;
  align-items: center;
  margin-bottom: 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  max-width: 380px;       /* nicht volle Breite */
  margin-left: auto;
  margin-right: auto;
}
.cmp-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cmp-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 600;
}
.cmp-cell.match .cmp-label { color: var(--accent); }
.cmp-img {
  width: 100%;
  max-width: 70px;        /* kompakter: passt zusammen mit Karte+Preisen in 1 Viewport */
  aspect-ratio: 0.72;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.cmp-img.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 1.5rem;
}
.cmp-arrow {
  color: var(--text-dim);
  font-size: 1.1rem;
  align-self: center;
  padding-top: 14px;  /* vertikal mit den Bildern ausgerichtet */
}

/* ScanDex - Multi-TCG Scanner PWA
 * Dark UI mit gold accent. Mobile-first.
 */

:root {
  --bg:           #0a0e1a;
  --bg-elevated: #141a2e;
  --bg-card:    #1c2238;
  --border:     #232b45;
  --text:       #e8ecf5;
  --text-dim:   #8a93ad;
  --accent:     #ffd45a;       /* gold */
  --accent-hot: #ffb84d;
  --success:    #4ade80;
  --error:      #f87171;
  --warn:       #fb923c;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.4);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overscroll-behavior-y: none;
  overflow: hidden;        /* Page selbst NIE scrollen — alle Views passen sich an viewport an */
}

#app {
  height: 100vh;
  height: 100dvh;           /* dvh = dynamic viewport height (Mobile URL-Bar-aware) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Alle Top-Level Sections nehmen exakt den verfuegbaren Platz, keine eigene Scroll */
.collection-view,
.camera-view,
.game-selector {
  min-height: 0;            /* erlaubt flex-children korrekt zu shrinken */
  overflow: hidden;
}

/* ── Header ─────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.15rem;
}

/* Klickbarer Brand-Link: zurueck zur ScanDex-Landing */
.brand-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 8px;
  transition: background 0.15s ease;
  min-height: 44px;
}
.brand-link:hover,
.brand-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.brand-back {
  color: var(--accent, #ffd45a);
  opacity: 0.75;
  transition: transform 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}
.brand-link:hover .brand-back {
  opacity: 1;
  transform: translateX(-2px);
}

.brand-icon { font-size: 1.4rem; }

/* SVG-Logo: Camera-Viewfinder + Karte. Scan-Animation: separater Overlay-Div */
.brand-logo-wrap {
  position: relative;
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}
.brand-logo {
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 212, 90, 0.45));
  transition: filter 0.2s ease, transform 0.2s ease;
}
.brand-link:hover .brand-logo {
  filter: drop-shadow(0 0 10px rgba(255, 212, 90, 0.75));
  transform: scale(1.05);
}
/* Blaue Scan-Linie wie auf der Landing-Gulurak-Card.
   Cyan Balken (3px) mit Glow, animiert top 10%->90%->10%. */
.brand-logo-scan {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 3px;
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.95) 50%, transparent 100%);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.95), 0 0 22px rgba(34, 211, 238, 0.5);
  border-radius: 2px;
  pointer-events: none;
  animation: brand-logo-scan 1.8s linear infinite;
}
@keyframes brand-logo-scan {
  0%   { top: 10%; }
  50%  { top: 88%; }
  100% { top: 10%; }
}
/* Cover-Logo (im Sammelbuch): gleicher Scan-Effekt, skaliert. */
.cover-logo-wrap {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(80px, 14vh, 130px);
  height: clamp(80px, 14vh, 130px);
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 6px;
  filter: drop-shadow(0 0 22px rgba(255, 184, 77, 0.65))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.cover-logo-wrap .cover-logo {
  position: static;
  top: auto; left: auto;
  width: 100%;
  height: 100%;
  transform: none;
  filter: none;
}
.cover-logo-scan {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 5px;
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.95) 50%, transparent 100%);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.95), 0 0 32px rgba(34, 211, 238, 0.55);
  border-radius: 3px;
  pointer-events: none;
  animation: brand-logo-scan 1.8s linear infinite;
}
.brand-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.icon-btn {
  background: transparent;
  border: none;
  color: var(--text);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.icon-btn:hover, .icon-btn:focus {
  background: var(--bg-card);
}

.text-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}

/* ── Game Selector ──────────────────── */
.game-selector {
  padding: clamp(16px, 4vh, 30px) 20px;
  flex: 1;
  /* zentriert die Game-Cards vertikal in der verfuegbaren Hoehe */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-title {
  font-size: 1.5rem;
  margin-bottom: clamp(14px, 3vh, 24px);
  color: var(--text);
  text-align: center;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 500px;
  margin: 0 auto;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.game-card:not(.disabled):hover,
.game-card:not(.disabled):active {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.game-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.game-card-emoji {
  font-size: 3rem;
  margin-bottom: 8px;
  display: block;
}
.game-card-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
}
.game-card-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.game-card.disabled .game-card-icon { opacity: 0.55; }
.game-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.game-card-status {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.game-card.disabled .game-card-status {
  color: var(--warn);
}

/* ── Camera View ────────────────────── */
.camera-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  position: relative;
}
/* Hauptbereich: Video + Stream-Sidebar nebeneinander (Desktop) bzw. übereinander (Mobile) */
.camera-main {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}
.camera-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #000;
  min-width: 0;
}

/* ── Live-Stream-Sidebar: rechts vom Video, sammelt erkannte Karten ── */
.live-stream {
  width: 280px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(20, 24, 56, 0.97), rgba(14, 18, 40, 0.99));
  border-left: 1px solid rgba(255, 184, 77, 0.32);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 5;
  animation: stream-slide-in 0.3s cubic-bezier(0.34, 1.35, 0.64, 1);
  box-shadow: -2px 0 18px rgba(0, 0, 0, 0.45);
}
@keyframes stream-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.live-stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 184, 77, 0.22);
  background: linear-gradient(180deg, rgba(28, 32, 70, 0.9), rgba(20, 24, 56, 0.95));
  /* Header ist jetzt klickbar (button) - reset button defaults */
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  gap: 10px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.live-stream-header:hover,
.live-stream-header:active {
  background: linear-gradient(180deg, rgba(38, 42, 90, 0.95), rgba(28, 32, 70, 0.98));
}
.live-stream-header:focus-visible {
  outline: 2px solid rgba(255, 184, 77, 0.55);
  outline-offset: -3px;
}
.stream-chevron {
  margin-left: auto;
  color: #ffd47a;
  font-size: 0.9rem;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  text-shadow: 0 0 6px rgba(255, 184, 77, 0.45);
}
.live-stream.collapsed .stream-chevron { transform: rotate(-90deg); }

/* Body collapse: smooth height transition */
.live-stream-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 9999px;
  opacity: 1;
}
.live-stream.collapsed .live-stream-body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
/* Wenn collapsed: shrink container damit Kamera maximal Platz hat */
.live-stream.collapsed {
  max-height: none !important;
  flex-shrink: 0;
}
/* Pulse-Effekt am count-badge wenn collapsed + neue Karte > 0 */
.live-stream.collapsed .stream-count {
  animation: stream-count-pulse 1.6s ease-in-out infinite;
}
@keyframes stream-count-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 10px rgba(255, 184, 77, 0.4); }
  50%      { transform: scale(1.12); box-shadow: 0 0 18px rgba(255, 184, 77, 0.9); }
}
.stream-title {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  color: #ffd47a;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  text-shadow: 0 0 10px rgba(255, 184, 77, 0.3);
}
.stream-count {
  background: linear-gradient(180deg, #ffb84d, #c97818);
  color: #1a1230;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  border-radius: 99px;
  min-width: 28px;
  padding: 2px 9px;
  text-align: center;
  font-size: 0.85rem;
  box-shadow: 0 0 10px rgba(255, 184, 77, 0.4);
}
.live-stream-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ffb84d transparent;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stream-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  background: linear-gradient(135deg, rgba(40, 30, 70, 0.65), rgba(28, 22, 52, 0.85));
  border: 1px solid rgba(255, 184, 77, 0.3);
  border-radius: 8px;
  padding: 8px;
  cursor: default;
  position: relative;
  animation: stream-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.2s;
}
@keyframes stream-pop-in {
  from { opacity: 0; transform: translateX(20px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.stream-item:hover {
  border-color: rgba(255, 212, 122, 0.7);
  background: linear-gradient(135deg, rgba(50, 40, 90, 0.85), rgba(38, 32, 70, 0.95));
  box-shadow: 0 0 16px rgba(255, 184, 77, 0.25);
}
.stream-item-img {
  width: 50px;
  aspect-ratio: 0.71;
  background-size: cover;
  background-position: center;
  background-color: #1a1230;
  border-radius: 4px;
  border: 1px solid rgba(255, 184, 77, 0.4);
}
.stream-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stream-item-name {
  color: #f0e8d0;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Cinzel', Georgia, serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-item-price {
  color: #ffd47a;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: 'Cinzel', Georgia, serif;
}
.stream-item-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stream-item-add,
.stream-item-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 184, 77, 0.5);
  color: #ffd47a;
  border-radius: 4px;
  width: 28px;
  height: 26px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: all 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stream-item-add:hover {
  background: linear-gradient(180deg, #ffb84d, #c97818);
  color: #1a1230;
  transform: scale(1.1);
}
.stream-item-dismiss {
  border-color: rgba(220, 100, 100, 0.5);
  color: #ee7878;
}
.stream-item-dismiss:hover {
  background: rgba(201, 56, 56, 0.85);
  color: #fff;
  transform: scale(1.1);
}
.stream-item.added {
  opacity: 0.45;
  background: linear-gradient(135deg, rgba(80, 140, 80, 0.4), rgba(40, 100, 40, 0.5));
  border-color: rgba(120, 200, 120, 0.5);
}
.stream-item.added .stream-item-add { display: none; }
.stream-item-added-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: linear-gradient(180deg, #6acc6a, #3aaa3a);
  color: #fff;
  border-radius: 99px;
  padding: 1px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 8px rgba(106, 204, 106, 0.5);
}
.stream-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #8a93b8;
  font-size: 0.85rem;
  font-style: italic;
  padding: 24px;
  line-height: 1.5;
  font-family: Georgia, serif;
}
.stream-add-all-btn {
  margin: 10px;
  background: linear-gradient(180deg, #ffb84d, #c97818);
  color: #1a1230;
  border: 1px solid #ffd47a;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  transition: all 0.2s;
  box-shadow: 0 0 16px rgba(255, 184, 77, 0.35);
}
.stream-add-all-btn:hover {
  background: linear-gradient(180deg, #ffe9a8, #ffb84d);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255, 184, 77, 0.55);
}

/* Mobile: Stream wird zum unteren horizontalen Strip */
@media (max-width: 760px) {
  .camera-main { flex-direction: column; }
  .live-stream {
    width: 100%;
    max-height: 38vh;
    border-left: none;
    border-top: 1px solid rgba(255, 184, 77, 0.32);
    animation: stream-slide-up 0.3s cubic-bezier(0.34, 1.35, 0.64, 1);
  }
  @keyframes stream-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none;
}

.card-frame {
  width: 65%;
  max-width: 320px;
  aspect-ratio: 0.7;
  border: 3px dashed var(--accent);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
}

.camera-hint {
  position: absolute;
  bottom: 20%;
  color: var(--text);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
  font-size: 0.95rem;
  font-weight: 500;
}

.camera-controls {
  background: var(--bg);
  padding: 18px 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
}

.ctrl-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--bg-card);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .1s;
}
.ctrl-btn:active {
  transform: scale(0.92);
}

.ctrl-btn.capture {
  width: 76px;
  height: 76px;
  background: transparent;
  border: 4px solid var(--accent);
  position: relative;
}
.capture-inner {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .1s;
}
.ctrl-btn.capture:active .capture-inner {
  transform: scale(0.85);
}

.game-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Modal (Result) ─────────────────── */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;       /* zentriert im Viewport — kein Scroll-Down noetig */
  justify-content: center;
  padding: 12px;             /* Safety-Pad gegen Viewport-Edges */
  animation: fadeIn .2s ease-out;
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.modal-content {
  background: var(--bg-elevated);
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
  position: relative;
  max-height: calc(100dvh - 24px);   /* dvh = dynamic viewport (Mobile-aware) */
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* niemals Page-Scroll, nur interner Scroll falls noetig */
  animation: slideUp .25s ease-out;
}
.modal-content #result-body {
  overflow-y: auto;                  /* interner Scroll falls Inhalt zu hoch */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  min-height: 0;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 2rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  line-height: 1;
}

/* Result Card — kompakt damit alles in 1 Viewport sichtbar */
.result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.result-image {
  width: 38%;
  max-width: 160px;
  aspect-ratio: 0.7;
  border-radius: 10px;
  background: var(--bg-card);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-md);
}

.result-name {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  margin: 2px 0;
  line-height: 1.2;
}

/* Auto-Confirm-Banner: nach 3 konsistenten Yellow-Scans gepromoted zu green */
.auto-confirm-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.18), rgba(34, 197, 94, 0.10));
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  animation: auto-confirm-pulse 0.6s ease-out;
}
@keyframes auto-confirm-pulse {
  0%   { transform: scale(0.95); opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.meta-pill {
  background: var(--bg-card);
  color: var(--text-dim);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.result-prices {
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.price-row {
  display: flex;
  flex-direction: column;
}
.price-label { font-size: 0.75rem; color: var(--text-dim); }
.price-value { font-size: 1rem; font-weight: 600; color: var(--accent); }

.result-confidence {
  font-size: 0.85rem;
  color: var(--success);
  font-weight: 500;
}
.result-confidence.low { color: var(--warn); }

.result-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.btn {
  flex: 1;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s, opacity .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #1a1100;
}
.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Result: Fail / no match */
.result-fail {
  text-align: center;
  padding: 30px 16px;
}
.result-fail-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 12px;
}
.result-fail-msg {
  color: var(--text-dim);
  margin-bottom: 20px;
}

/* ── Loading ────────────────────────── */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--bg-card);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.loading-text {
  color: var(--text);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   Sammelbuch v3 — Magisches offenes Buch mit Doppelseite
   Palette: Royal Indigo + Bernstein/Gold + Creme-Pergament + Rotes Ribbon
   Vibe: freudig + spielerisch (TCG-Sammler-Magie statt dunkles Burgundy)
   ════════════════════════════════════════════════════════════════ */

/* Spielerische Schrift via Google Font (Cinzel = klassisch römisch, magisch) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=MedievalSharp&display=swap');

.collection-view.album-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Magischer Nacht-Himmel-Hintergrund mit subtle nebula */
  background:
    radial-gradient(ellipse at 20% 30%, rgba(120, 80, 220, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 180, 80, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at center, rgba(40, 50, 110, 0.4) 0%, transparent 70%),
    linear-gradient(180deg, #0e1230 0%, #181a3a 50%, #0c0e22 100%);
  position: relative;
  min-height: 0;
  overflow: hidden;
}
/* Funkelnde Sterne im Hintergrund (kleine punkte, kaum wahrnehmbar) */
.collection-view.album-view::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(255,255,255,0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,210,150,0.75) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70% 20%, rgba(255,255,255,0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(180,210,255,0.65) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 60% 85%, rgba(255,255,255,0.6) 50%, transparent 51%);
  background-size: 350px 350px;
  pointer-events: none;
  animation: stars-twinkle 8s ease-in-out infinite;
  z-index: 1;
}
@keyframes stars-twinkle {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.album-header {
  display: grid;
  grid-template-columns: 40px 1fr 80px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 180, 80, 0.25);
  background: linear-gradient(180deg,
    rgba(14, 18, 48, 0.94) 0%,
    rgba(22, 26, 60, 0.88) 100%);
  backdrop-filter: blur(8px);
  z-index: 3;
  position: relative;
}
.album-header h2 {
  text-align: center;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #ffe9a8 0%, #ffb84d 60%, #c97818 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Gold-Glow Drop-Shadow */
  filter: drop-shadow(0 0 14px rgba(255, 184, 77, 0.45)) drop-shadow(0 2px 2px rgba(0,0,0,0.6));
  position: relative;
}
/* Dekorative Linien links/rechts vom Titel */
.album-header h2::before,
.album-header h2::after {
  content: "❖";
  display: inline-block;
  font-size: 0.7em;
  color: #ffb84d;
  margin: 0 0.7em;
  vertical-align: 0.2em;
  -webkit-text-fill-color: #ffb84d;
}
.album-header .icon-btn { color: #ffb84d; }
.album-header .icon-btn:hover { color: #ffe9a8; }

/* Stats Panel */
.album-stats {
  padding: 12px 20px;
  background: linear-gradient(180deg, rgba(20, 24, 56, 0.96), rgba(14, 18, 40, 0.92));
  border-bottom: 1px solid rgba(255, 180, 80, 0.2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px;
  text-align: center;
  animation: stats-drop 0.3s cubic-bezier(0.34, 1.35, 0.64, 1);
  z-index: 2;
  position: relative;
  transition: padding 0.25s, max-height 0.25s ease;
  max-height: 200px;
  overflow: hidden;
}
/* Minimized-state: kompakt aber sichtbar (toggle via Stats-Button) */
.album-stats.minimized {
  padding: 4px 20px;
  max-height: 36px;
}
.album-stats.minimized .stat-num { font-size: 0.95rem; }
.album-stats.minimized .stat-label { display: none; }
.album-stats.minimized .balance-delta { display: none; }
@keyframes stats-drop {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.stat-block .stat-num {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffd47a;
  text-shadow: 0 0 12px rgba(255, 184, 77, 0.5);
}
.stat-block .stat-label {
  font-size: 0.68rem;
  color: #a8b0d8;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Portfolio-Bilanz im Sammelbuch: Wert mit Tages-Delta (Trading-Style) */
.balance-block {
  position: relative;
}
.balance-delta {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.04em;
}
.balance-delta.up   { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.4); }
.balance-delta.down { color: #f87171; text-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }
.balance-delta.flat { color: #94a3b8; opacity: 0.7; }
.top-card .stat-label {
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  color: #ffd47a;
  opacity: 0.85;
}

/* Owned-Banner: zeigt im Scan-Result an ob die Karte schon in Sammlung ist */
.owned-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 4px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}
.owned-banner.owned {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(96, 165, 250, 0.30);
  color: #93c5fd;
}
.owned-banner.missing {
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.20), rgba(244, 114, 182, 0.10));
  border: 1px solid rgba(236, 72, 153, 0.40);
  color: #f9a8d4;
  animation: missing-glow 1.8s ease-in-out infinite;
}
@keyframes missing-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
  50%      { box-shadow: 0 0 16px 2px rgba(236, 72, 153, 0.35); }
}

/* ── Hauptlayout: Sidebar + Album ────────── */
.album-main {
  flex: 1;
  display: flex;
  align-items: stretch;
  min-height: 0;
  position: relative;
  z-index: 2;
}

/* ── Sidebar (Indigo statt Burgundy) ────── */
.album-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, rgba(24, 28, 64, 0.97), rgba(14, 18, 40, 0.98));
  border-right: 1px solid rgba(255, 180, 80, 0.22);
  padding: 16px 14px;
  overflow-y: auto;
  box-shadow: inset -1px 0 0 rgba(255, 184, 77, 0.1), 2px 0 10px rgba(0, 0, 0, 0.4);
  z-index: 3;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s, opacity 0.22s;
}
/* Desktop: 'collapsed'-state - Sidebar zur Seite weggeklappt */
.album-sidebar.collapsed {
  width: 0;
  padding: 16px 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.sidebar-section { margin-bottom: 16px; }
.sidebar-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd47a;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.sidebar-input, .sidebar-select {
  width: 100%;
  background: linear-gradient(180deg, #181c40 0%, #10142e 100%);
  border: 1px solid rgba(255, 184, 77, 0.32);
  color: #f0e8d0;
  border-radius: 6px;
  padding: 8px 11px;
  font-size: 0.86rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s;
}
.sidebar-input::placeholder { color: #6878a0; }
.sidebar-input:focus, .sidebar-select:focus {
  border-color: rgba(255, 212, 122, 0.85);
  box-shadow: 0 0 14px rgba(255, 184, 77, 0.3), inset 0 0 6px rgba(255, 184, 77, 0.12);
}
.sidebar-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #ffb84d 50%),
    linear-gradient(135deg, #ffb84d 50%, transparent 50%),
    linear-gradient(180deg, #181c40 0%, #10142e 100%);
  background-position: calc(100% - 13px) center, calc(100% - 8px) center, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-chip {
  background: linear-gradient(180deg, #2a2e6a 0%, #1a1e4a 100%);
  border: 1px solid rgba(255, 184, 77, 0.3);
  color: #c8d0e8;
  border-radius: 99px;
  padding: 5px 11px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-chip:hover {
  border-color: rgba(255, 212, 122, 0.7);
  color: #ffd47a;
  transform: translateY(-1px);
}
.filter-chip.active {
  background: linear-gradient(180deg, #ffb84d 0%, #c97818 100%);
  border-color: #ffd47a;
  color: #1a1230;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(255, 184, 77, 0.45);
}
.price-range { display: flex; align-items: center; gap: 6px; color: #ffb84d; }
.price-input { flex: 1; min-width: 0; }
.sidebar-result-info {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 184, 77, 0.2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
#filter-count {
  color: #ffd47a;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(255, 184, 77, 0.3);
}
.sidebar-reset {
  background: transparent;
  border: 1px solid rgba(220, 80, 80, 0.7);
  color: #ee7878;
  border-radius: 5px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}
.sidebar-reset:hover {
  background: rgba(220, 80, 80, 0.8);
  color: #fff;
}
.album-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 12;
  animation: fade-in 0.2s;
}
@media (max-width: 760px) {
  .album-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 280px; max-width: 85vw;
    z-index: 13;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
  }
  .album-sidebar.open { transform: translateX(0); }
}

/* ════════════════════════════════════════════════════════════════
   DAS BUCH — Cover + Spread (Doppelseite) + Open-Animation
   ════════════════════════════════════════════════════════════════ */

.album-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  perspective: 2400px;
  perspective-origin: center center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  min-height: 0;
}

/* Buch-Container — beinhaltet Cover + Spread, ausgerichtet zentral */
.album-book {
  position: relative;
  /* Buch hat fixes aspect-ratio 1.4 (2 Pages nebeneinander).
     max-width cap auf 900px, max-height auf verfuegbare stage-Hoehe.
     Browser löst beide Constraints + ratio gleichzeitig. */
  width: 100%;
  max-width: 900px;
  max-height: 100%;
  aspect-ratio: 1.4;
  transform-style: preserve-3d;
}
/* Buch-Aussen-Frame (Lederrand): NUR sichtbar wenn Buch offen ist.
   Im geschlossenen Zustand bedeckt das Cover das Buch komplett, daher
   wird der Lederrand erst beim Aufschlagen eingeblendet, damit man nicht
   einen Rahmen um das geschlossene Cover sieht. */
.album-book::before {
  content: "";
  position: absolute;
  inset: -22px -26px -32px -28px;
  border-radius: 8px 18px 18px 8px;
  background:
    radial-gradient(ellipse 2px 1px at 30% 40%, rgba(255,255,255,0.04) 50%, transparent 51%),
    radial-gradient(ellipse 1px 2px at 70% 60%, rgba(255,255,255,0.03) 50%, transparent 51%),
    radial-gradient(ellipse at 30% 30%, #3a3e98 0%, #1e2160 60%, #0e1138 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 255, 0.18),
    inset 0 -3px 22px rgba(0, 0, 0, 0.6),
    0 14px 30px rgba(0, 0, 0, 0.55),
    0 32px 80px rgba(0, 0, 0, 0.55);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}
.album-book.open::before { opacity: 1; }

/* Gold-Filigrane-Border um den Lederrand: nur im open-state */
.album-book::after {
  content: "";
  position: absolute;
  inset: -14px -18px -22px -20px;
  border-radius: 6px 14px 14px 6px;
  border: 1.5px solid rgba(255, 184, 77, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(255, 184, 77, 0.18),
    inset 0 0 32px rgba(255, 212, 122, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}
.album-book.open::after { opacity: 1; }

/* Cover — sitzt OBEN auf dem Spread, rotiert beim Öffnen nach links weg.
   translateZ(20px) holt es VOR die rotierten Pages (preserve-3d-Stacking-Fix). */
.book-cover {
  position: absolute;
  inset: 0;
  transform: translateZ(20px);
  border-radius: 4px 10px 10px 4px;
  /* Indigo-Royal Leder mit Gold-Filigrane */
  background:
    /* Gold-Filigrane Ornament im Zentrum */
    radial-gradient(ellipse at center, rgba(255, 212, 122, 0.18) 0%, transparent 35%),
    /* Leder-Maserung */
    radial-gradient(ellipse 2px 1px at 30% 40%, rgba(255,255,255,0.04) 50%, transparent 51%),
    radial-gradient(ellipse 1px 2px at 70% 60%, rgba(255,255,255,0.03) 50%, transparent 51%),
    radial-gradient(ellipse at 30% 30%, #3a3e98 0%, #1e2160 60%, #0e1138 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 255, 0.18),
    inset 0 -3px 18px rgba(0, 0, 0, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 22px 50px rgba(0, 0, 0, 0.65);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.55, 0.05, 0.3, 1), box-shadow 1.1s;
  z-index: 10;
  cursor: pointer;
  backface-visibility: hidden;
}
/* Cover: Spine-Akzent links (Buch-Rücken) */
.book-cover::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 24px;
  border-radius: 4px 0 0 4px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 40%, transparent 90%),
    radial-gradient(ellipse at center, #1e2160 0%, #0a0c2a 100%);
  box-shadow: inset -1px 0 0 rgba(255, 212, 122, 0.45);
}
/* Cover: Gold-Filigrane-Rahmen */
.book-cover::after {
  content: "";
  position: absolute;
  inset: 18px 18px 18px 40px;
  border: 2px solid rgba(255, 184, 77, 0.45);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 184, 77, 0.15),
    inset 0 0 20px rgba(255, 212, 122, 0.08);
  pointer-events: none;
}
/* Cover-Titel */
.book-cover-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Cinzel', Georgia, serif;
  color: #ffd47a;
  text-shadow: 0 0 20px rgba(255, 184, 77, 0.55), 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.18em;
  pointer-events: none;
  padding: 0 30px 0 50px;
  text-align: center;
}
.book-cover-title .cover-icon {
  font-size: clamp(2.5rem, 6vh, 4.5rem);
  filter: drop-shadow(0 0 18px rgba(255, 184, 77, 0.6));
  margin-bottom: 6px;
}
.book-cover-title .cover-name {
  font-size: clamp(1.3rem, 3vh, 2.2rem);
  font-weight: 700;
}
.book-cover-title .cover-sub {
  font-size: clamp(0.75rem, 1.5vh, 1rem);
  font-weight: 400;
  opacity: 0.8;
  font-family: Georgia, serif;
  letter-spacing: 0.08em;
  font-style: italic;
}

/* Cover-Wappen: ScanDex-Logo in der Mitte, 3 teuerste Karten drum rum.
   Karte 1 oben, Karte 2 unten-links, Karte 3 unten-rechts. */
.cover-wreath {
  position: relative;
  width: clamp(220px, 38vh, 360px);
  height: clamp(220px, 38vh, 360px);
  margin: clamp(4px, 1vh, 12px) auto;
}
.cover-logo {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(80px, 14vh, 130px);
  height: clamp(80px, 14vh, 130px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 22px rgba(255, 184, 77, 0.65))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.cover-mini-card {
  position: absolute;
  width: clamp(56px, 11vh, 95px);
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: rgba(20, 24, 56, 0.6);
  border: 1.5px solid rgba(255, 184, 77, 0.7);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(255, 184, 77, 0.25),
    inset 0 1px 0 rgba(255, 245, 220, 0.25);
  transition: transform 0.4s ease;
}
/* Karte 1 (teuerste): oben mittig, leicht groesser */
.cover-card-top {
  top: 0%; left: 50%;
  transform: translateX(-50%) rotate(0deg);
  z-index: 3;
  width: clamp(64px, 12vh, 105px);
}
/* Karte 2: unten links, leicht nach innen rotiert */
.cover-card-left {
  bottom: 4%; left: 8%;
  transform: rotate(-14deg);
  z-index: 2;
}
/* Karte 3: unten rechts, leicht nach innen rotiert */
.cover-card-right {
  bottom: 4%; right: 8%;
  transform: rotate(14deg);
  z-index: 2;
}
.book-cover:hover .cover-card-top   { transform: translateX(-50%) rotate(0deg) translateY(-4px) scale(1.04); }
.book-cover:hover .cover-card-left  { transform: rotate(-18deg) translate(-4px, -4px); }
.book-cover:hover .cover-card-right { transform: rotate( 18deg) translate( 4px, -4px); }
.cover-mini-price {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  background: linear-gradient(90deg, #ffd45a, #fb923c);
  color: #0a0e1a;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(0.62rem, 1vh, 0.78rem);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Account-Modal: Personal-Stats-Section */
.account-section-title {
  margin: 14px 0 8px;
  font-size: 1.0rem;
  color: var(--text);
}
.personal-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.personal-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.ps-num {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffd47a;
  text-shadow: 0 0 10px rgba(255, 184, 77, 0.35);
}
.ps-label {
  font-size: 0.7rem;
  color: #a8b0d8;
  letter-spacing: 0.04em;
  margin-top: 2px;
  line-height: 1.3;
}

/* Profil-Karte oben in der Profil-Section */
.profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  margin-bottom: 12px;
}
.profile-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0a0e1a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 8px rgba(0,0,0,0.45);
  flex-shrink: 0;
}
.profile-meta { display: flex; flex-direction: column; min-width: 0; }
.profile-email {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.profile-tier-line {
  font-size: 0.72rem;
  color: #a8b0d8;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

/* Zuklappbare Settings-Gruppe (details/summary) */
.settings-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  overflow: hidden;
}
.settings-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  user-select: none;
  font-size: 1.0rem;
  color: var(--text);
  font-weight: 500;
}
.settings-summary::-webkit-details-marker { display: none; }
.settings-summary:hover { background: rgba(255,255,255,0.04); }
.settings-summary-label { display: flex; align-items: center; gap: 8px; }
.settings-summary-icon { font-size: 1.1rem; }
.settings-summary-chevron {
  color: #a8b0d8;
  font-size: 0.9rem;
  transition: transform 0.2s;
}
.settings-group[open] .settings-summary-chevron { transform: rotate(180deg); }

/* Nested sub-section (Belohnungen drin in den Einstellungen) */
.settings-subgroup {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.settings-summary-sub {
  padding: 10px 12px;
  font-size: 0.92rem;
}
.settings-subgroup[open] .settings-summary-chevron { transform: rotate(180deg); }
.settings-sub-body { padding: 0 12px 12px; }
.settings-sub-body .rewards-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.settings-sub-body .rewards-list { margin: 0; padding: 0; list-style: none; }

/* Settings-Liste: jede Zeile = Label + Switch/Select */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px 12px;
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.setting-row:hover { background: rgba(255,255,255,0.06); }
.setting-label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.setting-name {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}
.setting-desc {
  font-size: 0.72rem;
  color: #a8b0d8;
  margin-top: 2px;
}
/* iOS-Style-Switch */
.setting-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  border: none;
  outline: none;
}
.setting-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.2s;
}
.setting-switch:checked {
  background: linear-gradient(90deg, #ffd47a, #fb923c);
}
.setting-switch:checked::before { transform: translateX(18px); }
.setting-select {
  background: rgba(14, 18, 40, 0.85);
  color: var(--text);
  border: 1px solid rgba(255, 184, 77, 0.35);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  max-width: 160px;
}
.setting-select:focus {
  outline: none;
  border-color: rgba(255, 184, 77, 0.7);
}
/* Hover: Cover wackelt leicht, zeigt das es klickbar ist */
.book-cover:hover {
  transform: translateZ(22px) rotateY(-3deg);
}

/* Buch ist OFFEN -> Cover dreht nach links weg + Z reduziert auf 0 */
.album-book.open .book-cover {
  transform: translateZ(0) rotateY(-178deg);
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 255, 0.18),
    inset 0 -3px 18px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 0, 0, 0.3);
  cursor: default;
  pointer-events: none;
}

/* ── Spread = die geöffneten Doppelseiten ─────────────────
   Mit sichtbarer Buch-Dicke (Papier-Schichten an den Außenkanten)
   und subtiler 3D-Wölbung der Pages für aufgeschlagenen Buch-Look. */
.album-spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 18px 1fr;     /* etwas breiterer Spine */
  gap: 0;
  border-radius: 4px 10px 10px 4px;
  z-index: 1;
  transform-style: preserve-3d;
  /* Mehrere Schatten-Layer = Buch-Tiefe (Papier-Stapel sichtbar) */
  box-shadow:
    /* Buch-Dicke unten: gestapelte Papier-Schichten */
    0 1px 0 #c8b088,
    0 2px 0 #b09870,
    0 3px 0 #98805a,
    0 4px 0 #806848,
    0 5px 0 #685038,
    /* Tiefer Schatten unter dem Buch */
    0 12px 22px rgba(0, 0, 0, 0.6),
    0 28px 60px rgba(0, 0, 0, 0.55);
}
/* Side-Papier-Stapel rechts (rechte Buch-Außenkante = "geblättertes Papier"-Look) */
.album-spread::before, .album-spread::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background:
    linear-gradient(90deg,
      #d8c498 0%, #c8b088 30%, #b09870 60%, #968058 100%);
  z-index: -1;
  border-radius: 0 2px 2px 0;
  box-shadow: inset 1px 0 0 rgba(255, 245, 220, 0.4);
}
.album-spread::before { left: -5px;  border-radius: 2px 0 0 2px; transform: scaleX(-1); }
.album-spread::after  { right: -5px; }

/* Spine in der Mitte — dunkler Schatten mit Goldnaht */
.album-spine {
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.85) 50%,
      rgba(0,0,0,0.55) 100%);
  position: relative;
  z-index: 2;
}
.album-spine::before, .album-spine::after {
  content: "";
  position: absolute;
  top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 184, 77, 0.55) 20%,
    rgba(255, 184, 77, 0.55) 80%,
    transparent 100%);
}
.album-spine::before { left: 4px; }
.album-spine::after  { right: 4px; }

/* Page = Creme-Pergament mit 3×3 Sleeve-Grid.
   Slots haben Karten-Form (aspect-ratio 0.71), rows passen sich daran an
   (auto-height). 9 Slots immer gleich groß, vertikal zentriert in der Page. */
.album-page {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
  align-content: center;
  justify-items: stretch;
  gap: clamp(6px, 1.2vh, 12px);
  padding: clamp(10px, 1.5vh, 16px) clamp(8px, 1.2vw, 14px) clamp(28px, 3.5vh, 40px);
  /* Cremepergament, klassisch warm */
  background:
    /* Subtile Papierfaser */
    repeating-linear-gradient(85deg,
      transparent 0px, transparent 2px,
      rgba(120, 80, 30, 0.025) 2px, rgba(120, 80, 30, 0.025) 3px),
    /* Helle, leicht gelbliche Cremepergament-Basis */
    radial-gradient(ellipse at top, #fff4d9 0%, #f0dfb0 70%, #d4b888 100%);
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  z-index: 1;
}
/* Page-Vignette + leichte 3D-Wölbung für aufgeschlagenen Buch-Look.
   Pages neigen sich leicht zur Mitte (Spine) wie echtes Buch. */
.album-page.left-page {
  border-radius: 4px 0 0 4px;
  transform-origin: right center;
  transform: rotateY(2.5deg);
  /* Innerer Schatten: stärker zur Spine-Seite, plus Vignette an Aussenkante */
  box-shadow:
    inset 18px 0 32px rgba(0, 0, 0, 0.22),
    inset -4px 0 12px rgba(0, 0, 0, 0.35),
    inset 0 0 30px rgba(120, 80, 30, 0.12);
}
.album-page.right-page {
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  transform: rotateY(-2.5deg);
  box-shadow:
    inset -18px 0 32px rgba(0, 0, 0, 0.22),
    inset 4px 0 12px rgba(0, 0, 0, 0.35),
    inset 0 0 30px rgba(120, 80, 30, 0.12);
}
/* Page-Nummer-Sticker — oben in den Buchecken (unten ist Corner-Nav) */
.album-page-sticker {
  position: absolute;
  top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a6a30;
  letter-spacing: 0.12em;
  z-index: 4;
  pointer-events: none;
  font-family: 'Cinzel', Georgia, serif;
}
.left-page  .album-page-sticker { left: 16px; }
.right-page .album-page-sticker { right: 16px; }

/* Corner-Nav-Buttons: direkt auf der Buchseite, unten links + unten rechts */
.album-corner-nav {
  position: absolute;
  bottom: 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.album-corner-nav.left  { left: 10px; }
.album-corner-nav.right { right: 10px; }
.corner-arrow {
  background: linear-gradient(180deg, rgba(255, 245, 220, 0.85), rgba(212, 184, 136, 0.95));
  border: 1px solid rgba(140, 100, 50, 0.65);
  color: #6a4818;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.35, 0.64, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 2px rgba(140, 100, 50, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.25);
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.corner-arrow:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffe9a8, #ffb84d);
  color: #1a1230;
  transform: scale(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(255, 184, 77, 0.55);
}
.corner-arrow:active:not(:disabled) { transform: scale(0.95); }
.corner-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.corner-page-counter {
  color: #8a6a30;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  user-select: none;
  pointer-events: none;
}
.corner-page-counter span:first-child {
  color: #6a4818;
  font-size: 0.95rem;
}

/* ── Page-Flip Animation: Page kippt ueber den Spine und kommt mit neuem
   Content wieder zurueck. transform-origin am Spine, backface hidden damit
   keine spiegelverkehrte Rueckseite sichtbar wird. ── */
.album-page.flipping-next {
  transform-origin: left center;
  backface-visibility: hidden;
  animation: flip-page-next 0.7s cubic-bezier(0.45, 0.05, 0.35, 1);
}
.album-page.flipping-prev {
  transform-origin: right center;
  backface-visibility: hidden;
  animation: flip-page-prev 0.7s cubic-bezier(0.45, 0.05, 0.35, 1);
}
@keyframes flip-page-next {
  0%   { transform: rotateY(0deg);   box-shadow: inset -12px 0 30px rgba(0,0,0,0.18); }
  50%  { transform: rotateY(-90deg); box-shadow: inset 0 0 60px rgba(0,0,0,0.5); }
  100% { transform: rotateY(0deg);   box-shadow: inset -12px 0 30px rgba(0,0,0,0.18); }
}
@keyframes flip-page-prev {
  0%   { transform: rotateY(0deg);   box-shadow: inset 12px 0 30px rgba(0,0,0,0.18); }
  50%  { transform: rotateY(90deg);  box-shadow: inset 0 0 60px rgba(0,0,0,0.5); }
  100% { transform: rotateY(0deg);   box-shadow: inset 12px 0 30px rgba(0,0,0,0.18); }
}

/* ── Sleeve / Slot — Karten-Form mit aspect-ratio 0.71.
   Slot = Sleeve = Container für die Karte. Slot füllt nur seine Karten-Form,
   nicht die ganze grid-cell — die Grid-Cell ist 1fr breit, slot-height
   ergibt sich aus aspect-ratio. */
.album-slot {
  position: relative;
  aspect-ratio: 0.71;
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(140, 100, 50, 0.55);
  background: linear-gradient(135deg, rgba(60, 40, 90, 0.18) 0%, rgba(40, 30, 70, 0.28) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 4px rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(120, 80, 30, 0.18);
  overflow: hidden;
  background:
    /* Sleeve-Wand: transparenter, leicht violett-stichig (echte Slipper-Hülle) */
    linear-gradient(135deg, rgba(60, 40, 90, 0.18) 0%, rgba(40, 30, 70, 0.28) 100%);
  border: 1px solid rgba(140, 100, 50, 0.55);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 4px rgba(0, 0, 0, 0.18),
    0 2px 4px rgba(120, 80, 30, 0.18);
  overflow: hidden;
  cursor: grab;
  transition: transform 0.22s cubic-bezier(0.34, 1.35, 0.64, 1),
              box-shadow 0.25s, filter 0.25s, border-color 0.2s;
  transform-origin: center bottom;
  will-change: transform;
}
.album-slot:active { cursor: grabbing; }
/* Glanz-Reflexion auf Sleeve */
.album-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0.04) 25%,
    transparent 50%);
  border-radius: 5px;
  z-index: 3;
}

/* Hover-Lift: Karte hebt sich aus Sleeve */
.album-slot:not(.empty):hover {
  transform: translateY(-7px) scale(1.05);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(255, 184, 77, 0.45);
  filter: brightness(1.08);
  z-index: 5;
  border-color: rgba(255, 184, 77, 0.8);
}

/* Empty Slot — leere Tasche mit dezentem Karten-Umriss */
.album-slot.empty {
  cursor: default;
  background:
    repeating-linear-gradient(45deg,
      rgba(140, 100, 50, 0.08) 0 8px,
      transparent 8px 16px),
    rgba(220, 195, 145, 0.4);
  border-color: rgba(140, 100, 50, 0.35);
  box-shadow: inset 0 0 0 1px rgba(140, 100, 50, 0.12);
}
.album-slot.empty::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(140, 100, 50, 0.3);
  border-radius: 3px;
}
.album-slot.empty::after { display: none; }

/* Drag-Drop visuals */
.album-slot.dragging {
  opacity: 0.35;
  transform: scale(0.94);
  cursor: grabbing;
}
.album-slot.drag-over {
  box-shadow:
    inset 0 0 0 2px rgba(255, 184, 77, 0.9),
    inset 0 0 22px rgba(255, 184, 77, 0.35),
    0 0 24px rgba(255, 184, 77, 0.6);
  transform: scale(1.06);
  z-index: 6;
}
.album-slot.drag-over.empty {
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 184, 77, 0.25) 0 7px,
      rgba(255, 184, 77, 0.1) 7px 14px);
}
@keyframes drop-bounce {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.13) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}
.album-slot.drop-flash { animation: drop-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Newest-Card-Pulse: heller pulsierender Glow */
@keyframes new-card-pulse {
  0%, 100% { box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    0 0 8px rgba(255, 184, 77, 0.35); }
  50%      { box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.5),
    0 0 25px rgba(255, 184, 77, 0.75); }
}
.album-slot.newest:not(.dragging):not(:hover) {
  animation: new-card-pulse 2.4s ease-in-out infinite;
  border-color: rgba(255, 184, 77, 0.8);
}

/* Foil-Effekt für Holo/Foil-Karten */
.album-slot.foil .album-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 100, 120, 0.22) 40%,
    rgba(255, 220, 100, 0.22) 47%,
    rgba(100, 255, 200, 0.22) 53%,
    rgba(120, 180, 255, 0.22) 60%,
    transparent 70%);
  background-size: 200% 200%;
  border-radius: 4px;
  animation: foil-shimmer 3.5s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes foil-shimmer {
  0%   { background-position: 200% 0%; }
  100% { background-position: -50% 0%; }
}

/* Karten-Bild füllt die ganze Sleeve (slot hat schon Karten-Form). */
.album-card-img {
  position: absolute;
  inset: 4px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  z-index: 1;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
}
.album-card-fallback {
  position: absolute;
  inset: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  color: #6a5028;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  padding: 6px;
  z-index: 1;
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(245, 230, 196, 0.7), rgba(212, 184, 136, 0.85));
  line-height: 1.2;
}
/* Empty Slot: dashed Pattern statt Sleeve-Look */
.album-slot.empty {
  cursor: default;
  background:
    repeating-linear-gradient(45deg,
      rgba(140, 100, 50, 0.08) 0 8px,
      transparent 8px 16px),
    rgba(220, 195, 145, 0.4);
  border-color: rgba(140, 100, 50, 0.35);
  box-shadow: inset 0 0 0 1px rgba(140, 100, 50, 0.12);
}
.album-slot.empty::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(140, 100, 50, 0.3);
  border-radius: 3px;
}
.album-slot.empty::after { display: none; }
/* Fallback ohne Bild */
.album-card-fallback {
  position: absolute;
  inset: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.72rem;
  color: #6a5028;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  padding: 6px;
  z-index: 1;
  border-radius: 3px;
  background: linear-gradient(160deg, #f5e6c4 0%, #d4b888 100%);
  line-height: 1.2;
}

/* ── Page-Turn-Zones: am Buchrand zum Blättern. z-index UNTER Cover (5)
   damit sie nicht sichtbar sind solange Cover zu ist. Nur sichtbar wenn Buch offen. */
.page-turn-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 5;
  cursor: pointer;
  background: transparent;
  transition: background 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;     /* erst aktiv wenn Buch offen */
}
.album-book.open .page-turn-zone {
  pointer-events: auto;
}
.page-turn-zone.left  { left: 0; }
.page-turn-zone.right { right: 0; }
.page-turn-zone:hover {
  background: linear-gradient(90deg,
    rgba(255, 184, 77, 0.18) 0%,
    transparent 100%);
}
.page-turn-zone.right:hover {
  background: linear-gradient(270deg,
    rgba(255, 184, 77, 0.18) 0%,
    transparent 100%);
}
/* Page-Turn-Hint: kleiner Pfeil der nur on hover sichtbar wird */
.page-turn-zone::before {
  content: "›";
  font-size: 3rem;
  color: rgba(255, 184, 77, 0);
  font-family: Georgia, serif;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(255, 184, 77, 0.8);
  transition: color 0.25s, transform 0.25s;
}
.page-turn-zone.left::before {
  content: "‹";
}
.album-book.open .page-turn-zone:hover::before {
  color: rgba(255, 212, 122, 0.95);
  transform: scale(1.2);
}
.page-turn-zone.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.page-turn-zone.disabled::before {
  display: none;
}

/* Buch-Bookmark — rotes Lesezeichen unten in der Mitte */
.album-bookmark {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 70px;
  background: linear-gradient(180deg, #8e1818 0%, #b82828 50%, #e83e3e 100%);
  /* Spitze nach UNTEN: oben gerade, unten v-Schnitt rein, schwert-foermig */
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  box-shadow:
    inset 2px 0 4px rgba(0, 0, 0, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.55);
  z-index: 10;
  pointer-events: none;
}

/* Footer-Nav entfernt — Blättern erfolgt jetzt direkt am Buch (corner-nav) */
.album-nav {
  display: none;
}
.album-nav-legacy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px 16px;
  gap: 24px;
  background: linear-gradient(180deg, rgba(14, 18, 40, 0.5), rgba(14, 18, 40, 0.85));
  border-top: 1px solid rgba(255, 184, 77, 0.18);
  z-index: 2;
  position: relative;
}
.album-arrow {
  background: radial-gradient(ellipse at 30% 30%, #3a3e98 0%, #1e2160 100%);
  border: 1px solid rgba(255, 184, 77, 0.4);
  color: #ffd47a;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.35, 0.64, 1);
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 255, 0.2),
    inset 0 -1px 3px rgba(0, 0, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.album-arrow:hover:not(:disabled) {
  border-color: rgba(255, 212, 122, 0.95);
  color: #ffe9a8;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(255, 184, 77, 0.4);
}
.album-arrow:active:not(:disabled) { transform: scale(0.94); }
.album-arrow:disabled { opacity: 0.25; cursor: not-allowed; filter: grayscale(0.6); }
.album-page-info {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffd47a;
  letter-spacing: 0.1em;
  font-family: 'Cinzel', Georgia, serif;
}
.album-page-info span:first-child { color: #ffe9a8; font-size: 1.1rem; }

/* ── Card-Detail-Modal (warmer Indigo-Look) ───────────────── */
.card-detail-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 24, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.25s ease-out;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.card-detail-content {
  background: radial-gradient(ellipse at top, #2a2e6a 0%, #1a1e4a 100%);
  border: 1px solid rgba(255, 184, 77, 0.45);
  border-radius: 10px;
  max-width: 380px;
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #ffb84d transparent;
  position: relative;
  padding: 18px 20px 16px;
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 255, 0.18),
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(255, 184, 77, 0.22);
  animation: detail-pop 0.3s cubic-bezier(0.34, 1.45, 0.64, 1);
}
@keyframes detail-pop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.detail-card-img {
  width: 100%;
  max-width: 60%;
  margin: 0 auto 12px;
  display: block;
  aspect-ratio: 0.71;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,184,77,0.3);
}
.detail-card-name {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: #ffe9a8;
  font-family: 'Cinzel', Georgia, serif;
  text-shadow: 0 0 14px rgba(255, 184, 77, 0.3);
  text-align: center;
}
.detail-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
  justify-content: center;
}
.detail-card-meta .meta-pill {
  background: rgba(30, 33, 96, 0.7);
  border: 1px solid rgba(255, 184, 77, 0.35);
  color: #f0e8d0;
  border-radius: 99px;
  padding: 5px 11px;
  font-size: 0.78rem;
}
.detail-card-prices {
  background: linear-gradient(180deg, rgba(30, 33, 96, 0.85), rgba(20, 24, 60, 0.95));
  border: 1px solid rgba(255, 184, 77, 0.3);
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
}
.detail-card-prices .price-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 0.88rem;
  color: #c8d0e8;
}
.detail-card-prices .price-row + .price-row {
  border-top: 1px solid rgba(255, 184, 77, 0.12);
}
.detail-card-prices .price-value {
  color: #ffd47a;
  font-weight: 700;
  font-family: 'Cinzel', Georgia, serif;
}
.detail-remove-btn {
  width: 100%;
  background: transparent;
  border: 1px solid #c93838;
  color: #ee7878;
  padding: 11px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 12px;
  transition: all 0.2s;
}
.detail-remove-btn:hover {
  background: rgba(201, 56, 56, 0.85);
  color: #fff;
  box-shadow: 0 0 16px rgba(212, 72, 72, 0.4);
}

/* Empty-Album-Hint */
.album-empty-hint {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #6a5028;
  font-size: 0.95rem;
  font-family: 'Cinzel', Georgia, serif;
  font-style: italic;
  padding: 24px;
  z-index: 4;
  line-height: 1.5;
}
.album-empty-hint a { color: #c97818; }

/* Drag-state helpers */
.album-stage.dragging-active { cursor: grabbing; }
.album-stage.dragging-active .album-slot { transition: none; }
.album-stage.dragging-active .album-slot:not(.dragging):not(.drag-over):hover {
  transform: none;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 4px rgba(0,0,0,0.18);
  filter: none;
}

/* ── Mobile: nur 1 Page sichtbar (rechte page versteckt) ──── */
@media (max-width: 760px) {
  .album-book {
    aspect-ratio: 0.7;
    width: min(100%, 95vh);
  }
  .album-spread {
    grid-template-columns: 1fr;     /* nur 1 page */
  }
  .album-page.right-page,
  .album-spine {
    display: none;
  }
  .album-page.left-page {
    border-radius: 4px 10px 10px 4px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.15);
  }
  .album-bookmark { bottom: -24px; width: 20px; height: 50px; }
}


/* ── Side Menu ──────────────────────── */
.side-menu {
  position: fixed;
  top: 56px;
  right: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: var(--shadow-md);
  z-index: 60;
  min-width: 200px;
  animation: fadeIn .15s;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.menu-item:hover { background: var(--bg-card); }
.menu-icon { font-size: 1.2rem; }
.side-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 6px 4px;
}

/* ── Responsive ─────────────────────── */
@media (min-width: 600px) {
  .game-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   Premium-Modal + Pricing-Tiers (Stripe Live, added 2026-05-17)
   ════════════════════════════════════════════════════════════ */

.menu-item-premium {
  background: linear-gradient(135deg, rgba(255,184,77,0.1) 0%, rgba(255,184,77,0.04) 100%);
  border-left: 3px solid #ffb84d;
}
.menu-item-premium-active {
  background: linear-gradient(135deg, rgba(74,222,128,0.1) 0%, rgba(74,222,128,0.04) 100%);
  border-left: 3px solid var(--success);
  color: var(--success);
}

/* ── Account-Modal ──────────────────────── */
.account-modal-content {
  max-width: 420px;
  padding: 28px 24px 24px;
}
.account-header {
  text-align: center;
  margin-bottom: 20px;
}
.account-header h2 {
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.account-tier-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(74,222,128,0.15);
  color: var(--success);
  border: 1px solid rgba(74,222,128,0.3);
}
.account-tier-badge.lifetime {
  background: rgba(255,212,90,0.15);
  color: var(--accent);
  border-color: rgba(255,212,90,0.3);
}
.account-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.account-info-row:last-of-type { border-bottom: none; }
.account-info-label { color: var(--text-dim); }
.account-info-value { font-weight: 500; }
.account-status-active    { color: var(--success); }
.account-status-canceled  { color: var(--error); }
.account-status-past_due  { color: var(--warn); }
.account-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.btn-portal {
  background: var(--accent);
  color: #0a0e1a;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.btn-portal:hover { background: var(--accent-hot); }
.account-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0 14px;
}
.account-recovery-title {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 10px;
}
.btn-recovery {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 8px;
}
.btn-recovery:hover { border-color: var(--accent); color: var(--accent); }
.account-recovery-sent  { color: var(--success); font-size: 0.85rem; margin-top: 6px; }
.account-recovery-error { color: var(--error);   font-size: 0.85rem; margin-top: 6px; }

/* ── Login-Modal (Einloggen per Magic-Link) ─────────────────── */
.login-modal-content {
  max-width: 400px;
  padding: 28px 24px 24px;
}
.login-modal-content h3 { margin: 0 0 10px; }
.login-success {
  color: var(--success);
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
  background: rgba(74,222,128,0.1);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.premium-modal-content {
  max-width: 900px;
  padding: 32px 24px 24px;
}

.premium-header {
  text-align: center;
  margin-bottom: 24px;
}
.premium-header h2 {
  font-size: 1.8rem;
  margin: 0 0 8px 0;
  background: linear-gradient(90deg, #fff 0%, #ffd97d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.premium-subtitle {
  color: var(--text-dim);
  margin: 0;
  font-size: 0.95rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 700px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.tier-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.tier-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,184,77,0.3);
}

.tier-card-featured {
  background: linear-gradient(180deg, rgba(255,184,77,0.08) 0%, rgba(255,184,77,0.02) 100%);
  border-color: #ffb84d;
}

.tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffb84d;
  color: #1a1a1a;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
}

.tier-name {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.tier-price {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: #ffd97d;
}
.tier-period {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 4px;
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex: 1;
}
.tier-features li {
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text);
  position: relative;
  padding-left: 22px;
}
.tier-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #74e2a3;
  font-weight: 700;
}

.tier-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.tier-btn:hover {
  background: rgba(255,255,255,0.12);
}
.tier-btn-featured {
  background: #ffb84d;
  color: #1a1a1a;
  border-color: #ffb84d;
}
.tier-btn-featured:hover {
  background: #ffd97d;
}

.premium-footer {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.premium-trust {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

/* Email-Modal */
.email-modal-content {
  max-width: 420px;
  padding: 28px 24px 20px;
}
.email-modal-content h3 {
  margin: 0 0 8px 0;
}
.email-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 16px;
  line-height: 1.5;
}
.email-input-field {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.email-input-field:focus {
  outline: none;
  border-color: #ffb84d;
}
.email-error {
  color: #ff6b6b;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.email-submit-btn {
  width: 100%;
  padding: 14px;
  background: #ffb84d;
  color: #1a1a1a;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.email-submit-btn:hover {
  background: #ffd97d;
}
.email-submit-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* ─── Sternschnuppe: Karte fliegt vom Result-Modal zum Sammelbuch-Menu ─── */
.shooting-star {
  position: fixed;
  width: 72px;
  height: 100px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #ffd45a;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 32px 4px rgba(255, 212, 90, 0.95),
    0 0 64px 8px rgba(255, 140, 0, 0.65),
    0 0 120px 12px rgba(236, 72, 153, 0.45);
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  animation: star-shoot 1.5s cubic-bezier(0.34, 0.05, 0.64, 1) forwards;
}
.shooting-star-trail {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd45a 30%, rgba(255,140,0,0.4) 70%, transparent 100%);
  filter: blur(2px);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  animation: star-trail 1.5s cubic-bezier(0.34, 0.05, 0.64, 1) forwards;
}
@keyframes star-trail {
  0%   { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  15%  { opacity: 0.9; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3);
    opacity: 0;
  }
}
.shooting-star::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 212, 90, 0.5), transparent 70%);
  filter: blur(10px);
  z-index: -1;
}
@keyframes star-shoot {
  0% {
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
    opacity: 0;
    filter: brightness(2.5);
  }
  8% {
    transform: translate(-50%, -50%) scale(1.3) rotate(-12deg);
    opacity: 1;
    filter: brightness(2);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.1) rotate(20deg);
    opacity: 1;
    filter: brightness(1.5);
  }
  85% {
    transform: translate(calc(-50% + var(--tx) * 0.92), calc(-50% + var(--ty) * 0.92)) scale(0.35) rotate(540deg);
    opacity: 1;
    filter: brightness(1.2);
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.08) rotate(720deg);
    opacity: 0;
    filter: brightness(1);
  }
}

/* Treffer-Pulse am Menu-Button wenn die Sternschnuppe ankommt */
.hit-flash {
  animation: hit-flash-anim 0.6s ease-out;
}
@keyframes hit-flash-anim {
  0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255, 212, 90, 0)); }
  35%  { transform: scale(1.25); filter: drop-shadow(0 0 16px rgba(255, 212, 90, 0.95)); }
  100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255, 212, 90, 0)); }
}

/* ─── XP-Toast: Erfahrungsleiste bei neuen Karten ─── */
.xp-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -120%);
  width: min(360px, 92vw);
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 20, 45, 0.96), rgba(28, 18, 58, 0.96));
  border: 1px solid rgba(255, 212, 90, 0.45);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 212, 90, 0.30);
  color: #f8fafc;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.55, 1), opacity 0.35s ease;
}
.xp-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}
.xp-toast.level-up {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(168, 85, 247, 0.45);
}
.xp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-weight: 700;
}
.xp-icon { font-size: 1.3rem; }
.xp-text {
  flex: 1;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.xp-gain {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.85rem;
  color: #4ade80;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.xp-toast.level-up .xp-gain {
  color: #c4b5fd;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.45);
}
.xp-bar {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 6px;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd45a 0%, #fb923c 60%, #ec4899 100%);
  box-shadow: 0 0 12px rgba(255, 212, 90, 0.5);
  transition: width 0.6s ease-out;
}
.xp-toast.level-up .xp-bar-fill {
  background: linear-gradient(90deg, #c4b5fd 0%, #a855f7 60%, #ec4899 100%);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.55);
}
.xp-info {
  font-size: 0.72rem;
  color: #a8b0d8;
  letter-spacing: 0.04em;
  text-align: center;
}
.xp-reward {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.25), rgba(236, 72, 153, 0.15));
  border: 1px solid rgba(196, 181, 253, 0.45);
  color: #ddd6fe;
  font-size: 0.82rem;
  text-align: center;
}

/* ─── Tip-Toast (Lighting/Camera hints) ───────────────────────── */
.tip-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -120%);
  width: min(380px, 92vw);
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(8, 24, 40, 0.96), rgba(12, 36, 60, 0.96));
  border: 1px solid rgba(96, 196, 255, 0.5);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(96, 196, 255, 0.28);
  color: #e6f3ff;
  font-size: 0.88rem;
  line-height: 1.45;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.55, 1), opacity 0.3s ease;
}
.tip-toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ─── Cosmetic Rewards ────────────────────────────────────────── */
/* Rewards-Sektion im Account-Modal */
.rewards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 6px;
}
.rewards-header h3 {
  font-size: 1.05rem;
  margin: 0;
  color: var(--text);
}
.rewards-level-pill {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.78rem;
  color: #0a0e1a;
  background: linear-gradient(135deg, #ffd45a, #fb923c);
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 700;
}
.rewards-next {
  font-size: 0.78rem;
  color: #a8b0d8;
  margin: 4px 0 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.rewards-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reward-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.reward-item.unlocked {
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.10), rgba(74, 222, 128, 0.04));
  border-color: rgba(74, 222, 128, 0.30);
}
.reward-item.locked { opacity: 0.55; }
.reward-icon { font-size: 1.4rem; flex-shrink: 0; }
.reward-meta { flex: 1; min-width: 0; }
.reward-name { font-weight: 600; font-size: 0.88rem; }
.reward-desc { font-size: 0.72rem; color: #a8b0d8; line-height: 1.3; }
.reward-level {
  font-size: 0.7rem;
  color: #ffd47a;
  font-family: 'Cinzel', Georgia, serif;
  flex-shrink: 0;
}

/* Reward-Effekte auf <body> wenn freigeschaltet */

/* Level 5: Sammler-Badge (Bronze) - sichtbar als kleines Indikator-Pill */
body.reward-collector .rewards-level-pill::before {
  content: '🥉 ';
}

/* Level 10: Goldener Sammelbuch-Rand */
body.reward-goldbook .album-book {
  box-shadow:
    0 0 0 2px rgba(255, 212, 90, 0.7),
    0 0 24px 4px rgba(255, 180, 80, 0.35) !important;
}

/* Level 25: Holo-Theme - animierter Regenbogen-Rand um den Header */
body.reward-holo .header {
  position: sticky;
  background:
    linear-gradient(180deg, rgba(10,14,30,0.92), rgba(10,14,30,0.86)) padding-box,
    linear-gradient(90deg, #ff0080, #ffd45a, #4ade80, #06b6d4, #a855f7, #ff0080) border-box;
  border-bottom: 2px solid transparent;
  animation: holo-shift 6s linear infinite;
  background-size: 100% 100%, 600% 100%;
}
@keyframes holo-shift {
  0%   { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, 600% 50%; }
}

/* Level 50: Master Scanner - lila Glow um den Brand-Logo */
body.reward-master .brand-logo {
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.85))
          drop-shadow(0 0 4px rgba(255, 212, 90, 0.6)) !important;
}
body.reward-master .brand-text::after {
  content: ' 👑';
  font-size: 0.85em;
}

/* Level 100: Foil-Glanz auf alle Karten im Sammelbuch */
body.reward-foilcards .album-slot:not(.empty) {
  position: relative;
  overflow: hidden;
}
body.reward-foilcards .album-slot:not(.empty)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  background-size: 300% 300%;
  animation: foil-shimmer 4s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes foil-shimmer {
  0%   { background-position: 100% 100%; }
  100% { background-position: -100% -100%; }
}

/* ── Premium-Features im Account-Modal ──────────────────────── */
.premium-locked {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 212, 90, 0.06);
  border: 1px dashed rgba(255, 212, 90, 0.4);
  font-size: 0.82rem;
  color: #a8b0d8;
}
.premium-locked p { margin: 0 0 6px; color: #ffd47a; font-weight: 600; }
.premium-locked ul { margin: 0; padding-left: 18px; }
.premium-locked li { margin: 2px 0; }

.premium-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.btn-premium {
  padding: 8px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.18), rgba(251, 146, 60, 0.12));
  border: 1px solid rgba(255, 184, 77, 0.45);
  color: #ffd47a;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn-premium:hover {
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.28), rgba(251, 146, 60, 0.20));
  transform: translateY(-1px);
}
.btn-premium:active { transform: translateY(0); }

/* Alerts-Panel */
#_alerts-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.alerts-empty { color: #a8b0d8; font-size: 0.85rem; text-align: center; margin: 8px 0; }
.alerts-list { list-style: none; margin: 0 0 12px; padding: 0; }
.alert-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 0.83rem;
}
.alert-meta { flex: 1; min-width: 0; }
.alert-meta strong { display: block; color: var(--text); }
.alert-game { font-size: 0.7rem; color: #a8b0d8; text-transform: uppercase; letter-spacing: 0.05em; }
.alert-cond {
  color: #ffd47a;
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  font-size: 0.85rem;
}
.btn-mini-del {
  background: transparent;
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #f87171;
  width: 26px; height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.btn-mini-del:hover { background: rgba(248, 113, 113, 0.15); }

.alert-create-form h4 {
  margin: 6px 0 6px;
  font-size: 0.88rem;
  color: #ffd47a;
}
.alert-create-form input,
.alert-create-form select {
  width: 100%;
  padding: 6px 8px;
  margin: 3px 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.85rem;
  box-sizing: border-box;
}
.alert-msg-ok { color: #4ade80; font-size: 0.8rem; margin-top: 6px; }
.alert-msg-err { color: #f87171; font-size: 0.8rem; margin-top: 6px; }

/* Card-Detail-Modal: Quick-Alert-Button */
.detail-alert-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.22), rgba(236, 72, 153, 0.14));
  border: 1px solid rgba(255, 184, 77, 0.5);
  color: #ffd47a;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s;
}
.detail-alert-btn:hover:not(.locked) {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(255, 212, 90, 0.32), rgba(236, 72, 153, 0.22));
}
.detail-alert-btn.locked {
  opacity: 0.55;
  cursor: not-allowed;
  color: #a8b0d8;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}