/* ===================== TAEGLICHE QUESTS (Startseite) =====================
     1:1-Port der „Grimoire"-Vorlage (Summary-Bar + Quest-Tomes + Fuss-Note),
     in die Startseite integriert. Markup: app/quests.js -> #dailyQuestPanel.
     Scoped unter .dailyQuestPanel. Souls = Amethyst-Tropfen (global .soul-gem). */
  .dailyQuestSection {
    grid-column: 1 / -1;
    margin: 0 -64px;
    padding: 0 var(--home-gutter, 64px) 46px;
    background: rgba(7, 8, 11, .9);
  }
  .dailyQuestPanel { position: relative; }
  .dailyQuestPanel .quests-locked {
    padding: 18px 22px;
    border: 1px dashed rgba(216, 177, 90, .2);
    background: rgba(11, 13, 18, .4);
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-size: 15px;
  }

  /* ── Grimoire-Tome: Vellum + Gold-Doppelrahmen + Filigran-Ecken (geteilt mit Login) ── */
  .dailyQuestPanel .tome, .loginStreakPanel .tome {
    position: relative;
    background:
      radial-gradient(ellipse 120% 55% at 50% 0%, rgba(216, 177, 90, 0.05), transparent 58%),
      linear-gradient(180deg, rgba(18, 21, 28, 0.92) 0%, rgba(11, 13, 18, 0.95) 100%);
    border: 1px solid rgba(216, 177, 90, 0.22);
    box-shadow: inset 0 0 0 1px rgba(216, 177, 90, 0.05), inset 0 0 70px rgba(0,0,0,0.4), 0 24px 60px -28px rgba(0,0,0,0.8);
  }
  .dailyQuestPanel .tome::before, .loginStreakPanel .tome::before {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid rgba(216, 177, 90, 0.12); pointer-events: none;
  }
  .dailyQuestPanel .cnr, .loginStreakPanel .cnr {
    position: absolute; width: 16px; height: 16px;
    border: 1px solid var(--mp-gold-2); opacity: 0.7; pointer-events: none;
  }
  .dailyQuestPanel .cnr.tl, .loginStreakPanel .cnr.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
  .dailyQuestPanel .cnr.tr, .loginStreakPanel .cnr.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
  .dailyQuestPanel .cnr.bl, .loginStreakPanel .cnr.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
  .dailyQuestPanel .cnr.br, .loginStreakPanel .cnr.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

  /* Summary-Bar (.tome.bar) */
  .dailyQuestPanel .bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; padding: 15px 24px; }
  .dailyQuestPanel .bar-item { display: flex; align-items: center; gap: 10px; }
  .dailyQuestPanel .bar-k { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }
  .dailyQuestPanel .bar-v { font-family: var(--mp-serif); font-size: 20px; font-weight: 700; color: var(--mp-gold-1); line-height: 1; display: inline-flex; align-items: center; gap: 7px; }
  .dailyQuestPanel .bar-v.soul { color: var(--mp-soul-1); }
  .dailyQuestPanel .bar-sep { width: 1px; height: 28px; background: rgba(216, 177, 90, 0.16); }
  .dailyQuestPanel .bar-reset { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .dailyQuestPanel .bar-reset .rk { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
  .dailyQuestPanel .bar-reset .rk svg { color: var(--mp-gold-2); }
  .dailyQuestPanel .bar-reset .rv { font-family: var(--mp-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mp-bone); background: rgba(7, 8, 11, 0.5); border: 1px solid rgba(77, 208, 196, 0.22); padding: 6px 11px; letter-spacing: 1px; }

  /* Quest-Grid (.grid -> .tome.quest) */
  .dailyQuestPanel .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .dailyQuestPanel .quest { position: relative; display: flex; flex-direction: column; padding: 24px 24px 22px; transition: border-color 220ms ease, transform 220ms ease; }
  .dailyQuestPanel .quest.ready {
    border-color: rgba(216, 177, 90, 0.45);
    background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(216, 177, 90, 0.1), transparent 70%), linear-gradient(180deg, rgba(28, 24, 14, 0.6), rgba(13, 12, 9, 0.82));
    box-shadow: inset 0 0 0 1px rgba(216, 177, 90, 0.14), inset 0 0 50px rgba(0,0,0,0.35), 0 8px 30px rgba(216, 177, 90, 0.08);
  }
  .dailyQuestPanel .quest.claimed { opacity: 0.6; }
  .dailyQuestPanel .q-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
  .dailyQuestPanel .q-ico { position: relative; width: 50px; height: 50px; display: grid; place-items: center; color: var(--mp-teal-1); border: 1px solid rgba(77, 208, 196, 0.3); transform: rotate(45deg); flex-shrink: 0; background: radial-gradient(circle, rgba(35,155,149,0.1), transparent 70%); }
  .dailyQuestPanel .q-ico > svg, .dailyQuestPanel .q-ico > * { transform: rotate(-45deg); }
  .dailyQuestPanel .q-emoji { font-size: 22px; }
  .dailyQuestPanel .quest.ready .q-ico { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.42); background: radial-gradient(circle, rgba(216,177,90,0.12), transparent 70%); }
  .dailyQuestPanel .q-reward { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-family: var(--mp-mono); font-size: 14px; font-weight: 500; color: var(--mp-soul-1); background: rgba(7, 8, 11, 0.5); border: 1px solid color-mix(in srgb, var(--mp-soul-1) 32%, transparent); }
  .dailyQuestPanel .q-title { font-family: var(--mp-serif); font-size: 21px; letter-spacing: 0.5px; color: var(--mp-bone); font-weight: 600; line-height: 1.1; margin-bottom: 5px; }
  .dailyQuestPanel .q-sub { font-family: var(--mp-serif-body); font-size: 15px; font-style: italic; color: var(--mp-ink-dim); margin-bottom: 20px; }
  .dailyQuestPanel .q-prog { margin-top: auto; margin-bottom: 18px; }
  .dailyQuestPanel .q-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-family: var(--mp-mono); font-size: 11px; color: var(--mp-ink-dim); }
  .dailyQuestPanel .q-prog-head .pc { color: var(--mp-bone); }
  .dailyQuestPanel .quest.ready .q-prog-head .pc { color: var(--mp-gold-1); }
  .dailyQuestPanel .q-bar { height: 6px; background: rgba(216, 177, 90, 0.1); border: 1px solid rgba(255,255,255,0.04); position: relative; overflow: hidden; }
  .dailyQuestPanel .q-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--mp-soul-3), var(--mp-soul-1)); box-shadow: 0 0 8px var(--mp-soul-glow); transition: transform 500ms ease; }
  .dailyQuestPanel .quest.ready .q-fill { background: linear-gradient(90deg, #c89a3e, #f0d27a); box-shadow: 0 0 8px var(--mp-gold-glow); }
  .dailyQuestPanel .q-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; width: 100%; font-family: var(--mp-sans); font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; transition: transform 180ms ease, box-shadow 180ms ease; border: 0; }
  .dailyQuestPanel .q-btn.open { color: var(--mp-ink-dim); background: rgba(7, 8, 11, 0.4); border: 1px solid rgba(216, 177, 90, 0.14); cursor: default; }
  .dailyQuestPanel .q-btn.claim { color: #0c0e13; background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%); border: 1px solid #f0d27a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); cursor: pointer; }
  .dailyQuestPanel .q-btn.claim:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(216, 177, 90, 0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
  .dailyQuestPanel .q-btn.done { color: var(--mp-teal-1); background: rgba(35, 155, 149, 0.08); border: 1px solid rgba(77, 208, 196, 0.25); cursor: default; }

  /* Fuss-Note */
  .dailyQuestPanel .note { margin-top: 26px; display: flex; align-items: center; gap: 14px; padding: 16px 24px; border: 1px dashed rgba(216, 177, 90, 0.2); background: rgba(11, 13, 18, 0.4); font-family: var(--mp-serif-body); font-size: 16px; color: var(--mp-ink-dim); }
  .dailyQuestPanel .note .drop { font-family: var(--mp-serif); font-size: 30px; line-height: 1; color: var(--mp-gold-1); flex-shrink: 0; text-shadow: 0 0 14px var(--mp-gold-glow); }
  .dailyQuestPanel .note b { color: var(--mp-ink); font-weight: 600; }

  @media (max-width: 820px) {
    .dailyQuestPanel .grid { grid-template-columns: 1fr; }
    .dailyQuestPanel .bar-reset { margin-left: 0; width: 100%; }
  }

  /* ===================== TAEGLICHE LOGIN-BELOHNUNG (Startseite) =============
     1:1-Port der „Grimoire"-Daily-Tome: Sigil + Eyebrow/Titel + Level-Block +
     Filigran-Trenner + 7-Tage-Streak + Wachs-Siegel + „heute erhalten"-Banner.
     Markup: app/login-streak.js -> #loginStreakPanel. Scoped unter .loginStreakPanel.
     Vollbreiter dunkler Abschnitt, nahtlos an #dailyRewardHead anschliessend. */
  .loginStreakSection {
    grid-column: 1 / -1;
    margin: 0 -64px;
    padding: 6px var(--home-gutter, 64px) 30px;
    background: rgba(7, 8, 11, .9);
  }
  .loginStreakPanel { position: relative; }
  .loginStreakPanel .loginLocked {
    padding: 18px 22px; border: 1px dashed rgba(216, 177, 90, .2);
    background: rgba(11, 13, 18, .4); color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body); font-size: 15px;
  }

  /* Daily-Tome Kopf: Sigil + Eyebrow/Titel/Sub links, Level-Block rechts */
  .loginStreakPanel .daily { padding: 30px 36px; }
  .loginStreakPanel .daily-top { display: flex; align-items: flex-start; gap: 20px; }
  .loginStreakPanel .sigil { position: relative; width: 56px; height: 56px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid rgba(216, 177, 90, 0.4); background: radial-gradient(circle at 50% 35%, rgba(216, 177, 90, 0.16), rgba(7,8,11,0.6)); transform: rotate(45deg); box-shadow: inset 0 0 18px rgba(216, 177, 90, 0.12); }
  .loginStreakPanel .sigil svg { transform: rotate(-45deg); color: var(--mp-gold-1); filter: drop-shadow(0 0 8px var(--mp-gold-glow)); }
  .loginStreakPanel .sigil::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(216, 177, 90, 0.14); }
  .loginStreakPanel .daily-head-text { padding-top: 2px; }
  .loginStreakPanel .daily-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--mp-teal-1); margin-bottom: 8px; }
  .loginStreakPanel .daily-eyebrow .dot { width: 5px; height: 5px; background: var(--mp-teal-1); border-radius: 50%; box-shadow: 0 0 7px var(--mp-teal-1); animation: lp-pulse 1.9s ease-in-out infinite; }
  @keyframes lp-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
  .loginStreakPanel .daily-title { font-family: var(--mp-serif); font-weight: 700; font-size: 30px; letter-spacing: 1px; margin: 0; line-height: 1; background: linear-gradient(180deg, #f5ebcf 0%, #e8c879 55%, #b88a2f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .loginStreakPanel .daily-sub { font-family: var(--mp-serif-body); font-size: 17px; color: var(--mp-ink); margin: 7px 0 0; font-style: italic; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .loginStreakPanel .daily-sub .lp-best { font-style: normal; font-family: var(--mp-sans); font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); border: 1px solid rgba(216, 177, 90, 0.16); padding: 3px 8px; }

  /* Level-Block (rechts): aktuelle Stufe + naechstes Level-Up-Reward als Ziel */
  .loginStreakPanel .lvl { margin-left: auto; width: 280px; flex-shrink: 0; text-align: right; }
  .loginStreakPanel .lvl-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 9px; }
  .loginStreakPanel .lvl-badge { font-family: var(--mp-serif); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--mp-aura-1); padding: 5px 12px; white-space: nowrap; border: 1px solid rgba(217, 112, 159, 0.4); background: rgba(154, 63, 106, 0.12); }
  .loginStreakPanel .lvl-next { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); }
  .loginStreakPanel .lvl-next b { color: var(--mp-soul-1); font-family: var(--mp-mono); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
  .loginStreakPanel .lvl-bar { height: 7px; background: rgba(216, 177, 90, 0.1); border: 1px solid rgba(255,255,255,0.05); position: relative; overflow: hidden; }
  .loginStreakPanel .lvl-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #9a3f6a, #f0a6c6); box-shadow: 0 0 10px var(--mp-aura-glow); transition: width 500ms ease; }
  .loginStreakPanel .lvl-xp { font-family: var(--mp-mono); font-size: 10.5px; color: var(--mp-ink-dim); margin-top: 6px; letter-spacing: 0.5px; }
  .loginStreakPanel .lvl-xp b { color: var(--mp-bone); }

  /* Filigran-Trenner */
  .loginStreakPanel .fil-div { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; color: var(--mp-gold-3); }
  .loginStreakPanel .fil-div .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216,177,90,0.3)); }
  .loginStreakPanel .fil-div .ln.r { background: linear-gradient(90deg, rgba(216,177,90,0.3), transparent); }
  .loginStreakPanel .fil-div .gem { width: 6px; height: 6px; background: var(--mp-gold-1); transform: rotate(45deg); box-shadow: 0 0 7px var(--mp-gold-glow); }

  /* 7-Tage-Streak */
  .loginStreakPanel .streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
  .loginStreakPanel .day { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px 8px 15px; text-align: center; border: 1px solid rgba(216, 177, 90, 0.12); background: linear-gradient(180deg, rgba(24, 27, 35, 0.6), rgba(13, 15, 21, 0.75)); transition: all 200ms ease; }
  .loginStreakPanel .day .d-k { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--mp-ink-dim); margin-bottom: 10px; }
  .loginStreakPanel .day .d-v { font-family: var(--mp-serif); font-size: 18px; font-weight: 700; color: var(--mp-bone); display: inline-flex; align-items: center; gap: 5px; }
  .loginStreakPanel .d-relic { margin-top: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--mp-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--mp-relic-1); }
  .loginStreakPanel .d-pack { margin-top: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-family: var(--mp-serif); font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--mp-gold-1); }
  .loginStreakPanel .d-pack svg { width: 12px; height: 12px; }
  .loginStreakPanel .day.milestone { border-color: rgba(216, 59, 69, 0.4); background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(216, 59, 69, 0.12), transparent 70%), linear-gradient(180deg, rgba(26, 14, 14, 0.6), rgba(15, 10, 11, 0.8)); }
  .loginStreakPanel .day.milestone .d-k { color: var(--mp-relic-2); }
  .loginStreakPanel .day.is-done { border-color: rgba(77, 208, 196, 0.28); }
  .loginStreakPanel .day.is-upcoming { opacity: 0.5; }
  .loginStreakPanel .day.is-upcoming .d-v { color: var(--mp-ink); }
  .loginStreakPanel .day.is-upcoming .d-k { color: var(--mp-ink-faint); }
  .loginStreakPanel .day.is-today { border-color: rgba(77, 208, 196, 0.55); background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(77, 208, 196, 0.12), transparent 70%), linear-gradient(180deg, rgba(13, 24, 24, 0.7), rgba(9, 14, 15, 0.85)); box-shadow: 0 0 0 1px rgba(77, 208, 196, 0.2), 0 6px 22px rgba(77, 208, 196, 0.08); }
  .loginStreakPanel .day .seal { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #07120f; background: radial-gradient(circle at 35% 30%, #8ef0e2, #2c8a82 70%); box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.3); border: 1px solid rgba(158, 233, 224, 0.6); }

  /* „heute erhalten"-Banner (abgeholt) bzw. Abholen-Button (abholbar) */
  .loginStreakPanel .claimed-banner { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 11px; padding: 15px; font-family: var(--mp-sans); font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--mp-teal-1); background: linear-gradient(90deg, transparent, rgba(35, 155, 149, 0.08), transparent); border: 1px solid rgba(77, 208, 196, 0.22); }
  .loginStreakPanel .claimed-banner svg { color: var(--mp-teal-1); }
  .loginStreakPanel .lp-action { margin-top: 20px; display: flex; }
  .loginStreakPanel .claim-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; font-family: var(--mp-sans); font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700; color: #0c0e13; background: linear-gradient(180deg, #f3d88a 0%, #d8b15a 45%, #ad8230 100%); border: 1px solid #f0d27a; box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
  .loginStreakPanel .claim-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(216, 177, 90, 0.4), inset 0 1px 0 rgba(255,255,255,0.5); }
  .loginStreakPanel .claim-btn.is-loading { opacity: 0.6; pointer-events: none; }
  .loginStreakPanel .claim-btn svg { width: 17px; height: 17px; }

  @media (max-width: 900px) {
    .loginStreakPanel .lvl { width: 220px; }
    .loginStreakPanel .streak { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 620px) {
    .loginStreakPanel .daily { padding: 22px 18px; }
    .loginStreakPanel .daily-top { flex-direction: column; }
    .loginStreakPanel .lvl { margin-left: 0; width: 100%; text-align: left; }
    .loginStreakPanel .lvl-row { justify-content: flex-start; }
    .loginStreakPanel .streak { grid-template-columns: repeat(2, 1fr); }
  }

  /* ===================== WAEHRUNGS-GEWINN-FEEDBACK (rein visuell) ========== */
  .currencyGain {
    position: fixed;
    z-index: 1400;
    transform: translate(-50%, 0);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--mp-soul-1) 55%, transparent);
    background: linear-gradient(180deg, rgba(28, 18, 40, .96), rgba(12, 9, 16, .96));
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--mp-soul-1) 35%, transparent);
    font-family: var(--mp-serif);
    font-weight: 700;
    font-size: 17px;
    color: var(--mp-soul-1);
    pointer-events: none;
    white-space: nowrap;
    animation: currency-gain-rise 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .currencyGain--currency {
    border-color: color-mix(in srgb, var(--mp-relic-1) 55%, transparent);
    background: linear-gradient(180deg, rgba(40, 16, 18, .96), rgba(18, 8, 9, .96));
    box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 18px color-mix(in srgb, var(--mp-relic-1) 35%, transparent);
    color: var(--mp-relic-1);
  }
  .currencyGain--center { left: 50%; top: 76px; }
  .currencyGain .cg-ic { font-size: 13px; }
  @keyframes currency-gain-rise {
    0%   { opacity: 0; transform: translate(-50%, 6px) scale(.85); }
    18%  { opacity: 1; transform: translate(-50%, -2px) scale(1.06); }
    32%  { transform: translate(-50%, -6px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
  }
  /* Kurzer Puls auf der Guthaben-Anzeige, wenn sich der Betrag aendert. */
  .wallet-pulse { animation: wallet-pulse-kf .7s ease both; }
  @keyframes wallet-pulse-kf {
    0%   { filter: none; }
    35%  { filter: brightness(1.5) drop-shadow(0 0 8px color-mix(in srgb, var(--mp-soul-1) 60%, transparent)); }
    100% { filter: none; }
  }

  /* ===================== BESCHWÖRUNGEN / PACKS (Grimoire-Vorlage) =====================
     1:1-Port des Claude-Design-Exports „Pack (Grimoire)". Shelf-Karten (.gpk .pack)
     + cinematisches Aufdeck-Overlay (.po): Beschwörungskreis -> Austeilen -> Aufdecken.
     Neue Fraktions-Crests (Anker/Totenschädel). ON TOP behalten wir aus dem alten
     Reveal: unseren Aufdeck-Sound (JS), eine eigene Ring-Puls-/Legendär-Blitz-Animation
     (.po-ourring / .po-stage.legflash) und die goldenen Eckklammern (.po-corner).
     Alles unter .gpk / .po gescoped; Design-Tokens lokal definiert (mappen auf --mp-*). */
  .gpk, .po {
    --gold-1: #d8b15a; --gold-2: #c89a3e; --gold-3: #8a6a25; --gold-hi: #f3dca0;
    --gold-glow: rgba(216, 177, 90, 0.3);
    --parchment: #ece2c8; --bone: #e8dec5; --ink: #aea58c; --ink-dim: #8b8268; --ink-faint: #4a4537;
    --rar-common: #9a8f70; --rar-rare: #74c8d6; --rar-epic: #b083de; --rar-legend: #e8c879;
    --serif: var(--mp-serif, "Cinzel", serif);
    --serif-deco: var(--mp-serif, "Cinzel", serif);
    --serif-body: var(--mp-serif-body, "Cormorant Garamond", serif);
    --sans: var(--mp-sans, system-ui, sans-serif);
    --mono: var(--mp-mono, ui-monospace, monospace);
  }

  /* ===== Shelf-Container ===== */
  .gpk {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 12px 48px;
    overflow: hidden;
  }
  /* KEIN eigener Block-Glow (Page-Glow-Spec): der Ambient-Glow kommt von der
     Seiten-heroVignette. Sonst doppelter „Fenster"-Glow über der Seite. */
  .gpk > * { position: relative; z-index: 1; }

  /* drifting page motes */
  .gpk .page-motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .gpk .pm { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgba(150, 220, 220, 0.5); box-shadow: 0 0 7px rgba(120, 210, 210, 0.6); opacity: 0; animation: drift linear infinite; }
  .gpk .pm.g { background: rgba(150, 210, 180, 0.5); box-shadow: 0 0 7px rgba(130, 210, 170, 0.6); }
  @keyframes drift { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .5; } 88% { opacity: .3; } 100% { transform: translateY(-105vh); opacity: 0; } }

  /* ===== Heading ===== */
  .gpk .head { text-align: center; margin-bottom: 42px; max-width: 660px; }
  .gpk .head .eyebrow { display: inline-flex; align-items: center; gap: 13px; font-size: 10px; letter-spacing: 4.5px; text-transform: uppercase; font-weight: 700; color: var(--gold-2); margin-bottom: 16px; }
  .gpk .head .eyebrow .ln { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3)); }
  .gpk .head .eyebrow .ln.r { background: linear-gradient(90deg, var(--gold-3), transparent); }
  .gpk .head h1 {
    font-family: var(--serif-deco); font-weight: 700; font-size: 40px; letter-spacing: 2px; margin: 0; line-height: 1;
    background: linear-gradient(180deg, #f7eecf 0%, #e3c074 56%, #a87d2c 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .gpk .head p { font-family: var(--serif-body); font-size: 18px; font-style: italic; color: var(--ink); margin: 14px auto 0; line-height: 1.45; max-width: 480px; }
  .gpk .gpk-grantrow { margin-top: 16px; }
  .gpk .gpk-grant { display: inline-flex; align-items: center; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--gold-1); padding: 5px 12px; border: 1px solid rgba(216, 177, 90, 0.32); background: rgba(216, 177, 90, 0.06); }
  .gpk .gpk-grant.muted { color: var(--ink-dim); border-color: rgba(216, 177, 90, 0.14); background: transparent; }
  .gpk .collection-message { margin: 0 0 22px; }

  /* ===== Shelf ===== */
  .gpk .shelf { display: flex; gap: 46px; flex-wrap: wrap; justify-content: center; }

  /* ===== Region-Sperre (Loot-Box-Geoblock, z. B. Belgien) ===== */
  .gpk .region-lock {
    max-width: 560px; margin: 4px auto 0; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 46px 42px; position: relative;
    border: 1px solid rgba(216, 177, 90, 0.22); background: rgba(11, 13, 18, 0.42);
  }
  .gpk .region-lock .rl-ico {
    width: 58px; height: 58px; display: grid; place-items: center; color: var(--gold-1);
    transform: rotate(45deg); border: 1px solid rgba(216, 177, 90, 0.34);
    background: radial-gradient(circle, rgba(216, 177, 90, 0.12), transparent 70%);
  }
  .gpk .region-lock .rl-ico svg { transform: rotate(-45deg); filter: drop-shadow(0 0 8px var(--gold-glow)); }
  .gpk .region-lock h2 { font-family: var(--serif-deco); font-weight: 700; font-size: 26px; letter-spacing: 1px; margin: 0; color: var(--bone); }
  .gpk .region-lock p { font-family: var(--serif-body); font-size: 16.5px; font-style: italic; color: var(--ink-dim); margin: 0; line-height: 1.5; }

  /* ===== flourish corners (shelf + overlay book) ===== */
  .gpk .fl, .po .fl { position: absolute; width: 26px; height: 26px; z-index: 7; color: var(--gold-2); pointer-events: none; }
  .gpk .fl.tl, .po .fl.tl { top: 3px; left: 3px; }
  .gpk .fl.tr, .po .fl.tr { top: 3px; right: 3px; transform: scaleX(-1); }
  .gpk .fl.bl, .po .fl.bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
  .gpk .fl.br, .po .fl.br { bottom: 3px; right: 3px; transform: scale(-1); }

  /* ===== Card ===== */
  .gpk .pack {
    --fac: #74c8d6; --fac-deep: #2f7e88; --fac-glow: rgba(116, 200, 214, 0.4);
    position: relative; width: 424px; max-width: 100%; padding: 9px;
    background: linear-gradient(180deg, #13141a 0%, #08090c 100%);
    border: 1px solid var(--gold-3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 40px 80px -34px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6);
    transition: transform 340ms cubic-bezier(.2, .8, .3, 1), box-shadow 340ms ease, border-color 340ms ease;
  }
  .gpk .pack.tone-teal { --fac: #74c8d6; --fac-deep: #2f7e88; --fac-glow: rgba(116, 200, 214, 0.4); }
  .gpk .pack.tone-moss { --fac: #6fd6a6; --fac-deep: #2c8a5e; --fac-glow: rgba(111, 214, 166, 0.4); }
  .gpk .pack:hover {
    transform: translateY(-7px); border-color: var(--gold-2);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 56px 100px -34px rgba(0, 0, 0, 0.95), 0 0 60px -22px var(--fac-glow);
  }
  .gpk .pack-inner {
    position: relative; border: 1px solid rgba(216, 177, 90, 0.28);
    background:
      radial-gradient(ellipse 130% 55% at 50% 100%, color-mix(in srgb, var(--fac) 14%, transparent), transparent 62%),
      linear-gradient(180deg, rgba(20, 21, 28, 0.45), rgba(7, 8, 11, 0.55));
    overflow: hidden;
  }

  /* ===== Art ===== */
  .gpk .pack-art { position: relative; height: 296px; background-size: cover; background-position: center 20%; filter: saturate(0.94) contrast(1.02); }
  .gpk .pack.tone-moss .pack-art { background-position: center 16%; }
  .gpk .pack-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 78% 58% at 50% 22%, transparent 38%, rgba(6, 6, 8, 0.4) 100%), linear-gradient(180deg, rgba(6, 6, 8, 0.12) 0%, rgba(7, 7, 9, 0.5) 60%, #07080b 100%); }
  .gpk .pack-art .frame-rule { position: absolute; left: 10px; right: 10px; bottom: 10px; top: 10px; border: 1px solid rgba(216, 177, 90, 0.16); z-index: 3; pointer-events: none; }
  .gpk .pack-art .top-rule { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4; background: linear-gradient(90deg, transparent, var(--gold-2) 50%, transparent); opacity: 0.6; }

  .gpk .stock { position: absolute; top: 16px; right: 16px; z-index: 5; min-width: 74px; padding: 9px 12px; text-align: center; background: linear-gradient(180deg, rgba(10, 9, 12, 0.84), rgba(6, 6, 8, 0.88)); border: 1px solid rgba(216, 177, 90, 0.32); backdrop-filter: blur(4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
  .gpk .stock .n { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--gold-hi); line-height: 0.9; letter-spacing: 0.5px; }
  .gpk .stock .l { font-size: 7px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; margin-top: 4px; }
  .gpk .stock .bar { height: 2px; margin-top: 8px; background: rgba(216, 177, 90, 0.14); position: relative; overflow: hidden; }
  .gpk .stock .bar i { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }

  .gpk .art-tag { position: absolute; left: 16px; top: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--bone); padding: 6px 11px; background: rgba(6, 6, 8, 0.55); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(3px); }
  .gpk .art-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fac); box-shadow: 0 0 6px var(--fac); }

  .gpk .motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
  .gpk .mote { position: absolute; bottom: -8px; border-radius: 50%; background: var(--fac); box-shadow: 0 0 7px var(--fac); opacity: 0; animation: rise linear infinite; }
  @keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 18% { opacity: .5; } 82% { opacity: .3; } 100% { transform: translateY(-250px) scale(.4); opacity: 0; } }

  /* ===== Seal coin ===== */
  .gpk .seal {
    position: absolute; left: 50%; bottom: 0; z-index: 8; transform: translate(-50%, 50%);
    width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; color: #271c08;
    background: radial-gradient(circle at 36% 28%, #fbeec2 0%, #e3c074 26%, #b78f38 58%, #6e5320 86%, #4a3815 100%);
    border: 1px solid #f0d693; padding: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -5px 9px rgba(60, 42, 12, 0.6), 0 0 0 6px #07080b, 0 0 0 7px rgba(216, 177, 90, 0.25);
    transition: transform 340ms cubic-bezier(.2, .8, .3, 1), box-shadow 340ms ease;
    cursor: pointer;
  }
  .gpk .seal::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid rgba(60, 42, 12, 0.4); }
  .gpk .seal svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)); }
  .gpk .pack:hover .seal { transform: translate(-50%, 50%) rotate(-7deg) scale(1.05); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.65), inset 0 2px 3px rgba(255, 255, 255, 0.55), inset 0 -5px 9px rgba(60, 42, 12, 0.6), 0 0 0 6px #07080b, 0 0 0 7px rgba(216, 177, 90, 0.4), 0 0 30px -4px var(--gold-glow); }

  /* ===== Body ===== */
  .gpk .pack-body { padding: 48px 30px 28px; position: relative; }
  .gpk .pack-name { font-family: var(--serif); font-weight: 700; font-size: 27px; letter-spacing: 2.5px; text-align: center; margin: 0; background: linear-gradient(180deg, #f6ecce 0%, #e6d4a4 60%, #c2a565 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .gpk .pack-epithet { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 11px 0 0; font-size: 9.5px; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 700; color: var(--fac); }
  .gpk .pack-epithet .d { width: 4px; height: 4px; transform: rotate(45deg); background: var(--fac); box-shadow: 0 0 6px var(--fac); opacity: 0.85; }
  .gpk .pack-desc { font-family: var(--serif-body); font-size: 16px; line-height: 1.5; font-style: italic; color: var(--ink); text-align: center; margin: 16px auto 0; max-width: 320px; }

  .gpk .bdiv { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; }
  .gpk .bdiv .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 177, 90, 0.28)); }
  .gpk .bdiv .ln.r { background: linear-gradient(90deg, rgba(216, 177, 90, 0.28), transparent); }
  .gpk .bdiv .gem { width: 5px; height: 5px; background: var(--gold-1); transform: rotate(45deg); box-shadow: 0 0 6px var(--gold-glow); }

  .gpk .ledger-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
  .gpk .ledger-head .lh-t { font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--ink-dim); }
  .gpk .ledger-head .lh-c { font-family: var(--mono); font-size: 10px; color: var(--ink-dim); letter-spacing: 0.5px; }
  .gpk .rars { margin-top: 2px; }
  .gpk .rar { display: flex; align-items: center; gap: 11px; padding: 9px 2px; border-bottom: 1px solid rgba(216, 177, 90, 0.09); }
  .gpk .rar:last-child { border-bottom: none; }
  .gpk .rar .gem { width: 9px; height: 9px; transform: rotate(45deg); flex-shrink: 0; }
  .gpk .rar .nm { font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 700; flex-shrink: 0; }
  .gpk .rar .lead { flex: 1; height: 0; border-bottom: 1px dotted rgba(216, 177, 90, 0.2); transform: translateY(-2px); }
  .gpk .rar .od { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: var(--ink); flex-shrink: 0; }
  .gpk .rar.r-common .gem { background: var(--rar-common); } .gpk .rar.r-common .nm { color: var(--rar-common); }
  .gpk .rar.r-rare .gem { background: var(--rar-rare); } .gpk .rar.r-rare .nm { color: var(--rar-rare); }
  .gpk .rar.r-epic .gem { background: var(--rar-epic); } .gpk .rar.r-epic .nm { color: var(--rar-epic); }
  .gpk .rar.r-legend .gem { background: var(--rar-legend); box-shadow: 0 0 8px rgba(232, 200, 121, 0.6); animation: legendPulse 2.6s ease-in-out infinite; }
  .gpk .rar.r-legend .nm { color: var(--rar-legend); } .gpk .rar.r-legend .od { color: var(--rar-legend); }
  @keyframes legendPulse { 0%, 100% { box-shadow: 0 0 6px rgba(232, 200, 121, 0.4); } 50% { box-shadow: 0 0 13px rgba(232, 200, 121, 0.85); } }

  .gpk .guarantee { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0; font-family: var(--serif-body); font-style: italic; font-size: 14.5px; color: var(--ink-dim); }
  .gpk .guarantee .spark { color: var(--rar-legend); filter: drop-shadow(0 0 5px rgba(232, 200, 121, 0.5)); font-style: normal; }
  .gpk .guarantee b { font-style: normal; font-weight: 600; color: var(--bone); }
  .gpk .pity-note { text-align: center; margin: -8px 0 14px; padding: 0 8px; font-family: var(--serif-body); font-style: italic; font-size: 11.5px; line-height: 1.4; color: var(--ink-dim); opacity: 0.82; }

  /* CTA */
  .gpk .open { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px; font-family: var(--sans); font-weight: 800; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #1c1404;
    background: linear-gradient(180deg, #f6e1a4 0%, #dcb863 38%, #c09a44 70%, #a07f30 100%); border: 1px solid #f3dca0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px -10px rgba(216, 177, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(90, 66, 20, 0.4);
    overflow: hidden; transition: transform 180ms ease, box-shadow 220ms ease, filter 180ms ease; }
  .gpk .open .crn { position: absolute; width: 6px; height: 6px; border: 1px solid rgba(40, 28, 6, 0.45); }
  .gpk .open .crn.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; } .gpk .open .crn.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
  .gpk .open .crn.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; } .gpk .open .crn.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }
  .gpk .open::before { content: ""; position: absolute; top: 0; bottom: 0; left: -55%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-18deg); animation: sheen 4.4s ease-in-out infinite; }
  @keyframes sheen { 0% { left: -55%; } 26%, 100% { left: 150%; } }
  .gpk .open:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 16px 36px -10px rgba(216, 177, 90, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 4px rgba(90, 66, 20, 0.4); }
  .gpk .open:active { transform: translateY(0); }
  .gpk .open .ico { display: grid; place-items: center; }

  .gpk .cost { text-align: center; margin: 13px 0 0; font-size: 9.5px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--ink-dim); }
  .gpk .cost .free { color: var(--gold-1); }

  /* disabled (kein Vorrat / öffnet gerade) */
  .gpk .open:disabled, .gpk .seal:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }
  .gpk .open:disabled::before { display: none; }
  .gpk .pack:has(.open:disabled):hover { transform: none; }
  .gpk .pack:has(.seal:disabled):hover .seal { transform: translate(-50%, 50%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -5px 9px rgba(60, 42, 12, 0.6), 0 0 0 6px #07080b, 0 0 0 7px rgba(216, 177, 90, 0.25); }

  /* ===== Shop-Variante: dieselben Grimoire-Karten, CTA = Kaufen + Preis ===== */
  .gpk-shop { overflow: visible; padding: 6px 8px 40px; }
  .gpk .seal-static { cursor: default; }
  .gpk .pack-buy-cta .buy-price { display: inline-flex; align-items: center; gap: 5px; }
  .gpk .pack-buy-cta .buy-price .soul-gem { width: 11px; height: 13px; box-shadow: 0 0 5px var(--mp-soul-glow); }
  .gpk .cost.pack-tooshort { color: #e0a17c; font-style: normal; letter-spacing: 1.5px; }

  /* ============================================================
     PACK-OPENING OVERLAY (.po)
     ============================================================ */
  .po { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; --fac: #74c8d6; --fac-deep: #2f7e88; --fac-glow: rgba(116, 200, 214, 0.45); --charge: var(--fac); --charge-glow: var(--fac-glow); }
  .po.tone-moss { --fac: #6fd6a6; --fac-deep: #2c8a5e; --fac-glow: rgba(111, 214, 166, 0.45); }
  .po.on { display: flex; }
  .po-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(12, 14, 20, 0.86), rgba(3, 4, 6, 0.97)); backdrop-filter: blur(12px); opacity: 0; transition: opacity 320ms ease; }
  .po.on .po-bg { opacity: 1; }
  .po-stage { position: relative; z-index: 2; width: min(990px, 95vw); display: flex; flex-direction: column; align-items: center; }

  /* ===== open grimoire ===== */
  .po-book { position: relative; width: 100%; padding: 15px; border-radius: 7px; background: linear-gradient(180deg, #191b26 0%, #101119 60%, #0a0b12 100%); border: 1px solid rgba(216, 177, 90, 0.4); box-shadow: 0 50px 100px -34px rgba(0, 0, 0, 0.92), inset 0 0 0 1px rgba(216, 177, 90, 0.06), inset 0 2px 6px rgba(0, 0, 0, 0.4); opacity: 0; }
  .po.book-in .po-book { opacity: 1; animation: bookPop 560ms cubic-bezier(.2, .9, .3, 1); }
  @keyframes bookPop { 0% { transform: scale(.9); } 55% { transform: scale(1.025); } 100% { transform: scale(1); } }
  .po-spread { position: relative; padding: 28px 30px 30px; border: 1px solid rgba(216, 177, 90, 0.2); overflow: visible; background: radial-gradient(ellipse 86% 66% at 50% 30%, color-mix(in srgb, var(--fac) 13%, transparent), transparent 72%), linear-gradient(180deg, #171924 0%, #0f1018 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.4); }

  /* ===== summoning charge ===== */
  .po-charge { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
  .po-summon { position: relative; width: 340px; height: 340px; display: grid; place-items: center; opacity: 0; transform: scale(1.35); animation: summonIn .72s cubic-bezier(.2, .8, .3, 1) forwards; }
  .po-summon.burst { animation: summonOut .4s ease-in forwards; }
  @keyframes summonIn { to { opacity: 1; transform: scale(1); } }
  @keyframes summonOut { to { opacity: 0; transform: scale(1.55); filter: brightness(2.2); } }
  .po-summon > span { position: absolute; border-radius: 50%; }
  .po-ring1 { width: 300px; height: 300px; border: 1px solid var(--charge); box-shadow: 0 0 26px -8px var(--charge-glow), inset 0 0 26px -8px var(--charge-glow); animation: spinCW 7s linear infinite; }
  .po-runes { width: 256px; height: 256px; border: 2px solid transparent; border-top-color: var(--charge); border-bottom-color: var(--charge); filter: drop-shadow(0 0 6px var(--charge-glow)); animation: spinCCW 3.4s linear infinite; }
  .po-ticks { width: 224px; height: 224px; border: 6px dotted rgba(216, 177, 90, 0.5); animation: spinCW 9s linear infinite; }
  .po-ring2 { width: 168px; height: 168px; border: 1px dashed rgba(216, 177, 90, 0.6); animation: spinCCW 5s linear infinite; }
  .po-core { width: 26px; height: 26px; background: radial-gradient(circle, #fff, var(--charge) 55%, transparent 74%); box-shadow: 0 0 34px 10px var(--charge-glow); animation: coreGather 1.05s ease-in forwards; }
  @keyframes spinCW { to { transform: rotate(360deg); } }
  @keyframes spinCCW { to { transform: rotate(-360deg); } }
  @keyframes coreGather { 0% { transform: scale(0); opacity: 0; } 22% { opacity: 1; } 68% { transform: scale(1.35); } 100% { transform: scale(.25); opacity: .9; } }
  .po-bloom { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), var(--charge) 34%, transparent 70%); opacity: 0; animation: bloomBurst .6s ease-out forwards; pointer-events: none; }
  @keyframes bloomBurst { 0% { opacity: 0; transform: scale(.3); } 24% { opacity: 1; } 100% { opacity: 0; transform: scale(3.4); } }
  .po-shock { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--charge); opacity: 0; box-shadow: 0 0 18px -2px var(--charge-glow); animation: shockOut .72s cubic-bezier(.2, .7, .3, 1) forwards; pointer-events: none; }
  .po-shock.two { animation-delay: .12s; border-color: rgba(216, 177, 90, 0.7); }
  @keyframes shockOut { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(9); } }
  .po-glyphs { position: absolute; width: 278px; height: 278px; animation: spinCCW 16s linear infinite; }
  .po-glyphs span { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -6px; font-family: var(--serif); font-size: 15px; color: var(--charge); opacity: .8; text-shadow: 0 0 8px var(--charge-glow); }
  .po-energy { position: absolute; width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--charge-glow), transparent 26%, transparent 52%, var(--charge-glow), transparent 80%); filter: blur(7px); opacity: .5; animation: spinCW 1.5s linear infinite; }
  .po-stage.shake { animation: stageShake .5s cubic-bezier(.36, .07, .19, .97); }
  @keyframes stageShake { 10% { transform: translate(-2px, 1px); } 20% { transform: translate(3px, -2px); } 30% { transform: translate(-4px, 2px); } 40% { transform: translate(3px, 1px); } 50% { transform: translate(-2px, -1px); } 60% { transform: translate(3px, 2px); } 70% { transform: translate(-2px, -1px); } 80% { transform: translate(1px, 1px); } 100% { transform: none; } }
  .po-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .po-embers .em { position: absolute; bottom: -12px; border-radius: 50%; background: var(--fac); box-shadow: 0 0 7px var(--fac); opacity: 0; animation: emberRise linear infinite; }
  @keyframes emberRise { 0% { transform: translateY(0); opacity: 0; } 16% { opacity: .5; } 84% { opacity: .22; } 100% { transform: translateY(-102vh); opacity: 0; } }
  .po-spread > .po-eyebrow, .po-spread > .po-h, .po-spread > .po-hint, .po-spread > .po-cards { position: relative; z-index: 1; }

  /* spark particles (an document.body angehängt -> NICHT unter .po scopen) */
  .po-spark { position: fixed; z-index: 1400; width: 6px; height: 6px; border-radius: 50%; background: var(--fac); box-shadow: 0 0 8px var(--fac); pointer-events: none; }

  /* cards row */
  .po-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; opacity: 0; transition: opacity 200ms; }
  .po-cards.show { opacity: 1; }
  .po-card { position: relative; width: 144px; height: 210px; perspective: 1200px; cursor: pointer; opacity: 0; transform: translateY(28px) scale(.86); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1); filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.5)); }
  .po-card.dealt { opacity: 1; transform: none; }
  .po-card.dealt:not(.flip):hover { transform: translateY(-7px) scale(1.04); }
  .po-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 560ms cubic-bezier(.2, .75, .3, 1); }
  .po-card.flip .po-card-inner { transform: rotateY(180deg); }
  .po-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(216, 177, 90, 0.25); overflow: hidden; }

  /* back — ornate medallion */
  .po-back { background: linear-gradient(160deg, #0c0d13 0%, #08080d 55%, #050509 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: box-shadow .38s ease; }
  .po-back .bweave { position: absolute; inset: 0; opacity: 0.6; background-image: repeating-linear-gradient(45deg, rgba(216, 177, 90, 0.05) 0 1.5px, transparent 1.5px 10px), repeating-linear-gradient(-45deg, rgba(216, 177, 90, 0.05) 0 1.5px, transparent 1.5px 10px), radial-gradient(ellipse 72% 62% at 50% 46%, color-mix(in srgb, var(--fac) 22%, transparent), transparent 72%); }
  .po-back .born { position: absolute; inset: 8px; border: 1px solid rgba(216, 177, 90, 0.32); }
  .po-back .bmedal { position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #232840, #0c0e15 78%); border: 1px solid rgba(216, 177, 90, 0.5); box-shadow: 0 0 0 4px rgba(9, 10, 15, 0.85), 0 0 24px -4px var(--fac-glow), inset 0 0 18px rgba(0, 0, 0, 0.6); transition: transform .38s cubic-bezier(.2, .9, .3, 1), box-shadow .38s ease, border-color .38s ease; }
  .po-back .bmedal::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed rgba(216, 177, 90, 0.3); }
  .po-back .bcrest { position: relative; z-index: 1; color: var(--fac); opacity: 0.95; filter: drop-shadow(0 0 10px var(--fac-glow)); transition: color .38s ease, filter .38s ease, transform .38s cubic-bezier(.2, .9, .3, 1); }
  .po-back .bcorner { position: absolute; width: 6px; height: 6px; transform: rotate(45deg); background: rgba(216, 177, 90, 0.5); z-index: 1; }
  .po-back .bcorner.tl { top: 15px; left: 15px; } .po-back .bcorner.tr { top: 15px; right: 15px; }
  .po-back .bcorner.bl { bottom: 15px; left: 15px; } .po-back .bcorner.br { bottom: 15px; right: 15px; }
  /* Hover NACH dem Aufdecken: Karte 180->360 weiterdrehen -> Rueckseite zeigt das
     Vollportrait (wie die Figuren-Karte unter Sammlung). Nutzt den vorhandenen
     Flip-Mechanismus (kein verschachtelter 3D-Flip, der wegen overflow:hidden flach waere). */
  .po-portrait { position: absolute; inset: 0; z-index: 3; opacity: 0; overflow: hidden; pointer-events: none; transition: opacity .3s ease .12s; }
  .po-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
  .po-portrait-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,11,.15) 0%, transparent 30%, rgba(6,7,11,.55) 62%, rgba(6,7,11,.96) 100%); }
  .po-portrait-name { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: .3px; color: #f3e3b2; padding: 0 10px; }
  .po-card.revealed .po-back .bmedal,
  .po-card.revealed .po-back .bweave,
  .po-card.revealed .po-back .born,
  .po-card.revealed .po-back .bcorner { opacity: 0; transition: opacity .3s ease; }
  .po-card.revealed .po-portrait { opacity: 1; }
  .po-card.revealed.flip:hover { z-index: 3; }
  .po-card.revealed.flip:hover:not(.just-revealed) .po-card-inner { transform: rotateY(360deg); }
  @media (prefers-reduced-motion: reduce) { .po-card.revealed.flip:hover:not(.just-revealed) .po-card-inner { transform: rotateY(180deg); } }
  .po-card.tease-legend .po-back { box-shadow: inset 0 0 0 1px var(--rar-legend), inset 0 0 36px rgba(232, 200, 121, 0.3); animation: teaseLegend 1.6s ease-in-out infinite; }
  @keyframes teaseLegend { 0%, 100% { box-shadow: inset 0 0 0 1px var(--rar-legend), inset 0 0 26px rgba(232, 200, 121, 0.22); } 50% { box-shadow: inset 0 0 0 1px #fff0c4, inset 0 0 44px rgba(232, 200, 121, 0.5); } }
  .po-card.tease-legend .po-back .bcrest { color: var(--rar-legend); filter: drop-shadow(0 0 14px rgba(232, 200, 121, 0.7)); }

  /* rarity color per card */
  .po-card[data-rarity="common"] { --rc: #a89c7a; --rc-glow: rgba(168, 156, 122, 0.5); }
  .po-card[data-rarity="rare"] { --rc: #74c8d6; --rc-glow: rgba(116, 200, 214, 0.62); }
  .po-card[data-rarity="epic"] { --rc: #bd84ee; --rc-glow: rgba(176, 131, 222, 0.66); }
  .po-card[data-rarity="legendary"] { --rc: #ecc874; --rc-glow: rgba(232, 200, 121, 0.72); }
  /* hover reveal of rarity on face-down card */
  .po-card.dealt:not(.flip):hover .po-back { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px var(--rc), inset 0 0 34px var(--rc-glow); }
  .po-card.dealt:not(.flip):hover .po-back .bweave { opacity: .85; }
  .po-card.dealt:not(.flip):hover .po-back .born { border-color: color-mix(in srgb, var(--rc) 55%, rgba(216, 177, 90, 0.32)); }
  .po-card.dealt:not(.flip):hover .po-back .bcorner { background: var(--rc); box-shadow: 0 0 6px var(--rc-glow); }
  .po-card.dealt:not(.flip):hover .bcrest { color: var(--rc); filter: drop-shadow(0 0 13px var(--rc-glow)); transform: scale(1.08); }
  .po-card.dealt:not(.flip):hover .bmedal { border-color: color-mix(in srgb, var(--rc) 60%, transparent); transform: scale(1.06); animation: hoverGlow 1.5s ease-in-out infinite; }
  @keyframes hoverGlow { 0%, 100% { box-shadow: 0 0 0 4px rgba(9, 10, 15, 0.85), 0 0 22px -2px var(--rc-glow), inset 0 0 18px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 0 4px rgba(9, 10, 15, 0.85), 0 0 42px 2px var(--rc-glow), inset 0 0 18px rgba(0, 0, 0, 0.6); } }

  /* front — full-bleed art with nameplate */
  .po-front { transform: rotateY(180deg); display: block; overflow: hidden; }
  .po-front .po-aura { position: absolute; inset: 0; z-index: 0; }
  .po-front.r-common .po-aura { background: radial-gradient(ellipse 92% 70% at 50% 26%, rgba(168, 156, 122, 0.3), transparent 66%), linear-gradient(180deg, #1c1d24, #08090c); }
  .po-front.r-rare .po-aura { background: radial-gradient(ellipse 92% 72% at 50% 26%, rgba(116, 200, 214, 0.42), transparent 66%), linear-gradient(180deg, #0e2126, #060b10); }
  .po-front.r-epic .po-aura { background: radial-gradient(ellipse 92% 74% at 50% 26%, rgba(176, 131, 222, 0.46), transparent 68%), linear-gradient(180deg, #1a1229, #07050d); }
  .po-front.r-legend .po-aura { background: radial-gradient(ellipse 96% 78% at 50% 24%, rgba(232, 200, 121, 0.55), transparent 70%), linear-gradient(180deg, #26200f, #0c0803); }
  .po-front .po-aura::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -34px 46px -22px rgba(0, 0, 0, 0.82), inset 0 34px 40px -30px rgba(255, 255, 255, 0.06); }
  .po-front.r-common { border-color: rgba(216, 177, 90, 0.3); }
  .po-front.r-rare { border-color: rgba(116, 200, 214, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 16px -5px rgba(116, 200, 214, 0.55); }
  .po-front.r-epic { border-color: rgba(176, 131, 222, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px -5px rgba(176, 131, 222, 0.6); }
  .po-front.r-legend { border-color: var(--rar-legend); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 22px -5px rgba(232, 200, 121, 0.65); }
  .po-img { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 14px 12px 48px; }
  .po-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.72)); }
  .po-front.r-legend .po-img img { filter: drop-shadow(0 0 16px rgba(232, 200, 121, 0.6)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.72)); }
  .po-front.r-epic .po-img img { filter: drop-shadow(0 0 13px rgba(176, 131, 222, 0.55)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.72)); }
  .po-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 8px 10px; text-align: center; background: linear-gradient(180deg, transparent, rgba(8, 9, 13, 0.8) 44%, rgba(8, 9, 13, 0.96)); }
  .po-plate::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 177, 90, 0.55), transparent); }
  .po-name { position: relative; z-index: 1; font-family: var(--serif); font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--bone); text-align: center; line-height: 1.16; padding: 0 2px; text-wrap: balance; overflow-wrap: anywhere; }
  /* Lange Namen (Kristall + Name nebeneinander): Schrift kleiner statt Umbruch. */
  .po-name.is-long { font-size: 10.5px; letter-spacing: 0; }
  .po-gem { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); margin-right: 6px; vertical-align: middle; }
  .po-name.is-long .po-gem { width: 7px; height: 7px; margin-right: 5px; }
  .po-front.r-common .po-gem { background: var(--rar-common); }
  .po-front.r-rare .po-gem { background: var(--rar-rare); box-shadow: 0 0 6px rgba(116, 200, 214, 0.7); }
  .po-front.r-epic .po-gem { background: var(--rar-epic); box-shadow: 0 0 7px rgba(176, 131, 222, 0.7); }
  .po-front.r-legend .po-gem { background: var(--rar-legend); box-shadow: 0 0 8px rgba(232, 200, 121, 0.85); }
  .po-front.r-legend .po-name { color: #f7e8bd; }
  .po-role { position: relative; z-index: 1; font-family: var(--mono); font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }
  .po-front.r-common .po-role { color: var(--rar-common); }
  .po-front.r-rare .po-role { color: var(--rar-rare); }
  .po-front.r-epic .po-role { color: var(--rar-epic); }
  .po-front.r-legend .po-role { color: var(--rar-legend); }
  .po-new { position: absolute; top: 8px; right: 8px; z-index: 3; font-family: var(--mono); font-size: 7.5px; letter-spacing: 1px; padding: 2px 5px; color: #06120f; background: var(--fac); font-weight: 700; opacity: 0; }
  .po-card.flip .po-new { opacity: 1; }
  .po-card.pop { animation: cardPop 520ms cubic-bezier(.2, 1.4, .4, 1); }
  @keyframes cardPop { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
  .po-card[data-rarity="epic"].pop, .po-card[data-rarity="legendary"].pop { animation: cardPopBig 560ms cubic-bezier(.2, 1.5, .4, 1); }
  @keyframes cardPopBig { 0% { transform: scale(1); } 42% { transform: scale(1.15); } 100% { transform: scale(1); } }

  /* ===== tiered reveal dopamine (Vorlage) ===== */
  .po-burst { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .po-burst .rr { position: absolute; inset: -2px; border: 2px solid var(--rc); border-radius: 8px; opacity: 0; box-shadow: 0 0 14px -2px var(--rc-glow); animation: rrOut .82s ease-out forwards; }
  .po-burst .rr.d2 { animation-delay: .13s; }
  @keyframes rrOut { 0% { opacity: .95; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.55); } }
  .po-rays2 { position: absolute; left: 50%; top: 42%; width: 300px; height: 300px; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--rc-glow), transparent 22%, transparent 50%, var(--rc-glow), transparent 72%); filter: blur(3px); opacity: 0; pointer-events: none; animation: rays2 1.15s ease-out forwards; }
  @keyframes rays2 { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); } 30% { opacity: .7; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(150deg) scale(1.35); } }
  .po-label { position: absolute; left: 50%; top: -16px; z-index: 8; font-family: var(--serif-deco); font-weight: 700; font-size: 15px; letter-spacing: 2px; white-space: nowrap; color: var(--rc); text-shadow: 0 0 12px var(--rc-glow), 0 2px 5px rgba(0, 0, 0, 0.7); opacity: 0; pointer-events: none; animation: labelPop 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
  @keyframes labelPop { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.12); } 40% { transform: translate(-50%, -10px) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -24px) scale(1); } }
  .po-ring { position: absolute; inset: 1px; z-index: 4; border: 2px solid transparent; opacity: 0; pointer-events: none; }
  .po-front.r-rare .po-ring { border-color: var(--rar-rare); }
  .po-front.r-epic .po-ring { border-color: var(--rar-epic); }
  .po-front.r-legend .po-ring { border-color: var(--rar-legend); }
  .po-card.flip[data-rarity="rare"] .po-ring, .po-card.flip[data-rarity="epic"] .po-ring, .po-card.flip[data-rarity="legendary"] .po-ring { animation: ringOut 760ms 250ms ease-out; }
  @keyframes ringOut { 0% { opacity: 0; transform: scale(.92); } 24% { opacity: .85; } 100% { opacity: 0; transform: scale(1.3); } }
  .po-card .gb { position: absolute; inset: -22%; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none; }
  .po-card[data-rarity="common"] .gb { background: radial-gradient(circle, rgba(154, 143, 112, 0.4), transparent 62%); }
  .po-card[data-rarity="rare"] .gb { background: radial-gradient(circle, rgba(116, 200, 214, 0.55), transparent 62%); }
  .po-card[data-rarity="epic"] .gb { background: radial-gradient(circle, rgba(176, 131, 222, 0.62), transparent 62%); }
  .po-card[data-rarity="legendary"] .gb { background: radial-gradient(circle, rgba(232, 200, 121, 0.58), transparent 62%); }
  .po-card.flip .gb { animation: gbBurst 820ms 230ms ease-out; }
  @keyframes gbBurst { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: .7; } 100% { opacity: 0; transform: scale(1.2); } }
  .po-card.flip .po-img img { animation: imgRise 640ms 250ms backwards cubic-bezier(.2, .9, .3, 1); }
  @keyframes imgRise { 0% { opacity: 0; transform: translateY(12px) scale(.8); } 100% { opacity: 1; transform: none; } }
  .po-front::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-18deg); opacity: 0; z-index: 2; pointer-events: none; }
  .po-card.flip .po-front::after { animation: cardSheen 850ms 340ms ease-out; }
  @keyframes cardSheen { 0% { left: -60%; opacity: 0; } 30% { opacity: 1; } 100% { left: 140%; opacity: 0; } }
  .po-card[data-rarity="epic"].flip, .po-card[data-rarity="legendary"].flip { z-index: 2; }
  .po-card[data-rarity="rare"].flip .po-front, .po-card[data-rarity="epic"].flip .po-front, .po-card[data-rarity="legendary"].flip .po-front { animation: idleGlow 2.8s ease-in-out infinite; }
  @keyframes idleGlow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 22px -8px var(--rc-glow), 0 0 12px -4px var(--rc-glow); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 34px -5px var(--rc-glow), 0 0 24px -3px var(--rc-glow); } }
  .po-shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; opacity: 0; }
  .po-shine::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 38%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), transparent); transform: skewX(-18deg); }
  .po-card[data-rarity="rare"].flip .po-shine, .po-card[data-rarity="epic"].flip .po-shine, .po-card[data-rarity="legendary"].flip .po-shine { opacity: 1; }
  .po-card[data-rarity="rare"].flip .po-shine::before { animation: shineSweep 4.8s 1s ease-in-out infinite; }
  .po-card[data-rarity="epic"].flip .po-shine::before { animation: shineSweep 4.1s .9s ease-in-out infinite; }
  .po-card[data-rarity="legendary"].flip .po-shine::before { animation: shineSweep 3.3s .8s ease-in-out infinite; background: linear-gradient(105deg, transparent, rgba(255, 240, 200, 0.22), transparent); }
  @keyframes shineSweep { 0% { left: -60%; } 58%, 100% { left: 150%; } }

  /* ===== ON TOP: unsere goldenen Eckklammern im aufgedeckten Zustand ===== */
  .po-front .po-corner { position: absolute; width: 13px; height: 13px; z-index: 4; opacity: 0; pointer-events: none; border: 1px solid var(--gold-1); }
  .po-front .po-corner.tl { top: 7px; left: 7px; border-right: none; border-bottom: none; }
  .po-front .po-corner.tr { top: 7px; right: 7px; border-left: none; border-bottom: none; }
  .po-front .po-corner.bl { bottom: 7px; left: 7px; border-right: none; border-top: none; }
  .po-front .po-corner.br { bottom: 7px; right: 7px; border-left: none; border-top: none; }
  .po-card.flip .po-front .po-corner { animation: poCornerIn .5s .34s ease-out both; }
  /* KEIN box-shadow-Glow: der Goldring hellte den Ecken-Rand auf und rahmte so die
     dunkle Aura-Ecke als „dunkles Quadrat" ein (nur bei Legendaeren sichtbar). */
  .po-front.r-legend .po-corner { border-color: var(--rar-legend); }
  @keyframes poCornerIn { 0% { opacity: 0; transform: scale(.35); } 100% { opacity: .9; transform: none; } }

  /* ===== ON TOP: unser Ring-Puls je Karte + Legendär-Bühnenblitz ===== */
  .po-ourring { position: absolute; inset: -4px; z-index: 6; border: 2px solid var(--rc); border-radius: 7px; opacity: 0; box-shadow: 0 0 16px -1px var(--rc-glow); pointer-events: none; animation: poOurRing .8s ease-out both; }
  @keyframes poOurRing { 0% { opacity: .9; transform: scale(.86); } 100% { opacity: 0; transform: scale(1.5); } }
  .po-stage.legflash::after { content: ""; position: absolute; inset: -40px; z-index: 20; pointer-events: none; background: radial-gradient(60% 50% at 50% 42%, rgba(243, 220, 160, 0.5), transparent 70%); animation: poLegFlash 1s ease-out both; }
  @keyframes poLegFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
  /* ON TOP: alte goldene Reveal-Animation — weiche, strahlende Gold-Lichtfaecher
     hinter der legendaeren Karte (1:1 aus dem Vor-Claude-Design-Reveal, .prc-rays). */
  .po-legrays {
    position: absolute; inset: -60%; z-index: -1; pointer-events: none; opacity: 0;
    mix-blend-mode: screen; filter: blur(2px);
    background: repeating-conic-gradient(from 0deg,
      rgba(255, 232, 170, 0) 0deg 7deg,
      rgba(255, 232, 170, .22) 7deg 9deg,
      rgba(255, 232, 170, 0) 9deg 16deg);
    animation: poLegRays 2.4s ease-out .1s both;
  }
  @keyframes poLegRays {
    0% { opacity: 0; transform: rotate(-12deg) scale(.5); }
    22% { opacity: .85; }
    100% { opacity: 0; transform: rotate(26deg) scale(1.35); }
  }
  /* ON TOP: dauerhaft langsam rotierende Gold-Lichtfächer HINTER der Figur, solange
     die legendäre Karte aufgedeckt/offen ist (über der Aura, unter dem Figurenbild). */
  .po-legaura {
    position: absolute; inset: -25%; z-index: 0; pointer-events: none; opacity: 0;
    mix-blend-mode: screen; filter: blur(1.5px);
    background: repeating-conic-gradient(from 0deg,
      rgba(255, 232, 170, 0) 0deg 9deg,
      rgba(255, 232, 170, .16) 9deg 11deg,
      rgba(255, 232, 170, 0) 11deg 20deg);
  }
  .po-card.flip .po-legaura { opacity: .5; animation: poLegSpin 16s linear infinite; }
  @keyframes poLegSpin { to { transform: rotate(360deg); } }

  /* stage chrome */
  .po-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--ink-dim); margin-bottom: 12px; opacity: 0; transition: opacity 300ms; }
  .po-eyebrow.show { opacity: 1; }
  .po-eyebrow .d { width: 6px; height: 6px; transform: rotate(45deg); background: var(--fac); box-shadow: 0 0 7px var(--fac); }
  .po-eyebrow .line { width: 30px; height: 1px; background: var(--gold-3); }
  .po-h { font-family: var(--serif-deco); font-size: 28px; letter-spacing: 1.5px; margin: 0 0 4px; text-align: center; opacity: 0; transition: opacity 300ms; background: linear-gradient(180deg, #f6ecce 0%, #e3c074 58%, #b1832e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  .po-h.show { opacity: 1; }
  .po-hint { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; margin: 0 0 28px; height: 14px; opacity: 0; transition: opacity 300ms; }
  .po-hint.show { opacity: 1; }

  .po-foot { margin-top: 30px; display: flex; align-items: center; gap: 16px; opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 300ms; }
  .po-foot.show { opacity: 1; transform: none; }
  .po-rem { font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; color: var(--ink-dim); }
  .po-rem b { color: var(--gold-1); }
  .po-actions { display: flex; gap: 10px; margin-left: 8px; }
  .po-btn { padding: 12px 22px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; border: 1px solid rgba(216, 177, 90, 0.25); background: rgba(11, 13, 18, 0.6); color: var(--bone); transition: all 160ms; }
  .po-btn:hover { border-color: var(--gold-1); color: var(--gold-1); }
  .po-btn.gold { color: #1c1404; background: linear-gradient(180deg, #f6e1a4, #cba84e); border-color: #f3dca0; }
  .po-btn.gold:hover { color: #1c1404; box-shadow: 0 6px 22px -6px rgba(216, 177, 90, 0.6); }
  .po-stage.all-revealed .po-btn.gold { animation: poAgainPulse 1.5s ease-in-out infinite; }
  @keyframes poAgainPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0); } 50% { box-shadow: 0 6px 24px -4px rgba(216, 177, 90, 0.6); } }
  /* Look/Animation kommen aus .mp-close (main-12.css); hier nur Position/Größe. */
  .po-close { position: absolute; top: 22px; right: 22px; z-index: 3; width: 38px; height: 38px; }

  @media (max-width: 720px) {
    .po-cards { gap: 9px; } .po-card { width: 112px; height: 166px; }
    .po-spread { padding: 20px 14px 22px; } .po-book { padding: 10px; }
    .po-foot { flex-direction: column; gap: 12px; } .po-actions { margin-left: 0; }
    .po-name { font-size: 11px; } .po-name.is-long { font-size: 9px; }
  }
  @media (max-width: 520px) { .gpk .head h1 { font-size: 31px; } .gpk .pack { width: 100%; } }

  @media (prefers-reduced-motion: reduce) {
    .gpk .mote, .gpk .pm, .gpk .open::before, .gpk .rar.r-legend .gem,
    .po-summon, .po-ring1, .po-runes, .po-ticks, .po-ring2, .po-core, .po-energy, .po-glyphs,
    .po-embers .em, .po-card.tease-legend .po-back, .po-burst .rr, .po-rays2, .po-label,
    .po-card.flip .gb, .po-card.flip .po-img img, .po-card.flip .po-front::after,
    .po-card.flip .po-front, .po-shine::before, .po-ourring, .po-stage.legflash::after,
    .po-legrays, .po-card.flip .po-legaura, .po.book-in .po-book { animation: none !important; }
    .po-card-inner { transition: transform .2s ease !important; }
  }

  .deckbuilder-tab {
    display: grid;
    gap: 18px;
  }

  /* ===== Deine Decks — Deck-Karten (Claude-Design-Vorlage portiert) ===== */
  .dcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
  }
  .dcard {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(20, 23, 31, 0.92), rgba(11, 13, 18, 0.98));
    border: 1px solid rgba(216, 177, 90, 0.14);
    border-radius: 0;
    overflow: hidden;
    transition: transform 180ms, border-color 200ms, box-shadow 220ms;
  }
  .dcard:hover { transform: translateY(-2px); border-color: rgba(216, 177, 90, 0.4); box-shadow: 0 14px 38px rgba(0,0,0,0.6); }
  .dcard.active {
    border-color: var(--mp-gold-1);
    box-shadow: 0 0 0 1px var(--mp-gold-1), 0 14px 38px rgba(0,0,0,0.7), 0 0 40px rgba(216, 177, 90, 0.18);
  }
  .dcard.incomplete { border-style: dashed; border-color: rgba(194, 90, 74, 0.4); }
  .dcard-corner {
    position: absolute;
    width: 10px; height: 10px;
    border: 1px solid var(--mp-gold-2);
    opacity: 0.55;
    z-index: 3;
    pointer-events: none;
  }
  .dcard-corner.tl { top: 4px; left: 4px; border-right: none; border-bottom: none; }
  .dcard-corner.tr { top: 4px; right: 4px; border-left: none; border-bottom: none; }
  .dcard-corner.bl { bottom: 4px; left: 4px; border-right: none; border-top: none; }
  .dcard-corner.br { bottom: 4px; right: 4px; border-left: none; border-top: none; }
  .dcard.active .dcard-corner { border-color: var(--mp-gold-1); opacity: 1; }
  .dcard-hero {
    position: relative;
    height: 140px;
    background-size: cover;
    background-position: center 20%;
  }
  .dcard-hero-grad {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(7, 8, 11, 0.4) 0%, rgba(7, 8, 11, 0.15) 40%, rgba(11, 13, 18, 0.95) 100%);
  }
  .dcard-pirate .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(77, 208, 196, 0.18); }
  .dcard-zombie  .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(120, 218, 162, 0.18); }
  .dcard-fantasy .dcard-hero-grad { box-shadow: inset 0 0 80px rgba(216, 177, 90, 0.16); }
  .dcard-hero-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
  }
  .dcard-faction-tag {
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 10px;
    background: rgba(7, 8, 11, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(216, 177, 90, 0.2);
  }
  .dcard-faction-tag.tag-pirate { color: var(--mp-teal-1); border-color: rgba(77, 208, 196, 0.4); }
  .dcard-faction-tag.tag-zombie  { color: var(--mp-teal-3); border-color: rgba(120, 218, 162, 0.4); }
  .dcard-faction-tag.tag-fantasy { color: var(--mp-gold-1); border-color: rgba(216, 177, 90, 0.4); }
  .dcard-faction-tag.tag-mixed   { color: var(--mp-ink); }
  .dcard-active {
    margin-left: auto;
    font-family: var(--mp-mono);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-gold-1);
    padding: 4px 8px;
    background: rgba(216, 177, 90, 0.16);
    border: 1px solid var(--mp-gold-2);
    font-weight: 700;
    text-transform: uppercase;
  }
  .dcard-incomplete {
    margin-left: auto;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-danger);
    font-weight: 700;
    text-transform: uppercase;
  }
  .dcard-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .dcard-name-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
  .dcard-name {
    font-family: var(--mp-serif);
    font-size: 22px;
    letter-spacing: 2.5px;
    color: var(--mp-bone);
    margin: 0;
    font-weight: 600;
  }
  .dcard-archetype {
    font-family: var(--mp-mono);
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--mp-ink-dim);
    text-transform: uppercase;
  }
  .dcard-epithet {
    font-family: var(--mp-serif-body);
    font-size: 13.5px;
    color: var(--mp-ink);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
  }
  .dcard-comp { display: flex; flex-direction: column; gap: 8px; }
  .dcard-comp-label {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mp-ink-faint);
    font-weight: 700;
  }
  .dcard-comp-row { display: flex; gap: 4px; flex-wrap: wrap; }
  /* 2-reihige Aufstellung (Grundreihe oben, Gefolge unten) statt flacher Reihe. */
  .dcard-formation { display: flex; flex-direction: column; gap: 4px; }
  .dcard-form-row { display: flex; gap: 4px; }
  .dcard-formation .dccm.slot { width: 30px; height: 30px; flex: 1 1 0; max-width: 38px; }
  .dccm.slot {
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 8, 11, 0.6);
    border: 1px solid rgba(216, 177, 90, 0.1);
    border-radius: 0;
    overflow: hidden;
  }
  .dccm.slot img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
    padding: 1px;
  }
  .dccm.slot.rarity-legendary { border-color: rgba(216, 177, 90, 0.6); }
  .dccm.slot.rarity-epic { border-color: rgba(184, 124, 232, 0.4); }
  .dccm.slot.rarity-rare { border-color: rgba(110, 231, 216, 0.3); }
  .dccm.slot.more {
    font-family: var(--mp-mono);
    font-size: 10px;
    color: var(--mp-ink-dim);
    font-weight: 700;
  }
  .dccm.slot.missing {
    color: var(--mp-danger);
    border-color: rgba(194, 90, 74, 0.45);
    border-style: dashed;
    font-size: 14px;
    background: rgba(194, 90, 74, 0.06);
  }
  .dccm.slot.empty {
    color: var(--mp-ink-faint);
    border-style: dashed;
    font-family: var(--mp-serif);
  }
  /* Fuss stapelt Bilanz ueber den Aktionen -> Buttons bleiben IMMER in der Karte
     (vorher lief "Aktivieren" aus der Box). */
  .dcard-foot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(216, 177, 90, 0.1);
  }
  .dcard-record {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--mp-mono);
    font-size: 10.5px;
    color: var(--mp-ink-dim);
  }
  .dcard-record .rec-k { color: var(--mp-ink-faint); text-transform: uppercase; letter-spacing: 1.4px; margin-right: 6px; }
  .dcard-record .rec-w { color: var(--mp-teal-1); font-size: 13.5px; font-weight: 700; }
  .dcard-record .rec-l { font-size: 9px; letter-spacing: 1px; margin-left: 1px; color: var(--mp-ink-faint); }
  .dcard-record .rec-l-n { color: var(--mp-danger); font-size: 13.5px; font-weight: 700; }
  .dcard-record .rec-sep { margin: 0 4px; color: var(--mp-ink-faint); }
  .dcard-record .rec-when { margin-left: 8px; color: var(--mp-ink-faint); font-style: italic; }
  .dcard-actions { display: flex; gap: 8px; }
  /* Bearbeiten/Aktivieren teilen sich die Breite, Loeschen bleibt kompakt. */
  .dcard-actions .dcard-btn.ghost,
  .dcard-actions .dcard-btn.primary { flex: 1 1 auto; text-align: center; }
  .dcard-btn {
    padding: 8px 14px;
    font-size: 10.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
    font-family: var(--mp-sans);
    transition: all 160ms;
    white-space: nowrap;
  }
  .dcard-btn.ghost {
    color: var(--mp-ink);
    border: 1px solid rgba(216, 177, 90, 0.2);
    background: transparent;
  }
  .dcard-btn.ghost:hover { color: var(--mp-bone); border-color: var(--mp-gold-2); }
  .dcard-btn.primary {
    color: #0c0e13;
    background: linear-gradient(180deg, var(--mp-gold-1), var(--mp-gold-2));
    border: 1px solid var(--mp-gold-3);
  }
  .dcard-btn.primary:hover { box-shadow: 0 0 14px var(--mp-gold-glow); }
  .dcard-new {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 340px;
    background: linear-gradient(180deg, rgba(15, 17, 22, 0.6), rgba(7, 8, 11, 0.9));
    border: 1px dashed rgba(216, 177, 90, 0.3);
    border-radius: 0;
    color: var(--mp-bone);
    cursor: pointer;
    transition: all 200ms;
  }
  .dcard-new:hover { border-color: var(--mp-gold-1); color: var(--mp-gold-1); background: rgba(216, 177, 90, 0.04); }
  .dcard-new .dcn-plus {
    font-family: var(--mp-serif);
    font-size: 56px;
    color: var(--mp-gold-2);
    line-height: 0.7;
  }
  .dcard-new .dcn-label {
    font-family: var(--mp-serif);
    font-size: 16px;
    letter-spacing: 3px;
    font-weight: 600;
  }
  .dcard-new .dcn-hint {
    font-family: var(--mp-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mp-ink-dim);
  }

  /* Loeschen-Button (kompakt, im Deck-Karten-Fuss); deutlich sichtbares Symbol. */
  .dcard-btn.danger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    color: #e08a80;
    border: 1px solid rgba(210, 86, 72, .24);
    background: transparent;
    padding: 8px 12px;
    font-size: 20px;
    line-height: 1;
  }
  .dcard-btn.danger:not(:disabled):hover { color: #ff9587; border-color: rgba(210, 86, 72, .5); background: rgba(210, 86, 72, .10); }

  /* Portrait-Picker im Builder: Deck-Bild aus den platzierten Figuren waehlen. */
  .hero-picker { display: flex; flex-direction: column; gap: 8px; }
  .hero-picker .hp-label {
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mp-ink-faint); font-weight: 700;
  }
  .hero-picker .hp-hint {
    font-family: var(--mp-serif-body); font-size: 14px; font-style: italic; color: var(--mp-ink-dim);
  }
  .hero-picker .hp-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .hp-thumb {
    width: 46px; height: 46px;
    border: 1px solid rgba(216, 177, 90, .2);
    background: rgba(7, 8, 11, .6) center 18% / cover no-repeat;
    cursor: pointer; transition: transform 160ms, border-color 160ms, box-shadow 160ms;
    display: grid; place-items: center;
    color: var(--mp-ink-dim); font-family: var(--mp-serif); font-size: 18px;
  }
  .hp-thumb:hover { border-color: var(--mp-gold-2); transform: translateY(-2px); }
  .hp-thumb.active { border-color: var(--mp-gold-1); box-shadow: 0 0 0 1px var(--mp-gold-1), 0 0 14px var(--mp-gold-glow); }

  /* Zusatz-Eingaben der Werkzeugleiste (Archetyp inline, Motto eigene Zeile). */
  .bt-archetype, .bt-epithet {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 7px;
    background: rgba(7, 8, 11, .62);
    color: var(--mp-bone);
    font-family: var(--mp-serif-body);
    font-size: 15px;
    letter-spacing: .3px;
  }
  .bt-archetype { flex: 1 1 200px; }
  .bt-epithet { flex: 1 1 100%; font-style: italic; }
  .bt-archetype:focus, .bt-epithet:focus {
    outline: none;
    border-color: rgba(110, 231, 216, .6);
    box-shadow: 0 0 0 2px rgba(110, 231, 216, .14);
  }

  /* ---- Deckbuilder: kompaktes, brett-zentriertes Layout ---- */
  .db-decks { padding-top: 0; }
  /* Etwas mehr Luft zwischen der Deck-Liste und dem "Neues Deck"-Baubereich. */
  .db-builder { margin-top: clamp(14px, 2.4vw, 30px); }
  .db-decks-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .db-head-left { display: grid; gap: 7px; min-width: 0; }
  .db-decks-title {
    margin: 0;
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: 2px;
  }
  /* Kurzbeschreibung unter den Deck-Ueberschriften (identisch zu .section-desc beim Figuren-Tab). */
  .db-decks-sub {
    margin: 0;
    max-width: 680px;
    color: var(--mp-ink);
    font-family: var(--mp-serif-body);
    font-size: 17px;
    line-height: 1.45;
  }
  .db-head-left .col-acquired { margin-top: 3px; }

  .builder-section {
    display: grid;
    gap: 16px;
    margin-top: 8px;
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 10px;
    background:
      radial-gradient(130% 72% at 50% -8%, rgba(216, 177, 90, .10), transparent 58%),
      radial-gradient(80% 60% at 100% 106%, rgba(77, 208, 196, .05), transparent 60%),
      linear-gradient(180deg, rgba(19, 22, 30, .94), rgba(8, 10, 14, .98));
    box-shadow:
      0 30px 80px rgba(0, 0, 0, .55),
      inset 0 0 0 1px rgba(240, 210, 131, .07),
      inset 0 1px 0 rgba(255, 255, 255, .045);
  }
  /* Goldene Eckwinkel des grossen Kastens etwas praesenter. */
  .builder-section > .pcard-corner {
    width: 16px;
    height: 16px;
    opacity: .72;
    border-color: var(--mp-gold-1);
  }

  /* Werkzeugleiste oben: Name | Aktiv | Auto/Leeren */
  .builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .bt-name {
    flex: 1 1 240px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 7px;
    background: rgba(7, 8, 11, .62);
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 18px;
    letter-spacing: .5px;
  }
  .bt-name:focus {
    outline: none;
    border-color: rgba(110, 231, 216, .6);
    box-shadow: 0 0 0 2px rgba(110, 231, 216, .14);
  }
  .bt-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .18);
    border-radius: 7px;
    background: rgba(7, 8, 11, .42);
    color: var(--mp-ink);
    cursor: pointer;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .bt-active input { accent-color: var(--mp-gold-1); }
  .bt-tools {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
  }
  .bt-tool {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(216, 177, 90, .18);
    border-radius: 7px;
    background: rgba(7, 8, 11, .42);
    color: var(--mp-ink-dim);
    cursor: pointer;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .bt-tool:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .4); }

  /* Klebende Speicher-Leiste unten: Rang-Fortschritt | Zahl | Status | Speichern */
  /* Normale Leiste am Ende des Builders (kein klebendes Float mehr -> keine
     Ueberlappung der untersten Pool-Reihe). */
  .builder-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 9px;
    background: rgba(10, 12, 16, .92);
  }
  .bb-ranks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid rgba(210, 86, 72, .34);
    border-radius: 999px;
    background: rgba(210, 86, 72, .08);
    color: #ff9587;
    font-family: var(--mp-mono);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
  }
  .rank-pill i { font-style: normal; font-size: 15px; line-height: 1; }
  .rank-pill.ok {
    border-color: rgba(120, 218, 162, .34);
    background: rgba(120, 218, 162, .08);
    color: var(--moss-1);
  }
  /* Rang gerade erfuellt -> kurzer Pop. */
  .rank-pill.just-ok { animation: pill-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes pill-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.2); box-shadow: 0 0 14px rgba(120, 218, 162, .55); }
    100% { transform: scale(1); }
  }
  .bb-end {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }
  .bb-count {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
  }
  .bb-count.full { color: var(--moss-1); }
  .bb-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  .bb-status.ok { color: var(--moss-1); }
  .bb-status.miss { color: #ff9587; }
  .bb-save {
    min-width: 150px;
    min-height: 44px;
    font-size: 15px;
  }
  .bb-save:disabled { opacity: .55; }
  /* Deck spielbereit -> Speichern leuchtet einladend. */
  .bb-save.ready { animation: save-ready 1.7s ease-in-out infinite; }
  @keyframes save-ready {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 177, 90, 0); }
    50% { box-shadow: 0 0 22px 2px rgba(216, 177, 90, .5); }
  }

  /* Aufstellung = Mini-Spielbrett im Stil des echten Boards (render.js / #board):
     Gefolge-Reihe oben, Grundreihe unten, Felder als Schachbrett (.sq-Optik). */
  .builder-board {
    position: relative;
    display: grid;
    gap: 2px;
    width: 100%;
    max-width: min(100%, 1200px);
    margin: 0 auto;
    padding: 8px;
    border: 2px solid var(--rift-gold);
    border-radius: 8px;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(10,200,185,.16), transparent 52%),
      linear-gradient(135deg, #c89b3c, #3a2a13 34%, #0a1117 50%, #785a28 77%, #f0d283);
    box-shadow:
      0 0 0 1px rgba(0,0,0,.86),
      0 0 26px rgba(10, 200, 185, .18),
      inset 0 0 0 1px rgba(240, 210, 131, .22);
  }
  /* Deck vollstaendig & gueltig -> Goldrahmen atmet. */
  .builder-board.complete { animation: bb-board-ready 2.4s ease-in-out infinite; }
  @keyframes bb-board-ready {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,0,0,.86), 0 0 26px rgba(10, 200, 185, .18), inset 0 0 0 1px rgba(240, 210, 131, .22); }
    50% { box-shadow: 0 0 0 1px rgba(0,0,0,.86), 0 0 46px rgba(216, 177, 90, .45), inset 0 0 0 2px rgba(240, 210, 131, .7); }
  }
  .builder-rank-row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
  }

  .builder-sq {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
  }
  .builder-sq.light {
    background:
      radial-gradient(circle at 48% 44%, rgba(240,210,131,.10), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 30% 70%, rgba(0,0,0,.18)),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 13px),
      var(--light);
  }
  .builder-sq.dark {
    background:
      radial-gradient(circle at 50% 42%, rgba(10,200,185,.08), transparent 42%),
      linear-gradient(135deg, rgba(255,255,255,.025), transparent 28% 74%, rgba(0,0,0,.28)),
      repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px),
      var(--dark);
  }

  /* Rarity-Akzent je belegtem Feld (Variablen -> ein Ring + Innenglow fuer alle). */
  .builder-sq.rarity-legendary { --sq-rar: rgba(216, 177, 90, .85); --sq-rar-soft: rgba(216, 177, 90, .28); }
  .builder-sq.rarity-epic { --sq-rar: rgba(184, 124, 232, .80); --sq-rar-soft: rgba(184, 124, 232, .26); }
  .builder-sq.rarity-rare { --sq-rar: rgba(110, 231, 216, .72); --sq-rar-soft: rgba(110, 231, 216, .22); }
  .builder-sq.rarity-common { --sq-rar: rgba(210, 214, 224, .5); --sq-rar-soft: rgba(210, 214, 224, .14); }

  .builder-sq .chip {
    width: 80%;
    cursor: pointer;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
  }
  .builder-sq.filled::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--sq-rar, rgba(216, 177, 90, .4)), inset 0 0 16px var(--sq-rar-soft, transparent);
  }

  /* Platzieren: Figur "ploppt" rein, das Feld pulst kurz in der Rarity-Farbe. */
  .builder-sq.just-placed { z-index: 3; animation: bsq-place-pulse .6s ease-out; }
  .builder-sq.just-placed .chip { animation: bsq-place .44s cubic-bezier(.34, 1.56, .64, 1) both; }
  @keyframes bsq-place {
    0% { transform: translateY(-12px) scale(.4); opacity: 0; }
    60% { transform: translateY(0) scale(1.12); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes bsq-place-pulse {
    0% { box-shadow: inset 0 0 0 3px var(--sq-rar), inset 0 0 28px var(--sq-rar-soft); }
    100% { box-shadow: inset 0 0 0 0 transparent, inset 0 0 0 transparent; }
  }

  /* Entfernen-Hinweis: rotes x oben rechts, nur bei Hover/Focus des belegten Feldes. */
  .bs-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 6;
    display: grid;
    place-items: center;
    width: clamp(18px, 2vw, 24px);
    height: clamp(18px, 2vw, 24px);
    border-radius: 50%;
    background: rgba(210, 86, 72, .92);
    color: #fff;
    font-size: clamp(13px, 1.6vw, 17px);
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
  }
  .builder-sq.filled:hover .bs-remove,
  .builder-sq.filled:focus-visible .bs-remove {
    opacity: 1;
    transform: scale(1);
  }

  .bsq-hint {
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 4px;
    opacity: .5;
    transition: opacity .12s ease;
    pointer-events: none;
  }
  .builder-sq.empty:hover,
  .builder-sq.empty:focus-visible {
    outline: none;
    box-shadow:
      inset 0 0 0 2px rgba(110, 231, 216, .55),
      inset 0 0 18px rgba(110, 231, 216, .18);
  }
  .builder-sq.empty:hover .bsq-hint,
  .builder-sq.empty:focus-visible .bsq-hint { opacity: .95; }
  .builder-sq.drop-ok {
    box-shadow:
      inset 0 0 0 2px rgba(110, 231, 216, .85),
      0 0 14px rgba(110, 231, 216, .25);
  }

  .bsq-coord {
    position: absolute;
    right: 4px;
    bottom: 3px;
    z-index: 5;
    color: color-mix(in srgb, var(--rift-gold-bright) 72%, rgba(255,255,255,.38));
    font-family: var(--mp-mono);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    opacity: .5;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
  }

  .bs-rank-icon {
    color: color-mix(in srgb, var(--rift-gold-bright) 50%, var(--mp-ink-faint));
    font-size: clamp(22px, 4vw, 46px);
    line-height: 1;
  }
  .bs-label {
    max-width: 100%;
    overflow: hidden;
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: clamp(8px, .9vw, 11px);
    font-weight: 800;
    letter-spacing: .6px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Rang-Picker: Auswahl-Overlay fuer ein leeres Feld (nach Rang gefiltert). */
  /* Deck bauen/bearbeiten als Popup. Liegt unter dem Rang-Picker (z 1200). */
  .db-builder-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(12px, 3.5vh, 46px) 16px;
    overflow-y: auto;
    background: rgba(4, 5, 8, .76);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .db-builder-modal {
    position: relative;
    width: min(1100px, 100%);
    margin: auto;   /* vertikal mittig wenn Platz; bei zu hohem Inhalt top-sicher + scrollbar */
    padding: clamp(16px, 2vw, 28px);
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 12px;
    background:
      radial-gradient(130% 72% at 50% -8%, rgba(216, 177, 90, .10), transparent 58%),
      linear-gradient(180deg, rgba(19, 22, 30, .97), rgba(8, 10, 14, .99));
    box-shadow: 0 40px 110px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(240, 210, 131, .07);
  }
  .db-builder-modal > .pcard-corner { width: 16px; height: 16px; opacity: .72; border-color: var(--mp-gold-1); }
  /* Im Popup traegt das Modal selbst den Kasten -> innere Box flach. */
  .db-builder-modal .builder-section {
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0;
  }
  .db-builder-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  /* Look/Animation kommen aus .mp-close (main-12.css); hier nur Position/Größe. */
  .db-builder-close { flex: none; width: 36px; height: 36px; }

  .builder-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 5, 8, .72);
    backdrop-filter: blur(3px);
  }
  .builder-picker {
    position: relative;
    display: grid;
    gap: 16px;
    width: min(780px, 100%);
    max-height: min(84vh, 760px);
    padding: 20px 22px;
    border: 1px solid rgba(216, 177, 90, .28);
    border-radius: 12px;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(216, 177, 90, .08), transparent 60%),
      radial-gradient(80% 60% at 100% 100%, rgba(77, 208, 196, .05), transparent 60%),
      rgba(10, 12, 16, .98);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(240, 210, 131, .10);
    overflow: hidden;
  }
  .bp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(216, 177, 90, .14);
  }
  .bp-head-left { display: grid; gap: 4px; }
  .bp-kicker {
    color: var(--mp-gold-1);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
  }
  .bp-title {
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .bp-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(216, 177, 90, .22);
    border-radius: 50%;
    background: rgba(7, 8, 11, .5);
    color: var(--mp-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
  }
  .bp-close:hover { color: var(--mp-bone); border-color: rgba(216, 177, 90, .4); }
  /* Picker nutzt dieselben Pool-Karten (.pool-card) wie der Pool. */
  .bp-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    overflow-y: auto;
    padding: 2px 4px 2px 2px;
  }
  .bp-empty {
    flex: 1 1 100%;
    padding: 26px 12px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    text-align: center;
  }

  .pool-card[draggable="true"] { cursor: grab; }
  .pool-card[draggable="true"]:active { cursor: grabbing; }
  .pool-card.disabled { cursor: default; }

  .builder-pool {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(216, 177, 90, .14);
    background: rgba(7, 8, 11, .34);
  }

  .pool-inner {
    display: grid;
    gap: 12px;
  }

  .pool-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(216, 177, 90, .10);
  }
  .pool-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .pool-filter {
    flex-wrap: wrap;
  }

  .pool-head span {
    color: var(--mp-ink-dim);
    font-family: var(--mp-mono);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
  }

  .pool-head strong {
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 18px;
    letter-spacing: 1.2px;
  }

  .pool-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pool-empty {
    flex: 1 1 100%;
    padding: 22px 16px;
    border: 1px dashed rgba(216, 177, 90, .16);
    border-radius: 8px;
    color: var(--mp-ink-dim);
    font-family: var(--mp-serif-body);
    font-size: 14px;
    font-style: italic;
    text-align: center;
  }

  /* Zentrales "+" einmal im Pool-Kopf (statt pro Karte). */
  .pool-head .pool-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .pool-head .pool-add {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(216, 177, 90, .5);
    color: var(--mp-gold-1);
    font-family: var(--mp-serif);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .pool-head .pool-label {
    color: var(--mp-gold-1);
    font-size: 13px;
    letter-spacing: 1.6px;
  }
  .pool-head .pool-hint {
    color: var(--mp-ink-faint);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: none;
  }

  /* Pool-/Picker-Karte: feste, quadratische Kachel. Ruhe = Bild + Rang-Symbol +
     freie Anzahl (Eck-Marken). Hover = nur Glow + Name-Unterband. Die Kachel aendert
     NIE ihre Groesse -> kein Umordnen/Verspringen der Nachbarn beim Klick. */
  .pool-card {
    position: relative;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 9px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(216, 177, 90, .12);
    border-left: 3px solid var(--rarity-accent, rgba(216, 177, 90, .3));
    background: linear-gradient(180deg, rgba(20, 23, 31, .72), rgba(10, 12, 16, .86));
    transition: border-color .16s ease, box-shadow .18s ease, transform .16s ease;
  }
  .pool-card.rarity-legendary { --rarity-accent: rgba(216, 177, 90, .72); }
  .pool-card.rarity-epic { --rarity-accent: rgba(184, 124, 232, .60); }
  .pool-card.rarity-rare { --rarity-accent: rgba(110, 231, 216, .50); }
  .pool-card.rarity-common { --rarity-accent: rgba(180, 190, 205, .34); }
  .pool-card:not(.disabled):hover,
  .pool-card:not(.disabled):focus-visible {
    outline: none;
    transform: translateY(-3px);
    border-color: rgba(216, 177, 90, .42);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .55);
  }

  @media (prefers-reduced-motion: reduce) {
    .builder-sq.just-placed, .builder-sq.just-placed .chip, .builder-board.complete,
    .rank-pill.just-ok, .bb-save.ready { animation: none !important; }
  }
  .pool-card.disabled { opacity: .5; }

  .pc-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 34px;
    line-height: 1;
  }
  .pcArt {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .62));
  }

  /* Rang-Symbol: kleine Eck-Marke oben links (immer sichtbar). */
  .pc-glyph {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 15px;
    line-height: 1;
    color: var(--rarity-accent, var(--mp-ink-dim));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    pointer-events: none;
  }

  /* Freie Anzahl: kleine Eck-Marke oben rechts (immer sichtbar). */
  .pc-count {
    position: absolute;
    top: 4px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216, 177, 90, .3);
    background: rgba(7, 8, 11, .82);
    color: var(--mp-bone);
    font-family: var(--mp-mono);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
  }

  /* Name: faded bei Hover als Unterband ein - ohne die Kachelgroesse zu aendern. */
  .pc-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 13px 5px 4px;
    background: linear-gradient(0deg, rgba(4, 5, 8, .97), rgba(4, 5, 8, 0));
    color: var(--mp-bone);
    font-family: var(--mp-serif);
    font-size: 11px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
  }
  .pool-card:hover .pc-name,
  .pool-card:focus-visible .pc-name { opacity: 1; }

  /* Einheitlicher Stil wie die uebrigen Seiten (Pack-Reveal, Figuren-Karten):
     scharfe Ecken statt runder fuer ALLE Gewoelbe-/Deckbuilder-Kaesten, Pillen,
     Eingaben und das Popup. */
  .deck-empty,
  .dcard,
  .dcard-crest,
  .dcard-active,
  .dcard-status,
  .dcomp-piece,
  .dcomp-x,
  .builder-section,
  .bt-name,
  .bt-active,
  .bt-tool,
  .builder-bar,
  .rank-pill,
  .builder-board,
  .builder-picker,
  .bp-close,
  .pool-empty {
    border-radius: 0;
  }
  /* Eckwinkel der Box brauchen einen Positionierungs-Kontext. */
  .builder-section { position: relative; }

  @media (max-width: 1180px) {
    .builder-grid {
      grid-template-columns: 1fr;
    }

    .builder-pool {
      position: relative;
      top: auto;
      border-left: 0;
      padding-left: 0;
    }
  }

  @media (max-width: 920px) {
    .bt-tools { margin-left: 0; }
    .bb-end { width: 100%; margin-left: 0; }
    .bb-save { flex: 1 1 auto; }
  }

  @media (max-width: 820px) {
    .dcard-grid {
      grid-template-columns: 1fr;
    }

    .pool-card { width: 78px; height: 78px; }

  }

/* ===========================================================
   Side-nav zone model: Membership CTA, Support Us, footer Codex
   =========================================================== */

/* Profile now lives in the avatar card at the top of the rail; the #navProfile
   button is kept only as a hidden click-proxy for the collection/lobby links.
   [hidden] alone loses to `.sideNavList button { display:grid }`, so force it. */
#navProfile { display: none !important; }

/* Das hidden-Attribut muss bei diesen Buttons das display:grid schlagen — sonst zeigt
   sich der Admin-Button trotz [hidden] auch Nicht-Admins, und der Membership-Punkt
   bleibt trotz ausgeschaltetem Sichtbarkeits-Flag stehen. */
.sideNavList button[hidden],
.sideMembership[hidden] { display: none !important; }

/* Membership CTA — gold, sits directly under the avatar */
.sideMembership {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(216, 177, 90, .38);
  background: linear-gradient(180deg, rgba(216, 177, 90, .17), rgba(216, 177, 90, .045));
  color: var(--mp-gold-1, #d8b15a);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.sideMembership .sideMembershipIcon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--mp-gold-1, #d8b15a);
}
.sideMembership .sideMembershipIcon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
}
.sideMembership .sideMembershipText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sideMembership .sideMembershipTag {
  padding: 2px 6px;
  border: 1px solid rgba(216, 177, 90, .42);
  background: rgba(11, 13, 18, .55);
  color: var(--mp-gold-1, #d8b15a);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
}
.sideMembership:not(:disabled):hover,
.sideMembership:not(:disabled):focus-visible {
  border-color: var(--mp-gold-1, #d8b15a);
  background: linear-gradient(180deg, rgba(216, 177, 90, .26), rgba(216, 177, 90, .09));
  outline: none;
}
.sideMembership.isSoon { cursor: default; opacity: .92; }

/* ── Mitgliedschafts-Status im UI (Sidebar-Badge, Profil-Chip, Namensfarbe) ── */
.sideMembership.is-patron .sideMembershipTag {
  color: #0c0e13;
  border-color: #f0d27a;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
}
.sideMembership.is-supporter .sideMembershipTag {
  color: var(--mp-teal-1, #6ee7d8);
  border-color: rgba(77, 208, 196, .5);
  background: rgba(35, 155, 149, .1);
}
/* Farbiger Account-Name (Supporter-/Patron-Versprechen) */
body.is-patron .sideUserName,
body.is-patron .ptName { color: var(--mp-gold-1, #d8b15a); }
body.is-supporter .sideUserName,
body.is-supporter .ptName { color: var(--mp-teal-1, #6ee7d8); }

/* Profil-Hero: Mitglieds-Chip neben dem Namen */
.ptMemberChip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--mp-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border: 1px solid rgba(216, 177, 90, .4);
}
.ptMemberChip[hidden] { display: none; }
.ptMemberChip.is-patron {
  color: #0c0e13;
  border-color: #f0d27a;
  background: linear-gradient(180deg, #f0d27a, #c89a3e);
}
.ptMemberChip.is-supporter {
  color: var(--mp-teal-1, #6ee7d8);
  border-color: rgba(77, 208, 196, .5);
  background: rgba(35, 155, 149, .1);
}

/* Animiertes Patron-Abzeichen: Gold-Schimmer, der über das Badge streift. */
@keyframes mpBadgeShimmer {
  0% { background-position: -130% 0; }
  60%, 100% { background-position: 230% 0; }
}
.sideMembership.is-patron .sideMembershipTag,
.ptMemberChip.is-patron {
  position: relative;
  overflow: hidden;
}
.sideMembership.is-patron .sideMembershipTag::after,
.ptMemberChip.is-patron::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .32) 50%, transparent 58%);
  background-size: 230% 100%;
  animation: mpBadgeShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* Exklusiver Profil-Rahmen: Patron (Gold) / Supporter (Teal) um den Diamant-Avatar. */
body.is-patron .ptAvatar {
  box-shadow: inset 0 0 0 2px var(--mp-gold-1, #d8b15a), inset 0 0 0 5px rgba(216, 177, 90, .28);
  filter: drop-shadow(0 0 12px rgba(216, 177, 90, .45));
}
body.is-supporter .ptAvatar {
  box-shadow: inset 0 0 0 2px var(--mp-teal-1, #6ee7d8), inset 0 0 0 5px rgba(77, 208, 196, .24);
  filter: drop-shadow(0 0 12px rgba(77, 208, 196, .4));
}

/* Brett-Sigil: dezentes Mitglieds-Emblem in der Brett-Ecke (nur der Patron/
   Supporter selbst sieht es — rein kosmetisch, lokal). #boardWrap ist ein
   zentrierendes 1x1-Grid (place-items:center) -> das Sigil MUSS absolut in die
   Ecke, sonst säße es mittig auf dem Brett. pointer-events:none -> blockt nie. */
.boardCorner {
  position: absolute;
  left: 7px; bottom: 7px;
  width: 12px; height: 12px;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: 3;
}
body.is-patron .boardCorner::before,
body.is-supporter .boardCorner::before {
  content: "";
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border-radius: 1px;
  opacity: .85;
}
body.is-patron .boardCorner::before {
  background: linear-gradient(135deg, #f0d27a, #b08530);
  box-shadow: 0 0 7px rgba(216, 177, 90, .6);
}
body.is-supporter .boardCorner::before {
  background: linear-gradient(135deg, #9ee9e0, #2c8a82);
  box-shadow: 0 0 7px rgba(77, 208, 196, .5);
}