:root{--bg:#1d1838;--accent:#9dff6a;--accent2:#ffb13d;--text:#f6f3ff}
.lobby{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent),color-mix(in srgb,var(--bg) 70%,transparent) 30%,color-mix(in srgb,var(--bg) 92%,transparent));gap:8px;padding-bottom:calc(env(safe-area-inset-bottom) + 28px)}
.lobbyHead{margin:8px 0 0;font-size:12px;letter-spacing:.22em;opacity:.85}
.coins{margin:0;font-size:18px;font-weight:900;color:var(--accent2);text-shadow:0 0 10px color-mix(in srgb,var(--accent2) 50%,transparent)}
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,104px));gap:8px;justify-content:center;width:100%}
.picks button{min-height:78px;padding:6px 4px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--bg) 72%,transparent);font-weight:800;font-size:13px;line-height:1.15}
.picks button .ic{display:block;font-size:24px;line-height:1.1}
.picks button small{display:block;font-weight:600;font-size:10.5px;opacity:.85;margin-top:3px}
.picks button.on{background:color-mix(in srgb,var(--accent) 34%,transparent);border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.picks button.locked{opacity:.55}
.picks button.can{border-color:var(--accent2);opacity:.9}
.skins{grid-template-columns:repeat(4,minmax(0,78px))}
.seg{display:inline-flex;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:14px;overflow:hidden}
.seg button{padding:10px 16px;border:0;background:color-mix(in srgb,var(--bg) 72%,transparent);font-weight:900;letter-spacing:.1em;font-size:13px}
.seg button.on{background:var(--accent);color:#14102a}
.seg button#bloodOnBtn.on{background:#e0304a;color:#fff}
.bloodBox[hidden]{display:none}
.note{margin:4px 0 0;font-size:11px;opacity:.7}
.unlock{min-height:1em;margin:0;font-size:13px;color:var(--accent2)}
.help{max-width:460px;text-align:left;margin:0;padding-left:18px;font-size:14px;line-height:1.45}
.help li{margin:0 0 8px}
.cards{display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px}
.cards button{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:18px;border:2px solid var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--bg) 85%,transparent));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);animation:cardIn .35s ease-out both}
.cards button:nth-child(2){animation-delay:.07s}.cards button:nth-child(3){animation-delay:.14s}
.cards button.weapon{border-color:var(--accent2);background:linear-gradient(135deg,color-mix(in srgb,var(--accent2) 28%,transparent),color-mix(in srgb,var(--bg) 85%,transparent))}
.cards .ic{grid-row:1/4;font-size:36px;text-align:center}
.cards b{font-size:17px;letter-spacing:.03em}
.cards small{font-size:11px;letter-spacing:.12em;color:var(--accent2);font-weight:800}
.cards span{font-size:13px;opacity:.9;line-height:1.3}
@keyframes cardIn{0%{opacity:0;transform:translateY(24px) scale(.94)}100%{opacity:1;transform:none}}
.ups{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:420px}
.ups span{padding:4px 8px;border-radius:10px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);font-size:12px;font-weight:700}
.track{position:absolute;top:calc(env(safe-area-inset-top) + 56px);left:12px;right:12px;height:12px;border-radius:7px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.15)}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#4dd2ff,var(--accent));box-shadow:0 0 10px var(--accent);transition:width .12s}
.track .lvl{position:absolute;right:6px;top:-1px;font-size:10px;font-weight:900;letter-spacing:.1em;text-shadow:0 1px 2px #000}
.bossBox{position:absolute;top:calc(env(safe-area-inset-top) + 76px);left:24px;right:24px;text-align:center;font-weight:900;letter-spacing:.12em;font-size:13px;color:#ffd0d8;text-shadow:0 0 8px #c00,0 1px 2px #000}
.bossBox[hidden]{display:none}
.bossBar{height:10px;margin-top:3px;border-radius:6px;background:rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,120,140,.5)}
.bossBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff3a5a,#ffb13d)}
.heroBar{position:absolute;width:54px;height:7px;margin-left:-27px;border-radius:4px;background:rgba(0,0,0,.55);overflow:hidden;border:1px solid rgba(255,255,255,.35)}
.heroBar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4d6d,#7dff6b)}
.heroBar.low i{background:#ff4d6d;animation:blink .4s infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.4}}
.stickBase{position:fixed;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);pointer-events:none;z-index:4}
.stickBase[hidden]{display:none}
.stickKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 65%,transparent);border:2px solid var(--accent);box-shadow:0 0 12px var(--accent)}
.hint{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 22px);left:0;right:0;text-align:center;font-size:13px;opacity:.85;text-shadow:0 1px 4px #000;margin:0;padding:0 16px}
.pop.boss{color:#ff8aa0}
.pop.heal{color:#7dff6b}
.flash{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle,transparent 40%,rgba(255,40,60,.45));opacity:0;transition:opacity .25s}
.flash.on{opacity:1;transition:none}
.flash.lv{background:radial-gradient(circle,rgba(157,255,106,.35),transparent 70%)}
.perks button small.pips{letter-spacing:.12em;color:var(--accent);opacity:1}
.perks button.max{border-color:var(--accent);opacity:1}
.perks button.bought{animation:perkPop .45s ease-out}
@keyframes perkPop{0%{transform:scale(1)}40%{transform:scale(1.12);box-shadow:0 0 24px var(--accent2)}100%{transform:scale(1)}}
.ups span.perm{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
/* powers (tester report ZG-85): current power, roll button, odds, the spinning reel */
.powerNow{width:100%;max-width:340px}
.pcard{display:grid;grid-template-columns:48px 1fr;column-gap:10px;align-items:center;text-align:left;padding:10px 12px;border-radius:16px;border:2px solid var(--c);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 28%,transparent),color-mix(in srgb,var(--bg) 85%,transparent));box-shadow:0 0 16px color-mix(in srgb,var(--c) 45%,transparent)}
.pcard .ic{grid-row:1/5;font-size:34px;text-align:center}
.pcard b{font-size:16px}
.pcard small{font-size:10.5px;letter-spacing:.12em;font-weight:800;color:var(--c)}
.pcard span{font-size:12px;opacity:.9;line-height:1.3}
.pcard small.fl{letter-spacing:.04em;color:#fff;opacity:.9}
.roll{min-width:240px;padding:12px 20px;font-size:16px;font-weight:900;letter-spacing:.1em;border-radius:14px;border:2px solid var(--accent2);background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 38%,transparent),color-mix(in srgb,#c07ad8 26%,transparent));opacity:.6}
.roll.can{opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--accent2) 55%,transparent);animation:rollGlow 1.6s ease-in-out infinite alternate}
.roll.confirm{border-color:#ff4d6d;background:color-mix(in srgb,#ff4d6d 40%,transparent);animation:none}
@keyframes rollGlow{from{box-shadow:0 0 8px color-mix(in srgb,var(--accent2) 40%,transparent)}to{box-shadow:0 0 22px color-mix(in srgb,#c07ad8 70%,transparent)}}
.odds{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:360px}
.odds span{font-size:11px;padding:3px 7px;border-radius:9px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--bg) 70%,transparent)}
.odds span b{color:var(--c)}
.odds span.on{background:color-mix(in srgb,var(--c) 30%,transparent)}
.picks.off button{opacity:.35}
.reelBox{position:relative;width:min(300px,84vw);height:252px;overflow:hidden;border-radius:20px;border:2px solid color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--bg) 88%,transparent);box-shadow:inset 0 30px 30px -10px rgba(0,0,0,.6),inset 0 -30px 30px -10px rgba(0,0,0,.6)}
.reelBox::after{content:"";position:absolute;left:6px;right:6px;top:84px;height:84px;border-radius:14px;border:2px solid #fff;pointer-events:none;box-shadow:0 0 14px rgba(255,255,255,.5)}
.reelBox::before{content:"";position:absolute;inset:-60%;opacity:0;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 45%,transparent) 0 10deg,transparent 10deg 24deg);pointer-events:none}
.reelBox.done{border-color:var(--c);box-shadow:0 0 30px var(--c)}
.reelBox.done::after{border-color:var(--c);box-shadow:0 0 22px var(--c)}
.reelBox.rare::before{opacity:1;animation:rays 4s linear infinite}
@keyframes rays{to{transform:rotate(360deg)}}
.reel{position:relative;will-change:transform}
.reel .ri{height:84px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:18px;color:var(--c)}
.reel .ri span{font-size:40px}
.reelBox.done .ri.w{animation:winPop .6s ease-out both}
@keyframes winPop{0%{transform:scale(1)}45%{transform:scale(1.25)}100%{transform:scale(1.08)}}
.rollRarity{margin:4px 0 0;min-height:1em;font-size:13px;font-weight:900;letter-spacing:.24em}
.rollName{margin:0;min-height:1.2em;font-size:clamp(24px,7vw,34px);font-weight:900;color:#fff;text-shadow:0 0 18px var(--c,#fff),0 2px 0 rgba(0,0,0,.4)}
.rollName:not(:empty){animation:winPop .6s ease-out both}
.flash.bf{background:radial-gradient(circle,rgba(0,0,0,.15) 20%,rgba(0,0,0,.75) 70%),radial-gradient(circle,rgba(255,16,48,.35),transparent 60%)}
.pop.bf{font-size:22px;color:#fff;text-shadow:0 0 6px #000,0 0 14px #ff1030,0 2px 0 #000}
.powerTag{font-weight:800}
.ups span.pw{border-color:color-mix(in srgb,#c07ad8 60%,transparent)}
body.nightmare .lobby{background:linear-gradient(180deg,color-mix(in srgb,#3a0010 45%,transparent),color-mix(in srgb,#1a0008 80%,transparent) 30%,color-mix(in srgb,var(--bg) 94%,transparent))}
#modeNightmare.on{background:#7a0a2a;color:#fff}
.lobby>*{flex-shrink:0}
/* ZG-91: damage numbers — small red numbers floating up from the hit zombie (a fixed pool, moved with transform) */
.dmg{position:absolute;left:0;top:0;font-weight:900;font-size:13px;line-height:1;color:#ff4a4a;text-shadow:0 1px 0 #000,0 0 3px #000,1px 0 0 #000,-1px 0 0 #000;white-space:nowrap;pointer-events:none;will-change:transform,opacity}
.dmg[hidden]{display:none}
.dmg.burn{font-size:11px;color:#ff9a3a}
.dmg.crit{font-size:18px;color:#ffd24d;text-shadow:0 1px 0 #000,0 0 4px #000,0 0 10px rgba(255,140,0,.8)}
.dmg.bf{font-size:22px;color:#fff;text-shadow:0 0 3px #000,0 0 8px #000,0 0 14px #ff1030}
/* ZG-92: dodge button (Dodge master), the ring fills while it rests */
.dodgeBtn{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 76px);width:78px;height:78px;border-radius:50%;padding:0;pointer-events:auto;touch-action:none;border:3px solid rgba(159,232,255,.45);background:conic-gradient(rgba(159,232,255,.55) var(--p,0%),rgba(20,20,40,.55) 0);box-shadow:0 4px 18px rgba(0,0,0,.4);font-size:34px;line-height:72px;text-align:center;opacity:.8}
.dodgeBtn[hidden]{display:none}
.dodgeBtn i{position:absolute;inset:7px;border-radius:50%;background:rgba(20,20,40,.55);z-index:-1}
.dodgeBtn span{position:relative}
.dodgeBtn.ready{opacity:1;border-color:#9fe8ff;box-shadow:0 0 18px rgba(159,232,255,.8),0 4px 18px rgba(0,0,0,.4);animation:dodgeReady 1s ease-in-out infinite alternate}
@keyframes dodgeReady{to{box-shadow:0 0 30px rgba(159,232,255,1),0 4px 18px rgba(0,0,0,.4)}}
/* ZG-92: odds table — one row per rarity */
.odds{flex-direction:column;align-items:stretch;gap:4px}
.oddsRow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:4px 6px;border-radius:11px;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--bg) 75%,transparent))}
.oddsRow b{font-size:10.5px;letter-spacing:.12em;color:var(--c);margin-right:4px}
.oddsRow span{font-size:11px;padding:2px 6px;border-radius:8px;border:0;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.oddsRow span.on{background:color-mix(in srgb,var(--c) 40%,transparent);box-shadow:0 0 8px var(--c)}
.oddsRow.r-mythic{background:linear-gradient(90deg,rgba(0,0,0,.85),color-mix(in srgb,#ff2a4a 30%,#000))}
/* ZG-92: the roll — rarity colours on the reel, a glow before the stop, the rarity slam, then the power */
.reel .ri.r-mythic{background:linear-gradient(90deg,transparent,rgba(0,0,0,.6),transparent)}
.reelBox.tease{animation:tease .18s ease-in-out infinite alternate}
@keyframes tease{from{box-shadow:0 0 6px var(--c);border-color:color-mix(in srgb,var(--c) 40%,transparent)}to{box-shadow:0 0 34px var(--c);border-color:var(--c)}}
.reelBox.r-epic::before,.reelBox.r-legendary::before,.reelBox.r-mythic::before{opacity:1;animation:rays 4s linear infinite}
.reelBox.r-legendary::before{animation-duration:2.6s}
.reelBox.r-mythic{background:#000}
.reelBox.r-mythic::before{background:repeating-conic-gradient(from 0deg,rgba(255,42,74,.55) 0 8deg,rgba(0,0,0,.9) 8deg 20deg);animation-duration:1.8s}
#screenRoll h2{transition:color .2s}
#screenRoll.slam h2{color:var(--c);font-size:clamp(30px,9vw,46px);text-shadow:0 0 22px var(--c),0 3px 0 rgba(0,0,0,.5);animation:slam .45s cubic-bezier(.2,1.6,.4,1) both}
#screenRoll.named h2{font-size:clamp(22px,6vw,30px);animation:none}
@keyframes slam{0%{transform:scale(2.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
#screenRoll.r-rare{background:radial-gradient(ellipse at 50% 40%,rgba(77,157,255,.35),color-mix(in srgb,var(--bg) 92%,transparent) 70%)}
#screenRoll.r-epic{background:radial-gradient(ellipse at 50% 40%,rgba(182,92,255,.42),color-mix(in srgb,var(--bg) 92%,transparent) 70%)}
#screenRoll.r-legendary{background:radial-gradient(ellipse at 50% 40%,rgba(255,194,61,.45),color-mix(in srgb,var(--bg) 92%,transparent) 70%)}
#screenRoll.r-mythic{background:radial-gradient(ellipse at 50% 40%,rgba(255,42,74,.45),#000 68%)}
#screenRoll.r-legendary.slam .reelBox,#screenRoll.r-mythic.slam .reelBox{animation:shake .5s linear}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-5px,-2px)}80%{transform:translate(4px,3px)}}
#screenRoll.r-mythic .rollName{text-shadow:0 0 10px #000,0 0 24px #ff2a4a,0 2px 0 #000}
.flash.ep{background:radial-gradient(circle,rgba(182,92,255,.5),transparent 70%)}
.flash.lg{background:radial-gradient(circle,rgba(255,214,90,.6),rgba(255,160,40,.2) 50%,transparent 75%)}
/* ZG-87: star cards */
.cards button.star{border-color:#ffd24d;background:linear-gradient(135deg,rgba(255,210,77,.3),color-mix(in srgb,var(--bg) 85%,transparent));box-shadow:0 0 22px rgba(255,210,77,.45)}
.cards button.star small{color:#ffd24d}
.ups span.star{border-color:rgba(255,210,77,.7)}
/* 0.6.0 (ZG-95, ZG-101): the save line, power slot, scythe, code field, test badge, admin panel, leaderboard */
.saveInfo{margin:0;font-size:12px;opacity:.85}
.slotBox{display:flex;align-items:center;gap:8px;justify-content:center;width:min(100%,360px);margin:2px auto 0;padding:6px 10px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;font-size:13px}
.slotBox .slotLabel{font-weight:900;letter-spacing:.08em;opacity:.85}
.slotNow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;min-width:0}
.slotNow small{opacity:.75;font-size:11px}
.scytheBox{margin:2px 0}
#scytheBtn.on{border-color:#ff2a4a;background:color-mix(in srgb,#d0203a 35%,transparent);box-shadow:0 0 14px #d0203a}
#scytheBtn:disabled{opacity:.5}
.codeBox{display:flex;gap:6px;justify-content:center;width:min(100%,300px);margin:8px auto 0}
.codeBox input{flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--text);font:inherit;font-size:16px;letter-spacing:.12em;text-transform:uppercase}
.codeBox button.small{min-width:0;width:auto;padding:9px 14px}
.testBadge{position:fixed;top:calc(env(safe-area-inset-top) + 64px);right:10px;z-index:20;padding:3px 12px;border-radius:999px;background:#ffd24d;color:#1d1838;font-weight:900;font-size:13px;letter-spacing:.14em;box-shadow:0 0 14px #ffd24d;pointer-events:none}
.testBadge[hidden]{display:none}
.adminBody{width:min(100%,400px)}
.adminRow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.adminRow button.small{min-width:0;width:auto;padding:8px 10px;font-size:12px;letter-spacing:.04em}
.adminRow button.on{border-color:var(--accent2);background:color-mix(in srgb,var(--accent2) 30%,transparent)}
.lbTabs{display:flex;gap:6px;justify-content:center;width:min(100%,380px);margin:6px auto 10px}
.lbTabs button.small{flex:1 1 0;min-width:0;width:auto;margin:0;padding-left:4px;padding-right:4px}
.lbTabs button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}
.lbList{width:min(100%,380px);max-height:52vh;overflow-y:auto;margin:0 auto}
.lb{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.lb td{padding:5px 4px;border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.lb td.pl{width:2.6em;text-align:right;font-weight:800;opacity:.85}
.lb td.av{width:30px}
.lb td.nk{font-weight:700;overflow-wrap:anywhere}
.lb td.sc{text-align:right;font-weight:800;color:var(--accent2);white-space:nowrap}
.lb tr.mine td{background:color-mix(in srgb,var(--accent2) 22%,transparent)}
.lb tr.mine td.pl{box-shadow:inset 3px 0 0 var(--accent2)}
.lb tr.gap td{text-align:center;opacity:.6;border:0}