/* RangSpiel 2 – Styles (Handy; Gems/Overlays werden auch vom TV genutzt) */
:root{
  --bg:#07130d;--bg2:#0d2216;--card:#112b1c;--card2:#16361f;--line:#1f4a2e;
  --tx:#eafaf0;--mut:#8fb59e;--acc:#3dff8a;--acc2:#12c25a;--gold:#ffd24a;--red:#ff5b6e;--blue:#5ab0ff;--A:#ff6b3d;--B:#3d9bff;
  --r:16px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}
body{background:radial-gradient(1200px 600px at 50% -200px,#14402a 0,transparent 70%),var(--bg);-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
input{font:inherit;color:var(--tx);-webkit-user-select:text;user-select:text}
b{font-weight:800}

/* ---------- Header / Nav ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + var(--safe-t)) 16px 10px;background:linear-gradient(#07130d 70%,#07130d00)}
.logo{font-size:20px;font-weight:600;letter-spacing:.3px}.logo b{color:var(--acc)}.logo span{color:var(--gold);font-weight:900}
.top-r{display:flex;align-items:center;gap:10px}
.season{font-size:12px;color:var(--mut);background:var(--card);padding:4px 10px;border-radius:99px}
.dot{width:10px;height:10px;border-radius:50%;background:#777;box-shadow:0 0 0 3px #7772}
.dot.ok{background:var(--acc);box-shadow:0 0 0 3px #3dff8a33}.dot.off{background:var(--red);box-shadow:0 0 0 3px #ff5b6e33}
.ibtn{font-size:20px;padding:4px 6px}
main{padding:calc(58px + var(--safe-t)) 14px calc(86px + var(--safe-b));max-width:640px;margin:0 auto}
.tab{display:none;animation:fade .25s}.tab.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:center;gap:4px;padding:8px 10px calc(8px + var(--safe-b));background:#0a1a11ee;backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.nav button{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;border-radius:14px;color:var(--mut);transition:.15s}
.nav button i{font-style:normal;font-size:22px;filter:grayscale(.8);transition:.15s}
.nav button span{font-size:11px;font-weight:600}
.nav button.on{color:var(--acc);background:#3dff8a14}.nav button.on i{filter:none;transform:translateY(-2px) scale(1.1)}
.nav button:active{transform:scale(.94)}

/* ---------- Basics ---------- */
h2{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin:20px 4px 8px;font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.row{display:flex;align-items:center;gap:10px}.sp{flex:1}.mut{color:var(--mut)}.sm{font-size:12px}.c{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:14px;font-weight:800;font-size:16px;background:var(--card2);border:1px solid var(--line);transition:.12s}
.btn:active{transform:scale(.96)}
.btn.pri{background:linear-gradient(180deg,var(--acc),var(--acc2));color:#02210f;border:0;box-shadow:0 6px 20px #3dff8a33}
.btn.red{background:#3a1218;color:#ff9aa6;border-color:#6b1f2b}
.btn.gold{background:linear-gradient(180deg,#ffe27a,#f0b429);color:#3b2a00;border:0}
.btn.big{width:100%;padding:18px;font-size:18px}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.4;pointer-events:none}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;background:#0006;font-size:12px;font-weight:700}
.empty{text-align:center;color:var(--mut);padding:40px 20px;line-height:1.5}.empty big{display:block;font-size:48px;margin-bottom:8px}
.pos{color:var(--acc)}.neg{color:var(--red)}
.input{width:100%;padding:14px;border-radius:12px;background:#0a1a11;border:1px solid var(--line);font-size:16px;outline:none}
.input:focus{border-color:var(--acc)}

/* ---------- Gem (Rang-Symbol, SVG) ---------- */
.gem{--s:28px;display:inline-block;width:var(--s);height:var(--s);flex:none;vertical-align:middle;position:relative}
.gem svg{width:100%;height:100%;display:block;overflow:visible}
.gem.t0 svg{filter:drop-shadow(0 1px 1.5px #0009)}
.gem.t1 svg,.gem.t2 svg{filter:drop-shadow(0 0 calc(var(--s)*.07) var(--c1)) drop-shadow(0 1px 1px #0008)}
.gem.t3 svg,.gem.t4 svg{filter:drop-shadow(0 0 calc(var(--s)*.14) var(--c1))}
.gem.t5 svg,.gem.t6 svg{filter:drop-shadow(0 0 calc(var(--s)*.2) var(--c1));animation:gpulse 2.2s ease-in-out infinite}
.gem.rb svg{animation:hue 5s linear infinite}
.gem .shg{animation:shine 3.8s ease-in-out infinite}.gem.t0 .shg{animation-duration:5s}
.gem .ring{transform-origin:50px 50px;animation:rot 9s linear infinite}.gem .ring.r2{animation-duration:6s;animation-direction:reverse}
.gem .tw{transform-box:fill-box;transform-origin:center;animation:twk 1.9s ease-in-out infinite}
@keyframes shine{0%,55%{transform:translateX(0)}100%{transform:translateX(150px)}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes twk{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
@keyframes gpulse{50%{transform:scale(1.07)}}
@keyframes hue{to{filter:hue-rotate(360deg) drop-shadow(0 0 6px #fff8)}}

/* ---------- Spielen: Auswahl ---------- */
.hero{background:linear-gradient(135deg,#16482a,#0d2216);border:1px solid var(--line);border-radius:22px;padding:20px;text-align:center;margin-bottom:12px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#ffffff06 0 40px,#0000 40px 80px);pointer-events:none}
.hero h1{margin:0 0 4px;font-size:26px}.hero p{margin:0;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:99px;background:var(--card);border:2px solid var(--line);font-weight:700;transition:.12s}
.chip:active{transform:scale(.95)}
.chip.on{border-color:var(--acc);background:#1c5a34;box-shadow:0 0 0 3px #3dff8a22}
.chip small{color:var(--mut);font-weight:600}
.chip.add{border-style:dashed;color:var(--acc);padding:8px 14px}
.chip.ghost{opacity:.5}

/* Team-Bau */
.teams{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.team{border-radius:18px;padding:12px;border:2px solid;min-height:140px;position:relative}
.team.A{border-color:var(--A);background:linear-gradient(180deg,#ff6b3d1c,#0000)}.team.B{border-color:var(--B);background:linear-gradient(180deg,#3d9bff1c,#0000)}
.team h3{margin:0 0 2px;font-size:15px;display:flex;justify-content:space-between}.team.A h3{color:var(--A)}.team.B h3{color:var(--B)}
.team .avg{font-size:12px;color:var(--mut);margin-bottom:8px}
.mem{display:flex;align-items:center;gap:8px;padding:8px;background:#0005;border-radius:12px;margin-bottom:6px;font-weight:700;font-size:15px;width:100%;text-align:left}
.mem:active{transform:scale(.97)}.mem .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prob{height:12px;border-radius:99px;overflow:hidden;display:flex;background:#0006;margin:12px 0 4px}
.prob i{display:block;height:100%;transition:width .4s}.prob .a{background:var(--A)}.prob .b{background:var(--B)}
.boost{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--card);border:2px solid var(--line);width:100%;text-align:left;margin:8px 0}
.boost.on{border-color:var(--gold);background:linear-gradient(90deg,#4a3a0a,#16361f)}
.sw{width:46px;height:26px;border-radius:99px;background:#0008;position:relative;transition:.2s;flex:none}.sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#aaa;transition:.2s}
.on>.sw,.sw.on{background:var(--acc2)}.on>.sw:after,.sw.on:after{left:23px;background:#fff}

/* ---------- Live-Spiel ---------- */
.live{position:relative}
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;background:linear-gradient(180deg,#0f2d1b,#0a1a11);border:1px solid var(--line);border-radius:22px;padding:14px 8px;margin-bottom:10px}
.sbteam{text-align:center}.sbteam .tn{font-size:12px;font-weight:800;letter-spacing:1px}.sbteam.A .tn{color:var(--A)}.sbteam.B .tn{color:var(--B)}
.sbteam .sc{font-size:76px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.sbteam .sc.pop{animation:pop .5s}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.45);color:var(--gold)}100%{transform:scale(1)}}
.clock{text-align:center}.clock .t{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}.clock button{font-size:12px;color:var(--mut);padding:4px 10px;border-radius:99px;background:#0006;margin-top:2px}
.boostbadge{text-align:center;color:var(--gold);font-weight:800;font-size:13px;margin-bottom:6px;animation:glow 1.6s infinite}
@keyframes glow{50%{opacity:.55}}
.pitch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcol .tl{font-size:11px;font-weight:800;letter-spacing:1px;margin:0 2px 6px}.pcol.A .tl{color:var(--A)}.pcol.B .tl{color:var(--B)}
.pl{width:100%;display:flex;align-items:center;gap:8px;padding:12px 10px;margin-bottom:8px;border-radius:16px;font-weight:800;font-size:16px;text-align:left;border:2px solid;position:relative;overflow:hidden;transition:.1s}
.pcol.A .pl{border-color:#ff6b3d88;background:linear-gradient(135deg,#ff6b3d33,#0006)}.pcol.B .pl{border-color:#3d9bff88;background:linear-gradient(135deg,#3d9bff33,#0006)}
.pl:active{transform:scale(.95)}
.pl .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .st{font-size:13px;display:flex;gap:6px;color:#fff}.pl .st span{background:#0007;border-radius:8px;padding:1px 6px}
.hint{text-align:center;color:var(--mut);font-size:12px;margin:6px 0 10px}
.events{margin:10px 0}
.ev{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--card);border-radius:12px;margin-bottom:6px;font-size:14px;border-left:4px solid}
.ev.A{border-color:var(--A)}.ev.B{border-color:var(--B)}.ev .m{color:var(--mut);font-variant-numeric:tabular-nums;width:38px}.ev .x{color:var(--red);font-size:18px;padding:0 4px}
.act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}

/* ---------- Sheet ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:50;background:#000a;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:.2s}
.sheet-wrap.on{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:640px;max-height:90vh;overflow-y:auto;background:#0e2216;border-radius:26px 26px 0 0;border:1px solid var(--line);border-bottom:0;padding:10px 16px calc(20px + var(--safe-b));transform:translateY(100%);transition:.28s cubic-bezier(.2,.9,.3,1)}
.sheet-wrap.on .sheet{transform:none}
.sheet:before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:#fff3;margin:0 auto 12px}
.sheet h3{margin:4px 0 12px;font-size:20px}
.list-btn{width:100%;display:flex;align-items:center;gap:10px;padding:14px;margin-bottom:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:16px;text-align:left}
.list-btn:active{transform:scale(.97);background:var(--card2)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Ergebnis */
.bd{font-size:13px;color:var(--mut);margin-top:6px}.bd span{display:inline-block;background:#0006;padding:2px 8px;border-radius:99px;margin:2px 2px 0 0}.bd .p{color:var(--acc)}.bd .n{color:var(--red)}
.res-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #fff1}
.res-row .d{font-size:22px;font-weight:900;min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:9px;background:#0007;overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc2),var(--acc));border-radius:9px;transition:width 1s}
.res-hero{text-align:center;padding:6px 0 10px}.res-hero .s{font-size:56px;font-weight:900}.res-hero .w{font-size:14px;color:var(--gold);font-weight:800;letter-spacing:1px}

/* ---------- Tabellen ---------- */
.seg{display:flex;background:var(--card);border-radius:12px;padding:3px;gap:3px;margin:0 0 12px;overflow-x:auto}
.seg button{flex:1;padding:9px 12px;border-radius:10px;font-weight:700;font-size:13px;color:var(--mut);white-space:nowrap}.seg button.on{background:var(--acc2);color:#02210f}
.lb{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:6px;width:100%;text-align:left}
.lb:active{background:var(--card2)}
.lb .pos-n{width:26px;text-align:center;font-weight:900;color:var(--mut);font-size:15px}
.lb.p1 .pos-n{color:#ffd24a;font-size:20px}.lb.p2 .pos-n{color:#dfe6ea;font-size:18px}.lb.p3 .pos-n{color:#e0a064;font-size:17px}
.lb.p1{background:linear-gradient(90deg,#4a3a0a88,var(--card))}
.lb .info{flex:1;min-width:0}.lb .nm{font-weight:800;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .sub{font-size:12px;color:var(--mut)}
.lb .val{text-align:right;font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}.lb .val small{display:block;font-size:11px;font-weight:600}
.form{display:inline-flex;gap:3px;vertical-align:middle}.form i{width:9px;height:9px;border-radius:50%;background:#555}.form i.W{background:var(--acc)}.form i.L{background:var(--red)}.form i.D{background:#c9c9c9}
.mvpbar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:8px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.stat3>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}.stat3 b{font-size:22px;display:block}.stat3 span{font-size:11px;color:var(--mut)}
.badge{display:inline-flex;flex-direction:column;align-items:center;width:30%;margin:0 1.6% 10px;text-align:center;font-size:11px;color:var(--mut);vertical-align:top}
.badge i{font-style:normal;font-size:30px;filter:grayscale(1) opacity(.3)}.badge.on{color:var(--tx)}.badge.on i{filter:none}
.spark{width:100%;height:70px;display:block}
.hist{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:8px;width:100%;text-align:left}
.hist .hs{display:flex;align-items:center;gap:8px;font-weight:800}
.hist .hs .sc{font-size:22px;font-weight:900;background:#0007;padding:2px 10px;border-radius:10px}
.hist .tn{flex:1;font-size:13px;line-height:1.3}.hist .tn.r{text-align:right}
.hist .w{color:var(--acc)}

/* ---------- Overlays ---------- */
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:90;pointer-events:none}
.ru{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#000c,#000e);animation:fadein .3s;transition:.5s}
.ru.out{opacity:0}
@keyframes fadein{from{opacity:0}}
.ru-card{text-align:center;animation:rise .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes rise{from{transform:scale(.3) translateY(60px);opacity:0}}
.ru-k{letter-spacing:5px;font-size:13px;color:var(--c1);font-weight:800}
.ru-gem{margin:18px 0;filter:drop-shadow(0 0 30px var(--c1));animation:float 2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px) scale(1.06)}}
.ru-n{font-size:28px;font-weight:900}.ru-r{font-size:44px;font-weight:900;background:linear-gradient(90deg,var(--c1),#fff,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ru.t4 .ru-card,.ru.t5 .ru-card,.ru.t6 .ru-card{animation-duration:1s}
.toast{position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translate(-50%,30px);background:#000d;border:1px solid var(--line);padding:11px 18px;border-radius:99px;font-weight:700;z-index:70;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.goalflash{position:fixed;inset:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:72px;font-weight:900;color:#fff;text-shadow:0 4px 30px #000;animation:gf 1.3s forwards;background:radial-gradient(circle,#ffd24a55,transparent 65%)}
@keyframes gf{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.15)}80%{opacity:1}100%{opacity:0;transform:scale(1.4)}}

/* ---------- Extra-Animationen ---------- */
.ru-rays{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;background:repeating-conic-gradient(from 0deg,var(--c1) 0 4deg,transparent 4deg 18deg);opacity:.22;animation:rot2 16s linear infinite;-webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%)}
@keyframes rot2{to{transform:rotate(360deg)}}
.ru-ring{position:absolute;left:50%;top:50%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;border:4px solid var(--c1);animation:shock 1.6s ease-out .1s both;pointer-events:none}
.ru-ring.r2{animation-delay:.45s}
@keyframes shock{from{transform:scale(.2);opacity:1}to{transform:scale(4.5);opacity:0}}
.ru-gem{animation:flip 1.1s cubic-bezier(.2,1.2,.3,1) both,float 2.4s ease-in-out 1.1s infinite!important}
@keyframes flip{from{transform:perspective(600px) rotateY(900deg) scale(.1);opacity:0}to{transform:perspective(600px) rotateY(0) scale(1);opacity:1}}
.ru-r{animation:glowtx 1.8s ease-in-out infinite}
@keyframes glowtx{50%{filter:brightness(1.4) drop-shadow(0 0 14px var(--c1))}}
.ru-card{position:relative;z-index:2}
.ru{overflow:hidden}
.goalflash{flex-direction:column}
.goalflash:before{content:"";position:absolute;left:50%;top:50%;width:30vmin;height:30vmin;margin:-15vmin 0 0 -15vmin;border-radius:50%;border:6px solid #ffd24a;animation:shock 1s ease-out both}
.goalflash span{display:block;animation:slam .55s cubic-bezier(.2,1.6,.4,1) both}
@keyframes slam{from{transform:scale(3) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.scoreboard.shake{animation:shake .5s}
@keyframes shake{20%{transform:translateX(-7px) rotate(-.6deg)}40%{transform:translateX(7px) rotate(.6deg)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.chip.on{animation:bounce .35s}
@keyframes bounce{40%{transform:scale(1.1)}}
.lb,.res-row{animation:slidein .4s both}
.lb:nth-child(2),.res-row:nth-child(2){animation-delay:.05s}.lb:nth-child(3),.res-row:nth-child(3){animation-delay:.1s}.lb:nth-child(4),.res-row:nth-child(4){animation-delay:.15s}.lb:nth-child(5),.res-row:nth-child(5){animation-delay:.2s}.lb:nth-child(n+6){animation-delay:.25s}
@keyframes slidein{from{opacity:0;transform:translateX(-18px)}}
.res-hero .s{animation:slam .6s cubic-bezier(.2,1.6,.4,1) both}
.res-row .d.pos{text-shadow:0 0 14px #3dff8a88}
.btn.pri{background-size:200% 100%;position:relative;overflow:hidden}
.btn.pri:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff6 50%,transparent 65%);transform:translateX(-120%);animation:btnshine 3.2s infinite}
@keyframes btnshine{60%,100%{transform:translateX(120%)}}

/* ---------- Namen mit Rang-Logo / Verlauf ---------- */
.ntag{display:inline-flex;align-items:center;gap:.3em;vertical-align:middle;max-width:100%}
.ntag .gem{margin-right:1px}
.gn{background:linear-gradient(90deg,var(--c1),#fff,color-mix(in srgb,var(--c2) 55%,#fff),var(--c1));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:gnmove 4s linear infinite}
.gn2{animation-duration:2.6s;filter:drop-shadow(0 0 4px var(--c1))}
.gn3{animation-duration:1.6s;filter:drop-shadow(0 0 7px var(--c1))}
.gn-rb{background:linear-gradient(90deg,#ff5d5d,#ffd24a,#5dff8a,#5ad1ff,#b05dff,#ff5dd9,#ff5d5d);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;animation:gnmove 2.2s linear infinite,hue 5s linear infinite;filter:drop-shadow(0 0 8px #fff6)}
@keyframes gnmove{to{background-position:300% 0}}

/* ---------- Karten / Anstoß ---------- */
.kom{display:inline-block;margin-top:4px;font-size:11px;font-weight:800;color:#fff;background:#0007;border-radius:99px;padding:2px 8px;animation:glow 2s infinite}
.pl.out{opacity:.45;filter:grayscale(.7)}
.cardrow{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:6px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-weight:700}
.cardrow .btn.sm{font-size:20px;padding:6px 14px}
.cardflash{flex-direction:column;background:radial-gradient(circle,#000a,#000e 70%)!important}
.cardflash:before{display:none}
.cardshape{display:block;width:90px;height:128px;border-radius:12px;box-shadow:0 10px 40px #000a;animation:cardin .7s cubic-bezier(.2,1.5,.4,1) both}
.cardshape.y{background:linear-gradient(145deg,#ffe94a,#e6b800)}.cardshape.r{background:linear-gradient(145deg,#ff5b5b,#b80000)}
@keyframes cardin{from{transform:translateY(-200px) rotate(-40deg) scale(.4);opacity:0}to{transform:rotate(-8deg);opacity:1}}

/* ---------- Elfmeterschießen ---------- */
.so{font-size:15px;text-align:center;background:linear-gradient(180deg,#0f2d1b,#0a1a11);border:1px solid var(--line);border-radius:22px;padding:14px 10px;margin-bottom:6px}
.so-h{font-weight:900;letter-spacing:2px;color:var(--gold);margin-bottom:10px}
.so-row{display:flex;align-items:center;gap:.7em;margin:.5em 0}
.so-row .tn{width:5.2em;text-align:left;font-weight:800;font-size:.8em;letter-spacing:1px}.so-row.A .tn{color:var(--A)}.so-row.B .tn{color:var(--B)}
.so-row .dots{flex:1;display:flex;gap:.4em;justify-content:center;flex-wrap:wrap}
.so-row .dots i{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;background:#0007;border:2px solid #fff3;font-style:normal;font-size:.9em;animation:bounce .4s}
.so-row .dots i.g{background:#12c25a55;border-color:var(--acc)}.so-row .dots i.m{background:#ff5b6e44;border-color:var(--red);color:var(--red);font-weight:900}
.so-row b{font-size:2em;width:1.2em;text-align:right;font-variant-numeric:tabular-nums}
.so-turn{margin:.8em 0 .2em;font-size:1.05em}.so-turn b.A{color:var(--A)}.so-turn b.B{color:var(--B)}