/*! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.right-2{right:.5rem}.top-2{top:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-11{margin-left:2.75rem}.mt-1{margin-top:.25rem}.mt-8{margin-top:2rem}.block{display:block}.flex{display:flex}.table{display:table}.table-row{display:table-row}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-full{height:100%}.h-screen{height:100vh}.min-h-\[calc\(100vh-200px\)\]{min-height:calc(100vh - 200px)}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.break-all{word-break:break-all}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-green-700{--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity))}.border-green-800{--tw-border-opacity:1;border-color:rgb(22 101 52/var(--tw-border-opacity))}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-white\/20{border-color:#fff3}.border-white\/30{border-color:#ffffff4d}.bg-black,.bg-edge-dark{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/20{background-color:#fff3}.bg-yellow-600{--tw-bg-opacity:1;background-color:rgb(202 138 4/var(--tw-bg-opacity))}.bg-edge-green{background-image:linear-gradient(135deg,#2d5a3d,#4a8c5a)}.bg-edge-purple{background-image:linear-gradient(135deg,#6b46c1,#9333ea)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position);--tw-gradient-to:#2563eb00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:#ef444400 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-yellow-400{--tw-gradient-from:#facc15 var(--tw-gradient-from-position);--tw-gradient-to:#facc1500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-blue-500{--tw-gradient-to:#3b82f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#3b82f6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-green-500{--tw-gradient-to:#22c55e00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#22c55e var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-yellow-500{--tw-gradient-to:#eab30800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#eab308 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-purple-500{--tw-gradient-to:#a855f7 var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}.to-yellow-600{--tw-gradient-to:#ca8a04 var(--tw-gradient-to-position)}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-20{padding-bottom:5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-edge-title{font-size:2.5rem;line-height:1.2;font-weight:700}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-white\/80{color:#fffc}.text-white\/90{color:#ffffffe6}.text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity))}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.backdrop-blur-lg,.backdrop-blur-sm{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.text-shadow-sm{text-shadow:0 1px 2px #0000004d}.text-shadow{text-shadow:0 2px 4px #0000004d}.edge-card{background:#ffffff1a;border:1px solid #fff3;border-radius:16px}.edge-button,.edge-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.edge-button{background:#fff3;border:1px solid #ffffff4d;border-radius:12px}.check-button{background:#10b981;border-radius:8px}:root{--bg-primary:#000;--bg-secondary:#1a1a1a;--bg-header:#000;--bg-card:#000c;--bg-card-light:#1a1a1ae6;--accent-blue:#4a9eff;--accent-gold:gold;--accent-green:#0f8;--accent-cyan:#00d4ff;--text-primary:#fff;--text-secondary:#fffc;--text-muted:#fff9;--text-dark:#000;--border-radius:16px;--border-radius-lg:24px;--shadow:0 4px 20px #0006;--shadow-lg:0 8px 32px #0009;--shadow-gold:0 0 25px #ffd7004d;--border-gold:1px solid #ffd7004d;--custom-safe-area-top:env(safe-area-inset-top,0px);--custom-safe-area-bottom:env(safe-area-inset-bottom,0px)}*{margin:0;padding:0;box-sizing:border-box}body,html{max-width:430px;margin:0 auto;overflow-x:hidden;overflow-y:auto;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 50%,var(--bg-primary) 100%);color:var(--text-primary);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;width:100%;min-height:100vh}body.admin-fullwidth,html.admin-fullwidth{max-width:100vw!important;width:100vw!important;margin:0!important}#__next{max-width:430px;margin:0 auto;background:inherit}.admin-fullwidth #__next{max-width:100vw!important;width:100vw!important;margin:0!important}@media screen and (orientation:landscape) and (max-height:500px){#__next,body,html{max-width:430px;width:100vw;transform-origin:center}body{overflow-x:hidden}}@media screen and (min-width:431px){html{background:#000;display:flex;justify-content:center;align-items:flex-start;max-width:100vw}body,html{min-height:100vh}body{width:430px;box-shadow:0 0 50px #000c;position:relative;margin:0}body.admin-fullwidth{width:100vw!important;max-width:100vw!important;box-shadow:none!important}html.admin-fullwidth{display:block!important}}#__next{width:430px;min-height:100vh;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,#ffd70008 1px,#0000 0),radial-gradient(circle at 80% 70%,#ffd70005 1px,#0000 0),radial-gradient(circle at 40% 80%,#ffd7000a 1px,#0000 0);background-size:200px 200px,150px 150px,100px 100px;background-repeat:repeat;background-position:var(--global-parallax-bg-position,0 0,120px 80px,40px 20px);transition:background-position .1s ease-out;pointer-events:none;z-index:-1;opacity:.8}a{color:inherit;text-decoration:none}button{border:none;background:none;cursor:pointer;font-family:inherit}.app-container{min-height:100vh;background:var(--bg-primary);position:relative;overflow-x:hidden;max-width:400px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg-header);border-radius:0 0 24px 24px;margin-bottom:0}.app-header .close-btn{width:32px;height:32px;border-radius:50%;background:#0000;justify-content:center;font-weight:500}.app-header .close-btn,.app-header .logo{color:var(--text-dark);display:flex;align-items:center;font-size:18px}.app-header .logo{gap:8px;font-weight:600}.app-header .logo-icon{background:var(--text-dark);font-size:16px;color:#fff;font-weight:600}.app-header .logo-icon,.app-header .menu-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.app-header .menu-btn{background:#0000;color:var(--text-dark);font-size:18px;font-weight:500}.balance-section{display:flex;gap:12px;padding:20px;background:var(--bg-primary)}.balance-item{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-card);border-radius:var(--border-radius);font-size:16px;font-weight:600;transition:all .2s ease;box-shadow:var(--shadow)}.balance-item .icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}.balance-item .icon.diamond{background:var(--accent-blue)}.balance-item .icon.gold{background:var(--accent-gold);color:var(--text-dark)}.balance-item .add-btn{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--text-dark);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;margin-left:8px;transition:all .2s ease}.game-info{display:flex;gap:12px;padding:0 20px 20px}.info-card{flex:1;background:var(--bg-card);border-radius:var(--border-radius);padding:16px;gap:12px;box-shadow:var(--shadow)}.info-card,.info-icon{display:flex;align-items:center}.info-icon{width:40px;height:40px;background:var(--bg-card-light);border-radius:50%;justify-content:center;color:var(--text-secondary)}.info-icon.room{background:var(--accent-blue);color:#fff}.info-content{flex:1}.info-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px}.info-subtitle,.info-value{font-size:12px;color:var(--text-secondary)}.info-subtitle{display:flex;align-items:center;gap:4px}.diamond-icon{color:var(--accent-blue);font-weight:600}.roulette-wheel-container{position:relative;width:320px;height:320px;margin:0 auto 40px}.wheel-pointer{position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:10;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.roulette-wheel{cursor:pointer;transition:transform .2s ease}.roulette-wheel,.wheel-outer{width:100%;height:100%;position:relative}.wheel-outer{border-radius:50%;background:radial-gradient(circle at center,#5a5d6a 0,#4a4d5a 50%,#3a3d4a 100%);box-shadow:0 0 0 8px #3a3d4a,0 8px 32px #0006,inset 0 4px 8px #ffffff1a,inset 0 -4px 8px #0000004d;overflow:hidden}.wheel-segment{width:50%;height:50%;transform-origin:0 0;clip-path:polygon(0 0,100% 0,70.7% 70.7%)}.center-circle,.wheel-segment{position:absolute;top:50%;left:50%}.center-circle{transform:translate(-50%,-50%);width:180px;height:180px;background:radial-gradient(circle at center,#4a4d5a 0,#3a3d4a 100%);border-radius:50%;justify-content:center;box-shadow:0 4px 20px #0000004d,inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0000004d;border:4px solid #3a3d4a}.center-circle,.center-content{display:flex;align-items:center}.center-content{text-align:center;flex-direction:column;gap:8px}.main-text{font-size:22px;font-weight:600;color:var(--text-primary)}.sub-text{font-size:14px;color:var(--text-secondary)}.add-gift-btn{background:linear-gradient(135deg,var(--accent-cyan) 0,#8b5cf6 100%);color:#fff;padding:16px 32px;border-radius:50px;font-size:16px;font-weight:600;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;box-shadow:var(--shadow);margin:0 auto 40px}.add-gift-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.live-wins{padding:0 20px}.live-wins h3{font-size:18px;font-weight:600;color:var(--text-secondary);margin-bottom:16px;text-align:center}.wins-list{background:var(--bg-card);border-radius:var(--border-radius);padding:16px;box-shadow:var(--shadow)}.win-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff1a}.win-item:last-child{border-bottom:none}.win-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-blue);display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}.win-info{flex:1}.win-name{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:2px}.win-amount{font-size:12px;color:var(--accent-gold);font-weight:600}.main-content{padding-bottom:100px;min-height:calc(100vh - 200px)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;width:100%;display:flex!important;padding:12px 8px 16px;background:linear-gradient(180deg,#000000f2,#0a0a0afa)!important;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);border-top:2px solid #0000;-o-border-image:linear-gradient(90deg,#0000,#ffd70099,#0000) 1;border-image:linear-gradient(90deg,#0000,#ffd70099,#0000) 1;z-index:9999!important;height:85px;box-sizing:border-box;visibility:visible!important;opacity:1!important;box-shadow:0 -8px 32px #000c,0 -2px 16px #ffd7001a}.bottom-nav,.bottom-nav-content{justify-content:space-around;align-items:center}.bottom-nav-content{display:flex;padding:0 20px}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff9;text-decoration:none;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);padding:12px 8px;border-radius:16px;min-width:56px;position:relative;background:#ffffff05;border:1px solid #ffffff0d}.nav-item:hover{color:#ffffffe6;background:#ffd7001a;border-color:#ffd7004d;transform:translateY(-2px)}.nav-item.active{color:gold;background:#ffd70026;border-color:#ffd70066;box-shadow:0 4px 20px #ffd70033}.nav-item .icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.nav-item .label{font-size:12px;font-weight:500;text-align:center}.inventory-container,.profile-container,.rank-container,.tasks-container{width:100vw;max-width:430px;min-height:120vh;margin:0 auto;background:linear-gradient(135deg,#000,#1a1a1a 50%,#000)!important;position:relative;overflow-x:hidden;font-family:Inter,sans-serif;display:flex;flex-direction:column;padding-bottom:90px;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spinning{animation:spin 3s cubic-bezier(.23,1,.32,1) forwards}.bg-edge-green{background:linear-gradient(135deg,#2d5a3d,#4a8c5a)}.bg-edge-purple{background:linear-gradient(135deg,#6b46c1,#9333ea)}body.landscape-mode{overflow:hidden}body.landscape-mode>:not(#rotate-message){display:none!important}@media (max-width:480px){.app-header{padding:12px 16px}.balance-section,.game-info,.live-wins{padding:0 16px}.roulette-wheel-container{width:280px;height:280px}.center-circle{width:160px;height:160px}}@media screen and (orientation:landscape) and (max-height:600px){.edge-slots-container{display:none}}.page-header{text-align:center;margin-bottom:2rem;padding:1rem}.page-header h1{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.page-header p{color:var(--text-secondary);font-size:1rem}.inventory-page{padding:1rem;min-height:calc(100vh - 140px)}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;padding:1rem 0}.inventory-item{background:var(--bg-card);border:var(--border-gold);border-radius:var(--border-radius);padding:1.5rem 1rem;text-align:center;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.inventory-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-gold)}.inventory-item.empty{border:1px solid #fff3;opacity:.6}.inventory-item .item-icon{font-size:2.5rem;margin-bottom:.5rem}.inventory-item .item-name{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.inventory-item .item-count{color:var(--accent-gold);font-weight:500;font-size:.9rem}.tasks-page{padding:1rem;min-height:calc(100vh - 140px)}.tasks-list{display:flex;flex-direction:column;gap:1rem}.task-item{background:var(--bg-card);border:var(--border-gold);border-radius:var(--border-radius);padding:1rem;display:flex;align-items:center;gap:1rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.task-item:hover{transform:translateY(-1px);box-shadow:var(--shadow-gold)}.task-item.completed{border-color:var(--accent-green);background:#00ff881a}.task-item .task-icon{font-size:2rem;min-width:60px;text-align:center}.task-item .task-content{flex:1}.task-item .task-content h3{font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.task-item .task-content p{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem}.task-item .task-reward{color:var(--accent-gold);font-weight:600;font-size:.9rem}.task-button{background:linear-gradient(45deg,var(--accent-gold),#ffed4e);color:var(--text-dark);border:none;border-radius:8px;padding:.5rem 1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:80px}.task-button:hover{transform:scale(1.05);box-shadow:0 4px 15px #ffd70066}.task-item.completed .task-button{background:var(--accent-green);color:var(--text-primary)}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(21 128 61/var(--tw-bg-opacity))}.hover\:bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(126 34 206/var(--tw-bg-opacity))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:bg-yellow-700:hover{--tw-bg-opacity:1;background-color:rgb(161 98 7/var(--tw-bg-opacity))}.hover\:from-yellow-500:hover{--tw-gradient-from:#eab308 var(--tw-gradient-from-position);--tw-gradient-to:#eab30800 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-yellow-700:hover{--tw-gradient-to:#a16207 var(--tw-gradient-to-position)}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:hover\:scale-100:hover:disabled{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} /* ========== GLOBAL EDGE ROLLS STYLES ========== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* Override Telegram WebApp CSS variables */ --tg-theme-secondary-bg-color: #090909 !important; --tg-theme-bg-color: #090909 !important; /* New Black Theme with Gradient Accents */ --bg-primary: #090909; --bg-secondary: #0a0a0a; --bg-header: #090909; --bg-card: #090909; --bg-card-hover: #252525; --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --accent-blue: #667eea; --accent-purple: #764ba2; --accent-gold: #ffd700; --accent-green: #00ff88; --accent-cyan: #00d4ff; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); --text-dark: #000000; --border-radius: 12px; --border-radius-lg: 20px; --shadow: 0 4px 20px rgba(0, 0, 0, 0.8); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.9); --shadow-gradient: 0 0 30px rgba(102, 126, 234, 0.3); --border-subtle: 1px solid rgba(255, 255, 255, 0.1); --custom-safe-area-top: env(safe-area-inset-top, 0px); --custom-safe-area-bottom: env(safe-area-inset-bottom, 0px); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { /* ФИКСИРОВАННАЯ МОБИЛЬНАЯ ОРИЕНТАЦИЯ */ max-width: 430px; /* Максимальная ширина как у iPhone 14 Pro Max */ margin: 0 auto; /* Центрируем на больших экранах */ overflow-x: hidden; overflow-y: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #090909 !important; color: var(--text-primary); min-height: 100vh; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; /* Принудительная портретная ориентация */ width: 100%; min-height: 100vh; } /* Force override Telegram WebApp styles */ body[ontouchstart] { background: #090909 !important; } /* Override any background set by Telegram */ body * { --tg-theme-secondary-bg-color: #090909 !important; --tg-theme-bg-color: #090909 !important; } /* Исключения для админки - полная ширина */ body.admin-fullwidth, html.admin-fullwidth { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; } /* Контейнер для всего приложения */ #__next { max-width: 430px; margin: 0 auto; min-height: 100vh; background: inherit; position: relative; } /* Исключение для админки */ .admin-fullwidth #__next { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; } /* Ensure admin pages are truly full-width even inside the root container */ .admin-fullwidth .root-simple { max-width: 100vw !important; width: 100vw !important; margin: 0 !important; } /* Медиа-запросы для принудительной мобильной ориентации */ @media screen and (orientation: landscape) and (max-height: 500px) { /* Для маленьких экранов в ландшафте - принудительно делаем портретный вид */ html, body, #__next { max-width: 430px; width: 100vw; transform-origin: center; } /* Скрываем горизонтальный скролл */ body { overflow-x: hidden; } } /* Для больших экранов (десктоп) - центрируем мобильный вид */ @media screen and (min-width: 431px) { html { background: #090909; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; max-width: 100vw; } body { width: 430px; min-height: 100vh; box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); position: relative; margin: 0; } /* Исключение для админки - полная ширина */ body.admin-fullwidth { width: 100vw !important; max-width: 100vw !important; box-shadow: none !important; } html.admin-fullwidth { display: block !important; } } #__next { width: 430px; min-height: 100vh; position: relative; } /* Global Parallax Background with Random Dollar Positioning */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.03) 1px, transparent 1px), radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.02) 1px, transparent 1px), radial-gradient(circle at 40% 80%, rgba(255, 215, 0, 0.04) 1px, transparent 1px); background-size: 200px 200px, 150px 150px, 100px 100px; background-repeat: repeat; background-position: var(--global-parallax-bg-position, 0 0, 120px 80px, 40px 20px); transition: background-position 0.1s ease-out; pointer-events: none; z-index: -1; opacity: 0.8; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } /* Root Simple Container */ .root-simple { min-height: 100vh; background: #090909 !important; position: relative; overflow-x: hidden; max-width: 430px; margin: 0 auto; } /* App Container */ .app-container { min-height: 100vh; background: var(--bg-primary); position: relative; overflow-x: hidden; max-width: 400px; margin: 0 auto; } /* Header */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bg-header); border-radius: 0 0 24px 24px; margin-bottom: 0; } .app-header .close-btn { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--text-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; } .app-header .logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--text-dark); } .app-header .logo-icon { width: 32px; height: 32px; background: var(--text-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: white; font-weight: 600; } .app-header .menu-btn { width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--text-dark); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; } /* Balance Section */ .balance-section { display: flex; gap: 12px; padding: 20px; background: var(--bg-primary); } .balance-item { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-card); border-radius: var(--border-radius); font-size: 16px; font-weight: 600; transition: all 0.2s ease; box-shadow: var(--shadow); } .balance-item .icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: white; } .balance-item .icon.diamond { background: var(--accent-blue); } .balance-item .icon.gold { background: var(--accent-gold); color: var(--text-dark); } .balance-item .add-btn { width: 24px; height: 24px; border-radius: 50%; background: white; color: var(--text-dark); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; margin-left: 8px; transition: all 0.2s ease; } /* Game Info Cards */ .game-info { display: flex; gap: 12px; padding: 0 20px 20px; } .info-card { flex: 1; background: var(--bg-card); border-radius: var(--border-radius); padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); } .info-icon { width: 40px; height: 40px; background: var(--bg-card-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); } .info-icon.room { background: var(--accent-blue); color: white; } .info-content { flex: 1; } .info-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .info-value { font-size: 12px; color: var(--text-secondary); } .info-subtitle { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; } .diamond-icon { color: var(--accent-blue); font-weight: 600; } /* Roulette Wheel */ .roulette-wheel-container { position: relative; width: 320px; height: 320px; margin: 0 auto 40px; } .wheel-pointer { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); z-index: 10; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .roulette-wheel { width: 100%; height: 100%; position: relative; cursor: pointer; transition: transform 0.2s ease; } .wheel-outer { width: 100%; height: 100%; border-radius: 50%; position: relative; background: radial-gradient(circle at center, #5a5d6a 0%, #4a4d5a 50%, #3a3d4a 100%); box-shadow: 0 0 0 8px #3a3d4a, 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 4px 8px rgba(255, 255, 255, 0.1), inset 0 -4px 8px rgba(0, 0, 0, 0.3); overflow: hidden; } .wheel-segment { position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform-origin: 0 0; clip-path: polygon(0 0, 100% 0, 70.7% 70.7%); } .center-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 180px; background: radial-gradient(circle at center, #4a4d5a 0%, #3a3d4a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 -2px 4px rgba(0, 0, 0, 0.3); border: 4px solid #3a3d4a; } .center-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .main-text { font-size: 22px; font-weight: 600; color: var(--text-primary); } .sub-text { font-size: 14px; color: var(--text-secondary); } /* Add Gift Button */ .add-gift-btn { background: linear-gradient(135deg, var(--accent-cyan) 0%, #8b5cf6 100%); color: white; padding: 16px 32px; border-radius: 50px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; box-shadow: var(--shadow); margin: 0 auto 40px; } .add-gift-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* Live Wins */ .live-wins { padding: 0 20px; } .live-wins h3 { font-size: 18px; font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; text-align: center; } .wins-list { background: var(--bg-card); border-radius: var(--border-radius); padding: 16px; box-shadow: var(--shadow); } .win-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .win-item:last-child { border-bottom: none; } .win-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-size: 18px; color: white; } .win-info { flex: 1; } .win-name { font-size: 14px; font-weight: 500; color: var(--text-primary); margin-bottom: 2px; } .win-amount { font-size: 12px; color: var(--accent-gold); font-weight: 600; } /* Main Content */ .main-content { padding-bottom: 100px; min-height: calc(100vh - 200px); } /* Bottom Navigation */ /* Bottom navigation global styles removed - using component-specific styles */ /* Page Containers - Mobile First */ .inventory-container, .tasks-container, .rank-container, .profile-container { width: 100vw; max-width: 430px; min-height: 120vh; margin: 0 auto; background: linear-gradient(135deg, #090909 0%, #1a1a1a 50%, #090909 100%) !important; position: relative; overflow-x: hidden; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; padding-bottom: 90px; box-sizing: border-box; } /* Animations */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinning { animation: spin 3s cubic-bezier(0.23, 1, 0.32, 1) forwards; } /* Edge Game Specific Styles */ .bg-edge-green { background: linear-gradient(135deg, #2d5a3d 0%, #4a8c5a 100%); } .bg-edge-purple { background: linear-gradient(135deg, #6b46c1 0%, #9333ea 100%); } /* Ландшафтный режим - скрываем основной контент */ body.landscape-mode { overflow: hidden; } body.landscape-mode > *:not(#rotate-message) { display: none !important; } /* Responsive */ @media (max-width: 480px) { .app-header { padding: 12px 16px; } .balance-section, .game-info, .live-wins { padding: 0 16px; } .roulette-wheel-container { width: 280px; height: 280px; } .center-circle { width: 160px; height: 160px; } } /* Дополнительные стили для фиксированной мобильной ориентации */ @media screen and (orientation: landscape) and (max-height: 600px) { /* Принудительно скрываем контент в ландшафте на маленьких экранах */ .edge-slots-container { display: none; } }/* Page Styles */ .page-header { text-align: center; margin-bottom: 2rem; padding: 1rem; } .page-header h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .page-header p { color: var(--text-secondary); font-size: 1rem; } /* Inventory Styles */ .inventory-page { padding: 1rem; min-height: calc(100vh - 140px); } .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; padding: 1rem 0; } .inventory-item { background: var(--bg-card); border: var(--border-gold); border-radius: var(--border-radius); padding: 1.5rem 1rem; text-align: center; transition: all 0.3s ease; backdrop-filter: blur(10px); } .inventory-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); } .inventory-item.empty { border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0.6; } .inventory-item .item-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .inventory-item .item-name { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .inventory-item .item-count { color: var(--accent-gold); font-weight: 500; font-size: 0.9rem; } /* Tasks Styles */ .tasks-page { padding: 1rem; min-height: calc(100vh - 140px); } .tasks-list { display: flex; flex-direction: column; gap: 1rem; } .task-item { background: var(--bg-card); border: var(--border-gold); border-radius: var(--border-radius); padding: 1rem; display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; backdrop-filter: blur(10px); } .task-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-gold); } .task-item.completed { border-color: var(--accent-green); background: rgba(0, 255, 136, 0.1); } .task-item .task-icon { font-size: 2rem; min-width: 60px; text-align: center; } .task-item .task-content { flex: 1; } .task-item .task-content h3 { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .task-item .task-content p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .task-item .task-reward { color: var(--accent-gold); font-weight: 600; font-size: 0.9rem; } .task-button { background: linear-gradient(45deg, var(--accent-gold), #ffed4e); color: var(--text-dark); border: none; border-radius: 8px; padding: 0.5rem 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; min-width: 80px; } .task-button:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } .task-item.completed .task-button { background: var(--accent-green); color: var(--text-primary); } /* ========== EDGEROULETTESLOTS.CSS ========== */ /* Premium Black Roulette - Фиксированная мобильная ориентация */ /* УБИРАЕМ ВСЕ ГРАНИЦЫ У ПОДАРКОВ */ .edge-slots-container .telegram-gift, .edge-slots-container .telegram-gift *, .edge-slots-container .telegram-gift svg, .edge-slots-container .telegram-gift svg *, .edge-slots-container .slot-item-clean, .edge-slots-container .slot-item-clean *, .edge-slots-container .telegram-gift-container, .edge-slots-container .telegram-gift-container * { border: none !important; outline: none !important; } /* Убираем filter только у НЕ легендарных подарков */ .edge-slots-container .telegram-gift:not(.telegram-gift--legendary) { filter: none !important; } /* Убираем свечение у обычных редкостей */ .edge-slots-container .telegram-gift--common, .edge-slots-container .telegram-gift--rare, .edge-slots-container .telegram-gift--epic { box-shadow: none !important; filter: none !important; animation: none !important; } /* Убираем свечение полностью */ .edge-slots-container .telegram-gift.visible { filter: none !important; } .edge-slots-container .telegram-gift.center-visible { filter: none !important; } .edge-slots-container .telegram-gift.animating { filter: none !important; } .edge-slots-container { /* ФИКСИРОВАННЫЕ МОБИЛЬНЫЕ ПРОПОРЦИИ */ width: 100vw; max-width: 430px; /* Максимальная ширина как у iPhone 14 Pro Max */ min-height: 120vh; /* Делаем страницу выше для скролла, как на других страницах */ margin: 0 auto; /* Центрируем на больших экранах */ background: #090909 !important; position: relative; overflow-x: hidden; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; padding-bottom: 90px; /* Принудительная портретная ориентация */ box-sizing: border-box; } /* Центральная линия индикатор для рулетки */ .center-indicator { position: absolute; top: 50%; left: 50%; width: 4px; height: 200px; background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.9), transparent); transform: translate(-50%, -50%); z-index: 10; pointer-events: none; box-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } /* Slots Background с параллакс эффектом - как на других страницах */ .edge-slots-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: /* Layer 1: Large scattered dollars - extreme random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Ctext x='89' y='127' font-family='Arial' font-size='48' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='423' y='89' font-family='Arial' font-size='52' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='167' y='378' font-family='Arial' font-size='44' font-weight='bold' fill='rgba(255,255,255,0.09)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='534' y='312' font-family='Arial' font-size='50' font-weight='bold' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='456' font-family='Arial' font-size='46' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='67' y='234' font-family='Arial' font-size='42' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--slots-bg-pos-1, 0 0), /* Layer 2: Medium scattered dollars - wild random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='380' viewBox='0 0 450 380'%3E%3Ctext x='123' y='67' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='356' y='189' font-family='Arial' font-size='32' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='78' y='298' font-family='Arial' font-size='24' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='134' font-family='Arial' font-size='30' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='412' y='67' font-family='Arial' font-size='26' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='34' y='156' font-family='Arial' font-size='22' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='345' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='389' y='298' font-family='Arial' font-size='25' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--slots-bg-pos-2, 120px 80px), /* Layer 3: Small scattered dollars - chaotic positioning */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Ctext x='67' y='45' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='123' font-family='Arial' font-size='18' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='45' y='189' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='67' font-family='Arial' font-size='20' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='156' y='234' font-family='Arial' font-size='17' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='198' font-family='Arial' font-size='15' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='23' y='267' font-family='Arial' font-size='13' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='189' y='89' font-family='Arial' font-size='19' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='123' y='156' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='267' y='245' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--slots-bg-pos-3, 40px 20px); background-size: 600px 500px, /* Large scattered - much bigger tiles */ 450px 380px, /* Medium scattered - bigger */ 320px 280px; /* Small scattered - bigger */ background-repeat: repeat; transition: background-position 0.1s ease-out; } /* Simple Balance Display */ .balance-display { position: absolute; top: 20px; right: 20px; text-align: right; z-index: 20; cursor: pointer; transition: all 0.3s ease; border-radius: 12px; padding: 12px 16px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); } .balance-display:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); } /* Free Spin Display - mirrors balance-display but on the left */ .free-spin-display { position: absolute; top: 20px; left: 20px; text-align: left; z-index: 20; cursor: pointer; transition: all 0.3s ease; border-radius: 12px; padding: 12px 16px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); } .free-spin-display.available { background: rgba(0, 255, 136, 0.1); border-color: rgba(0, 255, 136, 0.4); } .free-spin-display.cooldown { background: rgba(139, 92, 246, 0.1); border-color: rgba(139, 92, 246, 0.3); } .free-spin-display:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); } .balance-amount { font-size: 28px; font-weight: bold; color: #8B5CF6; text-shadow: 0 2px 4px rgba(139, 92, 246, 0.2); margin-bottom: 4px; } .balance-label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 1px; } /* Animated EDGE label for roulette page */ .balance-label.animated-edge.roulette { background: linear-gradient(45deg, #8B5CF6, #ffffff, #C4B5FD, #ffffff, #8B5CF6); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; animation: edgeGlow 2s ease-in-out infinite alternate; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3); font-size: 16px !important; letter-spacing: 1.5px; } @keyframes edgeGlow { 0% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2); } 50% { background-position: 100% 50%; text-shadow: 0 0 15px rgba(255, 165, 0, 0.5), 0 0 25px rgba(255, 99, 71, 0.3); } 100% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2); } } /* Main Slots Area - Full width without padding */ .slots-main { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 0; padding-top: 80px; position: relative; z-index: 10; height: calc(100vh - 160px); overflow: hidden; } /* Slots Viewport - Фиксированная мобильная ширина */ .slots-viewport-fullscreen { width: 100%; max-width: 430px; /* Соответствует максимальной ширине приложения */ height: 450px; overflow: visible; position: relative; margin: 0 auto; mask: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.8) 15%, black 25%, black 75%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.4) 100%); -webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0.8) 15%, black 25%, black 75%, rgba(0, 0, 0, 0.8) 85%, rgba(0, 0, 0, 0.6) 90%, rgba(0, 0, 0, 0.4) 100%); } /* Индикатор центра экрана убран - больше не нужен */ .slots-track { display: flex; height: 100%; align-items: center; gap: 0; padding: 0; transition: none; /* Оптимизация для плавной анимации */ will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; } /* Убираем CSS анимацию - используем JavaScript */ .slots-track.idle-moving { animation: none; } .slots-track.spinning { animation: none !important; transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1) !important; } .slot-item-clean { width: 140px; /* Ширина для 6 видимых элементов */ height: 140px; /* Квадратные элементы */ display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; /* Оптимизация для плавной анимации */ will-change: transform; backface-visibility: hidden; } /* Выделение центрального элемента */ .slot-item-clean.center-slot { transform: none; /* removed center zoom */ z-index: 10; } /* Автоматическое выделение видимых элементов - ОТКЛЮЧЕНО */ .telegram-gift.center-visible { transform: none; /* removed subtle zoom near center */ transition: all 0.3s ease; filter: none; } .telegram-gift.animating { transform: none; /* removed zoom while animating */ filter: none; } /* Плавные переходы для всех состояний */ .telegram-gift { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .slot-item-clean:not(:first-child) { margin-left: -60px; /* Уменьшаем отрицательный margin */ } .slots-track.spinning .slot-item-clean { transform: scale(1) !important; transition: none !important; } /* Telegram Gift Container */ .telegram-gift-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); transition: all 0.3s ease; border: none !important; outline: none !important; } .telegram-gift-container .telegram-gift { width: 120px !important; height: 120px !important; border: none !important; outline: none !important; } .telegram-gift-container .telegram-gift * { border: none !important; outline: none !important; } .telegram-gift-container .telegram-gift--large { width: 120px !important; height: 120px !important; } /* Game Controls Container - Fixed at bottom */ .game-controls { position: fixed; bottom: 110px; /* Увеличили отступ от навигации */ left: 0; right: 0; display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 0 15px; z-index: 50; box-sizing: border-box; } /* Chance Selection */ .chance-selection { display: flex; gap: 8px; width: 100%; } .chance-btn { flex: 1; padding: 18px 12px; border-radius: 20px; border: 2px solid #8B5CF6; background: #000; color: #8B5CF6; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(139, 92, 246, 0.2); box-sizing: border-box; min-height: 52px; } .chance-btn.active { background: linear-gradient(135deg, #8B5CF6, #A855F7); border-color: #8B5CF6; color: #fff; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .chance-btn:hover:not(.active) { background: #1a1a1a; border-color: #A855F7; color: #A855F7; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(139, 92, 246, 0.2); transform: translateY(-1px); } /* Spin Button - Premium Purple */ .spin-btn { width: 100%; height: 60px; border-radius: 24px; border: 2px solid #8B5CF6; background: linear-gradient(135deg, #8B5CF6, #A855F7); color: #fff; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 1.5px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); position: relative; overflow: hidden; box-sizing: border-box; } .spin-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s ease; } .spin-btn:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(135deg, #A855F7, #C084FC); box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .spin-btn:hover:not(:disabled)::before { left: 100%; } .spin-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .spin-btn.spinning { background: linear-gradient(135deg, #00ff88, #00cc6a); color: #000; animation: premiumPulse 1s infinite; box-shadow: 0 4px 25px rgba(0, 255, 136, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* Premium Bottom Navigation - Purple Style */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(139, 92, 246, 0.1); } .bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.8), transparent); animation: navGlow 3s ease-in-out infinite; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 8px; border-radius: 16px; min-width: 56px; position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent); border-radius: 16px; opacity: 0; transition: opacity 0.3s ease; } .nav-item svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; } .nav-item span { font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .nav-item:hover { color: rgba(139, 92, 246, 0.9); background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2); } .nav-item:hover::before { opacity: 1; } .nav-item:hover svg { filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4)); transform: scale(1.1); } .nav-item.active { color: #8B5CF6; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(139, 92, 246, 0.4); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item.active::before { opacity: 1; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), transparent); } .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)); transform: scale(1.1); } @keyframes navGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .nav-item:hover { color: #ffd700; background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.08) 100%); border-color: rgba(255, 215, 0, 0.3); transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 24px rgba(255, 215, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 215, 0, 0.2); } .nav-item:hover svg { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); transform: scale(1.1); } .nav-item:hover span { text-shadow: 0 0 8px rgba(139, 92, 246, 0.8); } .nav-item:active { transform: translateY(0) scale(0.98); transition: all 0.1s ease; } .nav-item.active { color: #ffd700; background: rgba(255, 215, 0, 0.15); transform: scale(1.1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); } /* Result Modal - Premium Black */ .result-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(15px); animation: modalFadeIn 0.3s ease-out; } .result-content { background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(26, 26, 26, 0.9)); border: 2px solid #8B5CF6; border-radius: 24px; padding: 40px; text-align: center; backdrop-filter: blur(20px); box-shadow: 0 0 50px rgba(139, 92, 246, 0.4), 0 20px 40px rgba(0, 0, 0, 0.8); animation: modalSlideIn 0.4s ease-out; } .result-content h2 { color: white; font-size: 28px; font-weight: 900; margin: 0 0 20px 0; text-transform: uppercase; } .won-prize { margin: 20px 0; } .won-gift { margin-bottom: 10px; animation: bounce 1s infinite; display: flex; align-items: center; justify-content: center; } .won-gift .telegram-gift { width: 400px !important; height: 400px !important; } .won-name { color: white; font-size: 20px; font-weight: 600; margin-bottom: 5px; } .won-quantity { color: #FFD700; font-size: 24px; font-weight: 700; } /* Prize Actions Container */ .prize-actions { display: flex; gap: 12px; margin-top: 20px; width: 100%; } /* Sell Button - Purple theme */ .sell-btn { flex: 1; background: linear-gradient(45deg, #6B46C1, #8B5CF6); border: 2px solid #6B46C1; color: white; padding: 18px 20px; border-radius: 20px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 8px 25px rgba(107, 70, 193, 0.3); margin-right: 10px; text-align: center; } /* Disabled/Selling state for sell button */ .sell-btn.selling, .sell-btn:disabled { background: linear-gradient(45deg, #666666, #777777); border-color: #555555; cursor: not-allowed; opacity: 0.7; box-shadow: 0 4px 15px rgba(102, 102, 102, 0.2); transform: none !important; } .sell-btn.selling::before, .sell-btn:disabled::before { display: none; } .sell-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s ease; } .sell-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 35px rgba(139, 92, 246, 0.6); background: linear-gradient(45deg, #8B5CF6, #A855F7); } .sell-btn:hover::before { left: 100%; } /* Claim Button - Purple theme */ .claim-btn { flex: 1; background: linear-gradient(45deg, #8B5CF6, #A855F7); border: 2px solid #8B5CF6; border-radius: 16px; padding: 16px 20px; color: #fff; font-weight: 900; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 25px rgba(139, 92, 246, 0.4); position: relative; overflow: hidden; text-align: center; } .claim-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: left 0.5s ease; } .claim-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 35px rgba(139, 92, 246, 0.6); } .claim-btn:hover::before { left: 100%; } /* Animations */ @keyframes idleSlide { 0% { transform: translateX(0); } 100% { /* Виртуальная прокрутка - движение на ширину одного элемента */ transform: translateX(-140px); } } @keyframes premiumPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 35px rgba(0, 255, 136, 0.6), 0 4px 15px rgba(0, 0, 0, 0.3); } 50% { transform: scale(1.02); box-shadow: 0 0 45px rgba(0, 255, 136, 0.8), 0 6px 20px rgba(0, 0, 0, 0.4); } } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { transform: translateY(-50px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Loading and Error States */ .loading-container, .error-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; padding: 40px 20px; text-align: center; } .loading-spinner { width: 50px; height: 50px; border: 4px solid rgba(255, 215, 0, 0.2); border-top: 4px solid #ffd700; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } .error-message { background: rgba(255, 68, 68, 0.1); border: 2px solid rgba(255, 68, 68, 0.3); border-radius: 16px; padding: 30px; max-width: 400px; } .error-message h3 { color: #ff4444; font-size: 20px; font-weight: 700; margin-bottom: 10px; } .error-message p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 20px; line-height: 1.5; } .error-message button { background: linear-gradient(45deg, #ffd700, #ffed4e); color: #000; border: none; border-radius: 12px; padding: 12px 24px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .error-message button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Optimized Gift States */ .telegram-gift__loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, 0.6); } .telegram-gift__loading .loading-spinner { width: 30px; height: 30px; border-width: 3px; margin-bottom: 0; } .telegram-gift__error, .telegram-gift__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(255, 255, 255, 0.6); font-size: 12px; text-align: center; } .telegram-gift__error span, .telegram-gift__placeholder span { font-size: 24px; margin-bottom: 4px; } .telegram-gift__error { color: rgba(255, 68, 68, 0.8); } /* Instant Game Styles */ .instant-game-area { display: flex; align-items: center; justify-content: center; min-height: 300px; padding: 40px 20px; } .instant-message { text-align: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; padding: 40px; max-width: 400px; } .instant-message h2 { color: #ffd700; font-size: 2rem; margin-bottom: 15px; text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .instant-message p { color: #ffffff; font-size: 1.1rem; margin-bottom: 20px; opacity: 0.9; } .spin-price-display { background: linear-gradient(45deg, #ffd700, #ffed4e); color: #000; padding: 10px 20px; border-radius: 10px; font-weight: bold; font-size: 1.1rem; display: inline-block; } /* Enhanced Result Modal for Instant Game */ .won-rarity { font-size: 0.9rem; font-weight: bold; text-transform: uppercase; margin: 5px 0; padding: 4px 12px; border-radius: 15px; display: inline-block; } .won-rarity.rarity-common { background: rgba(255, 255, 255, 0.2); color: #ffffff; } .won-rarity.rarity-rare { background: rgba(0, 255, 136, 0.2); color: #00ff88; } .won-rarity.rarity-epic { background: rgba(138, 43, 226, 0.2); color: #8a2be2; } .won-rarity.rarity-legendary { background: rgba(255, 215, 0, 0.2); color: #ffd700; } .won-value { font-size: 1.2rem; font-weight: bold; color: #ffd700; margin: 10px 0; text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } /* ========== INVENTORY.CSS ========== */ /* Premium Inventory Page - Black & Gold Theme */ .inventory-container { width: 100vw; min-height: 120vh; /* Делаем страницу выше для скролла */ background: #1a1a1a; position: relative; overflow-x: hidden; font-family: 'Inter', sans-serif; padding-bottom: 90px; } /* Background Pattern с параллакс эффектом */ .inventory-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: /* Layer 1: Large scattered dollars - extreme random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Ctext x='89' y='127' font-family='Arial' font-size='48' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='423' y='89' font-family='Arial' font-size='52' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='167' y='378' font-family='Arial' font-size='44' font-weight='bold' fill='rgba(255,255,255,0.09)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='534' y='312' font-family='Arial' font-size='50' font-weight='bold' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='456' font-family='Arial' font-size='46' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='67' y='234' font-family='Arial' font-size='42' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--inventory-bg-pos-1, 0 0), /* Layer 2: Medium scattered dollars - wild random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='380' viewBox='0 0 450 380'%3E%3Ctext x='123' y='67' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='356' y='189' font-family='Arial' font-size='32' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='78' y='298' font-family='Arial' font-size='24' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='134' font-family='Arial' font-size='30' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='412' y='67' font-family='Arial' font-size='26' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='34' y='156' font-family='Arial' font-size='22' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='345' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='389' y='298' font-family='Arial' font-size='25' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--inventory-bg-pos-2, 120px 80px), /* Layer 3: Small scattered dollars - chaotic positioning */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Ctext x='67' y='45' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='123' font-family='Arial' font-size='18' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='45' y='189' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='67' font-family='Arial' font-size='20' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='156' y='234' font-family='Arial' font-size='17' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='198' font-family='Arial' font-size='15' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='23' y='267' font-family='Arial' font-size='13' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='189' y='89' font-family='Arial' font-size='19' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='123' y='156' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='267' y='245' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--inventory-bg-pos-3, 40px 20px); background-size: 600px 500px, /* Large scattered - much bigger tiles */ 450px 380px, /* Medium scattered - bigger */ 320px 280px; /* Small scattered - bigger */ background-repeat: repeat; transition: background-position 0.1s ease-out; } /* Header */ .inventory-header { position: relative; z-index: 10; padding: 40px 20px 30px; text-align: center; } .inventory-title { font-size: 32px; font-weight: 900; color: #ffffff; margin: 0 0 8px 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .inventory-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin: 0 0 30px 0; } .inventory-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .stat-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 12px; min-width: 140px; transition: all 0.3s ease; } .stat-box:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 5px 20px rgba(139, 92, 246, 0.2); } .stat-box .stat-icon { color: #8B5CF6; filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3)); } .stat-info { text-align: left; } .stat-value { font-size: 20px; font-weight: 900; color: #8B5CF6; margin-bottom: 4px; } .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } /* Filter Tabs */ .filter-tabs { position: relative; z-index: 10; display: flex; margin: 0 20px 25px; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 6px; overflow-x: auto; gap: 4px; } .filter-btn { flex: 1; min-width: 80px; padding: 12px 16px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border-radius: 16px; white-space: nowrap; } .filter-btn:hover { color: rgba(139, 92, 246, 0.8); background: rgba(139, 92, 246, 0.1); } .filter-btn.active { background: rgba(255, 255, 255, 0.1); color: #ffffff; transform: scale(1.02); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Inventory Content */ .inventory-content { position: relative; z-index: 10; padding: 0 20px; } .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; margin-bottom: 20px; } /* Inventory Items */ .inventory-item { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 20px; position: relative; transition: all 0.3s ease; overflow: hidden; min-height: 280px; display: flex; flex-direction: column; } .inventory-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Rarity Styles */ .inventory-item.legendary { border-color: #8B5CF6; background: rgba(139, 92, 246, 0.1); } .inventory-item.epic { border-color: #8a2be2; background: rgba(138, 43, 226, 0.1); } .inventory-item.rare { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); } .inventory-item.common { border-color: #ffffff; background: rgba(255, 255, 255, 0.05); } .inventory-item.empty { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.02); opacity: 0.5; border-style: dashed; } /* Item Header */ .item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .item-count-badge { background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #ffffff; font-size: 12px; font-weight: 900; padding: 4px 8px; border-radius: 12px; min-width: 24px; text-align: center; } .item-rarity-badge { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .legendary .item-rarity-badge { background: rgba(139, 92, 246, 0.2); color: #8B5CF6; border: 1px solid #8B5CF6; } .epic .item-rarity-badge { background: rgba(138, 43, 226, 0.2); color: #8a2be2; border: 1px solid #8a2be2; } .rare .item-rarity-badge { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } .common .item-rarity-badge { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); } /* Item Icon */ .item-icon-container { position: relative; display: flex; justify-content: center; align-items: center; height: 80px; margin-bottom: 70px; } .item-icon { color: #8B5CF6; filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.3)); transition: all 0.3s ease; } .inventory-item:hover .item-icon { transform: scale(1.1); filter: drop-shadow(0 6px 12px rgba(139, 92, 246, 0.5)); } /* Item Info */ .item-info { flex: 1; text-align: center; margin-bottom: 5px; } .item-name { font-size: 14px; font-weight: 700; color: #ffffff; margin-bottom: 8px; line-height: 1.2; } .item-description { font-size: 11px; color: rgba(255, 255, 255, 0.6); line-height: 1.3; margin-bottom: 10px; } .item-value { display: flex; justify-content: center; align-items: center; gap: 4px; } .value-label { font-size: 10px; color: rgba(255, 255, 255, 0.5); } .value-amount { font-size: 14px; font-weight: 900; background: linear-gradient(45deg, #8B5CF6, #ffffff, #C4B5FD, #ffffff, #8B5CF6); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: edgeShimmer 2.5s ease-in-out infinite; text-shadow: 0 0 8px rgba(139, 92, 246, 0.3); } @keyframes edgeShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Withdraw Section */ .withdraw-section { display: flex; justify-content: center; margin: 20px 0; } .withdraw-section .withdraw-btn { background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #ffffff; border: none; border-radius: 16px; padding: 16px 32px; font-size: 16px; font-weight: 900; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3); text-transform: uppercase; letter-spacing: 1px; } .withdraw-section .withdraw-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); background: linear-gradient(135deg, #2563EB 0%, #8B5CF6 100%); } .withdraw-section .withdraw-btn:disabled { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5); cursor: not-allowed; transform: none; box-shadow: none; } /* Ensure compact action buttons in cards keep consistent sizing on first paint */ .item-actions .action-btn { padding: 12px 8px; /* override any accidental cascade */ font-size: 11px; border-radius: 16px; box-sizing: border-box; } /* Item Actions */ .item-actions { display: flex; gap: 8px; margin-top: auto; width: 100%; } .action-btn { flex: 1 1 0; min-width: 0; padding: 12px 8px; border: none; border-radius: 16px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.3px; position: relative; overflow: hidden; font-family: 'Inter', sans-serif; text-align: center; white-space: nowrap; } .sell-btn { background: linear-gradient(135deg, #8B5CF6 0%, #667eea 50%, #764ba2 100%); border: none; color: #ffffff; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); position: relative; overflow: hidden; } .sell-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; border-radius: 16px; } .sell-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6); background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #a8edea 100%); } .sell-btn:hover::before { opacity: 1; } .withdraw-btn { background: linear-gradient(135deg, #8B5CF6 0%, #667eea 50%, #764ba2 100%); border: none; color: #ffffff; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); position: relative; overflow: hidden; font-weight: 700; } .withdraw-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity 0.3s ease; border-radius: 16px; } .withdraw-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6); background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #a8edea 100%); } .withdraw-btn:hover::before { opacity: 1; } /* Disabled/Selling state - Subtle darkening */ .action-btn.disabled, .action-btn:disabled, .action-btn.blocked, .sell-btn.selling { opacity: 0.4 !important; cursor: not-allowed !important; transform: none !important; filter: brightness(0.6) !important; } .action-btn.disabled::before, .action-btn:disabled::before, .action-btn.blocked::before, .sell-btn.selling::before { display: none !important; } .action-btn.disabled:hover, .action-btn:disabled:hover, .action-btn.blocked:hover, .sell-btn.selling:hover { transform: none !important; opacity: 0.4 !important; filter: brightness(0.6) !important; } /* Empty Slot */ .inventory-item.empty { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .empty-icon { color: rgba(255, 255, 255, 0.3); margin-bottom: 10px; } .empty-text { font-size: 12px; color: rgba(255, 255, 255, 0.4); font-weight: 600; } /* Premium Bottom Navigation - Casino Style */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(139, 92, 246, 0.1); } .bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.8), transparent); animation: navGlow 3s ease-in-out infinite; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 8px; border-radius: 16px; min-width: 56px; position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent); border-radius: 16px; opacity: 0; transition: opacity 0.3s ease; } .nav-item svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; } .nav-item span { font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .nav-item:hover { color: rgba(139, 92, 246, 0.9); background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2); } .nav-item:hover::before { opacity: 1; } .nav-item:hover svg { filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4)); transform: scale(1.1); } .nav-item.active { color: #8B5CF6; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(139, 92, 246, 0.4); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item.active::before { opacity: 1; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), transparent); } .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)); transform: scale(1.1); } @keyframes navGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Animations */ /* Mobile Responsive */ @media (max-width: 480px) { .inventory-header { padding: 30px 15px 20px; } .inventory-stats { flex-direction: column; gap: 12px; } .stat-box { min-width: auto; width: 100%; max-width: 200px; margin: 0 auto; } .filter-tabs { margin: 0 15px 20px; } .inventory-content { padding: 0 15px; } .inventory-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .inventory-item { padding: 16px; min-height: 240px; } } /* ========== TASKS.CSS ========== */ /* Premium Tasks Page - Black & Gold Theme */ .tasks-container { width: 100vw; min-height: 120vh; /* Делаем страницу выше для скролла */ background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%); position: relative; overflow-x: hidden; font-family: 'Inter', sans-serif; padding-bottom: 90px; } /* Background Pattern с параллакс эффектом */ .tasks-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: /* Layer 1: Large scattered dollars - extreme random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Ctext x='89' y='127' font-family='Arial' font-size='48' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='423' y='89' font-family='Arial' font-size='52' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='167' y='378' font-family='Arial' font-size='44' font-weight='bold' fill='rgba(255,255,255,0.09)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='534' y='312' font-family='Arial' font-size='50' font-weight='bold' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='456' font-family='Arial' font-size='46' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='67' y='234' font-family='Arial' font-size='42' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--tasks-bg-pos-1, 0 0), /* Layer 2: Medium scattered dollars - wild random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='380' viewBox='0 0 450 380'%3E%3Ctext x='123' y='67' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='356' y='189' font-family='Arial' font-size='32' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='78' y='298' font-family='Arial' font-size='24' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='134' font-family='Arial' font-size='30' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='412' y='67' font-family='Arial' font-size='26' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='34' y='156' font-family='Arial' font-size='22' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='345' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='389' y='298' font-family='Arial' font-size='25' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--tasks-bg-pos-2, 120px 80px), /* Layer 3: Small scattered dollars - chaotic positioning */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Ctext x='67' y='45' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='123' font-family='Arial' font-size='18' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='45' y='189' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='67' font-family='Arial' font-size='20' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='156' y='234' font-family='Arial' font-size='17' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='198' font-family='Arial' font-size='15' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='23' y='267' font-family='Arial' font-size='13' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='189' y='89' font-family='Arial' font-size='19' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='123' y='156' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='267' y='245' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--tasks-bg-pos-3, 40px 20px); background-size: 600px 500px, /* Large scattered - much bigger tiles */ 450px 380px, /* Medium scattered - bigger */ 320px 280px; /* Small scattered - bigger */ background-repeat: repeat; transition: background-position 0.1s ease-out; } /* Header */ .tasks-header { position: relative; z-index: 10; padding: 40px 20px 30px; text-align: center; } .tasks-title { font-size: 32px; font-weight: 900; color: #ffffff; margin: 0 0 8px 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .tasks-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin: 0 0 30px 0; } .tasks-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .stat-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 12px; min-width: 140px; transition: all 0.3s ease; } .stat-box:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.4); box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2); } .stat-box .stat-icon { color: #ffd700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); } .stat-info { text-align: left; } .stat-value { font-size: 20px; font-weight: 900; color: #ffd700; margin-bottom: 4px; } .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } /* Category Tabs */ .category-tabs { position: relative; z-index: 10; display: flex; margin: 0 20px 25px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 20px; padding: 6px; gap: 4px; } .category-btn { flex: 1; padding: 14px 12px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .category-icon svg { color: inherit; } .category-btn:hover { color: rgba(255, 215, 0, 0.8); background: rgba(255, 215, 0, 0.1); } .category-btn.active { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #000; transform: scale(1.02); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } /* Tasks Content */ .tasks-content { position: relative; z-index: 10; padding: 0 20px; } .tasks-list { display: flex; flex-direction: column; gap: 15px; } /* Task Items */ .task-item { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; } .task-item:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); border-color: rgba(255, 215, 0, 0.3); } .task-item.completed { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); } .task-item.completed::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.1), transparent); animation: completedGlow 2s infinite; } /* Difficulty Styles */ .task-item.easy { border-left: 4px solid #00ff88; } .task-item.medium { border-left: 4px solid #ffd700; } .task-item.hard { border-left: 4px solid #ff4444; } /* Task Icon */ .task-icon-container { position: relative; flex-shrink: 0; } .task-icon { width: 50px; height: 50px; background: rgba(255, 215, 0, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255, 215, 0, 0.3); color: #ffd700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); } .completed-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: #00ff88; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 900; box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4); } /* Task Content */ .task-content { flex: 1; min-width: 0; } .task-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; } .task-title { font-size: 16px; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.2; } .difficulty-badge { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .difficulty-badge.easy { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } .difficulty-badge.medium { background: rgba(255, 215, 0, 0.2); color: #ffd700; border: 1px solid #ffd700; } .difficulty-badge.hard { background: rgba(255, 68, 68, 0.2); color: #ff4444; border: 1px solid #ff4444; } .task-description { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0 0 12px 0; line-height: 1.3; } /* Progress Bar */ .task-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #ffd700, #ffed4e); border-radius: 3px; transition: width 0.3s ease; } .task-item.completed .progress-fill { background: linear-gradient(90deg, #00ff88, #00cc6a); } .progress-text { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.8); min-width: 40px; text-align: right; } /* Task Reward */ .task-reward { display: flex; align-items: center; gap: 6px; } .reward-icon { color: #ffd700; } .reward-amount { font-size: 14px; font-weight: 900; color: #ffd700; } /* Task Action */ .task-action { flex-shrink: 0; } .task-btn { padding: 12px 20px; border: none; border-radius: 16px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; min-width: 80px; display: flex; align-items: center; justify-content: center; gap: 6px; } .task-btn.ready { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #000; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } .task-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6); } .task-btn.progress { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); cursor: default; } .task-btn.completed { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; cursor: default; } .task-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Premium Bottom Navigation - Casino Style */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(255, 215, 0, 0.1); } .bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.8), transparent); animation: navGlow 3s ease-in-out infinite; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 8px; border-radius: 16px; min-width: 56px; position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent); border-radius: 16px; opacity: 0; transition: opacity 0.3s ease; } .nav-item svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; } .nav-item span { font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .nav-item:hover { color: rgba(255, 215, 0, 0.9); background: rgba(255, 215, 0, 0.08); border-color: rgba(255, 215, 0, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2); } .nav-item:hover::before { opacity: 1; } .nav-item:hover svg { filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); transform: scale(1.1); } .nav-item.active { color: #ffd700; background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)); border: 1px solid rgba(255, 215, 0, 0.4); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item.active::before { opacity: 1; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), transparent); } .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); transform: scale(1.1); } @keyframes navGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Animations */ @keyframes completedGlow { 0%, 100% { opacity: 0.3; transform: translateX(-100%); } 50% { opacity: 0.8; transform: translateX(100%); } } /* Mobile Responsive */ @media (max-width: 480px) { .tasks-header { padding: 30px 15px 20px; } .tasks-stats { flex-direction: column; gap: 12px; } .stat-box { min-width: auto; width: 100%; max-width: 200px; margin: 0 auto; } .category-tabs { margin: 0 15px 20px; } .tasks-content { padding: 0 15px; } .task-item { padding: 16px; flex-direction: column; align-items: flex-start; gap: 12px; } .task-header { width: 100%; } .task-action { width: 100%; } .task-btn { width: 100%; } } /* ========== RANK.CSS ========== */ /* Premium Rank Page - Black & Gold Theme */ .rank-container { width: 100vw; min-height: 120vh; /* Делаем страницу выше для скролла */ background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%); position: relative; overflow-x: hidden; font-family: 'Inter', sans-serif; padding-bottom: 90px; } /* Background Pattern с параллакс эффектом */ .rank-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: /* Layer 1: Large scattered dollars - extreme random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Ctext x='89' y='127' font-family='Arial' font-size='48' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='423' y='89' font-family='Arial' font-size='52' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='167' y='378' font-family='Arial' font-size='44' font-weight='bold' fill='rgba(255,255,255,0.09)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='534' y='312' font-family='Arial' font-size='50' font-weight='bold' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='456' font-family='Arial' font-size='46' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='67' y='234' font-family='Arial' font-size='42' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--rank-bg-pos-1, 0 0), /* Layer 2: Medium scattered dollars - wild random positions */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='380' viewBox='0 0 450 380'%3E%3Ctext x='123' y='67' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='356' y='189' font-family='Arial' font-size='32' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='78' y='298' font-family='Arial' font-size='24' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='134' font-family='Arial' font-size='30' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='412' y='67' font-family='Arial' font-size='26' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='34' y='156' font-family='Arial' font-size='22' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='345' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='389' y='298' font-family='Arial' font-size='25' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--rank-bg-pos-2, 120px 80px), /* Layer 3: Small scattered dollars - chaotic positioning */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Ctext x='67' y='45' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='123' font-family='Arial' font-size='18' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='45' y='189' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='67' font-family='Arial' font-size='20' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='156' y='234' font-family='Arial' font-size='17' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='198' font-family='Arial' font-size='15' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='23' y='267' font-family='Arial' font-size='13' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='189' y='89' font-family='Arial' font-size='19' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='123' y='156' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='267' y='245' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--rank-bg-pos-3, 40px 20px); background-size: 600px 500px, /* Large scattered - much bigger tiles */ 450px 380px, /* Medium scattered - bigger */ 320px 280px; /* Small scattered - bigger */ background-repeat: repeat; transition: background-position 0.1s ease-out; } /* Header */ .rank-header { position: relative; z-index: 10; padding: 40px 20px 30px; text-align: center; } .rank-title { font-size: 32px; font-weight: 900; color: #ffffff; margin: 0 0 8px 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .rank-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.7); margin: 0 0 30px 0; } .rank-stats { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; } .stat-box { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 12px; min-width: 140px; transition: all 0.3s ease; } .stat-box:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.4); box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2); } .stat-box .stat-icon { color: #ffd700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3)); } .stat-info { text-align: left; } .stat-value { font-size: 20px; font-weight: 900; color: #ffd700; margin-bottom: 4px; } .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); font-weight: 600; } /* User Rank Section */ .user-rank-section { position: relative; z-index: 10; padding: 0 20px 30px; } .user-rank-card { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)); backdrop-filter: blur(15px); border: 2px solid rgba(255, 215, 0, 0.4); border-radius: 24px; padding: 25px; display: flex; align-items: center; gap: 20px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(255, 215, 0, 0.2); } .user-rank-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent); animation: userGlow 3s infinite; } .rank-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; } .rank-number { font-size: 24px; font-weight: 900; color: #ffd700; text-shadow: 0 2px 4px rgba(255, 215, 0, 0.5); } .rank-change { font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 8px; } .rank-change.up { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } .rank-change.down { background: rgba(255, 68, 68, 0.2); color: #ff4444; border: 1px solid #ff4444; } .rank-change.same { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3); } .user-avatar { position: relative; } .avatar-circle { width: 60px; height: 60px; background: linear-gradient(135deg, #ffd700, #ffed4e); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900; color: #000; border: 3px solid rgba(255, 215, 0, 0.5); box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4); } .user-info { flex: 1; } .user-name { font-size: 20px; font-weight: 900; color: #ffffff; margin-bottom: 4px; } .user-username { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; } .user-score { font-size: 18px; font-weight: 700; color: #ffd700; } /* Leaderboard Tabs */ .leaderboard-tabs { position: relative; z-index: 10; display: flex; margin: 0 20px 25px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 20px; padding: 6px; gap: 4px; } .tab-btn { flex: 1; padding: 14px 12px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .tab-icon svg { color: inherit; } .tab-btn:hover { color: rgba(255, 215, 0, 0.8); background: rgba(255, 215, 0, 0.1); } .tab-btn.active { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #000; transform: scale(1.02); box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); } /* Leaderboard Content */ .leaderboard-content { position: relative; z-index: 10; padding: 0 20px; } .leaderboard-list { display: flex; flex-direction: column; gap: 12px; } /* Player Cards */ .player-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; } .player-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* Top 3 Special Styles */ .player-card.top-1 { border-color: #ffd700; background: rgba(255, 215, 0, 0.1); box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } .player-card.top-2 { border-color: #c0c0c0; background: rgba(192, 192, 192, 0.1); } .player-card.top-3 { border-color: #cd7f32; background: rgba(205, 127, 50, 0.1); } .podium-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent); animation: podiumGlow 2s infinite; } /* Badge Styles */ .player-card.legendary { border-left: 4px solid #ffd700; } .player-card.epic { border-left: 4px solid #8a2be2; } .player-card.rare { border-left: 4px solid #00ff88; } .player-card.common { border-left: 4px solid #ffffff; } /* Player Rank */ .player-rank { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 50px; } .player-rank .rank-number { font-size: 18px; font-weight: 900; color: #ffd700; } .crown-icon { color: #ffd700; filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.5)); } /* Player Avatar */ .player-avatar { position: relative; flex-shrink: 0; } .player-avatar .avatar-circle { width: 50px; height: 50px; background: rgba(255, 215, 0, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 900; color: #ffd700; border: 2px solid rgba(255, 215, 0, 0.3); } .country-flag { position: absolute; bottom: -2px; right: -2px; font-size: 14px; background: rgba(0, 0, 0, 0.8); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } /* Player Info */ .player-info { flex: 1; min-width: 0; } .player-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .player-name { font-size: 16px; font-weight: 700; color: #ffffff; } .badge-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .badge-icon.legendary { color: #ffd700; } .badge-icon.epic { color: #8a2be2; } .badge-icon.rare { color: #00ff88; } .badge-icon.common { color: #ffffff; } .player-username { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; } .player-details { display: flex; align-items: center; gap: 12px; } .player-score { font-size: 16px; font-weight: 900; color: #ffd700; } .player-level { font-size: 12px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.1); padding: 2px 6px; border-radius: 8px; } /* Rank Change Indicator */ .rank-change-indicator { flex-shrink: 0; } .change-badge { font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; min-width: 24px; text-align: center; } .change-badge.up { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } .change-badge.down { background: rgba(255, 68, 68, 0.2); color: #ff4444; border: 1px solid #ff4444; } .change-badge.new { background: rgba(255, 215, 0, 0.2); color: #ffd700; border: 1px solid #ffd700; } .change-badge.same { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); } /* Premium Bottom Navigation - Casino Style */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(255, 215, 0, 0.1); } .bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4), rgba(255, 215, 0, 0.8), transparent); animation: navGlow 3s ease-in-out infinite; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 8px; border-radius: 16px; min-width: 56px; position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent); border-radius: 16px; opacity: 0; transition: opacity 0.3s ease; } .nav-item svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; } .nav-item span { font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .nav-item:hover { color: rgba(255, 215, 0, 0.9); background: rgba(255, 215, 0, 0.08); border-color: rgba(255, 215, 0, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2); } .nav-item:hover::before { opacity: 1; } .nav-item:hover svg { filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4)); transform: scale(1.1); } .nav-item.active { color: #ffd700; background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)); border: 1px solid rgba(255, 215, 0, 0.4); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item.active::before { opacity: 1; background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), transparent); } .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); transform: scale(1.1); } @keyframes navGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Animations */ @keyframes userGlow { 0%, 100% { opacity: 0.3; transform: translateX(-100%); } 50% { opacity: 0.8; transform: translateX(100%); } } @keyframes podiumGlow { 0%, 100% { opacity: 0.2; transform: translateX(-100%); } 50% { opacity: 0.6; transform: translateX(100%); } } /* Mobile Responsive */ @media (max-width: 480px) { .rank-header { padding: 30px 15px 20px; } .rank-stats { flex-direction: column; gap: 12px; } .stat-box { min-width: auto; width: 100%; max-width: 200px; margin: 0 auto; } .user-rank-section { padding: 0 15px 20px; } .user-rank-card { padding: 20px; flex-direction: column; text-align: center; gap: 15px; } .leaderboard-tabs { margin: 0 15px 20px; } .leaderboard-content { padding: 0 15px; } .player-card { padding: 16px; } .player-details { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ========== PROFILE.CSS ========== */ /* Premium Profile Page - Mobile First Design */ .profile-container { width: 100%; min-height: 100vh; background: #000000; position: relative; overflow-x: hidden; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 16px 16px 90px 16px; color: white; box-sizing: border-box; } /* Background Pattern с параллакс эффектом */ .profile-container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; background: /* Layer 1: Large scattered dollars */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='500' viewBox='0 0 600 500'%3E%3Ctext x='89' y='127' font-family='Arial' font-size='48' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='423' y='89' font-family='Arial' font-size='52' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='167' y='378' font-family='Arial' font-size='44' font-weight='bold' fill='rgba(255,255,255,0.09)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='534' y='312' font-family='Arial' font-size='50' font-weight='bold' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='456' font-family='Arial' font-size='46' font-weight='bold' fill='rgba(255,255,255,0.08)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='67' y='234' font-family='Arial' font-size='42' font-weight='bold' fill='rgba(255,255,255,0.07)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--profile-bg-pos-1, 0 0), /* Layer 2: Medium scattered dollars */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='380' viewBox='0 0 450 380'%3E%3Ctext x='123' y='67' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='356' y='189' font-family='Arial' font-size='32' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='78' y='298' font-family='Arial' font-size='24' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='134' font-family='Arial' font-size='30' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='412' y='67' font-family='Arial' font-size='26' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='34' y='156' font-family='Arial' font-size='22' font-weight='600' fill='rgba(255,255,255,0.05)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='345' font-family='Arial' font-size='28' font-weight='600' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='389' y='298' font-family='Arial' font-size='25' font-weight='600' fill='rgba(255,255,255,0.06)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--profile-bg-pos-2, 120px 80px), /* Layer 3: Small scattered dollars */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Ctext x='67' y='45' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='234' y='123' font-family='Arial' font-size='18' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='45' y='189' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='289' y='67' font-family='Arial' font-size='20' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='156' y='234' font-family='Arial' font-size='17' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='298' y='198' font-family='Arial' font-size='15' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='23' y='267' font-family='Arial' font-size='13' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='189' y='89' font-family='Arial' font-size='19' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='123' y='156' font-family='Arial' font-size='16' fill='rgba(255,255,255,0.03)' text-anchor='middle'%3E$%3C/text%3E%3Ctext x='267' y='245' font-family='Arial' font-size='14' fill='rgba(255,255,255,0.04)' text-anchor='middle'%3E$%3C/text%3E%3C/svg%3E") var(--profile-bg-pos-3, 40px 20px); background-size: 600px 500px, 450px 380px, 320px 280px; background-repeat: repeat; /* Remove transition on initial load to avoid layout jank */ /* transition: background-position 0.1s ease-out; */ will-change: background-position; } .profile-container.loading { display: flex; align-items: center; justify-content: center; } .loading-spinner { text-align: center; } .spinner { width: 40px; height: 40px; border: 3px solid rgba(139, 92, 246, 0.3); border-top: 3px solid #8B5CF6; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Profile Header - Mobile First */ .profile-header { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 20px; padding: 20px 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(15px); border-radius: 16px; border: none; transition: all 0.3s ease; } .profile-header:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1); } .profile-avatar { position: relative; margin-bottom: 15px; } .profile-avatar img, .avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #8B5CF6; } .avatar-placeholder { background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #8B5CF6; } .level-badge { position: absolute; bottom: -5px; right: -5px; background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #ffffff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; z-index: 2; } .premium-badge { position: absolute; top: -5px; right: -5px; background: linear-gradient(135deg, #8B5CF6, #ffffff, #C4B5FD); color: #ffffff; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 3; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); } .telegram-badge { display: inline-flex; align-items: center; margin-left: 8px; color: #0088cc; vertical-align: middle; } .profile-name { font-size: 24px; font-weight: 600; margin: 0 0 5px 0; color: #8B5CF6; } .profile-username { font-size: 16px; color: #aaa; margin: 0 0 5px 0; } .profile-join-date { font-size: 14px; color: #888; margin: 0; } /* Balance Display - Positioned in top right corner */ .profile-header .balance-display.profile-balance { position: absolute; top: 20px; right: 20px; padding: 12px 16px; background: rgba(139, 92, 246, 0.1); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.3); text-align: right; cursor: pointer; transition: all 0.3s ease; } .profile-header .balance-display.profile-balance:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); } .balance-amount { font-size: 28px; font-weight: bold; color: #8B5CF6; margin-bottom: 4px; text-shadow: 0 2px 4px rgba(139, 92, 246, 0.2); } .balance-label { font-size: 11px; color: #aaa; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; } .balance-label.animated-edge { background: linear-gradient(45deg, #8B5CF6, #ffffff, #C4B5FD, #ffffff, #8B5CF6); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; animation: edgeGlow 2s ease-in-out infinite alternate; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3); font-size: 16px; text-align: right; letter-spacing: 1.5px; } @keyframes edgeGlow { 0% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2); } 50% { background-position: 100% 50%; text-shadow: 0 0 15px rgba(255, 165, 0, 0.5), 0 0 25px rgba(255, 99, 71, 0.3); } 100% { background-position: 0% 50%; text-shadow: 0 0 10px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.2); } } .deposit-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .deposit-btn { background: #8B5CF6; border: none; border-radius: 8px; padding: 10px 16px; color: #ffffff; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: opacity 0.2s ease; } .deposit-btn:hover { opacity: 0.9; } .stars-btn { background: linear-gradient(135deg, #8B5CF6 0%, #FFA000 100%); color: #1a1a2e; border: none; border-radius: 8px; padding: 10px 16px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; } .stars-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); } /* Quick Stats - Mobile First */ .quick-stats { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .stat-item { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(15px); border-radius: 12px; padding: 16px 12px; text-align: center; border: none; transition: all 0.3s ease; min-height: 80px; display: flex; flex-direction: column; justify-content: center; } /* Respect reduced motion: disable transitions to avoid jank */ @media (prefers-reduced-motion: reduce) { .profile-container::before { transition: none !important; } .profile-header, .tab-content, .stat-item, .tab-btn, .tab-btn.active { transition: none !important; transform: none !important; } } .stat-item:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255, 255, 255, 0.1); } .stat-icon { color: #8B5CF6; margin-bottom: 8px; } .stat-value { font-size: 18px; font-weight: bold; color: #8B5CF6; margin-bottom: 4px; line-height: 1.2; } .stat-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } /* Tab Navigation - Mobile First */ .tab-navigation { position: relative; z-index: 10; display: flex; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(15px); border-radius: 16px; padding: 4px; margin-bottom: 20px; border: none; gap: 2px; } .tab-btn { flex: 1; padding: 12px 8px; background: transparent; border: none; color: rgba(255, 255, 255, 0.6); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 60px; justify-content: center; } .tab-btn:hover { color: rgba(139, 92, 246, 0.8); background: rgba(139, 92, 246, 0.1); } .tab-btn.active { background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #ffffff; transform: scale(1.02); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); border: none; } /* Tab Content - Mobile First */ .tab-content { position: relative; z-index: 10; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(15px); border-radius: 16px; padding: 20px 16px; border: none; transition: all 0.3s ease; } .tab-content:hover { transform: translateY(-1px); } .tab-content h3 { margin: 0 0 20px 0; color: #8B5CF6; font-size: 18px; font-weight: 600; } /* Stats Grid - Mobile First */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat-card { background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 16px 12px; text-align: center; border: none; min-height: 80px; display: flex; flex-direction: column; justify-content: center; } .stat-card-icon { font-size: 24px; margin-bottom: 8px; } .stat-card-value { font-size: 18px; font-weight: bold; margin-bottom: 5px; } .stat-card-label { font-size: 11px; color: #aaa; text-transform: uppercase; } .stat-card.legendary .stat-card-value { color: #8B5CF6; } .stat-card.epic .stat-card-value { color: #8a2be2; } .stat-card.rare .stat-card-value { color: #00ff88; } .stat-card.common .stat-card-value { color: #ffffff; } /* Achievements */ .achievements-list { display: flex; flex-direction: column; gap: 15px; } .achievement-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .achievement-item.completed { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); } .achievement-icon { font-size: 24px; width: 40px; text-align: center; } .achievement-info { flex: 1; } .achievement-info h4 { margin: 0 0 5px 0; font-size: 16px; font-weight: 600; } .achievement-info p { margin: 0; font-size: 14px; color: #aaa; } .achievement-status { font-size: 14px; font-weight: 600; color: #8B5CF6; } .achievement-item.completed .achievement-status { color: #00ff88; } /* Activity */ .activity-list { display: flex; flex-direction: column; gap: 15px; } .activity-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .activity-icon { font-size: 20px; width: 35px; text-align: center; } .activity-info { flex: 1; } .activity-info h4 { margin: 0 0 5px 0; font-size: 14px; font-weight: 600; } .activity-info p { margin: 0 0 5px 0; font-size: 13px; color: #ccc; } .activity-time { font-size: 11px; color: #888; } /* Amount pill */ .activity-amount { margin-left: auto; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); } .activity-amount.positive { color: #10B981; /* emerald */ background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); } .activity-amount.negative { color: #EF4444; /* red */ background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); } /* Activity type accents */ .activity-item.spin { border-left: 3px solid #8B5CF6; background: rgba(139, 92, 246, 0.08); } .activity-item.spin .activity-icon { color: #8B5CF6; } .activity-item.sell { border-left: 3px solid #00ff88; background: rgba(0, 255, 136, 0.06); } .activity-item.sell .activity-icon { color: #00ff88; } .activity-item.deposit { border-left: 3px solid #2563EB; background: rgba(37, 99, 235, 0.08); } .activity-item.deposit .activity-icon { color: #60a5fa; } .activity-item.withdraw_request { border-left: 3px solid #f59e0b; background: rgba(245, 158, 11, 0.08); } .activity-item.withdraw_request .activity-icon { color: #fbbf24; } /* Load more button */ .load-more-btn { background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #ffffff; border: none; border-radius: 12px; padding: 10px 16px; font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .load-more-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35); } .load-more-btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Premium Bottom Navigation - Casino Style */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(139, 92, 246, 0.1); } .bottom-nav::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), rgba(139, 92, 246, 0.4), rgba(139, 92, 246, 0.8), transparent); animation: navGlow 3s ease-in-out infinite; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 12px 8px; border-radius: 16px; min-width: 56px; position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); } .nav-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent); border-radius: 16px; opacity: 0; transition: opacity 0.3s ease; } .nav-item svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; } .nav-item span { font-size: 10px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .nav-item:hover { color: rgba(139, 92, 246, 0.9); background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.2); transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.2); } .nav-item:hover::before { opacity: 1; } .nav-item:hover svg { filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4)); transform: scale(1.1); } .nav-item.active { color: #8B5CF6; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); border: 1px solid rgba(139, 92, 246, 0.4); transform: translateY(-4px) scale(1.08); box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .nav-item.active::before { opacity: 1; background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), transparent); } .nav-item.active svg { filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.6)); transform: scale(1.1); } @keyframes navGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Responsive Design - Mobile First Approach */ /* Small phones (up to 360px) */ @media (max-width: 360px) { .profile-container { padding: 12px 12px 90px 12px; } .profile-header { padding: 16px 12px; margin-bottom: 16px; } .quick-stats { gap: 8px; } .stat-item { padding: 12px 8px; min-height: 70px; } .stat-value { font-size: 16px; } .stat-label { font-size: 9px; } .tab-btn { padding: 10px 6px; font-size: 10px; min-height: 55px; } .tab-content { padding: 16px 12px; } .stats-grid { grid-template-columns: 1fr; gap: 10px; } } /* Standard mobile (361px - 480px) */ @media (min-width: 361px) and (max-width: 480px) { .profile-name { font-size: 22px; } .balance-amount { font-size: 32px; } } /* Large mobile / Small tablet (481px - 768px) */ @media (min-width: 481px) and (max-width: 768px) { .profile-container { padding: 20px 20px 90px 20px; } .profile-header { padding: 24px 20px; margin-bottom: 24px; } .quick-stats { gap: 16px; margin-bottom: 24px; } .stat-item { padding: 20px 16px; min-height: 90px; } .stat-value { font-size: 20px; } .stat-label { font-size: 11px; } .tab-navigation { margin-bottom: 24px; } .tab-btn { padding: 14px 12px; font-size: 12px; min-height: 65px; } .tab-content { padding: 24px 20px; } } /* Tablet (769px - 1024px) */ @media (min-width: 769px) and (max-width: 1024px) { .profile-container { max-width: 600px; margin: 0 auto; padding: 24px 24px 90px 24px; } .profile-header { padding: 30px 24px; margin-bottom: 30px; } .quick-stats { gap: 20px; margin-bottom: 30px; } .stat-item { padding: 24px 20px; min-height: 100px; } .tab-content { padding: 30px 24px; } } /* Desktop (1025px+) */ @media (min-width: 1025px) { .profile-container { max-width: 800px; margin: 0 auto; padding: 32px 32px 90px 32px; } .profile-header { padding: 40px 32px; margin-bottom: 40px; } .quick-stats { gap: 24px; margin-bottom: 40px; } .stat-item { padding: 28px 24px; min-height: 120px; } .stat-value { font-size: 24px; } .stat-label { font-size: 12px; } .tab-btn { padding: 16px 16px; font-size: 14px; min-height: 70px; } .tab-content { padding: 40px 32px; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } /* Force mobile layout for Telegram WebApp */ .telegram-webapp .profile-container { max-width: 100%; margin: 0; } /* Deposit buttons responsive */ @media (max-width: 480px) { .deposit-buttons { flex-direction: column; width: 100%; gap: 8px; } .deposit-btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 13px; } } @media (min-width: 481px) { .deposit-buttons { flex-direction: row; justify-content: center; gap: 12px; } } /* User Status Badges */ .telegram-badge.real-user { background: linear-gradient(45deg, #0088cc, #00a0e6); color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(0, 136, 204, 0.3); } .demo-badge { background: linear-gradient(45deg, #8B5CF6, #ffffff, #C4B5FD); color: #ffffff; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); } .no-data-badge { background: linear-gradient(45deg, #ff6b6b, #ff8e8e); color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3); } /* Profile join date styling for different states */ .profile-join-date { font-size: 14px; opacity: 0.8; margin-top: 4px; } /* Telegram environment indicator */ .profile-container.telegram-webapp { /* Специальные стили для Telegram WebApp */ padding-top: 20px; } .profile-container.telegram-webapp::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #0088cc, #00a0e6); z-index: 1000; pointer-events: none; } /* ========== TONCONNECT MODAL OVERRIDES (migrated from src/styles/tonconnect-override.css) ========== */ /* Ensure TonConnect modals appear above payment modals */ [data-tc-wallets-modal-container], [data-tc-modal-container] { z-index: 10000 !important; } /* TonConnect backdrop styling */ [data-tc-wallets-modal-container] [data-tc-wallets-modal-backdrop] { background: rgba(0, 0, 0, 0.6) !important; z-index: 9999 !important; } /* Main modal positioning - slide up from bottom */ [data-tc-wallets-modal-container] [data-tc-wallets-modal] { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; transform: translateY(0) !important; animation: slideUpFromBottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important; border-radius: 24px 24px 0 0 !important; max-height: 85vh !important; background: rgba(30, 30, 60, 0.95) !important; backdrop-filter: blur(20px) saturate(180%) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-bottom: none !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } /* Slide up animation */ @keyframes slideUpFromBottom { from { transform: translateY(100%) !important; opacity: 0; } to { transform: translateY(0) !important; opacity: 1; } } /* Dark theme styling for TonConnect */ [data-tc-wallets-modal] { background: rgba(30, 30, 60, 0.95) !important; color: white !important; } [data-tc-wallets-modal] [data-tc-wallets-modal-title] { color: white !important; font-weight: 700 !important; } [data-tc-wallets-modal] [data-tc-wallets-modal-description] { color: rgba(255, 255, 255, 0.7) !important; } /* Wallet buttons styling */ [data-tc-wallets-modal] [data-tc-wallet-button] { background: linear-gradient(135deg, rgba(20, 20, 30, 0.9), rgba(40, 30, 60, 0.8)) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 16px !important; backdrop-filter: blur(15px) saturate(150%) !important; transition: all 0.2s ease !important; } [data-tc-wallets-modal] [data-tc-wallet-button]:hover { border-color: rgba(139, 92, 246, 0.6) !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15) !important; } [data-tc-wallets-modal] [data-tc-wallet-button] [data-tc-wallet-button-text] { color: white !important; } /* Primary button (Telegram Wallet) styling */ [data-tc-wallets-modal] [data-tc-primary-button] { background: linear-gradient(135deg, #0088cc, #0098ea) !important; border: none !important; border-radius: 16px !important; padding: 16px 24px !important; color: white !important; font-weight: 600 !important; transition: all 0.2s ease !important; } [data-tc-wallets-modal] [data-tc-primary-button]:hover { background: linear-gradient(135deg, #0098ea, #00aaff) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(0, 152, 234, 0.3) !important; } /* Close button styling */ [data-tc-wallets-modal] [data-tc-wallets-modal-close-button] { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: white !important; transition: all 0.2s ease !important; } [data-tc-wallets-modal] [data-tc-wallets-modal-close-button]:hover { background: rgba(255, 255, 255, 0.2) !important; transform: scale(1.05) !important; } /* QR Code modal styling */ [data-tc-qr-modal] { background: rgba(30, 30, 60, 0.95) !important; backdrop-filter: blur(20px) saturate(180%) !important; border-radius: 24px 24px 0 0 !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Mobile responsive adjustments */ @media (max-width: 640px) { [data-tc-wallets-modal-container] [data-tc-wallets-modal] { max-height: 90vh !important; border-radius: 20px 20px 0 0 !important; } } /* Override any conflicting z-index values */ .tc-modal, .tc-backdrop, [class*="tc-modal"], [class*="tc-backdrop"] { z-index: 10000 !important; } /* ========== INTRO ANIMATION STYLES (migrated from src/components/intro/IntroAnimation.css) ========== */ /* Intro Animation Styles */ .intro-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #090909; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease-out; z-index: 9999; /* Ensure intro overlay is above everything else */ } .intro-container.loading, .intro-container.error { background: #090909; } .animation-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Loading spinner for when animation is loading */ .loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(139, 92, 246, 0.3); border-top: 3px solid #8B5CF6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Error message styling */ .error-message { color: #8B5CF6; font-size: 18px; font-weight: 600; text-align: center; } /* Responsive design */ @media (max-width: 430px) { .animation-wrapper { padding: 20px; } } /* Fade out animation */ .intro-container.fade-out { opacity: 0; } /* Ensure animation plays smoothly */ .intro-container * { backface-visibility: hidden; transform-style: preserve-3d; } /* ========== FINAL OVERRIDES (ensure last-wins) ========== */ /* Roulette gift container sizing and no-crop */ .edge-slots-container .telegram-gift-container { width: var(--gift-size, 110px); height: var(--gift-size, 110px); display: flex; align-items: center; justify-content: center; } .edge-slots-container .telegram-gift__animation, .edge-slots-container .telegram-gift__animation canvas, .edge-slots-container .telegram-gift__animation svg { width: 100% !important; height: 100% !important; } /* New Bottom Navigation style (force latest) */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex !important; justify-content: space-around; align-items: center; padding: 12px 8px 16px 8px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.95), rgba(10, 10, 10, 0.98)) !important; backdrop-filter: blur(25px); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.6), transparent) 1; z-index: 9999 !important; height: 85px; box-sizing: border-box; visibility: visible !important; opacity: 1 !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.8), 0 -2px 16px rgba(139, 92, 246, 0.1); } .bottom-nav { border-top: none !important; border-image: none !important; } .bottom-nav::before, .bottom-nav::after, .bottom-nav .nav-item::before, .bottom-nav .nav-item::after { display: none !important; content: none !important; } /* Bottom nav items (final overrides) */ .bottom-nav .nav-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: rgba(255, 255, 255, 0.7); padding: 12px 8px; border-radius: 16px; background: transparent; transition: all 0.2s ease; } .bottom-nav .nav-item .nav-icon { width: 22px; height: 22px; } .bottom-nav .nav-item .nav-icon svg { color: rgba(255, 255, 255, 0.6); } .bottom-nav .nav-item .nav-label { font-size: 11px; font-weight: 700; } .bottom-nav .nav-item.active { background: linear-gradient(135deg, #8B5CF6 0%, #2563EB 100%); color: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -2px 12px rgba(139, 92, 246, 0.35); } .bottom-nav .nav-item.active .nav-icon svg { color: #fff; } .bottom-nav .nav-item.disabled { opacity: 0.45; pointer-events: none; } /* Legendary gift: stop side-to-side wobble. Only glow, no translate. */ .edge-slots-container .telegram-gift--legendary { animation: none !important; /* no glow for legendary */ filter: none !important; /* remove any drop-shadow glow */ } /* Note: do NOT override inner SVG transforms for legendary — this breaks Lottie layout. We keep only the soft glow above. */