:root{
  --bg:#0d0e12;--panel:#171922;--panel2:#1f2230;--line:#2a2e3f;--text:#f2f3f7;--mut:#8a90a6;
  --gold:#ffc83d;--accent:#7c5cff;--ok:#3ddc97;--bad:#ff5d73;
  --r0:#9aa0a6;--r1:#4ade80;--r2:#3b9eff;--r3:#a855f7;--r4:#f59e0b;--r5:#ff3d71;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.35 -apple-system,"SF Pro Text",Roboto,system-ui,sans-serif;overscroll-behavior:none}
body{padding-top:env(safe-area-inset-top)}
header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px}
.who{font-weight:700;cursor:pointer}.who small{display:block;color:var(--mut);font-weight:500;font-size:12px}
.coins{font-weight:800;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums}
.xp{height:3px;background:var(--panel2);margin:0 14px 6px;border-radius:3px;overflow:hidden}.xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#c08bff);transition:width .4s}
main{padding:6px 14px 96px;min-height:70vh}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:rgba(18,19,26,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}
nav button{flex:1;background:none;border:0;color:var(--mut);padding:8px 0 6px;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:1px}
nav button span{font-size:10px}nav button.on{color:var(--text)}nav button.on span{color:var(--gold)}
h2{margin:14px 0 8px;font-size:17px}h3{margin:0 0 6px;font-size:15px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.row{display:flex;gap:8px;align-items:center}.sp{justify-content:space-between}.wrap{flex-wrap:wrap}.grow{flex:1}
.mut{color:var(--mut)}.small{font-size:12px}.gold{color:var(--gold)}.ok{color:var(--ok)}.bad{color:var(--bad)}
button.btn{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 14px;font-weight:700;font-size:15px}
button.btn.alt{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
button.btn.gold{background:var(--gold);color:#241a00}
button.btn.red{background:var(--bad)}
button.btn{white-space:nowrap}button.btn:disabled{opacity:.4}button.btn.sm{padding:7px 10px;font-size:13px;border-radius:9px}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin:0 -14px;padding:0 14px 6px}
.chip{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--mut);border-radius:20px;padding:6px 11px;font-size:13px}
.chip.on{color:var(--text);border-color:var(--accent);background:#25204a}
.bets{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bet{background:var(--panel);border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:left;color:var(--text)}
.bet.on{border-color:var(--gold);background:#2a2412}.bet.lock{opacity:.45}
.bet b{display:block;font-size:14px}.bet span{font-size:12px;color:var(--mut)}
.bar{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.item{position:relative;background:var(--panel);border:1.5px solid var(--c,var(--line));border-radius:12px;padding:9px;overflow:hidden;text-align:left;color:var(--text);width:100%}
.item::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);pointer-events:none}
.item .ico{font-size:30px;line-height:1.1;margin-top:14px}.item .b{font-weight:700;font-size:13px;margin-top:2px}.item .m{font-size:12px;color:var(--mut)}
.item .p{margin-top:5px;font-size:12px;display:flex;justify-content:space-between;gap:4px}
.item .tag{position:absolute;top:6px;right:7px;font-size:10px;color:var(--c);font-weight:700;text-transform:uppercase}
.item.sel{outline:2.5px solid var(--gold)}.item .eq{position:absolute;top:6px;left:7px;font-size:11px;color:var(--ok)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.slot{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px;color:var(--mut);background:var(--panel);padding:2px;text-align:center}
.slot.f{border-style:solid;border-color:var(--c);color:var(--text)}.slot small{font-size:9px;line-height:1.1;margin-top:2px;overflow:hidden;max-height:22px}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{background:var(--panel2);border-radius:8px;padding:6px 0;text-align:center;font-size:11px;color:var(--mut)}.day.cur{outline:2px solid var(--gold);color:var(--text)}.day.done{background:#16322a;color:var(--ok)}
#sheet{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:20;display:flex;align-items:flex-end}#sheet.hidden{display:none}
#sheet .in{width:100%;max-height:88vh;overflow:auto;background:var(--panel);border-radius:18px 18px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom));animation:up .22s ease}
@keyframes up{from{transform:translateY(40px);opacity:0}}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:#000d;border:1px solid var(--line);padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;z-index:40;max-width:88%;text-align:center;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%)}
.reel{height:150px;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:var(--panel);position:relative;margin:6px 0}
.reel::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--gold);box-shadow:0 0 12px var(--gold)}
.reel .strip{display:flex;gap:10px;padding:10px;transition:transform 2.2s cubic-bezier(.12,.7,.1,1)}
.reel .cell{flex:none;width:120px;height:130px;border-radius:12px;border:1.5px solid var(--c);background:var(--panel2);display:flex;align-items:center;justify-content:center;flex-direction:column}
.reel .cell small{font-size:11px;color:var(--mut);margin-top:4px}
.reveal{text-align:center;padding:10px 0;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.reveal .big{font-size:64px}.reveal .rar{font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.reveal.leg{filter:drop-shadow(0 0 16px var(--c))}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vs .card{margin:0}.win{border-color:var(--ok)}.lose{border-color:var(--bad)}
.lb{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line)}.lb.me{background:#25204a;border-radius:10px;padding:9px 8px}.lb .n{width:26px;color:var(--mut);text-align:center;font-weight:700}
input[type=number],input[type=text]{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px;font-size:16px}
.empty{text-align:center;color:var(--mut);padding:30px 10px}
.switch{width:46px;height:26px;background:var(--panel2);border-radius:14px;position:relative;border:1px solid var(--line)}.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--mut);border-radius:50%;transition:.2s}.switch.on{background:var(--accent)}.switch.on::after{left:22px;background:#fff}

.art{display:block;overflow:visible}svg.art .ln,svg.art .gx .ln{fill:none;stroke:rgba(0,0,0,.35);stroke-width:1.3;stroke-linecap:round}
.art.q0{filter:saturate(.55) brightness(.88) contrast(.95)}.art.q1{filter:saturate(.82) brightness(.95)}.art.q3{filter:saturate(1.1) drop-shadow(0 0 3px rgba(255,255,255,.25))}
.art.q4{filter:saturate(1.2) drop-shadow(0 0 6px rgba(255,205,70,.65))}
.art .spark{animation:tw 1.8s ease-in-out infinite;transform-origin:center}@keyframes tw{50%{opacity:.25}}
span.art{overflow:hidden;border-radius:10px}span.art img{width:100%;height:100%;object-fit:cover}span.art.q0 img{filter:sepia(.45) saturate(.6) brightness(.85)}span.art.q1 img{filter:sepia(.2) saturate(.85)}span.art.q4{box-shadow:0 0 12px rgba(255,205,70,.6)}
.item .ico{height:64px;margin-top:14px;display:flex}.slot .art{margin-bottom:-2px}

#subbar{display:flex;align-items:center;gap:10px;padding:2px 14px 0}#subbar.hidden{display:none}#subbar button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:6px 12px;font-size:14px}#subbar b{font-size:16px}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin:8px 0 12px}.search input{background:none;border:0;padding:13px 0;color:var(--text);font-size:15px;outline:0;width:100%}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 4px 10px;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:8px}.tile b{font-size:12px}
.ti{position:relative;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}.ti .dot,.dot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;background:#ff3b30;border-radius:50%;border:2px solid var(--panel)}
.shopban{background:linear-gradient(135deg,#ffd24a,#ff8a1f);color:#2a1800;border-radius:20px;padding:16px;margin-bottom:6px;box-shadow:0 0 28px rgba(255,160,40,.25)}.shopban h2{margin:0 0 2px;font-size:22px;color:#241400}.shopban .star{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:30px;flex:none}
.shopban .btn.dark{background:#2a1800;color:#ffd24a;flex:none}.pill{background:rgba(255,255,255,.45);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;color:#2a1800}
.nrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:8px;color:var(--text)}.nrow b{display:block}.nrow small{color:var(--mut);font-size:12px}
.wheelbox{position:relative;width:290px;height:290px;margin:10px auto}.ptr{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3;font-size:30px;color:#fff;text-shadow:0 2px 6px #000}
.wheel{position:relative;width:290px;height:290px;border-radius:50%;border:6px solid #fff3;box-shadow:0 0 30px rgba(124,92,255,.35);overflow:hidden}.wheel span{position:absolute;left:50%;top:50%;width:90px;margin-left:-45px;margin-top:-10px;text-align:center;font-weight:800;font-size:13px;color:#fff;text-shadow:0 1px 3px #0009;transform-origin:center}
.wheel .hub{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:26px;border:3px solid #fff4}
.sgrid{display:grid;grid-template-columns:34px 1fr 1fr;gap:6px;align-items:center}.sgrid .lv{text-align:center;font-weight:700;color:var(--mut)}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 6px;text-align:center;font-size:12px;color:var(--mut);width:100%}.sc.ready{background:var(--gold);color:#241a00;font-weight:800;border:0}.sc.done{color:var(--ok);background:#14281f}

/* ---------- v4 ---------- */
.ban{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:9px 11px;margin-bottom:8px;background:var(--panel)}
.ban .be{font-size:24px}.ban.theme{background:linear-gradient(90deg,#2a1f4d,#1d2a4a)}
.ban.lim{border-color:var(--c);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,#14151b),#14151b)}
.ban.luck{background:#142418}
.spec{position:absolute;bottom:6px;right:7px;font-size:9px;color:#ffd75e;font-weight:800;letter-spacing:.04em}
.spec.big2{position:static;font-size:11px;margin-bottom:4px}
.rcard{border:2px solid var(--c);border-radius:16px;background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);position:relative;overflow:hidden;padding:12px 8px}
.rcard.r3,.rcard.r4,.rcard.r5{box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)}
.rcard.r4::after,.rcard.r5::after,.rcard.r3::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(15deg);animation:shine 2.2s ease-in-out infinite}
@keyframes shine{0%{left:-60%}60%,100%{left:130%}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:fall 1.9s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),420px) rotate(var(--rot));opacity:0}}
.flash{position:fixed;inset:0;background:radial-gradient(circle,var(--c),transparent 70%);opacity:.0;pointer-events:none;z-index:99;animation:fl .9s ease-out}
@keyframes fl{0%{opacity:.75}100%{opacity:0}}
.shake{animation:shk .6s}
@keyframes shk{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
/* рамки профиля */
.who{border-radius:12px;padding:2px 8px}
.fr-gold{box-shadow:0 0 0 2px #f5c542,0 0 12px #f5c54288}.fr-neon{box-shadow:0 0 0 2px #39ff14,0 0 14px #39ff14aa}
.fr-ice{box-shadow:0 0 0 2px #7fdcff,0 0 12px #7fdcff88}.fr-fire{box-shadow:0 0 0 2px #ff6a00,0 0 14px #ff3d00aa}
.fr-royal{box-shadow:0 0 0 2px #b36bff,0 0 0 4px #f5c542,0 0 14px #b36bff88}
.fr-rainbow{box-shadow:0 0 0 2px #ff3d71,0 0 0 4px #ffd60a,0 0 0 6px #30d158,0 0 14px #5e5ce6aa}
/* фоны карточек */
[data-bg=dusk] .item,.bgp-dusk{background:linear-gradient(160deg,#2b2350,#1a1d3a)}[data-bg=mint] .item,.bgp-mint{background:linear-gradient(160deg,#173c35,#10231f)}
[data-bg=rose] .item,.bgp-rose{background:linear-gradient(160deg,#4a2236,#2a141f)}[data-bg=carbon] .item,.bgp-carbon{background:repeating-linear-gradient(45deg,#1b1c20 0 4px,#232429 4px 8px)}
[data-bg=aurora] .item,.bgp-aurora{background:linear-gradient(160deg,#0f3d3a,#2b1f5c 60%,#0f2d44)}[data-bg=sakura] .item,.bgp-sakura{background:linear-gradient(160deg,#5a2b44,#2f1830 60%,#3a2038)}
.perkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.perk{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;text-align:center}
.pv{width:54px;height:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--panel2)}
.lb.me{border-color:var(--gold)}

/* ---------- v5: износ и блеск поверх настоящих фото ---------- */
span.art{position:relative}span.art img{object-fit:contain;background:#fff}
span.art.q0 img{filter:sepia(.5) saturate(.55) brightness(.8) contrast(.92)}
span.art::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}
span.art.q0::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .16 0 0 0 0 .08 0 0 0 1.7 -.6'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3Cpath d='M12 30 l30 22 M70 12 l18 40 M30 90 l40 -14 M84 84 l20 -26 M52 64 l14 22' stroke='%23fff' stroke-opacity='.6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-size:60% 60%;mix-blend-mode:multiply;opacity:.8}
span.art.q1::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 1.2 -.55'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3Cpath d='M20 20 l24 14 M80 70 l16 20' stroke='%23fff' stroke-opacity='.4' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");background-size:70% 70%;mix-blend-mode:multiply;opacity:.55}
span.art.q3::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);opacity:.5}
span.art.q4::after{background:linear-gradient(115deg,transparent 30%,rgba(255,236,160,.75) 48%,transparent 62%);background-size:250% 100%;animation:gold 2.6s linear infinite}
@keyframes gold{from{background-position:150% 0}to{background-position:-60% 0}}

/* ---------- v6: фото-вырезки без фона ---------- */
span.art{background:none;overflow:visible;border-radius:0}span.art img{background:none;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
span.art::after{-webkit-mask-image:var(--m);mask-image:var(--m);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;border-radius:0}
span.art.q0 img{filter:sepia(.5) saturate(.55) brightness(.8) contrast(.92) drop-shadow(0 3px 4px rgba(0,0,0,.45))}
span.art.q1 img{filter:sepia(.2) saturate(.85) drop-shadow(0 3px 4px rgba(0,0,0,.45))}
span.art.q3 img{filter:saturate(1.1) drop-shadow(0 0 4px rgba(255,255,255,.35))}
span.art.q4{box-shadow:none}span.art.q4 img{filter:saturate(1.2) drop-shadow(0 0 7px rgba(255,205,70,.8))}