/* ===== Szene: Pack, Karten, Holo ===== */
#ueber{position:fixed;inset:0;z-index:20;background:radial-gradient(ellipse at 50% 38%,#2c2a35 0,#16151a 70%);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);touch-action:none;overflow:hidden}
.ue-kopf{flex:none;display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
.ue-kopf button{width:38px;height:38px;border-radius:50%;background:#2a2830;border:1px solid #3a3742;color:var(--mut);font:16px var(--mono)}
.ue-kopf .z{font:12px var(--mono);color:var(--mut);letter-spacing:.08em}
.ue-buehne{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
.ue-hinweis{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);text-align:center;font:12px var(--mono);color:var(--mut);letter-spacing:.04em;pointer-events:none;padding:0 24px}
.ue-hinweis b{color:var(--akz);font-weight:500}

/* Pack */
.ps-pack{position:relative;aspect-ratio:var(--ar);width:min(66vw,calc((100dvh - 250px)*var(--ar)),300px);perspective:900px;will-change:transform;animation:packein .7s cubic-bezier(.2,.9,.25,1.05) both}
@keyframes packein{from{transform:translateY(60vh) rotate(8deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.ps-schatten{position:absolute;left:8%;right:8%;bottom:-5%;height:7%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(6px)}
.ps-pk{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ps-flaeche{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.ps-flaeche.rest{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.ps-innen{position:absolute;left:7%;right:7%;top:9%;height:72%;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ps-innen .kb{position:absolute;inset:0;background-size:100% 100%;border-radius:4%;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.ps-innen .kb:nth-child(1){transform:translate(3px,3px);filter:brightness(.6)}
.ps-innen .kb:nth-child(2){transform:translate(-2px,1px);filter:brightness(.8)}
.gl{position:absolute;inset:0;pointer-events:none}
.gl1{background:radial-gradient(circle at calc(var(--mx)*1%) calc(var(--my)*1%),rgba(255,255,255,.75),rgba(255,255,255,0) 42%);mix-blend-mode:overlay;opacity:calc(.25 + var(--fxo)*.75)}
.gl2{background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.7) 49%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-position:calc(var(--mx)*1%) 0;mix-blend-mode:overlay;opacity:calc(.2 + var(--fxo)*.8)}
.gl3{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='500'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  1.6 0 0 0 -.3'/></filter><rect width='300' height='500' filter='url(%23f)'/></svg>") calc(var(--mx)*-.6px) calc(var(--my)*-.6px)/130% 130%;mix-blend-mode:overlay;opacity:.5}
.ps-tear{position:absolute;left:3%;right:3%;pointer-events:none;height:0;border-top:2px dashed rgba(255,255,255,.65);animation:atmen 1.6s ease-in-out infinite}
.ps-tear::before,.ps-tear::after{content:"››";position:absolute;top:-17px;font:600 18px var(--mono);color:rgba(255,255,255,.9);text-shadow:0 1px 4px #000}
.ps-tear::before{left:2px}.ps-tear::after{right:2px;transform:scaleX(-1)}
@keyframes atmen{50%{opacity:.35}}

/* Karte */
.kt{position:absolute;width:var(--kw);aspect-ratio:var(--ar);perspective:900px;will-change:transform;touch-action:none}
.kt.sanft{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s}
.kt-dreh{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.kt-vorn,.kt-hinten{position:absolute;inset:0;border-radius:4.2%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#2e2c35;box-shadow:0 12px 28px rgba(0,0,0,.6)}
.kt-hinten{transform:rotateY(180deg)}
.kt img{width:100%;height:100%;object-fit:cover;display:block}
.kt-vorn .name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;font:600 14px var(--sora);color:var(--mut)}
.kt-glanz{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at calc(var(--mx)*1%) calc(var(--my)*1%),rgba(255,255,255,.55),rgba(255,255,255,0) 50%);mix-blend-mode:soft-light;opacity:calc(.2 + var(--fxo)*.8)}
.fx{position:absolute;pointer-events:none;overflow:hidden;opacity:var(--fxo)}
.fx::after{content:"";position:absolute;inset:0}
/* Pokemon Holo: Regenbogen + Glitzer im Bildfenster */
.f-holo{background:linear-gradient(115deg,#ff5fd2 0%,#ffe36b 14%,#62ffb0 28%,#5fc8ff 42%,#a46bff 56%,#ff5fd2 70%,#ffe36b 84%,#62ffb0 100%);background-size:320% 320%;background-position:calc(var(--mx)*1%) calc(var(--my)*1%);mix-blend-mode:color-dodge;filter:brightness(.62) contrast(1.1);opacity:calc(var(--fxo)*.8)}
.f-holo::after{background:radial-gradient(circle at 20% 30%,#fff 0 1.2px,transparent 2.4px) 0 0/15px 15px,radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 2px) 6px 8px/19px 19px;background-position:calc(var(--mx)*.4px) calc(var(--my)*.4px),calc(var(--mx)*-.3px) calc(var(--my)*.3px);mix-blend-mode:overlay;opacity:.9}
/* Super Rare: silbernes Raster mit Lichtbahn */
.f-sr{background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 70%);background-size:260% 100%;background-position:calc(var(--mx)*1%) 0;mix-blend-mode:overlay}
.f-sr::after{background:repeating-linear-gradient(60deg,rgba(255,255,255,0) 0 5px,rgba(255,255,255,.55) 5px 6px),repeating-linear-gradient(-60deg,rgba(255,255,255,0) 0 5px,rgba(255,255,255,.45) 5px 6px);mix-blend-mode:soft-light;opacity:.8}
/* Ultra Rare: Gold + Regenbogen im Bild, goldener Name */
.f-ur{background:linear-gradient(120deg,#ffd36a 0%,#fff3b8 18%,#ff9ad5 34%,#8ee6ff 50%,#ffd36a 66%,#fff3b8 82%,#ffd36a 100%);background-size:300% 300%;background-position:calc(var(--mx)*1%) calc(var(--my)*1%);mix-blend-mode:color-dodge;filter:brightness(.6) contrast(1.15);opacity:calc(var(--fxo)*.85)}
.f-ur::after{background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 62%);background-size:260% 100%;background-position:calc(var(--mx)*1%) 0;mix-blend-mode:overlay}
.f-gold{background:linear-gradient(100deg,#b07a1c,#ffe9a0 30%,#c58a22 50%,#fff0b0 70%,#b07a1c);background-size:300% 100%;background-position:calc(var(--mx)*1%) 0;mix-blend-mode:color;opacity:calc(.5 + var(--fxo)*.5)}
.f-silber{background:linear-gradient(100deg,#888,#fff 30%,#999 50%,#fff 70%,#888);background-size:300% 100%;background-position:calc(var(--mx)*1%) 0;mix-blend-mode:overlay;opacity:calc(.4 + var(--fxo)*.6)}
/* Secret Rare: Prisma ueber die ganze Karte */
.f-secret{background:repeating-linear-gradient(115deg,#ff4fd8 0%,#4fe0ff 8%,#ffe44f 16%,#6bff9a 24%,#ff4fd8 32%);background-size:220% 220%;background-position:calc(var(--mx)*1%) calc(var(--my)*1%);mix-blend-mode:color-dodge;filter:brightness(.68) contrast(1.2)}
.f-secret::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.0) 0 3px,rgba(255,255,255,.4) 3px 4px);mix-blend-mode:overlay;background-position:calc(var(--mx)*.5px) 0}
.kt .burst{position:absolute;inset:-30%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(255,226,150,.9),rgba(255,226,150,0) 60%);animation:burst .9s ease-out forwards;mix-blend-mode:screen}
@keyframes burst{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}

/* Aufdecken */
.ue-info{flex:none;min-height:96px;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 30px)}
.marken{display:flex;gap:8px;min-height:26px;align-items:center}
.marke{font:500 12px var(--mono);border:1px solid var(--akz);color:var(--akz);padding:3px 10px;border-radius:12px}
.marke.neu{background:var(--akz);color:var(--akz-fg)}
.kname{font:600 15px var(--sora);text-align:center;padding:0 24px;min-height:22px}
.punkte{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:240px}
.punkte i{width:7px;height:7px;border-radius:50%;background:#3a3742}.punkte i.on{background:var(--akz)}

/* Zusammenfassung */
.zusammen{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 12px;touch-action:pan-y}
.zusammen .raster{grid-template-columns:repeat(3,1fr)}
.zusammen .slot{pointer-events:auto}
.unten{flex:none;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 14px);display:flex;gap:10px}
.unten button{flex:1}
.zweit{border:1px solid var(--linie2);border-radius:10px;padding:13px;font:600 14px var(--sora)}
.zusammen .slot img{pointer-events:none}
.zusammen .slot{cursor:pointer}
.gross{position:fixed;inset:0;z-index:30;background:rgba(14,13,17,.985);display:flex;align-items:center;justify-content:center;touch-action:none}
.gross .zu{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:40px;height:40px;border-radius:50%;background:#2a2830;border:1px solid #3a3742;color:var(--mut);font:16px var(--mono);z-index:2}
.gross .sub{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);text-align:center;font:12px var(--mono);color:var(--mut)}
.gross .sub b{color:var(--fg);font:600 15px var(--sora);display:block;margin-bottom:4px}
.kt .kt-vorn img,.kt .kt-hinten img{position:relative}
/* Helle Vollbild-Karten (Full Art, Gold, Regenbogen): sanfter mischen, sonst brennt das Bild aus */
.fx.voll{mix-blend-mode:overlay;filter:none;opacity:calc(var(--fxo)*.75)}
.fx.voll::after{opacity:.45}

/* ===== Effekte beim Aufdecken ===== */
.ue-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.blitz{position:absolute;inset:0;pointer-events:none;z-index:7;background:#fff;opacity:0;animation:blitz .65s ease-out forwards}
.blitz.s4{background:radial-gradient(circle at 50% 45%,#fff,#fff0b8 55%,#fff)}
@keyframes blitz{0%{opacity:0}8%{opacity:.9}100%{opacity:0}}
.ue-buehne.beben3{animation:beben3 .55s cubic-bezier(.36,.07,.19,.97)}
.ue-buehne.beben4{animation:beben4 .7s cubic-bezier(.36,.07,.19,.97)}
@keyframes beben3{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,3px)}40%,60%{transform:translate(6px,-3px)}}
@keyframes beben4{10%,90%{transform:translate(-4px,2px)}20%,80%{transform:translate(8px,-4px)}30%,50%,70%{transform:translate(-12px,6px)}40%,60%{transform:translate(12px,-6px)}}
.banner{position:absolute;top:7%;left:0;right:0;text-align:center;font:700 21px var(--sora);letter-spacing:.2em;pointer-events:none;z-index:8;padding:0 12px;
  background:linear-gradient(180deg,#fff8d6,#ffc94d 70%,#ff9b2e);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,190,70,.9));animation:bannerein .55s cubic-bezier(.2,1.7,.4,1) both;transition:opacity .6s}
.banner.s4{font-size:25px;background:linear-gradient(90deg,#ff5fd2,#ffe36b,#62ffb0,#5fc8ff,#a46bff,#ff5fd2);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:bannerein .55s cubic-bezier(.2,1.7,.4,1) both,regenbogen 2.2s linear infinite}
.banner.weg{opacity:0}
@keyframes bannerein{from{transform:scale(2.4);opacity:0}to{transform:none;opacity:1}}
@keyframes regenbogen{to{background-position:300% 0}}
.strahlen,.god-strahlen{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,140,.55) 0 4deg,transparent 4deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 52%);mask:radial-gradient(circle,#000 0,transparent 52%);
  animation:drehen 16s linear infinite,strahlein .5s ease-out both;transition:opacity .4s}
.strahlen.s4{background:repeating-conic-gradient(from 0deg,rgba(255,80,220,.55) 0 3deg,transparent 3deg 9deg,rgba(80,230,255,.55) 9deg 12deg,transparent 12deg 18deg,rgba(255,230,80,.55) 18deg 21deg,transparent 21deg 27deg)}
.strahlen.aus{opacity:0}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes strahlein{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.kt.aura2 .kt-vorn{box-shadow:0 0 26px 4px rgba(190,225,255,.6),0 12px 28px rgba(0,0,0,.6)}
.kt.aura3 .kt-vorn{animation:aura3 1.3s ease-in-out infinite}
.kt.aura4 .kt-vorn{animation:aura4 2.2s linear infinite}
@keyframes aura3{0%,100%{box-shadow:0 0 34px 6px rgba(255,205,100,.65),0 12px 28px rgba(0,0,0,.6)}50%{box-shadow:0 0 58px 14px rgba(255,220,130,.95),0 12px 28px rgba(0,0,0,.6)}}
@keyframes aura4{0%,100%{box-shadow:0 0 56px 12px rgba(255,90,210,.8),0 12px 28px rgba(0,0,0,.6)}25%{box-shadow:0 0 56px 12px rgba(100,230,255,.85),0 12px 28px rgba(0,0,0,.6)}50%{box-shadow:0 0 56px 12px rgba(255,235,90,.85),0 12px 28px rgba(0,0,0,.6)}75%{box-shadow:0 0 56px 12px rgba(120,255,170,.85),0 12px 28px rgba(0,0,0,.6)}}
/* God Pack: das Pack leuchtet schon vor dem Aufreissen */
.ps-pack.god{animation:packein .7s cubic-bezier(.2,.9,.25,1.05) both,godpuls 1.4s ease-in-out .8s infinite}
@keyframes godpuls{0%,100%{filter:drop-shadow(0 0 18px rgba(255,205,90,.7)) drop-shadow(0 0 46px rgba(255,160,40,.4))}50%{filter:drop-shadow(0 0 30px rgba(255,225,130,1)) drop-shadow(0 0 80px rgba(255,170,50,.8))}}
.god-strahlen{z-index:0}

/* Quoten-Blatt */
.blatt{position:fixed;inset:0;z-index:25;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.blatt-in{width:100%;max-width:480px;background:var(--seite);border:1px solid var(--linie);border-radius:16px 16px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 16px);display:flex;flex-direction:column;gap:12px;max-height:80dvh;overflow-y:auto}
.blatt-in h2{margin:0;font:600 16px var(--sora)}
.blatt-in .zeilen{display:flex;flex-direction:column;gap:10px;font:13px var(--sora)}
.blatt-in .zeilen div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 14px;border-bottom:1px solid var(--linie);padding-bottom:8px}
.blatt-in .zeilen span{color:var(--mut)}.blatt-in .zeilen b{font:500 13px var(--mono)}
.blatt-in .hinw{margin:0;font:12px/1.5 var(--mono);color:var(--mut)}
.banner.god{font-size:16px;letter-spacing:.12em}.banner.god.s4{font-size:18px}