:root{--bg:#100d18;--panel:#1b1626;--card:#221b30;--line:#342a45;--muted:#9a90aa;--text:#f6f2ff;--accent:#a477ff;--bright:#bc98ff;--green:#83e4bd;--red:#ff8a9c;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.5}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{color:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--bright);outline-offset:4px}button{border:0}input,select{color:var(--text);background:#17121f;border:1px solid var(--line);border-radius:10px;padding:12px;min-width:0}input::placeholder{color:#847a94}input[type=range]{padding:0;accent-color:var(--accent)}.icon{width:20px;height:20px;display:inline-block;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.topbar{height:84px;display:flex;align-items:center;gap:32px;padding:0 30px;border-bottom:1px solid var(--line);background:#15111e;position:sticky;top:0;z-index:30}.brand{display:inline-flex;gap:10px;align-items:center;font-size:25px;font-weight:800;letter-spacing:-1.3px;white-space:nowrap}.brand-mark{width:32px;height:36px;fill:none;stroke:var(--bright);stroke-width:6;stroke-linejoin:miter}.brand small{color:var(--bright)}.header-stats{display:flex;gap:28px;padding-left:30px;border-left:1px solid var(--line)}.stat-inline{display:flex;gap:10px;align-items:center}.stat-inline>.icon{color:var(--accent)}.stat-inline span{display:block;font-size:10px;color:var(--muted);letter-spacing:.7px;text-transform:uppercase}.stat-inline b{font-size:14px;font-variant-numeric:tabular-nums}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 9px #83e4bd60;margin-right:6px}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.demo-badge{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#ab9bbf;border:1px solid #47365f;border-radius:6px;padding:5px 8px;white-space:nowrap}.btn{padding:12px 20px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .2s,transform .2s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:linear-gradient(110deg,#9462f1,#b68aff);color:#140b25;box-shadow:0 4px 20px #8c55ec22}.btn-primary:hover{background:linear-gradient(110deg,#b07bff,#c5a2ff)}.btn-subtle{background:#292135;border:1px solid #413252;color:#d7c6ef}.btn-ghost{background:transparent;color:#b6abca}.icon-btn{width:40px;height:40px;display:grid;place-items:center;background:#21192e;border:1px solid var(--line);border-radius:11px}.avatar{width:42px;height:42px;border:2px solid #ae80f4;border-radius:13px;padding:0;background:radial-gradient(circle at 60% 25%,#dfbeff,#8250cd 55%,#392250);display:grid;place-items:center;overflow:hidden}.avatar svg{width:34px;height:34px}.balance-pill{border:1px solid var(--line);padding:10px 14px;border-radius:10px;font-weight:700;background:#1c1527}.balance-pill small{color:var(--accent)}.layout{display:grid;grid-template-columns:186px minmax(0,1fr);min-height:calc(100vh - 84px)}.activity-rail{background:#130f1b;border-right:1px solid #2c2339;padding:20px 12px;position:sticky;top:84px;height:calc(100vh - 84px);overflow:hidden}.rail-title{display:flex;align-items:center;justify-content:space-between;padding:0 4px 13px}.rail-title strong{font-size:12px}.live-label{color:var(--green);font-size:9px;font-weight:700;letter-spacing:1px}.rail-note{font-size:10px;color:var(--muted);padding:0 4px 12px}.feed-card{background:linear-gradient(130deg,#2c203f,#191521);border:1px solid #3c2d51;border-left:2px solid #9967e6;border-radius:10px;margin-bottom:9px;padding:9px 10px;position:relative;overflow:hidden;animation:feed-in .4s ease both}.feed-card:nth-child(3n){background:linear-gradient(130deg,#21293b,#171520);border-color:#303a53;border-left-color:#7997cd}.feed-card:nth-child(4n){background:linear-gradient(130deg,#3b2a38,#19151e);border-color:#503044;border-left-color:#d991ae}.feed-meta{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#beacd6}.feed-meta b{color:var(--green);font-weight:600}.feed-card img{display:block;height:61px;width:100%;object-fit:contain;margin:2px 0 5px;filter:drop-shadow(0 5px 7px #0004)}.feed-name{font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.feed-bottom{font-size:9px;display:flex;justify-content:space-between;color:#9e90b4;margin-top:3px}.main{padding:32px 38px 0;max-width:1660px;width:100%;margin:0 auto;min-width:0;background:radial-gradient(ellipse at 48% 10%,#3d215422,transparent 55%)}.eyebrow{font-size:10px;font-weight:600;color:var(--bright);letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:9px}.eyebrow:before{content:'';width:18px;height:1px;background:var(--accent)}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:23px}.page-heading h1{font-size:34px;letter-spacing:-1.3px;margin:0;font-weight:750;line-height:1.18}.page-heading p{color:var(--muted);font-size:12px;margin:10px 0 0}.how-button{font-size:11px;color:#b5a7c8;display:flex;align-items:center;gap:7px;background:none;padding:9px 0}.how-button .icon{width:16px;height:16px}.workspace{border:1px solid #3e2b56;background:radial-gradient(ellipse at 50% 50%,#55327429,transparent 65%),linear-gradient(110deg,#21172f,#181321 52%,#231930);border-radius:20px;padding:22px;position:relative;overflow:hidden}.workspace:before{content:'';height:1px;background:linear-gradient(90deg,transparent,#ba8aff88,transparent);position:absolute;left:15%;right:15%;top:0}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.workspace-toolbar>span{font-size:10px;color:#aa97c0;letter-spacing:1.5px}.toolbar-right{display:flex;gap:8px;align-items:center}.toolbar-right>span{font-size:10px;color:var(--muted);margin-right:6px}.toolbar-right .icon-btn{height:29px;width:29px;border-radius:7px;background:#261b35}.toolbar-right .icon{width:14px;height:14px}.upgrade-arena{display:grid;grid-template-columns:minmax(0,1fr) 290px minmax(0,1fr);align-items:center;gap:18px}.selected-item{height:262px;border:1px solid #423054;border-radius:15px;background:linear-gradient(150deg,#2a1e3a99,#171120cc);position:relative;padding:17px;overflow:hidden;display:flex;flex-direction:column}.selected-item.target{border-color:#583977;background:radial-gradient(ellipse at 50% 65%,#69459130,transparent 65%),linear-gradient(150deg,#2d203c,#21162f)}.slot-top{display:flex;justify-content:space-between;align-items:center;z-index:1;gap:5px}.slot-top span{font-size:10px;color:#a493b9}.slot-top b{font-size:9px;font-weight:500;padding:3px 7px;border-radius:5px;color:#c9b2ea;background:#a17aff18;border:1px solid #a17aff25}.selected-item img{position:relative;width:100%;height:146px;object-fit:contain;filter:drop-shadow(0 14px 14px #0007);transition:transform .3s;margin:4px 0}.selected-item:hover img{transform:translateY(-4px) rotate(-2deg)}.slot-info h3{margin:0 0 2px;font-size:13px;letter-spacing:-.2px}.slot-info p{margin:0;color:#9f8cb7;font-size:10px}.slot-info .slot-price{position:absolute;right:17px;bottom:18px;color:#ceb0ff;font-size:15px;font-weight:700}.empty-slot{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;color:#806997}.empty-slot .icon{width:48px;height:48px;stroke-width:1}.empty-slot span{font-size:12px}.chance-area{text-align:center;position:relative}.dial{width:236px;height:236px;margin:0 auto;position:relative;border-radius:50%;display:grid;place-items:center;isolation:isolate}.dial:before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#6e4c94 0deg 1deg,transparent 1deg 7.5deg);mask:radial-gradient(transparent 67%,#000 68%);opacity:.65}.dial:after{content:'';position:absolute;inset:15px;border-radius:50%;border:1px solid #60447c;box-shadow:0 0 26px #a36cf616,inset 0 0 20px #a36cf616;z-index:-1}.ring{position:absolute;inset:26px;border-radius:50%;background:conic-gradient(from -90deg,#b88aff 0deg,#9461ec var(--angle,160deg),#3b2b4d var(--angle,160deg),#3b2b4d 360deg);mask:radial-gradient(transparent 65%,#000 66%);filter:drop-shadow(0 0 6px #9766ed88)}.dial-core{width:148px;height:148px;border:1px solid #5b407344;background:radial-gradient(circle,#3a254c88,#1b1428);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column}.dial-core .icon{color:var(--bright);width:20px;height:20px;margin-bottom:5px}.chance-value{font-size:37px;font-weight:700;letter-spacing:-1.7px;line-height:1.25;color:#e4d3ff;font-variant-numeric:tabular-nums}.chance-value small{font-size:18px;font-weight:400;margin-left:2px}.dial-core p{margin:4px 0 0;color:#aa92c2;font-size:10px}.dial-needle{position:absolute;width:8px;height:8px;top:14px;left:calc(50% - 4px);border-radius:50%;background:#f2e9ff;box-shadow:0 0 12px #b688ff,0 0 22px #b688ff}.dial-label{position:absolute;bottom:0;font-size:9px;color:#8c749f;letter-spacing:1px}.dial.running .dial-needle{animation:roulette-spin var(--spin-duration,9800ms) linear forwards;transform-origin:4px 104px}.dial.running .dial-core{animation:pulse .8s infinite alternate}.arena-controls{display:grid;grid-template-columns:minmax(0,1fr) 290px minmax(0,1fr);gap:18px;align-items:center;margin-top:18px}.balance-control{padding:0 2px}.balance-control>div{display:flex;justify-content:space-between;font-size:10px;color:#a391b8;margin-bottom:9px}.balance-control strong{color:#d8c7ed;font-weight:500}.balance-control input{width:100%;height:3px;display:block}.upgrade-btn{width:100%;height:48px;font-size:13px;letter-spacing:.3px}.upgrade-caption{text-align:center;margin:8px 0 0;color:#8a769e;font-size:9px;position:absolute;left:0;right:0}.multiplier-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.multiplier-controls button{padding:8px 11px;border-radius:7px;background:#30213f;border:1px solid #453058;font-size:11px;color:#b99dd7}.multiplier-controls button.active{border-color:#a576e7;background:#7049a83a;color:#ddc5ff}.workspace-foot{display:flex;align-items:center;justify-content:space-between;margin-top:30px;padding-top:14px;border-top:1px solid #392849;font-size:9px;color:#8e7b9f;gap:10px}.workspace-foot span{display:flex;align-items:center;gap:6px}.workspace-foot .icon{width:13px;height:13px}.workspace-foot b{font-weight:400;color:#b599d2}.catalogs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;align-items:start}.catalog-panel{border:1px solid #33273f;border-radius:15px;overflow:hidden;background:#17121f;height:auto;align-self:start}.panel-head{display:flex;align-items:center;gap:10px;padding:17px 18px;background:#21192c;border-bottom:1px solid #34263f;min-height:67px}.section-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#9f6af321;color:#c397ff}.section-icon .icon{width:16px;height:16px}.panel-head h2{font-size:14px;margin:0;letter-spacing:-.2px}.count{font-size:10px;font-weight:400;background:#30243e;color:#a995be;padding:3px 7px;border-radius:5px;margin-left:4px}.panel-head .right-label{margin-left:auto;color:#8f7d9f;font-size:9px}.panel-head select{padding:7px 8px;font-size:10px;background:#251c30;color:#b4a1c6;margin-left:auto;max-width:125px}.catalog-intro{font-size:10px;color:#8f7f9e;padding:11px 16px 0;margin:0}.items-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:13px}.product-card{border:1px solid #3a2b49;background:linear-gradient(150deg,#251a33,#1c1526);border-radius:10px;position:relative;text-align:left;padding:11px 11px 10px;min-height:176px;display:flex;flex-direction:column;transition:border-color .15s,background .15s,transform .15s;overflow:hidden}.product-card:hover{transform:translateY(-3px);border-color:#8158b0;background:#32213f}.product-card.selected{border:1px solid #ad7df5;background:linear-gradient(150deg,#4d2d6d88,#271b35);box-shadow:inset 0 0 16px #9a60e910}.product-card.selected:after{content:'✓';position:absolute;right:9px;top:9px;font-size:9px;color:#211032;background:#b98afa;border-radius:4px;width:15px;height:15px;text-align:center;font-weight:700}.product-price{color:#ddd0ec;font-size:11px;font-weight:600}.product-card img{width:100%;height:87px;object-fit:contain;filter:drop-shadow(0 9px 7px #0005);margin:6px 0}.product-name{font-weight:600;font-size:10px;line-height:1.5;display:block;color:#e4d9ef;margin-top:auto}.product-category{font-size:9px;color:#8f7b9f;margin-top:2px}.product-card:before{content:'';position:absolute;bottom:0;left:18%;right:18%;height:2px;background:#76578f}.product-card.rare:before{background:#8a79e8}.product-card.epic:before{background:#b268ed}.product-card.legendary:before{background:#e4b077}.empty-inventory{text-align:center;padding:50px 24px;grid-column:1/-1;color:var(--muted)}.empty-inventory .icon{width:40px;height:40px;color:#9472b4;margin-bottom:12px}.empty-inventory h3{color:#d9c9e8;font-size:14px}.empty-inventory p{font-size:12px;max-width:300px;margin:0 auto 18px}.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #2b2237;margin-top:34px;padding:24px 0;color:#8d7d9f;font-size:10px}.footer .brand{font-size:16px;letter-spacing:-.7px;color:#b4a1c6}.footer .brand-mark{width:21px;height:26px;stroke:#9872bf}.footer-right{display:flex;align-items:center;gap:17px}.footer a:hover{color:var(--bright)}.prototype-note{color:#766684;text-align:center;font-size:9px;max-width:600px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:150;background:#372445;border:1px solid #8a63b0;padding:14px 20px;border-radius:12px;box-shadow:0 15px 50px #0007;font-size:12px;max-width:min(500px,90vw);animation:feed-in .25s}.overlay{position:fixed;inset:0;background:#08050dde;backdrop-filter:blur(9px);z-index:100;display:grid;place-items:center;padding:20px;overflow:auto}.modal{background:linear-gradient(150deg,#2b1e3b,#18121f);border:1px solid #604274;border-radius:22px;width:100%;max-width:460px;padding:29px;position:relative;box-shadow:0 30px 100px #0009;margin:auto}.modal.wide{max-width:570px}.modal-close{position:absolute;right:15px;top:15px;width:30px;height:30px;border-radius:8px;background:#392842;color:#b6a0ca}.modal h2{margin:12px 0 5px;font-size:25px;letter-spacing:-.7px}.modal p{font-size:12px;color:#a895b9}.modal .brand{font-size:21px;margin-bottom:12px}.modal .brand-mark{width:27px;height:29px}.form-group{display:flex;flex-direction:column;gap:7px;margin:15px 0}.form-group label{font-size:11px;color:#c8b9d7}.form-group input{background:#18111f}.form-error{color:#ffacba;font-size:11px;min-height:18px}.form-note{font-size:10px!important;border:1px solid #44304e;background:#34223f66;padding:10px;border-radius:8px}.form-switch{text-align:center;margin-top:18px}.text-button{color:#c69bff;background:transparent;padding:0;font-size:inherit}.full-width{width:100%}.checkbox-row{display:flex;align-items:flex-start;gap:8px;font-size:10px;color:#a18caf;margin:13px 0 20px}.checkbox-row input{margin-top:3px;accent-color:var(--accent)}.modal-tabs{display:flex;gap:5px;background:#17101f;border:1px solid #3f2c4e;border-radius:10px;padding:4px;margin:18px 0}.modal-tabs button{flex:1;padding:9px;background:transparent;color:#9e88b1;border-radius:7px;font-size:12px}.modal-tabs button.active{background:#49305e;color:#efdcff}.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:17px 0}.payment-method{border:1px solid #483256;background:#251a31;padding:22px 8px;border-radius:12px;text-align:center}.payment-method.active{border-color:#bb8af8;background:#53316b55}.payment-method b{font-size:15px;display:block}.payment-method span{font-size:10px;color:#a58db7}.amounts{display:flex;gap:7px;margin:17px 0}.amounts button{flex:1;background:#2d1e3c;border:1px solid #503465;padding:7px;font-size:11px;border-radius:7px}.amounts button.active{border-color:#c592ff;color:#d7b6ff}.modal-list{padding-left:20px;color:#bca9ce;font-size:12px}.modal-list li{margin:12px 0}.result-image{display:block;width:170px;height:150px;object-fit:contain;margin:15px auto}.result-content{text-align:center}.result-content h2{font-size:28px}.success{color:var(--green)}.danger{color:var(--red)}.profile-page{padding-top:28px}.breadcrumbs{font-size:11px;color:#9984ac;display:flex;align-items:center;gap:7px;margin-bottom:22px}.breadcrumbs .icon{width:14px;height:14px}.club-banner{padding:15px 20px;border:1px solid #4b3560;border-radius:12px;background:linear-gradient(100deg,#372248,#25182f 70%,#44265b);display:flex;align-items:center;gap:12px;margin:22px 0}.club-banner .icon{color:#c89dff}.club-banner strong{font-size:12px}.club-banner span{font-size:11px;color:#b89ecc}.club-banner .btn{margin-left:auto;padding:8px 14px;font-size:10px}.profile-overview{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:13px;border:1px solid #46304f;padding:13px;border-radius:19px;background:#23182d}.profile-card{background:#18121f;border:1px solid #35213f;border-radius:13px;padding:20px;min-width:0}.user-summary{display:flex;gap:14px;align-items:center;margin:0 0 25px}.avatar-large{width:68px;height:68px;border-radius:16px;flex-shrink:0}.avatar-large svg{width:59px;height:59px}.user-summary h2{font-size:16px;margin:0 0 4px;overflow-wrap:anywhere}.user-summary p{font-size:10px;color:#917ba6;margin:0;overflow-wrap:anywhere}.user-tools{display:flex;gap:7px;margin-top:8px}.user-tools button{background:none;padding:0;color:#b19ac5}.user-tools .icon{width:14px;height:14px}.notification-box{border:1px solid #382641;border-radius:10px;background:#261b30;padding:12px;display:flex;align-items:center;gap:9px}.notification-box .icon{color:#a28bb4;width:16px;height:16px}.notification-box b{font-size:10px;display:block}.notification-box span{font-size:9px;color:#a28aaf;display:block}.switch{width:31px;height:18px;background:#49384d;border-radius:20px;position:relative;margin-left:auto;flex-shrink:0;padding:0}.switch:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;background:#a695ac;border-radius:50%;transition:left .2s}.switch[aria-checked=true]{background:#9363cb}.switch[aria-checked=true]:before{left:16px;background:#ecdaff}.manage-notifications{width:100%;font-size:10px;padding:11px;margin-top:8px}.profile-card-title{display:flex;justify-content:space-between;font-size:12px}.profile-card-title .icon{color:#ab7de0;width:17px;height:17px}.profile-balance{font-size:34px;letter-spacing:-1px;font-weight:700;margin:14px 0 0}.profile-balance span{font-size:22px;color:#ba8aef}.history-link{font-size:10px;color:#967bab;margin:0 0 15px;background:none;padding:0}.coupon{display:flex;gap:5px;border:1px dashed #543462;border-radius:9px;background:#2b1b35;padding:5px;margin-bottom:10px}.coupon input{width:100%;border:none;background:none;padding:7px;font-size:10px}.coupon button{padding:6px 9px;border-radius:6px;background:#443051;font-size:10px}.best-stack{display:grid;grid-template-rows:1.2fr 1fr;gap:11px}.best-item{position:relative;border:1px solid #5b3673;border-radius:12px;overflow:hidden;background:linear-gradient(110deg,#21142e,#4c286b);padding:15px;min-height:126px}.best-item h3{font-size:10px;color:#b18bcd;margin:0 0 15px}.best-item strong{font-size:12px;position:relative;z-index:2;display:block;max-width:60%}.best-item b{display:block;font-size:13px;color:#d0a0ff;margin-top:9px}.best-item img{position:absolute;right:8px;top:14px;width:42%;height:110px;object-fit:contain}.best-item small{font-size:10px;color:#ba9bcf}.profile-stats-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-stat{background:#19121f;border:1px solid #3b2547;border-radius:12px;padding:13px}.mini-stat h3{font-size:10px;color:#bba4cc;margin:0 0 15px}.mini-stat b{font-size:22px;color:#cba0ff}.mini-stat p{margin:3px 0 0;font-size:9px;color:#927a9e}.profile-inventory{margin-top:23px;border:1px solid #3c2947;border-radius:15px;overflow:hidden;background:#19121f;min-height:245px}.inventory-toolbar{display:flex;align-items:center;padding:13px;gap:10px;background:#24182e;border-bottom:1px solid #3c2947}.profile-tabs{display:flex;gap:4px;background:#18111f;padding:4px;border-radius:9px}.profile-tabs button{background:transparent;color:#9e84b0;padding:9px 12px;border-radius:7px;display:flex;align-items:center;gap:6px;font-size:10px}.profile-tabs button.active{background:#ab78f3;color:#1a0d2b;font-weight:700}.profile-tabs .icon{width:13px;height:13px}.sell-all{margin-left:auto;font-size:10px;padding:9px 12px}.profile-grid{grid-template-columns:repeat(5,minmax(0,1fr));padding:17px}.inventory-item .product-card{width:100%;min-height:175px}.inventory-item .btn{font-size:9px;padding:7px;margin-top:5px;width:100%}.history-table{width:100%;border-collapse:collapse;font-size:11px}.history-table th,.history-table td{text-align:left;padding:14px 18px;border-bottom:1px solid #33213d}.history-table th{color:#8f789f;font-weight:400}.history-table small{color:#977fa7;font-size:10px}.profile-locked{max-width:520px;margin:80px auto;text-align:center;padding:40px;border:1px solid #4e3261;border-radius:20px;background:radial-gradient(ellipse at top,#4d296444,#1b1226);}.profile-locked>.icon{width:48px;height:48px;color:#c597fa}.profile-locked h1{font-size:27px;letter-spacing:-.7px}.profile-locked p{color:#aa94bd;font-size:12px;margin-bottom:25px}.back-link{font-size:11px;color:#a389b5;display:block;margin-top:18px}.notification-preview{padding:14px;background:#241730;border:1px solid #4a2d5b;border-radius:10px;font-size:12px;color:#bca5ca}.loading-error{margin:50px;padding:30px;background:#24182e;border:1px solid #744691;border-radius:18px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes feed-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes roulette-spin{from{transform:rotate(0deg)}to{transform:rotate(4320deg)}}@keyframes pulse{to{box-shadow:0 0 25px #a16ef333}}.upgrade-arena{grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);gap:24px;align-items:stretch}.selected-item{min-height:285px;height:285px;background:linear-gradient(145deg,#251a34,#17111f);box-shadow:0 12px 34px #0004}.selected-item.target{background:linear-gradient(145deg,#2a1d39,#1a1225);box-shadow:0 12px 34px #0005}.chance-area{display:flex;align-items:center;justify-content:center;min-width:0}.shop-panel{margin-top:18px;padding-bottom:22px}.shop-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:14px}.shop-card{border:1px solid #3b2c4e;border-radius:13px;background:linear-gradient(145deg,#251a34,#17111f);padding:11px;min-width:0;position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}.shop-card:hover{transform:translateY(-3px);border-color:#73519a;box-shadow:0 10px 28px #0005}.shop-card-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.shop-tag{font-size:7px;letter-spacing:1px;color:#a995bc;border:1px solid #47345b;border-radius:5px;padding:3px 5px}.shop-card img{width:100%;height:92px;object-fit:contain;display:block;filter:drop-shadow(0 8px 10px #0006);margin:5px 0}.shop-card h3{font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-card p{font-size:9px;color:#8f7da0;margin:2px 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shop-buy{width:100%;padding:8px 9px;font-size:10px}.shop-buy .icon{width:14px;height:14px}.dial.running .dial-needle{animation:roulette-spin var(--spin-duration,9800ms) linear forwards}.dial.running .dial-core{animation:pulse .8s infinite alternate}@media(min-width:1650px){.main{padding:37px 55px 0}.upgrade-arena,.arena-controls{grid-template-columns:minmax(0,1fr) 340px minmax(0,1fr)}.selected-item{height:296px}.selected-item img{height:176px}.dial{transform:scale(1.1)}.product-card{min-height:196px}.product-card img{height:104px}.page-heading h1{font-size:39px}.workspace{padding:26px}}@media(max-width:1200px){.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.upgrade-arena{gap:14px}.selected-item{height:270px;min-height:270px}.topbar{padding:0 20px;gap:22px}.header-stats{padding-left:20px;gap:20px}.layout{grid-template-columns:156px minmax(0,1fr)}.main{padding:26px 24px 0}.upgrade-arena,.arena-controls{grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);gap:12px}.dial{width:214px;height:214px}.dial-core{width:132px;height:132px}.chance-value{font-size:33px}.selected-item{padding:13px;height:246px}.selected-item img{height:125px}.slot-info .slot-price{position:static;display:block;font-size:13px;margin-top:4px}.multiplier-controls button{padding:7px 9px}.header-actions .demo-badge{display:none}.profile-overview{grid-template-columns:1fr 1fr}.best-stack{grid-column:1/-1;grid-template-columns:1.1fr 1fr;grid-template-rows:auto}.profile-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-tabs button{padding:8px}.footer .prototype-note{max-width:310px}}@media(max-width:980px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.selected-item{height:250px;min-height:250px}.layout{grid-template-columns:126px minmax(0,1fr)}.activity-rail{padding:17px 8px}.rail-title{padding:0 0 10px}.rail-title strong{font-size:10px}.live-label{font-size:8px}.rail-note{font-size:9px;padding:0 0 10px}.feed-card{padding:8px}.feed-name{font-size:9px}.feed-card img{height:54px}.main{padding:24px 18px 0}.header-stats{border:0;padding:0;gap:18px}.header-actions{gap:7px}.header-actions .btn{padding:11px 13px;font-size:11px}.brand{font-size:22px}.brand-mark{width:26px}.upgrade-arena,.arena-controls{grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);gap:9px}.dial{width:184px;height:184px}.dial-core{width:111px;height:111px}.ring{inset:23px}.dial-core .icon{width:17px;height:17px}.chance-value{font-size:28px}.chance-value small{font-size:14px}.dial-core p{font-size:9px}.selected-item{height:230px;padding:11px}.selected-item img{height:104px;margin:9px 0}.slot-top b{display:none}.slot-info h3{font-size:11px}.slot-info p{font-size:9px}.workspace{padding:17px}.items-grid{gap:7px;padding:10px}.product-card{padding:8px;min-height:163px}.product-card img{height:77px}.product-name{font-size:9px}.product-category{font-size:8px}.product-price{font-size:10px}.catalogs{gap:12px}.panel-head{padding:13px 12px;gap:7px}.panel-head h2{font-size:12px}.panel-head .right-label{display:none}.panel-head select{max-width:96px;font-size:9px}.count{display:none}.page-heading h1{font-size:29px}.footer-right{gap:8px}.footer .prototype-note{display:none}.profile-tabs button{font-size:9px}.profile-card{padding:15px}.inventory-toolbar{flex-wrap:wrap}.profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-tabs{flex:1}.profile-tabs button{flex:1;justify-content:center}.sell-all{margin-left:0}}@media(max-width:760px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}.shop-card img{height:82px}.shop-card{padding:9px}.selected-item{height:220px;min-height:220px}.topbar{height:68px;padding:0 16px;gap:15px}.brand{font-size:21px}.brand-mark{width:26px;height:30px}.header-stats .stat-inline:nth-child(2){display:none}.stat-inline{gap:7px}.stat-inline span{font-size:8px}.stat-inline b{font-size:11px}.stat-inline>.icon{width:15px}.header-actions .btn{padding:9px 12px;font-size:11px}.header-actions .btn-ghost{display:none}.header-actions .icon-btn{display:none}.balance-pill{padding:7px 10px;font-size:11px}.header-actions .deposit-label{display:none}.avatar{height:35px;width:35px;border-radius:10px}.layout{grid-template-columns:1fr}.activity-rail{height:auto;position:static;border-right:0;border-bottom:1px solid #32223e;padding:11px 16px;background:#17101f}.rail-title{display:inline-flex;gap:10px;margin-right:12px;padding:0}.rail-note{display:inline;font-size:9px}.feed-list{display:flex;gap:8px;overflow:auto;margin-top:9px;scrollbar-width:none}.feed-card{min-width:132px;width:132px;display:grid;grid-template-columns:1fr 45px;grid-template-rows:auto auto;margin:0;padding:8px;flex-shrink:0}.feed-meta{grid-column:1;font-size:8px}.feed-meta span{display:none}.feed-card img{grid-column:2;grid-row:1/4;width:45px;height:43px;margin:0;align-self:center}.feed-name{font-size:8px;width:70px;margin-top:4px}.feed-bottom{font-size:8px}.feed-bottom span{display:none}.main{padding:24px 16px 0}.page-heading{margin-bottom:19px}.eyebrow{font-size:8px;letter-spacing:1.5px}.page-heading h1{font-size:29px;letter-spacing:-1px}.page-heading p{font-size:11px;max-width:250px}.how-button{font-size:0}.how-button .icon{width:21px;height:21px}.workspace{padding:15px 12px;border-radius:15px}.workspace-toolbar{margin-bottom:17px}.workspace-toolbar>span{font-size:8px;letter-spacing:1px}.toolbar-right>span{font-size:8px}.toolbar-right .icon-btn{width:25px;height:25px}.upgrade-arena{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:6px}.selected-item{height:203px;border-radius:10px;padding:10px}.selected-item img{height:84px;margin:12px 0 8px}.slot-top span{font-size:8px}.slot-info h3{font-size:10px;line-height:1.3}.slot-info p{display:none}.slot-info .slot-price{font-size:11px;margin-top:5px}.dial{width:146px;height:146px}.dial:after{inset:9px}.ring{inset:16px}.dial-core{width:91px;height:91px}.dial-core .icon{width:15px;height:15px;margin-bottom:0}.chance-value{font-size:25px;letter-spacing:-1px}.chance-value small{font-size:12px}.dial-core p{font-size:7px}.dial-needle{top:7px;width:6px;height:6px}.dial-label{font-size:7px;bottom:-8px}.arena-controls{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:7px;margin-top:15px}.balance-control>div{font-size:8px;display:block}.balance-control strong{display:block;margin-top:2px}.upgrade-btn{font-size:11px;height:42px;padding:8px}.upgrade-btn .icon{width:16px}.multiplier-controls{gap:4px}.multiplier-controls button{padding:5px 7px;font-size:9px}.upgrade-caption{font-size:8px}.workspace-foot{font-size:8px;margin-top:28px;padding-top:11px}.workspace-foot span:last-child{display:none}.catalogs{grid-template-columns:1fr;margin-top:18px;gap:18px}.items-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;gap:9px}.product-card{padding:11px;min-height:184px}.product-card img{height:99px}.product-name{font-size:10px}.product-category{font-size:9px}.product-price{font-size:11px}.panel-head{padding:14px}.panel-head h2{font-size:14px}.count{display:inline}.panel-head select{max-width:125px;font-size:10px}.panel-head .right-label{display:block}.footer{padding:20px 0;margin-top:26px;flex-wrap:wrap}.footer-right{font-size:9px;gap:13px}.footer .brand{font-size:14px}.profile-overview{grid-template-columns:1fr}.best-stack{grid-template-columns:1fr 1fr}.profile-card{padding:20px}.profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-grid .product-card{min-height:170px}.club-banner{padding:12px;gap:9px}.club-banner span{display:none}.profile-tabs{width:100%;flex:auto}.profile-tabs button{font-size:9px;padding:8px}.best-item strong{font-size:10px}.best-item img{width:40%}.mini-stat{padding:10px}.mini-stat b{font-size:18px}.mini-stat h3{font-size:9px}.history-table th,.history-table td{padding:10px 8px;font-size:10px}.profile-locked{margin:35px auto;padding:30px 20px}.modal{padding:25px 22px}.modal h2{font-size:23px}}@media(max-width:420px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.shop-card img{height:70px}.shop-card h3{font-size:9px}.shop-card p{font-size:8px}.shop-buy{font-size:9px;padding:7px}.selected-item{height:205px;min-height:205px}.topbar{gap:10px;padding:0 12px}.brand{font-size:19px}.brand-mark{width:23px}.header-stats{gap:0}.stat-inline>.icon{display:none}.header-actions .btn{padding:8px 10px;font-size:10px}.main{padding:20px 12px 0}.page-heading h1{font-size:27px}.upgrade-arena,.arena-controls{grid-template-columns:minmax(0,1fr) 124px minmax(0,1fr);gap:5px}.dial{width:124px;height:124px}.dial-core{width:78px;height:78px}.chance-value{font-size:22px}.ring{inset:13px}.selected-item{height:193px;padding:8px}.selected-item img{height:80px}.slot-info h3{font-size:9px}.slot-top span{font-size:7px}.slot-info .slot-price{font-size:10px}.multiplier-controls button{padding:4px 6px;font-size:8px}.balance-control>div{font-size:7px}.toolbar-right>span{display:none}.product-card{padding:9px;min-height:169px}.product-card img{height:86px}.product-name{font-size:9px}.product-category{font-size:8px}.items-grid{padding:10px;gap:7px}.profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.best-stack{grid-template-columns:1fr}.payment-method b{font-size:13px}.footer-right{gap:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* === Roulette v4: fixed win arc at bottom, arrow spins with ease-out === */

.upgrade-arena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.selected-item,
.chance-frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #423054;
  background: linear-gradient(145deg, #251a34, #17111f);
  box-shadow: 0 12px 34px #0004;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
}
.selected-item.target {
  border-color: #583977;
  background: linear-gradient(145deg, #2a1d39, #1a1225);
}
.chance-frame {
  border-color: #4a3560;
  background: radial-gradient(ellipse at 50% 55%, #3a255022, transparent 60%), linear-gradient(145deg, #22182f, #16101e);
  align-items: center;
  justify-content: center;
  padding: 12px;
  max-width: 320px;
}
.selected-item img {
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  max-height: 55%;
  object-fit: contain;
  margin: 6px 0;
  filter: drop-shadow(0 10px 12px #0006);
}
.selected-item .slot-info { margin-top: auto; }
.selected-item .slot-info .slot-price {
  position: static;
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.chance-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  width: 100%;
}

.dial {
  width: 260px !important;
  height: 260px !important;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible;
}
.dial:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from -1deg, #6e4c94 0deg 1deg, transparent 1deg 7.5deg);
  mask: radial-gradient(transparent 67%, #000 68%);
  opacity: .55;
  pointer-events: none;
}
.dial:after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid #60447c;
  box-shadow: 0 0 26px #a36cf616, inset 0 0 20px #a36cf616;
  z-index: -1;
  pointer-events: none;
}

/* FIXED win arc at BOTTOM — does NOT spin */
.ring {
  position: absolute;
  inset: 28px !important;
  border-radius: 50%;
  /* from 90deg: 0% of gradient = left side... 
     We want win centered at BOTTOM.
     from -90deg: 0=top, 90=right, 180=bottom, 270=left.
     Win from (180-half) to (180+half). */
  background: conic-gradient(
    from 0deg at 50% 50%,
    #3b2b4d 0deg,
    #3b2b4d var(--win-start, 90deg),
    #ff3b1f var(--win-start, 90deg),
    #ffb22e var(--win-mid, 180deg),
    #ff3b1f var(--win-end, 270deg),
    #3b2b4d var(--win-end, 270deg),
    #3b2b4d 360deg
  );
  /* Rotate the whole gradient paint so that mid of win lands at BOTTOM.
     CSS conic default 0deg is UP (12 o'clock). Bottom is 180deg.
     So we rotate the ring element by 0 and set angles accordingly. */
  mask: radial-gradient(transparent 64%, #000 65%);
  filter: drop-shadow(0 0 10px #f0a02088);
  transform: none !important;
  animation: none !important;
  transform-origin: 50% 50%;
  z-index: 1;
  pointer-events: none;
}
.dial.running .ring {
  animation: none !important;
  transform: none !important;
}


.dial-core {
  width: 150px !important;
  height: 150px !important;
  border: 1px solid #5b407344;
  background: radial-gradient(circle, #3a254c88, #1b1428);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
  position: relative;
}
.chance-value {
  font-size: 36px !important;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.2;
  color: #7dff9a;
  text-shadow: 0 0 18px #7dff9a66, 0 0 4px #0008;
  transition: color .25s ease;
}
.chance-value small {
  font-size: 17px !important;
  font-weight: 400;
  color: #7dff9a;
}
.dial-core p {
  margin: 4px 0 0;
  color: #aa92c2;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: lowercase;
  transition: color .25s ease;
}

/* Hide old needle element */
.dial-needle { display: none !important; }

/*
  Spinning arrow on the rim.
  A wrapper fills the dial; transform-origin center; arrow sits at the BOTTOM of the wrapper.
  Rotating the wrapper makes the arrow travel around the circle.
*/
.dial-arrow-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
.dial-arrow-spin {
  transform: translateZ(0) rotate(0deg);
  backface-visibility: hidden;
  will-change: transform;
}
.dial.running .dial-arrow-spin {
  animation: arrow-spin-ease var(--spin-duration, 7000ms) cubic-bezier(0.28, 0.05, 0.08, 1) forwards;
}
@keyframes arrow-spin-ease {
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(var(--roulette-end, 2160deg)); }
}
.dial:not(.running) .dial-arrow-spin {
  will-change: auto;
}

/* The arrow graphic sits at the bottom of the spinning wrapper (points toward center)
   Uses the golden upgrade-arrow.png for a polished look matching the reference. */
.dial-marker {
  position: absolute;
  bottom: 2px;
  top: auto !important;
  left: 50%;
  width: 28px;
  height: 36px;
  transform: translateX(-50%);
  background: url(assets/upgrade-arrow.png) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 8px #ff9a2acc) drop-shadow(0 0 14px #ff6a2088);
  animation: none !important;
}
.dial-marker::before,
.dial-marker::after {
  display: none !important;
  content: none !important;
}

.dial-label {
  position: absolute;
  bottom: -18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  color: #8c749f;
  letter-spacing: 1px;
}

/* Result on dial */
.dial-result {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 4;
  border-radius: 50%;
  text-align: center;
  padding: 12px;
  line-height: 1.25;
}
.dial-result.win {
  color: #83e4bd;
  text-shadow: 0 0 18px #83e4bd88, 0 0 4px #000;
}
.dial-result.lose {
  color: #ff8a9c;
  text-shadow: 0 0 18px #ff8a9c66, 0 0 4px #000;
}
.dial.result-win .dial-core {
  box-shadow: 0 0 28px #83e4bd44, inset 0 0 20px #83e4bd22;
}
.dial.result-lose .dial-core {
  box-shadow: 0 0 28px #ff8a9c33, inset 0 0 20px #ff8a9c18;
}

.arena-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  margin-top: 18px;
}

.demo-badge { display: none !important; }

@media (min-width: 1650px) {
  .upgrade-arena, .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) minmax(0, 1fr);
  }
  .dial { width: 300px !important; height: 300px !important; }
  .dial-core { width: 170px !important; height: 170px !important; }
  .chance-value { font-size: 42px !important; }
  .selected-item, .chance-frame { max-width: 340px; }
}
@media (max-width: 1200px) {
  .upgrade-arena, .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) minmax(0, 1fr);
    gap: 14px;
  }
  .dial { width: 220px !important; height: 220px !important; }
  .dial-core { width: 128px !important; height: 128px !important; }
  .chance-value { font-size: 30px !important; }
  .selected-item, .chance-frame { max-width: 240px; }
}
@media (max-width: 980px) {
  .upgrade-arena, .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 210px) minmax(0, 1fr);
    gap: 10px;
  }
  .dial { width: 180px !important; height: 180px !important; }
  .dial-core { width: 105px !important; height: 105px !important; }
  .chance-value { font-size: 26px !important; }
  .selected-item, .chance-frame { max-width: 190px; padding: 12px; }
  .dial-marker {
    width: 20px;
    height: 26px;
  }
}
@media (max-width: 760px) {
  .upgrade-arena, .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 160px) minmax(0, 1fr);
    gap: 8px;
  }
  .dial { width: 140px !important; height: 140px !important; }
  .dial-core { width: 84px !important; height: 84px !important; }
  .chance-value { font-size: 22px !important; }
  .selected-item, .chance-frame { max-width: 150px; padding: 10px; }
  .dial-marker {
    width: 18px;
    height: 24px;
    bottom: 2px;
  }
}
@media (max-width: 420px) {
  .upgrade-arena, .arena-controls {
    grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr);
    gap: 6px;
  }
  .dial { width: 110px !important; height: 110px !important; }
  .dial-core { width: 68px !important; height: 68px !important; }
  .chance-value { font-size: 18px !important; }
  .selected-item, .chance-frame { max-width: 110px; padding: 8px; }
}


/* Catalog tabs fix */
.catalog-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid #392b49;
  border-radius: 9px;
  background: #181220;
}
.catalog-tabs button {
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: #8f7d9f;
  font-size: 9px;
  font-weight: 700;
  transition: background .18s, color .18s;
}
.catalog-tabs button:hover { color: #d5c5e8; }
.catalog-tabs button.active {
  color: #160b24;
  background: linear-gradient(110deg,#9462f1,#b68aff);
  box-shadow: 0 3px 12px #8c55ec22;
}


/* Tabs: kill white background completely */
.catalog-tabs,
.catalog-tabs * {
  box-sizing: border-box;
}
.panel-head .catalog-tabs,
.inventory-head .catalog-tabs {
  display: inline-flex !important;
  gap: 4px !important;
  margin-left: auto !important;
  padding: 4px !important;
  border: 1px solid #392b49 !important;
  border-radius: 9px !important;
  background: #181220 !important;
  background-color: #181220 !important;
}
.catalog-tabs button,
.catalog-tabs button[type="button"],
button[data-action="inventory-tab"] {
  padding: 7px 12px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #a994bc !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.catalog-tabs button:hover,
button[data-action="inventory-tab"]:hover {
  color: #e4d5f5 !important;
  background: #2a2035 !important;
}
.catalog-tabs button.active,
button[data-action="inventory-tab"].active {
  color: #160b24 !important;
  background: linear-gradient(110deg, #9462f1, #b68aff) !important;
  background-color: #9462f1 !important;
}

/* Hide catalog intro text under inventory/shop header */
.catalog-intro,
#source-intro {
  display: none !important;
}


/* Centered logo instead of marketing headline */
.page-heading-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  padding: 8px 0 4px;
}
.page-heading-logo .brand-center {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.6px;
  color: var(--text);
  text-decoration: none;
}
.page-heading-logo .brand-center .brand-mark {
  width: 48px;
  height: 54px;
  stroke: var(--bright);
  stroke-width: 6;
}
.page-heading-logo .brand-center small {
  color: var(--bright);
}

/* Shop price filters */
.shop-filters {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 10px;
}
.shop-filter-price {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.shop-filter-label {
  font-size: 12px;
  color: #b5a4c8;
  white-space: nowrap;
}
.shop-price-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1a1424;
  border: 1px solid #3a2d4c;
  border-radius: 12px;
  padding: 6px 10px;
  flex: 1;
  max-width: 320px;
}
.shop-price-inputs input {
  width: 72px;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--text);
}
.shop-price-inputs input:focus {
  outline: none;
}
.shop-price-inputs input::placeholder {
  color: #7d6e92;
}
.shop-price-ico {
  color: #e0b84a;
  font-size: 12px;
  font-weight: 700;
}
.shop-price-sep {
  color: #6e5f82;
  font-size: 12px;
}
.shop-filter-search {
  position: relative;
  flex: 0 1 200px;
}
.shop-filter-search input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border-radius: 12px;
  background: #1a1424;
  border: 1px solid #3a2d4c;
  font-size: 13px;
}
.shop-filter-search input:focus {
  outline: none;
  border-color: #7a5aab;
}
.shop-search-ico {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  pointer-events: none;
}
.shop-search-ico .icon {
  width: 16px;
  height: 16px;
}
/* hide number input spinners */
.shop-price-inputs input[type=number]::-webkit-outer-spin-button,
.shop-price-inputs input[type=number]::-webkit-inner-spin-button,
input[type=number].no-spin::-webkit-outer-spin-button,
input[type=number].no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.shop-price-inputs input[type=number],
input[type=number].no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}
.shop-list-area,
.target-list-area {
  display: contents;
}
.shop-grid.inventory-shop-grid {
  display: grid;
}

@media (max-width: 760px) {
  .page-heading-logo .brand-center {
    font-size: 30px;
  }
  .page-heading-logo .brand-center .brand-mark {
    width: 34px;
    height: 38px;
  }
  .shop-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .shop-price-inputs {
    max-width: none;
  }
  .shop-filter-search {
    flex: 1 1 auto;
  }
}


/* Center brand logo block — force over any old page-heading rules */
.page-heading.page-heading-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 12px auto 30px !important;
  padding: 12px 0 !important;
  width: 100%;
}
.page-heading.page-heading-logo .center-brand,
.page-heading.page-heading-logo .brand {
  display: inline-flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 44px !important;
  font-weight: 800 !important;
  letter-spacing: -1.8px !important;
  color: #f6f2ff !important;
  margin: 0 auto !important;
}
.page-heading.page-heading-logo .brand-mark {
  width: 52px !important;
  height: 58px !important;
  stroke: #bc98ff !important;
  stroke-width: 6 !important;
  flex-shrink: 0;
}
.page-heading.page-heading-logo .brand small,
.page-heading.page-heading-logo .center-brand small {
  color: #bc98ff !important;
}
.page-heading.page-heading-logo .how-button,
.page-heading.page-heading-logo .eyebrow,
.page-heading.page-heading-logo h1,
.page-heading.page-heading-logo > div > p {
  display: none !important;
}

@media (max-width: 760px) {
  .page-heading.page-heading-logo .center-brand,
  .page-heading.page-heading-logo .brand {
    font-size: 32px !important;
  }
  .page-heading.page-heading-logo .brand-mark {
    width: 36px !important;
    height: 40px !important;
  }
}


/* Remove square frame around roulette */
.chance-frame {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
  max-width: none !important;
}

/* Remove rectangular highlight around whole upgrade workspace */
.workspace {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.workspace:before {
  display: none !important;
}


/* Roulette 1.3x larger */
.dial {
  width: 338px !important;
  height: 338px !important;
}
.dial-core {
  width: 195px !important;
  height: 195px !important;
}
.chance-value {
  font-size: 47px !important;
}
.chance-value small {
  font-size: 22px !important;
}
.ring {
  inset: 36px !important;
}
.dial-marker {
  width: 34px !important;
  height: 42px !important;
}

@media (min-width: 1650px) {
  .dial {
    width: 390px !important;
    height: 390px !important;
  }
  .dial-core {
    width: 221px !important;
    height: 221px !important;
  }
  .chance-value {
    font-size: 55px !important;
  }
}

@media (max-width: 1200px) {
  .dial {
    width: 286px !important;
    height: 286px !important;
  }
  .dial-core {
    width: 166px !important;
    height: 166px !important;
  }
  .chance-value {
    font-size: 39px !important;
  }
}

@media (max-width: 980px) {
  .dial {
    width: 234px !important;
    height: 234px !important;
  }
  .dial-core {
    width: 137px !important;
    height: 137px !important;
  }
  .chance-value {
    font-size: 34px !important;
  }
}

@media (max-width: 760px) {
  .dial {
    width: 182px !important;
    height: 182px !important;
  }
  .dial-core {
    width: 109px !important;
    height: 109px !important;
  }
  .chance-value {
    font-size: 29px !important;
  }
}

@media (max-width: 420px) {
  .dial {
    width: 143px !important;
    height: 143px !important;
  }
  .dial-core {
    width: 88px !important;
    height: 88px !important;
  }
  .chance-value {
    font-size: 23px !important;
  }
}

/* Give center column more room for larger dial */
.upgrade-arena,
.arena-controls {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 400px) minmax(0, 1fr) !important;
}
@media (max-width: 1200px) {
  .upgrade-arena,
  .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px) minmax(0, 1fr) !important;
  }
}
@media (max-width: 980px) {
  .upgrade-arena,
  .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 250px) minmax(0, 1fr) !important;
  }
}
@media (max-width: 760px) {
  .upgrade-arena,
  .arena-controls {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 190px) minmax(0, 1fr) !important;
  }
}


/* Smaller upgrade button, shorter label */
.upgrade-btn {
  width: auto !important;
  min-width: 160px;
  max-width: 220px;
  height: 40px !important;
  font-size: 12px !important;
  padding: 8px 18px !important;
  margin: 0 auto;
  display: flex !important;
}
.arena-controls > div:nth-child(2) {
  display: flex;
  justify-content: center;
}

/* Toolbar: sound + fast next to title (left) */
.workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toolbar-left > span {
  font-size: 10px;
  color: #aa97c0;
  letter-spacing: 1.5px;
  margin-right: 4px;
}
.toolbar-left .icon-btn {
  height: 29px;
  width: 29px;
  border-radius: 7px;
  background: #261b35;
}
.toolbar-left .icon-btn.active,
.toolbar-left .icon-btn[aria-pressed="true"] {
  border-color: #a576e7;
  background: #7049a83a;
  color: #ddc5ff;
}
.toolbar-left .icon {
  width: 14px;
  height: 14px;
}

/* Remove selection checkmark */
.product-card.selected:after {
  display: none !important;
  content: none !important;
}


/* Upgrade button tight under dial arrow */
.chance-frame {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.chance-area {
  flex-direction: column;
}
.chance-frame .upgrade-btn {
  margin-top: 6px !important;
  position: relative;
  z-index: 5;
}
.chance-frame .upgrade-caption {
  position: static !important;
  margin-top: 4px;
  font-size: 9px;
  color: #8a769e;
  text-align: center;
}
.dial-label {
  display: none !important;
}
.arena-btn-spacer {
  min-height: 1px;
}


/* Upgrade button: larger, moved down from roulette */
.chance-frame .upgrade-btn,
.upgrade-btn {
  margin-top: 28px !important;
  min-width: 200px !important;
  max-width: 260px !important;
  height: 48px !important;
  font-size: 14px !important;
  padding: 12px 28px !important;
  border-radius: 12px !important;
  letter-spacing: 0.2px;
}
.chance-frame .upgrade-caption {
  margin-top: 8px !important;
}


/* Push upgrade button further down from roulette */
.chance-frame .upgrade-btn,
.upgrade-btn {
  margin-top: 48px !important;
}

/* Hide feed note if any leftover */
.rail-note {
  display: none !important;
}


/* Thin arrow pointer (like reference) + smoother spin, less lag */
.dial-arrow-spin {
  transform: translate3d(0,0,0) rotate(0deg);
  backface-visibility: hidden;
  perspective: 1000px;
  will-change: transform;
  contain: layout style;
}
.dial.running .dial-arrow-spin {
  animation: arrow-spin-ease var(--spin-duration, 8000ms) cubic-bezier(0.28, 0.05, 0.08, 1) forwards;
}
.dial:not(.running) .dial-arrow-spin {
  will-change: auto;
}
@keyframes arrow-spin-ease {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(0,0,0) rotate(var(--roulette-end, 2160deg)); }
}

/* Golden upgrade arrow on roulette (matches image.png reference) */
.dial-marker {
  position: absolute !important;
  bottom: 4px !important;
  top: auto !important;
  left: 50% !important;
  width: 28px !important;
  height: 36px !important;
  transform: translateX(-50%) !important;
  background: url(assets/upgrade-arrow.png) center / contain no-repeat !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px #ff9a2acc) drop-shadow(0 0 14px #ff6a2088) !important;
}
.dial-marker::before,
.dial-marker::after {
  display: none !important;
  content: none !important;
}


/* Pull content higher — less empty space at top */
.main {
  padding-top: 12px !important;
}
.page-heading,
.page-heading.page-heading-logo {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.page-heading-logo .brand-center,
.page-heading-logo .brand {
  font-size: 34px !important;
}
.page-heading-logo .brand-mark {
  width: 36px !important;
  height: 40px !important;
}
.workspace {
  padding-top: 10px !important;
  margin-top: 0 !important;
}
.workspace-toolbar {
  margin-bottom: 10px !important;
}
.upgrade-arena {
  margin-top: 0 !important;
}
.topbar {
  height: 64px !important;
}
.layout {
  min-height: calc(100vh - 64px) !important;
}
.activity-rail {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
}

.workspace-foot{display:none!important;}


/* Admin panel */
.admin-panel { text-align: left; }
.admin-note, .admin-sub { font-size: 11px; color: #a895b9; margin: 6px 0 12px; }
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.admin-card {
  background: #1a1324;
  border: 1px solid #3d2d52;
  border-radius: 14px;
  padding: 14px;
}
.admin-card h3 {
  margin: 0 0 10px;
  font-size: 13px;
  color: #e4d5f5;
}
.admin-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-stats > div {
  background: #120e1a;
  border-radius: 10px;
  padding: 8px 10px;
}
.admin-stats span {
  display: block;
  font-size: 9px;
  color: #8f7d9f;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.admin-stats b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d5c6e8;
  margin: 8px 0;
}
.admin-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
.admin-rate input[type="number"] {
  width: 72px;
  padding: 8px;
}
@media (max-width: 700px) {
  .admin-grid { grid-template-columns: 1fr; }
}


/* ===== Admin page layout ===== */
body[data-page="admin"] {
  background: #0b0810;
}
.admin-deny, .admin-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.admin-deny-card, .admin-login-card {
  width: min(400px, 100%);
  background: #15101f;
  border: 1px solid #3a2c4e;
  border-radius: 18px;
  padding: 28px;
  text-align: center;
}
.admin-login-card .brand {
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.admin-side {
  background: #110c18;
  border-right: 1px solid #2e243c;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.admin-side .brand { font-size: 18px; }
.admin-side-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a789c;
  margin: 8px 0;
}
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.admin-nav button {
  text-align: left;
  background: transparent;
  border: 0;
  color: #cbbcdc;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
}
.admin-nav button:hover { background: #1c1528; }
.admin-nav button.active {
  background: #2a1d3d;
  color: #fff;
  box-shadow: inset 0 0 0 1px #6d4aa0;
}
.admin-side-foot { margin-top: auto; }
.admin-main {
  padding: 28px 32px 48px;
  overflow: auto;
}
.admin-head h1 {
  margin: 0 0 4px;
  font-size: 26px;
}
.admin-head p {
  margin: 0 0 20px;
  color: #9a88ac;
  font-size: 13px;
}
.admin-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-kpi-card {
  background: #15101f;
  border: 1px solid #322645;
  border-radius: 14px;
  padding: 14px;
}
.admin-kpi-card span {
  display: block;
  font-size: 10px;
  color: #8f7d9f;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.admin-kpi-card b {
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.admin-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-table-wrap { overflow: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.admin-table th, .admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #2a2038;
  text-align: left;
}
.admin-table th { color: #9a88ac; font-weight: 600; }
.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
}
.admin-list li {
  padding: 8px 0;
  border-bottom: 1px solid #2a2038;
}
.admin-list span { color: #9a88ac; margin-left: 6px; }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { border-right: 0; border-bottom: 1px solid #2e243c; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
}

/* 01/02 upgrade slots: JS sets width to the already-rendered height.
   Height itself is never changed here. */
.selected-item.upgrade-square-slot {
  width: var(--upgrade-square-width) !important;
  max-width: none !important;
}

/* Small desktop spacing adjustment: move the target square right without changing its size. */
@media (min-width: 901px) {
  #target-slot { transform: translateX(18px); }
}

/* Google sign-in */
.btn-google{background:#fff;color:#1f1f1f;border:1px solid #d7d7d7;}
.auth-divider{text-align:center;color:var(--muted);font-size:12px;margin:10px 0;}
/* Keep the right upgrade square a little farther from the wheel. */
@media(min-width:981px){.selected-item.target{transform:translateX(18px);}}

.inventory-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.inventory-actions .btn{flex:1;font-size:10px;padding:9px 8px}.check-row{display:flex;align-items:flex-start;gap:9px;font-size:11px;color:#bca9ce;margin:10px 0}.check-row input{margin-top:2px;accent-color:var(--accent)}.dial-result{font-size:38px!important;letter-spacing:2px}.club-banner{display:none!important}
.tab-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--accent);color:#140b25;font-size:9px;font-weight:800;margin-left:4px}.delivery-list{display:grid;gap:12px;padding:12px}.delivery-card{background:#1b1525;border:1px solid var(--line);border-radius:14px;padding:16px}.delivery-card.has-tracking{border-color:#7252a0}.delivery-card-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.delivery-card-head b{display:block;font-size:14px}.delivery-card-head small{display:block;color:var(--muted);margin-top:3px}.delivery-card-head strong{font-size:11px;color:var(--bright);white-space:nowrap}.delivery-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.delivery-details>div{background:#17121f;border:1px solid #30253e;border-radius:10px;padding:10px}.delivery-details span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.delivery-details b{font-size:11px;word-break:break-word}.tracking-value{color:var(--green)}.delivery-notice{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px;border-radius:9px;background:#20342e;color:var(--green);font-size:10px}.delivery-notice .icon{width:16px;height:16px}.tracking-admin{color:var(--green)}
@media(max-width:600px){.delivery-details{grid-template-columns:1fr}.delivery-card-head{display:block}.delivery-card-head strong{display:inline-block;margin-top:8px}}

/* Ozon delivery admin controls */
.delivery-admin-form{display:grid;gap:6px;min-width:230px}.delivery-admin-form input{width:100%;box-sizing:border-box;background:#120d19;border:1px solid #3a2c4e;color:#fff;border-radius:8px;padding:8px 9px;font:inherit;font-size:11px}.delivery-admin-form .btn{width:100%;margin:0}
.delivery-note{background:#241d35;color:#d8c9e8}

/* Compact support chat, portrait 9:16 feel */
.support-fab{position:fixed;right:22px;bottom:22px;z-index:80;border:0;border-radius:999px;background:#f2d21a;color:#17100b;box-shadow:0 10px 35px #0007;display:flex;align-items:center;gap:8px;padding:12px 15px;font-weight:800;cursor:pointer}.support-fab .icon{width:22px;height:22px}.support-fab:hover{transform:translateY(-1px)}
.support-widget.open .support-fab{display:none}.support-panel{position:fixed;right:22px;bottom:22px;z-index:81;width:min(360px,calc(100vw - 28px));height:min(640px,calc(100vh - 44px));aspect-ratio:9/16;background:#120d19;border:1px solid #3a2c4e;border-radius:18px;box-shadow:0 22px 70px #0009;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}.support-panel>header{display:flex;justify-content:space-between;align-items:center;padding:14px 15px;border-bottom:1px solid #30233f;background:#181120}.support-panel>header b{display:block;font-size:14px}.support-panel>header small{display:block;color:#9584a7;font-size:9px;margin-top:2px}.support-panel>header button{background:transparent;border:0;color:#bca9cf;cursor:pointer}.support-messages,.support-admin-messages{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}.support-msg{max-width:82%;display:flex;flex-direction:column;gap:3px}.support-msg>div{padding:9px 11px;border-radius:12px;background:#21182c;color:#eee;font-size:11px;line-height:1.35;white-space:pre-wrap;word-break:break-word}.support-msg small{color:#887699;font-size:8px}.support-msg.out{align-self:flex-end;align-items:flex-end}.support-msg.out>div{background:#4c326d}.support-msg.in{align-self:flex-start}.support-compose{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-top:1px solid #30233f;background:#17101f}.support-compose textarea{resize:none;min-height:42px;background:#100b16;color:#fff;border:1px solid #3a2c4e;border-radius:10px;padding:9px;font:inherit;font-size:11px}.support-compose .btn{align-self:end}.support-empty{padding:20px;text-align:center;color:#8f7da0;font-size:10px}.support-admin-card{padding:0;overflow:hidden}.support-admin-layout{display:grid;grid-template-columns:190px 1fr;min-height:520px}.support-users{border-right:1px solid #30233f;background:#130e1b;padding:8px;overflow:auto}.support-user{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;background:transparent;border:0;color:#ddd;padding:10px;border-radius:10px;cursor:pointer}.support-user:hover,.support-user.active{background:#281b3a}.support-user b{font-size:11px}.support-user small{color:#8f7da0;font-size:8px}.support-admin-chat{min-width:0;display:grid;grid-template-rows:1fr auto;min-height:520px}.support-admin-messages{min-height:0}.support-admin-chat .support-compose{grid-template-columns:1fr 100px}.support-admin-chat .support-compose textarea{min-height:48px}
@media(max-width:760px){.support-fab{right:14px;bottom:14px;padding:11px}.support-fab span{display:none}.support-panel{right:10px;bottom:10px;width:calc(100vw - 20px);height:min(620px,calc(100vh - 20px))}.support-admin-layout{grid-template-columns:1fr}.support-users{border-right:0;border-bottom:1px solid #30233f;max-height:150px;display:flex;overflow:auto}.support-user{min-width:130px}.support-admin-chat{min-height:500px}}

/* Support chat message sides: player left, support right */
.support-msg.user{align-self:flex-start;align-items:flex-start}.support-msg.user>div{background:#21182c}.support-msg.support{align-self:flex-end;align-items:flex-end}.support-msg.support>div{background:#4c326d}.pickup-code-box{margin:16px 0;padding:18px;text-align:center;border:1px solid #7252a0;background:#20162d;border-radius:12px;font-size:24px;font-weight:900;letter-spacing:2px;color:var(--green);word-break:break-all}.delivery-steps{margin:0;padding-left:22px;color:#c9bfd3;font-size:12px;line-height:1.7}.delivery-how{margin-top:10px}

/* Delivery notifications: make the important arrival alert visibly pulse. */
.notification-bell.has-alert{position:relative;border-color:#a477ff;box-shadow:0 0 0 0 #a477ff66;animation:notification-pulse 1.25s ease-in-out infinite}
.notification-bell.has-alert .notification-dot{position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#ff5f87;box-shadow:0 0 0 3px #21192e,0 0 12px #ff5f87;animation:notification-dot-pulse 1s ease-in-out infinite}
.tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff5f87;color:#fff;font-size:10px;font-weight:800;box-shadow:0 0 12px #ff5f8788;animation:notification-dot-pulse 1s ease-in-out infinite}
.toast.delivery-toast{border-color:#a477ff;box-shadow:0 10px 35px #0008,0 0 0 2px #a477ff33;animation:delivery-toast-glow 1.1s ease-in-out infinite}
@keyframes notification-pulse{0%,100%{box-shadow:0 0 0 0 #a477ff00;transform:scale(1)}50%{box-shadow:0 0 0 6px #a477ff22;transform:scale(1.05)}}
@keyframes notification-dot-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.72}}
@keyframes delivery-toast-glow{0%,100%{filter:none}50%{filter:brightness(1.16)}}
/* Keep the result text inside the roulette on every screen size. */
.dial-result{font-size:clamp(10px,2.8vw,20px);letter-spacing:.8px;line-height:1.05;overflow-wrap:anywhere;word-break:break-word;max-width:100%;}
.dial-result.lose{font-size:clamp(9px,2.25vw,16px);letter-spacing:.35px;padding:8px;}
@media(max-width:760px){.dial-result{font-size:clamp(9px,3.4vw,15px);padding:7px}.dial-result.lose{font-size:clamp(8px,2.9vw,13px);padding:5px;letter-spacing:0}}
@media(max-width:420px){.dial-result{font-size:10px}.dial-result.lose{font-size:9px}}

/* Clean footer: only brand and demo support email. */
.footer{display:flex;align-items:flex-start;gap:80px;justify-content:flex-start;min-height:150px;padding:42px 0 28px}
.footer-contact{display:flex;flex-direction:column;gap:10px;margin-left:70px}
.footer-contact-title{font-size:14px;color:var(--muted,#8d8d98)}
.footer-contact a{color:#f0c800;text-decoration:none;font-size:14px}
.footer-contact a:hover{text-decoration:underline}
.footer-right,.prototype-note{display:none!important}
@media (max-width:700px){.footer{gap:28px;padding:30px 0 24px}.footer-contact{margin-left:0}}

.footer-policy a{color:#9d94a8}.privacy-page{max-width:1100px;margin:0 auto;padding-top:40px}.privacy-card{max-width:850px;margin:0 auto 50px}.privacy-card h2{margin:0 0 10px;font-size:18px}.privacy-card p{color:#aaa1b2;line-height:1.65;margin:0 0 24px}.privacy-card a{color:#f0c800}
@media(max-width:760px){.footer{flex-wrap:wrap}.footer-contact{margin-left:0}.footer-policy{width:100%}}


/* UI motion: dialogs, buttons and cards should enter instead of appearing abruptly. */
.btn,.icon-btn,.payment-method,.amounts button,.product-card,.shop-card,.profile-tabs button,.multiplier-controls button,.history-link,.support-fab{transition:transform .18s ease,box-shadow .22s ease,filter .22s ease,background .22s ease,border-color .22s ease,opacity .22s ease}.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.payment-method:active:not(:disabled),.amounts button:active:not(:disabled),.product-card:active:not(:disabled),.shop-card:active:not(:disabled),.profile-tabs button:active:not(:disabled),.multiplier-controls button:active:not(:disabled){transform:scale(.96)}
.overlay{animation:overlay-in .18s ease both}.modal{animation:modal-in .24s cubic-bezier(.2,.8,.2,1) both}.modal-close{transition:transform .18s ease,background .18s ease}.modal-close:active{transform:scale(.9)}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.product-card,.shop-card{animation:card-in .28s ease both}.items-grid .product-card:nth-child(2n){animation-delay:.025s}.items-grid .product-card:nth-child(3n){animation-delay:.05s}.items-grid .product-card:nth-child(4n){animation-delay:.075s}@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Bigger, lower upgrade CTA. */
.chance-frame .upgrade-btn,.upgrade-btn{min-height:56px;font-size:14px;padding:15px 24px;margin-top:10px;transform:translateY(8px);box-shadow:0 10px 28px #8c55ec2b}.chance-frame .upgrade-btn:hover:not(:disabled),.upgrade-btn:hover:not(:disabled){transform:translateY(6px) scale(1.015)}.chance-frame .upgrade-btn:active:not(:disabled),.upgrade-btn:active:not(:disabled){transform:translateY(8px) scale(.97)}
/* Keep loss text compact inside the roulette. */.dial-result.lose{font-size:clamp(7px,1.5vw,12px)!important;letter-spacing:0!important;line-height:1!important;padding:4px 6px!important;white-space:nowrap;transform:scaleX(.88)}@media(max-width:760px){.dial-result.lose{font-size:9px!important;transform:scaleX(.82)}}@media(max-width:420px){.dial-result.lose{font-size:8px!important;transform:scaleX(.78)}}
.push-box{align-items:center;gap:12px}.push-box>div{flex:1}.push-enable{white-space:nowrap;font-size:10px;padding:9px 12px}.push-enable .icon{width:15px;height:15px}@media(max-width:600px){.push-box{align-items:flex-start;flex-wrap:wrap}.push-enable{width:100%}}

/* Enhanced micro-interactions and independent product imagery */
.btn-primary[data-action="deposit"]{
  position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,filter .22s;
}
.btn-primary[data-action="deposit"]::after{
  content:"";position:absolute;inset:-60% -20%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  transform:translateX(-100%) rotate(8deg);transition:transform .65s ease;pointer-events:none;
}
.btn-primary[data-action="deposit"]:hover::after{transform:translateX(100%) rotate(8deg)}
.btn-primary[data-action="deposit"]:active{transform:scale(.96);box-shadow:0 2px 10px #8c55ec44}
.overlay{animation:overlay-in .22s ease-out both}
.modal{animation:modal-in .34s cubic-bezier(.16,1,.3,1) both;transform-origin:center}
.support-panel{animation:support-in .36s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom right}
.support-fab{transition:transform .22s,box-shadow .22s,filter .22s}
.support-fab:hover{transform:translateY(-3px) scale(1.025);box-shadow:0 14px 42px #0009;filter:brightness(1.06)}
.support-fab:active{transform:scale(.94)}
.product-card img,.selected-item img,.feed-card img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.product-card:hover img,.selected-item:hover img{transform:none}
@keyframes overlay-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes support-in{from{opacity:0;transform:translateY(22px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.overlay,.modal,.support-panel{animation:none!important}.btn,.support-fab{transition:none!important}}

/* Final visual alignment: center product images inside both upgrade slots. */
.selected-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 150px;
  margin: 0;
  object-fit: contain;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.selected-item:hover > img {
  transform: translate(-50%, -50%) scale(1.025);
}
.selected-item .slot-top,
.selected-item .slot-info {
  position: relative;
  z-index: 1;
}

/* Keep both upgrade cards perfectly symmetric around the roulette wheel. */
#source-slot,
#target-slot,
.selected-item.target {
  transform: none !important;
}

@media (max-width: 760px) {
  .selected-item > img { width: 80%; height: 112px; }
}
@media (max-width: 420px) {
  .selected-item > img { width: 82%; height: 102px; }
}


/* Larger loss result, centered inside the inner roulette circle. */
.dial-result.lose {
  position: absolute;
  top: 50%;
  left: 50%;
  inset: auto;
  width: 148px;
  height: 148px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 0 8px !important;
  box-sizing: border-box;
  font-size: clamp(15px, 2.2vw, 22px) !important;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .2px !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

/* Shop: larger products in a clean square frame. */
.shop-card img {
  width: 100%;
  height: 118px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 10px;
  margin: 8px 0 10px;
  border: 1px solid #49345f;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 38%, #3a284d, #1a1325 78%);
}
@media (max-width: 1100px) {
  .shop-card img { height: auto; }
}
@media (max-width: 760px) {
  .shop-card img { height: auto; padding: 12px; }
  .dial-result.lose { width: 148px; height: 148px; font-size: 18px !important; }
}
@media (max-width: 420px) {
  .dial-result.lose { width: 132px; height: 132px; font-size: 15px !important; }
}


/* Stable result label: always centered inside the inner roulette circle. */
.dial-core{position:relative;overflow:hidden;}
.dial-core .dial-result{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;box-sizing:border-box!important;display:grid!important;place-items:center!important;padding:8px!important;margin:0!important;transform:none!important;font-size:clamp(17px,3.1cqw,30px)!important;line-height:1.05!important;letter-spacing:.3px!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;}
.dial-core .dial-result.lose{font-size:clamp(16px,2.8cqw,27px)!important;transform:none!important;}
@media(max-width:760px){.dial-core .dial-result{font-size:clamp(12px,3.4vw,20px)!important;padding:5px!important}.dial-core .dial-result.lose{font-size:clamp(11px,3.1vw,18px)!important;}}
@media(max-width:420px){.dial-core .dial-result{font-size:clamp(10px,3.8vw,16px)!important}.dial-core .dial-result.lose{font-size:clamp(9px,3.5vw,14px)!important;}}

/* Shopping cart */
.shop-buy-row{display:flex;align-items:center;gap:8px;margin-top:auto}
.shop-buy-row .shop-buy{flex:1}
.cart-qty{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:9px 8px;border:1px solid #6b4b8d;border-radius:10px;color:#eadcff;font-weight:800;background:#2b1b3c}
.shop-cart-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0 0;padding:14px 16px;border:1px solid #5b3c78;border-radius:14px;background:linear-gradient(135deg,#2a1a3b,#1b1328);box-shadow:0 10px 30px #0002}
.shop-cart-bar div{display:flex;flex-direction:column;gap:4px}.shop-cart-bar span{color:#bda9d0;font-size:13px}
.cart-checkout-list{display:grid;gap:10px;margin:18px 0}.cart-checkout-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #3b2a4b}.cart-checkout-total{display:flex;justify-content:space-between;font-size:18px;padding-top:12px}
@media(max-width:600px){.shop-cart-bar{align-items:stretch;flex-direction:column}.shop-cart-bar .btn{width:100%}}

/* Improved cart controls and withdrawal presentation */
.shop-buy-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:auto;padding-top:10px}
.qty-btn{width:34px;height:34px;border:1px solid #76529a;border-radius:10px;background:linear-gradient(180deg,#3a2452,#241632);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:transform .16s,background .16s}
.qty-btn:hover:not(:disabled){transform:translateY(-2px);background:linear-gradient(180deg,#59377a,#332044)}
.qty-btn:disabled{opacity:.3;cursor:not-allowed}
.cart-qty{min-width:34px;height:34px;padding:0 8px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #8e63b8;background:#2e1b43;color:#fff;font-weight:900;font-size:14px}
.shop-cart-bar{position:sticky;bottom:14px;z-index:4;backdrop-filter:blur(12px)}
#withdraw-form{display:grid;gap:14px}
#withdraw-form .check-row{padding:12px 14px;border:1px solid #3c2a4d;border-radius:12px;background:#21172d;color:#d9cce5}
#withdraw-form .check-row input{accent-color:var(--accent)}

/* Winning line reveal: the yellow probability arc appears with a clean expanding animation after the roulette stops. */
.dial.result-win .ring {
  animation: win-line-reveal .65s cubic-bezier(.16,1,.3,1) both !important;
  transform-origin: 50% 50%;
}
@keyframes win-line-reveal {
  0% { opacity: .15; transform: scale(.72); filter: drop-shadow(0 0 1px #f5c542); }
  55% { opacity: 1; transform: scale(1.04); filter: drop-shadow(0 0 16px #f5c542); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 9px #f5c542aa); }
}
@media(prefers-reduced-motion:reduce){.dial.result-win .ring{animation:none!important}}

/* Upgrade button arrow icon (single golden arrow like reference) */
.upgrade-arrow-ico {
  width: 18px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  filter: drop-shadow(0 0 6px #ffb22e88);
  flex-shrink: 0;
}
.upgrade-btn {
  gap: 8px !important;
}
.upgrade-btn img.upgrade-arrow-ico {
  position: relative;
  top: -1px;
}

/* Move sound/fast toolbar buttons a bit to the right */
.workspace-toolbar {
  padding-left: 18px !important;
}
.toolbar-left {
  margin-left: 12px !important;
  gap: 12px !important;
}

/* ===== Improved delivery / withdrawal system ===== */
.delivery-list {
  display: grid;
  gap: 16px;
  padding: 14px 12px 24px;
}
.delivery-card {
  background: linear-gradient(165deg, #221a2f 0%, #181321 100%);
  border: 1px solid #3a2c4d;
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.delivery-card:hover {
  border-color: #5a3f78;
  box-shadow: 0 8px 28px #0005;
}
.delivery-card.has-tracking {
  border-color: #4a9b72;
  box-shadow: 0 0 0 1px #4a9b7233, 0 8px 24px #0004;
}
.delivery-card.has-tracking::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3ecf8e, #7dff9a, #3ecf8e);
}
.delivery-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 4px;
}
.delivery-card-head b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #f3ebff;
}
.delivery-card-head small {
  display: block;
  color: #9a8aad;
  margin-top: 4px;
  font-size: 11px;
}
.delivery-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .3px;
}
.delivery-status-badge.pending {
  background: #3a2a1a;
  color: #ffc978;
  border: 1px solid #6a4a20;
}
.delivery-status-badge.shipped {
  background: #1a2a3a;
  color: #7ec8ff;
  border: 1px solid #2a5a7a;
}
.delivery-status-badge.ready,
.delivery-status-badge.delivered {
  background: #1a2e24;
  color: #7dff9a;
  border: 1px solid #2a6a48;
}
.delivery-status-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.delivery-steps {
  display: flex;
  gap: 0;
  margin: 16px 0 8px;
  padding: 0 4px;
}
.delivery-step {
  flex: 1;
  text-align: center;
  position: relative;
  font-size: 9px;
  color: #6a5a7a;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 600;
}
.delivery-step::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a2038;
  border: 2px solid #4a3a5a;
  margin: 0 auto 6px;
  position: relative;
  z-index: 1;
}
.delivery-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);
  height: 2px;
  background: #2a2038;
  z-index: 0;
}
.delivery-step.done {
  color: #7dff9a;
}
.delivery-step.done::before {
  background: #2a6a48;
  border-color: #7dff9a;
  box-shadow: 0 0 8px #7dff9a55;
}
.delivery-step.done:not(:last-child)::after {
  background: linear-gradient(90deg, #4a9b72, #2a6a48);
}
.delivery-step.active {
  color: #bc98ff;
}
.delivery-step.active::before {
  background: #5a3a8a;
  border-color: #bc98ff;
  box-shadow: 0 0 10px #bc98ff66;
  animation: step-pulse 1.6s ease-in-out infinite;
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 6px #bc98ff44; }
  50% { box-shadow: 0 0 14px #bc98ff88; }
}
.delivery-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.delivery-details > div {
  background: #14101c;
  border: 1px solid #2e243c;
  border-radius: 12px;
  padding: 12px 14px;
}
.delivery-details span {
  display: block;
  color: #8a7a9a;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 5px;
}
.delivery-details b {
  font-size: 12px;
  word-break: break-word;
  color: #efe6ff;
  font-weight: 600;
}
.tracking-value {
  color: #7dff9a !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px !important;
  letter-spacing: 1px;
}
.delivery-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.delivery-code-row .tracking-value {
  flex: 1;
}
.btn-copy-code {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
  background: #2a3d32;
  color: #7dff9a;
  border: 1px solid #3a6a50;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-copy-code:hover {
  background: #345a44;
  transform: translateY(-1px);
}
.btn-copy-code.copied {
  background: #1a4a30;
  color: #b0ffc8;
}
.delivery-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a2e24, #152820);
  color: #9eecc0;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid #2a5a40;
}
.delivery-notice .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #7dff9a;
}
.delivery-notice.delivery-note {
  background: linear-gradient(135deg, #2a2238, #1e1830);
  border-color: #4a3a60;
  color: #d4c4ee;
}
.delivery-how {
  margin-top: 12px !important;
  font-weight: 600;
}
.inventory-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.inventory-actions .btn {
  flex: 1;
  min-width: 120px;
  font-size: 11px;
  padding: 10px 12px;
  border-radius: 10px;
}
.inventory-actions [data-action="withdraw"] {
  background: linear-gradient(180deg, #3a2a55, #2a1c40);
  border: 1px solid #6a4a90;
  color: #e8d8ff;
  font-weight: 700;
}
.inventory-actions [data-action="withdraw"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a3870, #342250);
  border-color: #8a6ab0;
}
#withdraw-form {
  display: grid;
  gap: 16px;
}
#withdraw-form .form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
  color: #d4c4ee;
}
#withdraw-form input[type="text"],
#withdraw-form input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  border-radius: 12px;
  border: 1px solid #4a3a60;
  background: #1a1424;
}
#withdraw-form input:focus {
  border-color: #8a6ab0;
  outline: none;
  box-shadow: 0 0 0 3px #8a6ab033;
}
#withdraw-form .check-row {
  padding: 14px 16px;
  border: 1px solid #3c2a4d;
  border-radius: 12px;
  background: #21172d;
  color: #d9cce5;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
#withdraw-form .check-row:hover {
  border-color: #5a3f78;
  background: #281d38;
}
#withdraw-form .check-row input {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
#withdraw-form .btn-primary {
  margin-top: 4px;
  min-height: 48px;
  font-size: 15px;
}
.withdraw-item-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: #1a1424;
  border: 1px solid #3a2c4d;
  border-radius: 14px;
  margin-bottom: 4px;
}
.withdraw-item-preview img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
  background: #120e1a;
}
.withdraw-item-preview div b {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.withdraw-item-preview div span {
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 600px) {
  .delivery-details { grid-template-columns: 1fr; }
  .delivery-card-head { flex-direction: column; gap: 10px; }
  .delivery-steps { font-size: 8px; }
}

.pickup-code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  text-align: center;
  padding: 18px;
  margin: 16px 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a2e24, #152820);
  color: #7dff9a;
  border: 1px solid #2a5a40;
  box-shadow: inset 0 0 20px #7dff9a15;
}
.modal ol.delivery-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  color: #c8b8dc;
  line-height: 1.7;
  font-size: 13px;
}
.modal ol.delivery-steps li {
  margin-bottom: 4px;
}

/* In-app notifications / alerts */
.alerts-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}
.alert-item {
  padding: 12px 14px;
  border-radius: 12px;
  background: #1a1424;
  border: 1px solid #342a45;
}
.alert-item.delivery {
  border-color: #2a5a40;
  background: linear-gradient(135deg, #1a2e24, #152820);
}
.alert-item div {
  font-size: 13px;
  color: #efe6ff;
  line-height: 1.4;
}
.alert-item small {
  display: block;
  margin-top: 6px;
  color: #8a7a9a;
  font-size: 11px;
}
.admin-login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(ellipse at 50% 20%, #2a1a40 0%, #100d18 60%);
}
.admin-login-card {
  width: min(400px, 100%);
  background: #1b1526;
  border: 1px solid #3a2c4d;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 20px 50px #0006;
}
.admin-login-card h1 {
  margin: 12px 0 6px;
  font-size: 24px;
}
.admin-login-card > p {
  color: #a895b9;
  margin: 0 0 18px;
  font-size: 13px;
}
#admin-login-form .form-group {
  margin-bottom: 14px;
}
#admin-login-form input {
  width: 100%;
}
#admin-pass-error:not(:empty) {
  color: #ff8a9c;
  font-size: 13px;
  margin-bottom: 12px;
}

.delivery-admin-form {
  display: grid;
  gap: 8px;
  min-width: 220px;
}
.delivery-admin-form select,
.delivery-admin-form input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #4a3a60;
  background: #1a1424;
  color: #efe6ff;
  font-size: 12px;
}
.delivery-admin-form select:focus,
.delivery-admin-form input:focus {
  border-color: #8a6ab0;
  outline: none;
}
.delivery-admin-form .btn {
  margin-top: 2px;
}

/* ===== Deposit modal (cards / crypto) ===== */
.modal.wide .dep-modal,
.dep-modal { max-width: 440px; margin: 0 auto; }
.dep-title {
  font-size: 20px !important;
  font-weight: 700;
  margin: 0 0 16px !important;
  text-align: left;
}
.dep-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: #14101c;
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 18px;
}
.dep-tab {
  border: 0;
  background: transparent;
  color: #9a8aad;
  padding: 11px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.dep-tab.active {
  background: #2a2038;
  color: #fff;
  box-shadow: 0 2px 10px #0004;
}
.dep-row-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: #b0a0c4;
}
.dep-currency-pill {
  background: #f5c542;
  color: #1a1208;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 8px;
}
.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.pay-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  min-height: 140px;
  border-radius: 14px;
  border: 2px solid #2e243c;
  background: #1a1424;
  cursor: pointer;
  color: #d4c4ee;
  transition: border-color .15s, background .15s, transform .15s;
}
.pay-tile img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 14px;
}
.pay-tile span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.2;
}
.pay-tile:hover { border-color: #5a3f78; }
.pay-tile.active {
  border-color: #f5c542;
  background: #241c14;
  box-shadow: 0 0 0 1px #f5c54255;
}
.dep-amount-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #b0a0c4;
  flex-wrap: wrap;
}
.dep-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dep-chip {
  border: 0;
  background: #241c30;
  color: #c8b8dc;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.dep-chip.active {
  background: #f5c542;
  color: #1a1208;
}
.dep-amount-box {
  position: relative;
  margin-bottom: 12px;
}
.dep-amount-box input {
  width: 100%;
  padding: 16px 90px 16px 16px;
  font-size: 22px;
  font-weight: 700;
  border-radius: 14px;
  border: 1px solid #3a2c4d;
  background: #14101c;
  color: #fff;
}
.dep-amount-box input:focus {
  border-color: #f5c542;
  outline: none;
}
.dep-unit {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  color: #8a7a9a;
  font-weight: 700;
  font-size: 16px;
  pointer-events: none;
}
.dep-min {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #6a5a7a;
  font-size: 11px;
  pointer-events: none;
}
.dep-promo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #2e243c;
  background: #14101c;
  margin-bottom: 16px;
}
.dep-promo-ico { font-size: 16px; }
.dep-promo input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 4px 0;
  font-size: 14px;
}
.dep-promo input:focus { outline: none; }
.dep-promo-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #3a2c4d;
  display: grid;
  place-items: center;
  color: #5a4a6a;
  font-size: 12px;
}
.dep-submit {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  background: #f5c542;
  color: #1a1208;
  cursor: pointer;
  box-shadow: 0 8px 24px #f5c54244;
  transition: transform .15s, filter .15s;
}
.dep-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.dep-submit:active { transform: scale(.98); }
.dep-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  color: #7a6a8a;
}
@media (max-width: 480px) {
  .pay-grid { grid-template-columns: repeat(2, 1fr); }
  .dep-amount-box input { font-size: 18px; }
}

.pay-tile-label {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #f0e6ff;
}
.pay-tile:has(.pay-tile-label) {
  min-height: 88px;
}

.dep-modal[data-tab="cards"] .pay-grid,
.pay-grid.cards-only {
  grid-template-columns: repeat(2, 1fr);
}
.pay-tile span { font-size: 12px; }

/* Tab switch animation */
.dep-modal {
  transition: opacity .16s ease, transform .16s ease;
}
.dep-modal.dep-switching-out {
  opacity: 0;
  transform: translateX(-12px);
}
.dep-modal.dep-switching-in {
  opacity: 0;
  transform: translateX(12px);
}
.dep-modal:not(.dep-switching-in):not(.dep-switching-out) {
  opacity: 1;
  transform: translateX(0);
}
.dep-tabs .dep-tab {
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.dep-tab.active {
  transform: scale(1.02);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.google-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 2px;
}
.pay-grid.cards-only .pay-tile img {
  width: 112px;
  height: 112px;
}

/* Shop pagination */
.shop-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 8px;
  padding: 12px;
  grid-column: 1 / -1;
}
.page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #3a2c4d;
  background: #1a1424;
  color: #e0d4f0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.page-btn:hover:not(:disabled) {
  border-color: #8a6ab0;
  background: #241c30;
}
.page-btn.active {
  background: #f5c542;
  color: #1a1208;
  border-color: #f5c542;
}
.page-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.page-info {
  color: #9a8aad;
  font-size: 12px;
  margin-left: 8px;
}
.inventory-shop-grid .shop-pager {
  width: 100%;
}

/* Compact catalogs — no empty stretch */
.catalogs {
  align-items: start;
}
.catalog-panel {
  height: auto !important;
  align-self: start;
  display: flex;
  flex-direction: column;
}
.catalog-panel .items-grid {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  align-content: start;
}
#target-grid, #source-grid {
  height: auto !important;
  min-height: 0 !important;
}

/* ===== Page / interaction animations ===== */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(14px) scale(.992); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes page-leave {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(.99); }
}
@keyframes slot-pop {
  0%   { transform: scale(.94); opacity: .55; }
  55%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes soft-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(164,119,255,.35); }
  50%     { box-shadow: 0 0 0 8px rgba(164,119,255,0); }
}

.layout.page-enter {
  animation: page-enter .48s cubic-bezier(.16,1,.3,1) both;
}
body.page-leaving .layout,
body.page-leaving .main {
  animation: page-leave .28s ease both;
  pointer-events: none;
}
.selected-item.slot-pop {
  animation: slot-pop .38s cubic-bezier(.2,.9,.3,1) both;
}
.catalog-panel {
  animation: fade-up .42s cubic-bezier(.16,1,.3,1) both;
}
.catalogs .catalog-panel:nth-child(2) { animation-delay: .06s; }
.workspace {
  animation: fade-up .4s cubic-bezier(.16,1,.3,1) both;
}
.product-card.selected,
.shop-card:active {
  animation: soft-pulse .55s ease;
}
.toast {
  animation: fade-up .32s cubic-bezier(.16,1,.3,1) both;
}

/* Logout confirm */
.logout-confirm-text {
  color: var(--muted);
  margin: 8px 0 22px;
  line-height: 1.55;
}
.logout-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.logout-confirm-actions .btn { min-width: 120px; }
.btn-danger-soft {
  background: linear-gradient(135deg, #c44b6a, #a477ff) !important;
  border: 0 !important;
  color: #fff !important;
}
.btn-danger-soft:hover { filter: brightness(1.06); }

/* Google button polish */
.btn-google {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff !important;
  color: #1f1f1f !important;
  border: 1px solid #e0e0e0 !important;
  font-weight: 600;
  margin: 6px 0 4px;
  transition: box-shadow .2s, transform .2s;
}
.btn-google:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.google-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 2px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .layout.page-enter,
  body.page-leaving .layout,
  .selected-item.slot-pop,
  .catalog-panel,
  .workspace,
  .toast { animation: none !important; }
}

/* Delivery item photo */
.delivery-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.delivery-item-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: #17121f;
  border: 1px solid #342a45;
  flex-shrink: 0;
  padding: 4px;
}
.delivery-admin-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.delivery-admin-thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  background: #17121f;
  border: 1px solid #342a45;
  flex-shrink: 0;
}



/* ========== MOBILE: рулетка 310px, меньше пустоты, каталоги читаемые ========== */
@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Убрать пустоту сверху (дублирующий логотип) */
  .page-heading.page-heading-logo {
    display: none !important;
  }

  .main {
    padding: 8px 10px 0 !important;
  }
  .workspace {
    padding: 10px 8px !important;
    border-radius: 14px !important;
  }
  .workspace-toolbar {
    margin-bottom: 4px !important;
  }

  .layout {
    grid-template-columns: 1fr !important;
  }
  .activity-rail {
    height: auto !important;
    position: static !important;
    padding: 8px 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #32223e !important;
  }
  .feed-list {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    margin-top: 4px !important;
    scrollbar-width: none;
  }
  .feed-card {
    min-width: 118px !important;
    width: 118px !important;
    flex-shrink: 0 !important;
  }

  /* Рулетка сверху, слоты внизу рядом */
  .upgrade-arena {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "dial dial"
      "src tgt" !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .upgrade-arena > .chance-frame,
  .chance-frame {
    grid-area: dial !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .upgrade-arena > #source-slot,
  .upgrade-arena > .selected-item:not(.target) {
    grid-area: src !important;
  }
  .upgrade-arena > #target-slot,
  .upgrade-arena > .selected-item.target {
    grid-area: tgt !important;
  }

  #source-slot,
  #target-slot,
  .selected-item,
  .selected-item.target {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 150px !important;
    transform: none !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }
  .selected-item > img {
    width: auto !important;
    max-width: 70% !important;
    height: 72px !important;
    margin: 6px auto !important;
    display: block !important;
  }
  .slot-top span { font-size: 9px !important; }
  .slot-top b { font-size: 10px !important; }
  .slot-info h3 { font-size: 12px !important; line-height: 1.25 !important; }
  .slot-info p { display: none !important; }
  .slot-info .slot-price { font-size: 12px !important; }
  .empty-slot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 !important;
    text-align: center !important;
    font-size: 11px !important;
  }

  .dial {
    width: 310px !important;
    height: 310px !important;
    max-width: 92vw !important;
    max-height: 92vw !important;
    margin: 0 auto !important;
  }
  .dial-core {
    width: 180px !important;
    height: 180px !important;
  }
  .chance-value {
    font-size: 36px !important;
  }
  #chance-sub {
    font-size: 12px !important;
  }
  .upgrade-btn {
    width: min(300px, 92%) !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    margin: 8px auto 0 !important;
  }
  .upgrade-caption {
    font-size: 11px !important;
    text-align: center !important;
    margin: 4px 0 0 !important;
  }

  .arena-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }
  .arena-controls .arena-btn-spacer { display: none !important; }
  .multiplier-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .multiplier-controls button {
    flex: 1 1 18%;
    min-width: 52px;
    padding: 9px 6px !important;
    font-size: 12px !important;
  }

  /* Каталоги: одна колонка на телефоне — всё влезает */
  .catalogs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  .catalog-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .panel-head,
  .inventory-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }
  .panel-head h2,
  #source-title {
    font-size: 15px !important;
  }
  .catalog-intro { display: none !important; }
  .items-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .product-card,
  .shop-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px !important;
  }
  .product-card img,
  .shop-card img {
    height: 72px !important;
    width: 100% !important;
    object-fit: contain !important;
  }
  .shop-filters,
  .target-filters {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .shop-filter-price,
  .shop-filter-search {
    width: 100% !important;
  }
  .catalog-tabs {
    width: 100%;
    display: flex !important;
  }
  .catalog-tabs button {
    flex: 1;
    font-size: 12px !important;
    padding: 8px !important;
  }

  .topbar {
    height: auto !important;
    min-height: 52px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }
  .brand { font-size: 17px !important; }
  .header-stats { padding-left: 0 !important; border: 0 !important; }
  .header-actions .btn { padding: 7px 10px !important; font-size: 11px !important; }
}

@media (max-width: 420px) {
  .dial {
    width: 280px !important;
    height: 280px !important;
  }
  .dial-core {
    width: 160px !important;
    height: 160px !important;
  }
  .chance-value {
    font-size: 32px !important;
  }
  #source-slot,
  #target-slot,
  .selected-item {
    min-height: 130px !important;
    padding: 8px 6px !important;
  }
  .selected-item > img {
    height: 60px !important;
  }
}

/* Admin catalog preview */
.admin-preview-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-preview-toolbar .btn.active {
  background: #3a2a52;
  border-color: #8a6ab0;
  color: #fff;
}
.admin-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.admin-preview-card {
  background: #1a1424;
  border: 1px solid #342a45;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-preview-img {
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 40%, #2e203c, #15101c 75%);
  display: grid;
  place-items: center;
  padding: 10px;
}
.admin-preview-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.admin-preview-info {
  padding: 10px;
  display: grid;
  gap: 4px;
}
.admin-preview-info b {
  font-size: 12px;
  line-height: 1.3;
  color: #efe6ff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-preview-info span {
  font-size: 10px;
  color: #9a8aad;
}
.admin-preview-info strong {
  font-size: 13px;
  color: #bc98ff;
}
.admin-table-thumb {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 4px;
  background: #1a1424;
}
@media (max-width: 600px) {
  .admin-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}