@font-face{font-family:Unbounded;src:url('/fonts/unbounded.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Golos;src:url('/fonts/golos.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{
  --bg:#18212d;--bg2:#1e2836;--card:#232f3e;--card2:#2a3849;--line:#ffffff14;--line2:#ffffff22;
  --text:#f3f7fc;--muted:#8a9bb2;--accent:#3ea6ff;--accent2:#6ccaff;--accent-ink:#0b2a4f;
  --ok:#38d39f;--warn:#ffbf47;--bad:#ff5f6d;--violet:#8d6bff;
  --r-sm:12px;--r:18px;--r-lg:26px;
  --safe-top:0px;--safe-bottom:0px;
  --top:calc(var(--safe-top) + env(safe-area-inset-top,0px));--bottom:calc(var(--safe-bottom) + env(safe-area-inset-bottom,0px));
  --nav-h:66px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:15px/1.4 Golos,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.3px}
p{margin:0}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.pad{padding:18px 0}.mono{font-family:ui-monospace,Menlo,monospace}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}.hscroll::-webkit-scrollbar{display:none}
.coin{width:16px;height:16px;flex:none}.coin.lg{width:34px;height:34px}

/* boot */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:14px}
.boot img{animation:bob 1.6s ease-in-out infinite}
.boot-dots{display:flex;gap:6px}.boot-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:dot 1s infinite}.boot-dots i:nth-child(2){animation-delay:.15s}.boot-dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}
@keyframes bob{50%{transform:translateY(-6px)}}

/* shell */
#app{min-height:100vh;padding:calc(var(--top) + 64px) 16px calc(var(--bottom) + var(--nav-h) + 26px)}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;padding:calc(var(--top) + 10px) 16px 10px;display:flex;align-items:center;gap:10px;background:linear-gradient(var(--bg) 70%,#18212d00)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#4aa8ff,#7a5cff);display:grid;place-items:center;font-weight:700;overflow:hidden;flex:none;box-shadow:0 0 0 2px #ffffff14}
.avatar img{width:100%;height:100%;object-fit:cover}
.back-btn{display:none;width:38px;height:38px;border-radius:50%;background:var(--card);place-items:center}
.back-btn svg{width:22px;height:22px;transform:rotate(180deg)}
body.has-back .back-btn{display:grid}body.has-back .avatar{display:none}
.badge-preview{font-size:11px;color:var(--warn);border:1px solid #ffbf4755;padding:3px 8px;border-radius:20px}
.balance-chip{margin-left:auto;display:flex;align-items:center;gap:6px;height:38px;padding:0 4px 0 12px;border-radius:30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.balance-chip b{font-weight:750;font-variant-numeric:tabular-nums}
.balance-chip small{font-size:9px;font-weight:700;letter-spacing:.5px;color:var(--accent2);background:#3ea6ff1f;padding:2px 5px;border-radius:6px}
.balance-chip .plus{width:30px;height:30px;border-radius:50%;background:var(--card2);display:grid;place-items:center}.balance-chip .plus svg{width:16px;height:16px}
.tabbar{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:calc(var(--bottom) + 10px);width:min(420px,calc(100% - 24px));height:var(--nav-h);display:grid;grid-template-columns:repeat(4,1fr);padding:6px;border-radius:34px;background:#222d3cdd;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px #0006,inset 0 0 0 1px var(--line2);transition:transform .25s,opacity .25s}
.tabbar a{display:grid;justify-items:center;align-content:center;gap:2px;border-radius:28px;color:var(--muted);font-size:11px;font-weight:600;transition:background .2s,color .2s}
.tabbar .ti svg{width:24px;height:24px}
.tabbar a.active{background:#ffffff12;color:var(--accent2)}
body.kb-open .tabbar,body.has-back .tabbar{transform:translate(-50%,140%);opacity:0;pointer-events:none}
body.has-back #app{padding-bottom:calc(var(--bottom) + 28px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:14px;background:var(--card2);font-weight:700;font-size:15px;transition:transform .1s,opacity .2s,background .2s;white-space:nowrap}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;pointer-events:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(180deg,#5ab8ff,#2f8cf0);color:#fff;box-shadow:0 6px 18px #2f8cf044}
.btn-win{background:linear-gradient(180deg,#5fe3b0,#1fae7a);box-shadow:0 6px 18px #1fae7a44}
.btn-ghost{background:#ffffff0d;box-shadow:inset 0 0 0 1px var(--line2)}
.btn-white{background:#fff;color:#1767c9}.btn-glass{background:#ffffff1f;color:#fff;box-shadow:inset 0 0 0 1px #ffffff40}
.btn-link{background:none;color:var(--accent2);height:auto;padding:8px}
.btn-lg{height:52px;border-radius:16px;font-size:16px}.btn-sm{height:34px;padding:0 12px;border-radius:11px;font-size:13px}.btn-block{width:100%}
.btn.loading{position:relative;color:transparent!important}.btn.loading::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:spin .7s linear infinite}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card)}.icon-btn svg{width:20px;height:20px}
.icon-btn.round{border-radius:50%;width:46px;height:46px;box-shadow:inset 0 0 0 1px var(--line2)}.icon-btn.lg{width:50px;height:50px}.icon-btn.lg svg{width:24px;height:24px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;vertical-align:-1px;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* generic */
.page{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.page-head h1,.page-title{font-size:28px}.page-head p{color:var(--muted);margin-top:4px;font-size:14px}
.page-head.row{display:flex;justify-content:space-between;align-items:flex-start}
.section-title{font-size:24px;margin-top:6px}.section-title.sm{font-size:18px;display:flex;align-items:center;gap:8px}
.price{display:inline-flex;align-items:center;gap:4px;font-weight:750;font-variant-numeric:tabular-nums}.price.lg{font-size:20px}.price.sm{font-size:13px}.price small{font-weight:500;color:var(--muted);font-size:11px}
.demo-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:3px 7px;border-radius:7px;background:#ffbf4722;color:var(--warn)}
.demo-tag.abs{position:absolute;top:10px;left:10px}.demo-tag.sm{top:6px;left:6px;font-size:8px;padding:2px 5px}
.notice{padding:12px 14px;border-radius:var(--r-sm);background:var(--card);font-size:13px;color:var(--muted);line-height:1.45}.notice.warn{color:var(--warn);background:#ffbf4714}
.fineprint{font-size:12px;color:var(--muted);text-align:center;padding:4px 10px}
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:36px 20px}
.empty h3{font-size:18px}.empty p{color:var(--muted);font-size:14px;max-width:280px}
.empty-icon{color:#5b6d86}.empty-icon svg{width:52px;height:52px}
.empty-buba{animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 8px 16px #0005)}
.empty .btn{margin-top:8px}
.boot-error{min-height:100vh;align-content:center}
.status{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:3px 8px;border-radius:8px}
.st-wait{color:var(--warn);background:#ffbf471c}.st-proc{color:var(--accent2);background:#3ea6ff1f}.st-done{color:var(--ok);background:#38d39f1c}.st-bad{color:var(--bad);background:#ff5f6d1c}.st-off{color:var(--muted);background:#ffffff0d}
.summary{display:grid;gap:10px;padding:14px;border-radius:var(--r);background:var(--card)}
.summary>div{display:flex;justify-content:space-between;align-items:center;gap:10px}.summary span{color:var(--muted);font-size:14px}.summary s{color:var(--muted);font-weight:500;margin-right:4px}
#toast{position:fixed;z-index:100;left:50%;top:calc(var(--top) + 64px);transform:translate(-50%,-20px);opacity:0;pointer-events:none;max-width:calc(100% - 32px);padding:11px 16px;border-radius:14px;background:#2f3d50;box-shadow:0 10px 30px #0007;font-size:14px;font-weight:600;transition:.25s}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.err{background:#5a2731}
.rules{background:var(--card);border-radius:var(--r);padding:0 14px}
.rules summary{padding:13px 0;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}.rules summary::after{content:'+';color:var(--muted);font-size:20px;line-height:1}.rules[open] summary::after{content:'−'}
.rules summary::-webkit-details-marker{display:none}.rules div{padding:0 0 14px;color:var(--muted);font-size:13.5px;line-height:1.5}

/* skeletons */
.skel{border-radius:var(--r);background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);background-size:300% 100%;animation:shimmer 1.3s linear infinite}
.skel-lot{aspect-ratio:.8}.skel-row{height:74px;margin-bottom:10px}.skel-hero{aspect-ratio:1.2;border-radius:var(--r-lg)}
.skel-more{display:contents}
@keyframes shimmer{to{background-position:-150% 0}}

/* onboarding gate */
.gate{min-height:100vh;display:grid;align-content:center;justify-items:center;text-align:center;gap:14px;padding:calc(var(--top) + 24px) 24px calc(var(--bottom) + 24px)}
.gate-art{position:relative}.gate-art img{position:relative;animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 16px 24px #0006)}
.gate-glow{position:absolute;inset:10% -10%;border-radius:50%;background:radial-gradient(#3ea6ff66,transparent 65%);filter:blur(10px)}
.gate h1{font:800 34px/1 Unbounded,sans-serif;letter-spacing:-1px}.gate h1 span{color:var(--accent2)}
.gate p{color:var(--muted);max-width:300px}
.gate-actions{display:grid;gap:10px;width:min(340px,100%);margin-top:6px}
.gate-msg{display:none;padding:10px 14px;border-radius:12px;font-size:14px;max-width:340px}.gate-msg.show{display:block}.gate-msg.warn{background:#ffbf4718;color:var(--warn)}.gate-msg.err{background:#ff5f6d18;color:var(--bad)}

/* history */
.history{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.history li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card)}
.hi-art{flex:none}.hi-main{flex:1;min-width:0;display:grid}.hi-main b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hi-main small{color:var(--muted);font-size:12px}
.hi-val{display:flex;align-items:center;gap:3px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}.pos{color:var(--ok)}.neg{color:var(--muted)}
.hi-badge{flex:none;min-width:52px;text-align:center;font-weight:800;font-size:13px;padding:6px;border-radius:10px}.hi-badge.win{background:#38d39f1f;color:var(--ok)}.hi-badge.lose{background:#ff5f6d1a;color:var(--bad)}

/* bet panel */
.panel{display:grid;gap:12px;padding:14px;border-radius:var(--r);background:var(--card)}
.panel.locked .bet,.panel.locked .mines-count{opacity:.45;pointer-events:none}
.bet label,.mines-count label{font-size:13px;color:var(--muted);font-weight:600}
.bet-row{display:flex;gap:8px;margin-top:6px}
.bet-step{width:48px;height:46px;border-radius:12px;background:var(--card2);font-weight:800}
.bet-field{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:12px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2)}
.bet-field input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:18px;font-weight:750;font-variant-numeric:tabular-nums}
.bet-quick{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.bet-quick button{flex:1;min-width:52px;height:32px;border-radius:10px;background:var(--bg2);font-size:13px;font-weight:700;color:var(--muted)}
.seg{display:flex;gap:6px;margin-top:6px}.seg button{flex:1;height:38px;border-radius:11px;background:var(--bg2);font-weight:800}.seg button.on{background:var(--accent);color:#fff}

/* rocket */
.rocket-stage{position:relative;height:260px;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(circle at 80% 0,#2b5d9f,transparent 60%),linear-gradient(#18304f,#1b2638)}
.rocket-stage::before{content:'';position:absolute;inset:0;background-image:radial-gradient(#ffffff55 1px,transparent 1.5px);background-size:38px 38px;opacity:.5}
.rocket-canvas{position:absolute;inset:0;width:100%;height:100%}
.rocket-ship{position:absolute;left:0;top:0;width:60px;height:100px;transition:transform .05s linear}
.rk-body{width:44px;height:74px;margin:0 auto}.rk-buba{position:absolute;width:34px;left:13px;top:-16px}
.rk-flame{position:absolute;left:50%;top:70px;width:18px;height:24px;margin-left:-9px;border-radius:50% 50% 50% 50%/30% 30% 70% 70%;background:radial-gradient(#fff6c0,#ff9a3a 60%,transparent 72%);animation:flame .2s infinite alternate}
.rocket-stage[data-phase=idle] .rk-flame,.rocket-stage[data-phase=countdown] .rk-flame{opacity:.3}
.rocket-stage[data-phase=crashed] .rocket-ship{opacity:0;transition:opacity .3s}
.rocket-mult{position:absolute;left:0;right:0;top:34%;text-align:center;pointer-events:none}
.rocket-mult b{display:block;font:800 46px/1 Unbounded,sans-serif;letter-spacing:-1px;text-shadow:0 4px 20px #0008}
.rocket-mult small{color:#cfe3ff;font-size:14px}
.rocket-stage[data-phase=crashed] .rocket-mult b{color:var(--bad)}.rocket-stage[data-phase=won] .rocket-mult b{color:var(--ok)}
.auto{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600}
.auto input{width:90px;height:38px;border-radius:10px;border:0;background:var(--bg2);text-align:center;font-weight:700;outline:none;box-shadow:inset 0 0 0 1px var(--line2);margin-left:auto}.auto em{font-style:normal}

/* mines */
.mines-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mines-top div{padding:10px;border-radius:14px;background:var(--card);display:grid}.mines-top small{color:var(--muted);font-size:11px}.mines-top b{font-size:17px;font-variant-numeric:tabular-nums}
.mines-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:10px;border-radius:var(--r-lg);background:var(--card)}
.mcell{aspect-ratio:1;border-radius:12px;background:linear-gradient(180deg,#34465c,#2a394b);box-shadow:inset 0 -4px #00000030;display:grid;place-items:center;transition:transform .12s,background .2s}
.mcell:not(:disabled):active{transform:scale(.92)}.mcell:disabled{cursor:default}
.mcell.safe{background:linear-gradient(180deg,#2e6a8f,#23506e);animation:prize-in .35s}.mcell.mine{background:#3b2a33}.mcell.boom{background:#7a2838;animation:shake .4s}.mcell.dim{opacity:.45}
.mcell.pending{animation:pulse .6s infinite}.mcell svg{width:70%;height:70%}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pulse{50%{opacity:.6}}

/* upgrade */
.up-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:16px 10px;border-radius:var(--r-lg);background:var(--card)}
.up-slot{min-height:132px;border-radius:16px;background:var(--bg2);display:grid;justify-items:center;align-content:center;gap:2px;text-align:center;padding:8px;box-shadow:inset 0 0 0 1.5px var(--rc,transparent)}
.up-slot:not(.filled)::before{content:attr(data-empty);color:var(--muted);font-size:12px}
.up-slot b{font-size:12px}.up-slot small{display:flex;gap:3px;align-items:center;color:var(--muted);font-size:12px}
.up-dial{position:relative;width:118px;height:118px}.up-dial svg{width:100%;height:100%}
.dial-bg{fill:none;stroke:#ffffff14;stroke-width:12}.dial-arc{fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;transition:stroke-dasharray .4s}
.up-needle{position:absolute;left:50%;top:9px;width:4px;height:51px;margin-left:-2px;background:#fff;border-radius:2px;transform-origin:50% 100%;box-shadow:0 0 8px #fff8}
.up-chance{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.up-chance b{font-size:22px}.up-chance small{color:var(--muted);font-size:11px}
.up-stage[data-result=win]{box-shadow:inset 0 0 0 2px var(--ok)}.up-stage[data-result=lose]{box-shadow:inset 0 0 0 2px var(--bad)}
.mini-item{flex:none;width:96px;display:grid;justify-items:center;gap:2px;padding:8px 6px;border-radius:14px;background:var(--card);box-shadow:inset 0 -3px 0 var(--rc)}
.mini-item b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.mini-item small{display:flex;gap:3px;align-items:center;font-size:11px;color:var(--muted)}
.mini-item.on{background:#3ea6ff2b;box-shadow:inset 0 0 0 2px var(--accent)}
.up-inv .empty{padding:10px;width:100%}

/* market */
.market-bar{display:flex;gap:8px}
.search{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);color:var(--muted)}
.search svg{width:20px;height:20px;flex:none}.search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--text)}
.search input::-webkit-search-cancel-button{filter:invert(.6)}
.search.sm{height:42px;border-radius:14px}
.chips{display:flex;gap:8px}
.chip{flex:none;display:flex;align-items:center;gap:5px;height:38px;padding:0 12px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line2);font-size:13.5px}
.chip small{color:var(--muted);font-size:11px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip svg{width:16px;height:16px;color:var(--muted)}
.chip.icon{width:38px;padding:0;justify-content:center}.chip.icon svg{width:19px;height:19px;color:var(--text)}
.chip.active{background:#3ea6ff22;box-shadow:inset 0 0 0 1px #3ea6ff77}.chip.active small{color:var(--accent2)}
.filters .chip.active{background:#ffffff1a;box-shadow:none;color:#fff}.filters .chip{color:var(--muted)}
.source-note{font-size:12.5px;color:var(--muted);line-height:1.4}
.lots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lots>.empty,.lots>.load-err{grid-column:1/-1}
.lot{border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .12s}
.lot:active{transform:scale(.97)}
.lot-art svg{width:100%;height:auto;aspect-ratio:1}
.lot-info{display:grid;grid-template-columns:1fr auto;align-items:center;padding:8px 10px 10px;gap:0 6px}
.lot-info b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lot-info small{color:var(--muted);font-size:12px;grid-row:2}.lot-info .price{grid-row:1/3;grid-column:2;font-size:13px;padding:5px 8px;border-radius:10px;background:#3ea6ff1f}
@media (min-width:420px){.lots{grid-template-columns:repeat(2,1fr)}}
.lot-hero{position:relative;border-radius:var(--r-lg);display:grid;place-items:center;padding:20px;aspect-ratio:1.25}.lot-hero svg{filter:drop-shadow(0 12px 20px #0005);animation:bob 4s ease-in-out infinite}
.lot-title{display:flex;align-items:baseline;gap:10px}.lot-title h1{font-size:24px}.num{color:var(--muted);font-weight:700}
.attrs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.attrs div{padding:10px 12px;border-radius:14px;background:var(--card)}.attrs dt{font-size:11px;color:var(--muted)}.attrs dd{margin:0;font-weight:700}
.sticky-actions{position:sticky;bottom:calc(var(--bottom) + 12px);z-index:5;padding:8px;margin:0 -8px;border-radius:22px;background:#18212de6;backdrop-filter:blur(10px)}

/* sheets */
.sheet-wrap{position:fixed;inset:0;z-index:50}
.sheet-backdrop{position:absolute;inset:0;background:#05090fa6;opacity:0;transition:opacity .25s}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;border-radius:26px 26px 0 0;background:#1d2734;box-shadow:0 -10px 40px #0007;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding-bottom:var(--bottom)}
.sheet-wrap.open .sheet{transform:none}.sheet-wrap.open .sheet-backdrop{opacity:1}
.sheet-wrap.tall .sheet{height:84vh}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:#ffffff30;margin:8px auto 0}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px 8px}
.sheet-head h2{font-size:24px}.sheet-head p{color:var(--muted);font-size:13px;margin-top:2px}
.sheet-x{border-radius:50%;background:var(--card2)}
.sheet-body{flex:1;overflow-y:auto;padding:4px 16px 16px;display:grid;gap:12px;align-content:start;overscroll-behavior:contain}
.sheet-foot{padding:10px 16px 14px;display:grid;gap:4px;border-top:1px solid var(--line)}
.opt-list{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--card);text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.opt.on{background:#3e8fe0;box-shadow:none}.opt span{display:grid}.opt small{color:var(--muted);font-size:11.5px}.opt.on small{color:#e3f1ff}
.sw{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px;overflow:hidden}
.sw.any{background:#ffffff26}.sw.art{background:var(--bg2)}
.metrics{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.metrics em{font-style:normal;font-size:9.5px;letter-spacing:.3px;opacity:.75}.metrics .coin{width:11px;height:11px}
.sorters{display:flex;gap:8px}.sorters button{display:flex;align-items:center;gap:4px;height:32px;padding:0 12px;border-radius:16px;background:var(--card);font-size:13px;color:var(--muted)}
.sorters svg{width:14px;height:14px;transition:transform .2s}.sorters .on{color:var(--text);background:var(--card2)}.sorters .desc svg{transform:rotate(180deg)}

/* gifts */
.gift-list{display:grid;gap:10px}
.gift-card{display:grid;grid-template-columns:76px 1fr;gap:4px 12px;padding:10px;border-radius:var(--r);background:var(--card)}
.gift-art{position:relative;grid-row:1/3;border-radius:14px;overflow:hidden;aspect-ratio:1}.gift-art svg{width:100%;height:100%}
.gift-body{display:grid;gap:4px;justify-items:start;align-content:start}.gift-body b small{color:var(--muted);font-weight:600}
.reason{color:var(--muted);font-size:12px;line-height:1.35}.reason.ok{color:var(--ok)}
.gift-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.gift-actions:empty{display:none}
.prize-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prize-grid>.empty{grid-column:1/-1;padding:16px}
.prize-item{display:grid;justify-items:center;gap:4px;padding:10px 6px;border-radius:16px;background:var(--card);box-shadow:inset 0 -3px 0 var(--rc);text-align:center}
.prize-item b{font-size:12px}.prize-item .btn{width:100%;font-size:11px;padding:0 6px;height:30px}
.wd{display:flex;align-items:center;gap:12px}.wd-art{width:72px;height:72px;border-radius:14px;overflow:hidden;flex:none}.wd-art svg{width:100%;height:100%}.wd b{display:block}.wd small{color:var(--muted);font-size:12px}
.wd-msg{display:none;padding:10px 12px;border-radius:12px;font-size:14px}.wd-msg.show{display:block}.wd-msg.warn{background:#ffbf4718;color:var(--warn)}.wd-msg.err{background:#ff5f6d18;color:var(--bad)}.wd-msg.ok{background:#38d39f18;color:var(--ok)}

/* wallet */
.wallet-card{position:relative;overflow:hidden;isolation:isolate;padding:18px;border-radius:var(--r-lg);background:linear-gradient(135deg,#3cc0ff,#1f7fe6 55%,#1557c4);box-shadow:0 14px 30px #1f7fe640,inset 0 0 0 1px #ffffff40;display:grid;gap:8px}
.wc-deco{position:absolute;z-index:-1;right:-30px;top:-40px;width:200px;height:200px;background:url('/art/buba-sm.webp') no-repeat center/contain;opacity:.22;transform:rotate(-12deg)}
.wallet-card small{font-size:12px;font-weight:700;opacity:.85}
.wc-amount{display:flex;align-items:center;gap:8px}.wc-amount b{font:800 40px/1 Unbounded,sans-serif;letter-spacing:-1px}.wc-amount span{font-weight:800;font-size:20px;opacity:.8}
.wc-real{font-size:13px;opacity:.9}
.wallet-card .row2{margin-top:6px}
.op-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.op-list li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card)}
.op-list li[data-pay]{cursor:pointer}
.op-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--card2)}.op-ic svg{width:20px;height:20px}
.op-ic.topups{color:var(--ok);background:#38d39f1a}.op-ic.withdrawals{color:var(--accent2);background:#3ea6ff1a}.op-ic.gifts{color:var(--violet);background:#8d6bff1f}.op-ic.games{color:var(--warn);background:#ffbf471a}
.op-main{flex:1;min-width:0;display:grid;gap:2px}.op-main b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.op-main small{color:var(--muted);font-size:12px}.op-main .status{padding:1px 6px;font-size:11px}
.op-amt{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.method{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;background:var(--card);text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.method svg{width:34px;height:34px;flex:none}.method span{display:grid;min-width:0}.method b{font-size:14px}.method small{color:var(--muted);font-size:11px;line-height:1.25}
.method.on{background:#3ea6ff1f;box-shadow:inset 0 0 0 2px var(--accent)}
.amount{display:grid;gap:6px}.amount span{font-size:13px;color:var(--muted);font-weight:600}
.amount input{height:52px;border-radius:14px;border:0;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);padding:0 14px;font-size:22px;font-weight:800;outline:none}
.amount input:focus,.bet-field:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.checkout{display:grid;gap:12px;justify-items:start}.checkout p{color:var(--muted);font-size:14px}.checkout .summary{width:100%}

@media (max-width:370px){
  #app{padding-left:12px;padding-right:12px}
  .hscroll,.feed-row{margin:0 -12px;padding:0 12px}.sticky-actions{margin:0 -6px}
  .hero h1{font-size:22px}.hero-buba{width:128px}
  .tile-title{font-size:18px}.sc-grid{grid-template-columns:repeat(3,30px)}.sc-grid i{width:30px;height:30px}
  .methods{grid-template-columns:1fr}
  .up-dial{width:100px;height:100px}
}
@media (min-width:600px){#app{max-width:480px;margin:0 auto}.topbar{max-width:480px;margin:0 auto}}
.summary b{display:inline-flex;align-items:center;gap:4px;text-align:right}
.demo-tag.abs{background:#0f1722cc;color:#ffd27a;backdrop-filter:blur(4px)}
