/* Fabelkarten – Look: tiefes Nachtblau mit Gold, glänzende Karten. Schrift: Fredoka (OFL, siehe /fonts). */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0d0b1f;
  --bg2: #16123a;
  --panel: linear-gradient(180deg, rgba(48, 36, 110, .78), rgba(26, 18, 66, .86));
  --panel-solid: #221a52;
  --border: rgba(255, 255, 255, .14);
  --fill: rgba(255, 255, 255, .07);
  --fill2: rgba(255, 255, 255, .12);
  --text: #fff;
  --muted: #b9b2e0;
  --gold: #ffcf4d;
  --gold2: #ff9f1c;
  --pink: #ff5fc8;
  --violet: #8b5cff;
  --good: #4ade80;
  --bad: #ff4f6d;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: "Fredoka", "Nunito", "Segoe UI", system-ui, sans-serif;
  --emo: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--text); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 700px at 15% -10%, #3b1f7a 0%, transparent 60%), radial-gradient(900px 600px at 110% 10%, #1a3a7a 0%, transparent 55%), var(--bg); background-attachment: fixed; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; }
h2 { font-size: 1.35rem; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.emo { font-family: var(--emo); line-height: 1; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.stack { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }

/* ---------- Knöpfe, Felder ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 14px; padding: 10px 18px; cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: #3a1c00; background: linear-gradient(180deg, #ffe58a, #ffbf2e 55%, #ff9f1c); box-shadow: 0 4px 0 #b86b00, 0 8px 20px rgba(255, 160, 30, .25), inset 0 2px 0 rgba(255,255,255,.6); transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b86b00, inset 0 2px 0 rgba(255,255,255,.6); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn.violet { color: #fff; background: linear-gradient(180deg, #a27bff, #6d3dff); box-shadow: 0 4px 0 #3e1fa0, 0 8px 20px rgba(110, 60, 255, .3), inset 0 2px 0 rgba(255,255,255,.3); }
.btn.pink { color: #fff; background: linear-gradient(180deg, #ff8ad8, #e0359e); box-shadow: 0 4px 0 #8a1660, inset 0 2px 0 rgba(255,255,255,.3); }
.btn.ghost { color: #fff; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }
.btn.ghost:active { box-shadow: inset 0 0 0 1px var(--border); }
.btn.danger { color: #fff; background: linear-gradient(180deg, #ff7088, #d62848); box-shadow: 0 4px 0 #7a0f22; }
.btn.small { padding: 6px 12px; font-size: .9rem; border-radius: 11px; }
.btn.big { padding: 14px 26px; font-size: 1.15rem; border-radius: 18px; }
.btn .emo { font-size: 1.15em; }
.input { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(0,0,0,.25); outline: none; }
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 207, 77, .2); }
select.input { appearance: auto; }
label.field { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
label.check { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 0; cursor: pointer; padding: 6px 12px; border-radius: 99px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.chip.on { background: linear-gradient(180deg, #ffe58a, #ffb52e); color: #3a1c00; box-shadow: none; font-weight: 600; }
.pill { display: inline-flex; gap: 4px; align-items: center; padding: 2px 9px; border-radius: 99px; background: var(--fill2); font-size: .8rem; }
.pill.gold { background: rgba(255, 207, 77, .18); color: var(--gold); }
.pill.good { background: rgba(74, 222, 128, .15); color: var(--good); }
.pill.bad { background: rgba(255, 79, 109, .15); color: var(--bad); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.panel h2 { display: flex; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }

/* ---------- Kopf und Navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(13, 11, 31, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.brand .logo { width: 34px; height: 34px; }
.wallet { display: flex; gap: 8px; margin-left: auto; }
.wallet .w { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); font-weight: 600; font-variant-numeric: tabular-nums; }
.wallet .w .emo { font-size: 1.05rem; }
.wallet .w.pop { animation: pop .5s; }
@keyframes pop { 40% { transform: scale(1.18); background: rgba(255, 207, 77, .3); } }
.me { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--fill2); flex: none; }
.avatar.big { width: 64px; height: 64px; }
.nav { display: flex; gap: 4px; padding: 8px 18px 0; max-width: 1280px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.nav a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 14px 14px 0 0; text-decoration: none; color: var(--muted); font-weight: 600; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a.on { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 -3px 0 var(--gold); }
.nav a .emo { font-size: 1.1rem; }
.page { max-width: 1280px; margin: 0 auto; padding: 18px 18px 120px; }
.announce { max-width: 1280px; margin: 10px auto 0; padding: 0 18px; }
.announce div { padding: 10px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 207, 77, .22), rgba(255, 95, 200, .18)); border: 1px solid rgba(255, 207, 77, .35); }
.luckbar { max-width: 1280px; margin: 10px auto 0; padding: 0 18px; }
.luckbar div { padding: 10px 16px; border-radius: 14px; font-weight: 600; text-align: center; background: linear-gradient(90deg, #2f9e44, #ffcf4d, #2f9e44); background-size: 200% 100%; animation: slide 4s linear infinite; color: #1a2a00; }
@keyframes slide { to { background-position: -200% 0; } }

@media (max-width: 760px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .brand span:not(.logo-wrap) { display: none; }
  .wallet { gap: 4px; }
  .wallet .w { padding: 4px 7px; font-size: .82rem; gap: 3px; }
  .wallet .w .emo { font-size: .9rem; }
  .me { display: none; }
  .topbar .btn.small { padding: 5px 8px; }
  .toolbar .input { flex: 1 1 140px; min-width: 0; }
  .toolbar .spacer { display: none; }
  .nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(13, 11, 31, .95); border-top: 1px solid var(--border); justify-content: space-between; gap: 0; }
  .nav a { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: .68rem; border-radius: 12px; }
  .nav a.on { box-shadow: none; background: rgba(255,255,255,.1); }
  .nav a .emo { font-size: 1.35rem; }
  .page { padding: 12px 10px 110px; }
}

/* ---------- Karten ---------- */
.card { --ec: #888; --ed: #222; --rc: #b9c2cf; --hue: 0deg; position: relative; aspect-ratio: 5 / 7; width: 100%; border-radius: 7cqw; container-type: inline-size; cursor: pointer; user-select: none;
  transition: transform .15s; }
.card-in { position: absolute; inset: 0; border-radius: 7cqw; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; padding: 5cqw;
  background: radial-gradient(120% 80% at 50% 35%, color-mix(in srgb, var(--ec) 75%, #fff 10%) 0%, var(--ec) 35%, var(--ed) 100%);
  box-shadow: inset 0 0 0 2.5cqw var(--rc), inset 0 0 0 3.2cqw rgba(0,0,0,.35), 0 3cqw 8cqw rgba(0,0,0,.5); }
.card-in::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 3cqw, transparent 3cqw 6cqw); }
.card:hover { transform: translateY(-3px); }
.c-top { position: relative; display: flex; justify-content: space-between; align-items: center; font-size: 8cqw; font-weight: 700; padding: 1cqw 2cqw 0; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.c-top .emo { font-size: 10cqw; }
.c-art { position: relative; display: grid; place-items: center; margin: 2cqw 2cqw 0; border-radius: 5cqw; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.35), transparent 65%); }
.c-art .emo { font-size: 44cqw; filter: hue-rotate(var(--hue)) drop-shadow(0 3cqw 3cqw rgba(0,0,0,.5)); }
.c-name { position: relative; text-align: center; font-weight: 700; font-size: 8.6cqw; line-height: 1.05; padding: 0 1cqw; text-shadow: 0 1px 3px rgba(0,0,0,.7); overflow-wrap: anywhere; hyphens: auto; min-height: 2.1em; display: grid; place-items: center; }
.c-bot { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 2cqw; font-size: 7.5cqw; font-weight: 700; }
.c-rar { display: inline-grid; place-items: center; min-width: 13cqw; height: 13cqw; padding: 0 2cqw; border-radius: 99px; background: var(--rc); color: #111; font-size: 7cqw; }
.c-pow { padding: 0 3cqw; border-radius: 99px; background: rgba(0,0,0,.45); }
.c-set .emo { font-size: 9cqw; }
.c-qty { position: absolute; z-index: 3; right: -2cqw; top: -2cqw; min-width: 18cqw; height: 18cqw; padding: 0 3cqw; border-radius: 99px; background: var(--gold); color: #3a1c00; font-weight: 700; font-size: 10cqw; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.c-new { position: absolute; z-index: 3; left: 50%; top: -3cqw; transform: translateX(-50%); padding: 1cqw 5cqw; border-radius: 99px; background: var(--pink); color: #fff; font-weight: 700; font-size: 8cqw; box-shadow: 0 2px 8px rgba(255, 95, 200, .6); white-space: nowrap; }
.c-vars { position: absolute; z-index: 3; left: 3cqw; bottom: 22cqw; display: flex; gap: 1cqw; }
.c-vars .emo { font-size: 9cqw; filter: drop-shadow(0 1px 2px #000); }
.c-wish { position: absolute; z-index: 3; left: -2cqw; top: -2cqw; font-size: 14cqw; filter: drop-shadow(0 1px 2px #000); }
.c-text { position: relative; font-size: 6.2cqw; text-align: center; color: rgba(255,255,255,.9); margin: 2cqw 1cqw 0; line-height: 1.2; }
.c-title { display: block; font-size: 6cqw; font-style: italic; color: #ffe9a8; font-weight: 600; }

/* Seltenheiten */
.r-rare .card-in { box-shadow: inset 0 0 0 2.5cqw var(--rc), inset 0 0 0 3.2cqw rgba(0,0,0,.35), 0 0 6cqw rgba(79, 157, 255, .35); }
.r-epic .card-in { box-shadow: inset 0 0 0 2.5cqw var(--rc), inset 0 0 0 3.2cqw rgba(0,0,0,.35), 0 0 9cqw rgba(180, 92, 255, .55); }
.r-legendary .card-in { box-shadow: inset 0 0 0 3cqw var(--rc), inset 0 0 0 3.8cqw rgba(0,0,0,.35), 0 0 12cqw rgba(255, 176, 32, .65); }
.r-mythic .card-in { box-shadow: inset 0 0 0 3cqw var(--rc), inset 0 0 0 3.8cqw rgba(0,0,0,.35), 0 0 14cqw rgba(255, 79, 216, .7); }
.r-secret .card-in { background: radial-gradient(120% 80% at 50% 35%, #3a3a3a, #0a0a0a 75%); box-shadow: inset 0 0 0 3cqw #fff, inset 0 0 0 4cqw #000, 0 0 16cqw rgba(255,255,255,.55); }
.r-secret .c-rar { background: linear-gradient(90deg, #fff, #ffd76a, #fff); }
.r-legendary .c-art::after, .r-mythic .c-art::after, .r-secret .c-art::after { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.12), transparent 60%); animation: spin 8s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Ausführungen */
.v-holo .card-in::after, .v-gold .card-in::after, .v-prisma .card-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; background-size: 300% 300%; animation: sheen 4s linear infinite; }
.v-holo .card-in::after { background-image: linear-gradient(115deg, transparent 25%, rgba(140, 220, 255, .55) 40%, rgba(255, 140, 240, .5) 50%, rgba(255, 255, 160, .45) 60%, transparent 75%); }
.v-gold .card-in { background: radial-gradient(120% 80% at 50% 35%, #fff3b0 0%, #e6b830 40%, #7a4a00 100%); box-shadow: inset 0 0 0 3cqw #ffd76a, inset 0 0 0 4cqw #7a4a00, 0 0 12cqw rgba(255, 200, 60, .7); }
.v-gold .card-in::after { background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .8) 45%, transparent 60%); }
.v-gold .c-art .emo { filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 3cqw 3cqw rgba(0,0,0,.5)); }
.v-prisma .card-in { box-shadow: inset 0 0 0 3cqw transparent, 0 0 14cqw rgba(255,255,255,.55); }
.v-prisma::before { content: ""; position: absolute; inset: -1.5cqw; border-radius: 8cqw; background: conic-gradient(red, orange, yellow, lime, cyan, blue, magenta, red); animation: hue 3s linear infinite; z-index: 0; }
.v-prisma .card-in::after { background-image: linear-gradient(115deg, rgba(255,0,0,.35), rgba(255,200,0,.35), rgba(0,255,120,.35), rgba(0,160,255,.35), rgba(200,0,255,.35), rgba(255,0,0,.35)); mix-blend-mode: overlay; }
@keyframes sheen { from { background-position: 100% 100%; } to { background-position: 0 0; } }
@keyframes hue { to { filter: hue-rotate(360deg); } }

/* Fehlende Karte im Album */
.card.missing .card-in { background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 3cqw, rgba(0,0,0,.1) 3cqw 6cqw), #1b1640; box-shadow: inset 0 0 0 1.5cqw rgba(255,255,255,.14); }
.card.missing .card-in::after, .card.missing .c-art::after { display: none; }
.card.missing .c-art .emo { filter: brightness(0) opacity(.35); }
.card.missing .c-name, .card.missing .c-bot { opacity: .5; }
.card.missing.seen .c-art .emo { filter: grayscale(1) opacity(.45); }

/* Kartenrückseite */
.card-back { position: absolute; inset: 0; border-radius: 7cqw; display: grid; place-items: center; backface-visibility: hidden;
  background: radial-gradient(circle at 50% 50%, #3b2a8a, #120c34 70%); box-shadow: inset 0 0 0 3cqw #ffcf4d, inset 0 0 0 4cqw #6b4a00, 0 3cqw 8cqw rgba(0,0,0,.5); }
.card-back::before { content: ""; position: absolute; inset: 10cqw; border-radius: 4cqw; border: 1cqw dashed rgba(255, 207, 77, .5);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 10deg, transparent 10deg 20deg); }
.card-back .emo { font-size: 36cqw; position: relative; filter: drop-shadow(0 0 4cqw rgba(255, 207, 77, .8)); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
.card-grid.mini { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px 8px; }
@media (max-width: 500px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; } .card-grid.mini { grid-template-columns: repeat(4, 1fr); } }
.card-grid .card.sel { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- Pack öffnen ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 40%, rgba(60, 30, 140, .92), rgba(5, 3, 15, .97)); display: grid; place-items: center; overflow-y: auto; padding: 20px; }
.opener { width: min(1100px, 100%); display: grid; gap: 22px; justify-items: center; text-align: center; }
.pack { position: relative; width: 210px; aspect-ratio: 5 / 7.4; border-radius: 16px; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--pc, #8b5cff), color-mix(in srgb, var(--pc, #8b5cff) 40%, #000)); box-shadow: 0 0 40px color-mix(in srgb, var(--pc, #8b5cff) 70%, transparent), inset 0 0 0 4px rgba(255,255,255,.35); overflow: hidden; }
.pack::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 45%, transparent 60%); background-size: 300% 100%; animation: sheen 3s linear infinite; }
.pack .p-icon { font-size: 80px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.pack .p-name { position: absolute; bottom: 16px; left: 0; right: 0; font-weight: 700; font-size: 1.1rem; text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.pack .p-top { position: absolute; top: 0; left: 0; right: 0; height: 14%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 6px, transparent 6px 12px); }
.pack.shake { animation: shake .5s infinite; }
.pack.tear { animation: tear .7s forwards; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg) scale(1.02); } 75% { transform: rotate(3deg) scale(1.02); } }
@keyframes tear { 30% { transform: scale(1.15); filter: brightness(1.6); } 100% { transform: scale(.2) translateY(-200px); opacity: 0; } }
.reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.slot { width: clamp(120px, 15vw, 180px); perspective: 900px; }
.slot.many { width: clamp(96px, 11vw, 140px); }
.flip { position: relative; container-type: inline-size; aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .2, 1.15); cursor: pointer; animation: dealin .45s backwards; }
.flip.open { transform: rotateY(180deg); cursor: zoom-in; }
.flip > .card { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; }
.flip > .card:hover { transform: rotateY(180deg); }
@keyframes dealin { from { transform: translateY(80px) scale(.6); opacity: 0; } }
.flip .hint { position: absolute; inset: -6px; border-radius: 12px; pointer-events: none; opacity: .9; animation: pulse 1.1s ease-in-out infinite; backface-visibility: hidden; }
@keyframes pulse { 50% { opacity: .35; } }
.flip .card-back.g-rare { box-shadow: inset 0 0 0 3cqw #ffcf4d, 0 0 18px 4px #4f9dff; }
.flip .card-back.g-epic { box-shadow: inset 0 0 0 3cqw #ffcf4d, 0 0 22px 6px #b45cff; }
.flip .card-back.g-legendary { box-shadow: inset 0 0 0 3cqw #ffcf4d, 0 0 30px 10px #ffb020; animation: shake .35s infinite; }
.flip .card-back.g-mythic { box-shadow: inset 0 0 0 3cqw #ffcf4d, 0 0 36px 12px #ff4fd8; animation: shake .25s infinite; }
.flip .card-back.g-secret { box-shadow: inset 0 0 0 3cqw #fff, 0 0 44px 16px #fff; animation: shake .2s infinite; }
.reveal-note { min-height: 1.4em; font-weight: 700; font-size: 1.05rem; }
.bigmsg { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 700; background: linear-gradient(90deg, #ffe58a, #ff5fc8, #8bd3ff, #ffe58a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 3s linear infinite; }
.summary { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.confetti { position: fixed; top: -20px; z-index: 200; width: 10px; height: 14px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.flash { position: fixed; inset: 0; z-index: 150; pointer-events: none; animation: flash .8s forwards; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

/* ---------- Shop ---------- */
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.settile { position: relative; padding: 12px; border-radius: 16px; cursor: pointer; border: 0; text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 55%, #1b1440), #120d30); box-shadow: inset 0 0 0 1px var(--border); display: grid; gap: 4px; }
.settile.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(255, 207, 77, .35); }
.settile .emo { font-size: 1.8rem; }
.settile b { font-size: 1rem; }
.progress { height: 8px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); border-radius: inherit; transition: width .5s; }
.progress.pink i { background: linear-gradient(90deg, #b45cff, var(--pink)); }
.progress.green i { background: linear-gradient(90deg, #16a34a, var(--good)); }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.packcard { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.packcard .pack { width: 120px; cursor: default; }
.packcard .pack .p-icon { font-size: 48px; }
.packcard .pack .p-name { font-size: .85rem; bottom: 8px; }
.odds { font-size: .8rem; color: var(--muted); }

/* ---------- Start ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.bigstat { font-size: 2rem; font-weight: 700; }
.feed { display: grid; gap: 6px; max-height: 420px; overflow-y: auto; }
.feed .f { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--fill); font-size: .92rem; }
.feed .f .avatar { width: 26px; height: 26px; }
.feed .f .t { margin-left: auto; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.rc { font-weight: 700; color: var(--rc, #fff); }
.quest { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--fill); }
.quest.done { box-shadow: inset 0 0 0 2px var(--good); }
.quest.claimed { opacity: .55; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days div { padding: 8px 2px; border-radius: 12px; text-align: center; background: var(--fill); font-size: .8rem; }
.days div.done { background: rgba(255, 207, 77, .22); color: var(--gold); }
.days div.today { box-shadow: inset 0 0 0 2px var(--gold); }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Glücksrad */
.wheelbox { display: grid; justify-items: center; gap: 12px; }
.wheel { position: relative; width: min(300px, 80vw); aspect-ratio: 1; }
.wheel .disc { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #ffcf4d; box-shadow: 0 0 30px rgba(255, 207, 77, .4), inset 0 0 20px rgba(0,0,0,.5); transition: transform 9s cubic-bezier(.1, .72, .06, 1); overflow: hidden; }
.wheel .seg { position: absolute; left: 50%; top: 50%; width: 46%; transform-origin: 0 50%; font-size: .66rem; font-weight: 700; text-align: right; padding-right: 8px; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wheel .pin { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 2; filter: drop-shadow(0 2px 3px #000); }
.wheel .hub { position: absolute; inset: 40%; border-radius: 50%; background: radial-gradient(circle, #ffe58a, #ff9f1c); box-shadow: 0 0 10px #000; display: grid; place-items: center; font-size: 1.6rem; }

/* ---------- Album ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.toolbar .input { width: auto; min-width: 160px; }
.settabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.settabs button { flex: none; display: grid; gap: 3px; padding: 8px 12px; min-width: 112px; border-radius: 14px; border: 0; cursor: pointer; text-align: left; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }
.settabs button.on { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255, 207, 77, .1); }
.settabs .emo { font-size: 1.2rem; }
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 16px; flex-wrap: wrap; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(5, 3, 15, .78); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal .box { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; border-radius: 22px; background: linear-gradient(180deg, #2a2068, #15103a); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; }
.modal .close { position: absolute; top: 12px; right: 12px; }
.detail { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 22px; align-items: start; }
@media (max-width: 700px) { .detail { grid-template-columns: 1fr; justify-items: center; } .detail .card { max-width: 260px; } }
.varrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fill); flex-wrap: wrap; }
.varrow .vn { min-width: 90px; font-weight: 600; }

/* Listen */
.list { display: grid; gap: 10px; }
.item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--fill); flex-wrap: wrap; }
.trade { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--fill); }
.trade .sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
@media (max-width: 700px) { .trade .sides { grid-template-columns: 1fr; } }
.trade .arrow { font-size: 1.6rem; align-self: center; text-align: center; }
.minis { display: flex; flex-wrap: wrap; gap: 6px; }
.minis .card { width: 70px; }
.picker { display: grid; gap: 10px; }
.picker .card-grid { max-height: 380px; overflow-y: auto; padding: 8px 4px; }
.lb { width: 100%; border-collapse: collapse; }
.lb td, .lb th { padding: 8px; text-align: left; border-bottom: 1px solid var(--border); }
.lb tr.me { background: rgba(255, 207, 77, .1); }
.lb .rank { width: 40px; font-weight: 700; color: var(--gold); }
.empty { padding: 24px; text-align: center; color: var(--muted); }

.toast-layer { position: fixed; z-index: 300; left: 50%; bottom: 90px; transform: translateX(-50%); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 14px; background: #2a2068; border: 1px solid var(--border); box-shadow: var(--shadow); animation: toast .25s; text-align: center; }
.toast.bad { background: #5a1024; } .toast.good { background: #14532d; } .toast.gold { background: #6b4a00; }
@keyframes toast { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Startseite ---------- */
.landing { min-height: 100vh; display: grid; place-items: center; padding: 30px 18px; text-align: center; }
.landing .inner { max-width: 1000px; display: grid; gap: 24px; justify-items: center; }
.landing h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); margin: 0; background: linear-gradient(90deg, #ffe58a, #ff9f1c, #ff5fc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing .tag { font-size: 1.15rem; color: var(--muted); max-width: 640px; }
.fan { display: flex; justify-content: center; height: 300px; margin: 10px 0 24px; }
.fan .card { width: 150px; flex: none; margin: 0 -38px; transform-origin: 50% 120%; transition: transform .3s; }
.fan .card:hover { transform: translateY(-20px) scale(1.06) !important; z-index: 5; }
@media (max-width: 600px) { .fan { height: 210px; } .fan .card { width: 104px; margin: 0 -30px; } }
.facts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.facts div { padding: 12px 18px; border-radius: 16px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }
.facts b { display: block; font-size: 1.5rem; color: var(--gold); }
.err { padding: 12px 18px; border-radius: 14px; background: rgba(255, 79, 109, .18); border: 1px solid rgba(255, 79, 109, .5); }

/* ---------- Admin ---------- */
.admin { display: grid; grid-template-columns: 210px 1fr; gap: 18px; max-width: 1280px; margin: 0 auto; padding: 18px; }
.admin nav { display: grid; gap: 4px; align-content: start; position: sticky; top: 70px; }
.admin nav a { padding: 10px 14px; border-radius: 12px; text-decoration: none; color: var(--muted); font-weight: 600; }
.admin nav a.on { background: var(--fill2); color: #fff; }
@media (max-width: 800px) { .admin { grid-template-columns: 1fr; } .admin nav { position: static; display: flex; overflow-x: auto; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.kpis div { padding: 14px; border-radius: 14px; background: var(--fill); }
.kpis b { display: block; font-size: 1.5rem; color: var(--gold); }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.t th, table.t td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
table.t th { color: var(--muted); font-weight: 600; }

/* =====================================================================
   Update: Sterne, Kosmisch, Kino-Sequenzen, Abenteuer, Spielhalle, Aufstieg
   ===================================================================== */

/* Ruhiger Sternenhimmel hinter allem */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background-image: radial-gradient(1.4px 1.4px at 8% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 22% 68%, #cfe4ff, transparent 60%), radial-gradient(1.6px 1.6px at 39% 28%, #fff, transparent 60%), radial-gradient(1px 1px at 53% 82%, #ffe8c2, transparent 60%), radial-gradient(1.3px 1.3px at 67% 16%, #fff, transparent 60%), radial-gradient(1px 1px at 78% 58%, #ffd1f4, transparent 60%), radial-gradient(1.5px 1.5px at 91% 35%, #fff, transparent 60%), radial-gradient(1px 1px at 14% 91%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 96% 88%, #cfe4ff, transparent 60%);
  background-size: 620px 620px; animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .4; } to { opacity: .9; } }
.center { text-align: center; }
.gold { color: var(--gold); }
.good-t { color: var(--good); } .bad-t, .bad { color: var(--bad); }
.fx-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 520; pointer-events: none; }
.page > * { animation: pagein .28s ease-out; }
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } }
.btn { position: relative; }
.btn.pulse { animation: btnpulse 1.4s ease-in-out infinite; }
@keyframes btnpulse { 50% { box-shadow: 0 4px 0 #b86b00, 0 0 34px 8px rgba(255, 190, 60, .7), inset 0 2px 0 rgba(255,255,255,.6); transform: scale(1.03); } }
.panel { transition: border-color .2s; }
.progress.big { height: 14px; }
.bigstat.gold { color: var(--gold); text-shadow: 0 0 16px rgba(255, 207, 77, .45); font-variant-numeric: tabular-nums; }
.pill.xp { background: rgba(139, 211, 255, .18); color: #8bd3ff; }

/* Kopfzeile: Level-Chip */
.wallet .w b { font-weight: 600; }
.wallet .w.pop.up { animation: popup .55s; }
.wallet .w.pop:not(.up) { animation: popdown .45s; }
@keyframes popup { 35% { transform: scale(1.2); background: rgba(255, 207, 77, .38); box-shadow: 0 0 20px rgba(255, 207, 77, .6); } }
@keyframes popdown { 35% { transform: scale(.95); background: rgba(255, 79, 109, .3); } }
.lvchip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 99px; text-decoration: none; background: linear-gradient(180deg, rgba(139, 92, 255, .4), rgba(139, 92, 255, .14)); box-shadow: inset 0 0 0 1px rgba(190, 160, 255, .5); }
.lvchip .emo { font-size: 1.2rem; }
.lv-t { display: grid; gap: 2px; min-width: 58px; font-size: .85rem; line-height: 1.05; }
.lv-bar { display: block; height: 4px; border-radius: 9px; background: rgba(0,0,0,.45); overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8bd3ff, #ffe58a); transition: width .6s; }
@media (max-width: 760px) { .lv-t { min-width: 40px; font-size: .72rem; } .lvchip { padding: 3px 7px 3px 5px; } #mute { display: none; } .wallet .w[data-k="dust"] { display: none; } .nav { justify-content: flex-start; } .nav a { flex: none; min-width: 58px; position: relative; } .nav a .badge { position: absolute; top: 2px; right: 4px; } }

/* Karten: Sterne, Glanzlicht, Neigung */
.card-in { transition: transform .12s ease-out; }
.c-stars { position: absolute; left: 0; right: 0; bottom: -1cqw; display: flex; justify-content: center; gap: .4cqw; font-size: 9.5cqw; line-height: 1; z-index: 2; }
.c-stars i { font-style: normal; color: #ffd84d; -webkit-text-stroke: .3cqw #7a4a00; text-shadow: 0 0 2.5cqw rgba(255, 200, 60, .85); }
.c-stars i.red { color: #ff5a4d; -webkit-text-stroke-color: #5a0d06; text-shadow: 0 0 3cqw rgba(255, 70, 60, .95); }
.c-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.95), rgba(255,255,255,.08) 45%, transparent 70%); }
.card.lit .c-glare { opacity: 1; }
.r-cosmic .card-in { background: radial-gradient(90% 60% at 50% 38%, #4a2bb0 0%, #160a47 45%, #03010f 100%); box-shadow: inset 0 0 0 3cqw transparent, 0 0 18cqw rgba(125, 249, 255, .7); }
.r-cosmic .card-in::before { background-image: radial-gradient(1.2cqw 1.2cqw at 14% 22%, #fff, transparent 60%), radial-gradient(.8cqw .8cqw at 80% 16%, #fff, transparent 60%), radial-gradient(1cqw 1cqw at 26% 62%, #bfe9ff, transparent 60%), radial-gradient(.8cqw .8cqw at 72% 58%, #ffd1f4, transparent 60%), radial-gradient(1cqw 1cqw at 88% 82%, #fff, transparent 60%), radial-gradient(.7cqw .7cqw at 42% 40%, #fff, transparent 60%); animation: twinkle 2.2s ease-in-out infinite alternate; }
.r-cosmic::before { content: ""; position: absolute; inset: -1.6cqw; border-radius: 8.4cqw; background: conic-gradient(from var(--spin, 0deg), #7df9ff, #b98cff, #ff7ae0, #fff3a8, #7df9ff); animation: hue 2.6s linear infinite; z-index: 0; }
.r-cosmic .card-in { z-index: 1; }
.r-cosmic .c-rar { background: linear-gradient(90deg, #7df9ff, #ff7ae0); color: #05031a; }
.r-cosmic .c-art::after { content: ""; position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, rgba(125,249,255,.3), transparent 30%, rgba(255,122,224,.26), transparent 60%); animation: spin 5s linear infinite; pointer-events: none; }
.card.missing.r-cosmic::before { display: none; }
.v-prisma .card-in { z-index: 1; }

/* Pack */
.pack-stage { position: relative; display: grid; place-items: center; padding: 30px; perspective: 1000px; }
.pack-rays { position: absolute; width: min(90vw, 620px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: .55; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--pc) 70%, transparent) 0 8deg, transparent 8deg 24deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 70%); mask-image: radial-gradient(circle, #000 12%, transparent 70%); animation: spin 22s linear infinite; }
.pack { transform-style: preserve-3d; }
.pack.idle { animation: packidle 2.6s ease-in-out infinite; }
.pack.idle.tease-1 { box-shadow: 0 0 60px var(--pc), inset 0 0 0 4px rgba(255,255,255,.4); }
.pack.idle.tease-2 { animation: packidle 2s ease-in-out infinite, packtrem .32s linear infinite; box-shadow: 0 0 80px 12px #ffb020, inset 0 0 0 4px #ffe29a; }
.pack.idle.tease-3 { animation: packtrem .13s linear infinite; box-shadow: 0 0 110px 26px #ff7ae0, inset 0 0 0 4px #fff; filter: brightness(1.2); }
@keyframes packidle { 50% { transform: translateY(-14px) rotate(-1.5deg) rotateY(9deg); } }
@keyframes packtrem { 25% { translate: -2px 1px; rotate: -1deg; } 75% { translate: 2px -1px; rotate: 1deg; } }
.p-strip { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 14%; border-radius: 16px 16px 0 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 6px, rgba(0,0,0,.2) 6px 12px), color-mix(in srgb, var(--pc) 75%, #fff); }
.pack.tear { overflow: visible; animation: packtear .8s cubic-bezier(.3, .7, .4, 1) forwards; }
.pack.tear .p-strip { animation: striptear .5s cubic-bezier(.2, .7, .4, 1) forwards; }
.pack.tear::after { content: ""; position: absolute; left: -40%; right: -40%; top: -60%; height: 75%; background: radial-gradient(ellipse at 50% 100%, #fff, color-mix(in srgb, var(--pc) 60%, #fff) 28%, transparent 70%); animation: packlight .8s ease-out forwards; }
@keyframes striptear { to { transform: translate(140px, -160px) rotate(52deg); opacity: 0; } }
@keyframes packlight { from { opacity: 0; transform: scaleY(.2); transform-origin: bottom; } 30% { opacity: 1; } to { opacity: 1; transform: scaleY(1.6); } }
@keyframes packtear { 18% { transform: scale(1.1) rotate(-3deg); } 60% { transform: scale(1.14) translateY(16px); filter: brightness(1.7); } 100% { transform: scale(.75) translateY(260px); opacity: 0; filter: brightness(2.2); } }
.flip { animation: dealfan .55s cubic-bezier(.2, .9, .3, 1.1) backwards; }
@keyframes dealfan { from { transform: translate(var(--fx, 0), -200px) rotate(var(--fr, 0)) scale(.3); opacity: 0; } }
.flip:not(.open):hover { translate: 0 -6px; }
.flip { transition: transform .6s cubic-bezier(.3, .7, .2, 1.15), translate .15s; }
.flip.jolt { animation: jolt .55s ease-out; }
@keyframes jolt { 30% { scale: 1.12; } }
.flip .card-back.g-epic { animation: pulsemild 1.1s ease-in-out infinite; }
.flip .card-back.g-cosmic { box-shadow: inset 0 0 0 3cqw #7df9ff, 0 0 60px 22px #7df9ff; animation: shake .13s infinite; }
@keyframes pulsemild { 50% { box-shadow: inset 0 0 0 3cqw #ffcf4d, 0 0 34px 12px #b45cff; } }
.card-back.big { position: relative; width: 100%; height: 100%; container-type: inline-size; border-radius: 22px; }

/* ---------- Kino ---------- */
.cine { position: fixed; inset: 0; z-index: 500; background: #000; overflow: hidden; animation: cinein .25s ease-out; color: #fff; }
.cine.out { animation: cineout .26s forwards; }
@keyframes cinein { from { opacity: 0; } }
@keyframes cineout { to { opacity: 0; } }
.cine-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-dom { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cine-skip, .cine-next { position: absolute; z-index: 3; cursor: pointer; border: 0; font-weight: 600; }
.cine-skip { top: max(14px, env(safe-area-inset-top)); right: 14px; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); animation: cinein 1s .8s backwards; }
.cine-next { left: 50%; transform: translateX(-50%); bottom: max(26px, env(safe-area-inset-bottom)); padding: 13px 44px; border-radius: 16px; color: #3a1c00; background: linear-gradient(180deg, #ffe58a, #ffbf2e 55%, #ff9f1c); box-shadow: 0 4px 0 #b86b00, 0 0 32px rgba(255, 190, 60, .6); animation: nextin .4s; font-size: 1.1rem; }
@keyframes nextin { from { opacity: 0; transform: translate(-50%, 16px); } }
.cine-lines { position: absolute; left: 0; right: 0; bottom: 13%; text-align: center; pointer-events: none; padding: 0 20px; }
.cine-line { display: inline-block; font-size: clamp(1.15rem, 3.3vw, 2rem); font-weight: 600; letter-spacing: .03em; text-shadow: 0 0 24px rgba(255,255,255,.65), 0 2px 6px #000; animation: linein 2.4s ease-out both; }
.cine-line.huge { font-size: clamp(2.2rem, 8vw, 5.4rem); font-weight: 700; letter-spacing: .08em; animation: lineslam .55s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes linein { 0% { opacity: 0; transform: translateY(14px); letter-spacing: .3em; } 18% { opacity: 1; transform: none; letter-spacing: .03em; } 85% { opacity: 1; } 100% { opacity: .15; } }
@keyframes lineslam { from { opacity: 0; transform: scale(2.6); } }
.cine-stage { display: grid; justify-items: center; gap: min(2.2vh, 18px); width: 100%; padding: 12px; }
.cine-card3d { width: min(42vh, 72vw, 340px); aspect-ratio: 5 / 7; perspective: 1100px; will-change: transform; }
.cine-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.cine-face { position: absolute; inset: 0; }
.cine-face.front { transform: rotateY(180deg); backface-visibility: hidden; visibility: hidden; }
.cine-face.back .card-back { backface-visibility: visible; box-shadow: inset 0 0 0 3cqw #ffcf4d, inset 0 0 0 4cqw #6b4a00, 0 0 70px rgba(255, 220, 130, .9); }
.cine-stage.boomed .cine-face.front { visibility: visible; }
.cine-stage.boomed .cine-face.back { backface-visibility: hidden; }
.cine-stage.boomed .cine-face.back .card-back { backface-visibility: hidden; }
.cine-stage.static .cine-face.front { position: static; transform: none; }
.cine-stage .card .card-in { box-shadow: inset 0 0 0 2.5cqw var(--rc), inset 0 0 0 3.2cqw rgba(0,0,0,.35), 0 0 70px color-mix(in srgb, var(--rc) 80%, transparent); }
.cine-title { display: grid; justify-items: center; gap: 5px; text-align: center; opacity: 0; min-height: 110px; padding-bottom: 66px; }
.cine-stage:not(.boomed) .cine-title { display: none; }
.cine-title.in { opacity: 1; }
.cine-title.in .ct-rarity { animation: slam .6s .35s cubic-bezier(.2, 1.5, .4, 1) both; }
.cine-title.in .ct-name { animation: slam .6s .62s cubic-bezier(.2, 1.3, .4, 1) both; }
.cine-title.in .ct-sub { animation: fadeup .6s 1s both; }
.cine-title.in .ct-tags { animation: fadeup .6s 1.25s both; }
@keyframes slam { from { opacity: 0; transform: scale(2.6); filter: blur(5px); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } }
.ct-rarity { font-size: clamp(1.1rem, 3.2vw, 1.8rem); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 24px var(--rc); }
.ct-name { font-size: clamp(1.7rem, 5.4vw, 3.1rem); font-weight: 700; line-height: 1.05; text-shadow: 0 0 26px rgba(255,255,255,.55), 0 3px 8px #000; }
.ct-sub { font-style: italic; color: #ffe9a8; font-size: clamp(.95rem, 2.4vw, 1.25rem); text-shadow: 0 2px 5px #000; }
.ct-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
@media (max-height: 640px) { .cine-card3d { width: min(34vh, 60vw); } .cine-title { padding-bottom: 60px; min-height: 80px; } }

.cine-center { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 18px; width: 100%; }
.god-text { font-size: clamp(2.2rem, 9vw, 6rem); font-weight: 700; letter-spacing: .04em; background: linear-gradient(180deg, #fff, #ffe58a 45%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255, 190, 60, .95)); opacity: 0; }
.god-sub { font-size: clamp(1rem, 3vw, 1.6rem); opacity: 0; text-shadow: 0 2px 6px #000; }
.cine-center.in .god-text { opacity: 1; animation: slam .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.cine-center.in .god-sub { opacity: 1; animation: fadeup .6s .6s both; }
.lvl-small { font-size: clamp(1.3rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: .35em; color: #ffe58a; opacity: 0; text-shadow: 0 0 22px rgba(255, 220, 110, .9); }
.lvl-num { font-size: clamp(6rem, 26vw, 15rem); font-weight: 700; line-height: 1; opacity: 0; background: linear-gradient(180deg, #fff, #8bd3ff 55%, #6d3dff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(139, 211, 255, .9)); }
.lvl-rewards { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; opacity: 0; max-width: 700px; }
.lvl-rewards.static { opacity: 1; }
.cine-center.in .lvl-small { opacity: 1; animation: fadeup .4s both; }
.cine-center.in .lvl-num { opacity: 1; animation: slam .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.cine-center.in .lvl-rewards { opacity: 1; animation: fadeup .5s .45s both; }
.rw { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px; border-radius: 99px; background: rgba(255,255,255,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font-weight: 600; white-space: nowrap; }
.rw.gold { background: rgba(255, 207, 77, .22); color: #ffe58a; box-shadow: inset 0 0 0 1px rgba(255, 207, 77, .55); }
.pres { position: relative; min-height: 60vh; place-items: center; }
.pres-count { position: absolute; font-size: clamp(7rem, 30vw, 17rem); font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 44px rgba(255, 220, 130, .85); }
.pres-final { display: grid; justify-items: center; gap: 10px; opacity: 0; padding-bottom: 60px; }
.cine-center.in .pres-final { opacity: 1; }
.pres-emblem { font-size: clamp(6rem, 22vw, 11rem); line-height: 1; filter: drop-shadow(0 0 44px rgba(255, 220, 130, 1)); }
.cine-center.in .pres-emblem { animation: emblem 1.1s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes emblem { from { transform: scale(5) rotate(-200deg); opacity: 0; } }
.pres-kicker { font-size: clamp(1.1rem, 3.5vw, 2rem); letter-spacing: .35em; font-weight: 700; color: #ffe58a; text-shadow: 0 0 20px rgba(255, 220, 110, .9); }
.pres-rank { font-size: clamp(2.8rem, 11vw, 7rem); font-weight: 700; line-height: 1; background: linear-gradient(180deg, #fff, #ffe58a 50%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255, 190, 60, .9)); }
.cine-center.in .pres-kicker { animation: fadeup .5s .55s both; }
.cine-center.in .pres-rank { animation: slam .7s .8s cubic-bezier(.2, 1.5, .4, 1) both; }
.pres-gain { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cine-center.in .pres-gain { animation: fadeup .6s 1.4s both; }
.jack { gap: 4px; padding-bottom: 60px; }
.jack > * { opacity: 0; }
.cine-center.in.jack > * { opacity: 1; }
.jack-icon { font-size: clamp(4.5rem, 16vw, 9rem); line-height: 1; filter: drop-shadow(0 0 34px rgba(255, 210, 90, 1)); }
.cine-center.in .jack-icon { animation: emblem .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.jack-title { font-size: clamp(2.6rem, 11vw, 7rem); font-weight: 700; line-height: 1.02; background: linear-gradient(180deg, #fff, #ffe58a 45%, #ff9f1c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(255, 170, 40, .95)); }
.cine-center.in .jack-title { animation: slam .6s .2s cubic-bezier(.2, 1.5, .4, 1) both; }
.jack-num { font-size: clamp(2rem, 8vw, 4.8rem); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(255, 220, 110, .9), 0 3px 6px #000; }
.jack-sub { font-size: clamp(1rem, 2.6vw, 1.4rem); text-shadow: 0 2px 6px #000; }
.forge-run { gap: 22px; }
.forge-card { width: min(38vh, 62vw, 280px); }
.forge-word { font-size: clamp(1.2rem, 3.4vw, 2rem); font-weight: 700; color: #ffd8a8; text-shadow: 0 0 22px #ff7a2e; }

/* ---------- Karten-Detail: Sterne ---------- */
.starbox { display: grid; gap: 8px; }
.starbox:empty { display: none; }
.starline { display: inline-flex; gap: 2px; font-size: 1.35rem; line-height: 1; }
.starline i { font-style: normal; color: rgba(255,255,255,.18); }
.starline i.on { color: #ffd84d; text-shadow: 0 0 10px rgba(255, 200, 60, .85); }
.starline i.on.red { color: #ff5a4d; text-shadow: 0 0 10px rgba(255, 70, 60, .85); }

/* ---------- Abenteuer ---------- */
.vault { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, rgba(120, 76, 10, .55), rgba(40, 24, 70, .88)); border-color: rgba(255, 207, 77, .4); }
.vault-chest { font-size: clamp(4.4rem, 12vw, 7rem); line-height: 1; filter: drop-shadow(0 8px 22px rgba(255, 190, 60, .6)); animation: chestfloat 3s ease-in-out infinite; }
.vault-chest.full { animation: chestfull 1s ease-in-out infinite; filter: drop-shadow(0 0 34px rgba(255, 210, 90, 1)); }
.vault-chest.pop { animation: chestpop .6s; }
@keyframes chestfloat { 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes chestfull { 25% { transform: rotate(-5deg) scale(1.05); } 75% { transform: rotate(5deg) scale(1.05); } }
@keyframes chestpop { 40% { transform: scale(1.3); } }
.vault-body { flex: 1; min-width: 240px; }
.vault-mini { display: flex; gap: 14px; align-items: center; text-decoration: none; padding: 12px 16px; background: linear-gradient(135deg, rgba(120, 76, 10, .45), rgba(40, 24, 70, .85)); }
.vault-mini > .emo { font-size: 2.4rem; }
.vault-mini.full { box-shadow: 0 0 22px rgba(255, 207, 77, .5), inset 0 0 0 1px var(--gold); }
.exp-run { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--fill); flex-wrap: wrap; }
.exp-run.ready { box-shadow: inset 0 0 0 2px var(--good), 0 0 18px rgba(74, 222, 128, .35); }
.exp-ico { font-size: 2.4rem; }
.exp-mid { flex: 1; min-width: 180px; display: grid; gap: 6px; }
.exp-mid .minis .card { width: 44px; pointer-events: none; }
.exp-end { display: grid; gap: 5px; justify-items: end; }
.exp-kind { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); transition: transform .15s; }
.exp-kind:not(.locked):hover { transform: translateY(-4px); }
.exp-kind.locked { filter: grayscale(.85) brightness(.75); }
.exp-big { font-size: 2.8rem; }
.exp-kind .btn { width: 100%; }
.tp-item { cursor: pointer; border-radius: 10px; transition: transform .1s; }
.tp-item.sel { outline: 3px solid var(--gold); outline-offset: 2px; transform: scale(.96); }

/* ---------- Spielhalle ---------- */
.jackpot-bar { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 12px 18px; border-radius: var(--radius); background: linear-gradient(90deg, #4a0d6e, #b1138d, #ff9f1c, #b1138d, #4a0d6e); background-size: 300% 100%; animation: slide 7s linear infinite; box-shadow: 0 0 34px rgba(255, 95, 200, .4), inset 0 0 0 2px rgba(255, 230, 140, .55); }
.jackpot-bar .jp-l { font-weight: 700; letter-spacing: .2em; }
.jackpot-bar b { font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff5c4; text-shadow: 0 0 18px #ffcf4d, 0 2px 3px #4a0d6e; }
.jackpot-bar .emo { font-size: 1.5rem; }
.casino-tabs { justify-content: center; }
.slots-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.slots-panel { display: grid; gap: 14px; }
.slot-machine { position: relative; padding: 18px; border-radius: 24px; background: linear-gradient(180deg, #7a1fa0, #2a0b52); box-shadow: inset 0 0 0 4px #ffcf4d, inset 0 0 0 8px #6b4a00, 0 0 36px rgba(255, 95, 200, .35); transition: box-shadow .3s; }
.slot-machine.won { animation: smwon .9s; }
.slot-machine.tense { animation: smtense .16s linear infinite; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #ff4fd8, 0 0 60px #ff4fd8; }
@keyframes smwon { 30% { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #ffcf4d, 0 0 90px 16px #ffcf4d; } }
@keyframes smtense { 50% { transform: translate(1.5px, -1px); } }
.reels { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; border-radius: 14px; background: #120626; box-shadow: inset 0 6px 20px #000; }
.reel { height: 92px; overflow: hidden; border-radius: 10px; background: linear-gradient(180deg, #d9d2f5, #fff 48%, #fff 52%, #d9d2f5); }
.strip { will-change: transform; }
.sym { height: 92px; display: grid; place-items: center; font-size: 58px; }
.payline { position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, #ff4f6d 15%, #ff4f6d 85%, transparent); box-shadow: 0 0 10px #ff4f6d; pointer-events: none; opacity: .75; }
.sm-msg { margin-top: 10px; min-height: 1.5em; text-align: center; font-weight: 700; font-size: 1.15rem; color: #e9dcff; }
.sm-msg.win { color: #ffe58a; text-shadow: 0 0 14px rgba(255, 220, 110, .8); }
.sm-msg.win.big { font-size: 1.5rem; animation: slam .4s cubic-bezier(.2, 1.5, .4, 1); }
.betbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.betbar .input { width: 120px; text-align: center; font-weight: 700; }
.pay { width: 100%; border-collapse: collapse; }
.pay td { padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.hilo-intro { font-size: 4.8rem; line-height: 1; animation: chestfloat 3s ease-in-out infinite; }
.hilo-table { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; align-items: center; }
.hilo-table.bust { animation: bust .5s; }
@keyframes bust { 20%, 60% { transform: translateX(-8px); box-shadow: 0 0 36px var(--bad); } 40%, 80% { transform: translateX(8px); } }
.hilo-slot { position: relative; width: 170px; height: 238px; }
.hilo-right { display: grid; gap: 14px; flex: 1; min-width: 270px; max-width: 480px; }
.hilo-right .row > div { min-width: 76px; }
.hilo-btns .btn { flex: 1; flex-direction: column; gap: 0; }
.hilo-btns .btn small { font-size: .8rem; opacity: .85; }
.hilo-msg { min-height: 1.4em; font-weight: 600; }
.rank-card { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(160deg, #3a2a8a, #120c34); box-shadow: inset 0 0 0 5px #ffcf4d, 0 12px 30px rgba(0,0,0,.6); }
.rank-card.r1 { background: linear-gradient(160deg, #2f6d3f, #0c2a17); }
.rank-card.r2 { background: linear-gradient(160deg, #2c58a8, #0b1a44); }
.rank-card.r3 { background: linear-gradient(160deg, #7a33c9, #240c4f); }
.rank-card.r4 { background: linear-gradient(160deg, #c47d10, #4a2600); box-shadow: inset 0 0 0 5px #fff, 0 0 34px rgba(255, 190, 60, .75); }
.rank-card.deal { animation: rankdeal .4s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes rankdeal { from { transform: translateY(-40px) rotate(-8deg) scale(.85); opacity: 0; } }
.rc-e { font-size: 88px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); }
.rc-n { position: absolute; top: 10px; left: 16px; font-size: 1.8rem; font-weight: 700; }
.rc-n.btm { top: auto; left: auto; bottom: 10px; right: 16px; transform: rotate(180deg); }
.hilo-next { position: absolute; inset: 0; z-index: 2; animation: nextcard .7s cubic-bezier(.3, .7, .3, 1) both; transform-style: preserve-3d; }
@keyframes nextcard { from { transform: translateX(150px) rotateY(120deg) scale(.8); opacity: 0; } }
.crate-tile { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); transition: transform .15s; }
.crate-tile:not(.locked):hover { transform: translateY(-5px) scale(1.01); }
.crate-tile.locked { filter: grayscale(.85) brightness(.7); }
.crate-tile.t-gold { box-shadow: inset 0 0 0 2px rgba(255, 207, 77, .55), 0 0 24px rgba(255, 207, 77, .22); }
.crate-tile.t-kosmos { box-shadow: inset 0 0 0 2px rgba(125, 249, 255, .6), 0 0 30px rgba(125, 249, 255, .3); }
.crate-ico { font-size: 4.2rem; line-height: 1; animation: chestfloat 3s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.crate-ico.big { font-size: 5rem; }
.crate-run { z-index: 110; }
.roll-window { position: relative; width: min(100%, 1000px); overflow: hidden; padding: 12px 0; border-radius: 18px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), inset 0 0 50px #000; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.roll-mark { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: #ffcf4d; box-shadow: 0 0 18px 4px #ffcf4d; }
.roll-strip { display: flex; gap: 8px; width: max-content; will-change: transform; }
.roll-cell { flex: none; width: 128px; height: 128px; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 -5px 0 var(--tc, #888); --tc: #8a93a6; }
.roll-cell .emo { font-size: 2.7rem; }
.roll-cell b { font-size: .92rem; }
.roll-cell.hit { animation: rollhit .8s ease-out both; box-shadow: inset 0 0 0 3px #fff, 0 0 34px var(--tc); }
@keyframes rollhit { 30% { transform: scale(1.16); } }
.tier-1 { --tc: #8a93a6; } .tier-2 { --tc: #5bd66b; } .tier-3 { --tc: #4f9dff; } .tier-4 { --tc: #b45cff; } .tier-5 { --tc: #ffb020; } .tier-6 { --tc: #ff4fd8; }
.pill.tier-3 { box-shadow: inset 0 0 0 1px #4f9dff; } .pill.tier-4 { box-shadow: inset 0 0 0 1px #b45cff; } .pill.tier-5 { box-shadow: inset 0 0 0 1px #ffb020; color: #ffd27a; } .pill.tier-6 { box-shadow: inset 0 0 0 1px #ff4fd8; color: #ff9be8; }

/* ---------- Aufstieg ---------- */
.ascend-head { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.level-ring { position: relative; width: 160px; height: 160px; flex: none; }
.level-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lr-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 14; }
.lr-fg { fill: none; stroke: url(#none) #8bd3ff; stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 7px #8bd3ff); transition: stroke-dashoffset .8s; }
.lr-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lr-in b { font-size: 3rem; line-height: 1; font-weight: 700; }
.road { display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 12px; scrollbar-width: thin; position: relative; }
.road-step { flex: none; width: 128px; display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 14px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--border); }
.road-step > b { font-size: 1.25rem; }
.road-step.done { opacity: .5; }
.road-step.next { box-shadow: inset 0 0 0 2px var(--gold), 0 0 16px rgba(255, 207, 77, .45); }
.road-step.mile { background: rgba(139, 92, 255, .2); }
.road-step.mega { background: linear-gradient(160deg, rgba(255, 207, 77, .3), rgba(255, 95, 200, .2)); box-shadow: inset 0 0 0 2px #ffcf4d; }
.road-r { display: grid; gap: 4px; }
.road-r .rw { font-size: .74rem; padding: 2px 8px; }
.prestige-panel.ready { border-color: var(--gold); box-shadow: var(--shadow), 0 0 30px rgba(255, 207, 77, .3); }
.upg { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--fill); align-content: space-between; }

@media (max-width: 900px) { .slots-layout { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}

/* =====================================================================
   Endlevel-Effekte
   ===================================================================== */
.fx-flash { position: fixed; inset: 0; z-index: 515; pointer-events: none; }

/* Seltenheits-Leiter im Kino */
.cine-rung { position: absolute; left: 0; right: 0; top: 4%; z-index: 2; text-align: center; pointer-events: none; }
.cine-rung span { display: inline-grid; color: var(--c); font-size: clamp(2rem, 7.5vw, 4.8rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 18px var(--c), 0 0 54px var(--c), 0 4px 8px #000; animation: rungslam .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.cine-rung span.final { font-size: clamp(3rem, 12vw, 8rem); animation: rungslam .6s cubic-bezier(.2, 1.7, .4, 1) both, chroma .5s steps(2) infinite; }
.cine-rung small { font-size: clamp(.8rem, 2vw, 1.15rem); letter-spacing: .1em; text-transform: none; color: #fff; opacity: .8; text-shadow: 0 2px 4px #000; }
@keyframes rungslam { from { opacity: 0; transform: scale(3.4) rotate(-5deg); filter: blur(7px); } }
@keyframes chroma { 0% { text-shadow: -4px 0 #ff0044, 4px 0 #00ffe1, 0 0 44px var(--c); } 100% { text-shadow: 4px 0 #ff0044, -4px 0 #00ffe1, 0 0 54px var(--c); } }
.cine-climb { position: absolute; left: 12px; top: 14px; z-index: 2; display: grid; gap: 4px; justify-items: start; pointer-events: none; }
.cine-climb b { padding: 2px 10px; border-radius: 99px; font-size: .82rem; color: var(--c); background: rgba(0,0,0,.5); box-shadow: inset 0 0 0 1px var(--c), 0 0 12px var(--c); animation: fadeup .3s both; }

/* Enthüllung: je höher die Stufe, desto auffälliger */
.ct-banner { position: absolute; left: -10vw; right: -10vw; height: clamp(90px, 22vh, 190px); margin-top: -8px; z-index: -1; transform: skewY(-3deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, transparent), transparent); opacity: 0; }
.cine-title { position: relative; }
.cine-title.in .ct-banner { animation: bannerin .8s .3s ease-out both; }
@keyframes bannerin { from { opacity: 0; transform: skewY(-3deg) scaleX(.1); } to { opacity: .9; transform: skewY(-3deg) scaleX(1); } }
.cine-stage.boomed .cine-card3d { filter: drop-shadow(0 0 26px var(--rc)); }
.t-mythic.boomed .cine-card3d, .t-prisma.boomed .cine-card3d { filter: drop-shadow(0 0 44px var(--rc)) drop-shadow(0 0 90px var(--rc)); }
.t-secret.boomed .cine-card3d, .t-cosmic.boomed .cine-card3d { animation: cardglow 1.4s ease-in-out infinite; }
@keyframes cardglow { 50% { filter: drop-shadow(-6px 0 #ff0044) drop-shadow(6px 0 #00ffe1) drop-shadow(0 0 80px var(--rc)); } 0%, 100% { filter: drop-shadow(0 0 50px var(--rc)) drop-shadow(0 0 110px var(--rc)); } }
.t-epic .ct-rarity { font-size: clamp(1.1rem, 3vw, 1.6rem); }
.t-legendary .ct-rarity, .t-gold .ct-rarity { font-size: clamp(1.4rem, 4.4vw, 2.5rem); }
.t-prisma .ct-rarity, .t-mythic .ct-rarity { font-size: clamp(1.8rem, 5.6vw, 3.3rem); }
.t-secret .ct-rarity { font-size: clamp(2.2rem, 7vw, 4.2rem); animation-name: slam; }
.t-cosmic .ct-rarity { font-size: clamp(2.6rem, 9vw, 5.4rem); background: linear-gradient(90deg, #7df9ff, #ff7ae0, #fff3a8, #7df9ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 24px #7df9ff); }
.cine-title.in.x { opacity: 1; }
.t-cosmic .cine-title.in .ct-rarity { animation: slam .6s .35s cubic-bezier(.2, 1.5, .4, 1) both, slide 3s linear infinite; }
.cine-stage.boomed .cine-title { min-height: 0; }

/* Gewinn-Stufen */
.jack-title.lv1 { color: transparent; }
.cine-center.in .jack-title { animation: slam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.jack.n0 .jack-title { font-size: clamp(2rem, 7vw, 4.2rem); }
.jack.n1 .jack-title { font-size: clamp(2.2rem, 8vw, 4.8rem); }
.jack.n2 .jack-title { font-size: clamp(2.4rem, 9vw, 5.6rem); }
.jack.n3 .jack-title { font-size: clamp(2.6rem, 11vw, 6.6rem); filter: drop-shadow(-3px 0 #ff0044) drop-shadow(3px 0 #00ffe1) drop-shadow(0 0 30px #ffb020); }
.jack.n4 .jack-title { font-size: clamp(3rem, 14vw, 8.6rem); filter: drop-shadow(-4px 0 #ff0044) drop-shadow(4px 0 #00ffe1) drop-shadow(0 0 44px #ff7ae0); }
.jack-num { transition: transform .2s; }
.jack-num.done { animation: slam .5s cubic-bezier(.2, 1.7, .4, 1) both; color: #fff3a8; }
.lvl-charge { width: min(70vw, 460px); height: 14px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; box-shadow: 0 0 22px rgba(139, 211, 255, .5); }
.lvl-charge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8bd3ff, #fff, #ffe58a); }
.cine-center.in .lvl-charge { display: none; }
.forge-hammer { position: absolute; font-size: clamp(5rem, 16vw, 9rem); line-height: 1; z-index: 3; filter: drop-shadow(0 8px 12px #000); }
.forge-run { position: relative; }
.forge-word.ok { font-size: clamp(2rem, 7vw, 4rem); color: #fff3a8; animation: slam .5s both; }
.forge-word.bad { font-size: clamp(2.4rem, 9vw, 5rem); color: #ff4f2e; text-shadow: 0 0 34px #ff2d1f; animation: slam .5s both; }
.star-run { position: relative; gap: 10px; }
.star-big { position: absolute; top: 24%; font-size: clamp(5rem, 15vw, 9rem); line-height: 1; z-index: 3; filter: drop-shadow(0 0 40px #ffd84d); }
.cine-center.in .star-big { display: none; }
.star-card { width: min(40vh, 62vw, 290px); }
.star-label { font-size: clamp(2rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: .1em; color: #ffe58a; opacity: 0; text-shadow: 0 0 30px #ffb020; }
.cine-center.in .star-label { opacity: 1; animation: slam .55s .15s cubic-bezier(.2, 1.6, .4, 1) both; }

/* Pack */
.pack.charging { animation: packtrem .1s linear infinite; }
.pack.charging.heat-0 { box-shadow: 0 0 60px 8px var(--pc), inset 0 0 0 4px #fff; filter: brightness(1.2); }
.pack.charging.heat-1 { box-shadow: 0 0 90px 16px #b45cff, inset 0 0 0 4px #fff; filter: brightness(1.3); }
.pack.charging.heat-2 { box-shadow: 0 0 130px 30px #ffb020, inset 0 0 0 4px #fff; filter: brightness(1.45); animation-duration: .07s; }
.pack.charging.heat-3 { box-shadow: 0 0 180px 50px #ff7ae0, inset 0 0 0 5px #fff; filter: brightness(1.7) saturate(1.3); animation-duration: .05s; }

/* Slot-Maschine */
.slot-machine { padding: 22px 34px 16px 18px; }
.sm-lights { height: 14px; margin: 0 2px 8px; border-radius: 9px; background-image: radial-gradient(circle at center, #ffe58a 0 4px, rgba(255, 229, 138, .15) 5px, transparent 7px); background-size: 22px 14px; animation: bulbs 1.1s steps(4) infinite; filter: drop-shadow(0 0 6px #ffcf4d); }
.sm-lights.bottom { margin: 8px 2px 0; animation-direction: reverse; }
@keyframes bulbs { to { background-position: 88px 0; } }
.slot-machine.spinning .sm-lights { animation-duration: .3s; }
.slot-machine.tense .sm-lights { animation-duration: .12s; background-image: radial-gradient(circle at center, #ff7ae0 0 4px, rgba(255, 122, 224, .15) 5px, transparent 7px); filter: drop-shadow(0 0 9px #ff4fd8); }
.slot-machine.crownhunt .sm-lights { animation-duration: .07s; background-image: radial-gradient(circle at center, #ff2d55 0 5px, rgba(255, 45, 85, .2) 6px, transparent 8px); filter: drop-shadow(0 0 12px #ff2d55); }
.slot-machine.crownhunt { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 8px #ff2d55, 0 0 110px 26px #ff2d55; }
.slot-machine.won.w1 .sm-lights { animation-duration: .25s; }
.slot-machine.won.w2 .sm-lights, .slot-machine.won.w3 .sm-lights { animation-duration: .1s; filter: drop-shadow(0 0 14px #fff) brightness(1.5); }
.slot-machine.won.w3 { animation: smwon .5s 3; }
.slot-machine.lost { filter: saturate(.75) brightness(.92); }
.reel { position: relative; transition: box-shadow .15s; }
.reel.blur .strip { filter: blur(3.5px) brightness(1.08); }
.reel.hit { box-shadow: 0 0 0 3px #fff, 0 0 26px 6px #ffe58a; }
.reel.winner { box-shadow: 0 0 0 4px #ffe58a, 0 0 34px 10px #ffcf4d; animation: winpulse .45s ease-in-out infinite alternate; }
.reel.winner .sym:last-child { animation: symbounce .45s ease-in-out infinite alternate; }
@keyframes winpulse { to { box-shadow: 0 0 0 4px #fff, 0 0 54px 18px #ffcf4d; } }
@keyframes symbounce { to { transform: scale(1.22) rotate(4deg); } }
.sm-lever { position: absolute; right: 8px; top: 34px; width: 16px; height: 96px; border-radius: 8px; background: linear-gradient(90deg, #666, #ccc, #666); transform-origin: 50% 100%; }
.sm-lever i { position: absolute; left: -7px; top: -14px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb3b3, #ff2d55 55%, #7a0f22); box-shadow: 0 3px 8px #000; }
.sm-lever.pull { animation: leverpull .55s cubic-bezier(.3, .8, .3, 1.1); }
@keyframes leverpull { 35% { transform: scaleY(.1) translateY(0); } }
.sm-msg.bad { color: #ff6b81; text-shadow: 0 0 16px #ff2d55; }
body.sm-dim::after { content: ""; position: fixed; inset: 0; z-index: 25; background: radial-gradient(circle at 36% 42%, transparent 18%, rgba(0,0,0,.9) 58%); pointer-events: none; animation: cinein .5s; }
body.sm-dim .slot-machine { z-index: 26; }

/* Hoch oder Tief */
.hilo-table { box-shadow: var(--shadow), 0 0 calc(var(--heat, 0) * 70px) calc(var(--heat, 0) * 16px) rgba(255, 110, 40, calc(var(--heat, 0) * .75)); border-color: color-mix(in srgb, #ff7a2e calc(var(--heat, 0) * 100%), var(--border)); }
.hilo-table.heat-5 { animation: smtense .2s linear infinite; }
.hilo-next { perspective: 800px; animation: none; transform-style: preserve-3d; }
.hilo-next .hilo-back, .hilo-next .hilo-face { position: absolute; inset: 0; backface-visibility: hidden; }
.hilo-next .hilo-back { display: grid; place-items: center; border-radius: 18px; font-size: 70px; background: radial-gradient(circle, #3b2a8a, #120c34 70%); box-shadow: inset 0 0 0 5px #ffcf4d, 0 0 40px rgba(255, 207, 77, .75); animation: hiloback var(--roll, 1500ms) linear forwards, packtrem .09s linear infinite; }
.hilo-next .hilo-face { animation: hiloface var(--roll, 1500ms) linear forwards; }
@keyframes hiloback { 0% { transform: translateX(150px) rotateY(0) scale(.8); opacity: 0; } 15% { transform: none; opacity: 1; } 88% { transform: scale(1.1) rotateY(0); } 100% { transform: scale(1.14) rotateY(-180deg); } }
@keyframes hiloface { 0%, 88% { transform: scale(1.1) rotateY(180deg); opacity: 0; } 89% { opacity: 1; } 100% { transform: scale(1.14) rotateY(0); opacity: 1; } }
.crate-ico.rattle { animation: packtrem .08s linear infinite; filter: drop-shadow(0 0 30px #ffe58a) brightness(1.25); }

/* Rad */
.wheel.spinning .disc { box-shadow: 0 0 60px 12px rgba(255, 207, 77, .75), inset 0 0 20px rgba(0,0,0,.5); }
.wheel.spinning .hub { animation: hubspin .3s linear infinite; }
@keyframes hubspin { 50% { transform: scale(1.12); filter: brightness(1.4); } }
/* Schwache Geräte: keine teuren Filter im Kino */
.cine.low .cine-card3d, .cine.low .jack-title, .cine.low .jack-icon, .cine.low .pres-emblem, .cine.low .pres-rank, .cine.low .god-text, .cine.low .lvl-num, .cine.low .star-big { filter: none !important; animation-name: none; }

/* ---------- Mehr Packs ---------- */
.group-h { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; }
.el-pick { justify-content: center; }
.el-pick .chip { padding: 4px 7px; }
.overlay.lots { place-items: start center; }
.slot.lots { width: clamp(72px, 8.4vw, 112px); }
.packcard .pack { container-type: normal; }

/* ---------- Münzwurf ---------- */
.flip-stage { perspective: 800px; padding: 18px 0 6px; }
.coin3d { position: relative; width: 150px; height: 150px; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; font-size: 76px; backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4d 45%, #c98a12); box-shadow: inset 0 0 0 7px #a86e08, inset 0 0 0 11px #ffe58a, 0 10px 30px rgba(0,0,0,.5); }
.coin-face.back { transform: rotateX(180deg); }
.crate-tile.t-silber { box-shadow: inset 0 0 0 2px rgba(200, 215, 235, .55), 0 0 18px rgba(200, 215, 235, .2); }
.crate-tile.t-diamant { box-shadow: inset 0 0 0 2px #fff, 0 0 40px rgba(180, 235, 255, .55); }
.p-badge { position: absolute; right: 8px; top: 22%; font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.7)); }
@media (max-width: 760px) {
  .sets { display: flex; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .settile { flex: none; width: 140px; }
}