/* ============================================================
   CoreDeck Engine — Marine Industrial Theme (MAPAL)
   Design-Sprache: dunkel, technisch-präzise, Cyan-Akzente,
   Gold-Foil für Legendary. Gamification trifft B2B.
   ============================================================ */

:root {
  --surface: #121416;
  --abyssal: #0a0c0e;
  --surface-low: #1a1c1e;
  --surface-container: #1e2022;
  --surface-high: #282a2c;
  --surface-highest: #333537;
  --on-surface: #e2e2e5;
  --on-surface-variant: #c2c6d4;
  --outline: #8c919d;
  --outline-variant: #424752;
  --primary: #a9c7ff;
  --primary-container: #005eb8;
  --secondary: #81cfff;
  --secondary-container: #00a3e0;
  --precision-cyan: #00e5ff;
  --industrial-gold: #ffb81c;
  --epic-violet: #b18aff;
  --alert-red: #d32f2f;
  --font: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  /* RGB-Tripletts für halbtransparente Flächen — werden vom Branding (engine.js)
     überschrieben, damit helle Corporate-Looks keine grauen Overlays bekommen */
  --surface-rgb: 18, 20, 22;
  --lowest-rgb: 12, 14, 16;
  --surface-low-rgb: 26, 28, 30;
  --surface-highest-rgb: 51, 53, 55;
  --on-surface-rgb: 226, 226, 229;
  --accent-rgb: 0, 229, 255;
  --secondary-rgb: 0, 163, 224;
  --line-rgb: 66, 71, 82;
  --outline-rgb: 140, 145, 157;
  --err-text: #ffb4ab;
  --on-accent: #00212e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

.label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--outline);
}

/* ---------- Hintergrund: Wellen-Canvas ---------- */
#bg-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none;
}

/* ---------- Top Bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  background: rgba(var(--lowest-rgb), 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.35);
}
.topbar .brand {
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--primary);
}
.topbar .brand span { color: var(--secondary-container); }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.stat-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 16px; border-radius: 4px;
  background: var(--surface-container);
  border: 1px solid rgba(var(--line-rgb), 0.5);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--on-surface-variant);
}
.stat-chip b { color: var(--secondary); font-weight: 700; }
.stat-chip .sep { width: 1px; height: 14px; background: var(--outline-variant); }

.btn-booster {
  padding: 9px 22px; border-radius: 4px;
  background: var(--secondary-container); color: #00354c;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.15s, filter 0.15s;
  animation: pulse-btn 2.2s infinite;
}
.btn-booster:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-booster:disabled { animation: none; background: var(--surface-highest); color: var(--outline); cursor: default; }
@keyframes pulse-btn {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.scorm-dot { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--outline); text-transform: uppercase; letter-spacing: 0.08em; }
.scorm-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--outline-variant); display: inline-block; }
.scorm-dot.on i { background: var(--precision-cyan); box-shadow: 0 0 8px rgba(var(--accent-rgb),0.7); }

/* Brand Logo / Wordmark */
.brand-logo { height: 38px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.brand-wordmark { height: 26px; width: auto; max-width: 180px; object-fit: contain; display: block; }

/* ---------- Layout ---------- */
main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 100px 24px 200px; }

.page-header { text-align: center; margin-bottom: 30px; }
.page-header .chapter {
  display: inline-block; padding: 4px 14px; margin-bottom: 14px;
  border: 1px solid rgba(var(--secondary-rgb), 0.4); border-radius: 999px;
  color: var(--precision-cyan); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: rgba(var(--secondary-rgb), 0.08);
}
.page-header h1 {
  font-size: 38px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--on-surface); margin-bottom: 12px;
}
.page-header p { max-width: 680px; margin: 0 auto; color: var(--on-surface-variant); font-size: 15px; opacity: 0.9; }

/* Page-Navigation (Wellen) */
.page-nav { display: flex; justify-content: center; gap: 10px; margin-bottom: 26px; }
.page-nav button {
  padding: 8px 20px; border-radius: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid rgba(var(--line-rgb), 0.6); color: var(--outline);
  background: rgba(var(--surface-low-rgb), 0.6); transition: all 0.2s;
}
.page-nav button.active { border-color: var(--secondary); color: var(--secondary); background: rgba(var(--secondary-rgb), 0.1); }
.page-nav button:hover:not(.active) { color: var(--on-surface); }

/* ---------- Album-Seite (Glass Panel) ---------- */
.album-page {
  position: relative;
  background: rgba(var(--surface-low-rgb), 0.62);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--outline-rgb), 0.12);
  border-radius: 8px;
  padding: 42px 38px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background-size: cover; background-position: center;
  /* KEIN blend-mode: der Brand-Schleier (engine.js, pageVeil) liegt als normale
     Alpha-Ebene über dem Bild — blend-modes kippen je nach Bildhelligkeit */
}
.slot-grid {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  justify-items: center;
}

/* ---------- Slots ---------- */
.slot { width: 236px; height: 336px; position: relative; perspective: 1200px; }
.slot-empty {
  width: 100%; height: 100%;
  border: 1px dashed rgba(var(--outline-rgb), 0.4);
  border-radius: 10px;
  background: repeating-linear-gradient(45deg,
    rgba(var(--surface-highest-rgb), 0.12), rgba(var(--surface-highest-rgb), 0.12) 10px,
    rgba(var(--surface-rgb), 0.12) 10px, rgba(var(--surface-rgb), 0.22) 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 18px;
  transition: border-color 0.25s, background 0.25s;
}
.slot-empty .glyph { font-size: 34px; opacity: 0.35; filter: grayscale(1); }
.slot-empty .slot-id { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--outline); }
.slot-empty .slot-title { font-size: 16px; font-weight: 600; color: rgba(var(--on-surface-rgb), 0.42); }
.slot-empty .slot-hint { font-size: 11px; color: rgba(var(--outline-rgb), 0.55); }
.slot-empty.ready {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--secondary-rgb), 0.07);
  animation: slot-breathe 1.6s ease-in-out infinite;
  cursor: pointer;
}
@keyframes slot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
  50% { box-shadow: 0 0 24px 2px rgba(var(--accent-rgb), 0.25); }
}

/* ---------- Karte (Trading Card) ---------- */
.card {
  width: 236px; height: 336px; border-radius: 10px; position: relative;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
  cursor: pointer;
}
.card-face {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  backface-visibility: hidden;
  background: linear-gradient(165deg, rgb(var(--surface-highest-rgb)) 0%, rgb(var(--surface-low-rgb)) 60%, rgb(var(--lowest-rgb)) 100%);
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--outline-rgb), 0.25);
}
.card:hover { transform: translateY(-6px) rotateX(3deg); }
.card.pasted { cursor: default; }
.card.pasted:hover { transform: none; }

/* Rarity-Rahmen */
.card[data-rarity="rare"] .card-face { border: 1px solid rgba(var(--secondary-rgb), 0.55); box-shadow: 0 0 18px rgba(var(--secondary-rgb), 0.22), inset 0 0 24px rgba(var(--secondary-rgb), 0.05); }
.card[data-rarity="epic"] .card-face { border: 1px solid rgba(177, 138, 255, 0.6); box-shadow: 0 0 20px rgba(177, 138, 255, 0.28), inset 0 0 26px rgba(177, 138, 255, 0.06); }
.card[data-rarity="legendary"] .card-face {
  border: 1px solid rgba(255, 184, 28, 0.75);
  box-shadow: 0 0 26px rgba(255, 184, 28, 0.32), inset 0 0 30px rgba(255, 184, 28, 0.07);
}
/* Holo-Foil-Shimmer für Legendary */
.card[data-rarity="legendary"] .card-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
    rgba(255, 224, 130, 0.18) 42%, rgba(var(--accent-rgb), 0.14) 50%,
    rgba(255, 184, 28, 0.18) 58%, transparent 70%);
  background-size: 260% 260%;
  animation: holo 3.6s linear infinite;
  mix-blend-mode: screen;
}
@keyframes holo {
  0% { background-position: 120% 120%; }
  100% { background-position: -60% -60%; }
}

.card-art { height: 55%; position: relative; overflow: hidden; border-bottom: 1px solid rgba(var(--line-rgb), 0.5); }
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-art .art-fallback {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(var(--secondary-rgb), 0.35), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(var(--secondary-rgb), 0.3), transparent 60%),
    linear-gradient(180deg, rgb(var(--surface-low-rgb)), rgb(var(--lowest-rgb)));
  display: flex; align-items: center; justify-content: center; font-size: 52px;
}
.card-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--lowest-rgb), 0.85));
}
.rarity-tag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 3px 10px; border-radius: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(var(--lowest-rgb), 0.85); backdrop-filter: blur(4px);
}
.rarity-tag.rare { color: var(--secondary); border: 1px solid rgba(var(--secondary-rgb), 0.45); }
.rarity-tag.epic { color: var(--epic-violet); border: 1px solid rgba(177, 138, 255, 0.5); }
.rarity-tag.legendary { color: var(--industrial-gold); border: 1px solid rgba(255, 184, 28, 0.55); }

.class-tag {
  position: absolute; bottom: 8px; left: 10px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(var(--on-surface-rgb), 0.85);
  padding: 2px 8px; border-radius: 3px;
  background: rgba(var(--secondary-rgb), 0.22); border: 1px solid rgba(var(--secondary-rgb), 0.35);
}

.card-body { flex: 1; padding: 14px 16px 12px; display: flex; flex-direction: column; }
.card-code { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: var(--outline); margin-bottom: 5px; }
.card-title { font-size: 17px; font-weight: 700; color: var(--on-surface); line-height: 1.25; margin-bottom: 6px; }
.card-tagline { font-size: 11.5px; color: var(--on-surface-variant); opacity: 0.8; font-style: italic; flex: 1; }
.card-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 9px; margin-top: 8px; border-top: 1px solid rgba(var(--line-rgb), 0.4);
}
.card-footer .state { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.state.unverified { color: var(--outline); }
.state.verified { color: var(--precision-cyan); }
.state.pasted { color: var(--industrial-gold); }

/* Eingeklebte Karte: Sticker-Look */
.slot .card.pasted { animation: paste-settle 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.slot .card.pasted .card-face { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65), 0 0 18px rgba(var(--secondary-rgb), 0.18); }
@keyframes paste-settle {
  0% { transform: scale(1.25) rotate(-4deg); }
  55% { transform: scale(0.96) rotate(1.5deg); }
  100% { transform: scale(1) rotate(0); }
}
.paste-badge {
  position: absolute; top: -10px; left: -10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--precision-cyan); color: #00303c;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.5);
}

/* ---------- Karten-Tray (lose Karten) ---------- */
.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(var(--lowest-rgb), 0.92); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(var(--secondary-rgb), 0.25);
  padding: 12px 28px 16px;
  transform: translateY(calc(100% - 42px));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.tray.open { transform: translateY(0); }
.tray-handle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 30px; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--secondary);
}
.tray-handle .count {
  background: var(--secondary-container); color: #00354c;
  border-radius: 999px; padding: 1px 9px; font-weight: 800;
}
.tray-cards { display: flex; gap: 16px; overflow-x: auto; padding: 10px 4px 6px; min-height: 150px; }
.tray-cards .mini-card {
  flex: 0 0 auto; width: 96px; height: 136px; border-radius: 7px;
  position: relative; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(var(--outline-rgb), 0.3);
  background: linear-gradient(165deg, rgb(var(--surface-highest-rgb)), rgb(var(--lowest-rgb)));
  transition: transform 0.2s, box-shadow 0.2s;
}
.mini-card:hover { transform: translateY(-6px) scale(1.04); }
.mini-card img { width: 100%; height: 62%; object-fit: cover; }
.mini-card .mc-fallback { width: 100%; height: 62%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: radial-gradient(ellipse at 40% 30%, rgba(var(--secondary-rgb),0.3), transparent), rgb(var(--surface-low-rgb)); }
.mini-card .mc-title { padding: 5px 7px 0; font-size: 9.5px; font-weight: 700; line-height: 1.25; color: var(--on-surface); }
.mini-card .mc-state { position: absolute; bottom: 5px; left: 7px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.mini-card.verified { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25); }
.mini-card.verified .mc-state { color: var(--precision-cyan); }
.mini-card.unverified .mc-state { color: var(--outline); }
.mini-card.unverified img, .mini-card.unverified .mc-fallback { filter: saturate(0.35) brightness(0.8); }
.tray-empty-note { color: var(--outline); font-size: 12px; padding: 40px 0; text-align: center; width: 100%; }

/* ---------- Fokus-Modal (Karte gross, Flip, Quiz) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(var(--lowest-rgb), 0.85); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.focus-wrap { display: flex; gap: 40px; align-items: stretch; max-width: 1000px; width: 92vw; max-height: 86vh; }

.focus-card { width: 320px; min-width: 320px; height: 456px; perspective: 1400px; align-self: center; }
.focus-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.focus-inner.flipped { transform: rotateY(180deg); }
.focus-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px;
  overflow: hidden; border: 1px solid rgba(var(--outline-rgb), 0.3);
  background: linear-gradient(165deg, rgb(var(--surface-highest-rgb)), rgb(var(--lowest-rgb)));
  display: flex; flex-direction: column;
}
.focus-face.back { transform: rotateY(180deg); padding: 22px; }
.focus-face.back .label { color: var(--precision-cyan); margin-bottom: 8px; }
.focus-face.back h3 { font-size: 17px; color: var(--on-surface); margin-bottom: 10px; line-height: 1.3; }
.focus-face.back .back-body { font-size: 12.5px; color: var(--on-surface-variant); overflow-y: auto; white-space: pre-line; flex: 1; }
.flip-hint { text-align: center; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--outline); margin-top: 10px; }

/* Nugget-Panel rechts */
.nugget-panel {
  flex: 1; background: rgba(var(--surface-low-rgb), 0.92); border: 1px solid rgba(var(--outline-rgb), 0.15);
  border-radius: 14px; padding: 30px 32px; overflow-y: auto;
}
.nugget-panel .n-code { font-size: 10px; font-weight: 800; letter-spacing: 0.2em; color: var(--precision-cyan); text-transform: uppercase; margin-bottom: 8px; }
.nugget-panel h2 { font-size: 25px; font-weight: 800; color: var(--on-surface); margin-bottom: 4px; letter-spacing: -0.01em; }
.nugget-panel .n-head { font-size: 15px; font-weight: 600; color: var(--secondary); margin: 14px 0 8px; }
.nugget-panel .n-body { font-size: 13.5px; color: var(--on-surface-variant); white-space: pre-line; margin-bottom: 16px; }
.takeaways { margin-bottom: 20px; }
.takeaways li {
  list-style: none; position: relative; padding: 7px 0 7px 26px;
  font-size: 12.5px; color: var(--on-surface); border-bottom: 1px solid rgba(var(--line-rgb), 0.3);
}
.takeaways li::before { content: "◆"; position: absolute; left: 4px; color: var(--precision-cyan); font-size: 10px; top: 9px; }

/* Quiz */
.quiz-box {
  border: 1px solid rgba(var(--secondary-rgb), 0.35); border-radius: 10px;
  background: rgba(var(--secondary-rgb), 0.06); padding: 18px 20px; margin-top: 6px;
}
.quiz-box .q-label { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--precision-cyan); margin-bottom: 8px; }
.quiz-box .q-question { font-size: 14.5px; font-weight: 600; color: var(--on-surface); margin-bottom: 14px; }
.q-option {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; margin-bottom: 8px; border-radius: 7px;
  border: 1px solid rgba(var(--line-rgb), 0.6); background: rgba(var(--surface-low-rgb), 0.7);
  color: var(--on-surface-variant); font-size: 13px; transition: all 0.18s;
}
.q-option:hover { border-color: var(--secondary); color: var(--on-surface); }
.q-option.correct { border-color: var(--precision-cyan); background: rgba(var(--accent-rgb), 0.1); color: var(--precision-cyan); }
.q-option.wrong { border-color: var(--alert-red); background: rgba(211, 47, 47, 0.1); color: var(--err-text); animation: shake 0.35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.q-gap-input {
  width: 100%; padding: 11px 14px; border-radius: 7px; margin-bottom: 10px;
  border: 1px solid rgba(var(--line-rgb), 0.7); background: rgba(var(--surface-rgb), 0.8);
  color: var(--on-surface); font-size: 14px; outline: none;
}
.q-gap-input:focus { border-color: var(--secondary); }
.q-feedback { font-size: 12.5px; margin-top: 10px; padding: 10px 12px; border-radius: 7px; display: none; }
.q-feedback.ok { display: block; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--on-surface); }
.q-feedback.fail { display: block; background: rgba(211, 47, 47, 0.08); border: 1px solid rgba(211, 47, 47, 0.35); color: var(--err-text); }

/* Media-Nugget (Video/Audio) */
#media-box { margin-bottom: 16px; }
.media-frame { width: 100%; aspect-ratio: 16/9; border: 1px solid rgba(var(--secondary-rgb), 0.35); border-radius: 10px; background: #000; display: block; }
.media-audio { width: 100%; display: block; }
.media-note { font-size: 10.5px; color: var(--outline); margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Sortier-Quiz */
.sort-seq { min-height: 34px; padding: 8px 10px; margin-bottom: 12px; border-radius: 7px; border: 1px dashed rgba(var(--accent-rgb), 0.35); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sort-hint { font-size: 11.5px; color: var(--outline); }
.sort-chip.picked { font-size: 11.5px; color: var(--precision-cyan); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 5px; padding: 4px 9px; }
.sort-item { font-size: 12.5px; }

.btn-paste {
  width: 100%; margin-top: 16px; padding: 14px;
  border-radius: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(120deg, var(--secondary-container), #0077b6);
  color: var(--on-accent); transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 6px 22px rgba(var(--secondary-rgb), 0.35);
}
.btn-paste:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-paste:disabled { background: var(--surface-highest); color: var(--outline); box-shadow: none; cursor: default; }
.btn-paste.gold { background: linear-gradient(120deg, var(--industrial-gold), #ff9800); color: #3a2500; box-shadow: 0 6px 22px rgba(255, 184, 28, 0.35); }

.modal-close {
  position: absolute; top: 22px; right: 26px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--surface-low-rgb), 0.8); border: 1px solid rgba(var(--outline-rgb), 0.3);
  color: var(--on-surface-variant); font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { color: var(--on-surface); border-color: var(--secondary); }

/* ---------- Booster-Öffnung ---------- */
.booster-overlay {
  position: fixed; inset: 0; z-index: 80;
  /* Grundton aus dem Branding, neutrale Vignette als Spotlight aufs Pack */
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.22)),
    rgba(var(--lowest-rgb), 0.985);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  overflow: hidden;
}
.booster-overlay.show { display: flex; }
#spark-canvas { position: absolute; inset: 0; pointer-events: none; }

.pack-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; z-index: 2; }
.pack {
  width: 260px; height: 370px; border-radius: 14px; position: relative; cursor: pointer;
  animation: pack-bob 3s ease-in-out infinite;
  transition: transform 0.2s;
}
@keyframes pack-bob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-14px) rotate(1.2deg); } }
.pack:hover { transform: scale(1.04); animation-play-state: paused; }
.pack-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 40px rgba(var(--secondary-rgb), 0.45), 0 0 120px rgba(var(--secondary-rgb), 0.18);
}
.pack-fallback {
  width: 100%; height: 100%; border-radius: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background:
    radial-gradient(ellipse at 50% 30%, rgba(var(--accent-rgb), 0.3), transparent 60%),
    linear-gradient(160deg, rgb(var(--surface-highest-rgb)), rgb(var(--lowest-rgb)));
  box-shadow: 0 0 40px rgba(var(--secondary-rgb), 0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.pack-fallback .p-logo { font-size: 46px; }
.pack-fallback .p-logo img { height: 64px; width: auto; max-width: 150px; object-fit: contain; display: block; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }
.pack-fallback .p-name { font-size: 20px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--secondary); }

/* --- Aufreissen am oberen Rand: zwei Layer mit komplementären Zickzack-Clips --- */
.pack-inner { position: absolute; inset: 0; }
.pack-layer { position: absolute; inset: 0; }
.pack-layer .pack-img, .pack-layer .pack-fallback { box-shadow: none; }
/* Glow sitzt am ungeclippten Pack, sonst schneidet der clip-path ihn ab */
.pack { box-shadow: 0 0 40px rgba(var(--secondary-rgb), 0.45), 0 0 120px rgba(var(--secondary-rgb), 0.18); }

/* Abriss-Streifen: dezenter Folien-Schimmer, damit die Kante als "Lasche" lesbar ist */
.pack-strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 70%);
}
.pack.torn .pack-strip {
  animation: strip-tear 0.72s cubic-bezier(0.3, 0.55, 0.45, 1) forwards;
  transform-origin: 8% 100%;
}
@keyframes strip-tear {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  22%  { transform: translate(9%, -12%) rotate(7deg); opacity: 1; }
  55%  { transform: translate(38%, -70%) rotate(22deg); opacity: 1; }
  100% { transform: translate(90%, -190%) rotate(46deg); opacity: 0; }
}
.pack.torn .pack-body { animation: body-recoil 0.5s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes body-recoil {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(7px) rotate(-1.6deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* Zackenkante + Glow aus der Öffnung werden erst nach dem Riss sichtbar */
.tear-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.tear-edge path { stroke: rgba(240, 246, 252, 0.85); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.pack.torn .tear-edge { opacity: 1; transition: opacity 0.15s; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.8)); }
.tear-glow {
  position: absolute; left: 0; right: 0; height: 22%; transform: translateY(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), 0.55), transparent 70%);
  opacity: 0; pointer-events: none;
}
.pack.torn .tear-glow { animation: tear-glow-pulse 0.7s ease-out forwards; }
@keyframes tear-glow-pulse {
  0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.55; }
}

/* Zugreifen: kurzes Anspannen vor dem Riss */
.pack.gripped { transform: scale(1.05) rotate(-1.5deg); animation: none; }
.pack.torn { animation: none; }

/* Optionales Firmenlogo auf dem Pack (Branding-Logo/Wordmark) */
.pack-logo {
  position: absolute; z-index: 3; pointer-events: none;
  padding: 7px 12px; border-radius: 8px;
  background: rgba(var(--lowest-rgb), 0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(var(--on-surface-rgb), 0.14);
}
.pack-logo img { display: block; height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.pack-logo.pos-bottom { bottom: 16px; left: 50%; transform: translateX(-50%); }
.pack-logo.pos-top-left { top: 19%; left: 12px; }
.pack-logo.pos-top-right { top: 19%; right: 12px; }

.pack.burst { animation: pack-burst 0.45s forwards; }
@keyframes pack-burst {
  0% { transform: scale(1.1); opacity: 1; filter: brightness(1.4); }
  100% { transform: scale(1.9); opacity: 0; filter: brightness(4); }
}
.pack-cta { font-size: 12px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--precision-cyan); animation: cta-blink 1.6s infinite; }
@keyframes cta-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pack-title { font-size: 30px; font-weight: 800; color: var(--on-surface); letter-spacing: -0.01em; }
.pack-sub { font-size: 13px; color: var(--on-surface-variant); margin-top: -18px; }

.flash {
  position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.9), transparent 65%);
  opacity: 0; pointer-events: none; z-index: 3;
}
.flash.go { animation: flash-anim 0.6s ease-out; }
@keyframes flash-anim { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* Karten-Reveal-Fächer */
.reveal-row {
  position: relative; z-index: 4; display: flex; gap: 22px;
  align-items: center; justify-content: center; flex-wrap: wrap; padding: 20px;
}
.reveal-card { width: 190px; height: 270px; perspective: 1100px; opacity: 0; }
.reveal-card.fly { animation: fly-in 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards; }
@keyframes fly-in {
  0% { opacity: 0; transform: translateY(240px) translateX(0) rotate(14deg) scale(0.4); }
  70% { opacity: 1; transform: translateY(-16px) rotate(-2deg) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.reveal-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.3, 0.9, 0.35, 1); transform: rotateY(180deg); }
.reveal-inner.revealed { transform: rotateY(0); }
.reveal-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.reveal-face.back-side {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg, rgba(var(--secondary-rgb), 0.06) 0 8px, transparent 8px 16px),
    radial-gradient(ellipse at center, rgb(var(--surface-low-rgb)), rgb(var(--lowest-rgb)));
  border: 1px solid rgba(var(--secondary-rgb), 0.35);
  display: flex; align-items: center; justify-content: center;
}
.reveal-face.back-side .logo { font-size: 40px; opacity: 0.8; }
.reveal-face.back-side .back-logo { max-width: 60%; max-height: 34%; object-fit: contain; opacity: 0.9; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6)); }
.reveal-done-btn {
  position: relative; z-index: 4; margin-top: 30px; padding: 14px 44px;
  border-radius: 6px; background: var(--secondary-container); color: #00354c;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.reveal-done-btn.show { opacity: 1; pointer-events: auto; }
.reveal-done-btn:hover { filter: brightness(1.15); }

/* Fliegende Klon-Karte (Einkleben) */
.flying-card {
  position: fixed; z-index: 90; pointer-events: none;
  transition: all 0.8s cubic-bezier(0.3, 0.7, 0.3, 1);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(var(--accent-rgb), 0.4);
}

/* Synergy-Leiste */
.synergy {
  margin-top: 34px; padding: 22px 26px; border-radius: 8px;
  background: rgba(var(--surface-low-rgb), 0.75); border: 1px solid rgba(var(--outline-rgb), 0.1);
}
.synergy .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.synergy h4 { font-size: 16px; font-weight: 700; }
.synergy .pct { font-size: 19px; font-weight: 800; color: var(--secondary); }
.synergy-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--surface-highest); overflow: hidden; border: 1px solid rgba(var(--line-rgb), 0.4); }
.synergy-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--secondary-container), var(--secondary));
  box-shadow: 0 0 10px rgba(var(--secondary-rgb), 0.4);
  transition: width 0.8s cubic-bezier(0.3, 0.8, 0.3, 1);
}
.synergy .note { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-surface-variant); margin-top: 10px; }
.synergy .note b { color: var(--precision-cyan); }
.synergy.complete { border-color: rgba(255, 184, 28, 0.5); }
.synergy.complete .pct { color: var(--industrial-gold); }
.synergy.complete .synergy-fill { background: linear-gradient(90deg, #ff9800, var(--industrial-gold)); box-shadow: 0 0 12px rgba(255, 184, 28, 0.5); }

/* Toast */
.toast {
  position: fixed; top: 84px; left: 50%; transform: translateX(-50%) translateY(-16px);
  z-index: 95; padding: 12px 26px; border-radius: 8px;
  background: rgba(var(--lowest-rgb), 0.95); border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--on-surface); font-size: 13px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: all 0.35s;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.gold { border-color: rgba(255, 184, 28, 0.55); }

/* Seite gesperrt (Welle 2 Teaser) */
.locked-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px; color: var(--outline); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .focus-wrap { flex-direction: column; align-items: center; overflow-y: auto; }
  .focus-card { width: 250px; min-width: 250px; height: 356px; }
  .nugget-panel { width: 100%; }
  .page-header h1 { font-size: 28px; }
  .topbar { padding: 0 14px; }
  .stat-chip { display: none; }
}

/* ---------- KI-Lern-Coach (white-labeled über Brand-Vars) ---------- */
.coach-fab {
  position: fixed; right: 20px; bottom: 64px; z-index: 45;
  display: none; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 24px;
  background: rgba(var(--lowest-rgb), 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--on-surface); font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.25);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s, transform 0.2s;
}
.coach-fab:hover { border-color: rgba(var(--accent-rgb), 0.8); transform: translateY(-2px); }

.coach-panel {
  position: fixed; right: 20px; bottom: 64px; z-index: 50;
  width: min(400px, calc(100vw - 24px)); height: min(560px, calc(100vh - 140px));
  display: none; flex-direction: column; overflow: hidden;
  background: rgba(var(--lowest-rgb), 0.96);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px; backdrop-filter: blur(16px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}
.coach-panel.open { display: flex; }
.coach-head {
  display: flex; align-items: center; gap: 6px; padding: 12px 14px;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
}
.coach-title { flex: 1; font-weight: 800; color: var(--primary); font-size: 14px; }
.coach-iconbtn { padding: 4px 8px; border-radius: 6px; color: var(--outline); font-size: 14px; }
.coach-iconbtn:hover { background: rgba(var(--surface-highest-rgb), 0.5); color: var(--on-surface); }

.coach-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.coach-msg { max-width: 86%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.coach-msg p { margin: 0 0 8px; }
.coach-msg p:last-child { margin: 0; }
.coach-msg.coach {
  align-self: flex-start;
  background: rgba(var(--surface-highest-rgb), 0.55);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-bottom-left-radius: 4px;
}
.coach-msg.user {
  align-self: flex-end;
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-bottom-right-radius: 4px;
}
@keyframes coach-pulse { 50% { opacity: 0.45; } }
.coach-msg.thinking { color: var(--outline); font-style: italic; animation: coach-pulse 1.2s infinite; }

.coach-chip {
  display: inline-block; margin: 1px 2px; padding: 2px 9px; border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.45);
  color: var(--precision-cyan); font-size: 12px; font-weight: 700;
}
.coach-chip:hover { background: rgba(var(--accent-rgb), 0.28); }

.coach-inputrow { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(var(--accent-rgb), 0.2); }
.coach-inputrow textarea {
  flex: 1; resize: none;
  background: rgba(var(--surface-highest-rgb), 0.4);
  border: 1px solid var(--outline-variant); border-radius: 9px;
  color: var(--on-surface); font-family: var(--font); font-size: 13.5px;
  padding: 9px 12px; outline: none;
}
.coach-inputrow textarea:focus { border-color: rgba(var(--accent-rgb), 0.6); }
.coach-send {
  padding: 0 16px; border-radius: 9px; font-size: 16px;
  background: rgba(var(--accent-rgb), 0.2); border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--precision-cyan); font-weight: 800;
}
.coach-send:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 560px) {
  .coach-panel { right: 8px; left: 8px; width: auto; bottom: 56px; height: min(70vh, 520px); }
  .coach-fab { bottom: 56px; right: 12px; }
}

/* ===== Album-Cover-Intro (cover.enabled): Cover erscheint, klappt wie ein Buchdeckel auf ===== */
.cover-overlay { position: fixed; inset: 0; z-index: 90; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: rgba(var(--lowest-rgb), 0.97); perspective: 1600px; }
.cover-overlay.show { display: flex; }
.cover-overlay.closing { opacity: 0; pointer-events: none; transition: opacity 0.55s ease 0.5s; }

.cover-book { position: relative; width: min(52vh, 80vw); aspect-ratio: 3 / 4;
  transform-style: preserve-3d; cursor: pointer;
  opacity: 0; transform: translateY(46px) scale(0.82) rotateX(12deg);
  transition: transform 0.85s cubic-bezier(0.18, 0.85, 0.3, 1.15), opacity 0.7s ease; }
.cover-book.in { opacity: 1; transform: none; }
.cover-book.open { transform: scale(1.08); transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1); }

/* Innenseite (erste "Albumseite" hinter dem Deckel) */
.cover-inner { position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(155deg, rgba(var(--surface-rgb), 1), rgba(var(--lowest-rgb), 1));
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25); }

/* Buchdeckel mit Artwork; klappt an der linken Kante auf */
.cover-front { position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  background: linear-gradient(165deg, rgb(var(--surface-highest-rgb)), rgb(var(--lowest-rgb))) center / cover no-repeat;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.55), 0 0 46px rgba(var(--accent-rgb), 0.22);
  transform-origin: left center; backface-visibility: hidden;
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 1s ease; }
.cover-book.open .cover-front { transform: rotateY(-152deg); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
/* Falz-Schatten am Buchrücken */
.cover-front::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent); pointer-events: none; }

/* Text-Overlays (Typo liegt ÜBER dem Artwork — KI-Text im Bild ist unzuverlässig) */
.cover-text { position: absolute; z-index: 2; line-height: 1.18; white-space: pre-wrap;
  max-width: 92%; pointer-events: none; }
.cover-text.shadow { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.55); }

/* Branding-Logo auf dem Deckel */
.cover-logo { position: absolute; z-index: 3; max-width: 36%; max-height: 13%;
  object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5)); }
.cover-logo.bottom { left: 50%; bottom: 4.5%; transform: translateX(-50%); }
.cover-logo.top-left { left: 6%; top: 4.5%; }
.cover-logo.top-right { right: 6%; top: 4.5%; }

.cover-cta { border: 1px solid rgba(var(--accent-rgb), 0.55); border-radius: 999px;
  padding: 12px 26px; background: rgba(var(--surface-rgb), 0.85); color: var(--on-surface);
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; opacity: 0;
  transition: opacity 0.6s ease 0.5s, border-color 0.2s; animation: coverPulse 2.4s infinite; }
.cover-book.in ~ .cover-cta { opacity: 1; }
.cover-book.open ~ .cover-cta { opacity: 0; transition: opacity 0.3s; }
.cover-cta:hover { border-color: rgba(var(--accent-rgb), 0.95); }
@keyframes coverPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50% { box-shadow: 0 0 22px 4px rgba(var(--accent-rgb), 0.18); }
}

/* ===== Mail-Benachrichtigungen (Opt-in-Glocke + Panel) ===== */
.mail-fab { position: fixed; right: 20px; bottom: 128px; z-index: 44;
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; font-size: 19px;
  background: rgba(var(--lowest-rgb), 0.92); color: var(--on-surface);
  border: 1px solid rgba(var(--accent-rgb), 0.45); cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); transition: transform 0.15s, border-color 0.15s; }
.mail-fab:hover { border-color: rgba(var(--accent-rgb), 0.85); transform: translateY(-2px); }

.mail-panel { position: fixed; right: 20px; bottom: 184px; z-index: 46; width: 330px;
  display: none; padding: 18px; border-radius: 14px;
  background: rgba(var(--lowest-rgb), 0.97); border: 1px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); color: var(--on-surface); }
.mail-panel.open { display: block; }
.mail-head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 14px; margin-bottom: 8px; }
.mail-text { font-size: 12px; line-height: 1.55; color: var(--on-surface-variant); margin-bottom: 12px; }
.mail-row { display: flex; gap: 8px; }
.mail-row input { flex: 1; background: rgba(var(--surface-low-rgb), 0.8);
  border: 1px solid rgba(var(--line-rgb), 0.6); border-radius: 8px; padding: 9px 12px;
  color: var(--on-surface); font-size: 13px; outline: none; font-family: inherit; }
.mail-row input:focus { border-color: var(--secondary); }
.mail-submit { border: none; border-radius: 8px; padding: 9px 16px; font-family: inherit;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--secondary-container); color: var(--on-accent); cursor: pointer; }
.mail-submit:disabled { opacity: 0.5; }
.mail-note { font-size: 11.5px; margin-top: 9px; line-height: 1.5; display: none; }
.mail-note.ok { display: block; color: var(--precision-cyan); }
.mail-note.err { display: block; color: var(--err-text); }

@media (max-width: 560px) {
  .mail-panel { right: 8px; left: 8px; width: auto; }
  .mail-fab { bottom: 116px; right: 12px; }
}

/* ===== Booster-Ankündigung: Hero-Moment vor geblurrtem Album ===== */
.booster-announce {
  position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center; overflow-y: auto;
  background: rgba(var(--lowest-rgb), 0.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.booster-announce.show { display: flex; animation: ba-fade 0.45s ease; }
@keyframes ba-fade { from { opacity: 0; } to { opacity: 1; } }
.ba-box {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: auto; padding: 24px; text-align: center;
  animation: ba-rise 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes ba-rise { from { opacity: 0; transform: translateY(38px) scale(0.92); } to { opacity: 1; transform: none; } }
.ba-title { font-size: 30px; font-weight: 800; color: var(--on-surface); letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.ba-text { font-size: 14px; color: var(--on-surface-variant); margin-top: -8px; max-width: 420px; line-height: 1.5; }
.ba-pack { margin: 10px 0 4px; } /* .pack liefert Größe, Schwebe-Animation, Hover-Reaktion */
.ba-pack:hover { transform: scale(1.05) rotate(1deg); }
.ba-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ba-open {
  padding: 14px 36px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--secondary-container); color: var(--on-accent);
  font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: 0 0 24px rgba(var(--secondary-rgb), 0.35);
}
.ba-open:hover { filter: brightness(1.15); }
.ba-later {
  padding: 14px 24px; border-radius: 8px; cursor: pointer;
  background: rgba(var(--surface-rgb), 0.7); border: 1px solid rgba(var(--outline-rgb), 0.4);
  color: var(--on-surface-variant); font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ba-later:hover { color: var(--on-surface); border-color: rgba(var(--outline-rgb), 0.8); }

/* Booster-Button ohne offenes Pack: bleibt klickbar (Info zum nächsten Booster) */
.btn-booster.muted { animation: none; background: var(--surface-highest); color: var(--on-surface-variant); }
.btn-booster.muted:hover { filter: none; transform: none; }

/* Mobile: Booster-Overlay scrollbar — Reveal-Karten + Einsammeln-Button immer erreichbar */
@media (max-width: 860px) {
  .booster-overlay { justify-content: flex-start; overflow-y: auto; padding: 24px 0 max(20px, env(safe-area-inset-bottom)); }
  .booster-overlay .pack-stage { margin-top: auto; }
  .booster-overlay .reveal-done-btn { margin-bottom: auto; }
  .reveal-card { width: 138px; height: 196px; }
  .reveal-row { gap: 12px; padding: 12px; }
  .ba-title { font-size: 22px; }
  .ba-pack { width: 210px; height: 300px; }
}

/* ============================================================
   HAPTISCHES ALBUM — Design-Stil "album" (Default seit 2026-07).
   Reine Präsentationsschicht über dem klassischen Look:
   brand.designStyle = "classic" schaltet sie komplett ab.
   Alle Töne kommen weiter zu 100 % aus dem Branding (RGB-Vars).
   Leitidee: ein hochwertiges Sammelalbum auf einem Schreibtisch —
   Papierkorn, Klebefilm, Prägung, echtes Umblättern, Folien-Schimmer.
   ============================================================ */

/* Schreibtisch-Tiefe: fotografische Vignette über der Szene */
body.style-album::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 36%, transparent 52%, rgba(0, 0, 0, 0.28) 100%);
}

/* --- Die Album-Seite als echter Papierbogen im Ringbuch --- */
body.style-album .album-page {
  border-radius: 4px 12px 12px 4px; /* Buchrücken links, Blattkante rechts */
  border: 1px solid rgba(var(--outline-rgb), 0.24);
  backdrop-filter: none;
  box-shadow:
    2px 2px 0 rgba(var(--surface-highest-rgb), 0.95),
    3px 3px 0 rgba(var(--outline-rgb), 0.30),
    5px 5px 0 rgba(var(--surface-highest-rgb), 0.75),
    6px 6px 0 rgba(var(--outline-rgb), 0.22),
    9px 10px 0 rgba(var(--surface-highest-rgb), 0.5),
    0 34px 80px rgba(0, 0, 0, 0.55);
  padding-left: 64px; /* Platz für Bindung + Lochung */
}
/* Falz-Schatten + Ringbuch-Lochung an der Bindung */
body.style-album .album-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  border-radius: inherit;
  background:
    radial-gradient(circle 6px at 22px 48px, rgba(0, 0, 0, 0.42) 3.5px, rgba(255, 255, 255, 0.10) 4.5px, transparent 6px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.05) 30px, transparent 58px);
  background-repeat: repeat-y, no-repeat;
  background-size: 44px 108px, 100% 100%;
}
/* Papierkorn über der ganzen Seite (vereinheitlicht Karten + Papier zu EINEM Objekt) */
body.style-album .album-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  border-radius: inherit; opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Umblättern: Seite klappt an der Bindung herein --- */
@keyframes pageFlipIn {
  0%   { transform: perspective(1800px) rotateY(-68deg); opacity: 0.15;
         box-shadow: -30px 12px 50px rgba(0, 0, 0, 0.35); }
  55%  { opacity: 1; }
  78%  { transform: perspective(1800px) rotateY(6deg); }
  100% { transform: perspective(1800px) rotateY(0deg); }
}
body.style-album .album-page.flip-in {
  transform-origin: left center;
  animation: pageFlipIn 0.7s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* --- Eingeklebte Karten: handgemacht schief, mit Klebefilm, abhebbar --- */
body.style-album .slot .card.pasted {
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), filter 0.3s;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.33));
}
body.style-album .slot .card.pasted:hover {
  transform: rotate(0deg) translateY(-7px) scale(1.025);
  filter: drop-shadow(0 20px 18px rgba(0, 0, 0, 0.45));
  z-index: 3;
}
/* Klebefilm über den oberen Ecken (leicht glasig, gerissene Kanten) */
body.style-album .slot .card.pasted::before,
body.style-album .slot .card.pasted::after {
  content: ""; position: absolute; width: 72px; height: 22px; z-index: 4; top: -8px;
  background: linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.14));
  border-left: 1px dashed rgba(255, 255, 255, 0.4);
  border-right: 1px dashed rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(1.5px);
}
body.style-album .slot .card.pasted::before { left: -16px; transform: rotate(-45deg); }
body.style-album .slot .card.pasted::after { right: -16px; transform: rotate(45deg); }

/* Folien-Schimmer auch für Epic (Legendary hat ihn schon) */
body.style-album .card.pasted[data-rarity="epic"] .card-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%,
    rgba(177, 138, 255, 0.15) 46%, rgba(var(--accent-rgb), 0.10) 52%,
    rgba(177, 138, 255, 0.13) 58%, transparent 70%);
  background-size: 260% 260%;
  animation: holo 4.8s linear infinite;
  mix-blend-mode: screen;
}

/* --- Leerplätze: ins Papier geprägt statt aufgemalt --- */
body.style-album .slot-empty {
  border: 1px dashed rgba(var(--outline-rgb), 0.5);
  border-radius: 8px;
  background: rgba(var(--lowest-rgb), 0.16);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
body.style-album .slot-empty .glyph { font-size: 46px; opacity: 0.35; filter: grayscale(0.4); }
body.style-album .slot-empty .slot-id { letter-spacing: 0.2em; opacity: 0.7; }

/* --- Kapitel-Label als schief aufgeklebter Sticker, Titel als Druck --- */
body.style-album .page-header .chapter {
  display: inline-block; transform: rotate(-1.6deg);
  background: rgba(var(--accent-rgb), 0.13);
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  border-radius: 3px; padding: 6px 18px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}
body.style-album .page-header h1 { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22); }

/* --- Seiten-Navigation als Register-Reiter --- */
body.style-album .page-nav button {
  border-radius: 9px 9px 3px 3px;
  background: rgba(var(--surface-highest-rgb), 0.65);
  border: 1px solid rgba(var(--outline-rgb), 0.3);
  border-bottom-width: 3px;
  transform: translateY(1px);
}
body.style-album .page-nav button.active {
  transform: translateY(-2px) rotate(-0.6deg);
  border-bottom: 3px solid var(--secondary);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

/* --- Tray: lose Karten liegen als Stapel auf der Tischkante --- */
body.style-album .mini-card {
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42), 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
body.style-album .mini-card:hover { transform: rotate(0deg) translateY(-8px); }

/* --- Teaser-Seiten: Sperrhinweis als Gummistempel --- */
body.style-album .locked-note {
  width: fit-content; margin-left: auto; margin-right: auto;
  padding: 10px 24px; transform: rotate(-2.4deg);
  border: 3px double rgba(var(--secondary-rgb), 0.55); border-radius: 8px;
  color: rgba(var(--secondary-rgb), 0.95);
  font-weight: 800; letter-spacing: 0.22em;
}

/* --- Fortschritt: wie auf die Seite gedruckt --- */
body.style-album .synergy {
  background: rgba(var(--lowest-rgb), 0.12);
  border: 1px solid rgba(var(--outline-rgb), 0.28);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.14);
}
body.style-album .synergy-bar { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25); }

/* Mobile: Bindung schmaler, Klebefilm kleiner */
@media (max-width: 860px) {
  body.style-album .album-page { padding-left: 40px; }
  body.style-album .album-page::before {
    background-size: 30px 108px, 100% 100%;
    background-image:
      radial-gradient(circle 5px at 14px 48px, rgba(0, 0, 0, 0.42) 2.8px, rgba(255, 255, 255, 0.10) 3.8px, transparent 5px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.04) 20px, transparent 40px);
  }
  body.style-album .slot .card.pasted::before,
  body.style-album .slot .card.pasted::after { width: 54px; height: 17px; top: -6px; }
}

/* Kapitel-Chip entfällt im Album-Stil — der aktive Register-Reiter trägt den Namen schon */
body.style-album .page-header .chapter { display: none; }