/* Kosmetische Spielbrett-Hintergründe. Die Klassen entsprechen den Werten in
   Domain.Services.BackgroundCatalog. Wird sowohl vom Blazor-Profil-Preview als auch
   vom Qwixx-iframe via CSS-Import genutzt. */

.bg-default        { background: radial-gradient(ellipse at top, #1e2f27 0%, #16211c 60%); }
.bg-dawn           { background: linear-gradient(160deg, #fdb69e 0%, #f76d5e 45%, #7b1e3a 100%); }
.bg-dusk           { background: linear-gradient(160deg, #4b1f5c 0%, #b04d3c 55%, #f2c179 100%); }
.bg-ocean          { background: linear-gradient(160deg, #0a2540 0%, #124b73 50%, #2e8dbb 100%); }
.bg-forest         { background: linear-gradient(160deg, #0e2a1a 0%, #1c4a2f 50%, #4a8a48 100%); }
.bg-nebula         { background: radial-gradient(ellipse at top, #7a5cc9 0%, #2b1f5c 45%, #0d0827 100%); position: relative; }
.bg-nebula::after  { content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 30%, rgba(255,255,255,.15) 0.5px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0.5px, transparent 1px), radial-gradient(circle at 40% 80%, rgba(255,255,255,.18) 0.5px, transparent 1px); background-size: 80px 80px, 120px 120px, 60px 60px; pointer-events:none; }
.bg-rainbow        { background: linear-gradient(135deg, #ff3050 0%, #ffb03a 20%, #f3f0aa 40%, #4affb0 60%, #40b0ff 80%, #8060ff 100%); }
.bg-gold-leaf      { background: linear-gradient(135deg, #f3d38e 0%, #b47a1a 50%, #f3d38e 100%); }
.bg-royal-purple   { background: linear-gradient(160deg, #2c0e4e 0%, #6b2a9e 50%, #b46eda 100%); }
.bg-pristine       { background: linear-gradient(160deg, #f5f6fa 0%, #dfe4f5 50%, #b7c2dc 100%); color:#1b2a3d; }

/* ---- Kniffel-spezifische Belohnungen ---- */
.bg-kniffel-ruby       { background: radial-gradient(ellipse at top, #ff4a5c 0%, #a5121f 55%, #4a0a10 100%); }
.bg-kniffel-ivory      { background: linear-gradient(160deg, #fbf3de 0%, #e7dcbb 50%, #b09a6b 100%); color:#3b2a10; }
.bg-kniffel-platinum   { background: linear-gradient(160deg, #d9dde6 0%, #94a1b8 45%, #4d5b73 100%); }
.bg-kniffel-starfield  { background: radial-gradient(ellipse at top, #1b2a4a 0%, #0a0f22 60%, #000 100%); position:relative; }
.bg-kniffel-starfield::after { content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.85) 0.8px, transparent 1.5px),
    radial-gradient(circle at 78% 34%, rgba(255,230,180,.9) 0.8px, transparent 1.5px),
    radial-gradient(circle at 55% 72%, rgba(255,255,255,.7) 0.6px, transparent 1.2px),
    radial-gradient(circle at 32% 88%, rgba(200,220,255,.7) 0.6px, transparent 1.2px);
  background-size: 90px 90px, 130px 130px, 70px 70px, 110px 110px;
  pointer-events:none;
}

/* ---- Wizard-spezifische Belohnungen ---- */
.bg-wizard-tower       { background: linear-gradient(160deg, #1a1040 0%, #3b2270 45%, #6b3fa0 100%); position:relative; }
.bg-wizard-tower::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,230,150,.8) 0.9px, transparent 1.6px),
    radial-gradient(circle at 68% 30%, rgba(200,190,255,.7) 0.7px, transparent 1.4px),
    radial-gradient(circle at 44% 66%, rgba(255,255,255,.6) 0.6px, transparent 1.2px);
  background-size: 100px 100px, 140px 140px, 80px 80px; pointer-events:none;
}
.bg-wizard-aurora      { background: linear-gradient(160deg, #05121f 0%, #0d3b4a 30%, #1f8f7a 60%, #7ae0b0 100%); }
.bg-wizard-cards       { background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 14px, transparent 14px 28px),
    linear-gradient(160deg, #26123a 0%, #4a1f52 50%, #8c2f5e 100%); }
.bg-wizard-arcana      { background: radial-gradient(ellipse at 30% 20%, #b06ff0 0%, #5a2090 40%, #1c0833 100%); }

/* ---- Shop-exklusive Hintergründe (nur gegen Prismen, siehe ShopPricing) ---- */
.bg-midnight-ink   { background: linear-gradient(160deg, #16233f 0%, #0d1428 45%, #05070f 100%); }
.bg-desert-dune    { background: linear-gradient(160deg, #f2d8a7 0%, #d9a05b 45%, #8a5a30 100%); color:#3b2410; }
.bg-emerald-wave   { background: linear-gradient(160deg, #04160f 0%, #0f5137 45%, #57d39a 100%); }
.bg-copper-patina  { background: linear-gradient(160deg, #b5651d 0%, #7d8f6a 45%, #2f6f63 100%); }

.bg-cherry-blossom { background: linear-gradient(160deg, #ffe3ee 0%, #f7a8c4 45%, #b4557d 100%); color:#43172c; position:relative; }
.bg-cherry-blossom::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.75) 1.6px, transparent 2.6px),
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.6) 1.3px, transparent 2.2px),
    radial-gradient(circle at 46% 74%, rgba(255,255,255,.7) 1.5px, transparent 2.4px);
  background-size: 110px 110px, 150px 150px, 90px 90px;
}

.bg-arctic-glass   { background: linear-gradient(160deg, #eaf6ff 0%, #a8d3ea 45%, #4a7fa5 100%); color:#0d2437; position:relative; }
.bg-arctic-glass::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(115deg, transparent 46%, rgba(255,255,255,.8) 47%, transparent 49%),
    linear-gradient(64deg, transparent 60%, rgba(255,255,255,.55) 61%, transparent 63%),
    linear-gradient(150deg, transparent 28%, rgba(255,255,255,.4) 29%, transparent 31%);
  background-size: 260px 260px, 340px 340px, 200px 200px;
}

/* Episch/Legendär: dezent animiert — deshalb spürbar teurer als die statischen Motive. */
.bg-magma-core     { background: radial-gradient(ellipse at 50% 120%, #ff8a2a 0%, #b3230f 35%, #3d0a06 70%, #150402 100%); position:relative; }
.bg-magma-core::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 118%, rgba(255,196,80,.55) 0%, rgba(255,120,30,.18) 40%, transparent 70%);
  animation: magmaPulse 5s ease-in-out infinite;
}
@keyframes magmaPulse { 0%,100% { opacity:.35; } 50% { opacity:.9; } }

.bg-starlight-drift{ background: radial-gradient(ellipse at 30% 20%, #2b2a6b 0%, #141338 45%, #05040f 100%); position:relative; overflow:hidden; }
.bg-starlight-drift::after{ content:""; position:absolute; inset:-50%; pointer-events:none;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.9) 0.9px, transparent 1.6px),
    radial-gradient(circle at 62% 38%, rgba(190,215,255,.8) 0.8px, transparent 1.5px),
    radial-gradient(circle at 38% 72%, rgba(255,240,200,.85) 0.9px, transparent 1.6px),
    radial-gradient(circle at 84% 82%, rgba(255,255,255,.7) 0.7px, transparent 1.3px);
  background-size: 120px 120px, 170px 170px, 95px 95px, 140px 140px;
  animation: starDrift 90s linear infinite;
}
@keyframes starDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-120px,-95px,0); } }

/* Wer Bewegung reduziert haben will, bekommt die Motive ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .bg-magma-core::after      { animation:none; opacity:.6; }
  .bg-starlight-drift::after { animation:none; }
}

/* Preview-Kacheln in der Profil-Galerie.
   overflow:hidden ist Pflicht, nicht Kosmetik: mehrere Hintergründe drehen eine ::after-Ebene
   (Schwelle, Ereignishorizont, Prismenkrone, Jahrespass-Ränge). Beim Drehen wandern die Ecken
   dieser Ebene aus dem Kasten heraus — ohne Beschnitt zog der Effekt quer über die Seite und
   schob sie sogar seitlich auf (§ Bugreport „der Hintergrund mit dem Namen Schwelle bewegt sich
   außerhalb des Fensters"). Der Radius allein beschneidet nichts. */
.bg-preview        { width:100%; aspect-ratio: 16/10; border-radius:10px; border:1px solid var(--border);
                     overflow:hidden; isolation:isolate; }
.bg-tile           { position:relative; cursor:pointer; padding:6px; background:rgba(255,255,255,.02); border-radius:12px; border:1px solid rgba(255,255,255,.06); transition:transform .12s,border-color .12s; }
.bg-tile:hover     { transform: translateY(-2px); border-color:var(--accent); }
.bg-tile.selected  { border-color:#d9a441; box-shadow:0 0 0 2px rgba(217,164,65,.35); }
.bg-tile.locked    { opacity:.45; filter:grayscale(.4); cursor:not-allowed; }
.bg-tile.locked:hover{ transform:none; border-color:rgba(255,255,255,.06); }
.bg-tile-label     { font-weight:700; padding:6px 4px 0; font-size:0.9rem; }
.bg-tile-hint      { font-size:0.75rem; color:#8b93a7; padding:0 4px 4px; }
.bg-tile-badge     { position:absolute; top:12px; right:12px; padding:2px 8px; border-radius:999px; font-size:0.7rem; font-weight:700; background:#d9a441; color:#1b1108; }
.bg-tile.locked .bg-tile-badge { background:#3a3f4a; color:#c9d0e0; }

/* ---- Galerie-Layout: wird von der Profil-Galerie UND vom Shop genutzt, deshalb global.
       (Lag früher nur im <style>-Block von Profile.razor und fehlte damit auf /shop.) ---- */
.bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;}
.subtab-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--muted,#8b93a7);
  padding:5px 14px;border-radius:999px;font-size:0.85rem;font-weight:600;cursor:pointer;transition:.15s;}
.subtab-btn:hover{color:var(--text);border-color:rgba(255,255,255,.2);}
.subtab-btn.active{background:rgba(133,119,236,.18);border-color:#8577ec;color:var(--text);}

/* Vorschau eines Kniffel-Blocks */
.blk-preview{width:100%;aspect-ratio:16/10;border-radius:10px;border:1px solid var(--border);overflow:hidden;
  background:var(--blk-paper,#FBF3DE);color:var(--blk-ink,#1b2a3d);
  display:flex;flex-direction:column;font-family:var(--blk-font,'Inter',sans-serif);font-size:9px;}
.blk-preview-row{padding:3px 6px;border-bottom:1px solid rgba(0,0,0,.08);font-weight:600;}
.blk-preview-row.header{background:var(--blk-header,#f0e8d0);text-align:center;font-weight:700;}
.blk-preview-row.filled{background:var(--blk-filled-bg,#e6f5ea);color:var(--blk-filled-ink,#3f8f5f);}
.blk-preview-row.fillable{background:var(--blk-fillable-bg,#fff8dd);color:var(--blk-fillable-ink,#7a5e00);}
.blk-preview-row.total{background:var(--blk-total-bg,#1b2a3d);color:var(--blk-total-ink,#FBF3DE);margin-top:auto;font-weight:800;text-align:center;border-bottom:0;}

/* Vorschau eines Wizard-Decks */
.wzd-preview{width:100%;aspect-ratio:16/10;border-radius:10px;border:1px solid var(--border);overflow:hidden;
  background:var(--wzd-felt,radial-gradient(ellipse at top,#1e2f4a 0%,#141d2e 65%));
  display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;
  font-family:var(--wzd-font,'Inter',sans-serif);}
.wzd-card{width:26px;height:38px;border-radius:var(--wzd-radius,10px);border:1px solid var(--wzd-border,#c9bfa4);
  box-shadow:var(--wzd-shadow,0 4px 14px rgba(0,0,0,.35));
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.wzd-card.back{background:var(--wzd-back,#1e3a6e);color:var(--wzd-back-ink,#d9c98a);font-size:14px;}
.wzd-card.face{background:var(--wzd-face,#fbf7ec);}
.wzd-card.face.wiz{color:var(--wzd-accent,#d9a441);}

/* ============================================================================
   Erweiterung 2026-07-22 — Level-Meilensteine, Prestige-Ränge, Erfolgs- und
   Shop-Motive. Alles rein per CSS (keine Bilddateien), damit die Motive überall
   scharf bleiben und nichts nachgeladen werden muss.
   ========================================================================== */

/* ---- Level-Meilensteine ---- */
.bg-first-light    { background: linear-gradient(170deg, #dbeafe 0%, #93b8e8 45%, #3f5f96 100%); color:#12203a; }
.bg-meadow         { background: linear-gradient(170deg, #f3f7c8 0%, #9fd47a 45%, #3f7a3a 100%); color:#1d3312; }
.bg-harbor         { background: linear-gradient(180deg, #16305c 0%, #2b6a8f 55%, #f0b06a 100%); position:relative; }
.bg-harbor::after  { content:""; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, transparent 2px 7px); }

.bg-volcano        { background: linear-gradient(170deg, #2a2320 0%, #171312 60%, #0b0908 100%); position:relative; }
.bg-volcano::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:
    linear-gradient(112deg, transparent 44%, rgba(255,110,40,.55) 46%, transparent 48%),
    linear-gradient(72deg, transparent 62%, rgba(255,160,60,.4) 63%, transparent 65%),
    linear-gradient(148deg, transparent 24%, rgba(220,70,20,.45) 26%, transparent 28%);
  background-size: 240px 240px, 300px 300px, 180px 180px; }

.bg-aurora-north   { background: linear-gradient(180deg, #061024 0%, #0d2145 55%, #133a5e 100%); position:relative; overflow:hidden; }
.bg-aurora-north::after{ content:""; position:absolute; inset:-20%; pointer-events:none; opacity:.55;
  background:
    radial-gradient(60% 30% at 30% 35%, rgba(90,240,180,.55) 0%, transparent 70%),
    radial-gradient(50% 26% at 65% 45%, rgba(120,200,255,.45) 0%, transparent 70%),
    radial-gradient(40% 20% at 48% 28%, rgba(190,150,255,.35) 0%, transparent 70%);
  animation: auroraDrift 24s ease-in-out infinite alternate; }
@keyframes auroraDrift { from { transform: translate3d(-4%,0,0) skewX(-4deg); } to { transform: translate3d(4%,3%,0) skewX(5deg); } }

.bg-silk-road      { background:
    repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 22px, transparent 22px 44px),
    linear-gradient(160deg, #e8b45c 0%, #c0632f 40%, #7d2f3c 75%, #40182c 100%); }

.bg-summit         { background: linear-gradient(180deg, #1d3a63 0%, #5b8fc4 45%, #cfe4f5 100%); position:relative; }
.bg-summit::after  { content:""; position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:
    linear-gradient(to top right, transparent 49%, rgba(255,255,255,.92) 50%) 0 0 / 52% 100% no-repeat,
    linear-gradient(to top left, transparent 49%, rgba(226,238,250,.85) 50%) 100% 0 / 58% 100% no-repeat; }

.bg-threshold      { background: radial-gradient(circle at 50% 55%, #ffe9a8 0%, #d9a441 18%, #6c3f8f 55%, #1b1030 100%); position:relative; }
.bg-threshold::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,.16) 0deg, transparent 22deg, rgba(255,255,255,.16) 45deg, transparent 67deg, rgba(255,255,255,.16) 90deg, transparent 112deg, rgba(255,255,255,.16) 135deg, transparent 157deg, rgba(255,255,255,.16) 180deg, transparent 202deg, rgba(255,255,255,.16) 225deg, transparent 247deg, rgba(255,255,255,.16) 270deg, transparent 292deg, rgba(255,255,255,.16) 315deg, transparent 337deg);
  animation: thresholdSpin 60s linear infinite; }
@keyframes thresholdSpin { to { transform: rotate(360deg); } }

/* ---- Prestige-Ränge ---- */
.bg-silver-veil    { background: linear-gradient(135deg, #6f7683 0%, #d7dde6 25%, #8b93a1 50%, #eef2f7 75%, #767d8a 100%); position:relative; }
.bg-silver-veil::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 16px); }

.bg-golden-hour    { background: linear-gradient(135deg, #6b4310 0%, #f5d17a 22%, #b8801f 45%, #ffeaa8 68%, #7a4d12 100%); position:relative; }
.bg-golden-hour::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 48%, transparent 56%);
  background-size: 260% 100%; animation: goldSweep 7s ease-in-out infinite; }
@keyframes goldSweep { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

.bg-platinum-ice   { background: linear-gradient(160deg, #e9f2f7 0%, #a9c3d1 40%, #5d7b8c 100%); color:#0e2029; position:relative; }
.bg-platinum-ice::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background:
    linear-gradient(125deg, transparent 42%, rgba(255,255,255,.9) 43%, transparent 45%),
    linear-gradient(58deg, transparent 66%, rgba(255,255,255,.7) 67%, transparent 69%),
    linear-gradient(165deg, transparent 22%, rgba(255,255,255,.55) 23%, transparent 25%),
    linear-gradient(20deg, transparent 78%, rgba(255,255,255,.5) 79%, transparent 81%);
  background-size: 220px 220px, 300px 300px, 170px 170px, 260px 260px; }

.bg-diamond-dust   { background: radial-gradient(ellipse at 40% 25%, #2a3550 0%, #141a2c 55%, #070a14 100%); position:relative; overflow:hidden; }
.bg-diamond-dust::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 18% 26%, rgba(255,255,255,.95) 1px, transparent 2px),
    radial-gradient(circle at 64% 42%, rgba(190,235,255,.9) 1.2px, transparent 2.2px),
    radial-gradient(circle at 38% 74%, rgba(255,255,255,.85) 0.9px, transparent 1.8px),
    radial-gradient(circle at 82% 66%, rgba(220,240,255,.8) 1.1px, transparent 2px);
  background-size: 90px 90px, 130px 130px, 75px 75px, 110px 110px;
  animation: dustTwinkle 4.5s ease-in-out infinite alternate; }
@keyframes dustTwinkle { from { opacity:.45; } to { opacity:1; } }

.bg-grandmaster    { background: radial-gradient(ellipse at 50% 40%, #7d1220 0%, #4a0a14 55%, #1d0308 100%); position:relative; }
.bg-grandmaster::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, transparent 58px, rgba(217,164,65,.75) 59px, rgba(217,164,65,.75) 61px, transparent 62px),
    radial-gradient(circle at 50% 40%, transparent 40px, rgba(217,164,65,.45) 41px, rgba(217,164,65,.45) 42px, transparent 43px),
    conic-gradient(from 0deg at 50% 40%, rgba(217,164,65,.22) 0deg, transparent 30deg, rgba(217,164,65,.22) 60deg, transparent 90deg, rgba(217,164,65,.22) 120deg, transparent 150deg, rgba(217,164,65,.22) 180deg, transparent 210deg, rgba(217,164,65,.22) 240deg, transparent 270deg, rgba(217,164,65,.22) 300deg, transparent 330deg); }

/* ---- Belohnungen der plattformweiten Erfolge ---- */
.bg-night-league   { background: linear-gradient(165deg, #0f1630 0%, #1d2a52 50%, #2f4278 100%); position:relative; }
.bg-night-league::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(45deg, rgba(133,119,236,.16) 0 12px, transparent 12px 24px); }

.bg-triple-crown   { background: linear-gradient(160deg, #2b1a04 0%, #5c3a08 45%, #1a1002 100%); position:relative; }
.bg-triple-crown::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 30% 45%, rgba(255,214,120,.85) 5px, transparent 6px),
    radial-gradient(circle at 50% 36%, rgba(255,230,150,.95) 7px, transparent 8px),
    radial-gradient(circle at 70% 45%, rgba(255,214,120,.85) 5px, transparent 6px);
  background-size: 100% 100%; }

.bg-collectors-case{ background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 56px),
    linear-gradient(160deg, #3a2c1e 0%, #5b4530 55%, #241a10 100%); }

.bg-prism-vault    { background: radial-gradient(ellipse at 50% 45%, #2a2350 0%, #16123a 55%, #08061a 100%); position:relative; }
.bg-prism-vault::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.8;
  background:
    conic-gradient(from 200deg at 50% 45%, rgba(185,230,255,.5) 0deg, rgba(133,119,236,.45) 90deg, rgba(209,107,154,.45) 180deg, rgba(63,143,95,.4) 270deg, rgba(185,230,255,.5) 360deg);
  mask-image: radial-gradient(circle at 50% 45%, black 0 34%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 0 34%, transparent 62%); }

.bg-marathon       { background: linear-gradient(100deg, #0d1a26 0%, #17394d 35%, #2f7f86 65%, #8fd6c0 100%); position:relative; }
.bg-marathon::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.5) 0 2px, transparent 2px 26px); }

.bg-hall-of-fame   { background: linear-gradient(180deg, #1b1408 0%, #3a2c11 55%, #120d05 100%); position:relative; }
.bg-hall-of-fame::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(217,164,65,.35) 44px 48px, transparent 48px 92px),
    linear-gradient(180deg, rgba(255,230,160,.25) 0%, transparent 45%); }

/* ---- Neue Shop-Motive ---- */
.bg-linen-press    { background:
    repeating-linear-gradient(0deg, rgba(120,100,70,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,70,.07) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #f5efe0 0%, #e3d8c0 55%, #cbbc9c 100%); color:#3a3020; }

.bg-slate-board    { background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.06) 0%, transparent 55%),
    linear-gradient(160deg, #2f3437 0%, #22272a 55%, #171b1d 100%); color:#e6ebe8; }

.bg-neon-grid      { background:
    repeating-linear-gradient(0deg, rgba(64,255,224,.28) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,64,208,.24) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #12042a 0%, #1d0740 60%, #08021a 100%); }

.bg-autumn-fall    { background: linear-gradient(170deg, #f6d9a8 0%, #d98b3c 45%, #8c3520 100%); position:relative; color:#3a1608; }
.bg-autumn-fall::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background:
    radial-gradient(circle at 22% 30%, rgba(140,53,32,.75) 3px, transparent 4px),
    radial-gradient(circle at 68% 22%, rgba(90,35,20,.65) 2.4px, transparent 3.4px),
    radial-gradient(circle at 44% 66%, rgba(160,70,30,.7) 3.2px, transparent 4.2px),
    radial-gradient(circle at 82% 74%, rgba(110,45,25,.6) 2.6px, transparent 3.6px);
  background-size: 120px 120px, 160px 160px, 140px 140px, 180px 180px; }

.bg-deep-current   { background: linear-gradient(180deg, #0a3350 0%, #062338 55%, #02121e 100%); position:relative; overflow:hidden; }
.bg-deep-current::after{ content:""; position:absolute; inset:-30%; pointer-events:none; opacity:.4;
  background: repeating-linear-gradient(74deg, rgba(150,220,255,.5) 0 3px, transparent 3px 42px);
  animation: currentDrift 18s linear infinite; }
@keyframes currentDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(84px,0,0); } }

.bg-circuitry      { background:
    repeating-linear-gradient(0deg, rgba(80,220,160,.22) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(90deg, rgba(80,220,160,.16) 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #06231a 0%, #04160f 60%, #010806 100%); position:relative; }
.bg-circuitry::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 20% 30%, rgba(120,255,200,.9) 2px, transparent 3px),
              radial-gradient(circle at 60% 70%, rgba(120,255,200,.7) 2px, transparent 3px),
              radial-gradient(circle at 84% 24%, rgba(120,255,200,.8) 2px, transparent 3px);
  background-size: 100% 100%; animation: circuitPulse 3.2s ease-in-out infinite; }
@keyframes circuitPulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }

.bg-stained-glass  { background:
    conic-gradient(from 20deg at 30% 30%, #c0392b 0deg 60deg, #2e6fa7 60deg 120deg, #d9a441 120deg 180deg, #3f8f5f 180deg 240deg, #8557c9 240deg 300deg, #d16b9a 300deg 360deg),
    #1b1b22; position:relative; }
.bg-stained-glass::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(38deg, rgba(20,18,26,.85) 0 3px, transparent 3px 58px),
    repeating-linear-gradient(-52deg, rgba(20,18,26,.85) 0 3px, transparent 3px 58px); }

.bg-event-horizon  { background: radial-gradient(circle at 50% 50%, #000 0 18%, #2a1042 34%, #6b2a8f 46%, #12061f 70%, #05020a 100%); position:relative; overflow:hidden; }
.bg-event-horizon::after{ content:""; position:absolute; inset:-40%; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,190,120,.55) 40deg, transparent 90deg, rgba(180,140,255,.45) 150deg, transparent 210deg, rgba(255,220,180,.5) 280deg, transparent 340deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 19%, black 26%, black 46%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 19%, black 26%, black 46%, transparent 58%);
  animation: horizonSpin 26s linear infinite; }
@keyframes horizonSpin { to { transform: rotate(360deg); } }

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora-north::after, .bg-golden-hour::after, .bg-diamond-dust::after,
  .bg-deep-current::after, .bg-circuitry::after, .bg-event-horizon::after,
  .bg-threshold::after { animation: none; }
}


/* ============================================================================
   Ranglisten-Belohnungen (2026-07-22). Nur gegen Kronen zu haben, deshalb
   bewusst die auffälligsten Motive der Plattform.
   ========================================================================== */

.bg-rank-quartz-dawn { background: linear-gradient(160deg, #e8eefc 0%, #a9b6d8 45%, #4b5a80 100%); position:relative; color:#151d33; }
.bg-rank-quartz-dawn::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.65;
  background:
    linear-gradient(118deg, transparent 40%, rgba(255,255,255,.95) 41%, transparent 43%),
    linear-gradient(52deg, transparent 58%, rgba(255,255,255,.75) 59%, transparent 61%),
    linear-gradient(160deg, transparent 26%, rgba(255,255,255,.6) 27%, transparent 29%);
  background-size: 200px 200px, 260px 260px, 150px 150px; }

.bg-rank-arena { background: linear-gradient(180deg, #1a1408 0%, #3a2c14 55%, #5a4520 100%); position:relative; }
.bg-rank-arena::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 0%, rgba(255,240,190,.55) 0%, transparent 70%),
    radial-gradient(60% 40% at 80% 0%, rgba(255,240,190,.45) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(0,0,0,.3) 60px 64px); }

.bg-rank-duel { background: linear-gradient(160deg, #14161d 0%, #262b38 55%, #0c0e13 100%); position:relative; }
.bg-rank-duel::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(38deg, transparent 47%, rgba(220,230,255,.85) 48%, transparent 50%),
    linear-gradient(-38deg, transparent 47%, rgba(220,230,255,.85) 48%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,210,120,.7) 3px, transparent 14px);
  background-size: 100% 100%, 100% 100%, 100% 100%; }

.bg-rank-laurel { background: radial-gradient(ellipse at 50% 45%, #16401f 0%, #0c2412 60%, #050d07 100%); position:relative; }
.bg-rank-laurel::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 62px, rgba(217,180,80,.8) 63px, rgba(217,180,80,.8) 66px, transparent 67px),
    conic-gradient(from 90deg at 50% 50%, rgba(217,180,80,.35) 0deg, transparent 18deg, rgba(217,180,80,.35) 36deg, transparent 54deg, rgba(217,180,80,.35) 72deg, transparent 90deg, rgba(217,180,80,.35) 108deg, transparent 126deg, rgba(217,180,80,.35) 144deg, transparent 162deg, rgba(217,180,80,.35) 180deg, transparent 198deg, rgba(217,180,80,.35) 216deg, transparent 234deg, rgba(217,180,80,.35) 252deg, transparent 270deg, rgba(217,180,80,.35) 288deg, transparent 306deg, rgba(217,180,80,.35) 324deg, transparent 342deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 58px, black 62px, black 78px, transparent 84px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 58px, black 62px, black 78px, transparent 84px); }

.bg-rank-storm-crown { background: linear-gradient(180deg, #0a1020 0%, #17233f 50%, #050810 100%); position:relative; overflow:hidden; }
.bg-rank-storm-crown::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(102deg, transparent 44%, rgba(190,220,255,.95) 45%, transparent 46%),
    linear-gradient(76deg, transparent 62%, rgba(210,235,255,.8) 63%, transparent 64%),
    radial-gradient(70% 40% at 50% 0%, rgba(140,180,255,.35) 0%, transparent 70%);
  animation: stormFlash 6s steps(1) infinite; }
@keyframes stormFlash { 0%,88%,100% { opacity:.25; } 90% { opacity:1; } 92% { opacity:.35; } 94% { opacity:.95; } }

.bg-rank-molten-throne { background: radial-gradient(ellipse at 50% 105%, #ffb347 0%, #d1400f 28%, #5c1206 62%, #180402 100%); position:relative; overflow:hidden; }
.bg-rank-molten-throne::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(84deg, rgba(255,180,70,.5) 0 2px, transparent 2px 30px),
    radial-gradient(ellipse at 50% 100%, rgba(255,230,150,.6) 0%, transparent 55%);
  animation: moltenGlow 5s ease-in-out infinite; }
@keyframes moltenGlow { 0%,100% { opacity:.4; transform: translate3d(0,0,0);} 50% { opacity:.95; transform: translate3d(-10px,0,0);} }

.bg-rank-prism-crown { background: radial-gradient(circle at 50% 46%, #ffffff 0 6%, #cbb8ff 16%, #6b4ad6 38%, #241a52 68%, #0a0718 100%); position:relative; overflow:hidden; }
.bg-rank-prism-crown::after{ content:""; position:absolute; inset:-40%; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,90,120,.75) 0deg, rgba(255,200,80,.7) 51deg, rgba(120,255,170,.7) 102deg,
    rgba(90,200,255,.7) 153deg, rgba(150,120,255,.75) 204deg, rgba(255,120,220,.7) 255deg,
    rgba(255,90,120,.75) 360deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 12%, black 22%, black 40%, transparent 52%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 12%, black 22%, black 40%, transparent 52%);
  animation: prismCrownSpin 18s linear infinite; }
@keyframes prismCrownSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bg-rank-storm-crown::after, .bg-rank-molten-throne::after, .bg-rank-prism-crown::after { animation: none; }
}

/* ============================================================================
   Jahrespass "Kristallpfad" (§ Feature: 100 Basisstufen + 10 Bonusstufen).
   Basisstufen folgen den Etappen Fundament→Wachstum→Glanz→Tiefenglut→Erhabenheit→
   Vollendung; die Bonusstufen ("Sternenkrone") sind ausnahmslos einzigartig und
   werden zunehmend aufwendiger, bis zum Kronjuwel auf Stufe 110.
   ========================================================================== */

/* ---- Basisstufen ---- */
.bg-season-crystal-seed  { background: linear-gradient(170deg, #2e2418 0%, #1a1710 55%, #0d0d09 100%); position:relative; }
.bg-season-crystal-seed::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 55%, rgba(90,209,184,.5) 0%, transparent 40%); }

.bg-season-crystal-bloom { background: linear-gradient(160deg, #0a2a20 0%, #0e4a38 45%, #33e0b0 100%); position:relative; }
.bg-season-crystal-bloom::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.5) 1px, transparent 2px),
              radial-gradient(circle at 68% 55%, rgba(255,255,255,.4) 1px, transparent 2px);
  background-size: 90px 90px, 130px 130px; }

.bg-season-facet-shine   { background: linear-gradient(150deg, #0a1f33 0%, #123a5c 45%, #6fd0ff 100%); position:relative; }
.bg-season-facet-shine::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 44%, rgba(255,255,255,.75) 46%, transparent 48%),
              linear-gradient(60deg, transparent 62%, rgba(255,255,255,.5) 64%, transparent 66%);
  background-size: 220px 220px, 300px 300px; }

.bg-season-deep-glow     { background: radial-gradient(ellipse at 50% 60%, #6b2a8f 0%, #2a0a4a 55%, #0a0518 100%); position:relative; }
.bg-season-deep-glow::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 65%, rgba(255,120,220,.4) 0%, transparent 45%); }

.bg-season-sublime-glow  { background: linear-gradient(160deg, #3a2a08 0%, #b8901f 45%, #ffeaa8 100%); position:relative; }
.bg-season-sublime-glow::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 48%, transparent 56%);
  background-size: 260% 100%; animation: seasonSublimeSweep 8s ease-in-out infinite; }
@keyframes seasonSublimeSweep { 0%,100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }

.bg-season-crystal-ascension { background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #ffe9a8 20%, #b06bff 55%, #241a52 85%, #0a0718 100%); position:relative; overflow:hidden; }
.bg-season-crystal-ascension::after { content:""; position:absolute; inset:-40%; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.8) 0deg, rgba(255,224,150,.6) 60deg, rgba(176,107,255,.6) 150deg, rgba(90,200,255,.6) 240deg, rgba(255,255,255,.8) 360deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 14%, black 26%, black 42%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 14%, black 26%, black 42%, transparent 55%);
  animation: seasonAscensionSpin 20s linear infinite; }
@keyframes seasonAscensionSpin { to { transform: rotate(360deg); } }

/* ---- Bonusstufen "Sternenkrone" (101–110) ---- */
.bg-season-star-seed    { background: radial-gradient(ellipse at 50% 35%, #2a2a6b 0%, #101033 55%, #05050f 100%); position:relative; }
.bg-season-star-seed::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 22% 30%, rgba(255,255,255,.8) 1px, transparent 2px),
              radial-gradient(circle at 66% 55%, rgba(200,220,255,.7) 1px, transparent 2px),
              radial-gradient(circle at 42% 78%, rgba(255,240,200,.7) 1px, transparent 2px);
  background-size: 100px 100px, 140px 140px, 90px 90px; }

.bg-season-ember-spark  { background: radial-gradient(ellipse at 50% 100%, #ff9a3d 0%, #a5231f 40%, #2a0605 75%, #0d0202 100%); position:relative; }
.bg-season-ember-spark::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 95%, rgba(255,196,80,.55) 0%, transparent 45%);
  animation: seasonEmberPulse 4.5s ease-in-out infinite; }
@keyframes seasonEmberPulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }

.bg-season-crystal-echo { background: linear-gradient(150deg, #0d1a3a 0%, #1a2f66 45%, #6fa8ff 100%); position:relative; overflow:hidden; }
.bg-season-crystal-echo::after { content:""; position:absolute; inset:-30%; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(70deg, rgba(255,255,255,.4) 0 2px, transparent 2px 40px);
  animation: seasonEchoDrift 14s linear infinite; }
@keyframes seasonEchoDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(70px,0,0); } }

.bg-season-night-sail   { background: linear-gradient(180deg, #050814 0%, #101c38 55%, #1c3560 100%); position:relative; }
.bg-season-night-sail::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background: linear-gradient(to top right, transparent 55%, rgba(220,235,255,.5) 56%, transparent 58%); }

.bg-season-light-lattice { background: linear-gradient(160deg, #10142a 0%, #1c2350 55%, #3a4590 100%); position:relative; }
.bg-season-light-lattice::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background: repeating-linear-gradient(45deg, rgba(220,235,255,.35) 0 1px, transparent 1px 26px),
              repeating-linear-gradient(-45deg, rgba(220,235,255,.35) 0 1px, transparent 1px 26px); }

.bg-season-storm-core   { background: radial-gradient(ellipse at 50% 45%, #2a3a6b 0%, #10182f 55%, #030509 100%); position:relative; overflow:hidden; }
.bg-season-storm-core::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(96deg, transparent 44%, rgba(190,220,255,.9) 45%, transparent 46%),
              linear-gradient(70deg, transparent 62%, rgba(210,235,255,.75) 63%, transparent 64%);
  animation: seasonStormFlash 6s steps(1) infinite; }
@keyframes seasonStormFlash { 0%,88%,100% { opacity:.2; } 90% { opacity:1; } 92% { opacity:.3; } 94% { opacity:.9; } }

.bg-season-golden-flood { background: linear-gradient(170deg, #4a2f08 0%, #b8801f 45%, #ffdf8a 100%); position:relative; overflow:hidden; }
.bg-season-golden-flood::after { content:""; position:absolute; inset:-20%; pointer-events:none; opacity:.5;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.5) 0 2px, transparent 2px 30px);
  animation: seasonFloodDrift 10s linear infinite; }
@keyframes seasonFloodDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(90px,0,0); } }

.bg-season-shadow-mirror{ background: linear-gradient(160deg, #17171d 0%, #26262e 55%, #0c0c10 100%); position:relative; }
.bg-season-shadow-mirror::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background: linear-gradient(125deg, transparent 42%, rgba(255,255,255,.5) 43%, transparent 45%); }

.bg-season-crown-hem    { background: linear-gradient(170deg, #2a1a04 0%, #6b4310 45%, #d9a441 80%, #ffeaa8 100%); position:relative; }
.bg-season-crown-hem::after { content:""; position:absolute; inset:auto 0 0 0; height:30%; pointer-events:none;
  background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.4) 40px 44px, transparent 44px 84px); }

.bg-season-crown-jewel  { background: radial-gradient(circle at 50% 46%, #ffffff 0 6%, #ffe9a8 16%, #ff6bd6 34%, #6b4ad6 56%, #1c1240 82%, #05030f 100%); position:relative; overflow:hidden; }
.bg-season-crown-jewel::after { content:""; position:absolute; inset:-40%; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255,90,120,.8) 0deg, rgba(255,220,90,.8) 51deg, rgba(120,255,180,.8) 102deg,
    rgba(90,200,255,.8) 153deg, rgba(180,120,255,.8) 204deg, rgba(255,120,220,.8) 255deg, rgba(255,90,120,.8) 360deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, black 20%, black 42%, transparent 56%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 10%, black 20%, black 42%, transparent 56%);
  animation: seasonCrownJewelSpin 14s linear infinite; }
@keyframes seasonCrownJewelSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .bg-season-sublime-glow::after, .bg-season-crystal-ascension::after, .bg-season-ember-spark::after,
  .bg-season-crystal-echo::after, .bg-season-storm-core::after, .bg-season-golden-flood::after,
  .bg-season-crown-jewel::after { animation: none; }
}