@import url(https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap);*,: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: }::backdrop{--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: }

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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::placeholder,textarea::placeholder{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{height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#2563eb;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}select:where([multiple]),select:where([size]:not([size="1"])){background-image:none;background-position:0 0;background-repeat:repeat;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:inherit;print-color-adjust:inherit}input:where([type=checkbox]),input:where([type=radio]){--tw-shadow:0 0 #0000;-webkit-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#2563eb;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;width:1rem}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input:where([type=checkbox]):checked,input:where([type=radio]):checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}@media (forced-colors:active){input:where([type=checkbox]):checked{-webkit-appearance:auto;appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}@media (forced-colors:active){input:where([type=radio]):checked{-webkit-appearance:auto;appearance:auto}}input:where([type=checkbox]):checked:focus,input:where([type=checkbox]):checked:hover,input:where([type=radio]):checked:focus,input:where([type=radio]):checked:hover{background-color:currentColor;border-color:#0000}input:where([type=checkbox]):indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media (forced-colors:active){input:where([type=checkbox]):indeterminate{-webkit-appearance:auto;appearance:auto}}input:where([type=checkbox]):indeterminate:focus,input:where([type=checkbox]):indeterminate:hover{background-color:currentColor;border-color:#0000}input:where([type=file]){background:#0000 none repeat 0 0/auto auto padding-box border-box scroll;background:initial;border-color:inherit;border-radius:0;border-width:0;font-size:inherit;line-height:inherit;padding:0}input:where([type=file]):focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.block{display:block}.inline{display:inline}.flex{display:flex}.grid{display:grid}.hidden{display:none}.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))}.resize{resize:both}.border{border-width:1px}.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)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-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-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-moz-osx-font-smoothing:grayscale;background-color:var(--bg-main);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:background-color .3s ease,color .3s ease}h1,h2,h3,h4,h5,h6{font-family:Outfit,sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.2}a{color:var(--primary);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-hover)}button{cursor:pointer;font-family:Outfit,sans-serif}input,select,textarea{font-family:Inter,sans-serif}img,video{display:block;max-width:100%}body{padding-top:70px}body.chat-page-active,body.game-page-active,body.videocall-page-active{padding-top:0}::selection{background:rgba(var(--primary-rgb),.25);color:var(--text-primary)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-color:#2196f3;--primary-dark:#0d8aee;--secondary-color:#ff7b89;--secondary-dark:#ff5d6e;--success-color:#4caf50;--danger-color:#f44336;--text-dark:#333;--text-medium:#666;--text-light:#9e9e9e;--transition-quick:all 0.2s ease;--transition-default:all 0.3s ease;--transition-slow:all 0.5s ease}html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6;overflow-x:hidden}button,input,li,p,textarea{font-size:clamp(.875rem,2vw,1rem);letter-spacing:.015rem}h1{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.2;margin-bottom:1rem}h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.3}h3{font-size:clamp(1.25rem,3vw,1.8rem);line-height:1.4}a:focus,button:focus,input:focus,textarea:focus{outline:2px solid #2196f3;outline:2px solid var(--primary-color);outline-offset:2px;transition:outline-offset .2s ease}.dropdown-item,.nav-item,button,input[type=submit]{min-height:44px;padding:clamp(8px,2vw,12px) clamp(12px,3vw,24px)}.birthday-card,.dropdown-item,.feature-card,.nav-item,.profile-menu,a,button,input{transition:all .3s ease;transition:var(--transition-default)}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}.animate-fadeIn{animation:fadeIn .5s ease forwards}.animate-slideUp{animation:slideInUp .5s ease forwards}.animate-slideLeft{animation:slideInFromLeft .5s ease forwards}.animate-slideRight{animation:slideInFromRight .5s ease forwards}.animate-scaleIn{animation:scaleIn .4s ease forwards}.animate-heartbeat{animation:heartbeat 1.5s infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.navbar{height:clamp(60px,10vw,70px)}.navbar-logo{font-size:clamp(1.4rem,4vw,1.8rem)}@media (max-width:768px){.nav-menu{gap:8px;padding:10px}.nav-item{margin:4px 0;padding:12px;text-align:center;width:100%}.profile-dropdown{border-radius:0;box-shadow:0 4px 8px #0000001a;left:0;right:0;top:60px;width:100%}}.birthday-timeline{padding:clamp(20px,5vw,40px) 0}.birthday-card{transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .8s ease,box-shadow .3s ease}.birthday-card:hover{box-shadow:0 15px 30px #0003;transform:translateY(-5px)}.card-image{height:clamp(180px,30vw,250px)}.card-content{padding:clamp(15px,4vw,25px)}.card-content h3{margin-bottom:clamp(10px,3vw,15px)}.birthday-popup{animation:scaleIn .5s cubic-bezier(.68,-.55,.27,1.55) forwards;max-width:clamp(250px,80vw,400px)}.media-display img,.media-display video{border-radius:clamp(4px,1vw,8px);max-height:clamp(200px,50vh,300px)}@media (max-width:480px){body{font-size:15px}.profile-image{height:clamp(80px,25vw,120px);width:clamp(80px,25vw,120px)}}@media (min-width:481px) and (max-width:768px){.timeline-item{padding-left:70px!important;padding-right:10px!important}.feature-card{padding:clamp(15px,4vw,24px)}}@media (max-height:600px){.call-status,.my-video-container{bottom:clamp(70px,10vh,90px)}.my-video-container{height:clamp(60px,10vh,70px);width:clamp(80px,15vw,100px)}}.auth-container{align-items:center;background:var(--bg-main);display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:24px 16px;position:relative}.auth-container:before{background:radial-gradient(ellipse 70% 60% at 15% 20%,#ff6aff26 0,#0000 60%),radial-gradient(ellipse 70% 60% at 85% 80%,rgba(var(--primary-rgb),.12) 0,#0000 60%),radial-gradient(ellipse 50% 50% at 50% 50%,#8b5cf60f 0,#0000 60%);content:"";inset:0;pointer-events:none;position:fixed;z-index:0}.auth-card{animation:fadeInScale .5s cubic-bezier(.34,1.56,.64,1) both;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--primary-rgb),.05);max-width:440px;padding:clamp(28px,6vw,48px);position:relative;width:100%;z-index:1}.auth-brand{align-items:center;display:flex;justify-content:center;margin-bottom:32px;text-align:center}.auth-logo-img{animation:logoFloat 4s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(var(--primary-rgb),.3));height:auto;max-width:200px}@keyframes logoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.auth-card h2{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:clamp(1.4rem,3.5vw,1.8rem);font-weight:800;letter-spacing:-.02em;margin-bottom:6px;text-align:center}.auth-subtitle{color:var(--text-muted);font-size:.88rem;margin-bottom:28px;text-align:center}.form-group{margin-bottom:18px}.form-group label{color:var(--text-secondary);display:block;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.02em;margin-bottom:7px}.form-group input{-webkit-appearance:none;background:var(--bg-input);border:1.5px solid var(--border-input);border-radius:var(--radius-md);color:var(--text-primary);font-family:Inter,sans-serif;font-size:.95rem;outline:none;padding:12px 16px;transition:all .25s ease;width:100%}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus{background:var(--bg-input);border-color:var(--border-input-focus);box-shadow:var(--glow-pink-sm)}.auth-button{background:var(--btn-primary-bg);border:none;border-radius:var(--radius-md);box-shadow:var(--btn-primary-shadow);color:#fff;cursor:pointer;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;letter-spacing:.3px;margin-top:10px;overflow:hidden;padding:14px;position:relative;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:100%}.auth-button:after{background:#ffffff26;content:"";height:200%;left:-60%;position:absolute;top:-50%;transform:skewX(-20deg);transition:left .5s ease;width:60%}.auth-button:hover:after{left:120%}.auth-button:hover{box-shadow:0 8px 30px rgba(var(--primary-rgb),.6);transform:translateY(-3px)}.auth-button:active{transform:translateY(-1px)}.auth-button:disabled{cursor:not-allowed;opacity:.65;transform:none}.auth-error{background:#ff5d731a;border:1px solid #ff5d734d;border-radius:var(--radius-sm);color:var(--danger)}.auth-error,.auth-success{animation:slideDown .25s ease;font-size:.875rem;font-weight:500;margin-bottom:18px;padding:11px 14px}.auth-success{background:#57f2871a;border:1px solid #57f2874d;border-radius:var(--radius-sm);color:#18a849}[data-theme=dark] .auth-success{color:var(--success)}.auth-footer{color:var(--text-muted);font-size:.875rem;margin-top:24px;text-align:center}.auth-footer a{color:var(--primary);font-weight:600;transition:color .2s ease}.auth-footer a:hover{color:var(--primary-hover)}.auth-divider{align-items:center;color:var(--text-muted);display:flex;font-size:.8rem;gap:12px;margin:20px 0}.auth-divider:after,.auth-divider:before{background:var(--border-color);content:"";flex:1 1;height:1px}@media (max-width:480px){.auth-card{border-radius:var(--radius-lg);padding:28px 20px}}.friends-container{animation:fadeInUp .4s ease both;margin:0 auto;max-width:860px;min-height:calc(100vh - 70px);padding:clamp(24px,4vw,40px) clamp(16px,3vw,24px) 80px}.friends-page-header{margin-bottom:32px}.friends-page-header h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:clamp(1.8rem,5vw,2.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:6px}.friends-page-header p{color:var(--text-muted);font-size:.9rem}.error-message{animation:slideDown .25s ease;border-radius:var(--radius-sm);justify-content:space-between;margin-bottom:20px;padding:12px 16px}.error-message button{background:var(--danger);border-radius:var(--radius-pill);font-size:.8rem;font-weight:600;padding:5px 12px}.success-message{animation:slideDown .25s ease;background:#57f2871a;border:1px solid #57f28740;color:#18a849;font-size:.875rem;font-weight:500;margin-bottom:20px}.section-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-bottom:24px;padding:clamp(20px,3vw,28px);transition:box-shadow .3s ease}.section-card:hover{box-shadow:0 6px 28px rgba(var(--primary-rgb),.1),var(--shadow-md)}.section-title{align-items:center;color:var(--text-primary);display:flex;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:700;gap:8px;margin-bottom:18px}.section-title-badge{background:var(--btn-primary-bg);border-radius:var(--radius-pill);box-shadow:0 2px 8px rgba(var(--primary-rgb),.4);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px}.search-bar{display:flex;gap:10px;margin-bottom:16px}.search-bar input{background:var(--bg-input);border:1.5px solid var(--border-input);border-radius:var(--radius-md);color:var(--text-primary);flex:1 1;font-family:Inter,sans-serif;font-size:.9rem;min-width:0;outline:none;padding:12px 18px;transition:all .25s ease}.search-bar input::placeholder{color:var(--text-muted)}.search-bar input:focus{border-color:var(--border-input-focus);box-shadow:var(--glow-pink-sm)}.search-bar button{background:var(--btn-primary-bg);border:none;border-radius:var(--radius-md);box-shadow:var(--btn-primary-shadow);color:#fff;cursor:pointer;flex-shrink:0;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:700;padding:12px 22px;transition:all .25s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.search-bar button:hover{box-shadow:0 6px 24px rgba(var(--primary-rgb),.6);transform:translateY(-2px)}.search-bar button:disabled{cursor:not-allowed;opacity:.5;transform:none}.friend-card,.user-card{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);display:flex;gap:12px;justify-content:space-between;margin-bottom:10px;padding:14px 16px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.friend-card:hover,.user-card:hover{border-color:rgba(var(--primary-rgb),.3);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.card-avatar{align-items:center;background:var(--btn-primary-bg);border-radius:50%;box-shadow:0 4px 12px rgba(var(--primary-rgb),.35);color:#fff;display:flex;flex-shrink:0;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800;height:46px;justify-content:center;position:relative;width:46px}.card-avatar.cyan{background:linear-gradient(135deg,var(--secondary),#6aa8ff);box-shadow:0 4px 12px rgba(var(--primary-rgb),.4)}.online-dot{background:var(--online-dot);border:2px solid var(--bg-card);border-radius:50%;bottom:1px;box-shadow:0 0 6px #57f28799;height:10px;position:absolute;right:1px;width:10px}.friend-info,.user-info{flex:1 1;min-width:0}.friend-info h3,.user-info h3{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.95rem;font-weight:700;margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-info p,.user-info p{color:var(--text-muted);font-size:.78rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-card button,.user-card button{border:none;border-radius:var(--radius-pill);cursor:pointer;flex-shrink:0;font-family:Outfit,sans-serif;font-size:.82rem;font-weight:700;padding:8px 16px;transition:all .25s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.add-friend-btn{background:var(--btn-primary-bg)!important;box-shadow:0 3px 10px rgba(var(--primary-rgb),.4)!important;color:#fff!important}.add-friend-btn:hover{box-shadow:0 6px 20px rgba(var(--primary-rgb),.55)!important;transform:translateY(-2px) scale(1.04)!important}.user-card button.sent{background:#57f2871f!important;border:1px solid #57f2874d!important;color:#18a849!important;cursor:default}[data-theme=dark] .user-card button.sent{color:var(--success)!important}.chat-btn{background:var(--btn-primary-bg)!important;box-shadow:0 3px 10px rgba(var(--primary-rgb),.4)!important;color:#fff!important}.chat-btn:hover{box-shadow:0 6px 20px rgba(var(--primary-rgb),.55)!important;transform:translateY(-2px) scale(1.04)!important}.remove-btn{background:#ff5d731a!important;border:1px solid #ff5d7340!important;color:var(--danger)!important}.remove-btn:hover{background:#ff5d732e!important;transform:translateY(-1px)!important}.friend-actions{display:flex;flex-shrink:0;gap:8px}.requests-section{border-left:3px solid var(--warning)}.request-actions{display:flex;flex-shrink:0;gap:8px}.accept-btn{background:linear-gradient(135deg,var(--secondary),#6aa8ff)!important;box-shadow:0 3px 10px rgba(var(--primary-rgb),.4)!important;color:#fff!important}.accept-btn:hover{box-shadow:0 6px 20px rgba(var(--primary-rgb),.55)!important;transform:translateY(-2px) scale(1.04)!important}.reject-btn{background:#ff5d731a!important;border:1px solid #ff5d7340!important;color:var(--danger)!important}.reject-btn:hover{background:#ff5d732e!important;transform:translateY(-1px)!important}.loading{color:var(--text-muted);font-size:.9rem;gap:10px;padding:24px;text-align:center}.loading:before{animation:spin .8s linear infinite;border:2px solid rgba(var(--primary-rgb),.3);border-radius:50%;border-top-color:var(--primary);content:"";display:block;flex-shrink:0;height:18px;width:18px}.empty-state{color:var(--text-muted);padding:40px 20px;text-align:center}.empty-state-icon{display:block;filter:grayscale(.3);font-size:3rem;margin-bottom:12px}.empty-state p{font-size:.95rem;line-height:1.6}.search-results{margin-top:8px}.no-results{color:var(--text-muted);font-size:.9rem;padding:20px;text-align:center}@media (max-width:600px){.friend-actions{gap:6px}.friend-card,.user-card{flex-wrap:wrap;gap:10px}.friend-card>*,.user-card>*{flex-shrink:0}.friend-info,.user-info{min-width:100px}.search-bar{flex-direction:column}.search-bar button{width:100%}}@media (max-width:480px){.friends-container{padding:16px 12px 60px}}.friend-status{font-size:.78rem!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-status.status-online{color:#57f287!important;color:var(--online-dot,#57f287)!important;font-weight:600}.friend-status.status-offline{color:var(--text-muted)!important;font-weight:400}.media-upload-container{animation:slideInUp .4s ease forwards;background-color:#f5f5f5;border-radius:clamp(6px,1.5vw,8px);margin-bottom:15px;padding:clamp(12px,3vw,15px)}.media-options{display:flex;flex-direction:column}.media-buttons{display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,10px);margin-bottom:clamp(12px,3vw,15px)}.media-buttons button{background-color:#2196f3;border:none;border-radius:clamp(15px,4vw,20px);color:#fff;cursor:pointer;flex-grow:1;font-weight:500;padding:clamp(8px,2vw,10px) clamp(12px,3vw,15px);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.media-buttons button:hover{background-color:#0d8aee;box-shadow:0 4px 8px #2196f34d;transform:translateY(-3px)}.media-buttons button:active{transform:translateY(0)}.media-preview{align-items:center;animation:fadeIn .4s ease;display:flex;flex-direction:column}.media-preview img,.media-preview video{border-radius:clamp(6px,1.5vw,8px);margin-bottom:10px;max-height:clamp(200px,40vh,300px);max-width:100%;transition:transform .4s ease}.media-preview audio{margin-bottom:10px;width:100%}.action-buttons{display:flex;gap:clamp(8px,2vw,10px);margin-top:clamp(10px,2.5vw,15px)}.action-buttons button{border:none;border-radius:clamp(4px,1vw,6px);cursor:pointer;flex:1 1;font-weight:500;padding:clamp(8px,2vw,10px);transition:all .3s ease}.action-buttons button:first-child{background-color:#4caf50;color:#fff}.action-buttons button:last-child{background-color:#f44336;color:#fff}.action-buttons button:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px)}.action-buttons button:active{transform:translateY(0)}.media-capture{align-items:center;display:flex;flex-direction:column;overflow:hidden;position:relative}.media-capture,.media-capture video{border-radius:clamp(6px,1.5vw,8px);width:100%}.media-capture video{background-color:#000;max-height:clamp(250px,50vh,350px);object-fit:cover}.recording-indicator{align-items:center;animation:pulse 1.5s infinite;background-color:#00000080;border-radius:clamp(15px,4vw,20px);color:#fff;display:flex;gap:5px;padding:clamp(4px,1vw,5px) clamp(8px,2vw,10px);position:absolute;right:10px;top:10px}.recording-dot{animation:pulse 1.5s infinite;background-color:#f44336;border-radius:50%;height:clamp(10px,2.5vw,12px);width:clamp(10px,2.5vw,12px)}.camera-feed.camera-loaded+.camera-loading{opacity:0;visibility:hidden}.camera-feed{background-color:#000;transition:opacity .3s ease}.capture-button{animation:pulse 2s infinite}.capture-instructions{background-color:#00000080;border-radius:clamp(15px,4vw,20px);bottom:clamp(60px,15vw,70px);color:#fff;font-size:clamp(.8rem,2vw,.9rem);left:50%;padding:clamp(6px,1.5vw,8px) clamp(10px,2.5vw,12px);position:absolute;transform:translateX(-50%)}.capture-button{background-color:#fff;border:3px solid #ccc;border-radius:50%;height:clamp(56px,14vw,64px);margin:10px;position:relative;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:clamp(56px,14vw,64px)}.capture-button:hover{border-color:#ddd;transform:scale(1.1)}.capture-button:active{background-color:#f44336;border-color:#fff;transform:scale(.95)}.cancel-button{background-color:initial;border:none;color:#fff}.audio-recording{align-items:center;background-color:#0000000d;border-radius:clamp(6px,1.5vw,8px);display:flex;justify-content:center;min-height:clamp(150px,30vh,200px);width:100%}@media (max-width:480px){.media-buttons{flex-direction:column}.media-buttons button{width:100%}.capture-button{height:56px;width:56px}}.media-display{animation:mediaAppear .4s ease-out forwards;background-color:#f8f8f8;border:1px solid #ddd;border-radius:clamp(6px,1.5vw,8px);margin:10px 0;max-width:100%;min-height:150px;overflow:hidden;position:relative;transition:transform .3s ease,box-shadow .3s ease}@keyframes mediaAppear{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.media-display:hover{box-shadow:0 4px 12px #00000026}.image-container{display:flex;flex-direction:column;justify-content:center;min-height:100px;position:relative;transition:opacity .3s ease;will-change:opacity,transform}.image-container:before{animation:shine 1.5s linear infinite;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;border-radius:clamp(4px,1vw,8px);content:"";height:100%;left:0;opacity:.8;position:absolute;top:0;width:100%;z-index:0}.image-container img{animation:fadeIn .5s ease forwards;border-radius:clamp(4px,1vw,8px);max-height:clamp(200px,40vh,300px);max-width:100%;object-fit:contain;opacity:0;position:relative;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),opacity .3s ease;z-index:1}.image-container:hover img{transform:scale(1.02)}.video-container video{border-radius:clamp(4px,1vw,8px);margin:0 auto;max-height:clamp(200px,40vh,300px);max-width:100%;transition:transform .4s ease}.video-container:hover video{transform:scale(1.02)}.audio-container{padding:clamp(8px,2vw,10px);transition:opacity .3s ease;will-change:opacity}.audio-container audio{border-radius:clamp(4px,1vw,8px);transition:all .3s ease;width:100%}.audio-container audio:focus{outline:2px solid #2196f380}.download-button{background-color:#2196f3cc;border-radius:clamp(3px,1vw,4px);bottom:clamp(8px,2vw,10px);font-size:clamp(.8rem,2vw,.9rem);opacity:.8;padding:clamp(5px,1.5vw,8px) clamp(8px,2vw,10px);position:absolute;right:clamp(8px,2vw,10px);transition:all .3s ease}.media-display:hover .download-button{opacity:1}.download-button:hover{background-color:#2196f3;box-shadow:0 2px 6px #0003;transform:translateY(-2px)}.download-button:active{transform:translateY(0)}.media-loading{animation:fadeIn .3s ease;background-color:#f1f1f1;color:#555;transition:opacity .3s ease;will-change:opacity}.media-error,.media-loading{align-items:center;border-radius:clamp(4px,1vw,8px);display:flex;font-size:clamp(.9rem,2vw,1rem);justify-content:center;min-height:clamp(80px,20vh,100px);padding:clamp(15px,4vw,20px)}.media-error{background-image:linear-gradient(45deg,#f8f8f8 25%,#eee 0,#eee 50%,#f8f8f8 0,#f8f8f8 75%,#eee 0,#eee);background-size:20px 20px;color:#d32f2f;flex-direction:column;text-align:center}.media-error button{background-color:#2196f3;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:10px;padding:5px 15px}.media-error button:hover{background-color:#0d8aee}.spinner{animation:spin .8s cubic-bezier(.5,.1,.5,.9) infinite;border:clamp(2px,.5vw,3px) solid #0000001a;border-top-color:#2196f3;box-shadow:0 0 10px #2196f333;height:clamp(16px,4vw,20px);margin-right:10px;width:clamp(16px,4vw,20px);will-change:transform}.open-link{color:#1565c0;text-decoration:underline}.error-details,.open-link{display:block;margin-top:5px}.error-details{color:#888;font-size:.8rem}.media-placeholder{align-items:center;animation:shine 1.5s linear infinite;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;border-radius:clamp(4px,1vw,8px);color:#aaa;display:flex;font-style:italic;justify-content:center;min-height:150px}.media-placeholder:after{animation:fadeInOut 1.5s ease-in-out infinite;content:"Loading media..."}@keyframes shine{to{background-position-x:-200%}}@keyframes fadeInOut{0%,to{opacity:.7}50%{opacity:1}}@media (max-width:480px){.media-display{margin:8px 0;min-height:100px}.image-container img,.video-container video{max-height:200px}.media-error button,.open-link{font-size:.9rem;padding:6px 12px}}.chat-container{background:var(--bg-main);bottom:0;display:flex;flex-direction:column;height:100vh;height:100dvh;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:100}@supports (-webkit-touch-callout:none){.chat-container{height:-webkit-fill-available}}.chat-container.chat-fullscreen{border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:100%;position:fixed;right:0;top:0;z-index:1000}.chat-header{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:var(--bg-glass);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;min-height:66px;padding:12px 16px;position:relative;z-index:10}.chat-header,.chat-header-left{align-items:center;display:flex;gap:12px}.chat-header-left{flex:1 1;min-width:0}.chat-header-info{min-width:0}.chat-header-name{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-header-status{align-items:center;color:var(--online-dot);display:flex;font-size:.75rem;font-weight:500;gap:4px}.chat-header-status:before{background:var(--online-dot);border-radius:50%;box-shadow:0 0 6px #57f28799;content:"";flex-shrink:0;height:6px;width:6px}.back-button{align-items:center;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:flex;flex-shrink:0;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:600;gap:6px;padding:8px 14px;transition:all .25s ease;white-space:nowrap}.back-button:hover{border-color:var(--primary);box-shadow:var(--glow-pink-sm);color:var(--primary)}.chat-friend-avatar{align-items:center;background:var(--btn-primary-bg);border-radius:50%;box-shadow:0 4px 14px rgba(var(--primary-rgb),.45);color:#fff;display:flex;flex-shrink:0;font-family:Outfit,sans-serif;font-size:1rem;font-weight:800;height:40px;justify-content:center;position:relative;width:40px}.chat-friend-online-dot{background:var(--online-dot);border:2px solid var(--bg-main);border-radius:50%;bottom:1px;box-shadow:0 0 6px #57f287b3;height:10px;position:absolute;right:1px;width:10px}.chat-actions{display:flex;flex-shrink:0;gap:8px}.video-call-btn{align-items:center;background:linear-gradient(135deg,var(--secondary),#6aa8ff)!important;border:none;border-radius:var(--radius-pill)!important;box-shadow:0 3px 12px rgba(var(--primary-rgb),.4)!important;color:#fff!important;cursor:pointer;display:flex;font-family:Outfit,sans-serif!important;font-size:.82rem!important;font-weight:700!important;gap:5px;padding:8px 16px!important;transition:all .25s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.video-call-btn:hover{box-shadow:0 6px 20px rgba(var(--primary-rgb),.6)!important;transform:translateY(-2px)!important}.video-call-btn:disabled{cursor:not-allowed;opacity:.45;transform:none!important}.games-btn{align-items:center;background:linear-gradient(135deg,var(--purple-accent),#6a4fff)!important;border:none;border-radius:var(--radius-pill)!important;box-shadow:0 3px 12px #8b5cf666!important;color:#fff!important;cursor:pointer;display:flex;font-family:Outfit,sans-serif!important;font-size:.82rem!important;font-weight:700!important;gap:5px;padding:8px 16px!important;transition:all .25s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.games-btn:hover{box-shadow:0 6px 20px #8b5cf699!important;transform:translateY(-2px)!important}.messages-container{-webkit-overflow-scrolling:touch;background:var(--bg-main);display:flex;flex:1 1;flex-direction:column;gap:4px;overflow-y:auto;padding:16px;position:relative}.message{animation:fadeInUp .2s ease both;margin-bottom:8px;max-width:min(72%,500px);position:relative}.message.sent{align-self:flex-end}.message.received{align-self:flex-start}.message-bubble{padding:7px 14px;position:relative;word-break:break-word}.message.sent .message-bubble{background:var(--bubble-sent-bg);border-radius:var(--radius-bubble-sent);box-shadow:0 4px 14px rgba(var(--primary-rgb),.35);color:var(--bubble-sent-text)}.message.received .message-bubble{background:var(--bubble-received-bg);border-radius:var(--radius-bubble-received);box-shadow:var(--shadow-sm);color:var(--bubble-received-text)}.message-content{font-size:.92rem;line-height:1.55}.message.sent .message-content{color:#fff}.message-time{font-size:.55rem;margin-top:2px;opacity:.7;text-align:right}.message.sent .message-time{color:#ffffffbf}.message.received .message-time{color:var(--text-muted)}.message-status{display:inline-block;font-size:.55rem;font-weight:700;margin-left:5px}.message-status.read{color:#38bdf8;color:var(--read-receipt-color,#38bdf8);text-shadow:0 0 2px #0003}.message-status.delivered{color:#fff9}.reply-context{background:#0000000f;border-left:3px solid var(--secondary);border-radius:8px 8px 0 0;cursor:pointer;font-size:.8rem;margin-bottom:4px;padding:6px 10px;transition:background .2s ease}.message.sent .reply-context{background:#ffffff1f;border-left-color:#ffffff80}.reply-context:hover{background:#0000001a}.reply-indicator{color:var(--secondary);font-size:.72rem;font-weight:600;margin-bottom:2px}.message.sent .reply-indicator{color:#fffc}.reply-content{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}.message.sent .message-reactions{justify-content:flex-end}.reaction{align-items:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:50%;box-shadow:var(--shadow-sm);cursor:default;display:inline-flex;font-size:14px;height:26px;justify-content:center;transition:transform .2s ease;width:26px}.reaction:hover{transform:scale(1.25)}.message-actions{bottom:-7px;display:flex;gap:4px;opacity:0;position:absolute;transition:opacity .2s ease;z-index:10}.message.sent .message-actions{right:0}.message.received .message-actions{left:0}.message:hover .message-actions{opacity:1}.action-button{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--bg-card);border:1px solid var(--border-color);border-radius:50%;box-shadow:var(--shadow-md);cursor:pointer;display:flex;flex-shrink:0;font-size:14px;height:28px;justify-content:center;line-height:1;min-height:28px;min-width:28px;padding:0;transition:transform .2s ease,box-shadow .2s ease;width:28px}.action-button:hover{box-shadow:var(--glow-pink-sm);transform:scale(1.15)}.emoji-picker-container{border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);overflow:hidden;position:absolute;z-index:1000}.emoji-picker-sent{bottom:100%;margin-bottom:10px;right:10px}.emoji-picker-received{bottom:100%;left:10px;margin-bottom:10px}.emoji-picker-close{align-items:center;background:#00000026;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:11px;height:24px;justify-content:center;position:absolute;right:8px;top:8px;transition:background .2s ease;width:24px;z-index:1001}.emoji-picker-close:hover{background:#0000004d}@keyframes highlightPulse{0%,to{box-shadow:0 0 0 2px #ffcc6680}50%{box-shadow:0 0 0 4px #fc6c}}.highlight-message .message-bubble{animation:highlightPulse 2s ease}.error-message{background:#ff5d731a;border:1px solid #ff5d7340;color:var(--danger);flex-shrink:0;font-size:.875rem;font-weight:500;padding:10px 16px}.connection-warning{background:#ffcc661f;border-bottom:1px solid #ffcc664d;color:var(--warning);flex-shrink:0;font-size:.82rem;font-weight:500;padding:8px 16px;text-align:center}.loading-messages{align-items:center;color:var(--text-muted);display:flex;flex-direction:column;font-size:.9rem;gap:10px;justify-content:center;margin:auto}.loading-messages:before{animation:spin .9s linear infinite;border:3px solid rgba(var(--primary-rgb),.2);border-radius:50%;border-top-color:var(--primary);content:"";display:block;height:32px;width:32px}.no-messages{color:var(--text-muted);margin:auto;padding:32px;text-align:center}.no-messages-icon{display:block;font-size:3rem;margin-bottom:12px}.no-messages p{font-size:.9rem;line-height:1.6}.no-more-messages{color:var(--text-muted);font-size:.75rem;margin-bottom:8px;padding:8px;text-align:center}.loading-more-messages{align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);color:var(--text-secondary);display:flex;font-size:.85rem;gap:8px;left:50%;padding:12px 18px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:5}.spinner{animation:spin .8s linear infinite;border:2px solid rgba(var(--primary-rgb),.2);border-top-color:var(--primary);display:inline-block;flex-shrink:0;height:18px;vertical-align:middle;width:18px}.reply-preview{align-items:center;animation:slideUp .2s ease;background:var(--bg-secondary);border-left:3px solid var(--primary);border-top:1px solid var(--border-color);display:flex;flex-shrink:0;gap:12px;justify-content:space-between;padding:10px 16px}.reply-preview-content{flex:1 1;font-size:.82rem;min-width:0}.reply-to-label{color:var(--primary);font-family:Outfit,sans-serif;font-weight:700}.reply-text{color:var(--text-secondary);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancel-reply{background:none;border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;flex-shrink:0;font-size:1rem;padding:4px 8px;transition:all .2s ease}.cancel-reply:hover{background:#ff5d731a;color:var(--danger)}.message-form{align-items:center;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:var(--bg-glass);border-top:1px solid var(--border-color);bottom:0;display:flex;flex-shrink:0;gap:10px;padding:12px 14px;position:-webkit-sticky;position:sticky;width:100%;z-index:10}.message-form input{background:var(--bg-input);border:1.5px solid var(--border-input);border-radius:var(--radius-pill);color:var(--text-primary);flex:1 1;font-family:Inter,sans-serif;font-size:.92rem;min-width:0;outline:none;padding:11px 18px;transition:all .25s ease}.message-form input::placeholder{color:var(--text-muted)}.message-form input:focus{border-color:var(--border-input-focus);box-shadow:var(--glow-pink-sm)}.message-form>button[type=submit]{align-items:center;background:var(--btn-primary-bg);border:none;border-radius:50%;box-shadow:0 4px 14px rgba(var(--primary-rgb),.5);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:44px;justify-content:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:44px}.message-form>button[type=submit]:hover{box-shadow:0 6px 22px rgba(var(--primary-rgb),.7);transform:scale(1.12)}.message-form>button[type=submit]:disabled{cursor:not-allowed;opacity:.4;transform:none}.media-button{align-items:center;background:var(--btn-secondary-bg);border:1.5px solid var(--btn-secondary-border);border-radius:50%;color:var(--secondary);cursor:pointer;display:flex;flex-shrink:0;font-size:1.2rem;height:44px;justify-content:center;transition:all .25s ease;width:44px}.media-button:hover{background:rgba(var(--primary-rgb),.2);box-shadow:var(--glow-cyan-sm);transform:scale(1.08)}@media (max-width:768px){.chat-header{min-height:58px;padding:10px 12px}.chat-header-name{font-size:.92rem}.games-btn,.video-call-btn{font-size:.78rem!important;padding:7px 11px!important}.message{max-width:84%}.messages-container{padding:12px}.message-form{gap:8px;padding:10px 12px}.emoji-picker-container{bottom:70px;left:50%;max-height:40vh;position:fixed;transform:translateX(-50%);width:min(90vw,320px)}}@media (max-width:480px){.games-btn span,.video-call-btn span{display:none}.chat-actions{gap:6px}.message{max-width:88%}.back-button span{display:none}}body.chat-page-active .navbar{display:none!important}:root{--vh:1vh}@keyframes messageAppear{0%{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.message{animation:messageAppear .25s cubic-bezier(.22,.61,.36,1) both}.message-optimistic .message-bubble{opacity:.75}.message-failed .message-bubble{border:1.5px dashed #ff5d6e;border:1.5px dashed var(--danger,#ff5d6e);opacity:.5}.message-failed .message-time{color:#ff5d6e!important;color:var(--danger,#ff5d6e)!important;font-weight:600}.message-skeleton-container{display:flex;flex:1 1;flex-direction:column;gap:16px;justify-content:flex-end;padding:16px 0}.message-skeleton{animation:fadeInUp .3s ease both;display:flex}.message-skeleton.skeleton-sent{justify-content:flex-end}.message-skeleton.skeleton-received{justify-content:flex-start}.skeleton-bubble{background:#ffffff0f;background:var(--bg-card,#ffffff0f);border-radius:18px;overflow:hidden;position:relative}.skeleton-sent .skeleton-bubble{background:#ff6b9d1f;background:rgba(var(--primary-rgb,255,107,157),.12);border-radius:18px 18px 6px 18px}.skeleton-received .skeleton-bubble{background:#ffffff0f;background:var(--bg-card,#ffffff0f);border-radius:18px 18px 18px 6px}.skeleton-shimmer{animation:shimmer 1.8s ease-in-out infinite;background:linear-gradient(90deg,#0000,#ffffff0f 40%,#ffffff1a 50%,#ffffff0f 60%,#0000);inset:0;position:absolute}.typing-indicator-wrapper{align-self:flex-start;animation:messageAppear .25s ease both;display:flex;margin-bottom:8px}.typing-indicator-bubble{align-items:center;background:#ffffff14;background:var(--bubble-received-bg,#ffffff14);border-radius:18px 18px 18px 6px;box-shadow:0 2px 8px #0000001a;box-shadow:var(--shadow-sm,0 2px 8px #0000001a);display:flex;gap:8px;padding:10px 16px}.typing-dots{align-items:center;display:flex;gap:3px}@keyframes typingBounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}.typing-dot{animation:typingBounce 1.4s ease-in-out infinite;background:#999;background:var(--text-muted,#999);border-radius:50%;height:6px;width:6px}.typing-dot:nth-child(2){animation-delay:.15s}.typing-dot:nth-child(3){animation-delay:.3s}.typing-label{color:#999;color:var(--text-muted,#999);font-size:.75rem;font-style:italic;white-space:nowrap}.chat-header-status.typing{animation:typingPulse 1.5s ease-in-out infinite;color:#6aa8ff;color:var(--secondary,#6aa8ff);font-style:italic}@keyframes typingPulse{0%,to{opacity:.7}50%{opacity:1}}.chat-header-status.typing:before{animation:typingDotPulse 1.5s ease-in-out infinite;background:#6aa8ff;background:var(--secondary,#6aa8ff);box-shadow:0 0 6px #6aa8ff99}.chat-header-status.offline{color:#999;color:var(--text-muted,#999);font-size:.75rem;font-weight:400}@keyframes typingDotPulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.new-messages-indicator{align-items:center;animation:newMsgSlideUp .3s cubic-bezier(.22,.61,.36,1) both;background:linear-gradient(135deg,#ff6b9d,#c084fc);background:var(--btn-primary-bg,linear-gradient(135deg,#ff6b9d,#c084fc));border:none;border-radius:50px;border-radius:var(--radius-pill,50px);bottom:90px;box-shadow:0 4px 20px #ff6b9d80;box-shadow:0 4px 20px rgba(var(--primary-rgb,255,107,157),.5);color:#fff;cursor:pointer;display:flex;font-family:Outfit,sans-serif;font-size:.82rem;font-weight:600;gap:6px;left:50%;padding:8px 18px;position:fixed;transform:translateX(-50%);transition:transform .2s ease,box-shadow .2s ease;white-space:nowrap;z-index:50}.new-messages-indicator:hover{box-shadow:0 6px 28px #ff6b9db3;box-shadow:0 6px 28px rgba(var(--primary-rgb,255,107,157),.7);transform:translateX(-50%) translateY(-2px)}@keyframes newMsgSlideUp{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.new-messages-arrow{font-size:1rem;line-height:1}.new-messages-text{line-height:1}.messages-container{scroll-behavior:auto}@media (max-width:768px){.new-messages-indicator{bottom:80px;font-size:.78rem;padding:7px 14px}.typing-label{display:none}}.navbar{align-items:center;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:var(--nav-bg);border-bottom:1px solid var(--border-color);display:flex;height:70px;justify-content:center;left:0;position:fixed;right:0;top:0;transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease,background .3s ease;z-index:999}.navbar-visible{transform:translateY(0)}.navbar-hidden{box-shadow:none;transform:translateY(-110%)}.navbar:hover{box-shadow:0 4px 24px rgba(var(--primary-rgb),.1)}.navbar-container{gap:16px;justify-content:space-between;max-width:1280px;padding:0 24px;width:100%}.navbar-container,.navbar-logo{align-items:center;display:flex}.navbar-logo{flex-shrink:0;gap:8px;text-decoration:none;transition:filter .3s ease,transform .3s ease}.navbar-logo-img{height:40px;object-fit:contain;width:auto}.navbar-logo-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:clamp(1.4rem,3.5vw,1.8rem);font-weight:800;letter-spacing:-.02em}.navbar-logo:hover{filter:drop-shadow(0 0 12px rgba(var(--primary-rgb),.7));transform:scale(1.03)}.nav-menu{align-items:center;display:flex;gap:4px}.nav-item{border-radius:var(--radius-pill);color:var(--text-secondary);font-family:Outfit,sans-serif;font-size:.9rem;font-weight:600;padding:8px 16px;position:relative;text-decoration:none;transition:all .25s ease;white-space:nowrap}.nav-item:hover{background:var(--nav-hover-bg);color:var(--secondary);transform:translateY(-1px)}.nav-item.active-nav{background:var(--nav-active-bg);color:var(--nav-active-icon)}.nav-right{gap:8px}.nav-right,.theme-toggle-btn{align-items:center;display:flex}.theme-toggle-btn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:50%;color:var(--text-secondary);cursor:pointer;flex-shrink:0;font-size:1.1rem;height:42px;justify-content:center;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:42px}.theme-toggle-btn:hover{border-color:var(--primary);box-shadow:var(--glow-pink-sm);color:var(--primary);transform:scale(1.08) rotate(12deg)}.profile-container{position:relative}.profile-menu{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-pill);cursor:pointer;display:flex;gap:10px;padding:6px 12px 6px 8px;transition:all .25s ease}.profile-menu:hover{border-color:rgba(var(--primary-rgb),.4);box-shadow:var(--glow-pink-sm);transform:translateY(-1px)}.avatar{align-items:center;background:var(--btn-primary-bg);border-radius:50%;box-shadow:0 2px 8px rgba(var(--primary-rgb),.4);color:#fff;display:flex;flex-shrink:0;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:800;height:34px;justify-content:center;transition:box-shadow .3s ease;width:34px}.profile-menu:hover .avatar{box-shadow:var(--glow-pink-sm)}.username{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.88rem;font-weight:600;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-chevron{color:var(--text-muted);font-size:.6rem;transition:transform .2s ease}.profile-menu:hover .profile-chevron{transform:rotate(180deg)}.profile-dropdown{animation:slideDown .25s cubic-bezier(.34,1.56,.64,1) forwards;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl),0 0 0 1px rgba(var(--primary-rgb),.08);overflow:hidden;position:absolute;right:0;top:calc(100% + 10px);width:260px;z-index:1000}.dropdown-user-info{align-items:center;display:flex;gap:12px;padding:18px 18px 14px}.dropdown-avatar{align-items:center;background:var(--btn-primary-bg);border-radius:50%;box-shadow:0 4px 14px rgba(var(--primary-rgb),.45);color:#fff;display:flex;flex-shrink:0;font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:800;height:48px;justify-content:center;width:48px}.dropdown-username{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;margin:0 0 3px}.dropdown-email{color:var(--text-muted);font-size:.78rem;margin:0}.dropdown-divider{background:var(--divider);height:1px;margin:0 12px}.dropdown-item{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:500;gap:10px;padding:11px 18px;text-decoration:none;transition:all .2s ease}.dropdown-item:hover{background:var(--bg-hover);color:var(--primary)}.dropdown-item-icon{font-size:1rem;text-align:center;width:20px}.dropdown-item.logout{color:var(--danger)}.dropdown-item.logout:hover{background:#ff5d7314;color:var(--danger)}.menu-toggle{align-items:center;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;display:none;flex-direction:column;flex-shrink:0;gap:5px;height:40px;justify-content:center;transition:all .25s ease;width:40px}.menu-toggle:hover{border-color:var(--primary);box-shadow:var(--glow-pink-sm)}.menu-toggle span{background:var(--text-secondary);border-radius:2px;display:block;height:2px;transform-origin:center;transition:all .3s ease;width:18px}.menu-toggle.active span:first-child{background:var(--primary);transform:translateY(7px) rotate(45deg)}.menu-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}.menu-toggle.active span:nth-child(3){background:var(--primary);transform:translateY(-7px) rotate(-45deg)}@media (max-width:768px){.navbar{height:60px}.navbar-container{padding:0 16px}.menu-toggle{display:flex}.nav-menu,.username{display:none}.nav-menu{animation:slideDown .25s ease;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);background:var(--bg-glass);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-lg);flex-direction:column;gap:4px;left:0;padding:12px;position:fixed;right:0;top:60px;z-index:998}.nav-menu.active{display:flex}.nav-item{border-radius:var(--radius-sm);color:var(--text-primary);font-size:.95rem;padding:12px 16px;text-align:left}.nav-item,.profile-container{width:100%}.profile-menu{padding:10px 14px}.profile-dropdown,.profile-menu{border-radius:var(--radius-sm);width:100%}.profile-dropdown{margin-top:4px;position:static}.nav-right{gap:8px}body{padding-top:60px}}@media (max-width:480px){.navbar-logo{font-size:1.3rem}}.App{background-color:var(--bg-main);display:flex;flex-direction:column;min-height:100vh;position:relative;transition:background-color .3s ease}.home-container{margin:0 auto;max-width:1200px;padding:0 24px 80px;position:relative;z-index:1}.hero-section{margin-bottom:24px;overflow:hidden;padding:clamp(60px,12vw,120px) 24px clamp(70px,12vw,130px);position:relative;text-align:center}.hero-section:before{background:radial-gradient(ellipse 80% 80% at 20% 40%,#ff6aff1f 0,#0000 60%),radial-gradient(ellipse 80% 80% at 80% 20%,rgba(var(--primary-rgb),.12) 0,#0000 60%),radial-gradient(ellipse 60% 60% at 50% 90%,#8b5cf614 0,#0000 60%);content:"";inset:0;pointer-events:none;position:absolute;z-index:0}.hero-eyebrow{align-items:center;animation:fadeInUp .6s ease both;background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.25);border-radius:var(--radius-pill);color:var(--primary);display:inline-flex;font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;gap:8px;letter-spacing:.08em;margin-bottom:28px;padding:7px 16px;position:relative;text-transform:uppercase;z-index:1}.hero-eyebrow span{font-size:1rem}.hero-section h1{animation:fadeInUp .7s ease .1s both;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:clamp(2.4rem,7vw,4.8rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:24px;position:relative;z-index:1}.hero-section h1 .highlight{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;display:inline-block}.hero-section p{animation:fadeInUp .8s ease .2s both;color:var(--text-secondary);font-size:clamp(1rem,2.5vw,1.25rem);line-height:1.7;margin:0 auto 40px;max-width:560px;position:relative;z-index:1}.auth-buttons{align-items:center;animation:fadeInUp .9s ease .3s both;display:flex;flex-wrap:wrap;gap:16px;justify-content:center;position:relative;z-index:1}.btn{align-items:center;border:none;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;gap:8px;letter-spacing:.2px;padding:14px 32px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.btn-primary{background:var(--btn-primary-bg);box-shadow:var(--btn-primary-shadow);color:#fff}.btn-primary:hover{box-shadow:0 8px 30px rgba(var(--primary-rgb),.6);color:#fff;transform:translateY(-3px) scale(1.02)}.btn-outline{background:#0000;border:2px solid var(--secondary);color:var(--secondary)}.btn-outline:hover{background:rgba(var(--primary-rgb),.12);box-shadow:var(--glow-cyan-sm);color:var(--secondary);transform:translateY(-2px)}.hero-orb{border-radius:50%;filter:blur(60px);pointer-events:none;position:absolute;z-index:0}.hero-orb-1{animation:orbitGlow 20s linear infinite;background:rgba(var(--primary-rgb),.15);height:clamp(200px,30vw,400px);right:-80px;top:-80px;width:clamp(200px,30vw,400px)}.hero-orb-2{animation:orbitGlow 25s linear infinite reverse;background:rgba(var(--primary-rgb),.12);bottom:-60px;height:clamp(150px,25vw,300px);left:-60px;width:clamp(150px,25vw,300px)}.features-section{padding:24px 0 40px}.features-section h2{animation:fadeInUp .6s ease both;color:var(--text-primary);font-family:Outfit,sans-serif;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-bottom:48px;text-align:center}.features-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.feature-card{animation:fadeInUp .6s ease both;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;padding:clamp(24px,4vw,36px);position:relative;text-align:left;transition:all .35s cubic-bezier(.175,.885,.32,1.275)}.feature-card:before{background:var(--btn-primary-bg);content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.feature-card:hover{border-color:rgba(var(--primary-rgb),.3);box-shadow:var(--shadow-card-hover);transform:translateY(-8px)}.feature-card:hover:before{opacity:1}.feature-card-icon{display:block;filter:drop-shadow(0 0 8px rgba(var(--primary-rgb),.4));font-size:2.4rem;margin-bottom:16px}.feature-card h3{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:10px}.feature-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.65}.home-stats{align-items:center;border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:clamp(24px,6vw,64px);justify-content:center;margin:32px 0;padding:40px 24px}.stat-item{text-align:center}.stat-value{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;line-height:1;margin-bottom:4px}.stat-label{color:var(--text-muted);font-size:.85rem;font-weight:500}.birthday-wish-banner{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(135deg,rgba(var(--primary-rgb),.15),#ff6aff26);border:1px solid rgba(var(--primary-rgb),.2);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);margin-top:40px;overflow:hidden;padding:28px;position:relative;text-align:center}.birthday-icons{display:block;font-size:2rem;margin-bottom:12px}.birthday-wish-banner h3{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.3rem;margin-bottom:16px}.btn-birthday{background:var(--btn-primary-bg);border:none;border-radius:var(--radius-md);box-shadow:var(--btn-primary-shadow);color:#fff;font-family:Outfit,sans-serif;font-weight:700;padding:11px 28px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.btn-birthday:hover{box-shadow:0 8px 30px rgba(var(--primary-rgb),.6);transform:translateY(-3px) scale(1.05)}.feature-link{align-items:center;color:var(--primary);display:inline-flex;font-size:.9rem;font-weight:600;gap:4px;margin-top:12px;text-decoration:none;transition:all .3s ease}.feature-link:hover{color:var(--primary-hover);gap:8px}.success-message{background:#57f2871f;border:1px solid #57f2874d;border-radius:var(--radius-sm);color:#1a7a3a;font-size:.9rem;margin-bottom:16px;padding:12px 16px}[data-theme=dark] .success-message{color:var(--success)}@media (max-width:768px){.hero-section{padding:50px 16px 60px}.home-container{padding:0 16px 60px}.features-grid{gap:16px}.auth-buttons{gap:12px}.btn{font-size:.95rem;padding:12px 24px}.home-stats{gap:24px}}@media (max-width:480px){.auth-buttons{flex-direction:column;margin:0 auto;max-width:280px;width:100%}.btn{justify-content:center;width:100%}}:root{--primary:#ff6aff;--primary-hover:#ff8ad8;--primary-rgb:255,106,255;--secondary:#72d3dc;--secondary-hover:#5bc4ce;--secondary-rgb:114,211,220;--purple-accent:#8b5cf6;--bg-main:#fff9fd;--bg-secondary:#fff0fa;--bg-tertiary:#f5e8f8;--bg-card:#ffffffd9;--bg-card-solid:#fff;--bg-glass:#ffffffb8;--bg-input:#fff;--bg-hover:rgba(var(--primary-rgb),0.07);--text-primary:#1c1b22;--text-secondary:#5d6472;--text-muted:#8f96a3;--text-on-primary:#fff;--border-color:#e8ddf0;--border-color-strong:#d4c5e2;--border-input:#e8ddf0;--border-input-focus:var(--primary);--nav-bg:#fff9fde6;--nav-active-bg:rgba(var(--primary-rgb),0.12);--nav-active-icon:var(--primary);--nav-inactive-icon:#7e8799;--nav-hover-bg:rgba(var(--primary-rgb),0.1);--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 4px 16px #00000017;--shadow-lg:0 8px 32px #0000001a;--shadow-xl:0 16px 48px #0000001f;--glow-pink:0 0 30px rgba(var(--primary-rgb),0.35);--glow-cyan:0 0 30px #72d3dc4d;--glow-pink-sm:0 0 12px rgba(var(--primary-rgb),0.4);--glow-cyan-sm:0 0 12px #72d3dc59;--shadow-card:0 4px 24px #00000014,0 1px 4px #0000000a;--shadow-card-hover:0 12px 40px rgba(var(--primary-rgb),0.18),0 4px 12px #00000014;--radius-sm:10px;--radius-md:18px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;--radius-bubble-sent:20px 20px 4px 20px;--radius-bubble-received:20px 20px 20px 4px;--bubble-sent-bg:linear-gradient(135deg,var(--primary),var(--primary-hover));--bubble-sent-text:#fff;--bubble-received-bg:#f1f3f8;--bubble-received-text:#1c1b22;--online-dot:#57f287;--read-receipt-color:#38bdf8;--btn-primary-bg:linear-gradient(135deg,var(--primary),var(--primary-hover));--btn-primary-text:#fff;--btn-primary-shadow:0 4px 16px rgba(var(--primary-rgb),0.45);--btn-secondary-bg:rgba(var(--primary-rgb),0.12);--btn-secondary-border:var(--primary);--btn-secondary-text:var(--primary);--btn-gaming-bg:linear-gradient(135deg,var(--secondary),#6aa8ff);--success:#57f287;--warning:#fc6;--danger:#ff5d73;--info:var(--secondary);--badge-notif:#ff4fa3;--scrollbar-thumb:rgba(var(--primary-rgb),0.3);--scrollbar-track:#0000;--divider:#0000000f;--overlay:#0006;--cyan-accent:#72d3dc;--purple-accent:#a855f7;--primary-pink:#ff6aff;--light-cyan:#72d3dc26;--light-pink:rgba(var(--primary-rgb),0.15);--dark-glass:#191c2499;--light-glass:#ffffffd9;--gradient-love:linear-gradient(135deg,var(--primary),var(--primary-hover));--gradient-soft:linear-gradient(135deg,var(--secondary),#6aa8ff);--heart-color:var(--primary);--sparkle-color:var(--secondary)}[data-theme=dark]{--primary:#72d3dc;--primary-hover:#5bc4ce;--primary-rgb:114,211,220;--secondary:#ff6aff;--secondary-hover:#ff8ad8;--secondary-rgb:255,106,255;--bg-main:#070b1a;--bg-secondary:#10182b;--bg-tertiary:#16213a;--bg-card:#10182bd9;--bg-card-solid:#10182b;--bg-glass:#10182bb8;--bg-input:#141d33;--bg-hover:#72d3dc14;--text-primary:#fff;--text-secondary:#b8c0d4;--text-muted:#6f7891;--text-on-primary:#fff;--border-color:#1e2d4d;--border-color-strong:#25314d;--border-input:#25314d;--border-input-focus:#72d3dc;--nav-bg:#0d0f19d9;--nav-active-bg:#72d3dc2e;--nav-active-icon:#72d3dc;--nav-inactive-icon:#6f7891;--nav-hover-bg:#72d3dc1a;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-xl:0 16px 48px #0009;--glow-pink:0 0 40px #72d3dc33;--glow-cyan:0 0 40px #72d3dc80;--glow-pink-sm:0 0 15px #72d3dc4d;--glow-cyan-sm:0 0 15px #72d3dc99;--shadow-card:0 4px 24px #0006,0 0 1px #72d3dc1a;--shadow-card-hover:0 12px 40px #72d3dc40,0 0 20px #72d3dc26;--bubble-sent-bg:linear-gradient(135deg,#72d3dc,#6aa8ff);--bubble-sent-text:#fff;--bubble-received-bg:#1b2135;--bubble-received-text:#e2e8f0;--online-dot:#57f287;--read-receipt-color:#300066;--btn-primary-bg:linear-gradient(135deg,#72d3dc,#6aa8ff);--btn-primary-shadow:0 4px 20px #72d3dc99;--btn-secondary-bg:#72d3dc1a;--btn-secondary-border:#72d3dc;--btn-secondary-text:#72d3dc;--scrollbar-thumb:#72d3dc66;--divider:#ffffff0f;--overlay:#000000b3;--light-pink:#72d3dc26;--light-cyan:#72d3dc26}.floating-hearts{bottom:0;left:0;overflow:hidden;pointer-events:none;position:fixed;right:0;top:0;z-index:0}.heart{animation:floatHeart linear infinite;background:#ff6aff;background:var(--primary);bottom:-30px;filter:blur(.5px);opacity:0;transform:rotate(45deg)}.heart,.heart:after,.heart:before{height:18px;position:absolute;width:18px}.heart:after,.heart:before{background:inherit;border-radius:50%;content:""}.heart:before{left:0;top:-9px}.heart:after{left:-9px;top:0}.heart:nth-child(odd){background:#ff6aff;background:var(--primary);box-shadow:0 0 8px #ff6aff99}.heart:nth-child(2n){background:#72d3dc;background:var(--secondary);box-shadow:0 0 8px #72d3dc99}.heart:nth-child(3n){background:#a855f7;background:var(--purple-accent);box-shadow:0 0 8px #8b5cf680}@keyframes floatHeart{0%{opacity:0;transform:rotate(45deg) translateY(0) scale(.5)}10%{opacity:.35}90%{opacity:.2}to{opacity:0;transform:rotate(45deg) translateY(-110vh) scale(.8)}}@keyframes neonPulse{0%,to{box-shadow:0 0 30px #ff6aff59;box-shadow:var(--glow-pink)}50%{box-shadow:0 0 50px #72d3dc99,0 0 100px #72d3dc33}}@keyframes cyanPulse{0%,to{box-shadow:0 0 30px #72d3dc4d;box-shadow:var(--glow-cyan)}50%{box-shadow:0 0 50px #72d3dc99,0 0 100px #72d3dc33}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes heartPulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}@keyframes blink{0%,80%,to{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}@keyframes orbitGlow{0%{transform:translate(-50%,-50%) rotate(0deg) translateX(200px) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn) translateX(200px) rotate(-1turn)}}@keyframes meshShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#ff6aff,#72d3dc);background:linear-gradient(135deg,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text}.gradient-text-gaming{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#72d3dc,#a855f7);background:linear-gradient(135deg,var(--secondary),var(--purple-accent));-webkit-background-clip:text;background-clip:text}.glass-card{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffffb8;background:var(--bg-glass);border:1px solid #e8ddf0;border:1px solid var(--border-color);border-radius:24px;border-radius:var(--radius-lg);box-shadow:0 4px 24px #00000014,0 1px 4px #0000000a;box-shadow:var(--shadow-card)}.neon-btn-primary{background:linear-gradient(135deg,#ff6aff,#ff8ad8);background:var(--btn-primary-bg);border:none;border-radius:18px;border-radius:var(--radius-md);box-shadow:0 4px 16px #ff6aff73;box-shadow:var(--btn-primary-shadow);color:#fff;color:var(--btn-primary-text);cursor:pointer;font-size:.95rem;font-weight:700;letter-spacing:.3px;padding:12px 28px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.neon-btn-primary:hover{box-shadow:0 8px 30px #72d3dc99;transform:translateY(-3px) scale(1.02)}.neon-btn-primary:active{transform:translateY(-1px) scale(.99)}.neon-btn-secondary{background:#ff6aff1f;background:var(--btn-secondary-bg);border:1.5px solid #ff6aff;border:1.5px solid var(--btn-secondary-border);border-radius:18px;border-radius:var(--radius-md);color:#ff6aff;color:var(--btn-secondary-text);cursor:pointer;font-size:.95rem;font-weight:600;padding:11px 26px;transition:all .3s ease}.neon-btn-secondary:hover{background:#72d3dc33;box-shadow:0 0 12px #72d3dc59;box-shadow:var(--glow-cyan-sm);transform:translateY(-2px)}.pulse-heart{animation:heartPulse 1.5s infinite;color:#ff6aff;color:var(--primary)}*{scrollbar-color:#ff6aff4d #0000;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:thin}::-webkit-scrollbar{height:5px;width:5px}::-webkit-scrollbar-track{background:#0000;background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:#ff6aff4d;background:var(--scrollbar-thumb);border-radius:99px}.video-call-container{background:#050810;bottom:0;color:#fff;display:flex;flex-direction:column;height:100vh;height:100dvh;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:9999}.video-call-container:before{background:radial-gradient(ellipse 70% 60% at 20% 0,#ff6aff0f 0,#0000 60%),radial-gradient(ellipse 70% 60% at 80% 100%,rgba(var(--primary-rgb),.05) 0,#0000 60%);content:"";inset:0;pointer-events:none;position:absolute;z-index:0}.video-call-header{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0a0e1ecc;border-bottom:1px solid rgba(var(--primary-rgb),.1);display:flex;flex-shrink:0;justify-content:space-between;padding:14px 20px;position:relative;z-index:10}.video-call-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#d4819b,#e29578);-webkit-background-clip:text;background-clip:text;font-size:1.1rem;margin:0}.connection-status,.video-call-header h2{font-family:Outfit,sans-serif;font-weight:700}.connection-status{border-radius:999px;font-size:.78rem;letter-spacing:.03em;padding:5px 14px;text-transform:capitalize}.connection-status.connected{background:#57f28726;border:1px solid #57f28759;box-shadow:0 0 10px #57f28740;color:#57f287}.connection-status.calling,.connection-status.connecting,.connection-status.waiting{animation:statusPulse 1.5s ease-in-out infinite;background:#ffcc661f;border:1px solid #ffcc664d;color:#fc6}.connection-status.disconnected,.connection-status.error{background:#ff5d731f;border:1px solid #ff5d734d;color:#ff5d73}.connection-status.initializing,.connection-status.setting-up{background:rgba(var(--primary-rgb),.1);border:1px solid rgba(var(--primary-rgb),.25);color:#e29578}.video-grid{grid-gap:12px;display:grid;flex:1 1;gap:12px;grid-template-columns:1fr 1fr;max-height:calc(100vh - 180px);padding:16px;z-index:1}.video-container,.video-grid{overflow:hidden;position:relative}.video-container{background:#0d1526;border:1px solid #ffffff0f;border-radius:20px;box-shadow:0 8px 32px #00000080;min-height:200px;transition:box-shadow .3s ease}.video-container.active-speaker{border-color:rgba(var(--primary-rgb),.4);box-shadow:0 8px 32px #00000080,0 0 0 2px rgba(var(--primary-rgb),.3)}.video-container video{display:block;height:100%;object-fit:cover;width:100%}.video-label{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000a6;border:1px solid #ffffff1a;border-radius:999px;bottom:14px;color:#fff;font-family:Outfit,sans-serif;font-size:.8rem;font-weight:600;left:14px;letter-spacing:.02em;padding:5px 12px;position:absolute}.video-placeholder{align-items:center;background:linear-gradient(160deg,#0d1526,#080e1e);border-radius:inherit;color:#4a5568;display:flex;flex-direction:column;inset:0;justify-content:center;position:absolute}.black-screen{background:#050810!important}.video-placeholder.black-screen{background:#050810;color:#2d3748}.video-placeholder.black-screen .placeholder-content{color:#4a5568}.placeholder-content{color:#ffffff4d;text-align:center}.placeholder-content .placeholder-icon{display:block;font-size:3rem;margin-bottom:12px;opacity:.5}.placeholder-content p{font-family:Outfit,sans-serif;font-size:.9rem}.video-controls{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#0a0e1ed9;border-top:1px solid #ffffff0f;flex-shrink:0;flex-wrap:wrap;gap:14px;padding:16px 20px;position:relative;z-index:10}.control-btn,.video-controls{align-items:center;display:flex;justify-content:center}.control-btn{border:none;border-radius:999px;cursor:pointer;font-family:Outfit,sans-serif;font-size:.88rem;font-weight:700;gap:8px;letter-spacing:.02em;padding:13px 22px;transition:all .25s cubic-bezier(.175,.885,.32,1.275);white-space:nowrap}.control-btn.active{background:#57f2871f;border:1.5px solid #57f2874d;color:#57f287}.control-btn.active:hover{background:#57f28733;box-shadow:0 4px 16px #57f2874d;transform:translateY(-2px)}.control-btn.disabled{background:#4f545c4d;border:1.5px solid #ffffff1a;color:#ffffff80}.control-btn.disabled:hover{background:#4f545c66;transform:translateY(-1px)}.control-btn.end-call{background:linear-gradient(135deg,#ff3b5c,#ff6060);box-shadow:0 4px 16px #ff3b5c66;color:#fff;padding:13px 28px}.control-btn.end-call:hover{box-shadow:0 8px 28px #ff3b5c99;transform:translateY(-3px) scale(1.04)}.loading{align-items:center;background:#050810;color:#ffffffb3;display:flex;flex-direction:column;gap:20px;height:100vh;height:100dvh;inset:0;justify-content:center;position:fixed;z-index:9999}.loading p{color:#fff9;font-family:Outfit,sans-serif;font-size:1rem}.spinner{animation:spin .9s linear infinite;border:3px solid rgba(var(--primary-rgb),.15);border-radius:50%;border-top:3px solid #d4819b;height:48px;width:48px}.error-message{align-items:center;background:#050810;color:#fff;display:flex;flex-direction:column;gap:16px;height:100vh;height:100dvh;inset:0;justify-content:center;padding:32px 24px;position:fixed;text-align:center;z-index:9999}.error-message h3{color:#ffffffe6;font-family:Outfit,sans-serif;font-size:1.4rem;margin:0}.error-message p{color:#ff5d73d9;font-size:.9rem;line-height:1.6;margin:0;max-width:400px}.error-message button{background:linear-gradient(135deg,#d4819b,#e598ae);border:none;border-radius:999px;box-shadow:0 4px 16px rgba(var(--primary-rgb),.45);color:#fff;cursor:pointer;font-family:Outfit,sans-serif;font-size:.95rem;font-weight:700;padding:12px 28px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.error-message button:hover{box-shadow:0 8px 28px rgba(var(--primary-rgb),.6);transform:translateY(-2px) scale(1.03)}@media (max-width:768px){.video-grid{gap:8px;grid-template-columns:1fr;grid-template-rows:1fr 1fr;max-height:calc(100dvh - 160px);padding:10px}.video-container{border-radius:14px;min-height:160px}.video-controls{gap:10px;padding:12px 16px}.control-btn{font-size:.8rem;padding:11px 16px}.control-btn.end-call{padding:11px 20px}.video-call-header{padding:12px 14px}.video-call-header h2{font-size:.95rem}}@media (max-width:480px){.control-btn span{display:none}.control-btn{border-radius:50%;height:48px;padding:12px;width:48px}.control-btn.end-call{border-radius:50%;height:56px;padding:12px;width:56px}.video-controls{gap:12px}}body.videocall-page-active .navbar{display:none!important}.split-layout-desktop{background:var(--bg-main);display:flex;height:calc(100vh - 70px);overflow:hidden;width:100vw}body.game-page-active .split-layout-desktop{height:100vh}.split-main-desktop{height:100%;overflow-y:auto;position:relative;transition:width .1s ease}.split-divider{background:var(--border-color);cursor:col-resize;height:100%;transition:background .2s ease;width:6px;z-index:10}.split-divider:active,.split-divider:hover{background:var(--primary)}.split-side-desktop{background:var(--bg-main);border-left:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;transition:width .1s ease}.split-layout-mobile{height:calc(100vh - 70px);overflow:hidden;position:relative;width:100vw}body.game-page-active .split-layout-mobile{height:100vh}.split-main-mobile{height:100%;overflow-y:auto;padding-bottom:60px}.chat-drawer{background:var(--bg-main);border-top-left-radius:24px;border-top-right-radius:24px;bottom:0;box-shadow:0 -4px 20px #00000026;display:flex;flex-direction:column;left:0;position:fixed;transition:height .3s cubic-bezier(.175,.885,.32,1.275);width:100vw;will-change:height;z-index:100}.chat-drawer.state-collapsed{height:60px}.chat-drawer.state-half{height:50vh}.chat-drawer.state-full{height:85vh}.drawer-handle-area{align-items:center;border-bottom:1px solid var(--border-color);cursor:grab;display:flex;flex-direction:column;padding:12px 0 16px;touch-action:none}.drawer-handle-area:active{cursor:grabbing}.drawer-handle{background:var(--text-muted);border-radius:4px;height:5px;margin-bottom:8px;opacity:.5;width:40px}.drawer-header-compact{align-items:center;color:var(--text-primary);display:flex;font-family:Outfit,sans-serif;font-weight:600;gap:8px}.drawer-online-dot{background:#57f287;background:var(--online-dot,#57f287);border-radius:50%;box-shadow:0 0 4px #57f28799;height:8px;transition:background-color .3s ease,box-shadow .3s ease;width:8px}.drawer-online-dot.offline{background:#999;background:var(--text-muted,#999);box-shadow:none}.drawer-unread-badge{background:#ff6aff;background:var(--btn-primary-bg,#ff6aff);border-radius:20px;box-shadow:0 2px 8px rgba(var(--primary-rgb),.4);color:#fff;font-size:.75rem;font-weight:700;margin-left:8px;padding:2px 8px}.chat-panel,.drawer-content{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.compact-chat-container{background:var(--bg-main);display:flex;flex:1 1;flex-direction:column;height:100%;min-height:0}.compact-chat-header{align-items:center;background:var(--bg-card);border-bottom:1px solid var(--border-color);display:flex;gap:12px;padding:16px}.compact-avatar{align-items:center;background:var(--btn-primary-bg);border-radius:50%;color:#fff;display:flex;font-family:Outfit,sans-serif;font-weight:700;height:36px;justify-content:center;position:relative;width:36px}.online-dot-small{background:#57f287;background:var(--online-dot,#57f287);border:2px solid var(--bg-card);border-radius:50%;bottom:0;height:10px;position:absolute;right:0;width:10px}.compact-header-info{display:flex;flex-direction:column}.compact-name{font-family:Outfit,sans-serif;font-size:.95rem;font-weight:600;line-height:1.2}.compact-status{color:var(--text-muted);font-size:.75rem}.compact-status.online{color:#57f287;color:var(--online-dot,#57f287)}.compact-messages{display:flex;flex:1 1;flex-direction:column;min-height:0;overflow-y:auto;padding:16px;position:relative}.compact-chat-container .message-bubble{font-size:.9rem;padding:10px 14px}.compact-chat-container .message-time{font-size:.65rem}.compact-chat-form{background:var(--bg-card);border-top:1px solid var(--border-color);display:flex;gap:10px;padding:12px 16px}.compact-chat-form input{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-primary);flex:1 1;outline:none;padding:10px 16px}.compact-chat-form button{align-items:center;background:var(--btn-primary-bg);border:none;border-radius:50%;color:#fff;display:flex;font-size:1.1rem;height:42px;justify-content:center;width:42px}.loading-more-small{font-size:.8rem;padding:10px}.loading-more-small,.no-messages-small{color:var(--text-muted);text-align:center}.no-messages-small{margin-bottom:auto;margin-top:auto;padding:20px}.game-page-container{background:var(--bg-main);height:100%;overflow-y:auto;position:relative;width:100%;z-index:1}.games-lobby-container{animation:fadeInUp .4s ease both;margin:0 auto;max-width:960px;min-height:100vh;padding:clamp(20px,4vw,40px) clamp(16px,3vw,24px) 60px}.games-lobby-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.games-lobby-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--secondary),var(--purple-accent));-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:clamp(1.6rem,5vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin:0;text-align:center}.games-lobby-emoji{-webkit-text-fill-color:initial}.games-lobby-subtitle{color:var(--text-muted);font-size:.95rem;margin-bottom:36px;text-align:center}.games-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.game-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);cursor:default;overflow:hidden;padding:clamp(22px,4vw,32px) 20px;position:relative;text-align:center;transition:all .35s cubic-bezier(.175,.885,.32,1.275)}.game-card:before{background:linear-gradient(90deg,var(--secondary),var(--purple-accent));content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}[data-theme=dark] .game-card{background:linear-gradient(160deg,#16213a,#0d1526)}.game-card-available{cursor:pointer}.game-card-available:hover{border-color:rgba(var(--primary-rgb),.5);box-shadow:0 12px 40px rgba(var(--primary-rgb),.2),var(--shadow-lg);transform:translateY(-8px)}.game-card-available:hover:before{opacity:1}.game-card-coming-soon{opacity:.55}.game-card-emoji{display:block;filter:drop-shadow(0 0 10px rgba(var(--primary-rgb),.5));font-size:clamp(2.2rem,5vw,3rem);margin-bottom:12px;transition:filter .3s ease}.game-card-available:hover .game-card-emoji{filter:drop-shadow(0 0 18px rgba(var(--primary-rgb),.8))}.game-card-name{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}.game-card-description{color:var(--text-muted);font-size:.82rem;line-height:1.5;margin:0 0 18px}.game-card-play-btn{background:var(--btn-gaming-bg);border:none;border-radius:var(--radius-md);box-shadow:0 4px 14px rgba(var(--primary-rgb),.4);color:#fff;cursor:pointer;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:700;letter-spacing:.3px;padding:10px 24px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.game-card-play-btn:hover{box-shadow:0 6px 24px rgba(var(--primary-rgb),.65);transform:translateY(-2px) scale(1.05)}.game-card-badge{background:#6f789126;border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-muted);display:inline-block;font-family:Outfit,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;padding:6px 16px}.game-layout{display:flex;flex-direction:column;margin:0 auto;max-width:640px;min-height:100vh;padding:0 16px}.game-layout-header{align-items:center;display:flex;justify-content:space-between;padding:16px 0 12px}.game-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--secondary),var(--purple-accent));-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:-.01em;margin:0;text-align:center}.game-header-spacer{width:70px}.game-leave-btn{align-items:center;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer;display:flex;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:600;gap:6px;padding:8px 14px;transition:all .25s ease}.game-leave-btn:hover{border-color:var(--secondary);box-shadow:var(--glow-cyan-sm);color:var(--secondary)}.game-players-bar{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-card);justify-content:space-between;margin-bottom:16px;padding:12px 16px}.game-player-info,.game-players-bar{align-items:center;display:flex;gap:8px}.game-player-info{border-radius:var(--radius-sm);flex:1 1;min-width:0;padding:6px 12px;transition:all .3s ease}.game-player-info:last-child{justify-content:flex-end}.game-player-info.active-turn{background:rgba(var(--primary-rgb),.12);box-shadow:0 0 0 1.5px rgba(var(--primary-rgb),.4)}.game-player-info.winner{background:#ffd7001f;box-shadow:0 0 0 1.5px #ffd70080}.player-name{color:var(--text-primary);font-family:Outfit,sans-serif;font-size:.82rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-disc{border-radius:50%;box-shadow:inset 0 2px 4px #00000040;flex-shrink:0;height:22px;width:22px}.player-1-disc{background:radial-gradient(circle at 35% 35%,#ff8a8a,#ff3b5c);box-shadow:0 2px 8px #ff3b5c80}.player-2-disc{background:radial-gradient(circle at 35% 35%,#72d3dc,#3da8b5);box-shadow:0 2px 8px rgba(var(--primary-rgb),.5)}.game-status-badge{flex-shrink:0;text-align:center}.status-text{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-muted);font-family:Outfit,sans-serif;font-size:.78rem;font-weight:700;padding:5px 14px;white-space:nowrap}.pulse-status{animation:statusPulse 1.5s ease-in-out infinite;background:rgba(var(--primary-rgb),.15);border-color:rgba(var(--primary-rgb),.4);box-shadow:0 0 12px rgba(var(--primary-rgb),.3);color:var(--secondary)}@keyframes statusPulse{0%,to{box-shadow:0 0 8px rgba(var(--primary-rgb),.3);opacity:1}50%{box-shadow:0 0 20px rgba(var(--primary-rgb),.6);opacity:.7}}.game-content-area{align-items:center;display:flex;flex:1 1;flex-direction:column;justify-content:flex-start;padding:8px 0 32px}.game-banner{animation:bannerSlide .3s ease;border-radius:var(--radius-sm);font-family:Outfit,sans-serif;font-size:.875rem;font-weight:600;margin-bottom:12px;padding:10px 16px;text-align:center;width:100%}@keyframes bannerSlide{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.game-banner-warning{background:#ffcc661f;border:1px solid #ffcc664d;color:var(--warning)}.game-banner-error{background:#ff5d731a;border:1px solid #ff5d7340;color:var(--danger)}.game-waiting-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.game-waiting-state p{color:var(--text-secondary);font-size:1rem;margin-top:20px}.game-waiting-hint{color:var(--text-muted)!important;font-size:.82rem!important;margin-top:8px!important}.game-waiting-spinner{animation:spin .9s linear infinite;border:3px solid rgba(var(--primary-rgb),.2);border-radius:50%;border-top-color:var(--secondary);height:44px;width:44px}.game-waiting-spinner.small{border-width:2px;height:20px;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.game-loading{align-items:center;color:var(--text-muted);display:flex;font-size:1rem;gap:12px;justify-content:center;min-height:60vh}.game-loading:before{animation:spin .9s linear infinite;border:2px solid rgba(var(--primary-rgb),.2);border-radius:50%;border-top-color:var(--secondary);content:"";flex-shrink:0;height:24px;width:24px}.c4-board-wrapper{align-items:center;display:flex;flex-direction:column;max-width:440px;width:100%}.c4-column-indicators{grid-gap:4px;display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:4px;padding:0 2px;width:100%}.c4-column-indicator{align-items:center;border-radius:8px 8px 0 0;cursor:pointer;display:flex;height:38px;justify-content:center;transition:background .2s ease}.c4-indicator-active{background:rgba(var(--primary-rgb),.12)}.c4-preview-disc{animation:previewBounce .6s ease-in-out infinite alternate;aspect-ratio:1;border-radius:50%;opacity:.6;width:70%}@keyframes previewBounce{0%{transform:translateY(0)}to{transform:translateY(5px)}}.c4-board{background:linear-gradient(145deg,#1a237e,#0d47a1);border-radius:var(--radius-md);box-shadow:0 8px 40px #0d47a166,inset 0 1px 0 #ffffff14;padding:8px;width:100%}[data-theme=dark] .c4-board{background:linear-gradient(145deg,#0d1b3e,#0a2060);box-shadow:0 8px 40px #0009,0 0 30px rgba(var(--primary-rgb),.1)}.c4-row{grid-gap:4px;display:grid;gap:4px;grid-template-columns:repeat(7,1fr)}.c4-row:not(:last-child){margin-bottom:4px}.c4-cell{align-items:center;aspect-ratio:1;border-radius:4px;cursor:pointer;display:flex;justify-content:center;transition:background .15s ease}.c4-cell-hover{background:#ffffff14}.c4-cell-hole{align-items:center;background:var(--bg-main);border-radius:50%;box-shadow:inset 0 3px 8px #0000004d,inset 0 -2px 4px #ffffff0d;display:flex;height:85%;justify-content:center;overflow:hidden;position:relative;width:85%}.c4-disc{animation:discDrop .4s cubic-bezier(.4,0,.2,1) forwards;border-radius:50%;box-shadow:inset 0 3px 6px #ffffff59,inset 0 -2px 4px #0003,0 2px 4px #0003;height:90%;width:90%}.c4-disc-player1{background:radial-gradient(circle at 35% 35%,#ff8a8a,#ff3b5c);box-shadow:inset 0 3px 6px #ffffff59,0 2px 8px #ff3b5c80}.c4-disc-player2{background:radial-gradient(circle at 35% 35%,#a5e8f0,#72d3dc);box-shadow:inset 0 3px 6px #ffffff59,0 2px 8px rgba(var(--primary-rgb),.5)}.c4-disc-winning{animation:discDrop .4s cubic-bezier(.4,0,.2,1) forwards,winGlow .8s ease-in-out infinite alternate;z-index:2}@keyframes discDrop{0%{opacity:.7;transform:translateY(-60px);transform:translateY(calc(var(--drop-row, 0)*-100% - 60px))}to{opacity:1;transform:translateY(0)}}@keyframes winGlow{0%{box-shadow:inset 0 3px 6px #ffffff4d,0 0 12px #ffd70080;transform:scale(1)}to{box-shadow:inset 0 3px 6px #ffffff4d,0 0 28px #ffd700e6,0 0 50px #ffd7004d;transform:scale(1.08)}}.game-over-actions{align-items:center;animation:fadeInUp .4s ease;display:flex;flex-direction:column;gap:12px;margin-top:28px;max-width:320px;width:100%}.game-rematch-btn{background:var(--btn-primary-bg);border:none;border-radius:var(--radius-md);box-shadow:var(--btn-primary-shadow);color:#fff;cursor:pointer;font-family:Outfit,sans-serif;font-size:1rem;font-weight:700;letter-spacing:.2px;padding:13px 32px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:100%}.game-rematch-btn:hover{box-shadow:0 8px 30px rgba(var(--primary-rgb),.6);transform:translateY(-2px) scale(1.02)}.game-leave-action-btn{background:#0000;border:1.5px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:600;padding:11px 28px;transition:all .2s ease;width:100%}.game-leave-action-btn:hover{border-color:var(--text-muted);color:var(--text-secondary)}.game-rematch-pending{align-items:center;color:var(--text-muted);display:flex;font-size:.88rem;gap:10px;padding:12px}.game-rematch-request{text-align:center;width:100%}.game-rematch-request p{color:var(--text-secondary);font-family:Outfit,sans-serif;font-weight:600;margin-bottom:12px}.ttt-board-wrapper{align-items:center;display:flex;flex-direction:column;margin-top:20px;max-width:380px;width:100%}.ttt-board{grid-gap:8px;background:var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:grid;gap:8px;grid-template-columns:repeat(3,1fr);padding:8px;width:100%}.ttt-cell{align-items:center;aspect-ratio:1;background:var(--bg-card);border-radius:var(--radius-sm);color:var(--text-primary);display:flex;font-family:Outfit,sans-serif;font-size:4rem;font-weight:700;justify-content:center;transition:all .2s ease;-webkit-user-select:none;user-select:none}.ttt-clickable{cursor:pointer}.ttt-clickable:hover{background:var(--bg-hover);transform:scale(.98)}.ttt-player1{background:linear-gradient(135deg,var(--primary),var(--primary-hover));-webkit-background-clip:text;background-clip:text}.ttt-player1,.ttt-player2{-webkit-text-fill-color:#0000;font-size:3.5rem}.ttt-player2{background:linear-gradient(135deg,var(--secondary),#6aa8ff);-webkit-background-clip:text;background-clip:text}.ttt-winning{animation:tttWinGlow 1s ease-in-out infinite alternate;background:#ffd7001a!important;border:1px solid #ffd70066!important}@keyframes tttWinGlow{0%{box-shadow:inset 0 0 10px #ffd7004d}to{box-shadow:inset 0 0 25px #ffd700b3,0 0 20px #ffd7004d}}.db-board-wrapper{align-items:center;display:flex;flex-direction:column;margin-top:10px;max-width:400px;width:100%}.db-scores{display:flex;gap:12px;justify-content:space-between;margin-bottom:20px;padding:0 20px;width:100%}.db-score{border-radius:var(--radius-md);box-shadow:var(--shadow-md);color:#fff;flex:1 1;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:800;padding:8px 24px;text-align:center}.db-score-p1{background:linear-gradient(135deg,var(--primary-hover),var(--primary))}.db-score-p1,.db-score-p2{box-shadow:0 4px 14px rgba(var(--primary-rgb),.4)}.db-score-p2{background:linear-gradient(135deg,var(--secondary),#6aa8ff)}.db-board{aspect-ratio:1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-card);display:grid;grid-template-columns:repeat(4,12px 1fr) 12px;grid-template-rows:repeat(4,12px 1fr) 12px;padding:24px;width:100%}.db-dot{background:var(--text-secondary);border-radius:50%;height:12px;width:12px}.db-hline,.db-vline{background:var(--bg-secondary);border-radius:6px;transition:background .2s ease}.db-hline{height:12px;margin:0 4px}.db-vline{margin:4px 0;width:12px}.db-clickable{cursor:pointer}.db-clickable:hover{background:rgba(var(--primary-rgb),.3)}.db-drawn{background:var(--text-primary)!important}.db-box{border-radius:4px;margin:4px;transition:background .3s ease}.db-box-p1{background:#ff3b5c66}.db-box-p1,.db-box-p2{animation:dbBoxFill .3s ease-out forwards}.db-box-p2{background:rgba(var(--primary-rgb),.4)}@keyframes dbBoxFill{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.mc-board-wrapper{align-items:center;display:flex;flex-direction:column;margin-top:10px;max-width:420px;width:100%}.mc-board{grid-gap:10px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--bg-glass);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-card);display:grid;gap:10px;grid-template-columns:repeat(4,1fr);padding:16px;width:100%}.mc-card-container{aspect-ratio:3/4;cursor:default;perspective:1000px}.mc-clickable{cursor:pointer}.mc-card{border-radius:var(--radius-sm);height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);width:100%}.mc-clickable:hover .mc-card:not(.mc-flipped){box-shadow:var(--glow-pink-sm);transform:translateY(-4px) rotateY(12deg)}.mc-flipped{transform:rotateY(180deg)}.mc-matched{animation:mcMatchGlow 1s ease-in-out infinite alternate}.mc-card-back,.mc-card-front{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius-sm);display:flex;height:100%;justify-content:center;position:absolute;width:100%}.mc-card-front{background:linear-gradient(135deg,var(--secondary),var(--purple-accent));border:2px solid #ffffff26;box-shadow:0 4px 14px rgba(var(--primary-rgb),.3);color:#fff;font-size:1.6rem;font-weight:800}.mc-card-back{background:var(--bg-card);border:1px solid var(--border-color);font-size:2.2rem;transform:rotateY(180deg)}@keyframes mcMatchGlow{0%{border-color:#57f28766;box-shadow:0 0 8px #57f28766}to{border-color:#57f287cc;box-shadow:0 0 20px #57f287cc,0 0 40px #57f2874d}}@media (max-width:768px){.games-lobby-container{padding:16px 12px 48px}.games-grid{gap:14px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.game-card{border-radius:var(--radius-md);padding:18px 14px}.game-card-emoji{font-size:2.2rem;margin-bottom:8px}.game-card-name{font-size:.95rem}.game-card-description{font-size:.78rem}.game-layout{padding:0 10px}.game-players-bar{padding:10px 12px}.player-name{font-size:.75rem}.player-disc{height:18px;width:18px}.status-text{font-size:.7rem;padding:4px 10px}.c4-board-wrapper{max-width:100%}.c4-board{border-radius:var(--radius-sm);padding:6px}.c4-row{gap:3px}.c4-row:not(:last-child){margin-bottom:3px}.c4-column-indicator{height:30px}.ttt-board-wrapper{max-width:100%;padding:0 10px}.ttt-cell{font-size:3rem}.ttt-player1,.ttt-player2{font-size:2.8rem}.db-board-wrapper{max-width:100%;padding:0 10px}.db-score{font-size:1.1rem;padding:6px 14px}.db-board{padding:14px}.mc-board-wrapper{max-width:100%;padding:0 10px}.mc-board{gap:8px;padding:12px}.mc-card-front{font-size:1.3rem}.mc-card-back{font-size:1.8rem}.game-leave-action-btn,.game-rematch-btn{padding:12px 24px}}@media (max-width:380px){.games-grid{grid-template-columns:repeat(2,1fr)}.game-players-bar{gap:4px}.game-player-info{padding:4px 6px}.ttt-cell{font-size:2.4rem}.mc-board{gap:6px;grid-template-columns:repeat(4,1fr)}}body.game-page-active .navbar{display:none!important}.number-duel-board{color:var(--text-color);display:flex;flex-direction:column;font-family:Inter,sans-serif;gap:1.5rem;margin:0 auto;max-width:800px;width:100%}.playing-container,.setup-container{align-items:center;animation:fadeIn .4s ease-out forwards;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;gap:1.5rem;padding:2rem}.setup-title{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#ff7eb3,#ff758c,#ff7eb3);-webkit-background-clip:text;font-size:2rem;font-weight:700;margin-bottom:.5rem}.mode-selector{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;flex-direction:column;gap:.8rem;padding-bottom:1.5rem;width:100%}.mode-label{font-size:1.1rem;font-weight:600}.mode-toggle{background:#0003;border-radius:30px;display:flex;padding:4px}.mode-btn{background:#0000;border:none;border-radius:26px;color:var(--text-color);cursor:pointer;font-weight:600;padding:.6rem 1.5rem;transition:all .3s ease}.mode-btn.active{background:var(--primary-color);box-shadow:0 4px 12px #ff758c66;color:#fff}.mode-desc{font-size:.9rem;opacity:.8;text-align:center}.secret-input-section{gap:1.5rem}.guess-form,.secret-form,.secret-input-section{align-items:center;display:flex;flex-direction:column;width:100%}.guess-form,.secret-form{gap:1rem;max-width:300px}.guess-form input,.secret-form input{background:#0003;border:2px solid #fff3;border-radius:8px;color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:.5rem;padding:.8rem 1rem;text-align:center;transition:border-color .3s ease;width:100%}.guess-form input:focus,.secret-form input:focus{border-color:var(--primary-color);outline:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.guess-form button,.submit-btn{background:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;padding:.8rem;transition:all .3s ease;width:100%}.guess-form button:disabled,.submit-btn:disabled{background:#fff3;color:#ffffff80;cursor:not-allowed}.guess-form button:not(:disabled):hover,.submit-btn:not(:disabled):hover{box-shadow:0 4px 12px #ff758c66;transform:translateY(-2px)}.error-msg{color:#ff4d4d;font-size:.9rem;font-weight:600}.opponent-status,.waiting-status{background:#ffffff0d;border-radius:8px;padding:1rem;text-align:center;width:100%}.game-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding-bottom:1rem;width:100%}.mode-badge{background:#0000004d;border-radius:6px;font-size:.9rem;font-weight:700;letter-spacing:1px;padding:.4rem .8rem}.my-secret-display span{background:#ffffff1a;border-radius:6px;font-size:1.2rem;font-weight:700;letter-spacing:.2rem;padding:.3rem .6rem}.turn-indicator{border-radius:8px;font-size:1.2rem;font-weight:600;padding:1rem;text-align:center;transition:all .3s ease;width:100%}.turn-indicator.my-turn{background:#2ed57333;border:1px solid #2ed573;color:#2ed573}.turn-indicator.opponent-turn{background:#ffa50233;border:1px solid #ffa502;color:#ffa502}.last-chance-msg{animation:pulse 1.5s infinite;color:#ff4757;font-size:.9rem;margin-top:.5rem}@keyframes pulse{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.duel-arena{display:flex;gap:2rem;width:100%}.opponent-panel,.player-panel{background:#0003;border-radius:12px;display:flex;flex:1 1;flex-direction:column;gap:1rem;padding:1.5rem}.opponent-panel h3,.player-panel h3{border-bottom:1px solid #ffffff1a;font-size:1.1rem;margin:0;padding-bottom:.5rem;text-align:center}.guess-list{display:flex;flex-direction:column;gap:.8rem;max-height:400px;overflow-y:auto;padding-right:.5rem}.guess-list::-webkit-scrollbar{width:6px}.guess-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.guess-item{align-items:center;animation:slideIn .3s ease-out;background:#ffffff0d;border-radius:8px;display:flex;justify-content:space-between;padding:.8rem}@keyframes slideIn{0%{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}.guess-number{font-size:1.3rem;font-weight:700;letter-spacing:.2rem}.feedback-easy{display:flex;gap:.3rem}.feedback-digit{align-items:center;border-radius:6px;display:flex;font-size:1rem;font-weight:700;height:28px;justify-content:center;width:28px}.status-correct{background:#2ed573;color:#1f2a24}.status-position{background:#ffa502;color:#3a2703}.status-none{background:#576574;color:#c8d6e5}.feedback-hard{display:flex;gap:.8rem}.feedback-badge{align-items:center;display:flex;font-weight:600;gap:.4rem}.no-guesses{font-style:italic;opacity:.5;padding:2rem 0;text-align:center}.game-over-banner{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);background:#0006;border:1px solid #fff3;border-radius:12px;padding:1.5rem;text-align:center;width:100%}.game-over-banner h2{color:var(--primary-color);font-size:2rem;margin-bottom:.5rem}.win-text{color:#2ed573}.lose-text,.win-text{font-size:1.2rem;font-weight:700}.lose-text{color:#ff4757}.revealed-secrets{border-top:1px solid #ffffff1a;margin-top:1rem;padding-top:1rem}@media (max-width:768px){.duel-arena{flex-direction:column}}[data-theme=light] .playing-container,[data-theme=light] .setup-container{background:#ffffffe6;border:1px solid #0000001a;box-shadow:0 8px 32px #00000014}[data-theme=light] .mode-selector{border-bottom:1px solid #0000001a}[data-theme=light] .mode-toggle{background:#0000000d}[data-theme=light] .mode-btn{color:var(--text-color)}[data-theme=light] .mode-btn.active{color:#fff}[data-theme=light] .guess-form input,[data-theme=light] .secret-form input{background:#00000008;border:2px solid #0000001a;color:var(--text-color)}[data-theme=light] .guess-form input:focus,[data-theme=light] .secret-form input:focus{background:#fff;border-color:var(--primary-color)}[data-theme=light] .guess-form button:disabled,[data-theme=light] .submit-btn:disabled{background:#0000001a;color:#0000004d}[data-theme=light] .opponent-status,[data-theme=light] .waiting-status{background:#00000008;border:1px solid #0000000d}[data-theme=light] .game-header{border-bottom:1px solid #0000001a}[data-theme=light] .mode-badge,[data-theme=light] .my-secret-display span{background:#0000000d;border:1px solid #0000001a}[data-theme=light] .opponent-panel,[data-theme=light] .player-panel{background:#00000008;border:1px solid #0000000d}[data-theme=light] .opponent-panel h3,[data-theme=light] .player-panel h3{border-bottom:1px solid #0000001a}[data-theme=light] .guess-list::-webkit-scrollbar-thumb{background:#00000026}[data-theme=light] .guess-item{background:#fff;border:1px solid #00000014;box-shadow:0 2px 5px #00000005}[data-theme=light] .game-over-banner{background:#fffffff2;border:1px solid #0000001a;box-shadow:0 10px 25px #00000026}[data-theme=light] .revealed-secrets{border-top:1px solid #0000001a}.quoridor-board-container{align-items:center;animation:fadeIn .4s ease-out forwards;color:var(--text-color);display:flex;flex-direction:column;font-family:Inter,sans-serif;width:100%}.q-setup-panel{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:2rem;text-align:center}.q-mode-toggle{display:flex;gap:1rem;justify-content:center;margin:1.5rem 0}.q-mode-toggle button{background:#0000004d;border:1px solid #fff3;border-radius:8px;color:#fff;cursor:pointer;padding:.8rem 1.5rem;transition:all .2s ease}.q-mode-toggle button.active{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 15px #ff758c66}.q-mode-toggle button:disabled{cursor:not-allowed;opacity:.5}.q-start-btn{background:var(--primary-color);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:700;margin-top:1rem;padding:1rem 2rem;transition:all .2s ease}.q-start-btn:hover{box-shadow:0 4px 15px #ff758c80;transform:translateY(-2px)}.q-game-area{align-items:flex-start;display:flex;gap:2rem;justify-content:center;width:100%}.q-player-info{background:#0000004d;border-radius:12px;min-width:200px;padding:1.5rem;text-align:center}.q-player-info.p1 h3{color:#ff7eb3}.q-player-info.p2 h3{color:#4facfe}.q-target{font-size:.85rem;margin-top:.5rem;opacity:.7}.q-center-column{align-items:center;display:flex;flex-direction:column;gap:1rem}.q-turn-indicator{background:#ffffff1a;border-radius:20px;font-size:1.1rem;font-weight:700;padding:.8rem 2rem;transition:all .3s ease}.q-turn-indicator.my-turn{background:var(--primary-color);box-shadow:0 0 15px #ff758c80;color:#fff}.q-wall-controls{align-items:center;background:#0000004d;border-radius:8px;display:flex;gap:1rem;padding:.5rem 1rem}.q-wall-controls button{background:#0000;border:1px solid #ffffff4d;border-radius:4px;color:#fff;cursor:pointer;padding:.4rem .8rem;transition:all .2s}.q-wall-controls button.active{background:#fff;color:#000}.q-board{background:#ffffff08;border:2px solid #ffffff1a;border-radius:8px;box-shadow:0 10px 30px #00000080;height:440px;overflow:hidden;position:relative;width:440px}.q-cell{align-items:center;background:#ffffff1a;border-radius:6px;display:flex;height:40px;justify-content:center;position:absolute;transition:all .2s ease;width:40px}.q-cell.valid-move{background:#2ed5734d;box-shadow:inset 0 0 10px #2ed57380;cursor:pointer}.q-cell.valid-move:hover{background:#2ed57399}.q-pawn{border-radius:50%;box-shadow:0 2px 5px #00000080;height:24px;position:absolute;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:24px}.q-pawn.p1{background:linear-gradient(135deg,#ff7eb3,#ff758c);z-index:10}.q-pawn.p2{background:linear-gradient(135deg,#4facfe,#00f2fe);z-index:11}.q-cell .q-pawn.p1:first-child{transform:translate(-2px,-2px)}.q-cell .q-pawn.p2:nth-child(2){transform:translate(2px,2px)}.q-wall-slot{cursor:pointer;position:absolute;z-index:5}.q-wall-slot.occupied{cursor:not-allowed}.q-wall{border-radius:4px;position:absolute;transition:all .2s ease}.q-wall.placed{background:#fff;box-shadow:0 0 8px #fffc;z-index:6}.q-wall.placed.p1{background:#ff7eb3;box-shadow:0 0 8px #ff7eb3}.q-wall.placed.p2{background:#4facfe;box-shadow:0 0 8px #4facfe}.q-wall.preview{background:#ffffff80;border-radius:4px;height:100%;width:100%;z-index:4}.q-wall-slot:not(.occupied):hover .q-wall.preview{background:#fffc}.q-winner-banner{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);background:#0009;border:1px solid var(--primary-color);border-radius:12px;padding:1.5rem 3rem;text-align:center}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width:900px){.q-game-area{align-items:center;flex-direction:column}.q-player-info{max-width:440px;width:100%}}[data-theme=light] .q-player-info,[data-theme=light] .q-turn-indicator{background:#0000000d;border:1px solid #0000001a}[data-theme=light] .q-turn-indicator{color:var(--text-color)}[data-theme=light] .q-turn-indicator.my-turn{background:var(--primary-color);color:#fff}[data-theme=light] .q-wall-controls{background:#0000000d;border:1px solid #0000001a}[data-theme=light] .q-wall-controls button{border:1px solid #0003;color:var(--text-color)}[data-theme=light] .q-wall-controls button.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}[data-theme=light] .q-board{background:#00000005;border:2px solid #0000001a;box-shadow:0 10px 30px #0000001a}[data-theme=light] .q-cell{background:#0000000a}[data-theme=light] .q-cell.valid-move{background:#2ed57333}[data-theme=light] .q-wall.placed{background:#333;box-shadow:0 0 4px #0000004d}[data-theme=light] .q-wall.placed.p1{background:#ff7eb3;box-shadow:0 0 6px #ff7eb399}[data-theme=light] .q-wall.placed.p2{background:#4facfe;box-shadow:0 0 6px #4facfe99}[data-theme=light] .q-wall.preview{background:#0003}[data-theme=light] .q-wall-slot:not(.occupied):hover .q-wall.preview{background:#0006}[data-theme=light] .q-winner-banner{background:#fffffff2;border:1px solid #0000001a;box-shadow:0 10px 25px #00000026}.sb-board-container{align-items:center;animation:fadeIn .4s ease-out forwards;color:var(--text-color);display:flex;flex-direction:column;font-family:Inter,sans-serif;width:100%}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sb-message-banner{background:#0006;border:1px solid var(--primary-color);border-radius:8px;font-size:1.1rem;font-weight:700;margin-bottom:1.5rem;padding:.8rem 2rem;text-align:center}.sb-setup-phase{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;max-width:800px;padding:2rem;width:100%}.sb-setup-phase h2{margin-bottom:1.5rem;text-align:center}.sb-setup-content{align-items:flex-start;display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.sb-fleet-selector{gap:1rem;min-width:250px}.sb-fleet-selector,.sb-ship-list{display:flex;flex-direction:column}.sb-ship-list{gap:.5rem}.sb-ship-btn{background:#0003;border:1px solid #ffffff1a;border-radius:8px;color:#fff;cursor:pointer;font-weight:700;padding:.8rem;text-align:left;transition:all .2s}.sb-ship-btn:hover{background:#ffffff1a}.sb-ship-btn.active{background:var(--primary-color);border-color:var(--primary-color)}.sb-ship-btn.placed{opacity:.5}.sb-controls{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.sb-toggle-btn{background:#0000;border:1px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;padding:.8rem}.sb-commit-btn{background:#2ed573;border:none;border-radius:8px;color:#000;cursor:pointer;font-size:1.1rem;font-weight:700;padding:1rem;transition:all .2s}.sb-commit-btn:disabled{background:#ffffff1a;color:#ffffff4d;cursor:not-allowed}.sb-waiting-msg{align-items:center;display:flex;flex-direction:column;gap:1rem;padding:2rem}.sb-grid-wrapper{background:#0000004d;border:2px solid #ffffff1a;border-radius:8px;padding:1rem}.sb-grid{grid-gap:2px;display:grid;gap:2px;grid-template-columns:repeat(10,30px);grid-template-rows:repeat(10,30px)}.sb-cell{align-items:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:2px;display:flex;height:30px;justify-content:center;position:relative;transition:all .2s;width:30px}.setup-cell.placed{background:#fff6}.setup-cell.preview-valid{background:#2ed57399}.setup-cell.preview-invalid{background:#ff475799}.my-ship{background:#fff3;border-color:#fff6}.sunk-ship-revealed{background:#ff475733;border-color:#ff4757}.attack-cell.targetable{cursor:crosshair}.attack-cell.targetable:hover{background:#fff3}.marker-hit{animation:pulseHit .5s cubic-bezier(.175,.885,.32,1.275);font-size:1.2rem}.marker-miss{animation:dropMiss .5s ease-out;font-size:1.2rem}@keyframes pulseHit{0%{opacity:0;transform:scale(.5)}50%{transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes dropMiss{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.sb-playing-phase{display:flex;gap:2rem;justify-content:center;width:100%}.sb-board-section,.stacked-layout{align-items:center;flex-direction:column}.sb-board-section{background:#0003;border:1px solid #ffffff1a;border-radius:12px;display:flex;padding:1.5rem}.sb-board-section h3{font-size:1.2rem;margin-bottom:1rem}.active-turn-text{color:#2ed573;text-shadow:0 0 10px #2ed57380}.personal-section{opacity:.8;transform:scale(.9)}[data-theme=light] .sb-setup-phase{background:#ffffffe6;border:1px solid #0000001a;box-shadow:0 8px 32px #00000014}[data-theme=light] .sb-ship-btn{background:#0000000d;border:1px solid #0000001a;color:var(--text-color)}[data-theme=light] .sb-ship-btn.active{background:var(--primary-color);color:#fff}[data-theme=light] .sb-toggle-btn{border:1px solid #0003;color:var(--text-color)}[data-theme=light] .sb-grid-wrapper{background:#00000005;border:1px solid #0000001a}[data-theme=light] .sb-cell{background:#0000000d;border:1px solid #0000001a}[data-theme=light] .setup-cell.placed{background:#0000004d}[data-theme=light] .setup-cell.preview-valid{background:#2ed57366}[data-theme=light] .setup-cell.preview-invalid{background:#ff475766}[data-theme=light] .sb-board-section{background:#00000008;border:1px solid #0000001a}[data-theme=light] .my-ship{background:#00000026;border-color:#0000004d}[data-theme=light] .sb-message-banner{background:#fffffff2;border:1px solid var(--primary-color);box-shadow:0 4px 12px #0000001a;color:var(--text-color)}@media (max-width:480px){.sb-grid{grid-template-columns:repeat(10,25px);grid-template-rows:repeat(10,25px)}.sb-cell{height:25px;width:25px}}
/*# sourceMappingURL=main.3dedebab.css.map*/