:root{--bg:#050b18;--bg2:#0a1630;--card:#0b1730;--card2:#0e1f42;--line:#1c3a6e;--neon:#2f8cff;--neon2:#5fd0ff;--tx:#eef3ff;--mu:#8fa3c7;--or:#ffb347;--or2:#f08a1c;--rd:#ff4d5a;--gd:#ffd25e;--gr:#32d583;--bl:#2f8cff}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.app main,.app main>*,.card,.tile,.ac>*,.player>*,.tri>*,.two>*,.tiles>*{min-width:0}

html{background:var(--bg)}
body{margin:0;color:var(--tx);font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:radial-gradient(120% 60% at 50% -10%,#10285a 0,transparent 60%),linear-gradient(#071127,#040914);min-height:100vh}
a{color:inherit;text-decoration:none}h2,h3{margin:0 0 .35em;line-height:1.15}p{margin:.3em 0 .8em;color:var(--mu);max-width:65ch}small{display:block;color:var(--mu);font-size:.78rem}
.i{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Karten mit Neon-Rand */
.card{position:relative;background:linear-gradient(160deg,rgba(18,40,84,.72),rgba(8,18,40,.92));border:1px solid var(--line);border-radius:16px;padding:16px;margin:0 0 14px;box-shadow:inset 0 0 0 1px rgba(95,208,255,.06),0 0 18px rgba(47,140,255,.12)}
.card h2{font-size:1.5rem}.card h3{font-size:1.05rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(#ffc45e,var(--or2));color:#2a1700;border:0;border-radius:11px;padding:13px 18px;font:800 1rem inherit;width:100%;cursor:pointer;box-shadow:0 0 14px rgba(255,170,60,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.btn.sm{width:auto;padding:10px 18px}
.btn.ghost{background:rgba(47,140,255,.08);color:var(--tx);border:1px solid var(--neon);box-shadow:0 0 10px rgba(47,140,255,.25)}
.btn.blue{background:linear-gradient(#35b6ff,#1676ea);color:#fff;box-shadow:0 0 16px rgba(47,140,255,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:disabled,.btn.off{background:rgba(120,140,180,.12);color:#9fb0cf;border:1px solid #2a3d63;box-shadow:none;cursor:not-allowed}
.btn .i{width:1.1em;height:1.1em}
input:not([type=checkbox]){width:100%;padding:12px;margin-top:4px;background:#050d20;border:1px solid var(--line);border-radius:10px;color:var(--tx);font:inherit}
label{display:block;margin:0 0 12px;font-size:.9rem;color:var(--mu)}.chk{display:flex;gap:8px;align-items:flex-start}
:focus-visible{outline:2px solid var(--neon2);outline-offset:2px}
.msg{padding:12px 14px;border-radius:12px;border:1px solid;margin:0 0 14px;color:var(--tx)}.msg.ok{background:#07281b;border-color:#1e8a5a}.msg.bad{background:#2c0e17;border-color:#8a2b3a}

/* Landing */
.landing .head{margin:-22px -18px 18px;min-height:150px;justify-content:center;border-radius:0 0 22px 22px}.landing .head .logo{max-width:280px}
.landing .hero{max-width:520px;margin:0 auto;padding:22px 18px 60px}
.logo{width:100%;max-width:340px;display:block;margin:0 auto 14px}.logo.sm{max-width:150px;margin:0 0 18px}.lead{color:var(--tx);font-size:1.05rem;text-align:center;margin:0 auto 22px}
.tabs{display:flex;gap:6px;margin-bottom:14px}.tabs a{flex:1;text-align:center;padding:10px;border-radius:10px;color:var(--mu);border:1px solid var(--line)}.tabs a.on{background:linear-gradient(#35b6ff,#1676ea);color:#fff;font-weight:700;border-color:var(--neon2);box-shadow:0 0 12px rgba(47,140,255,.5)}
.facts div{margin-top:18px}.facts h3{color:var(--neon2)}

/* App-Rahmen */
.app{padding-bottom:84px}.app main{max-width:760px;margin:0 auto;padding:12px}.side{display:none}
.skybg{background:var(--bg) url(assets/skyline.svg) right bottom/cover no-repeat}

/* Kopfbereich */
.head{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:118px;margin:-12px -12px 12px;padding:14px 16px;border-radius:0 0 22px 22px;border-bottom:1px solid var(--line);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.head:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,20,.88) 0,rgba(3,8,20,.35) 60%,rgba(3,8,20,.1));pointer-events:none}
.head>*{position:relative;z-index:1}
.head .logo{margin:0;max-width:min(230px,60%)}
.head.sub{min-height:72px;padding:10px 14px;gap:10px;justify-content:flex-start}
.head.sub .logo{max-width:128px}
.head .back,.head .gear{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--tx);font-size:1.3rem}
.head .gear{border:1px solid var(--line);background:rgba(5,12,30,.55)}
.cashpill{margin-left:auto;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(4,12,28,.75);font-weight:800;color:var(--gr);box-shadow:0 0 14px rgba(47,140,255,.2)}
.cashpill .coin,.coin{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--gr);color:var(--gr);font-size:.8rem;font-weight:900;flex:none}

/* Spielerkarte */
.player{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:12px}
.avatar{width:78px;height:78px;border-radius:50%;border:2px solid var(--neon2);box-shadow:0 0 16px rgba(47,140,255,.7);overflow:hidden;background:#0a1630}.avatar svg{width:100%;height:100%;display:block}
.pname{display:flex;align-items:center;gap:8px;font-size:1.3rem;font-weight:800}.pname .i{color:var(--or);stroke:none;fill:var(--or)}
.plevel{color:var(--neon2);font-size:.9rem}
.xpbar{height:9px;border-radius:6px;background:#050d20;border:1px solid #17305e;margin:7px 0 3px;overflow:hidden}.xpbar i{display:block;height:100%;background:linear-gradient(90deg,#1676ea,#5fd0ff);box-shadow:0 0 10px var(--neon2);transition:width .5s}
.pstats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(28,58,110,.7);padding-top:10px}
.pstats div{text-align:center;padding:0 4px}.pstats div+div{border-left:1px solid rgba(28,58,110,.7)}
.pstats .i{width:30px;height:30px}.pstats b{display:block;font-size:.98rem;overflow-wrap:anywhere}.pstats small{font-size:.74rem}
.c-gr{color:var(--gr)}.c-bl{color:var(--neon)}.c-rd{color:var(--rd)}.c-gd{color:var(--gd)}

/* Willkommensbanner */
.welcome{position:relative;overflow:hidden;padding:18px 16px;min-height:170px}
.welcome:before{content:"";position:absolute;inset:0;background:url(assets/skyline.svg) right bottom/cover;opacity:.9}
.welcome:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,26,.95) 0,rgba(4,10,26,.78) 55%,rgba(4,10,26,.1))}
.welcome>*{position:relative;z-index:1}.welcome h2{font-size:1.55rem}.welcome p{color:#dbe6ff;max-width:34ch;font-size:.9rem}

/* Kennzahlen */
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tri .card{margin:0;padding:12px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.tri .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--neon);color:var(--neon2);box-shadow:0 0 12px rgba(47,140,255,.5);flex:none}
.tri small{font-size:.72rem}.tri b{font-size:.92rem;display:block;overflow-wrap:anywhere}

/* Zweispalter */
.two{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
.two .card{margin:0}
.li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(28,58,110,.7)}
.li:first-of-type{border-top:0}
.li .lic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--neon2);flex:none;background:rgba(5,12,30,.6)}
.li>span{flex:1;min-width:0}.li small{font-size:.72rem}
.pos{color:var(--gr);font-weight:700}.neg{color:var(--rd);font-weight:700}
.mission .pic{height:92px;border-radius:10px;margin-bottom:10px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(5,10,25,.2),rgba(5,10,25,.7)),url(assets/skyline.svg) 20% bottom/cover}
.reward{display:flex;gap:14px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(5,12,30,.6);font-size:.82rem;margin:10px 0}
.reward b{color:var(--gd)}.reward .xp{color:var(--neon2)}

/* Kacheln unten */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tile{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,40,84,.7),rgba(8,18,40,.9));min-height:128px}
.tile .top{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.tile .top .i{width:30px;height:30px;color:var(--neon2)}
.tile h3{font-size:.95rem;margin:0}.tile p{font-size:.7rem;margin:0;line-height:1.3}
.tile .pill{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:4px;padding:5px 6px;border:1px solid var(--neon);border-radius:8px;font-size:.68rem;line-height:1.2;color:var(--tx)}.tile .pill .i{width:12px;height:12px}
.tile .pill .i{color:var(--neon2)}.tile.off{opacity:.8}

/* Aktionen */
.atabs{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:6px;margin-bottom:14px}
.atabs a,.atabs span{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border-radius:12px;color:var(--mu);font-size:.85rem;border:1px solid transparent}
.atabs .on{color:#fff;font-weight:700;border-color:var(--neon);background:linear-gradient(rgba(47,140,255,.28),rgba(47,140,255,.1));box-shadow:0 0 14px rgba(47,140,255,.5)}
.atabs .soon{opacity:.6}
.banner{position:relative;overflow:hidden;padding:18px 16px;min-height:130px}
.banner:before{content:"";position:absolute;inset:0;background:url(assets/skyline.svg) right bottom/cover}
.banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,26,.95),rgba(4,10,26,.7) 60%,rgba(4,10,26,.15))}
.banner>*{position:relative;z-index:1}.banner h2{font-size:2rem}.banner p{color:#dbe6ff;max-width:30ch}

.ac{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:12px}
.ac .thumb{display:grid;place-items:center;width:70px;height:70px;border-radius:12px;border:1px solid var(--line);color:var(--or);background:radial-gradient(circle at 50% 40%,rgba(255,170,60,.22),rgba(5,12,30,.9) 70%);overflow:hidden}
.ac .thumb .i{width:34px;height:34px}.ac .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ac h3{overflow-wrap:anywhere;font-size:1.02rem;margin:0 0 3px}
.ac p{margin:0 0 8px;font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#b9c8e6}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips span{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;border:1px solid var(--neon);border-radius:8px;padding:2px 7px;color:#cfe3ff;background:rgba(47,140,255,.1)}
.chips .i{width:12px;height:12px;color:var(--neon2)}.chips span.lv{border-color:#2a4272;color:var(--mu);background:transparent}
.ac .gain{text-align:center;min-width:104px;max-width:128px;border-left:1px solid rgba(28,58,110,.7);padding-left:10px}
.ac .gain .g{font-size:1rem;font-weight:800;color:var(--gd);white-space:nowrap}.ac .gain .x{font-size:.85rem;color:var(--neon2);margin-bottom:8px}
.ac .gain .btn{width:100%;padding:10px 6px;font-size:.9rem}.ac .gain .btn+.btn{margin:6px 0 0}.ac .gain .x:empty{display:none}.ac .pbar{margin:8px 0 0}
.ac.lock{opacity:.85}.ac.lock .thumb{color:#8fa3c7;filter:saturate(.4)}

/* Allgemeine Zeilen und Balken (Unterseiten) */
.row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.stat{margin-bottom:12px}.bar{height:10px;background:#050d20;border:1px solid #17305e;border-radius:6px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%}.blue{background:linear-gradient(90deg,#1676ea,#5fd0ff)}.red{background:linear-gradient(90deg,#c21f3a,var(--rd))}.gold{background:linear-gradient(90deg,#e8a020,var(--gd))}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.k b{font-size:1.15rem}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.tags span{font-size:.75rem;border:1px solid var(--neon);border-radius:8px;padding:3px 8px;color:#cfe3ff;background:rgba(47,140,255,.1)}
.act.lock{opacity:.55}
.inl{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.inl input{flex:1 1 140px;margin:0}
.prof{text-align:center}.av{width:96px;margin:0 auto 8px;display:block}.prof p{margin-inline:auto}
.more{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.more a{margin:0;text-align:center}.act form .btn+.btn{margin-left:6px}

/* Untere Navigation */
.bottom{position:fixed;bottom:0;left:0;right:0;display:flex;background:linear-gradient(#08122a,#050b1a);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0);z-index:10}
.bottom a{flex:1;text-align:center;padding:9px 0 8px;font-size:.72rem;color:var(--mu);position:relative}
.bottom svg,.side svg{width:24px;height:24px;fill:currentColor;display:block;margin:0 auto 3px}
.bottom a.on{color:var(--neon2);text-shadow:0 0 10px rgba(95,208,255,.8)}.bottom a.on svg{filter:drop-shadow(0 0 6px var(--neon))}
.bottom a.on:after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:3px;border-radius:3px;background:var(--neon2);box-shadow:0 0 10px var(--neon2)}

@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.ac{grid-template-columns:56px minmax(0,1fr)}.ac .thumb{width:56px;height:56px}.ac .gain{grid-column:1/-1;border-left:0;padding:0;max-width:none;display:flex;align-items:center;gap:10px;text-align:left;flex-wrap:wrap}.ac .gain .g{flex:1}.ac .gain .x{margin:0}.ac .gain .btn{width:auto;flex:1 1 100%}}
@media(max-width:380px){.ac{grid-template-columns:56px 1fr}.ac .thumb{width:56px;height:56px}.ac .gain{grid-column:1/-1;border-left:0;padding:0;display:flex;align-items:center;gap:12px;text-align:left}.ac .gain .btn{width:auto;flex:1}.tri b{font-size:.9rem}}
@media(min-width:900px){.app{padding:0 0 0 220px}.bottom{display:none}.side{display:block;position:fixed;inset:0 auto 0 0;width:220px;padding:20px 14px;background:linear-gradient(#08122a,#050b1a);border-right:1px solid var(--line)}
.side nav a{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;color:var(--mu)}.side svg{margin:0}.side nav a.on{background:rgba(47,140,255,.15);color:var(--neon2);box-shadow:0 0 12px rgba(47,140,255,.35)}.out{position:absolute;bottom:20px;left:26px;color:var(--mu)}.app main{padding:24px}.head{margin:-24px -24px 16px;border-radius:0 0 22px 22px}}
@media(prefers-reduced-motion:reduce){.xpbar i{transition:none}}

/* ===== Phase 3: Leben, Grafiken, Effekte ===== */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}}
@keyframes stripe{to{background-position:28px 0}}
@keyframes flt{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes sweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
@keyframes glowp{0%,100%{box-shadow:0 0 10px var(--gr),inset 0 0 0 1px rgba(50,213,131,.3)}50%{box-shadow:0 0 24px var(--gr),inset 0 0 0 1px rgba(50,213,131,.7)}}
@keyframes btnp{0%,100%{transform:scale(1);box-shadow:0 0 14px rgba(255,170,60,.45)}50%{transform:scale(1.04);box-shadow:0 0 28px rgba(255,200,90,.9)}}
@keyframes pop{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-46px) scale(1.15)}}
@keyframes tws{0%{opacity:.25}100%{opacity:1}}
@keyframes drive{from{left:-12%}to{left:112%}}
@keyframes shn{0%{transform:translateX(-130%) skewX(-20deg)}55%,100%{transform:translateX(230%) skewX(-20deg)}}
.ac{animation:rise .55s cubic-bezier(.2,.8,.2,1) both;transition:transform .2s,box-shadow .2s,border-color .2s}
.ac:hover{transform:translateY(-3px);border-color:var(--neon2);box-shadow:0 0 26px rgba(47,140,255,.38)}
.ac .thumb{position:relative;width:76px;height:76px;border-color:var(--neon);box-shadow:0 0 14px rgba(47,140,255,.4)}
.ac:not(.lock) .thumb img{animation:flt 4.5s ease-in-out infinite}
.ac .thumb .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);animation:shn 5s infinite;pointer-events:none}
.ac.own{border-color:#1e8a5a;animation:rise .55s both,glowp 3.2s 1s ease-in-out infinite}
.ac.active{border-color:var(--gd)}.ac.active .thumb{border-color:var(--gd);box-shadow:0 0 18px rgba(255,210,94,.7)}
.ac.ready{border-color:var(--gd);animation:rise .55s both,glowp 1.6s 1s ease-in-out infinite}
.ac.done{opacity:.75}.ac.done .thumb{filter:saturate(.6)}
.ac.lock .thumb img{filter:grayscale(.85) brightness(.6)}
.ac .thumb .coinpop{position:absolute;left:50%;bottom:30%;z-index:3;font-weight:900;font-size:.78rem;color:var(--gd);text-shadow:0 0 8px #000,0 0 10px rgba(255,210,94,.9);white-space:nowrap;animation:pop 1.8s ease-out forwards;pointer-events:none}
.ac .thumb{overflow:visible}.ac .thumb img,.ac .thumb .shine{border-radius:11px}.ac .thumb .shine{overflow:hidden}
.ac .pbar{height:12px;border-radius:7px}
.pbar i,.xpbar i{background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 8px,transparent 8px 14px);background-size:28px 100%;animation:grow 1s ease-out,stripe 1.2s linear infinite}
.lvl{display:flex;gap:4px;margin-top:7px}.lvl i{width:16px;height:5px;border-radius:3px;background:#17305e}.lvl i.on{background:linear-gradient(90deg,#e8a020,var(--gd));box-shadow:0 0 8px rgba(255,210,94,.8)}
.live b{color:var(--gd);font-variant-numeric:tabular-nums}
.btn.pulse{animation:btnp 1.4s ease-in-out infinite}.btn.blue.pulse{animation-name:btnp}
.okb{color:var(--gr);font-weight:800}
.card.banner{min-height:138px}
.banner .sweep{position:absolute;top:0;bottom:0;left:0;width:40%;z-index:1;background:linear-gradient(100deg,transparent,rgba(95,208,255,.22),transparent);animation:sweep 6s ease-in-out infinite;pointer-events:none}
.banner .bigic{position:absolute;right:6px;bottom:6px;height:112%;max-height:150px;z-index:1;animation:flt 5s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(47,140,255,.7))}
.banner h2,.banner p{position:relative;z-index:2}.banner p{max-width:24ch}
.pushcard small{margin-top:8px}
/* Header: Sternenhimmel + fahrende Lichter (Login + App) */
.head:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1.2px 1.2px at 34% 12%,#cfe3ff,transparent),radial-gradient(1.6px 1.6px at 58% 28%,#fff,transparent),radial-gradient(1.2px 1.2px at 77% 15%,#cfe3ff,transparent),radial-gradient(1.4px 1.4px at 90% 30%,#fff,transparent);animation:tws 2.6s ease-in-out infinite alternate}
.head .traffic{position:absolute;left:0;right:0;bottom:7px;height:4px;z-index:1;pointer-events:none;overflow:hidden}
.head .traffic i{position:absolute;top:0;width:14px;height:3px;border-radius:3px;background:#ffd25e;box-shadow:0 0 10px 2px rgba(255,210,94,.9);animation:drive 7s linear infinite}
.head .traffic i+i{background:#ff4d5a;box-shadow:0 0 10px 2px rgba(255,77,90,.9);animation-duration:11s;animation-direction:reverse;animation-delay:-3s}
.head .traffic i+i+i{background:#5fd0ff;box-shadow:0 0 10px 2px rgba(95,208,255,.9);animation-duration:9s;animation-delay:-5s}
.landing .head{min-height:170px}.landing .head .logo{filter:drop-shadow(0 0 14px rgba(47,140,255,.8));animation:flt 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.ac,.ac *,.banner *,.head:before,.head .traffic i,.landing .head .logo,.btn.pulse,.pbar i{animation:none!important}}
.idle{display:flex;align-items:center;gap:12px;border-color:var(--gd);animation:glowp 2.4s ease-in-out infinite}.idle>span:nth-child(2){flex:1;min-width:0}.idle b{display:block}
.idle .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--gd);color:var(--gd);flex:none}

/* ===== Phase 3d: Ambiente, Effekte, Bilder ===== */
@keyframes amb{0%{transform:translateY(105vh) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translateY(-10vh) scale(1.2);opacity:0}}
@keyframes cfall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}
@keyframes cdrop{0%{transform:translateY(-8vh) rotateY(0);opacity:1}100%{transform:translateY(100vh) rotateY(900deg);opacity:.8}}
@keyframes lvpop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes ring{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes rip{from{transform:translate(-50%,-50%) scale(0);opacity:.55}to{transform:translate(-50%,-50%) scale(14);opacity:0}}
@keyframes flashin{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rdy{0%,100%{box-shadow:0 0 12px rgba(255,170,60,.18)}50%{box-shadow:0 0 24px rgba(255,170,60,.5)}}
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb i{position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#5fd0ff;box-shadow:0 0 10px 2px rgba(95,208,255,.8);animation:amb 14s linear infinite}
.amb i:nth-child(1){left:8%}.amb i:nth-child(2){left:20%;animation-delay:-4s;animation-duration:17s;background:#ffd25e;box-shadow:0 0 10px 2px rgba(255,210,94,.8)}
.amb i:nth-child(3){left:34%;animation-delay:-8s}.amb i:nth-child(4){left:48%;animation-delay:-2s;animation-duration:19s;background:#ffb347;box-shadow:0 0 10px 2px rgba(255,179,71,.8)}
.amb i:nth-child(5){left:62%;animation-delay:-11s}.amb i:nth-child(6){left:75%;animation-delay:-6s;animation-duration:16s;background:#ffd25e;box-shadow:0 0 10px 2px rgba(255,210,94,.8)}
.amb i:nth-child(7){left:88%;animation-delay:-9s}.amb i:nth-child(8){left:95%;animation-delay:-13s;animation-duration:20s}
.app main,.landing .hero{position:relative;z-index:1}
.msg{animation:flashin .45s cubic-bezier(.2,.8,.2,1) both}
.msg.ok{box-shadow:0 0 22px rgba(50,213,131,.35)}.msg.bad{box-shadow:0 0 22px rgba(255,77,90,.3)}
body.shake main{animation:shake .5s}
.fx-coin{position:fixed;top:0;z-index:99;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#6b4300;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc531 55%,#d98a0b);border:2px solid #fff0a0;box-shadow:0 0 14px rgba(255,210,94,.9);pointer-events:none;animation:cdrop 2s ease-in forwards}
.fx-conf{position:fixed;top:-10px;z-index:99;width:9px;height:14px;border-radius:2px;pointer-events:none;animation:cfall 2.6s ease-in forwards}
.fx-level{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(2,6,16,.78);backdrop-filter:blur(4px)}
.fx-box{position:relative;text-align:center;padding:34px 26px;border-radius:22px;border:1px solid var(--neon2);background:linear-gradient(160deg,#10285a,#071127);box-shadow:0 0 60px rgba(47,140,255,.7);animation:lvpop .6s cubic-bezier(.2,.9,.3,1.2) both;max-width:340px;margin:16px}
.fx-box h2{font-size:2.3rem;letter-spacing:2px;background:linear-gradient(#fff,#5fd0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(95,208,255,.9))}
.fx-box p{color:#dbe6ff;margin:8px auto 16px}
.fx-ring{position:absolute;inset:-10px;border-radius:30px;border:2px dashed rgba(255,210,94,.7);animation:ring 12s linear infinite;pointer-events:none}
.btn{position:relative;overflow:hidden}.rip{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;animation:rip .6s ease-out forwards}
.ac.rdy:not(.own):not(.ready){animation:rise .55s both,rdy 3s 1s ease-in-out infinite}
.mission .pic{position:relative;overflow:hidden;background:#0a1630;height:120px}.mission .pic img{width:100%;height:100%;object-fit:cover;display:block;animation:flt 6s ease-in-out infinite}
.mission .pic .shine{position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);animation:shn 5s infinite}
.tile .timg{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(47,140,255,.8));animation:flt 5s ease-in-out infinite}
.tile{transition:transform .2s,box-shadow .2s}.tile:hover{transform:translateY(-3px);box-shadow:0 0 22px rgba(47,140,255,.4)}
.cnt{animation:rise .7s both}
.live-strip{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(5,12,30,.6);font-size:.85rem;color:var(--mu)}
.live-strip b{color:var(--gd)}.live-strip .dot{width:9px;height:9px;border-radius:50%;background:var(--gr);box-shadow:0 0 10px var(--gr);animation:glowp 1.8s infinite}.live-strip .sep{width:1px;height:14px;background:var(--line)}
.facts{display:grid;gap:12px}.facts .fc{margin:0;display:grid;grid-template-columns:64px 1fr;gap:2px 14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(18,40,84,.6),rgba(8,18,40,.9))}
.facts .fc img{grid-row:1/3;width:64px;height:64px;animation:flt 5s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(47,140,255,.8))}.facts .fc h3,.facts .fc p{margin:0}.facts .fc p{font-size:.85rem}
@media(prefers-reduced-motion:reduce){.amb i,.fx-coin,.fx-conf,.mission .pic img,.tile .timg,.facts .fc img,.msg,.ac.rdy{animation:none!important}}

/* ===== Phase 4: Admin ===== */
.msg.ann{background:#2a2108;border-color:#8a6d1e;box-shadow:0 0 18px rgba(255,210,94,.25)}
select,textarea{width:100%;padding:12px;margin-top:4px;background:#050d20;border:1px solid var(--line);border-radius:10px;color:var(--tx);font:inherit}
textarea{resize:vertical}
.admtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;margin:0 0 4px;scrollbar-width:none}.admtabs::-webkit-scrollbar{display:none}
.admtabs a{flex:none;padding:9px 14px;border-radius:12px;color:var(--mu);font-size:.85rem;border:1px solid var(--line);background:rgba(5,12,30,.6)}
.admtabs a.on{color:#fff;font-weight:700;border-color:var(--neon);background:linear-gradient(rgba(47,140,255,.28),rgba(47,140,255,.1));box-shadow:0 0 12px rgba(47,140,255,.45)}
.adm a.li{color:inherit}.adm .li form{margin:0;flex:none}
.tag{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(47,140,255,.2);border:1px solid var(--neon);color:var(--neon2);vertical-align:middle}.tag.bad{background:#2c0e17;border-color:#8a2b3a;color:#ff8d98}
.aform .grid{margin-bottom:6px}.aform .btn{margin-top:6px}
.qa{display:flex;flex-wrap:wrap;gap:8px}.qa form{margin:0}
.adet{padding:0}.adet summary{cursor:pointer;padding:14px 16px;list-style:none}.adet summary::-webkit-details-marker{display:none}
.adet[open] summary{border-bottom:1px solid var(--line)}.adet>form{padding:14px 16px 0}.adet>form:last-child{padding-bottom:14px}
.adet .aform+form{padding-top:0}
.card.danger{border-color:#8a2b3a}.inl select{flex:1 1 140px;margin:0}

/* ===== Fix: Kartenansicht (Bild ueberdeckte Text, Spalten uneinheitlich) ===== */
.ac{--th:76px;grid-template-columns:var(--th) minmax(0,1fr) auto;align-items:start;column-gap:14px}
.ac .thumb{width:var(--th);height:var(--th);min-width:var(--th);flex:none;align-self:start;margin:0}
.ac .thumb img{position:relative;z-index:0}
.ac>div:nth-of-type(2){min-width:0;overflow:hidden}
.ac h3{line-height:1.2;word-break:normal;overflow-wrap:break-word;hyphens:auto}
.ac .gain{align-self:center}
@media(max-width:560px){
 .ac{--th:64px;grid-template-columns:var(--th) minmax(0,1fr);gap:10px 12px}
 .ac .gain{grid-column:1/-1;border-left:0;border-top:1px solid rgba(28,58,110,.7);padding:10px 0 0;max-width:none;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;text-align:left}
 .ac .gain .g{flex:0 1 auto}
 .ac .gain .x{flex:1 1 auto;margin:0;text-align:left;font-size:.8rem}
 .ac .gain .btn,.ac .gain form{flex:1 1 130px;width:auto;margin:0}
 .ac .gain .btn+.btn{margin:0 0 0 6px}
 .ac .gain small{flex:1 1 auto;text-align:right}
 .chips span{font-size:.68rem}
}
@media(max-width:340px){.ac{--th:52px}.ac .gain{flex-wrap:wrap}}

/* ===== Admin: Bild-Upload ===== */
.adet summary{display:flex;align-items:center;gap:12px}
.athumb{flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);object-fit:cover;background:#0a1630;display:block}
.adet .imgf{padding:14px 16px 0;border-bottom:1px solid var(--line);padding-bottom:14px}
.adet .imgf input[type=file]{width:100%;margin-top:4px;padding:10px;background:#050d20;border:1px dashed var(--neon);border-radius:10px;color:var(--tx)}
.aform input[type=file]{width:100%;margin-top:4px;padding:10px;background:#050d20;border:1px dashed var(--line);border-radius:10px;color:var(--tx)}

/* ===== Phase 5: Status, Fahndung, Gold, Kampf ===== */
.bar i.red{background:linear-gradient(90deg,#ff4d5a,#ff8a5c);box-shadow:0 0 10px rgba(255,77,90,.7)}.bar i.gold{background:linear-gradient(90deg,#ffb347,#ffd25e);box-shadow:0 0 10px rgba(255,210,94,.5)}
.bar i.blue{background:linear-gradient(90deg,#1676ea,#5fd0ff);box-shadow:0 0 10px rgba(47,140,255,.6)}.bar.big{height:16px;border-radius:9px}.bar i{transition:width .6s}
.strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;margin:0 0 12px;text-decoration:none;color:var(--tx)}
.strip .heat{flex:1 1 120px;min-width:100px}.strip .heat small{display:block;font-size:.7rem;color:var(--mu)}.strip .heat .bar{height:7px;margin-top:3px}
.strip.jailed{border-color:#8a2b3a;background:linear-gradient(90deg,rgba(138,43,58,.35),var(--card))}.jtag,.evtag{font-size:.75rem;border:1px solid #8a2b3a;border-radius:8px;padding:2px 8px;background:rgba(255,77,90,.12)}
.evtag{border-color:var(--or);background:rgba(255,179,71,.12);color:var(--gd);animation:pulsebd 2s infinite}@keyframes pulsebd{50%{box-shadow:0 0 12px rgba(255,179,71,.6)}}
.goldp{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--gd);background:rgba(255,210,94,.1);border:1px solid rgba(255,210,94,.45);border-radius:999px;padding:3px 11px;font-size:.85rem}
.goldp i{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4b8,#ffc93c 55%,#b8800f);box-shadow:0 0 8px rgba(255,201,60,.8)}.goldp.big{font-size:1.15rem;padding:5px 15px}
.hot{border-color:#ff6b57!important;color:#ffb3a8!important;background:rgba(255,77,90,.12)!important}
.diff{border-color:#2a4272!important}.diff.good{color:var(--gr)!important;border-color:var(--gr)!important}.diff.mid{color:var(--gd)!important;border-color:var(--gd)!important}.diff.hard{color:var(--rd)!important;border-color:var(--rd)!important}
.ttl{font-style:normal;font-size:.7rem;color:var(--gd);border:1px solid rgba(255,210,94,.5);border-radius:7px;padding:1px 6px;margin-left:4px;vertical-align:middle}
h3.sect{margin:22px 4px 10px;font-size:1rem;color:var(--neon2);letter-spacing:.04em;text-transform:uppercase}
.heatcard.hot{border-color:#ff4d5a;box-shadow:0 0 24px rgba(255,77,90,.35);animation:pulsebd 1.6s infinite}.jailcard{border-color:#8a2b3a;background:repeating-linear-gradient(90deg,rgba(138,43,58,.18) 0 8px,transparent 8px 28px),var(--card)}
.chat{padding:7px 0;border-bottom:1px solid var(--line);font-size:.9rem}.chat small{display:block;color:var(--mu);font-size:.68rem}
.qa{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.qa form{margin:0}.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ac.active{box-shadow:0 0 0 1px var(--gd),0 0 24px rgba(255,210,94,.3)}
.ac .thumb img{object-fit:cover;width:100%;height:100%;border-radius:inherit}
.chips span.hot{animation:pulsebd 2s infinite}

/* ===== Phase 11: breite Mitte, Kartenspalten, Seitenmenü ===== */
.side nav .nh{display:block;margin:12px 12px 4px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#5f7aa8}
.sfoot{display:none}
@media(min-width:900px){
 .app main{max-width:1760px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));column-gap:16px;align-items:stretch;align-content:start}
 .app main>*{grid-column:1/-1}
 .app main>.ac,.p-dashboard main>.player,.p-dashboard main>.welcome{grid-column:auto}
 .p-dashboard main>form{order:1}.p-dashboard main>.idle,.p-dashboard main>.tri,.p-dashboard main>.two,.p-dashboard main>.tiles{order:2}
 .side{display:flex;flex-direction:column;padding:14px 10px 10px;overflow:hidden}
 .side .slogo{flex:none;display:block;padding:0 6px 6px}
 .side nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1c3a6e transparent;padding-right:2px}
 .side nav a{padding:9px 12px;font-size:.95rem}
 .side nav::-webkit-scrollbar{width:6px}.side nav::-webkit-scrollbar-thumb{background:#1c3a6e;border-radius:6px}
 .sfoot{display:block;flex:none;border-top:1px solid var(--line);padding-top:8px;margin-top:6px}
 .sfoot a{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:10px;color:var(--mu)}
 .sfoot a:hover,.side nav a:hover{color:var(--neon2);background:rgba(47,140,255,.1)}
 .sfoot svg{margin:0;fill:none;stroke:currentColor;stroke-width:2}
 .sfoot a[href="admin.php"] svg{fill:currentColor;stroke:none}
 .side .out{position:static}
}
@media(min-width:900px){.side nav a{padding:7px 12px}.side nav .nh{margin-top:8px}}
@media(min-width:1760px){.p-dashboard main>.welcome{grid-column:span 2}}

/* Phase 12: Stadtmeldungen */
.news b{display:block}
.news{padding-left:10px;border-left:3px solid transparent;gap:10px;align-items:center}
.news.imp2{border-left-color:#ffb347}
.news.imp3{border-left-color:#ff5470}
.news.hint{border-left-color:#4aa3ff}

/* ===== Phase 12B: Ruf, Rivalen, Einsätze ===== */
.rup,.rdn{display:inline-flex;gap:4px;align-items:center;padding:3px 9px;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid}
.rup{color:#32d583;border-color:rgba(50,213,131,.45);background:rgba(50,213,131,.1)}.rdn{color:#ff6a7a;border-color:rgba(255,77,90,.45);background:rgba(255,77,90,.1)}
.row.li .pos{color:#32d583}.row.li .neg{color:#ff6a7a}
.facs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fac{position:relative;overflow:hidden;text-align:center;border-color:color-mix(in srgb,var(--c) 45%,var(--line));background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%),var(--card);animation:facin .7s cubic-bezier(.2,.9,.3,1.2) both}
.fac:nth-child(2){animation-delay:.12s}.fac:nth-child(3){animation-delay:.24s}
@keyframes facin{from{opacity:0;transform:translateY(18px) scale(.96)}}
.fac .fh{display:flex;gap:10px;align-items:center;justify-content:center}.fac .fi{font-size:2rem;filter:drop-shadow(0 0 10px var(--c))}.fac .fh b{display:block;font-size:1.1rem}
.fac .tier{display:inline-block;margin-top:2px;padding:2px 10px;border-radius:99px;color:var(--t);border:1px solid var(--t);box-shadow:0 0 12px color-mix(in srgb,var(--t) 50%,transparent)}
.fac.maxed:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,210,94,.22),transparent 65%);transform:translateX(-100%);animation:shine 3.4s ease-in-out infinite;pointer-events:none}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.gauge{width:100%;max-width:260px;margin:6px auto 0;display:block;overflow:visible}
.gauge .gbg{fill:none;stroke:rgba(143,163,199,.18);stroke-width:9;stroke-linecap:round}
.gauge .gfg{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:var(--v) 200;filter:drop-shadow(0 0 6px currentColor);animation:gdraw 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes gdraw{from{stroke-dasharray:0 200}}
.gauge .gtk{stroke:rgba(238,243,255,.35);stroke-width:1.4}
.gauge .needle{stroke-width:3;stroke-linecap:round;transform-origin:70px 74px;transform:rotate(var(--a));animation:nrot 1.6s cubic-bezier(.2,1.5,.4,1) both;filter:drop-shadow(0 0 4px currentColor)}
@keyframes nrot{from{transform:rotate(-90deg)}}
.gauge .hub{filter:drop-shadow(0 0 6px currentColor)}.gauge .gv{fill:var(--tx);font-size:15px;font-weight:700}
.fac .perk{color:var(--gd);margin:6px 0 2px}.fac .fnext{color:var(--mu);font-size:.85rem;margin:2px 0}.fac .fd{color:var(--mu);font-size:.82rem}
.rivals{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rival{border-color:color-mix(in srgb,var(--c) 45%,var(--line));background:radial-gradient(100% 70% at 100% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 60%),var(--card)}
.rival .rh{display:flex;gap:12px;align-items:center}.rival .rb{font-size:2rem;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--c) 25%,transparent);animation:rpulse 3s ease-in-out infinite}
@keyframes rpulse{50%{box-shadow:0 0 28px var(--c),inset 0 0 18px color-mix(in srgb,var(--c) 40%,transparent)}}
.rival h3{margin:0}.rival .rs{color:var(--c);font-weight:600}.rival .rd{color:var(--mu);font-size:.9rem}
.radar{width:100%;max-width:300px;margin:4px auto;display:block;overflow:visible}
.radar .rring{fill:none;stroke:rgba(143,163,199,.22);stroke-width:1}.radar .rax{stroke:rgba(143,163,199,.2);stroke-width:1}
.radar .rpoly{stroke-width:2.4;transform-origin:130px 108px;animation:rin 1.1s cubic-bezier(.2,.9,.3,1.1) both;filter:drop-shadow(0 0 8px var(--c))}
@keyframes rin{from{transform:scale(0);opacity:0}}
.radar .rdot{opacity:0;animation:rdot .4s ease-out forwards;filter:drop-shadow(0 0 5px var(--c))}@keyframes rdot{to{opacity:1}}
.radar .rlab{fill:var(--mu);font-size:10px}
.rel{margin:8px 0}.rel .rlh{display:flex;justify-content:space-between;gap:8px}
.relbar{position:relative;height:10px;border-radius:99px;background:rgba(143,163,199,.15);margin:6px 0;overflow:hidden}
.relbar .mid{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(238,243,255,.5);z-index:2}
.relbar .fill{position:absolute;top:0;bottom:0;border-radius:99px;box-shadow:0 0 12px currentColor;animation:relg 1s ease-out both}
@keyframes relg{from{width:0!important}}
.moves{margin:8px 0;border-top:1px solid var(--line);padding-top:6px}.moves .mv{display:flex;justify-content:space-between;gap:8px;font-size:.85rem;padding:3px 0;color:var(--tx)}
.ract{display:grid;gap:8px}.ract form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ract small{color:var(--mu)}
.prep .pj{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.prep .pj>div:first-child{flex:1 1 220px}
.ringbox{flex:0 0 150px;max-width:170px;margin:0 auto}
.ring{width:100%;display:block}.ring .rbg{fill:none;stroke:rgba(143,163,199,.16);stroke-width:10}
.ring .rfg{fill:none;stroke:#32d583;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1),stroke .4s;filter:drop-shadow(0 0 8px currentColor);color:#32d583;stroke-dasharray:327;stroke-dashoffset:327}
.ring .rfg.lo{stroke:#ff4d5a;color:#ff4d5a}.ring .rfg.mid{stroke:#ffd25e;color:#ffd25e}.ring .rfg.hi{stroke:#32d583;color:#32d583}
.ring text{fill:var(--tx);font-size:23px;font-weight:800}.ring .rsub{font-size:9px;font-weight:500;fill:var(--mu);letter-spacing:.14em;text-transform:uppercase}
.opts{display:grid;gap:8px}.opt{display:block;cursor:pointer}.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .ob{display:grid;gap:3px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(14,31,66,.55);transition:border-color .2s,box-shadow .2s,transform .15s}
.opt .ob small{color:var(--mu)}.opt:active .ob{transform:scale(.985)}
.opt input:checked+.ob{border-color:var(--neon2);box-shadow:0 0 0 1px var(--neon2),0 0 18px rgba(95,208,255,.35);background:linear-gradient(120deg,rgba(47,140,255,.22),rgba(14,31,66,.6))}
.opt input:focus-visible+.ob{outline:2px solid var(--gd);outline-offset:2px}.opt.off{opacity:.5}
.fl{list-style:none;margin:6px 0;padding:0}.fl li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid rgba(28,58,110,.6);animation:fli .35s ease-out both}
@keyframes fli{from{opacity:0;transform:translateX(-8px)}}.fl li.pos b{color:#32d583}.fl li.neg b{color:#ff6a7a}
#prepform .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:10px 0}.card.k{padding:10px;text-align:center}.card.k small{display:block;color:var(--mu)}
.report{overflow:hidden}.report.win{border-color:rgba(50,213,131,.6);box-shadow:0 0 26px rgba(50,213,131,.18)}.report.lose{border-color:rgba(255,77,90,.6);box-shadow:0 0 26px rgba(255,77,90,.18)}
.rollbar{position:relative;height:16px;border-radius:99px;background:rgba(255,77,90,.35);margin:12px 0 6px;overflow:visible}
.rollbar .zone{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#1fa86a,#32d583);box-shadow:0 0 14px rgba(50,213,131,.6);animation:zg 1s ease-out both}@keyframes zg{from{width:0!important}}
.rollbar .mark{position:absolute;top:-6px;width:4px;height:28px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 12px #fff;left:calc(var(--p) * 1%);animation:mk 1.3s cubic-bezier(.2,.9,.3,1) both}@keyframes mk{from{left:0}}
.report .rsm{color:var(--mu);margin:2px 0 8px}.tip{margin:6px 0 0;padding:8px 10px;border-radius:10px;background:rgba(255,210,94,.08);border:1px solid rgba(255,210,94,.3)}
.card.secret{border-color:rgba(199,125,255,.55);box-shadow:0 0 22px rgba(199,125,255,.18);animation:secin .8s ease-out both}@keyframes secin{from{opacity:0;filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){.fac,.gauge .gfg,.gauge .needle,.radar .rpoly,.radar .rdot,.rival .rb,.fac.maxed:after,.fl li,.rollbar .zone,.rollbar .mark,.relbar .fill,.card.secret{animation:none!important}.radar .rdot{opacity:1}.ring .rfg{transition:none}}

.facs.mini{grid-template-columns:repeat(3,1fr);gap:8px}.facs.mini .fac{display:block;text-decoration:none;color:inherit;animation:none}.facs.mini .fi{font-size:1.4rem}.facs.mini .tier{font-size:.72rem;padding:1px 7px}.gauge.mini{max-width:120px}.gauge.mini .gv{font-size:19px}