body{margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}.App,body{min-height:100vh}.App{display:flex;flex-direction:column}.pi-signin-btn{background:linear-gradient(135deg,#ff6b6b,#ee5a24);border-radius:50px;box-shadow:0 4px 15px #ff6b6b66;font-size:1rem;margin-bottom:1rem;max-width:280px;padding:.875rem 1.5rem;width:auto}.pi-signin-btn:hover:not(:disabled){box-shadow:0 6px 20px #ff6b6b99}.pi-signin-btn:disabled{opacity:.7}.pi-icon{font-size:1.1rem}.sign-out-btn{background:#ffffff1a;border:1px solid #ffffff4d;border-radius:20px;color:#fff;cursor:pointer;font-size:.85rem;padding:.5rem 1rem;transition:all .3s ease}.sign-out-btn:hover{background:#fff3}.leave-game-btn{align-items:center;background:#ff573333;border:1px solid #ff6b4a80;border-radius:20px;color:#ff6b4a;cursor:pointer;display:flex;font-size:.85rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;transition:all .3s ease}.leave-game-btn:hover{background:#ff57334d;box-shadow:0 4px 12px #ff6b4a33;color:#f53;transform:translateY(-1px)}.spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}.error-message{background:#ff00001a;border:1px solid #ff00004d;color:#ff6b6b;font-size:.9rem;padding:.875rem}.status-badge{border-radius:20px;display:inline-block}.status-badge.coming_soon{background:#ffc10733;border:1px solid #ffc1074d;color:#ffc107}.status-badge.available{animation:pulse 2s ease-in-out infinite;background:#4caf5033;border:1px solid #4caf504d;color:#4caf50}.game-header-nav{align-items:center;background:#000c;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:.75rem 1rem}.back-btn{background:#ffffff1a;border:1px solid #ffffff4d;border-radius:20px;color:#fff;cursor:pointer;font-size:.85rem;padding:.5rem 1rem;transition:all .3s ease}.back-btn:hover{background:#fff3}.modal-overlay{background:#000c;z-index:2000}.modal-content{box-shadow:0 20px 60px #00000080;max-width:600px}.modal-header h3{font-size:1.3rem}.modal-close{align-items:center;background:none;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:30px;justify-content:center;padding:0;transition:background .2s ease;width:30px}.modal-close:hover{background:#ffffff1a}.modal-footer{border-top:1px solid #fff3;display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem}.btn-secondary{background:#ffffff1a;border:2px solid #ffffff4d;border-radius:6px;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.btn-secondary:hover:not(:disabled){background:#fff3;border-color:#ffffff80}.btn-secondary:disabled{cursor:not-allowed;opacity:.5}.btn-primary{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ee5a24);border:none;border-radius:6px;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:.75rem 1.5rem;transition:all .2s ease}.btn-primary:hover:not(:disabled){box-shadow:0 4px 15px #ff6b6b66}.btn-primary:disabled{cursor:not-allowed;opacity:.7;transform:none}@media (min-width:768px){.landing-header{padding:1rem 0}.header-content{padding:0 2rem}.landing-header h1{font-size:2.5rem;margin-bottom:.5rem}.tagline{font-size:1.1rem}.landing-main{padding:3rem 0}.hero-section{padding:0 2rem}.hero-content h2{font-size:2rem;margin-bottom:1.5rem}.hero-description{font-size:1.1rem;margin-bottom:3rem;max-width:600px}.features-grid{margin-bottom:3rem}.features-grid,.games-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}.games-preview{margin-top:3rem;padding:0 2rem}.games-preview h3{font-size:1.8rem;margin-bottom:2rem}.stats-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}.app-header .header-content{padding:0 2rem}.main-content{padding:2rem}.section-header{padding:1.25rem}.section-header h3{font-size:1.3rem}.expand-icon{font-size:.9rem}}@media (min-width:1024px){.landing-header h1{font-size:3rem}.tagline{font-size:1.2rem}.landing-main{padding:4rem 0}.hero-content h2{font-size:2.5rem}.hero-description{font-size:1.2rem}.features-grid{gap:2rem;grid-template-columns:repeat(3,1fr);margin-bottom:4rem}.feature{padding:2rem}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature h3{font-size:1.3rem}.feature p{font-size:1rem}.games-grid{gap:2rem;grid-template-columns:repeat(3,1fr)}.games-preview h3{font-size:2rem}.stats-grid{gap:2rem;grid-template-columns:repeat(4,1fr)}.pi-signin-btn{font-size:1.1rem;padding:1rem 2rem}}.orientation-hint{align-items:center;background:#000000e6;bottom:0;color:#fff;display:flex;flex-direction:column;justify-content:center;left:0;padding:2rem;position:fixed;right:0;text-align:center;top:0;z-index:9999}.orientation-content{max-width:400px;position:relative;width:100%}.orientation-hint h3{font-size:1.5rem;margin-bottom:1rem}.orientation-hint p{font-size:1rem;margin-bottom:2rem;opacity:.8}.rotate-icon{animation:rotate 2s ease-in-out infinite;font-size:3rem}@keyframes rotate{0%,to{transform:rotate(0deg)}50%{transform:rotate(90deg)}}.section-header{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;cursor:pointer;justify-content:space-between;margin-bottom:.5rem;padding:1rem;transition:all .3s ease;-webkit-user-select:none;user-select:none}.section-header:hover{background:#ffffff26;transform:translateY(-1px)}.section-header:active{transform:translateY(0)}.section-header h3{color:#fff;font-size:1.2rem;margin:0}.expand-icon{color:#fffc;font-size:.8rem;font-weight:700;transition:transform .3s ease}.expand-icon.expanded{transform:rotate(180deg)}.collapsible-content{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.collapsible-content.expanded{max-height:2000px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.play-games-section p{color:#666;font-size:clamp(.9rem,2.5vw,1.1rem);margin:0;opacity:.8}@media (max-width:768px){.game-header-nav{padding:.5rem}}.character-selection{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin:1.5rem 0}.character-btn{align-items:center;background:#ffffff1a;border:2px solid #fff3;border-radius:12px;color:#fff;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;padding:1.5rem 1rem;position:relative;text-align:center;transition:all .3s ease}.character-btn:hover{background:#ffffff26;border-color:#fff6;box-shadow:0 8px 25px #0003;transform:translateY(-2px)}.character-btn.selected{background:#ffd70033;border-color:gold;box-shadow:0 0 20px #ffd7004d}.character-btn.selected:hover{background:#ffd7004d;border-color:#ffed4e}.character-avatar{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:50%;display:flex;font-size:3rem;height:80px;justify-content:center;margin-bottom:.5rem;width:80px}.character-name{color:#fff;font-size:1.1rem;font-weight:600;margin-bottom:.25rem}.character-stats{color:#ffffffb3;font-size:.85rem;font-weight:400}@media (max-width:768px){.character-selection{gap:.75rem;grid-template-columns:1fr}.character-btn{flex-direction:row;gap:1rem;padding:1rem;text-align:left}.character-avatar{flex-shrink:0;font-size:2rem;height:60px;width:60px}.character-name{font-size:1rem;margin-bottom:.25rem}.character-stats{font-size:.8rem}}.app-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-bottom:1px solid #fff3;padding:.75rem 0}.app-header .header-content{align-items:center;display:flex;flex-direction:column;gap:.75rem;margin:0 auto;max-width:1200px;padding:0 1rem;text-align:center}.app-header h1{color:#fff;font-size:clamp(1.25rem,5vw,1.5rem);font-weight:700;margin:0;width:100%}.user-info{flex-direction:column;width:100%}.user-info .welcome-text{color:#ffffffe6;font-size:clamp(.85rem,2.5vw,.95rem);font-weight:500}.user-info .header-buttons{align-items:center;display:flex;gap:.75rem;justify-content:center}.user-info .floating-mute-button{margin:0;position:static!important;right:auto;top:auto}.main-content{flex:1 1;margin:0 auto;max-width:1200px;padding:1.5rem 1rem;width:100%}.welcome-section{margin-bottom:2rem}.welcome-section h2{color:#fff;font-size:1.4rem;margin-bottom:1rem;text-align:center}.new-user-banner{background:#4caf501a;border:1px solid #4caf504d;border-radius:8px;margin-bottom:1.5rem;padding:1rem}.new-user-banner p{color:#4caf50;font-size:.9rem;margin:0;text-align:center}.games-section,.stats-section{margin-bottom:1.5rem}.games-section h3,.stats-section h3{margin:0}.stats-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;padding:1.5rem;text-align:center;transition:transform .3s ease}.stat-number{color:#fff;font-size:1.8rem;margin-bottom:.5rem}.stat-label{color:#fffc;font-size:.9rem}.play-games-section{margin:clamp(2rem,5vw,3rem) 0;text-align:center}.play-games-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;box-shadow:0 8px 25px #667eea4d;color:#fff;cursor:pointer;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;letter-spacing:1px;margin-bottom:clamp(.5rem,2vw,1rem);padding:clamp(1rem,3vw,1.5rem) clamp(2rem,6vw,3rem);text-transform:uppercase;transition:all .3s ease}.play-games-btn:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190);box-shadow:0 12px 35px #667eea66;transform:translateY(-3px)}.play-games-btn:active{box-shadow:0 6px 20px #667eea4d;transform:translateY(-1px)}.social-section{margin-bottom:2rem}@media (min-width:768px){.app-header .header-content{padding:0 2rem}.main-content{padding:2rem}.stats-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.stats-grid{gap:2rem;grid-template-columns:repeat(4,1fr)}}.block-confirm-overlay{align-items:center;background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.block-confirm-dialog{background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);border:1px solid #ffffff1a;border-radius:1rem;box-shadow:0 20px 40px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;padding:2rem;width:100%}.dialog-header{margin-bottom:1.5rem;text-align:center}.dialog-header h3{color:#ff6b6b;font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.user-info{color:#94a3b8;font-family:monospace;font-size:.875rem;margin:0}.warning-message{color:#fff;line-height:1.6}.main-warning{color:#fbbf24;font-size:1.1rem;margin-bottom:1.5rem;text-align:center}.friend-warning{background:#ef44441a;border:1px solid #ef44444d;border-radius:.5rem;margin-bottom:1rem;padding:1rem}.friend-warning h4{color:#fca5a5;font-size:1rem;margin:0 0 .75rem}.blocking-effects{background:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:.5rem;margin-bottom:1rem;padding:1rem}.blocking-effects h4{color:#fbbf24;font-size:1rem;margin:0 0 .75rem}.privacy-notice{background:#3b82f61a;border:1px solid #3b82f64d;border-radius:.5rem;margin-bottom:1.5rem;padding:1rem}.privacy-notice h4{color:#93c5fd;font-size:1rem;margin:0 0 .75rem}.warning-message ul{margin:.5rem 0;padding-left:1.5rem}.warning-message li{margin-bottom:.25rem}.reason-input{margin-bottom:1.5rem}.reason-input label{color:#e2e8f0;display:block;font-weight:600;margin-bottom:.5rem}.reason-input input{background:#ffffff0d;border:1px solid #fff3;border-radius:.5rem;color:#fff;font-size:.875rem;padding:.75rem;transition:border-color .2s ease;width:100%}.reason-input input:focus{border-color:#3b82f680;box-shadow:0 0 0 3px #3b82f61a;outline:none}.reason-input input::placeholder{color:#64748b}.reason-input input:disabled{cursor:not-allowed;opacity:.6}.dialog-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem}.cancel-button{border:1px solid #ffffff4d;border-radius:.5rem;font-weight:600;padding:.75rem 1.5rem}.cancel-button:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff80}.cancel-button:disabled{opacity:.6}.block-button{border:none;border-radius:.5rem;cursor:pointer;font-weight:700;min-width:120px;padding:.75rem 1.5rem;transition:all .2s ease}.block-button.danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.block-button.danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef44444d;transform:translateY(-1px)}.block-button:disabled{cursor:not-allowed;opacity:.6;transform:none}@media (max-width:640px){.block-confirm-dialog{margin:1rem;padding:1.5rem}.dialog-header h3{font-size:1.25rem}.dialog-actions{flex-direction:column}.block-button,.cancel-button{width:100%}.blocking-effects,.friend-warning,.privacy-notice{padding:.75rem}}.user-avatar{overflow:hidden;position:relative}.user-avatar.avatar-clickable:hover{opacity:.8;transform:scale(1.05);transition:all .2s ease}.avatar-small{height:32px;width:32px}.avatar-medium{height:40px;width:40px}.avatar-large{height:60px;width:60px}.avatar-initial{color:#fff;font-weight:700;-webkit-user-select:none;user-select:none}.avatar-small .avatar-initial{font-size:14px}.avatar-medium .avatar-initial{font-size:16px}.avatar-large .avatar-initial{font-size:24px}.avatar-loading{opacity:.7}.friends-view{background:#fff;border-radius:clamp(.5rem,1.5vw,.75rem);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.friends-header{border-bottom:1px solid #eee;padding:clamp(1rem,3vw,1.5rem)}.friends-header h2{color:#333;font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;margin:0 0 clamp(.75rem,2vw,1rem)}.friends-tabs{display:flex;gap:clamp(.5rem,1.5vw,.75rem)}.tab-btn{background:#0000;border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);color:#666;cursor:pointer;flex:1 1;font-size:clamp(.875rem,2vw,.9375rem);font-weight:500;padding:clamp(.5rem,1.5vw,.75rem) clamp(.75rem,2vw,1rem);transition:all .2s ease}.tab-btn:hover{background:#f5f5f5;border-color:#ccc}.tab-btn.active{background:#4a90e2;border-color:#4a90e2;color:#fff}.friends-list{flex:1 1;overflow-y:auto;padding:clamp(.75rem,2vw,1rem)}.empty-state{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,8vw,5rem) clamp(1rem,3vw,2rem)}.empty-state p{color:#999;font-size:clamp(1rem,2.5vw,1.125rem);margin:0 0 clamp(1rem,3vw,1.5rem)}.empty-state button{background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;font-size:clamp(.9375rem,2.25vw,1rem);padding:clamp(.625rem,2vw,.75rem) clamp(1.25rem,3vw,1.5rem);transition:background .2s ease}.empty-state button:hover{background:#3a7bc8}.friend-card{background:#fff;border:1px solid #eee;border-radius:clamp(.5rem,1.5vw,.75rem);display:flex;flex-direction:column;gap:clamp(.75rem,2vw,1rem);margin-bottom:clamp(.5rem,1.5vw,.75rem);padding:clamp(.75rem,2vw,1rem);transition:box-shadow .2s ease}.friend-card:hover{box-shadow:0 clamp(.125rem,.5vw,.25rem) clamp(.5rem,1.5vw,.75rem) #0000001a}.friend-info{gap:clamp(.75rem,2vw,1rem)}.friend-avatar,.friend-info{align-items:center;display:flex}.friend-avatar{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;flex-shrink:0;font-size:clamp(1.125rem,3.5vw,1.375rem);font-weight:600;height:clamp(2.5rem,8vw,3rem);justify-content:center;width:clamp(2.5rem,8vw,3rem)}.friend-details{flex:1 1;min-width:0}.friend-details h4{color:#333;font-size:clamp(.9375rem,2.25vw,1.0625rem);font-weight:600;margin:0 0 clamp(.125rem,.5vw,.25rem)}.friend-details h4,.friend-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-username{color:#999;font-size:clamp(.8125rem,2vw,.875rem)}.status-indicator{flex-shrink:0;font-size:clamp(.75rem,2vw,1rem)}.status-indicator.online{filter:drop-shadow(0 0 clamp(.125rem,.5vw,.25rem) rgba(0,255,0,.5))}.friend-actions{display:flex;gap:clamp(.5rem,1.5vw,.75rem);width:100%}.action-btn{border:none;border-radius:clamp(.375rem,1vw,.5rem);cursor:pointer;flex:1 1;font-size:clamp(.875rem,2vw,.9375rem);font-weight:500;padding:clamp(.5rem,1.5vw,.625rem) clamp(.75rem,2vw,1rem);transition:all .2s ease}.message-btn{background:#4a90e2;color:#fff}.message-btn:hover{background:#3a7bc8}.unfriend-btn{background:#f5f5f5;color:#666}.unfriend-btn:hover{background:#fee;color:#c33}.block-btn{background:#f44;color:#fff}.block-btn:hover{background:#c33}.blocked-user-actions{display:flex;flex-direction:column;gap:.5rem;width:100%}.unblock-btn{background:#10b981;color:#fff}.unblock-btn:hover{background:#059669}.status-label.blocked{color:#ef4444;font-weight:600}.requests-container{flex:1 1;overflow-y:auto;padding:clamp(.75rem,2vw,1rem)}.requests-section{margin-bottom:clamp(1.5rem,4vw,2rem)}.requests-section:last-child{margin-bottom:0}.requests-section h3{color:#333;font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600;margin:0 0 clamp(.75rem,2vw,1rem)}.no-requests{color:#999;font-size:clamp(.875rem,2vw,.9375rem);padding:clamp(1.5rem,4vw,2rem);text-align:center}.request-card{background:#fff;border:1px solid #eee;border-radius:clamp(.5rem,1.5vw,.75rem);justify-content:space-between;margin-bottom:clamp(.5rem,1.5vw,.75rem);padding:clamp(.75rem,2vw,1rem)}.request-card,.request-info{align-items:center;display:flex;gap:clamp(.75rem,2vw,1rem)}.request-info{flex:1 1;min-width:0}.request-avatar{align-items:center;background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:clamp(1.125rem,3.5vw,1.375rem);font-weight:600;height:clamp(2.5rem,8vw,3rem);justify-content:center;width:clamp(2.5rem,8vw,3rem)}.request-details{flex:1 1;min-width:0}.request-details h4{color:#333;font-size:clamp(.9375rem,2.25vw,1rem);font-weight:600;margin:0 0 clamp(.125rem,.5vw,.25rem)}.request-details h4,.request-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-username{color:#999;font-size:clamp(.8125rem,2vw,.875rem)}.request-actions{display:flex;flex-shrink:0;gap:clamp(.375rem,1vw,.5rem)}.accept-btn{background:#4caf50;color:#fff;padding:clamp(.5rem,1.5vw,.625rem) clamp(.75rem,2vw,1rem)}.accept-btn:hover:not(:disabled){background:#45a049}.decline-btn{background:#f44336;color:#fff;padding:clamp(.5rem,1.5vw,.625rem) clamp(.75rem,2vw,1rem)}.decline-btn:hover:not(:disabled){background:#da190b}.action-btn:disabled{cursor:not-allowed;opacity:.5}.pending-label{color:#999;font-size:clamp(.8125rem,2vw,.875rem);font-style:italic}.search-container{display:flex;flex:1 1;flex-direction:column;overflow-y:auto;padding:clamp(.75rem,2vw,1rem)}.search-form{display:flex;gap:clamp(.5rem,1.5vw,.75rem);margin-bottom:clamp(1rem,3vw,1.5rem)}.search-input{border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);flex:1 1;font-size:clamp(.9375rem,2.25vw,1rem);padding:clamp(.625rem,2vw,.75rem) clamp(.75rem,2vw,1rem);transition:border-color .2s ease}.search-input:focus{border-color:#4a90e2;outline:none}.search-btn{background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;font-size:clamp(.9375rem,2.25vw,1rem);padding:clamp(.625rem,2vw,.75rem) clamp(1.25rem,3vw,1.5rem);transition:background .2s ease;white-space:nowrap}.search-btn:hover:not(:disabled){background:#3a7bc8}.search-btn:disabled{cursor:not-allowed;opacity:.5}.search-results{flex:1 1;overflow-y:auto}.loading,.no-results{color:#999;font-size:clamp(.9375rem,2.25vw,1rem);padding:clamp(2rem,5vw,3rem);text-align:center}.user-card{align-items:center;background:#fff;border:1px solid #eee;border-radius:clamp(.5rem,1.5vw,.75rem);display:flex;justify-content:space-between;margin-bottom:clamp(.5rem,1.5vw,.75rem);padding:clamp(.75rem,2vw,1rem)}.user-card,.user-info{gap:clamp(.75rem,2vw,1rem)}.user-info{flex:1 1;min-width:0}.user-avatar{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:clamp(1.125rem,3.5vw,1.375rem);font-weight:600;height:clamp(2.5rem,8vw,3rem);justify-content:center;width:clamp(2.5rem,8vw,3rem)}.user-details{flex:1 1;min-width:0}.user-details h4{color:#333;font-size:clamp(.9375rem,2.25vw,1rem);font-weight:600;margin:0 0 clamp(.125rem,.5vw,.25rem)}.user-details h4,.user-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-username{color:#999;font-size:clamp(.8125rem,2vw,.875rem)}.user-action{flex-shrink:0}.add-friend-btn{background:#4a90e2;padding:clamp(.5rem,1.5vw,.625rem) clamp(.75rem,2vw,1rem)}.add-friend-btn:hover:not(:disabled){background:#3a7bc8}.status-label{background:#f5f5f5;border-radius:clamp(.25rem,.75vw,.375rem);color:#999;font-size:clamp(.8125rem,2vw,.875rem);font-weight:500;padding:clamp(.375rem,1vw,.5rem) clamp(.75rem,2vw,1rem)}.friends-label{background:#e8f5e9;color:#4caf50}@media (max-width:768px){.friends-tabs{flex-direction:column}.tab-btn{width:100%}.friend-card{gap:clamp(.5rem,1.5vw,.75rem)}.friend-actions,.request-actions{flex-direction:column}}@media (max-width:480px){.friend-card,.request-card,.user-card{align-items:stretch;flex-direction:column}.friend-actions,.friend-info,.request-actions,.request-info,.user-action,.user-action .action-btn,.user-info{width:100%}}.direct-messages-view{background:#fff;border-radius:clamp(.5rem,1.5vw,.75rem);display:flex;height:100%;overflow:hidden;width:100%}.conversations-panel{background:#fff;border-right:1px solid #eee;display:flex;flex-direction:column;width:clamp(280px,35%,400px)}.conversations-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:clamp(1rem,3vw,1.5rem)}.conversations-header h2{color:#333;font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;margin:0}.total-unread-badge{align-items:center;background:#f44;border-radius:50%;color:#fff;display:flex;font-size:clamp(.75rem,1.75vw,.875rem);font-weight:700;height:clamp(1.25rem,3vw,1.5rem);justify-content:center;min-width:clamp(1.25rem,3vw,1.5rem);padding:0 clamp(.25rem,.75vw,.375rem)}.conversations-list{flex:1 1;overflow-y:auto}.no-conversations{padding:clamp(2rem,5vw,3rem) clamp(1rem,3vw,1.5rem);text-align:center}.no-conversations p{color:#999;font-size:clamp(.9375rem,2.25vw,1rem);margin:0 0 clamp(.5rem,1.5vw,.75rem)}.no-conversations .hint{color:#bbb;font-size:clamp(.8125rem,2vw,.875rem)}.conversation-item{align-items:center;border-bottom:1px solid #f5f5f5;cursor:pointer;display:flex;gap:clamp(.75rem,2vw,1rem);padding:clamp(.75rem,2vw,1rem);transition:background .2s ease}.conversation-item:hover{background:#f9f9f9}.conversation-item.active{background:#e6f2ff}.conversation-item.unread{background:#f0f7ff}.conversation-item.unread:hover{background:#e6f2ff}.conversation-avatar{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;height:clamp(2.75rem,8vw,3.25rem);justify-content:center;width:clamp(2.75rem,8vw,3.25rem)}.conversation-content{display:flex;flex:1 1;flex-direction:column;gap:clamp(.25rem,.75vw,.375rem);min-width:0}.conversation-header-row{align-items:center;display:flex;gap:clamp(.5rem,1.5vw,.75rem);justify-content:space-between}.conversation-content h4{color:#333;font-size:clamp(.9375rem,2.25vw,1rem);font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-time{color:#999;flex-shrink:0;font-size:clamp(.75rem,1.75vw,.8125rem);white-space:nowrap}.conversation-preview-row{align-items:center;display:flex;gap:clamp(.5rem,1.5vw,.75rem);justify-content:space-between}.conversation-preview{color:#666;flex:1 1;font-size:clamp(.8125rem,2vw,.875rem);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-unread-badge{align-items:center;background:#4a90e2;border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:clamp(.625rem,1.5vw,.75rem);font-weight:700;height:clamp(1rem,2.5vw,1.25rem);justify-content:center;min-width:clamp(1rem,2.5vw,1.25rem);padding:0 clamp(.125rem,.5vw,.25rem)}.chat-panel{background:#fafafa;display:flex;flex:1 1;flex-direction:column}.no-conversation-selected{align-items:center;display:flex;flex:1 1;justify-content:center;padding:clamp(2rem,5vw,3rem);text-align:center}.no-conversation-selected p{color:#999;font-size:clamp(1rem,2.5vw,1.125rem);margin:0}.chat-header{align-items:center;background:#fff;border-bottom:1px solid #eee;display:flex;gap:clamp(.75rem,2vw,1rem);padding:clamp(.75rem,2vw,1rem) clamp(1rem,3vw,1.5rem)}.chat-back-btn{background:#0000;border:none;color:#4a90e2;cursor:pointer;display:none;font-size:clamp(1rem,2.5vw,1.125rem);padding:clamp(.25rem,.75vw,.5rem)}.chat-back-btn:hover{color:#3a7bc8}.chat-header h3{color:#333;flex:1 1;font-size:clamp(1.0625rem,2.75vw,1.25rem);font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.error-message{background:#fee;border-radius:clamp(.375rem,1vw,.5rem);color:#c33;font-size:clamp(.875rem,2vw,.9375rem);margin:clamp(.75rem,2vw,1rem);padding:clamp(.75rem,2vw,1rem)}.messages-container{display:flex;flex:1 1;flex-direction:column;gap:clamp(.5rem,1.5vw,.75rem);overflow-y:auto;padding:clamp(1rem,3vw,1.5rem)}.load-more-btn{align-self:center;background:#f5f5f5;border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);cursor:pointer;font-size:clamp(.875rem,2vw,.9375rem);margin-bottom:clamp(.5rem,1.5vw,.75rem);padding:clamp(.5rem,1.5vw,.625rem) clamp(1rem,3vw,1.25rem);transition:background .2s ease}.load-more-btn:hover:not(:disabled){background:#eee}.load-more-btn:disabled{cursor:not-allowed;opacity:.5}.no-messages{align-items:center;display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,3rem);text-align:center}.no-messages p{color:#999;font-size:clamp(.9375rem,2.25vw,1rem);margin:0 0 clamp(.5rem,1.5vw,.75rem)}.no-messages .hint{color:#bbb;font-size:clamp(.8125rem,2vw,.875rem)}.message-timestamp{color:#999;font-size:clamp(.75rem,1.75vw,.8125rem);margin:clamp(.75rem,2vw,1rem) 0 clamp(.5rem,1.5vw,.75rem);text-align:center}.message{display:flex;margin-bottom:clamp(.375rem,1vw,.5rem)}.message.own{justify-content:flex-end}.message.other{justify-content:flex-start}.message-content{display:flex;flex-direction:column;gap:clamp(.25rem,.75vw,.375rem);max-width:70%}.message.own .message-content{align-items:flex-end}.message.other .message-content{align-items:flex-start}.message-text{word-wrap:break-word;border-radius:clamp(.75rem,2vw,1rem);font-size:clamp(.9375rem,2.25vw,1rem);margin:0;padding:clamp(.625rem,2vw,.75rem) clamp(.75rem,2vw,1rem)}.message.own .message-text{background:#4a90e2;border-bottom-right-radius:clamp(.25rem,.75vw,.375rem);color:#fff}.message.other .message-text{background:#fff;border:1px solid #eee;border-bottom-left-radius:clamp(.25rem,.75vw,.375rem);color:#333}.message-image{border-radius:clamp(.5rem,1.5vw,.75rem);max-height:clamp(200px,40vh,400px);max-width:100%;object-fit:cover}.message-input-form{background:#fff;border-top:1px solid #eee;padding:clamp(.75rem,2vw,1rem)}.image-preview-container{margin-bottom:clamp(.5rem,1.5vw,.75rem);position:relative}.image-preview{border-radius:clamp(.5rem,1.5vw,.75rem);max-height:clamp(150px,30vw,200px);max-width:clamp(150px,30vw,200px);object-fit:cover}.remove-image-btn{background:#0009;font-size:clamp(.875rem,2vw,1rem);height:clamp(1.5rem,4vw,2rem);right:clamp(.25rem,.75vw,.5rem);top:clamp(.25rem,.75vw,.5rem);width:clamp(1.5rem,4vw,2rem)}.remove-image-btn:hover{background:#000c}.input-row{gap:clamp(.5rem,1.5vw,.75rem)}.attach-btn,.input-row{align-items:center;display:flex}.attach-btn{background:#0000;border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);cursor:pointer;flex-shrink:0;font-size:clamp(1.125rem,3vw,1.375rem);height:clamp(2.25rem,6vw,2.75rem);justify-content:center;transition:all .2s ease;width:clamp(2.25rem,6vw,2.75rem)}.attach-btn:hover:not(:disabled){background:#f5f5f5;border-color:#ccc}.attach-btn:disabled{cursor:not-allowed;opacity:.5}.message-input{border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);flex:1 1;font-size:clamp(.9375rem,2.25vw,1rem);padding:clamp(.625rem,2vw,.75rem) clamp(.75rem,2vw,1rem);transition:border-color .2s ease}.message-input:focus{border-color:#4a90e2;outline:none}.message-input:disabled{background:#f5f5f5;cursor:not-allowed}.send-btn{align-items:center;background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:clamp(1rem,2.5vw,1.25rem);height:clamp(2.25rem,6vw,2.75rem);justify-content:center;transition:background .2s ease;width:clamp(2.25rem,6vw,2.75rem)}.send-btn:hover:not(:disabled){background:#3a7bc8}.send-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.direct-messages-view{flex-direction:column}.conversations-panel{border-bottom:1px solid #eee;border-right:none;width:100%}.conversations-panel.hidden-mobile{display:none}.chat-panel{width:100%}.chat-panel.hidden-mobile{display:none}.chat-back-btn{display:block}.message-content{max-width:85%}}@media (max-width:480px){.message-content{max-width:90%}.chat-panel,.conversations-panel{height:50vh}}.message-input-wrapper{align-items:center;display:flex;flex:1 1;position:relative}.char-counter{background:#fff;border-radius:8px;color:#888;font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.char-counter.warning{color:#ff6b6b;font-weight:700}.message-image-error,.message-image-loading{background:#f5f5f5;border-radius:8px;color:#888;font-size:14px;padding:20px;text-align:center}.image-modal-overlay{align-items:center;background:#000000e6;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:2000}.image-modal-container{align-items:center;display:flex;flex-direction:column;max-height:90vh;max-width:90vw;position:relative}.image-modal-close{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:2rem;height:3rem;justify-content:center;position:absolute;right:0;top:-3rem;transition:background .2s ease;width:3rem;z-index:2001}.image-modal-close:hover{background:#ffffff4d}.image-modal-content{align-items:center;display:flex;justify-content:center;max-height:80vh;max-width:100%}.modal-image{border-radius:.5rem;box-shadow:0 20px 40px #0000004d;cursor:default;max-height:80vh;max-width:100%;object-fit:contain}.modal-error,.modal-loading{align-items:center;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:3rem;text-align:center}.modal-loading .loading-spinner{animation:spin 1s linear infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:3rem;margin-bottom:1rem;width:3rem}.modal-error button{background:#ef4444;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-weight:600;margin-top:1rem;padding:.75rem 1.5rem;transition:background .2s ease}.modal-error button:hover{background:#dc2626}.image-modal-info{margin-top:1rem;text-align:center}.image-modal-info p{color:#ffffffb3;font-size:.875rem;margin:0}@media (max-width:768px){.image-modal-overlay{padding:.5rem}.image-modal-container{max-height:95vh;max-width:95vw}.image-modal-close{font-size:1.5rem;height:2.5rem;top:-2.5rem;width:2.5rem}.modal-image{max-height:70vh}.image-modal-content{max-height:75vh}}@media (max-width:1024px) and (min-width:769px){.modal-image{max-height:75vh}}.comments-list{display:flex;flex-direction:column;gap:1rem}.comments-loading{align-items:center;color:#64748b;display:flex;justify-content:center;padding:2rem}.comments-loading .loading-spinner{animation:spin 1s linear infinite;border:2px solid #f3f3f3;border-radius:50%;border-top-color:#4a90e2;height:1.5rem;margin-right:.5rem;width:1.5rem}.no-comments{color:#64748b;font-style:italic;padding:1.5rem;text-align:center}.comment-item{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem}.comment-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.comment-author{align-items:center;display:flex;gap:.75rem}.comment-avatar{align-items:center;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;color:#fff;display:flex;font-size:.875rem;font-weight:700;height:2rem;justify-content:center;width:2rem}.comment-info{display:flex;flex-direction:column;gap:.125rem}.comment-author-name{color:#1a202c;font-size:.875rem;font-weight:600}.comment-timestamp{color:#64748b;font-size:.75rem}.comment-actions{align-items:center;display:flex;gap:.5rem}.reply-btn{background:none;border:none;border-radius:.25rem;color:#64748b;cursor:pointer;font-size:.75rem;padding:.25rem .5rem;transition:all .2s ease}.reply-btn:hover{background:#f1f5f9;color:#4a90e2}.delete-comment-btn,.delete-reply-btn{background:none;border:none;border-radius:.25rem;color:#64748b;cursor:pointer;font-size:.875rem;padding:.25rem;transition:all .2s ease}.delete-comment-btn:hover,.delete-reply-btn:hover{background:#fef2f2;color:#ef4444}.comment-content{margin-left:2.75rem}.comment-content p{color:#374151;font-size:.9375rem;line-height:1.5;margin:0}.comment-replies{border-left:2px solid #e2e8f0;margin-left:2.75rem;margin-top:1rem;padding-left:1rem}.reply-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;margin-bottom:.75rem;padding:.75rem}.reply-header{justify-content:space-between;margin-bottom:.5rem}.reply-author,.reply-header{align-items:center;display:flex}.reply-author{gap:.5rem}.reply-avatar{align-items:center;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:50%;color:#fff;display:flex;font-size:.75rem;font-weight:700;height:1.5rem;justify-content:center;width:1.5rem}.reply-author-name{color:#1a202c;font-size:.8125rem;font-weight:600}.reply-timestamp{color:#64748b;font-size:.6875rem;margin-left:.5rem}.reply-content p{color:#374151;font-size:.875rem;line-height:1.4;margin:0}.reply-form{background:#fff;border:1px solid #e2e8f0;border-radius:.375rem;margin-left:2.75rem;margin-top:.75rem;padding:.75rem}.reply-input{border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;margin-bottom:.75rem;padding:.5rem;width:100%}.reply-input:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e21a;outline:none}.reply-actions{display:flex;gap:.5rem;justify-content:flex-end}.cancel-reply{background:#0000;border:1px solid #d1d5db;border-radius:.25rem;color:#374151;cursor:pointer;font-size:.8125rem;padding:.375rem .75rem;transition:all .2s ease}.cancel-reply:hover{background:#f9fafb}.submit-reply{background:#4a90e2;border:none;border-radius:.25rem;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:600;padding:.375rem .75rem;transition:background .2s ease}.submit-reply:hover:not(:disabled){background:#3a7bc8}.submit-reply:disabled{cursor:not-allowed;opacity:.5}@media (max-width:768px){.comment-header,.reply-header{align-items:flex-start;flex-direction:column;gap:.5rem}.comment-actions{align-self:flex-end}.comment-content,.comment-replies,.reply-form{margin-left:0}.comment-replies{border-left-width:1px;padding-left:.75rem}}.clickable-name{transition:color .2s ease}.clickable-name:hover{color:#4c51bf!important;text-decoration:underline}.post-card{background:#fff;border:1px solid #e2e8f0;border-radius:clamp(.5rem,1.5vw,.75rem);overflow:hidden;transition:box-shadow .2s ease}.post-card:hover{box-shadow:0 4px 12px #0000001a}.post-header{align-items:flex-start;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;padding:clamp(1rem,2.5vw,1.25rem)}.post-author{gap:clamp(.75rem,2vw,1rem)}.author-avatar,.post-author{align-items:center;display:flex}.author-avatar{background:linear-gradient(135deg,#4a90e2,#357abd);border-radius:50%;color:#fff;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;height:clamp(2.5rem,6vw,3rem);justify-content:center;width:clamp(2.5rem,6vw,3rem)}.author-info{display:flex;flex-direction:column;gap:.25rem}.author-name{color:#1a202c;font-size:clamp(.9375rem,2.25vw,1rem);font-weight:600;margin:0}.author-username{color:#64748b;font-family:monospace;font-size:clamp(.8125rem,2vw,.875rem)}.game-badge{background:linear-gradient(135deg,#10b981,#059669);border-radius:.25rem;color:#fff;font-size:clamp(.75rem,1.75vw,.8125rem);font-weight:600;padding:.125rem .375rem}.post-meta{align-items:center;display:flex;gap:.5rem;position:relative}.post-timestamp{color:#64748b;font-size:clamp(.8125rem,2vw,.875rem)}.menu-btn{background:none;border:none;border-radius:.25rem;color:#64748b;cursor:pointer;padding:.25rem;transition:background .2s ease}.menu-btn:hover{background:#f1f5f9}.report-menu{background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;box-shadow:0 4px 12px #00000026;min-width:180px;position:absolute;right:0;top:100%;z-index:10}.report-menu button{background:none;border:none;cursor:pointer;display:block;font-size:.875rem;padding:.75rem;text-align:left;transition:background .2s ease;width:100%}.report-menu button:hover{background:#f8fafc}.report-menu button:last-child{border-top:1px solid #e2e8f0;color:#64748b}.post-content{padding:0 clamp(1rem,2.5vw,1.25rem) clamp(1rem,2.5vw,1.25rem)}.post-text{word-wrap:break-word;color:#1a202c;font-size:clamp(.9375rem,2.25vw,1rem);line-height:1.6;margin:0 0 clamp(.75rem,2vw,1rem);white-space:pre-wrap}.post-images{grid-gap:clamp(.5rem,1.25vw,.75rem);display:grid;gap:clamp(.5rem,1.25vw,.75rem);margin-bottom:clamp(.75rem,2vw,1rem)}.post-images.single{grid-template-columns:1fr}.post-images.multiple{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.post-image{border:1px solid #e2e8f0;border-radius:clamp(.375rem,1vw,.5rem);cursor:pointer;height:250px;object-fit:cover;transition:all .2s ease;width:100%}.post-image:hover{box-shadow:0 4px 12px #00000026;transform:scale(1.02)}.post-image.clickable{cursor:pointer}.post-images.single .post-image{height:300px;margin:0 auto;max-width:500px}.post-images.multiple .post-image{height:200px}.image-error,.image-loading{align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;color:#64748b;display:flex;font-size:.875rem;height:200px;justify-content:center}.image-error{background:#fef2f2;border-color:#fecaca;color:#dc2626}.game-reference{background:#f0f9ff;border:1px solid #bae6fd;border-radius:clamp(.375rem,1vw,.5rem);margin-top:clamp(.75rem,2vw,1rem);padding:clamp(.5rem,1.25vw,.75rem)}.game-link{color:#0369a1;font-size:clamp(.8125rem,2vw,.875rem);font-weight:500}.post-interactions{align-items:center;background:#fafafa;border-top:1px solid #f1f5f9;display:flex;justify-content:space-between;padding:clamp(.75rem,2vw,1rem) clamp(1rem,2.5vw,1.25rem)}.interaction-buttons{display:flex;gap:clamp(1rem,2.5vw,1.5rem)}.interaction-btn{align-items:center;background:#0000;border:1px solid #0000;border-radius:clamp(.25rem,.75vw,.375rem);color:#64748b;cursor:pointer;display:flex;font-size:clamp(.8125rem,2vw,.875rem);font-weight:500;gap:.375rem;padding:clamp(.375rem,1vw,.5rem) clamp(.5rem,1.25vw,.75rem);transition:all .2s ease}.interaction-btn:hover{background:#f1f5f9;border-color:#e2e8f0}.interaction-btn.active{background:#eff6ff;border-color:#bfdbfe;color:#4a90e2}.like-btn.active{color:#2563eb}.smile-btn.active{color:#f59e0b}.comment-btn:hover{color:#10b981}.follow-btn:hover{color:#8b5cf6}.visibility-badge{border-radius:.25rem;font-size:clamp(.75rem,1.75vw,.8125rem);font-weight:500;padding:.25rem .5rem}.visibility-badge.friends{background:#dbeafe;color:#1d4ed8}.visibility-badge.public{background:#d1fae5;color:#065f46}.visibility-badge.followers{background:#e9d5ff;color:#7c3aed}.comments-section{background:#fafafa;border-top:1px solid #f1f5f9;padding:clamp(.75rem,2vw,1rem)}.comment-form{display:flex;gap:clamp(.5rem,1.25vw,.75rem);margin-bottom:clamp(.75rem,2vw,1rem)}.comment-input{border:1px solid #d1d5db;border-radius:clamp(.375rem,1vw,.5rem);flex:1 1;font-size:clamp(.875rem,2vw,.9375rem);padding:clamp(.5rem,1.25vw,.75rem);resize:none}.comment-input:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a;outline:none}.comment-submit{background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;font-weight:600;padding:clamp(.5rem,1.25vw,.75rem) clamp(.75rem,2vw,1rem);transition:background .2s ease}.comment-submit:hover:not(:disabled){background:#3a7bc8}.comment-submit:disabled{cursor:not-allowed;opacity:.5}.comments-placeholder{color:#64748b;font-style:italic;padding:1rem;text-align:center}.edit-form{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;margin-bottom:1rem;padding:1rem}.edit-textarea{border:1px solid #d1d5db;border-radius:.375rem;font-family:inherit;font-size:.9375rem;line-height:1.5;margin-bottom:1rem;padding:.75rem;resize:vertical;width:100%}.edit-textarea:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a;outline:none}.edit-visibility{display:flex;gap:1rem;margin-bottom:1rem}.edit-visibility label{align-items:center;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem}.edit-actions{display:flex;gap:.75rem;justify-content:flex-end}.cancel-edit{background:#0000;border:1px solid #d1d5db;border-radius:.375rem;color:#374151;cursor:pointer;padding:.5rem 1rem;transition:all .2s ease}.cancel-edit:hover{background:#f9fafb;border-color:#9ca3af}.save-edit{background:#4a90e2;border:none;border-radius:.375rem;color:#fff;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:background .2s ease}.save-edit:hover{background:#3a7bc8}@media (max-width:768px){.feed-nav{flex-direction:column;gap:.5rem}.interaction-buttons{gap:.75rem}.interaction-btn{font-size:.8125rem;padding:.375rem .5rem}.post-header{align-items:flex-start;flex-direction:column;gap:.75rem}.post-meta{align-self:flex-end}}.create-post-overlay{align-items:center;background:#0009;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:10000}.create-post-modal{background:#fff;border-radius:1rem;box-shadow:0 20px 40px #00000026;max-height:90vh;max-width:600px;overflow:hidden;width:100%}.modal-header{border-bottom:none;border-top-left-radius:1rem;border-top-right-radius:1rem;padding:1.5rem}.close-btn{background:#ffffff26;border-radius:.375rem;color:#fff;font-size:1.75rem;font-weight:700;line-height:1;padding:.25rem .5rem}.close-btn:hover{background:#ffffff4d;transform:scale(1.05)}.create-post-form{max-height:calc(90vh - 5rem);overflow-y:auto;padding:1.5rem}.content-section{margin-bottom:1.5rem}.post-textarea{border:1px solid #d1d5db;border-radius:.5rem;font-family:inherit;font-size:1rem;line-height:1.5;min-height:120px;padding:1rem;resize:vertical;width:100%}.post-textarea:focus{border-color:#4a90e2;box-shadow:0 0 0 3px #4a90e21a;outline:none}.post-textarea::placeholder{color:#9ca3af}.character-counter{color:#64748b;font-size:.875rem;margin-top:.5rem;text-align:right}.character-counter .warning{color:#ef4444;font-weight:600}.image-section{margin-bottom:1.5rem}.image-upload-area{border:2px dashed #d1d5db;border-radius:.5rem;padding:1rem;text-align:center;transition:border-color .2s ease}.image-upload-area:hover{border-color:#4a90e2}.hidden-file-input{display:none}.image-upload-btn{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;color:#374151;cursor:pointer;font-weight:500;padding:.75rem 1.5rem;transition:all .2s ease}.image-upload-btn:hover:not(:disabled){background:#f1f5f9;border-color:#4a90e2}.image-upload-btn:disabled{cursor:not-allowed;opacity:.5}.image-previews{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-top:1rem}.image-preview{aspect-ratio:1;border-radius:.5rem;overflow:hidden;position:relative}.image-preview img{height:100%;object-fit:cover;width:100%}.remove-image-btn{align-items:center;background:#000000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1rem;height:1.5rem;justify-content:center;position:absolute;right:.25rem;top:.25rem;transition:background .2s ease;width:1.5rem}.remove-image-btn:hover{background:#ef4444cc}.add-more-btn{align-items:center;aspect-ratio:1;background:#f8fafc;border:2px dashed #d1d5db;border-radius:.5rem;color:#64748b;cursor:pointer;display:flex;font-size:2rem;justify-content:center;transition:all .2s ease}.add-more-btn:hover{background:#f0f9ff;border-color:#4a90e2;color:#4a90e2}.visibility-section{margin-bottom:1.5rem}.visibility-section label{color:#374151;display:block;font-weight:600;margin-bottom:.75rem}.visibility-options{display:flex;gap:1rem}.visibility-option{align-items:center;border:1px solid #e2e8f0;border-radius:.5rem;cursor:pointer;display:flex;flex:1 1;gap:.5rem;padding:.75rem;transition:all .2s ease}.visibility-option:hover{background:#f8fafc;border-color:#4a90e2}.visibility-option input[type=radio]{margin:0}.visibility-option span{color:#374151;font-weight:500}.error-message{background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;margin-bottom:1rem;padding:.75rem}.error-message p{color:#dc2626;font-weight:500;margin:0}.modal-actions{border-top:1px solid #e2e8f0;padding-top:1rem}.cancel-btn{background:#0000;border:1px solid #d1d5db;border-radius:.5rem;color:#374151;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .2s ease}.cancel-btn:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af}.cancel-btn:disabled{cursor:not-allowed;opacity:.5}.create-btn{background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-weight:700;min-width:120px;padding:.75rem 1.5rem;transition:all .2s ease}.create-btn:hover:not(:disabled){background:linear-gradient(135deg,#3a7bc8,#2563eb);box-shadow:0 4px 12px #4a90e24d;transform:translateY(-1px)}.create-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}@media (max-width:640px){.create-post-modal{margin:1rem;max-height:85vh}.create-post-form,.modal-header{padding:1rem}.create-post-form{max-height:calc(85vh - 4rem)}.visibility-options{gap:.5rem}.modal-actions,.visibility-options{flex-direction:column}.cancel-btn,.create-btn{width:100%}.image-previews{gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.visibility-option.disabled{cursor:not-allowed;opacity:.5}.visibility-option.disabled input{cursor:not-allowed}.tier-badge-inline{color:#f39c12;font-size:.75rem;font-weight:600;margin-left:.25rem}.tier-hint{background:#fff9e6;border:1px solid #f39c12;border-radius:.5rem;color:#7f8c8d;font-size:.875rem;line-height:1.5;margin-top:.75rem;padding:.75rem}.inline-upgrade-btn{background:linear-gradient(135deg,#3498db,#2980b9);border:none;border-radius:.375rem;color:#fff;cursor:pointer;font-size:.8125rem;font-weight:600;margin-left:.5rem;padding:.25rem .75rem;transition:all .2s ease}.inline-upgrade-btn:hover{box-shadow:0 2px 8px #3498db4d;transform:translateY(-1px)}.tier-modal-overlay{align-items:center;background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;overflow-y:auto;padding:clamp(10px,2vw,20px);position:fixed;right:0;top:0;z-index:1000}.tier-modal-content{background:#fff;border-radius:clamp(12px,2vw,20px);box-shadow:0 10px 40px #0000004d;max-height:90vh;overflow-y:auto;position:relative;width:min(95vw,1200px)}.tier-modal-header{align-items:center;background:#fff;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;padding:clamp(15px,3vw,25px);position:sticky;top:0;z-index:10}.tier-modal-header h2{color:#2c3e50;font-size:clamp(20px,4vw,28px);margin:0}.tier-modal-close{align-items:center;background:none;border:none;border-radius:50%;color:#95a5a6;cursor:pointer;display:flex;font-size:clamp(24px,5vw,32px);height:44px;justify-content:center;padding:0;transition:all .2s ease;width:44px}.tier-modal-close:hover{background:#f0f0f0;color:#2c3e50}.tier-modal-error,.tier-modal-loading{padding:clamp(30px,5vw,60px);text-align:center}.tier-modal-error button{background:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-top:15px;min-height:44px;padding:10px 24px}.tier-cards-container{grid-gap:clamp(15px,3vw,25px);display:grid;gap:clamp(15px,3vw,25px);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));padding:clamp(15px,3vw,25px)}@media (min-width:768px){.tier-cards-container{grid-template-columns:repeat(3,1fr)}}.tier-card{border:2px solid #e0e0e0;border-radius:clamp(10px,2vw,16px);display:flex;flex-direction:column;padding:clamp(15px,3vw,24px)}.tier-card:hover{border-color:#3498db;box-shadow:0 8px 24px #00000026}.tier-card-premium{border-color:#f39c12;border-width:3px}.tier-card-premium:hover{border-color:#e67e22}.tier-card-current{background:#f0fff4;border-color:#27ae60;border-width:3px}.tier-card-ribbon{background:linear-gradient(135deg,#f39c12,#e67e22);box-shadow:0 2px 8px #0003;color:#fff;font-size:clamp(11px,2vw,13px);font-weight:700;letter-spacing:.5px;padding:6px 45px;position:absolute;right:-35px;text-transform:uppercase;top:15px;transform:rotate(45deg)}.tier-card-header h3{color:#2c3e50;font-size:clamp(20px,4vw,24px);margin:0 0 10px}.tier-price{color:#3498db;font-size:clamp(18px,3.5vw,22px);font-weight:700;margin:0 0 8px}.tier-billing{color:#7f8c8d;display:block;font-size:clamp(12px,2.5vw,14px);font-weight:400;margin-top:4px}.tier-description{color:#7f8c8d;font-size:clamp(13px,2.5vw,15px);line-height:1.5;margin:12px 0}.tier-features{flex-grow:1;list-style:none;margin:15px 0 auto;padding:0}.tier-features li{align-items:center;color:#34495e;display:flex;font-size:clamp(13px,2.5vw,15px);gap:8px;padding:clamp(6px,1.5vw,10px) 0}.tier-upgrade-btn{background:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:clamp(14px,3vw,17px);font-weight:700;letter-spacing:.5px;margin-top:20px;min-height:44px;padding:clamp(12px,2.5vw,16px) clamp(16px,3vw,24px);text-transform:uppercase;transition:all .2s ease;width:100%}.tier-upgrade-btn:hover:not(:disabled){background:#2980b9;box-shadow:0 4px 12px #3498db4d;transform:translateY(-2px)}.tier-upgrade-btn:disabled{cursor:not-allowed;opacity:.6}.tier-upgrade-btn-premium{background:linear-gradient(135deg,#f39c12,#e67e22)}.tier-upgrade-btn-premium:hover:not(:disabled){background:linear-gradient(135deg,#e67e22,#d35400)}.tier-card-badge{background:#27ae60;border:none;border-radius:8px;color:#fff;font-size:clamp(14px,3vw,17px);font-weight:700;letter-spacing:.5px;margin-top:20px;padding:clamp(12px,2.5vw,16px);text-align:center;text-transform:uppercase;width:100%}.tier-modal-footer{background:#f8f9fa;border-top:2px solid #f0f0f0;padding:clamp(15px,3vw,20px);text-align:center}.tier-modal-note{color:#7f8c8d;font-size:clamp(12px,2.5vw,14px);line-height:1.5;margin:0}.loading-spinner{border:4px solid #f3f3f3;border-top-color:#3498db;margin:0 auto 15px}@media (max-width:767px){.tier-modal-overlay{align-items:flex-start}.tier-modal-content{margin-bottom:20px;margin-top:20px}.tier-cards-container{grid-template-columns:1fr}.tier-card-ribbon{font-size:10px;padding:5px 40px}}.feed-view{background:#fff;border-radius:clamp(.5rem,1.5vw,.75rem);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.feed-header{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-bottom:1px solid #eee;padding:clamp(1rem,3vw,1.5rem)}.feed-header h2{color:#333;font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;margin:0 0 clamp(.75rem,2vw,1rem)}.feed-nav{display:flex;gap:clamp(.5rem,1.5vw,.75rem)}.feed-nav-btn{background:#0000;border:1px solid #ddd;border-radius:clamp(.375rem,1vw,.5rem);color:#666;cursor:pointer;flex:1 1;font-size:clamp(.875rem,2vw,.9375rem);font-weight:500;padding:clamp(.5rem,1.5vw,.75rem) clamp(.75rem,2vw,1rem);transition:all .2s ease;white-space:nowrap}.feed-nav-btn:hover{background:#f5f5f5;border-color:#ccc}.feed-nav-btn.active{background:#4a90e2;border-color:#4a90e2;color:#fff}.create-post-section{background:#fafafa;border-bottom:1px solid #eee;padding:clamp(.75rem,2vw,1rem)}.feed-content{flex:1 1;overflow-y:auto;padding:clamp(.75rem,2vw,1rem)}.feed-posts{display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.5rem)}.feed-loading,.feed-loading-more{align-items:center;color:#666;display:flex;flex-direction:column;padding:clamp(1.5rem,4vw,2rem)}.loading-spinner{border:2px solid #f3f3f3;border-top-color:#4a90e2;height:clamp(1.5rem,4vw,2rem);margin-bottom:.5rem;width:clamp(1.5rem,4vw,2rem)}.feed-error{color:#e53e3e;padding:clamp(1.5rem,4vw,2rem);text-align:center}.feed-error button{background:#4a90e2;border:none;border-radius:.375rem;color:#fff;cursor:pointer;margin-top:1rem;padding:.5rem 1rem}.feed-empty{color:#666;padding:clamp(2rem,5vw,3rem);text-align:center}.feed-empty h3{color:#333;font-size:clamp(1.125rem,3vw,1.25rem);margin:0 0 1rem}.feed-empty p{line-height:1.5;margin:0 0 1.5rem}.feed-empty button{background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;font-weight:600;padding:clamp(.75rem,2vw,1rem) clamp(1rem,2.5vw,1.5rem);transition:background .2s ease}.feed-empty button:hover{background:#3a7bc8}.feed-end{border-top:1px solid #eee;color:#666;margin-top:clamp(1rem,2.5vw,1.5rem);padding:clamp(1.5rem,4vw,2rem);text-align:center}.feed-end p{font-weight:500;margin:0 0 1rem}.feed-end button{background:#4a90e2;border:none;border-radius:.375rem;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:background .2s ease}.feed-end button:hover{background:#3a7bc8}@media (max-width:768px){.feed-nav{flex-direction:column;gap:.5rem}.feed-nav-btn{text-align:center}.create-post-btn{font-size:.875rem}.feed-content{padding:.75rem}.feed-posts{gap:1rem}}.notification-bell-container{display:inline-block;position:relative;z-index:10002}.notification-bell-button{background:#0000;border:none;cursor:pointer;font-size:clamp(1.25rem,3vw,1.5rem);padding:clamp(.5rem,2vw,.75rem);position:relative;transition:transform .2s ease}.notification-bell-button:hover{transform:scale(1.1)}.notification-bell-button:active{transform:scale(.95)}.notification-bell-button.shake{animation:bellShake .5s ease-in-out infinite}@keyframes bellShake{0%,to{transform:rotate(0deg)}10%,30%,50%,70%,90%{transform:rotate(-15deg)}20%,40%,60%,80%{transform:rotate(15deg)}}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.bell-icon{display:block}.notification-badge{align-items:center;background:#f44;border-radius:50%;color:#fff;display:flex;font-size:clamp(.625rem,1.5vw,.75rem);font-weight:700;height:clamp(1rem,2.5vw,1.25rem);justify-content:center;min-width:clamp(1rem,2.5vw,1.25rem);padding:0 clamp(.125rem,.5vw,.25rem);position:absolute;right:clamp(.25rem,1vw,.5rem);top:clamp(.25rem,1vw,.5rem)}.notification-dropdown{animation:dropdownFadeIn .2s ease-out;background:#fff;border:1px solid #ddd;border-radius:clamp(.5rem,1.5vw,.75rem);box-shadow:0 8px 32px #0003;display:flex;flex-direction:column;max-height:70vh;overflow:hidden;position:absolute;right:0;top:calc(100% + .5rem);width:min(320px,calc(100vw - 2rem));z-index:100000}.notification-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:clamp(.75rem,2vw,1rem);position:relative}.notification-header h3{flex:1 1;font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600;margin:0}.notification-close-btn{background:#0000;border:none;color:#999;cursor:pointer;font-size:clamp(1.25rem,3vw,1.5rem);line-height:1;padding:clamp(.25rem,.75vw,.5rem);position:absolute;right:clamp(.5rem,1.5vw,.75rem);top:clamp(.5rem,1.5vw,.75rem);transition:color .2s ease;z-index:10}.notification-close-btn:hover{color:#333}.mark-all-read-btn{background:#0000;border:none;color:#4a90e2;cursor:pointer;font-size:clamp(.75rem,2vw,.875rem);margin-right:2rem;padding:clamp(.25rem,1vw,.5rem)}.mark-all-read-btn:hover{text-decoration:underline}.notification-list{max-height:clamp(300px,60vh,500px);overflow-y:auto}.no-notifications{color:#999;padding:clamp(2rem,5vw,3rem);text-align:center}.no-notifications p{font-size:clamp(.875rem,2vw,1rem);margin:0}.notification-item{align-items:flex-start;border-bottom:1px solid #f5f5f5;cursor:pointer;display:flex;padding:clamp(.75rem,2vw,1rem);position:relative;transition:background-color .2s ease}.notification-item:hover{background-color:#f9f9f9}.notification-item.unread{background-color:#f0f7ff}.notification-item.unread:hover{background-color:#e6f2ff}.notification-icon{flex-shrink:0;font-size:clamp(1.25rem,3vw,1.5rem);margin-right:clamp(.5rem,1.5vw,.75rem)}.notification-content{flex:1 1;min-width:0}.notification-message{color:#333;font-size:clamp(.875rem,2vw,.9375rem);line-height:1.4;margin:0 0 clamp(.25rem,.5vw,.375rem)}.notification-time{color:#999;font-size:clamp(.75rem,1.75vw,.8125rem)}.unread-dot{background:#4a90e2;border-radius:50%;flex-shrink:0;height:clamp(.5rem,1.5vw,.625rem);margin-left:clamp(.5rem,1vw,.75rem);width:clamp(.5rem,1.5vw,.625rem)}.notification-footer{border-top:1px solid #eee;padding:clamp(.5rem,1.5vw,.75rem);text-align:center}.view-all-btn{background:#0000;border:none;color:#4a90e2;cursor:pointer;font-size:clamp(.875rem,2vw,.9375rem);padding:clamp(.25rem,1vw,.5rem);width:100%}.view-all-btn:hover{text-decoration:underline}@media (max-width:480px){.notification-dropdown{max-height:60vh;width:min(300px,calc(100vw - 1rem))}.notification-bell-button{padding:clamp(.5rem,2vw,.75rem)}}.social-hub{position:relative;width:100%}.social-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:clamp(.75rem,2vw,1rem);box-shadow:none;display:flex;gap:clamp(.75rem,2vw,1rem);justify-content:space-between;margin-bottom:clamp(.75rem,2vw,1rem);padding:clamp(1rem,2.5vw,1.25rem);position:relative;transition:all .3s ease;z-index:100}.social-header:hover{box-shadow:0 4px 15px #0000001a;transform:translateY(-2px)}.social-hub.expanded .social-header{border-radius:clamp(1rem,2.5vw,1.25rem);box-shadow:0 6px 20px #00000026;padding:clamp(1.25rem,3vw,1.5rem)}.social-nav{display:flex;gap:clamp(.5rem,1.5vw,.75rem)}.social-nav-btn{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#fff3;border:1px solid #ffffff4d;border-radius:clamp(.375rem,1vw,.5rem);box-shadow:0 2px 4px #0000001a;color:#ffffffe6;cursor:pointer;display:flex;font-size:clamp(.875rem,2vw,.9375rem);font-weight:600;gap:.5rem;justify-content:center;min-width:max-content;padding:clamp(.5rem,1.5vw,.75rem) clamp(.75rem,2vw,1rem);position:relative;transition:all .2s ease;white-space:nowrap}.social-nav-btn:hover{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 3px 8px #00000026;color:#fff;transform:translateY(-1px)}.social-nav-btn.active{background:#fffffff2;border-color:#fffffff2;box-shadow:0 4px 12px #0003;color:#667eea;transform:translateY(-2px)}.message-notification-badge{align-items:center;background:#f44;border-radius:50%;color:#fff;display:flex;font-size:clamp(.625rem,1.5vw,.75rem);font-weight:700;height:clamp(1rem,2.5vw,1.25rem);justify-content:center;margin-left:.25rem;min-width:clamp(1rem,2.5vw,1.25rem)}.social-header-actions{align-items:center;display:flex;gap:clamp(.5rem,1.5vw,.75rem)}.connection-status{animation:pulse 2s infinite;filter:drop-shadow(0 0 2px rgba(255,255,255,.5));font-size:clamp(.625rem,1.5vw,.75rem)}.social-content{animation:slideDown .3s ease;background:#0000;border:none;border-radius:0;box-shadow:none;height:clamp(500px,70vh,700px);margin-left:-1rem;margin-right:-1rem;overflow:hidden;position:relative;width:calc(100% + 2rem);z-index:1}.close-view-btn{background:#fffffff2;border:1px solid #667eea4d;border-radius:clamp(.25rem,.75vw,.375rem);box-shadow:0 2px 8px #00000026;color:#667eea;cursor:pointer;font-size:clamp(.8125rem,2vw,.875rem);font-weight:600;padding:clamp(.375rem,1vw,.5rem) clamp(.625rem,2vw,.75rem);position:absolute;right:clamp(.5rem,1.5vw,.75rem);top:clamp(.5rem,1.5vw,.75rem);transition:all .2s ease;z-index:10}.close-view-btn:hover{background:#fff;border-color:#667eea;box-shadow:0 4px 12px #667eea40;color:#5a6fd8;transform:translateY(-1px)}@media (min-width:768px){.social-content{margin-left:0;margin-right:0;width:100%}}@media (max-width:768px){.social-nav-btn{font-size:clamp(.75rem,2vw,.875rem);padding:clamp(.5rem,1.5vw,.625rem)}.social-content{height:clamp(450px,75vh,600px)}}@media (max-width:480px){.social-header,.social-nav{gap:clamp(.4rem,1.2vw,.6rem)}.social-nav-btn{font-size:clamp(.75rem,2vw,.85rem);padding:clamp(.4rem,1.2vw,.5rem) clamp(.6rem,1.8vw,.75rem)}.social-header-actions{flex-shrink:0}.social-content{height:clamp(400px,80vh,550px)}}.btn{align-items:center;border:none;border-radius:20px;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.85rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;transition:all .3s ease;white-space:nowrap}.btn:disabled{cursor:not-allowed;opacity:.5}.btn:disabled:hover{transform:none}.btn--back{background:#ffffff1a;border:1px solid #ffffff4d;color:#fff}.btn--back:hover:not(:disabled){background:#fff3}.btn--signout{background:#ffffff1a;border:1px solid #ffffff4d;color:#fff}.btn--signout:hover:not(:disabled){background:#fff3}.btn--primary{background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #ffffff4d;color:#fff}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#7a8ff0,#8a5bb2);box-shadow:0 4px 12px #0003;transform:translateY(-1px)}.btn--secondary{background:#ffffff0d;border:1px solid #fff3;color:#ffffffe6}.btn--secondary:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff4d}.btn--danger{background:#e74c3c33;border:1px solid #ff6b4a80;color:#ff6b4a}.btn--danger:hover:not(:disabled){background:#e74c3c4d;border-color:#ff6b4ab3}@media (max-width:480px){.btn{font-size:.8rem;padding:.4rem .75rem}}@media (min-width:481px) and (max-width:768px){.btn{font-size:.825rem;padding:.45rem .85rem}}@media (min-width:769px){.btn{font-size:.85rem;padding:.5rem 1rem}.btn:hover:not(:disabled){transform:translateY(-1px)}}.landing-main{flex:1 1;padding:0}.hero-section{margin:0 auto;max-width:1200px;padding:2rem 1rem;text-align:center}.hero-header{margin-bottom:1.5rem}.hero-header h1{color:#fff;font-size:2rem;font-weight:700;margin-bottom:.5rem;text-shadow:2px 2px 4px #0000004d}.hero-header .tagline{color:#fffffff2;font-size:.95rem;font-weight:400}.hero-content{margin:2rem 0}.hero-headline{color:#fff;font-size:1.5rem;font-weight:700;line-height:1.3;margin-bottom:1rem;text-shadow:2px 2px 4px #0000004d}.hero-subheadline{color:#fffffff2;font-size:1rem;line-height:1.6;margin:0 auto 2rem;max-width:550px;padding:0 .5rem}.auth-section{margin:2rem 0 1.5rem}.pi-signin-btn{align-items:center;background:linear-gradient(135deg,#ff9500,#ff6b00);border:none;border-radius:12px;box-shadow:0 4px 15px #ff950066;color:#fff;cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;gap:.5rem;justify-content:center;min-width:280px;padding:1rem 2rem;transition:all .3s ease}.pi-signin-btn:hover:not(:disabled){box-shadow:0 6px 20px #ff950080;transform:translateY(-2px)}.pi-signin-btn:disabled{cursor:not-allowed;opacity:.6}.pi-icon{font-size:1.5rem;font-weight:700}.auth-note{color:#fffc;font-size:.8rem;margin-top:.75rem;padding:0 1rem}.quick-features{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:1.5rem;padding:1rem 0}.quick-feature{color:#ffffffe6;font-size:.9rem}.social-section{margin:3rem auto;max-width:1200px;padding:0 1rem}.social-section.featured{background:linear-gradient(135deg,#6366f11a,#a855f71a);border:1px solid #a855f733;border-radius:20px;margin:3rem auto;padding:3rem 1.5rem}.section-header{display:flex;flex-direction:column;margin-bottom:2.5rem;text-align:center}.section-header h2{color:#fff;font-size:1.6rem;font-weight:700;margin-bottom:.75rem}.section-header p{color:#ffffffe6;font-size:1rem;line-height:1.6;margin:0 auto;max-width:650px}.social-features-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}.social-feature-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:1.5rem;text-align:center;transition:all .3s ease}.social-feature-card:hover{border-color:#a855f766;box-shadow:0 8px 25px #a855f733;transform:translateY(-3px)}.feature-icon-large{font-size:2.5rem;margin-bottom:1rem}.social-feature-card h3{color:#fff;font-size:1.15rem;font-weight:600;margin-bottom:.5rem}.social-feature-card p{color:#ffffffd9;font-size:.9rem;line-height:1.5}.games-preview{margin:3rem auto;max-width:1200px;padding:0 1rem}.games-grid{grid-gap:1rem;gap:1rem;grid-template-columns:1fr;margin-top:2rem}.game-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:1.5rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.game-card:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.game-icon{margin-bottom:.75rem}.game-card h3{color:#fff;font-size:1.1rem;margin-bottom:.5rem}.game-card p{color:#fffc;font-size:.85rem;line-height:1.4;margin-bottom:.75rem}.game-players{color:#ffffffb3;font-size:.8rem;margin-bottom:.75rem}.tournament-section{margin:3rem auto;max-width:1200px;padding:0 1rem}.tournament-section.bonus-feature{background:linear-gradient(135deg,#fbbf2414,#f59e0b14);border:1px solid #fbbf2433;border-radius:16px;padding:2.5rem 1.5rem}.tournament-prizes.compact{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:1fr;margin:1.5rem 0}.prize-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:10px;padding:1rem;text-align:center;transition:transform .3s ease,box-shadow .3s ease}.prize-card:hover{box-shadow:0 6px 20px #fbbf2426;transform:translateY(-2px)}.prize-label{color:#ffffffb3;font-size:.8rem;letter-spacing:1px;margin-bottom:.25rem;text-transform:uppercase}.prize-amount{color:gold;font-size:1.5rem;font-weight:700;margin:.25rem 0}.prize-details{color:#fffc;font-size:.85rem}.tournament-details{background:#ffffff0d;border-radius:8px;margin-top:1.5rem;padding:1rem;text-align:center}.tournament-details p{color:#ffffffe6;font-size:.9rem;line-height:1.5;margin:0}.tournament-details strong{color:gold}.beta-disclaimer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ff980026;border:1px solid #ff98004d;border-radius:8px;color:#ffffffe6;font-size:.75rem;margin-top:1.5rem;padding:.75rem 1rem;text-align:center}.beta-disclaimer strong{color:gold}.how-it-works-section{margin:3rem auto;max-width:1200px;padding:0 1rem}.steps-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}.step-card{align-items:flex-start;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;display:flex;gap:1rem;padding:1.5rem;transition:transform .3s ease}.step-card:hover{transform:translateY(-2px)}.step-number{align-items:center;background:linear-gradient(135deg,#ff9500,#ff6b00);border-radius:50%;box-shadow:0 2px 8px #ff95004d;color:#fff;display:flex;flex-shrink:0;font-size:1.2rem;font-weight:700;height:40px;justify-content:center;width:40px}.step-content h3{color:#fff;font-size:1.05rem;margin-bottom:.25rem}.step-content p{color:#ffffffd9;font-size:.9rem;line-height:1.4}.landing-footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0003;border-top:1px solid #ffffff1a;margin-top:3rem;padding:1.5rem 0}.footer-content{display:flex;flex-direction:column;gap:1rem;margin:0 auto;max-width:1200px;padding:0 1rem;text-align:center}.footer-content p{color:#ffffffb3;font-size:.85rem}.footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.footer-links a{color:#fffc;font-size:.85rem;text-decoration:none}.footer-links a:hover{color:#fff}@media (min-width:768px){.hero-section{padding:3rem 2rem}.hero-header h1{font-size:2.5rem}.hero-headline{font-size:2rem}.hero-subheadline{font-size:1.1rem;max-width:650px}.section-header h2{font-size:1.9rem}.section-header p{font-size:1.05rem}.social-features-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}.tournament-prizes.compact{gap:1rem;grid-template-columns:repeat(3,1fr)}.games-grid,.steps-grid{gap:1.5rem;grid-template-columns:repeat(2,1fr)}.quick-features{gap:2.5rem}.games-preview,.how-it-works-section,.social-section,.tournament-section{padding:0 2rem}.social-section.featured{padding:3.5rem 2.5rem}.tournament-section.bonus-feature{padding:3rem 2rem}}@media (min-width:1024px){.hero-section{padding:4rem 2rem}.hero-header h1{font-size:3rem}.hero-headline{font-size:2.5rem}.hero-subheadline{font-size:1.2rem;max-width:700px}.section-header h2{font-size:2.2rem}.section-header p{font-size:1.1rem}.social-features-grid{gap:2rem;grid-template-columns:repeat(3,1fr)}.social-feature-card{padding:2rem}.feature-icon-large{font-size:3rem}.social-feature-card h3{font-size:1.25rem}.social-feature-card p{font-size:.95rem}.tournament-prizes.compact{gap:1.5rem}.games-grid,.steps-grid{gap:2rem;grid-template-columns:repeat(4,1fr)}.social-section.featured{padding:4rem 3rem}.tournament-section.bonus-feature{padding:3.5rem 2.5rem}}.modal-backdrop{align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#0009;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#2c2f33;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 10px 30px #00000080;max-width:500px;padding:2rem;position:relative;width:90%}.modal-header{margin-bottom:1rem;padding-bottom:1rem}.modal-header h2{color:#7289da;font-size:1.5rem}.close-button{background:none;border:none;font-size:2rem}.modal-body p{color:#b9bbbe;font-size:1rem;margin-bottom:1.5rem}.user-selection-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.user-card{background-color:#40444b;border:1px solid #ffffff1a;border-radius:8px;color:#fff;cursor:pointer;font-family:inherit;font-size:1rem;padding:1rem;text-align:center;transition:all .2s ease-in-out}.user-card:hover{border-color:#7289da;box-shadow:0 5px 15px #0000004d;transform:translateY(-5px)}.user-card:disabled{cursor:not-allowed;opacity:.5}.user-avatar{font-size:3rem;margin-bottom:.5rem}.modal-loading-overlay{background-color:#2c2f33cc;border-radius:12px;flex-direction:column;z-index:1001}.modal-loading-overlay p{font-size:1.2rem;margin-top:1rem}.game-selector{padding:1rem 0}.games-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.game-card-selector{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem;transition:all .3s ease}.game-card-selector:hover{box-shadow:0 10px 30px #0003;transform:translateY(-5px)}.game-card-selector.coming-soon{cursor:not-allowed;opacity:.6}.game-card-selector.coming-soon:hover{box-shadow:none;transform:none}.game-icon{font-size:2.5rem;margin-bottom:1rem;text-align:center}.game-info{flex-direction:column;flex-grow:1;text-align:center}.game-name{color:#fff;font-size:1.3rem;margin-bottom:.25rem}.game-variant{color:#ffffffb3;font-size:.8rem;letter-spacing:1px;margin-bottom:1rem;text-transform:uppercase}.game-description{flex-grow:1;font-size:.95rem;line-height:1.4;margin-bottom:1.5rem}.game-features{display:block;font-size:.85rem;margin-bottom:1.5rem;text-align:left;width:100%}.game-features h4{border-bottom:1px solid #fff3;color:#fff;margin-bottom:.5rem;padding-bottom:.5rem}.game-features ul{color:#fffc;list-style-type:"✅ ";padding-left:1.2rem}.game-features li{margin-bottom:.25rem}.coming-soon-badge,.play-button{align-self:center;border-radius:8px;display:block;font-weight:700;margin-top:auto;min-width:140px;padding:.75rem 1.5rem;text-align:center;text-transform:uppercase;width:fit-content}.play-button{background:#ff6b6b;color:#fff}.coming-soon-badge{background:#0000004d;color:#fff9}.ludo-board-container{align-items:center;display:flex;justify-content:center;padding:10px}.green{background-color:#090}.red{background-color:red}.blue{background-color:#6cf}.yellow{background-color:#fc0}.green-light{background-color:#6c6}.red-light{background-color:#f66}.blue-light{background-color:#9df}.yellow-light{background-color:#fd6}.row{display:flex}.board{border:8px solid #11262e;border-radius:5px;margin:10px auto;padding:0;width:fit-content}.white-box{background-color:#fff;border:1px solid #000;height:144px;left:50%;margin:auto;position:absolute;top:50%;transform:translate(-50%,-50%);width:144px}.red-box{background-color:red}.green-box,.red-box{border:1px solid #000;height:300px;position:relative;width:300px}.green-box{background-color:#090}.blue-box{background-color:#6cf}.blue-box,.yellow-box{border:1px solid #000;height:300px;position:relative;width:300px}.yellow-box{background-color:#fc0}.white-box .circle{border:1px solid #000;border-radius:50%;cursor:pointer;float:left;height:38px;margin:15px;transition:all .3s ease;width:38px}.circle.red{background-color:#c00}.circle.blue{background-color:#49c}.circle.green{background-color:#060}.circle.yellow{background-color:#c90}.circle.empty{background-color:#fff;border:2px solid #666}.circle:hover{box-shadow:0 2px 8px #0000004d;transform:scale(1.1)}.cell{border:1px solid #000;cursor:pointer;height:50px;position:relative;transition:all .2s ease;width:50px}.cell:hover{background-color:#ffffff4d;transform:scale(1.05)}.cell.safe{border:3px solid #333;box-shadow:0 0 10px #ffffff80}.destination{align-items:center;border-color:#090 #fc0 #6cf red;border-style:solid;border-width:78px;display:flex;justify-content:center;position:relative}.center-text{color:#333;font-size:24px;font-weight:700;left:50%;position:absolute;text-shadow:1px 1px 2px #fffc;top:50%;transform:translate(-50%,-50%)}.cell-container{display:flex;flex-direction:column}@media (max-width:768px){.ludo-board-container{padding:0}.board{margin:0 auto;transform:scale(.8)}.blue-box,.green-box,.red-box,.yellow-box{height:240px;width:240px}.white-box{height:115px;width:115px}.white-box .circle{height:30px;margin:12px;width:30px}.cell{height:40px;width:40px}.destination{border-color:#090 #fc0 #6cf red;border-style:solid;border-width:62px}.center-text{font-size:18px}}@media (max-width:480px){.board{transform:scale(.6)}.center-text{font-size:16px}}@media (max-width:360px){.board{margin:0 auto;transform:scale(.5)}.ludo-board-container{padding:0}.center-text{font-size:14px}}.piece-on-board{transition:all .3s ease}.piece-on-board.red{background-color:#c00}.piece-on-board.blue{background-color:#49c}.piece-on-board.green{background-color:#060}.piece-on-board.yellow{background-color:#c90}.piece-on-board:hover{box-shadow:0 2px 8px #0000004d;transform:translate(-50%,-50%) scale(1.1)!important}.circle.finished{align-items:center;background:#f0f0f0;border:2px solid #333;display:flex;justify-content:center;position:relative}.circle.finished:before{color:#333;content:"✕";font-size:24px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}@keyframes winCelebration{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.5) translateY(-20px)}50%{opacity:1;transform:translate(-50%,-50%) scale(2) translateY(-40px)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.8) translateY(-30px)}to{opacity:.8;transform:translate(-50%,-50%) scale(1) translateY(0)}}@keyframes fireworks{0%{opacity:1;transform:scale(0) rotate(0deg)}50%{opacity:.8;transform:scale(1.5) rotate(180deg)}to{opacity:0;transform:scale(3) rotate(1turn)}}.celebrating-piece{background:linear-gradient(45deg,gold,#ffed4e);box-shadow:0 0 20px #ffd700cc}.celebrating-piece:after,.celebrating-piece:before{animation:fireworks 3s ease-out infinite;content:"✨";font-size:20px;pointer-events:none;position:absolute}.celebrating-piece:before{animation-delay:.5s;left:-10px;top:-10px}.celebrating-piece:after{animation-delay:1s;bottom:-10px;right:-10px}.home-entry-arrow{animation:arrowPulse 2s ease-in-out infinite;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.3))}@keyframes arrowPulse{0%,to{opacity:.6}50%{opacity:1}}.circle.highlighted{animation:homeCircleHighlight 1.5s ease-in-out infinite!important;border:4px solid #4caf50!important;box-shadow:0 0 20px #4caf50!important;position:relative!important;transform:scale(1.2)!important;z-index:100!important}.circle.red.highlighted{animation:homeCircleHighlightRed 1.5s ease-in-out infinite!important;border:4px solid #f44!important;box-shadow:0 0 20px #f44!important}.circle.blue.highlighted{animation:homeCircleHighlightBlue 1.5s ease-in-out infinite!important;border:4px solid #48f!important;box-shadow:0 0 20px #48f!important}.circle.green.highlighted{animation:homeCircleHighlightGreen 1.5s ease-in-out infinite!important;border:4px solid #4f4!important;box-shadow:0 0 20px #4f4!important}.circle.yellow.highlighted{animation:homeCircleHighlightYellow 1.5s ease-in-out infinite!important;border:4px solid #fd4!important;box-shadow:0 0 20px #fd4!important}.circle.highlighted:hover{animation:none!important;transform:scale(1.4)!important}@keyframes homeCircleHighlightRed{0%,to{border-color:#f44;box-shadow:0 0 20px #f44;transform:scale(1.2) translateY(0)}50%{border-color:#f66;box-shadow:0 0 30px #f44;transform:scale(1.3) translateY(-5px)}}@keyframes homeCircleHighlightBlue{0%,to{border-color:#48f;box-shadow:0 0 20px #48f;transform:scale(1.2) translateY(0)}50%{border-color:#69f;box-shadow:0 0 30px #48f;transform:scale(1.3) translateY(-5px)}}@keyframes homeCircleHighlightGreen{0%,to{border-color:#4f4;box-shadow:0 0 20px #4f4;transform:scale(1.2) translateY(0)}50%{border-color:#6f6;box-shadow:0 0 30px #4f4;transform:scale(1.3) translateY(-5px)}}@keyframes homeCircleHighlightYellow{0%,to{border-color:#fd4;box-shadow:0 0 20px #fd4;transform:scale(1.2) translateY(0)}50%{border-color:#fe6;box-shadow:0 0 30px #fd4;transform:scale(1.3) translateY(-5px)}}@keyframes homeCircleHighlight{0%,to{border-color:#4caf50;box-shadow:0 0 20px #4caf50;transform:scale(1.2) translateY(0)}50%{border-color:#66bb6a;box-shadow:0 0 30px #4caf50;transform:scale(1.3) translateY(-5px)}}.destination.trophy-glow{animation:trophy-glow 2s ease-in-out infinite alternate;transform:translateY(-3px)}.destination.trophy-glow .center-text{animation:trophy-text-glow 2s ease-in-out infinite alternate}@keyframes trophy-glow{0%{box-shadow:0 0 20px #ffd70080;filter:brightness(1)}to{box-shadow:0 0 40px #ffd700cc;filter:brightness(1.2)}}@keyframes trophy-text-glow{0%{text-shadow:0 0 10px #ffd700cc;transform:translate(-50%,-50%) scale(1)}to{text-shadow:0 0 20px gold;transform:translate(-50%,-50%) scale(1.1)}}.victory-modal-overlay{align-items:center;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10000}.victory-modal{animation:modalSlideIn .5s cubic-bezier(.34,1.56,.64,1);background:linear-gradient(135deg,#667eea,#764ba2);border:2px solid #fff3;border-radius:24px;box-shadow:0 25px 50px #00000080;max-height:80vh;max-width:480px;overflow:hidden;padding:40px;position:relative;width:90%}.victory-modal.ai-victory{background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.victory-content{color:#fff;position:relative;text-align:center;z-index:2}.victory-trophy{animation:trophyBounce 2s infinite;display:inline-block;font-size:4rem;margin-bottom:20px}.victory-trophy.ai-victory{animation:aiGlow 2s infinite alternate}.victory-title{animation:titleGlow 2s ease-in-out infinite alternate;font-size:2.5rem;font-weight:800;margin:0 0 10px;text-shadow:0 2px 4px #0000004d}.victory-title.congratulations{color:gold}.victory-title.game-over{color:#ffcccb}.victory-subtitle{font-size:1.5rem;font-weight:600;margin:0 0 20px;opacity:.95}.victory-message{font-size:1.1rem;line-height:1.6;margin:0 auto 40px;max-width:350px;opacity:.9}.victory-buttons{flex-wrap:wrap;gap:16px}.victory-btn,.victory-buttons{display:flex;justify-content:center}.victory-btn{align-items:center;border:none;border-radius:12px;box-shadow:0 4px 12px #0003;cursor:pointer;font-size:1rem;font-weight:600;gap:8px;min-width:160px;padding:14px 24px;text-decoration:none;transition:all .3s ease}.victory-btn-primary{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.victory-btn-primary:hover{box-shadow:0 6px 20px #4facfe66;transform:translateY(-2px)}.victory-btn-secondary{background:#fff3;border:1px solid #ffffff4d;color:#fff}.victory-btn-secondary:hover{background:#ffffff4d;box-shadow:0 6px 20px #fff3;transform:translateY(-2px)}.btn-icon{font-size:1.2rem}.victory-decorations{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.victory-star{animation:starTwinkle 3s infinite;font-size:1.5rem;position:absolute}.victory-star-1{animation-delay:0s;left:20px;top:20px}.victory-star-2{animation-delay:.5s;right:30px;top:30px}.victory-star-3{animation-delay:1s;bottom:80px;left:30px}.victory-star-4{animation-delay:1.5s;bottom:100px;right:20px}.victory-star-5{animation-delay:2s;right:10px;top:50%}.victory-particles{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.particle{animation:particleFloat 4s linear infinite;font-size:1.2rem;position:absolute}.particle-1{animation-delay:0s;left:10%}.particle-2{animation-delay:.3s;left:20%}.particle-3{animation-delay:.6s;left:30%}.particle-4{animation-delay:.9s;left:40%}.particle-5{animation-delay:1.2s;left:50%}.particle-6{animation-delay:1.5s;left:60%}.particle-7{animation-delay:1.8s;left:70%}.particle-8{animation-delay:2.1s;left:80%}.particle-9{animation-delay:2.4s;left:90%}.particle-10{animation-delay:2.7s;left:15%}.particle-11{animation-delay:3s;left:35%}.particle-12{animation-delay:3.3s;left:75%}@keyframes trophyBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}@keyframes aiGlow{0%{text-shadow:0 0 20px #ff6b6b80;transform:scale(1)}to{text-shadow:0 0 30px #ff6b6bcc;transform:scale(1.1)}}@keyframes titleGlow{0%{text-shadow:0 2px 4px #0000004d}to{text-shadow:0 2px 4px #0000004d,0 0 20px #ffd7004d}}@keyframes starTwinkle{0%,50%,to{opacity:1;transform:scale(1)}25%,75%{opacity:.5;transform:scale(.8)}}@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh) rotate(0deg)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-100px) rotate(1turn)}}@media (max-width:640px){.victory-modal{margin:20px;padding:30px 20px}.victory-title{font-size:2rem}.victory-subtitle{font-size:1.3rem}.victory-buttons{align-items:center;flex-direction:column}.victory-btn{max-width:250px;width:100%}}@media (max-width:480px){.victory-trophy{font-size:3rem}.victory-title{font-size:1.8rem}.victory-subtitle{font-size:1.2rem}.victory-message{font-size:1rem}}.game-header{align-items:center;display:flex;flex-direction:column;margin-bottom:clamp(.25rem,1vw,.5rem);text-align:center}.game-header h1{color:#fff;font-size:clamp(1.3rem,4vw,1.8rem);margin:0 0 clamp(.25rem,1vw,.5rem);text-shadow:2px 2px 4px #0000004d}.game-variant-badge{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#fff3;border:1px solid #ffffff4d;border-radius:15px;color:#ffffffe6;font-size:.8rem;font-weight:500;margin-bottom:.5rem;padding:.25rem .75rem}.start-game-btn{background:linear-gradient(45deg,#4caf50,#45a049);border:none;border-radius:20px;box-shadow:0 2px 10px #0003;font-size:.9rem;padding:.5rem 1.5rem}.start-game-btn,.test-btn{color:#fff;cursor:pointer;font-weight:600;transition:all .3s ease}.test-btn{background:linear-gradient(45deg,#ff9800,#f57c00);border:none;border-radius:15px;box-shadow:0 2px 8px #0003;font-size:.75rem;margin-left:.5rem;padding:.3rem 1rem}.start-game-btn:hover{box-shadow:0 6px 20px #4caf5099;transform:translateY(-2px)}.current-player{text-align:center}.inline-timer{font-weight:500;white-space:nowrap}.timer-value{font-weight:700;transition:color .3s ease}.timer-red{animation:timer-pulse 1s ease-in-out infinite;color:#ffeb3b}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.7}}.player-indicator{border-radius:15px;color:#fff;font-size:.85rem;font-weight:600;padding:.25rem .75rem;text-shadow:1px 1px 2px #0000004d}.player-indicator.player-red{background:linear-gradient(135deg,#f44336,#c62828)}.player-indicator.player-blue{background:linear-gradient(135deg,#2196f3,#1565c0)}.player-indicator.player-green{background:linear-gradient(135deg,#4caf50,#2e7d32)}.player-indicator.player-yellow{background:linear-gradient(135deg,#ffc107,#f57f17)}.player-indicator.ai-turn{align-items:center;animation:aiTurnPulse 2s ease-in-out infinite;background:linear-gradient(135deg,#9c27b0,#6a1b9a);border:2px solid #ffffff4d;display:flex;gap:.5rem;position:relative}.ai-icon{animation:aiIconRotate 3s linear infinite;font-size:1.1rem}.ai-phase{font-size:.75rem;font-style:italic;opacity:.9}@keyframes aiTurnPulse{0%,to{box-shadow:0 0 10px #9c27b080}50%{box-shadow:0 0 20px #9c27b0cc}}@keyframes aiIconRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dice.ai-dice-green{animation:aiDicePulseGreen 1.5s ease-in-out infinite;background:linear-gradient(135deg,#c8e6c9,#a5d6a7);border:2px solid #4caf50;color:#1b5e20}.dice.ai-dice-blue{animation:aiDicePulseBlue 1.5s ease-in-out infinite;background:linear-gradient(135deg,#bbdefb,#90caf9);border:2px solid #2196f3;color:#0d47a1}@keyframes aiDicePulseGreen{0%,to{box-shadow:0 0 10px #4caf5066;transform:scale(1)}50%{box-shadow:0 0 15px #4caf50b3;transform:scale(1.05)}}@keyframes aiDicePulseBlue{0%,to{box-shadow:0 0 10px #2196f366;transform:scale(1)}50%{box-shadow:0 0 15px #2196f3b3;transform:scale(1.05)}}.dice-instruction.ai-instruction-green{animation:aiTextPulse 2s ease-in-out infinite;color:#2e7d32;font-weight:600}.dice-instruction.ai-instruction-blue{animation:aiTextPulse 2s ease-in-out infinite;color:#1565c0;font-weight:600}@keyframes aiTextPulse{0%,to{opacity:.8}50%{opacity:1}}.game-controls{align-items:center;display:flex;gap:clamp(.5rem,2vw,1rem);justify-content:center;margin-bottom:clamp(.75rem,2.5vw,1.25rem);width:100%}.game-controls__timer{align-items:center;display:flex;grid-column:1;justify-content:flex-start}.game-status{grid-column:2;justify-self:center}.dice-section{align-items:center;display:flex;flex-direction:column;gap:.25rem}.dice{background:#fff;box-shadow:0 2px 8px #0003;cursor:pointer;font-size:clamp(1.3rem,3vw,1.8rem);height:clamp(40px,10vw,55px);width:clamp(40px,10vw,55px)}.dice:hover{box-shadow:0 6px 20px #0000004d;transform:scale(1.05)}.dice.rolling{animation:diceRoll 1s ease-in-out}.dice.not-my-turn{background:#f5f5f5;color:#999;cursor:not-allowed!important;filter:grayscale(50%);opacity:.6}.dice.not-my-turn:hover{box-shadow:0 2px 8px #0003!important;transform:none!important}.turn-actions{display:flex;gap:.5rem}.next-turn-btn{background:#fff3;border:1px solid #ffffff4d;border-radius:15px;color:#fff;cursor:pointer;font-size:.8rem;padding:.25rem .75rem;transition:all .3s ease}.next-turn-btn:hover{background:#ffffff4d;transform:translateY(-1px)}.players-info{grid-gap:.25rem;display:grid;gap:.25rem;grid-template-columns:1fr 1fr;margin-top:0}.player-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;padding:.75rem;text-align:center;transition:all .3s ease}.player-card.active{border:2px solid #fff;box-shadow:0 0 15px #ffffff4d;transform:scale(1.02)}.player-card.player-red.active{box-shadow:0 0 15px #f4433680}.player-card.player-blue.active{box-shadow:0 0 15px #2196f380}.player-card.player-green.active{box-shadow:0 0 15px #4caf5080}.player-card.player-yellow.active{box-shadow:0 0 15px #ffc10780}.player-name{font-size:clamp(.7rem,2.5vw,.9rem);margin-bottom:clamp(.15rem,1vw,.25rem)}.player-full-name{display:inline}.player-color-name{display:none}@media (max-width:360px){.player-full-name{display:none}.player-color-name{display:inline}}.player-pieces{display:flex;flex-wrap:wrap;gap:.15rem;justify-content:center}.piece-indicator{background:#fff3;border:1px solid #ffffff4d;border-radius:50%;height:clamp(8px,3vw,14px);transition:all .3s ease;width:clamp(8px,3vw,14px)}.piece-indicator.home{background:#fff3}.piece-indicator.in-play{background:#ffffff4d}.piece-indicator.finished{animation:celebrate 2s ease-in-out;background:linear-gradient(45deg,gold,#ffed4e);color:#333;font-weight:700}.piece-indicator.in-home-stretch{border:2px solid #fff;box-shadow:0 0 10px #ff980080;color:#fff}.player-info.player-red .piece-indicator.in-home-stretch{background:linear-gradient(45deg,#f44336,#c62828);box-shadow:0 0 10px #f4433680}.player-info.player-blue .piece-indicator.in-home-stretch{background:linear-gradient(45deg,#2196f3,#1565c0);box-shadow:0 0 10px #2196f380}.player-info.player-green .piece-indicator.in-home-stretch{background:linear-gradient(45deg,#4caf50,#2e7d32);box-shadow:0 0 10px #4caf5080}.player-info.player-yellow .piece-indicator.in-home-stretch{background:linear-gradient(45deg,#ffc107,#f57f17);box-shadow:0 0 10px #ffc10780}.player-info.player-red .piece-indicator.finished{background:#f44336;color:#f44336}.player-info.player-blue .piece-indicator.finished{background:#2196f3;color:#2196f3}.player-info.player-green .piece-indicator.finished{background:#4caf50;color:#4caf50}.player-info.player-yellow .piece-indicator.finished{background:#ffc107;color:#ffc107}.game-rules{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:12px;overflow:hidden}.game-rules summary{color:#fff;cursor:pointer;font-weight:600;padding:1rem;transition:background .3s ease;-webkit-user-select:none;user-select:none}.game-rules summary:hover{background:#ffffff1a}.rules-content{color:#ffffffe6;padding:0 1rem 1rem}.rules-content h3{color:#fff;font-size:1rem;margin:0 0 .5rem}.rules-content ul{font-size:.9rem;line-height:1.5;margin:0;padding-left:1rem}.rules-content li{margin-bottom:.5rem}.rules-content strong{color:#fff}@media (min-width:768px){.ludo-game{gap:1.5rem;padding:2rem}.game-header h1{font-size:2.2rem}.game-status{align-items:center;flex-direction:row;justify-content:space-between;padding:1.5rem}.dice{font-size:2.5rem;height:80px;width:80px}.players-info{gap:1rem;grid-template-columns:repeat(4,1fr)}.player-card{padding:1rem}.player-name{font-size:1rem}.piece-indicator{height:16px;width:16px}}@media (min-width:1024px){.ludo-game{margin:0 auto;max-width:1200px;padding:2rem}.game-header h1{font-size:2.5rem}.start-game-btn{font-size:1.2rem;padding:1rem 2.5rem}.game-status{padding:2rem}.dice{font-size:3rem;height:100px;width:100px}.player-indicator{font-size:1.1rem;padding:.75rem 1.5rem}.rules-content{padding:0 2rem 2rem}.rules-content ul{font-size:1rem}}@media (max-width:768px) and (orientation:landscape){.ludo-game{gap:.1rem;min-height:auto;padding:.1rem}.game-header{margin-bottom:0}.game-header h1{font-size:1rem;margin:0}.ludo-board-container{padding:0}.game-status{gap:.25rem;padding:.25rem}.players-info{gap:.1rem;margin-top:.1rem}.game-rules{display:none}}@media (max-width:768px) and (orientation:portrait){.ludo-game{gap:.1rem;padding:.1rem}.game-header h1{font-size:1.2rem;margin:0 0 .1rem}.ludo-board-container{padding:0}.game-status{gap:.3rem;padding:.4rem}.players-info{gap:.1rem;margin-top:.1rem}}.player-info.player-red{background:#f4433633;border:1px solid #f4433666}.player-info.player-blue{background:#2196f326;border:1px solid #2196f34d}.player-info.player-green{background:#4caf5026;border:1px solid #4caf504d}.player-info.player-yellow{background:#ffeb3b40;border:1px solid #ffeb3b80}.player-info.active{box-shadow:0 0 10px #ffffff4d;transform:scale(1.02)}.player-info.player-red.active{box-shadow:0 0 10px #f4433666}.player-info.player-blue.active{box-shadow:0 0 10px #2196f366}.player-info.player-green.active{box-shadow:0 0 10px #4caf5066}.player-info.player-yellow.active{box-shadow:0 0 10px #ffeb3b99}.player-info.player-left{background:#80808033!important;border:1px solid #80808066!important;opacity:.6}.player-info.player-left .player-name{color:#ffffffb3;font-style:italic}.player-info.player-left .left-player-piece{filter:grayscale(50%);opacity:.4}@media (max-width:768px){.ludo-game{gap:.1rem;padding:.25rem}.game-content{gap:.1rem}.game-status{gap:.25rem;padding:.25rem}.player-indicator{font-size:.75rem;padding:.2rem .6rem}.dice{font-size:1.3rem;height:40px;width:40px}.dice-instruction{font-size:.7rem}.players-section{gap:.25rem;margin-top:.05rem}.player-info{padding:.4rem}.player-name{font-size:.75rem;margin-bottom:.2rem}.piece-indicator{height:10px;width:10px}.game-header{margin-bottom:.25rem}.game-header h1{font-size:1.3rem;margin:0 0 .25rem}.start-game-btn{font-size:.8rem;padding:.4rem 1.2rem}}@media (max-width:360px){.ludo-game{gap:.05rem;padding:.25rem}.game-header{margin-bottom:.1rem}.game-header h1{font-size:1.1rem;margin:0 0 .1rem}.game-variant-badge{font-size:.7rem;margin-bottom:.25rem;padding:.2rem .5rem}.start-game-btn{font-size:.75rem;padding:.35rem 1rem}.game-content{gap:0}.board-container{margin:0 auto .5rem}.game-status{gap:.15rem;padding:.2rem}.player-indicator{font-size:.7rem;padding:.15rem .5rem}.dice{font-size:1.1rem;height:35px;width:35px}.dice-instruction{font-size:.65rem;padding:.35rem .75rem}.players-section{gap:.15rem;margin-top:0}.player-info{border-radius:6px;padding:.25rem}.player-name{font-size:.65rem;margin-bottom:.15rem}.piece-indicator{gap:.1rem;height:8px;width:8px}.player-pieces{gap:.1rem}.game-rules summary{font-size:.85rem;padding:.6rem}.rules-content{font-size:.75rem;padding:0 .6rem .6rem}.rules-content ul{font-size:.75rem;padding-left:.75rem}}.piece-indicator.clickable{animation:pulse 1.5s infinite;border:2px solid #fff;box-shadow:0 0 8px #fffc;cursor:pointer}.piece-indicator.clickable:hover{box-shadow:0 0 10px #fffc;transform:scale(1.1)}.dice.no-moves{background:#ffcdd2}.winner-announcement{animation:celebrate 2s ease-in-out infinite;background:linear-gradient(45deg,gold,#ffed4e);border-radius:25px;box-shadow:0 4px 20px #ffd70080;color:#333;font-size:1.2rem;font-weight:700;padding:1rem 2rem;text-align:center}@keyframes celebrate{0%,to{transform:scale(1)}25%{transform:scale(1.3) translateY(-10px)}50%{transform:scale(1.5) translateY(-20px)}75%{transform:scale(1.3) translateY(-10px)}}.ludo-game{background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;gap:.5rem;min-height:100vh;padding:.5rem}.game-content{flex:1 1;flex-direction:column;gap:clamp(.1rem,.5vw,.25rem);margin:0 auto;max-width:100%}.board-container,.game-content{align-items:center;display:flex}.board-container{justify-content:center;margin:0 auto clamp(2rem,3vw,3rem);max-width:500px;padding:0;width:100%}.ludo-board-container{height:min(92vw,450px);margin:0 auto;max-height:65vh;width:min(92vw,450px)}.game-status{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;flex-direction:column;gap:clamp(.2rem,1vw,.3rem);padding:clamp(.25rem,1.5vw,.4rem)}.players-section{display:flex;gap:clamp(.25rem,2vw,.5rem);justify-content:space-between;margin-top:clamp(.75rem,2.5vw,1.25rem);max-width:500px;width:100%}.player-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#fff;min-width:0;padding:clamp(.3rem,2vw,.5rem);text-align:center}@media (max-height:700px){.game-header h1{font-size:clamp(1.1rem,4vw,1.4rem);margin-bottom:.2rem}.game-status{gap:.2rem;padding:.25rem}.ludo-board-container{max-height:60vh}.players-section{gap:.2rem;margin-top:.05rem}}@media (max-height:600px){.game-rules,.test-btn{display:none}.ludo-board-container{max-height:55vh}.game-header h1{font-size:1.1rem;margin-bottom:.1rem}}.ludo-game .player-info .piece-indicator.highlighted{animation:highlightPulse 1.5s ease-in-out infinite!important;background-color:#4caf504d!important;border:3px solid #4caf50!important;box-shadow:0 0 20px #4caf50cc!important;cursor:pointer!important;position:relative!important;transform:scale(1.1)!important;z-index:100!important}.ludo-game .player-info.player-red .piece-indicator.highlighted{animation:indicatorPulseRed 1.5s ease-in-out infinite!important;background-color:#ff44444d!important;border:3px solid #f44!important;box-shadow:0 0 20px #f44c!important}.ludo-game .player-info.player-blue .piece-indicator.highlighted{animation:indicatorPulseBlue 1.5s ease-in-out infinite!important;background-color:#4488ff4d!important;border:3px solid #48f!important;box-shadow:0 0 20px #48fc!important}.ludo-game .player-info.player-green .piece-indicator.highlighted{animation:indicatorPulseGreen 1.5s ease-in-out infinite!important;background-color:#44ff444d!important;border:3px solid #4f4!important;box-shadow:0 0 20px #4f4c!important}.ludo-game .player-info.player-yellow .piece-indicator.highlighted{animation:indicatorPulseYellow 1.5s ease-in-out infinite!important;background-color:#ffdd444d!important;border:3px solid #fd4!important;box-shadow:0 0 20px #fd4c!important}@keyframes indicatorPulseRed{0%,to{background-color:#ff44444d;border-color:#f44;box-shadow:0 0 20px #f44c;transform:scale(1.1) translateY(0)}50%{background-color:#f446;border-color:#f66;box-shadow:0 0 30px #f44;transform:scale(1.2) translateY(-3px)}}@keyframes indicatorPulseBlue{0%,to{background-color:#4488ff4d;border-color:#48f;box-shadow:0 0 20px #48fc;transform:scale(1.1) translateY(0)}50%{background-color:#48f6;border-color:#69f;box-shadow:0 0 30px #48f;transform:scale(1.2) translateY(-3px)}}@keyframes indicatorPulseGreen{0%,to{background-color:#44ff444d;border-color:#4f4;box-shadow:0 0 20px #4f4c;transform:scale(1.1) translateY(0)}50%{background-color:#4f46;border-color:#6f6;box-shadow:0 0 30px #4f4;transform:scale(1.2) translateY(-3px)}}@keyframes indicatorPulseYellow{0%,to{background-color:#ffdd444d;border-color:#fd4;box-shadow:0 0 20px #fd4c;transform:scale(1.1) translateY(0)}50%{background-color:#fd46;border-color:#fe6;box-shadow:0 0 30px #fd4;transform:scale(1.2) translateY(-3px)}}.ludo-board-container .piece-on-board.highlighted{animation:boardPieceHighlight 1.5s ease-in-out infinite!important;border:4px solid #4caf50!important;box-shadow:0 0 25px #4caf50!important;cursor:pointer!important;position:absolute!important;transform:translate(-50%,-50%) scale(1.3)!important;z-index:200!important}.ludo-board-container .piece-on-board.red.highlighted{animation:boardPieceHighlightRed 1.5s ease-in-out infinite!important;border:4px solid #f44!important;box-shadow:0 0 25px #f44!important}.ludo-board-container .piece-on-board.blue.highlighted{animation:boardPieceHighlightBlue 1.5s ease-in-out infinite!important;border:4px solid #48f!important;box-shadow:0 0 25px #48f!important}.ludo-board-container .piece-on-board.green.highlighted{animation:boardPieceHighlightGreen 1.5s ease-in-out infinite!important;border:4px solid #4f4!important;box-shadow:0 0 25px #4f4!important}.ludo-board-container .piece-on-board.yellow.highlighted{animation:boardPieceHighlightYellow 1.5s ease-in-out infinite!important;border:4px solid #fd4!important;box-shadow:0 0 25px #fd4!important}.ludo-board-container .piece-on-board.highlighted:hover{animation:none!important;transform:translate(-50%,-50%) scale(1.5)!important}@keyframes boardPieceHighlightRed{0%,to{border-color:#f44;box-shadow:0 0 25px #f44;transform:translate(-50%,-50%) scale(1.3) translateY(0)}50%{border-color:#f66;box-shadow:0 0 35px #f44;transform:translate(-50%,-50%) scale(1.4) translateY(-8px)}}@keyframes boardPieceHighlightBlue{0%,to{border-color:#48f;box-shadow:0 0 25px #48f;transform:translate(-50%,-50%) scale(1.3) translateY(0)}50%{border-color:#69f;box-shadow:0 0 35px #48f;transform:translate(-50%,-50%) scale(1.4) translateY(-8px)}}@keyframes boardPieceHighlightGreen{0%,to{border-color:#4f4;box-shadow:0 0 25px #4f4;transform:translate(-50%,-50%) scale(1.3) translateY(0)}50%{border-color:#6f6;box-shadow:0 0 35px #4f4;transform:translate(-50%,-50%) scale(1.4) translateY(-8px)}}@keyframes boardPieceHighlightYellow{0%,to{border-color:#fd4;box-shadow:0 0 25px #fd4;transform:translate(-50%,-50%) scale(1.3) translateY(0)}50%{border-color:#fe6;box-shadow:0 0 35px #fd4;transform:translate(-50%,-50%) scale(1.4) translateY(-8px)}}.ludo-game .player-info .piece-indicator.highlighted:hover{animation:none!important;transform:scale(1.3)!important}.ai-turn-status{margin:.5rem 0;text-align:center}.ai-phase-indicator{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff26;border:1px solid #fff3;border-radius:20px;color:#fff;display:inline-block;font-size:.9rem;font-weight:500;padding:.5rem 1rem;text-shadow:1px 1px 2px #0000004d}.dice-component{align-items:center;display:flex;flex-direction:column;gap:clamp(.5rem,2vw,1rem);padding:clamp(.5rem,2vw,1rem)}.dice-container{gap:clamp(.3rem,1.5vw,.5rem)}.dice,.dice-container{align-items:center;display:flex;justify-content:center}.dice{background:linear-gradient(145deg,#fff,#e6e6e6);border:2px solid #333;border-radius:8px;box-shadow:0 4px 8px #0003;color:#333;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;height:clamp(40px,8vw,55px);transition:all .3s ease;-webkit-user-select:none;user-select:none;width:clamp(40px,8vw,55px)}.dice.clickable{background:linear-gradient(145deg,#f0f8ff,#e0f0ff);border-color:#4a90e2;cursor:pointer}.dice.clickable:hover{box-shadow:0 6px 12px #4a90e24d;transform:scale(1.05)}.dice.rolled{animation:diceSettle .3s ease-out;background:linear-gradient(145deg,#fff,#f5f5f5)}.dice.no-moves{animation:noMovesIndicate .5s ease-out;background:linear-gradient(145deg,#ffebee,#ffcdd2);border-color:#f44336;color:#d32f2f}.dice-container.rolling .dice{animation:diceRoll 2s ease-in-out}@keyframes diceRoll{0%,to{transform:rotate(0deg) scale(1)}25%{transform:rotate(90deg) scale(1.1)}50%{transform:rotate(180deg) scale(1.2)}75%{transform:rotate(270deg) scale(1.1)}}@keyframes diceSettle{0%{transform:scale(1.2)}50%{transform:scale(.9)}to{transform:scale(1)}}@keyframes noMovesIndicate{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.dice-instruction{animation:rollAgainGlow 2s ease-in-out infinite alternate;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#ffd70033,#ffc1071a);border:2px solid gold;border-radius:20px;box-shadow:0 4px 12px #ffd7004d;color:gold;font-size:clamp(.9rem,3vw,1.2rem);font-weight:700;margin:.5rem 0;padding:.5rem 1rem;text-align:center;text-shadow:2px 2px 4px #00000080}@keyframes rollAgainGlow{0%{box-shadow:0 4px 12px #ffd7004d;transform:scale(1)}to{box-shadow:0 6px 20px #ffd70099;transform:scale(1.02)}}.dice-instruction.warning{animation:pulse 1s ease-in-out infinite;color:#e74c3c;font-weight:700}.move-options{margin-top:clamp(.5rem,2vw,1rem);max-width:400px;width:100%}.move-options h4{color:#333;font-size:clamp(.9rem,2.5vw,1.1rem);margin:0 0 clamp(.5rem,1.5vw,.75rem);text-align:center}.move-options-list{gap:clamp(.3rem,1vw,.5rem);margin-bottom:clamp(.5rem,1.5vw,1rem)}.move-option,.move-options-list{display:flex;flex-direction:column}.move-option{align-items:flex-start;background:linear-gradient(145deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:8px;cursor:pointer;padding:clamp(.5rem,1.5vw,.75rem);text-align:left;transition:all .3s ease}.move-option:hover{background:linear-gradient(145deg,#e3f2fd,#bbdefb);border-color:#2196f3;box-shadow:0 4px 8px #2196f333;transform:translateY(-1px)}.move-option.selected{background:linear-gradient(145deg,#e8f5e8,#c8e6c9);border-color:#4caf50;box-shadow:0 4px 12px #4caf504d}.move-description{color:#333;font-size:clamp(.8rem,2.2vw,.95rem);font-weight:600;margin-bottom:.2rem}.dice-used{color:#666;font-size:clamp(.7rem,2vw,.85rem);font-style:italic}.execute-move-btn{background:linear-gradient(145deg,#4caf50,#45a049);border:none;border-radius:8px;box-shadow:0 4px 8px #4caf504d;color:#fff;cursor:pointer;font-size:clamp(.9rem,2.5vw,1.1rem);font-weight:700;padding:clamp(.6rem,2vw,.8rem);transition:all .3s ease;width:100%}.execute-move-btn:hover{background:linear-gradient(145deg,#45a049,#3d8b40);box-shadow:0 6px 12px #4caf5066;transform:translateY(-2px)}.execute-move-btn:active{box-shadow:0 2px 4px #4caf504d;transform:translateY(0)}.roll-again-indicator{animation:glow 2s ease-in-out infinite alternate;background:linear-gradient(145deg,#fff3cd,#ffeaa7);border:2px solid #ffc107;border-radius:20px;color:#856404;font-size:clamp(.8rem,2.2vw,.95rem);font-weight:600;padding:clamp(.4rem,1.5vw,.6rem) clamp(.8rem,3vw,1.2rem)}@keyframes glow{0%{box-shadow:0 4px 8px #ffc1074d}to{box-shadow:0 6px 16px #ffc10799}}.dice-component.naija .dice-container{gap:clamp(.5rem,2vw,.8rem)}.dice-component.classic .dice-container{gap:0}@media (max-height:700px){.dice-component{gap:clamp(.3rem,1.5vw,.5rem);padding:clamp(.3rem,1.5vw,.5rem)}.move-options h4{font-size:clamp(.8rem,2.2vw,1rem)}.move-option{padding:clamp(.4rem,1.2vw,.6rem)}}@media (max-height:600px){.dice{font-size:clamp(1rem,3.5vw,1.5rem);height:clamp(35px,7vw,45px);width:clamp(35px,7vw,45px)}.move-options{margin-top:clamp(.3rem,1.5vw,.5rem)}}.naija-dice-options{margin-top:clamp(.5rem,2vw,1rem);max-width:400px;text-align:center;width:100%}.dice-dots-container{flex-wrap:wrap;gap:clamp(.8rem,3vw,1.5rem);margin:clamp(.8rem,2vw,1.2rem) 0}.dice-dot,.dice-dots-container{display:flex;justify-content:center}.dice-dot{align-items:center;border:3px solid #0000;border-radius:50%;cursor:pointer;flex-direction:column;height:clamp(60px,12vw,80px);position:relative;transition:all .3s ease;-webkit-user-select:none;user-select:none;width:clamp(60px,12vw,80px)}.dice-dot.has-moves{background:linear-gradient(145deg,#e3f2fd,#bbdefb);border-color:#2196f3;box-shadow:0 4px 12px #2196f34d}.dice-dot.has-moves:hover{background:linear-gradient(145deg,#bbdefb,#90caf9);box-shadow:0 6px 16px #2196f366;transform:scale(1.05)}.dice-dot.no-moves{background:linear-gradient(145deg,#f5f5f5,#e0e0e0);border-color:#bdbdbd;cursor:not-allowed;opacity:.6}.dice-dot.selected{animation:selectedPulse 2s ease-in-out infinite;background:linear-gradient(145deg,#e8f5e8,#c8e6c9);border-color:#4caf50;box-shadow:0 6px 20px #4caf5080;transform:scale(1.1)}@keyframes selectedPulse{0%,to{box-shadow:0 6px 20px #4caf5080}50%{box-shadow:0 8px 25px #4caf50b3}}.dot-value{color:#333;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:700;margin-bottom:.1rem}.dot-label{color:#666;font-size:clamp(.6rem,1.8vw,.8rem);font-weight:500;letter-spacing:.5px;text-transform:uppercase}.dice-dot.selected .dot-value{color:#2e7d32}.dice-dot.selected .dot-label{color:#388e3c}.dice-dot.no-moves .dot-label,.dice-dot.no-moves .dot-value{color:#9e9e9e}.selected-instruction{animation:instructionGlow 2s ease-in-out infinite alternate;color:#4caf50;font-size:clamp(.8rem,2.2vw,.95rem);font-weight:600;margin-top:clamp(.5rem,1.5vw,.8rem)}@keyframes instructionGlow{0%{opacity:.8}to{opacity:1}}@media (max-width:480px){.dice-dots-container{gap:clamp(.5rem,2vw,.8rem)}.dice-dot{height:clamp(50px,10vw,65px);width:clamp(50px,10vw,65px)}.dot-value{font-size:clamp(1rem,3.5vw,1.4rem)}.dot-label{font-size:clamp(.5rem,1.5vw,.7rem)}}@media (max-height:600px){.dice-dots-container{margin:clamp(.4rem,1.5vw,.8rem) 0}.dice-dot{height:clamp(45px,10vw,60px);width:clamp(45px,10vw,60px)}}.floating-mute-button{animation:fadeInButton .3s ease;background:#4caf50f2;border:2px solid #fff6;border-radius:50%;bottom:20px;box-shadow:0 4px 12px #0000004d;cursor:pointer;font-size:20px;height:40px;left:20px;margin:0;outline:none;padding:0;position:fixed;transition:all .2s ease;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;width:40px;z-index:999}.floating-mute-button .mute-icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.floating-mute-button.unmuted{background:#4caf50f2!important;border-color:#fff6!important}.floating-mute-button.muted{animation:pulse-red 2s ease-in-out infinite;background:#f44336f2!important;border-color:#ffffff80!important}@keyframes pulse-red{0%,to{box-shadow:0 4px 12px #f4433666}50%{box-shadow:0 4px 20px #f44336cc}}@media (hover:hover){.floating-mute-button:hover{box-shadow:0 6px 16px #0006;transform:scale(1.1)}.floating-mute-button.unmuted:hover{background:#4caf50}.floating-mute-button.muted:hover{background:#f44336}}.floating-mute-button:active{box-shadow:0 2px 8px #0000004d;transform:scale(.95)}.floating-mute-button:focus-visible{outline:3px solid #4caf5080;outline-offset:4px}.floating-mute-button.muted:focus-visible{outline-color:#f4433680}@keyframes fadeInButton{0%{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:768px){.floating-mute-button{bottom:16px;font-size:22px;height:44px;left:16px;width:44px}}@media (max-width:480px){.floating-mute-button{bottom:12px;font-size:20px;height:40px;left:12px;width:40px}}@media (orientation:landscape) and (max-height:500px){.floating-mute-button{bottom:8px;font-size:20px;height:40px;left:8px;width:40px}}@media (prefers-reduced-motion:reduce){.floating-mute-button{animation:none;transition:none}@media (hover:hover){.floating-mute-button:hover{transform:none}}.floating-mute-button:active{transform:none}}@media (prefers-contrast:high){.floating-mute-button{border:3px solid}}@media print{.floating-mute-button{display:none}}.token-balance-widget{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:20px;display:flex;gap:.5rem;padding:.5rem .75rem;transition:all .3s ease;-webkit-user-select:none;user-select:none}.token-balance-widget.clickable{cursor:pointer}.token-balance-widget.clickable:hover{background:#ffffff40;border-color:#fff6;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.token-balance-widget.clickable:active{transform:translateY(0)}.token-balance-widget.low-balance{animation:pulse 2s ease-in-out infinite;background:#ffc80033;border-color:#ffc80066}.token-icon{align-items:center;display:flex;font-size:1.2rem;justify-content:center;line-height:1}.token-icon.error{filter:grayscale(1);opacity:.7}.token-label{color:#ffffffe6;display:none;font-size:.85rem;font-weight:500;white-space:nowrap}.token-amount{color:#fff;font-size:1rem;font-weight:700;min-width:1.5rem;text-align:center}.low-indicator{animation:blink 1.5s ease-in-out infinite;color:gold;font-size:1.1rem;font-weight:900}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.token-balance-widget.compact{gap:.35rem;padding:.4rem .6rem}.token-balance-widget.compact .token-icon{font-size:1rem}.token-balance-widget.compact .token-amount{font-size:.9rem;min-width:1.2rem}@media (min-width:640px){.token-label{display:inline}.token-balance-widget{padding:.6rem 1rem}}@media (min-width:1024px){.token-balance-widget{gap:.65rem;padding:.65rem 1.1rem}.token-amount{font-size:1.1rem}}@media (prefers-contrast:high){.token-balance-widget{border-color:#fff;border-width:2px}.token-amount{text-shadow:0 0 4px #00000080}}@media (prefers-reduced-motion:reduce){.token-balance-widget,.token-balance-widget.clickable:hover{transition:none}.low-indicator,.token-balance-widget.low-balance{animation:none}}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 10px #0000001a;padding:1rem 1.5rem;position:sticky;top:0;z-index:100}.header-content{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin:0 auto;max-width:1200px}.header-title{color:#fff;flex:1 1;font-size:clamp(1.2rem,4vw,1.8rem);margin:0;text-align:center}.header-mute-button .floating-mute-button{margin:0;position:static}.user-info{align-items:center;display:flex;gap:.75rem}.user-name{color:#fff;display:none;font-size:.9rem}@media (min-width:640px){.user-name{display:inline}}@media (max-width:480px){.app-header{padding:.75rem 1rem}.header-title{font-size:1.1rem}}.mode-selector-container{margin:0 auto;max-width:900px;padding:clamp(1rem,3vw,2rem)}.mode-selector-header{margin-bottom:clamp(2rem,5vw,3rem);text-align:center}.mode-selector-header h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;margin-bottom:clamp(.5rem,2vw,1rem)}.game-description{color:#ffffffe6;font-size:clamp(.95rem,2.5vw,1.1rem);margin:0 auto;max-width:600px}.modes-grid{grid-gap:clamp(1.5rem,3vw,2rem);display:grid;gap:clamp(1.5rem,3vw,2rem);grid-template-columns:1fr;margin-top:clamp(2rem,4vw,3rem)}.mode-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff26,#ffffff0d);border:1px solid #fff3;border-radius:clamp(1rem,2.5vw,1.5rem);box-shadow:0 4px 15px #0000001a;cursor:pointer;padding:clamp(1.5rem,4vw,2rem);transition:all .3s ease}.mode-card:hover{background:linear-gradient(135deg,#fff3,#ffffff1a);border-color:#fff6;box-shadow:0 8px 30px #0003;transform:translateY(-5px)}.mode-card:active{transform:translateY(-2px)}.mode-card-header{gap:clamp(.75rem,2vw,1rem);margin-bottom:clamp(1rem,2.5vw,1.5rem)}.mode-card-header,.mode-icon{align-items:center;display:flex}.mode-icon{font-size:clamp(2rem,5vw,2.5rem);justify-content:center}.mode-card-header h3{color:#fff;font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;margin:0}.mode-description{color:#ffffffd9;font-size:clamp(.9rem,2.5vw,1rem);line-height:1.5;margin-bottom:clamp(1rem,2.5vw,1.5rem)}.mode-features{grid-gap:clamp(.5rem,1.5vw,.75rem);display:grid;gap:clamp(.5rem,1.5vw,.75rem);grid-template-columns:1fr;list-style:none;margin:0 0 clamp(1.5rem,3vw,2rem);padding:0}.mode-features li{background:#ffffff1a;border-left:3px solid #667eea99;border-radius:clamp(.375rem,1vw,.5rem);color:#ffffffe6;font-size:clamp(.85rem,2vw,.95rem);padding:clamp(.5rem,1.5vw,.75rem)}.mode-card .play-button{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:clamp(.5rem,1.5vw,.75rem);box-shadow:0 4px 15px #667eea4d;color:#fff;font-size:clamp(1rem,2.5vw,1.1rem);font-weight:600;padding:clamp(.75rem,2vw,1rem) clamp(1.5rem,4vw,2rem);text-align:center;transition:all .3s ease}.mode-card:hover .play-button{background:linear-gradient(135deg,#5a6fd8,#6a4190);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}@media (min-width:768px){.mode-features,.modes-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.mode-selector-container{padding:2rem}}.game-conflict-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;background-color:#000000bf;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.game-conflict-modal{animation:slideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;padding:0;position:relative;width:90%}.conflict-header{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);border-radius:16px 16px 0 0;color:#fff;padding:24px;position:relative;text-align:center}.conflict-icon{animation:conflictPulse 2s infinite;font-size:48px;margin-bottom:12px}.conflict-title{font-size:24px;font-weight:700;margin:0;text-shadow:0 2px 4px #0003}.conflict-message{padding:24px;text-align:center}.conflict-text{color:#333;font-size:18px;line-height:1.5;margin-bottom:20px}.existing-game-info{margin:20px 0}.conflict-game-card{align-items:center;background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;display:flex;gap:16px;margin:0 auto;max-width:350px;padding:16px}.conflict-game-card .game-icon{background:#fff;border:2px solid #dee2e6;border-radius:8px;font-size:32px;padding:12px}.game-details{flex-direction:column;gap:4px;text-align:left}.game-name{color:#333;font-size:16px;font-weight:600}.game-status{color:#666;font-size:14px;text-transform:capitalize}.game-id{color:#999;font-family:monospace;font-size:12px}.conflict-actions{border-top:1px solid #e9ecef;display:flex;flex-direction:column;gap:12px;padding:24px}.action-button{border-radius:8px;font-size:16px;gap:8px;min-height:48px;padding:14px 20px;text-align:center}.action-button:hover{box-shadow:0 4px 12px #00000026}.action-button.primary{background:linear-gradient(135deg,#28a745,#20c997);color:#fff}.action-button.primary:hover{background:linear-gradient(135deg,#218838,#1fa38a)}.action-button.secondary{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff}.action-button.secondary:hover{background:linear-gradient(135deg,#0056b3,#004085)}.action-button.cancel{background:#6c757d;color:#fff}.action-button.cancel:hover{background:#5a6268}.button-icon{font-size:18px}.warning-notice{align-items:flex-start;background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;display:flex;gap:12px;margin:16px 24px 0;padding:16px}.warning-icon{color:#856404;flex-shrink:0;font-size:20px}.warning-text{color:#856404;font-size:14px;line-height:1.4;margin:0}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes conflictPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@media (max-width:768px){.game-conflict-modal{margin:10px;width:95%}.conflict-header{padding:20px}.conflict-title{font-size:20px}.conflict-icon{font-size:40px}.conflict-actions{padding:20px}.action-button{font-size:14px;min-height:44px;padding:12px 16px}.conflict-game-card{gap:12px;padding:12px}.conflict-game-card .game-icon{font-size:28px;padding:10px}}.multiplayer-entry{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;box-shadow:0 20px 40px #0000001a;margin:2rem auto;max-width:600px;padding:2rem;text-align:center}.entry-header{margin-bottom:2.5rem}.game-title{margin-bottom:.5rem}.game-subtitle{color:#ffffffe6;font-size:1.1rem;font-weight:500;margin:0}.entry-actions{gap:1.5rem}.entry-actions,.primary-action{display:flex;flex-direction:column}.primary-action{gap:.75rem}.primary-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 15px #667eea66;color:#fff;cursor:pointer;display:flex;font-size:1.25rem;font-weight:700;gap:.75rem;justify-content:center;min-height:60px;padding:1.25rem 2rem;transition:all .3s ease}.primary-btn:hover:not(:disabled){box-shadow:0 6px 25px #667eea80;transform:translateY(-2px)}.primary-btn:active:not(:disabled){transform:translateY(0)}.primary-btn:disabled{cursor:not-allowed;opacity:.7;transform:none}.btn-icon{font-size:1.3rem}.btn-description{color:#fffc;font-size:.95rem;font-style:italic;font-weight:500;margin:0}.actions-divider{align-items:center;display:flex;margin:1rem 0}.actions-divider:after,.actions-divider:before{background:#e0e0e0;content:"";flex:1 1;height:1px}.actions-divider span{color:#999;font-size:.9rem;font-weight:500;padding:0 1rem}.secondary-actions{display:flex;gap:1rem;justify-content:center}.secondary-btn,.tertiary-btn{align-items:center;background:#ffffff1a;border:2px solid #ffffff4d;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;min-width:140px;padding:.875rem 1.5rem;transition:all .3s ease}.secondary-btn:hover:not(:disabled){background:#fff3;border-color:#fff9;box-shadow:0 4px 12px #fff3;color:#fff;transform:translateY(-1px)}.tertiary-btn:hover:not(:disabled){background:#f59e0b33;border-color:#f59e0b;box-shadow:0 4px 12px #f59e0b33;color:#f59e0b;transform:translateY(-1px)}.secondary-btn:disabled,.tertiary-btn:disabled{cursor:not-allowed;opacity:.5}.modal-overlay{align-items:center;background:#0009;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #fff3;border-radius:16px;box-shadow:0 20px 40px #0000004d;max-height:90vh;max-width:480px;overflow-y:auto;width:100%}.modal-header{border-bottom:1px solid #fff3;padding:1.5rem 1.5rem 1rem}.modal-header h3{color:#fff;font-size:1.25rem;font-weight:700;margin:0}.close-btn{color:#ffffffb3;font-size:1.5rem;padding:.25rem}.close-btn:hover{background:#ffffff1a;color:#fff}.modal-body{padding:1.5rem}.modal-actions{border-top:1px solid #fff3;gap:1rem;padding:1rem 1.5rem 1.5rem}.game-info{background:#ffffff1a;border:1px solid #fff3;border-radius:8px;margin-bottom:0;padding:1rem;text-align:left}.game-info p{color:#fff;font-size:.95rem;margin:.25rem 0}.privacy-selection{text-align:left}.privacy-selection h4{color:#fff;font-size:1rem;font-weight:600;margin:0 0 1rem}.privacy-options{display:flex;flex-direction:column;gap:.75rem}.privacy-option{align-items:flex-start;background:#ffffff0d;border:2px solid #ffffff4d;border-radius:8px;cursor:pointer;display:flex;gap:.75rem;padding:1rem;transition:all .2s ease}.privacy-option:hover{background:#ffffff1a;border-color:#ffffff80}.privacy-option input[type=radio]{margin-top:.25rem}.option-content{flex:1 1}.option-content strong{color:#fff;display:block;margin-bottom:.25rem}.option-content p{color:#fffc;font-size:.9rem;margin:0}.join-form{text-align:left}.join-form label{color:#fff;display:block;font-weight:600;margin-bottom:.5rem}.game-id-input{background:#ffffff1a;border:2px solid #ffffff4d;border-radius:8px;box-sizing:border-box;color:#fff;font-size:1rem;padding:.875rem;transition:all .2s ease;width:100%}.game-id-input::placeholder{color:#fff9}.game-id-input:focus{background:#ffffff26;border-color:#fff9;box-shadow:0 0 0 3px #ffffff1a;outline:none}.input-help{color:#ffffffb3;font-size:.85rem;font-style:italic;margin:.5rem 0 0}.cancel-btn,.confirm-btn{border:none;border-radius:8px;cursor:pointer;font-weight:600;min-width:100px;padding:.75rem 1.5rem;transition:all .2s ease}.cancel-btn{background:#ffffff1a;border:1px solid #ffffff4d;color:#fffc}.cancel-btn:hover:not(:disabled){background:#fff3;border-color:#ffffff80;color:#fff}.confirm-btn{background:#667eea;color:#fff}.confirm-btn:hover:not(:disabled){background:#5a6fd8}.confirm-btn:disabled{background:#ccc;cursor:not-allowed}@media (max-width:640px){.multiplayer-entry{margin:1rem;padding:1.5rem}.secondary-actions{flex-direction:column}.secondary-btn,.tertiary-btn{min-width:auto;width:100%}.modal-overlay{padding:.5rem}.modal-actions{flex-direction:column-reverse}.cancel-btn,.confirm-btn{width:100%}}.waiting-room{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:16px;box-shadow:0 4px 20px #00000026;margin:2rem auto;max-width:800px;padding:2rem}.waiting-room-header{border-bottom:2px solid #f0f0f0;margin-bottom:2rem;padding-bottom:1.5rem;text-align:center}.game-title{align-items:center;display:flex;gap:.75rem;justify-content:center;margin-bottom:1rem}.game-icon{font-size:2rem}.game-title h2{color:#fff;font-size:1.75rem;font-weight:700;margin:0;text-shadow:0 2px 4px #0000004d}.game-id-section{align-items:center;display:flex;flex-direction:column;gap:.5rem}.game-id-display{align-items:center;background:#ffffff1a;border:2px solid #fff3;border-radius:12px;display:flex;gap:.75rem;padding:.75rem 1.25rem}.game-id-label{color:#ffffffe6;font-weight:600}.game-id{background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#667eea;font-family:Courier New,monospace;font-size:1.1rem;font-weight:700;padding:.25rem .5rem}.copy-btn{background:none;border:none;border-radius:4px;cursor:pointer;font-size:1.2rem;padding:.25rem;transition:all .2s ease}.copy-btn:hover{background:#fff3}.privacy-note{color:#f59e0b;font-size:.9rem;font-weight:500;margin:0}.players-section{margin-bottom:2rem}.players-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.players-header h3{color:#fff;font-size:1.25rem;font-weight:700;margin:0}.waiting-status{align-items:center;color:#f59e0b;display:flex;font-weight:500;gap:.5rem}.waiting-dot{animation:pulse 2s infinite}.players-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.player-slot{align-items:center;background:#ffffff0d;border:2px solid #fff3;border-radius:12px;display:flex;gap:1rem;padding:1rem;transition:all .3s ease}.player-slot.filled{background:#667eea33;border-color:#667eea80}.player-slot.empty{background:#ffffff0d;border-color:#ffffff4d;border-style:dashed}.player-avatar{align-items:center;background:#667eea;border-radius:50%;color:#fff;display:flex;font-size:1.5rem;height:50px;justify-content:center;width:50px}.player-slot.empty .player-avatar{background:#fff3;color:#fff9}.avatar-placeholder{animation:spin 2s linear infinite}.player-name-row{align-items:center;display:flex;gap:.5rem;justify-content:space-between;margin-bottom:.25rem}.add-friend-btn{background:#667eea4d;border:1px solid #667eea80;border-radius:6px;color:#fff;cursor:pointer;flex-shrink:0;font-size:.85rem;padding:.25rem .5rem;transition:all .2s ease}.add-friend-btn:hover:not(:disabled){background:#667eea80;border-color:#667eeab3;transform:scale(1.05)}.add-friend-btn:disabled{cursor:not-allowed;opacity:.5}.add-friend-btn.already-friends{background:#4caf504d;border-color:#4caf5080;color:#4caf50}.player-slot.empty .player-name{color:#fff9;font-style:italic}.player-status{font-size:.85rem;gap:.5rem}.status-dot{font-size:.7rem}.status-dot.connected{color:#28a745}.status-dot.waiting{color:#6c757d}.game-starting-section{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;color:#fff;margin-bottom:2rem;padding:2rem;text-align:center}.starting-animation{margin-bottom:1rem}.pulse-icon{animation:pulse-scale 1.5s ease-in-out infinite;font-size:3rem}@keyframes pulse-scale{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.game-starting-section h3{font-size:1.5rem;font-weight:700;margin:0 0 .5rem}.game-starting-section p{margin:0 0 1rem;opacity:.9}.loading-dots{display:flex;gap:.25rem;justify-content:center}.loading-dots span{animation:bounce 1.4s ease-in-out infinite both;font-size:1.5rem;font-weight:700}.loading-dots span:first-child{animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0s}.waiting-section{background:#f8f9fa;border-radius:16px;margin-bottom:2rem;padding:2rem;text-align:center}.waiting-message h3{color:#fff;font-size:1.25rem;font-weight:700;margin:0 0 1rem}.waiting-message p{color:#fffc;line-height:1.5;margin:0 0 1.5rem}.waiting-animation{display:flex;justify-content:center}.dice-animation{animation:bounce-dice 2s ease-in-out infinite;font-size:2.5rem}@keyframes bounce-dice{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.waiting-room-footer{align-items:center;border-top:2px solid #f0f0f0;display:flex;justify-content:space-between;padding-top:1.5rem}.connection-info{color:#28a745;font-weight:500}.connection-info,.leave-btn{align-items:center;display:flex;gap:.5rem}.leave-btn{background:#dc3545;border:none;border-radius:8px;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.leave-btn:hover{background:#c82333;transform:translateY(-1px)}@media (max-width:768px){.waiting-room{margin:1rem;padding:1.5rem}.players-grid{grid-template-columns:1fr}.players-header{align-items:flex-start;flex-direction:column;gap:.5rem}.waiting-room-footer{align-items:stretch;flex-direction:column;gap:1rem}.game-id-display,.leave-btn{justify-content:center}.game-id-display{flex-wrap:wrap}}.chat-bubble{position:fixed;transition:all .3s ease;z-index:900}.chat-bubble.minimized{right:clamp(15px,3vw,25px);top:clamp(60px,8vh,80px)}.chat-bubble.expanded{max-width:95vw;right:clamp(10px,2vw,20px);top:clamp(60px,8vh,80px);width:clamp(280px,90vw,400px)}.chat-bubble__minimized{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;box-shadow:0 4px 12px #0000004d;cursor:pointer;display:flex;height:clamp(50px,12vw,60px);justify-content:center;position:relative;transition:all .2s ease;width:clamp(50px,12vw,60px)}.chat-bubble__minimized:hover{box-shadow:0 6px 16px #0006;transform:scale(1.1)}.chat-bubble__minimized:active{transform:scale(.95)}.chat-bubble__icon{font-size:clamp(24px,6vw,28px);line-height:1}.chat-bubble__badge{background:#e74c3c;border-radius:12px;box-shadow:0 2px 4px #0003;color:#fff;font-size:clamp(10px,2.5vw,12px);font-weight:700;min-width:20px;padding:clamp(2px,1vw,4px) clamp(6px,1.5vw,8px);position:absolute;right:-5px;text-align:center;top:-5px}.chat-bubble__expanded{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border-radius:12px;box-shadow:0 8px 24px #0000004d;display:flex;flex-direction:column;max-height:clamp(300px,60vh,500px);overflow:hidden}.chat-bubble__header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px 12px 0 0;color:#fff;display:flex;justify-content:space-between;padding:clamp(8px,2vw,12px) clamp(12px,3vw,16px)}.chat-bubble__title{font-size:clamp(14px,3.5vw,16px);font-weight:600}.chat-bubble__minimize-btn{align-items:center;background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:clamp(14px,3.5vw,16px);height:clamp(24px,6vw,28px);justify-content:center;transition:all .2s ease;width:clamp(24px,6vw,28px)}.chat-bubble__minimize-btn:hover{background:#ffffff4d;transform:scale(1.1)}.chat-bubble__minimize-btn:active{transform:scale(.9)}.chat-bubble__messages{background:#f5f5f5;flex:1 1;max-height:clamp(200px,45vh,350px);overflow-x:hidden;overflow-y:auto;padding:clamp(8px,2vw,12px)}.chat-bubble__messages::-webkit-scrollbar{width:6px}.chat-bubble__messages::-webkit-scrollbar-track{background:#0000000d;border-radius:3px}.chat-bubble__messages::-webkit-scrollbar-thumb{background:#667eea80;border-radius:3px}.chat-bubble__messages::-webkit-scrollbar-thumb:hover{background:#667eeab3}.chat-bubble__empty{align-items:center;color:#999;display:flex;font-size:clamp(13px,3vw,14px);height:100%;justify-content:center;padding:20px;text-align:center}.chat-message{word-wrap:break-word;border-radius:8px;margin-bottom:clamp(8px,2vw,12px);max-width:85%;padding:clamp(6px,1.5vw,8px) clamp(10px,2.5vw,12px)}.chat-message.text.own{background:linear-gradient(135deg,#667eea,#764ba2);border-bottom-right-radius:2px;color:#fff;margin-left:auto}.chat-message.text.other{background:#fff;border-bottom-left-radius:2px;box-shadow:0 1px 2px #0000001a;color:#333;margin-right:auto}.chat-message.system{background:#0000000d;color:#666;font-size:clamp(11px,2.5vw,12px);font-style:italic;margin:clamp(4px,1vw,6px) auto;max-width:90%;text-align:center}.system-message{display:block}.message-header{align-items:baseline;display:flex;gap:clamp(6px,1.5vw,8px);justify-content:space-between;margin-bottom:clamp(3px,.5vw,4px)}.sender-name{flex-shrink:0;font-size:clamp(12px,3vw,13px);font-weight:600}.chat-message.own .sender-name{color:#ffffffe6}.chat-message.other .sender-name{color:#667eea}.message-time{flex-shrink:0;font-size:clamp(10px,2vw,11px);opacity:.7}.message-text{font-size:clamp(13px,3vw,14px);line-height:1.4;white-space:pre-wrap}.typing-indicator{align-items:center;background:#667eea1a;border-radius:8px;display:flex;gap:clamp(6px,1.5vw,8px);margin-top:clamp(4px,1vw,6px);padding:clamp(6px,1.5vw,8px)}.typing-dots{display:flex;gap:3px}.typing-dots span{animation:typing-bounce 1.4s infinite;background:#667eea;border-radius:50%;height:6px;width:6px}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.typing-text{color:#667eea;font-size:clamp(11px,2.5vw,12px);font-style:italic}.chat-bubble__error{background:#e74c3c;border-top:1px solid #0000001a;color:#fff;font-size:clamp(12px,3vw,13px);padding:clamp(6px,1.5vw,8px) clamp(10px,2.5vw,12px);text-align:center}.chat-bubble__input{background:#fff;border-radius:0 0 12px 12px;border-top:1px solid #0000001a;display:flex;gap:clamp(6px,1.5vw,8px);padding:clamp(8px,2vw,12px)}.chat-input{border:1px solid #ddd;border-radius:20px;flex:1 1;font-size:clamp(13px,3vw,14px);outline:none;padding:clamp(6px,1.5vw,8px) clamp(12px,3vw,16px);transition:border-color .2s ease}.chat-input:focus{border-color:#667eea;box-shadow:0 0 0 2px #667eea1a}.chat-send-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:20px;color:#fff;cursor:pointer;font-size:clamp(13px,3vw,14px);font-weight:600;padding:clamp(6px,1.5vw,8px) clamp(16px,4vw,20px);transition:all .2s ease;white-space:nowrap}.chat-send-btn:hover:not(:disabled){box-shadow:0 4px 8px #667eea4d;transform:translateY(-1px)}.chat-send-btn:active:not(:disabled){transform:translateY(0)}.chat-send-btn:disabled{cursor:not-allowed;opacity:.5}@media (max-width:480px){.chat-bubble.expanded{max-height:60vh;right:5px;top:10px;width:calc(100vw - 10px)}.chat-bubble__expanded{max-height:60vh}.chat-bubble__messages{max-height:calc(60vh - 120px)}}@media (max-width:360px){.chat-bubble.minimized{right:10px;top:10px}.chat-bubble__minimized{height:50px;width:50px}.chat-bubble__icon{font-size:24px}}.chat-bubble__minimize-btn:focus,.chat-input:focus,.chat-send-btn:focus{outline:2px solid #667eea;outline-offset:2px}@media (prefers-reduced-motion:reduce){.chat-bubble,.chat-bubble__minimize-btn,.chat-bubble__minimized,.chat-send-btn{transition:none}.typing-dots span{animation:none}}.grace-period-notification{animation:slideUp .3s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ff9800e6;border:1px solid #e6510080;border-radius:clamp(4px,1vw,6px);bottom:clamp(10px,2vh,15px);box-shadow:0 2px 6px #0003;color:#fff;left:50%;max-width:clamp(200px,75vw,300px);padding:clamp(4px,1vw,6px) clamp(8px,2vw,10px);position:fixed;transform:translateX(-50%);width:fit-content;z-index:50}.grace-period-header{align-items:center;display:flex;gap:clamp(6px,1.5vw,8px);margin-bottom:clamp(4px,1vw,6px);position:relative}.grace-period-icon{font-size:clamp(14px,3vw,16px);line-height:1}.grace-period-header h3{flex:1 1;font-size:clamp(12px,2.8vw,14px);font-weight:600;margin:0}.grace-period-close{align-items:center;background:none;border:none;color:#fff;cursor:pointer;display:flex;font-size:clamp(18px,4vw,22px);height:clamp(20px,4.5vw,24px);justify-content:center;line-height:1;opacity:.7;padding:0;transition:opacity .2s;width:clamp(20px,4.5vw,24px)}.grace-period-close:hover{opacity:1}.grace-period-list{display:flex;flex-direction:column;gap:clamp(4px,1vw,5px);margin-bottom:clamp(4px,1vw,5px)}.grace-period-player{align-items:center;display:flex;gap:clamp(8px,2vw,10px);justify-content:space-between}.player-name{flex:1 1;font-size:clamp(11px,2.5vw,13px);font-weight:500}.countdown{background:#ffffff40;border-radius:clamp(3px,.8vw,4px);font-size:clamp(12px,2.8vw,14px);font-weight:700;min-width:clamp(50px,12vw,65px);padding:clamp(2px,.5vw,3px) clamp(6px,1.5vw,8px);text-align:center;white-space:nowrap}.countdown-red{animation:subtlePulse 1s ease-in-out infinite;background:#d32f2fcc}@keyframes subtlePulse{0%,to{opacity:1}50%{opacity:.85}}.grace-period-message{font-size:clamp(9px,2vw,11px);line-height:1.3;margin:0;opacity:.85;text-align:center}@media (min-width:768px){.grace-period-notification{bottom:15px;max-width:300px}}.grace-period-notification.reconnected{animation:slideUp .3s ease-out,fadeOut 2s ease-in 1s forwards;background:#4caf50e6}@keyframes fadeOut{to{opacity:0;transform:translateX(-50%) translateY(20px)}}.leave-game-modal-overlay{align-items:center;animation:modalOverlayFadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000bf;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:9999}@keyframes modalOverlayFadeIn{0%{opacity:0}to{opacity:1}}.leave-game-modal{animation:modalSlideIn .3s ease-out;background:linear-gradient(135deg,#1e293b,#334155);border-radius:16px;box-shadow:0 20px 25px -5px #0000004d,0 10px 10px -5px #0000001a,0 0 0 1px #ffffff1a;max-height:90vh;max-width:480px;overflow:hidden;padding:0;position:relative;width:90%}.modal-header{background:linear-gradient(135deg,#7c3aed,#a855f7);border-bottom:1px solid #ffffff1a;padding:24px;text-align:center}.modal-icon{display:block;font-size:48px;margin-bottom:8px}.modal-title{color:#fff;font-size:24px;font-weight:600;margin:0;text-shadow:0 1px 2px #0000004d}.modal-content{color:#fff;padding:24px}.modal-message{color:#e2e8f0;font-size:18px;line-height:1.5;margin:0 0 16px}.game-info{margin-bottom:20px}.game-type-badge{background:linear-gradient(135deg,#3b82f6,#1d4ed8);font-size:14px;font-weight:500;padding:6px 12px;text-transform:capitalize}.consequences-section{background:#0003;border:1px solid #ffffff1a;border-radius:12px;padding:16px}.consequences-section h3{align-items:center;color:#fbbf24;display:flex;font-size:16px;font-weight:600;gap:8px;margin:0 0 12px}.consequences-section h3:before{content:"⚠️";font-size:16px}.consequences-list{list-style:none;margin:0;padding:0}.consequence-item{align-items:flex-start;color:#cbd5e1;display:flex;font-size:14px;gap:8px;line-height:1.4;margin-bottom:8px}.consequence-item:last-child{margin-bottom:0}.consequence-bullet{color:#fbbf24;flex-shrink:0;font-weight:700;margin-top:2px}.modal-actions{background:#0000001a;border-top:1px solid #ffffff1a;padding:24px}.cancel-button{background:#0000;border:2px solid #64748b;border-radius:8px;color:#e2e8f0;cursor:pointer;flex:1 1;font-size:16px;font-weight:500;padding:12px 24px;transition:all .2s ease}.cancel-button:hover:not(:disabled){background:#64748b;color:#fff;transform:translateY(-1px)}.cancel-button:disabled{cursor:not-allowed;opacity:.5}.confirm-button{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;flex:1 1;font-size:16px;font-weight:600;gap:8px;justify-content:center;padding:12px 24px;transition:all .2s ease}.confirm-button.warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.confirm-button.warning:hover:not(:disabled){background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 4px 12px #f59e0b66;transform:translateY(-1px)}.confirm-button.danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.confirm-button.danger:hover:not(:disabled){background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #ef444466;transform:translateY(-1px)}.confirm-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.loading-spinner{border:2px solid #ffffff4d;border-top-color:#fff;height:16px;width:16px}.modal-loading-overlay{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.loading-message{align-items:center;background:#1e293bf2;border:1px solid #ffffff1a;border-radius:12px;color:#fff;display:flex;font-size:16px;font-weight:500;gap:12px;padding:20px 32px}@media (max-width:640px){.leave-game-modal{margin:20px;width:95%}.modal-header{padding:20px}.modal-title{font-size:20px}.modal-content{padding:20px}.modal-message{font-size:16px}.modal-actions{flex-direction:column;padding:20px}.cancel-button,.confirm-button{width:100%}}.game-completion-overlay{animation:fadeIn .3s ease-out}.game-completion-modal{background:linear-gradient(135deg,#667eea,#764ba2);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:600px;overflow-y:auto;padding:2rem;position:relative;width:90%}.celebration-bg{border-radius:20px;bottom:0;overflow:hidden;pointer-events:none;top:0}.celebration-bg,.confetti{left:0;position:absolute;right:0}.confetti{animation:confetti-fall 3s ease-in-out infinite;background:radial-gradient(circle at 20% 80%,gold 2px,#0000 0),radial-gradient(circle at 80% 20%,#ff6b6b 2px,#0000 0),radial-gradient(circle at 40% 40%,#4ecdc4 2px,#0000 0);background-size:50px 50px,60px 60px,70px 70px;height:100%;opacity:.6;top:-10px}.stars{animation:stars-twinkle 2s ease-in-out infinite alternate;background:radial-gradient(2px 2px at 20px 30px,#fff,#0000),radial-gradient(2px 2px at 40px 70px,#fff,#0000),radial-gradient(1px 1px at 90px 40px,#fff,#0000);background-repeat:repeat;background-size:100px 100px;bottom:0;left:0;opacity:.4;position:absolute;right:0;top:0}.completion-header{margin-bottom:1.5rem;position:relative;text-align:center;z-index:2}.game-type-badge{background:#fff3;border:1px solid #ffffff4d;border-radius:20px;color:#fff;display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.5px;margin-bottom:1rem;padding:.5rem 1rem;text-transform:uppercase}.result-announcement{color:#fff}.result-announcement.winner{animation:winner-pulse 2s ease-in-out infinite}.result-icon,.trophy-icon{display:block;font-size:3rem;margin-bottom:.5rem}.result-announcement h2{font-size:2rem;font-weight:700;margin-bottom:.5rem}.result-announcement p{font-size:1.1rem;opacity:.9}.victory-type-badge{background:#ffd70033;border:1px solid #ffd7004d;border-radius:15px;color:gold;display:inline-block;font-size:.9rem;font-weight:600;margin-top:.5rem;padding:.5rem 1rem;text-shadow:1px 1px 2px #00000080}.winner-spotlight{background:#ffffff1a;border:1px solid #fff3;border-radius:15px;gap:1rem;margin:2rem 0;padding:1.5rem;position:relative;z-index:2}.winner-avatar,.winner-spotlight{align-items:center;display:flex;justify-content:center}.winner-avatar{animation:winner-glow 2s ease-in-out infinite alternate;border-radius:50%;box-shadow:0 8px 25px #0000004d;color:#fff;font-size:2rem;font-weight:700;height:80px;width:80px}.winner-initial{text-shadow:2px 2px 4px #00000080}.winner-info h3{color:#fff;font-size:1.5rem;font-weight:600;margin-bottom:.25rem}.winner-subtitle{color:#fffc;font-size:1rem;font-style:italic}.rankings-section{margin:2rem 0;position:relative;z-index:2}.rankings-section h4{color:#fff;font-size:1.2rem;font-weight:600;margin-bottom:1rem;text-align:center}.rankings-list{background:#ffffff1a;border:1px solid #fff3;border-radius:15px;padding:1rem}.ranking-item{align-items:center;background:#ffffff0d;border-radius:10px;display:flex;gap:1rem;margin-bottom:.5rem;padding:.75rem;transition:all .3s ease}.ranking-item:last-child{margin-bottom:0}.ranking-item.current-player{background:#fff3;border:1px solid #ffffff4d;transform:scale(1.02)}.rank-position{align-items:center;display:flex;gap:.25rem;min-width:60px}.rank-number{color:#fff;font-size:1.1rem;font-weight:700}.crown{animation:crown-shine 2s ease-in-out infinite;font-size:1.2rem}.player-color-indicator{border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;height:20px;width:20px}.player-details{flex:1 1}.player-name{display:block;font-weight:600}.game-stats{display:flex;flex-wrap:wrap;gap:1rem}.stat{color:#ffffffb3;font-size:.8rem;gap:.25rem}.finish-time{color:#fff9;font-size:.75rem}.completion-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;position:relative;z-index:2}.play-again-btn{animation:pulse-primary 2s ease-in-out infinite;background:linear-gradient(135deg,#2ed573,#17a2b8)}.spectate-btn{background:#6c757dcc}.decorative-elements{bottom:1rem;opacity:.1;pointer-events:none;position:absolute;right:1rem}.game-pieces{display:flex;gap:.5rem}.ludo-piece{border:1px solid #ffffff4d;border-radius:50%;height:12px;width:12px}.ludo-piece.red{background-color:#ff4757}.ludo-piece.blue{background-color:#3742fa}.ludo-piece.green{background-color:#2ed573}.ludo-piece.yellow{background-color:#ffa502}@keyframes confetti-fall{0%{transform:translateY(-100%) rotate(0deg)}to{transform:translateY(100vh) rotate(1turn)}}@keyframes stars-twinkle{0%{opacity:.2}to{opacity:.6}}@keyframes winner-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes winner-glow{0%{box-shadow:0 8px 25px #0000004d}to{box-shadow:0 8px 25px #fff3,0 0 30px #ffffff1a}}@keyframes crown-shine{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}@keyframes pulse-primary{0%,to{box-shadow:0 4px 15px #2ed57366}50%{box-shadow:0 6px 20px #2ed57399}}.ludo-celebration{animation:ludo-bounce .6s ease-out}.naija-celebration{animation:naija-spin .8s ease-out}.checkers-celebration{animation:checkers-slide .7s ease-out}.chess-celebration{animation:chess-royal 1s ease-out}@keyframes ludo-bounce{0%{opacity:0;transform:translateY(-100px) scale(.8)}60%{opacity:1;transform:translateY(20px) scale(1.1)}to{transform:translateY(0) scale(1)}}@keyframes naija-spin{0%{opacity:0;transform:rotate(-180deg) scale(.5)}to{opacity:1;transform:rotate(0deg) scale(1)}}@keyframes checkers-slide{0%{opacity:0;transform:translateX(-100%) scale(.8)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes chess-royal{0%{opacity:0;transform:scale(.5) rotateY(180deg)}70%{opacity:1;transform:scale(1.1) rotateY(0deg)}to{transform:scale(1) rotateY(0deg)}}@media (max-width:768px){.game-completion-modal{margin:1rem;max-height:95vh;padding:1.5rem}.result-announcement h2{font-size:1.5rem}.result-icon,.trophy-icon{font-size:2.5rem}.winner-spotlight{flex-direction:column;text-align:center}.winner-avatar{font-size:1.5rem;height:60px;width:60px}.completion-actions{flex-direction:column;gap:.75rem}.completion-actions button{width:100%}.ranking-item{flex-wrap:wrap;gap:.75rem}.game-stats{gap:.5rem}.stat{font-size:.75rem}}@media (max-width:480px){.game-completion-modal{border-radius:15px;padding:1rem}.winner-spotlight{padding:1rem}.rankings-list{padding:.75rem}.ranking-item{padding:.5rem}}.game-actions-menu{display:inline-block;position:relative}.game-actions-menu__trigger{align-items:center;background:#ffffff1a;border:1px solid #ffffff4d;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:clamp(24px,5vw,28px);font-weight:700;height:clamp(44px,10vw,50px);justify-content:center;line-height:1;padding:0;transition:all .2s ease;width:clamp(44px,10vw,50px)}.game-actions-menu__trigger:hover{background:#fff3;border-color:#ffffff80;transform:scale(1.05)}.game-actions-menu__trigger:active{transform:scale(.95)}.game-actions-menu__dropdown{animation:slideDown .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#667eeaf2;border:1px solid #ffffff4d;border-radius:8px;box-shadow:0 4px 16px #0006;min-width:180px;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:100000}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.game-actions-menu__item{align-items:center;background:#0000;border:none;border-bottom:1px solid #ffffff1a;color:#fff;cursor:pointer;display:flex;font-size:clamp(14px,3.5vw,16px);gap:8px;padding:clamp(12px,3vw,16px) clamp(16px,4vw,20px);text-align:left;transition:background .2s ease;width:100%}.game-actions-menu__item:last-child{border-bottom:none}.game-actions-menu__item:hover{background:#ffffff1a}.game-actions-menu__item:active{background:#ffffff26}.game-actions-menu__item--leave:hover{background:#e74c3c33}.game-actions-menu__item--signout:hover{background:#95a5a633}@media (max-width:480px){.game-actions-menu__trigger{font-size:24px;height:44px;width:44px}.game-actions-menu__dropdown{min-width:160px}.game-actions-menu__item{font-size:14px;padding:12px 16px}}@media (min-width:481px) and (max-width:768px){.game-actions-menu__trigger{font-size:26px;height:48px;width:48px}}@media (min-width:769px){.game-actions-menu__trigger{font-size:28px;height:50px;width:50px}.game-actions-menu__dropdown{min-width:200px}.game-actions-menu__item{font-size:16px;padding:16px 20px}}.tournament-badge{animation:shimmer 2s infinite;background:linear-gradient(135deg,gold,orange);border-radius:clamp(.375rem,1vw,.5rem);box-shadow:0 2px 8px #ffd70066;color:#333;display:inline-block;font-size:clamp(.7rem,2vw,.85rem);font-weight:700;margin-right:clamp(.375rem,1.5vw,.5rem);padding:clamp(.25rem,1vw,.4rem) clamp(.5rem,2vw,.75rem);vertical-align:middle}@keyframes shimmer{0%,to{opacity:1}50%{opacity:.8;transform:scale(1.02)}}.tournament-prize-info{color:#ffd700f2;font-size:clamp(.8rem,2.5vw,.95rem);font-weight:600;margin-top:clamp(.25rem,1vw,.375rem);text-shadow:0 1px 3px #0000004d}.multiplayer-game-container{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:6rem 1rem 1rem;width:100%}.multiplayer-game-wrapper{border-radius:20px;box-shadow:0 20px 40px #0000001a;margin:0 auto;max-width:1200px;padding:1.5rem}.multiplayer-game-header,.multiplayer-game-wrapper{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a}.multiplayer-game-header{border-radius:15px;margin-bottom:2rem;padding:1rem}.game-status{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1rem}.game-status h3{color:#fff;font-size:1.5rem;margin:0}.game-details{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.game-details span{color:#ffffffe6;font-size:.9rem}.game-details code{background:#fff3;border-radius:5px;font-family:Courier New,monospace;font-weight:700;padding:.25rem .5rem}.players-status-bar{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:1rem}.player-status{align-items:center;background:#ffffff1a;border:2px solid #0000;border-radius:10px;display:flex;justify-content:space-between;padding:.75rem;transition:all .3s ease}.player-status.current-user{background:#ffd7001a;border-color:gold;box-shadow:0 0 15px #ffd7004d}.player-status.active-turn{animation:pulse-turn 2s ease-in-out infinite;background:#2ecc711a;border-color:#2ecc71;box-shadow:0 0 15px #2ecc714d}@keyframes pulse-turn{0%,to{box-shadow:0 0 15px #2ecc714d}50%{box-shadow:0 0 25px #2ecc7199}}.player-info{flex:1 1}.player-name{align-items:center;color:#fff;display:flex;font-weight:700;gap:.5rem;margin-bottom:.25rem}.you-badge{background:gold;border-radius:8px;color:#333;font-size:.6rem;font-weight:700;padding:.1rem .4rem}.connection-status{align-items:center;display:flex;gap:.5rem}.connection-dot{border-radius:50%;display:inline-block;height:8px;width:8px}.connection-dot.good{background:#2ecc71;box-shadow:0 0 8px #2ecc7180}.connection-dot.poor{background:#f39c12;box-shadow:0 0 8px #f39c1280}.connection-dot.offline{background:#e74c3c;box-shadow:0 0 8px #e74c3c80}.turn-indicator{animation:pulse-text 1.5s ease-in-out infinite;color:#2ecc71;font-size:.8rem;font-weight:700}@keyframes pulse-text{0%,to{opacity:.7}50%{opacity:1}}.game-content{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;border-radius:15px;padding:1rem}.game-header-nav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-bottom:1px solid #fff3;padding:clamp(.4rem,2vw,.6rem) clamp(.8rem,3vw,1.2rem);position:relative;z-index:100}.game-info{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;gap:clamp(.5rem,2vw,.8rem);justify-content:space-between;width:100%}.game-info>:not(.game-actions-menu){flex:1 1 auto;min-width:0}.game-info h1{color:#fff;font-size:clamp(1rem,4vw,1.3rem);font-weight:600;margin:0}.game-info h1,.player-name{line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-name{color:#fffc;font-size:clamp(.75rem,2.5vw,.85rem)}.game-info .game-actions-menu{flex:0 0 auto;margin-left:auto}.header-actions{gap:1rem}.error-banner,.header-actions{align-items:center;display:flex}.error-banner{background:#e74c3ce6;border-bottom:1px solid #e74c3c4d;color:#fff;justify-content:space-between;padding:1rem 2rem}.error-banner button{background:none;border:none;border-radius:3px;color:#fff;cursor:pointer;font-size:1.2rem;padding:.25rem;transition:background .2s ease}.error-banner button:hover{background:#fff3}.game-finished-screen{align-items:center;display:flex;justify-content:center;min-height:60vh;padding:2rem}.finish-content{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:20px;box-shadow:0 20px 40px #0000001a;padding:3rem;text-align:center}.finish-content h2{color:gold;font-size:2.5rem;margin-bottom:1rem}.finish-content p{color:#ffffffe6;font-size:1.2rem;margin-bottom:2rem}.finish-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.back-to-games-btn,.play-again-btn{border:none;border-radius:25px;cursor:pointer;font-size:1.1rem;font-weight:700;padding:1rem 2rem;transition:all .3s ease}.play-again-btn{background:linear-gradient(45deg,#2ecc71,#27ae60);color:#fff}.play-again-btn:hover{box-shadow:0 6px 20px #2ecc7166;transform:translateY(-2px)}.back-to-games-btn{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.back-to-games-btn:hover{box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.loading-screen{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:center;min-height:100vh}.loading-screen h2{font-size:2rem;text-align:center}@media (max-width:768px){.multiplayer-game-container{padding:.5rem}.multiplayer-game-wrapper{border-radius:15px;padding:1rem}.game-header-nav{padding:.4rem .8rem}.game-info{flex-wrap:wrap;justify-content:center}.game-info h1{flex:1 1 auto;font-size:1rem;min-width:0}.player-name{flex:0 0 auto;font-size:.75rem}.players-status-bar{grid-template-columns:1fr}.player-status{gap:.5rem}.game-status,.player-status{flex-direction:column;text-align:center}.finish-actions{align-items:center;flex-direction:column}.back-to-games-btn,.play-again-btn{max-width:300px;width:100%}}@media (max-width:480px){.multiplayer-game-header{padding:.75rem}.game-status h3{font-size:1.2rem}.game-details{align-items:center;flex-direction:column}.finish-content{padding:2rem 1rem}.finish-content h2{font-size:2rem}}.edit-profile-modal-backdrop{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.edit-profile-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.modal-header{background:#f8f9fa}.modal-header h2{color:#212529}.close-btn:hover{background:#e9ecef;color:#495057}.modal-form{padding:25px}.tier-badge{background:#ffc107;border-radius:12px;color:#212529;font-size:11px;padding:2px 8px}.input-help{align-items:center;display:flex;justify-content:space-between}.upgrade-hint{color:#ffc107;font-weight:500}.btn-cancel,.btn-save{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;min-width:120px;padding:12px 24px;transition:all .2s ease}.btn-save{background:#007bff;color:#fff}.btn-save:hover:not(:disabled){background:#0056b3;transform:translateY(-1px)}.btn-cancel:disabled,.btn-save:disabled{cursor:not-allowed;opacity:.6;transform:none}@media (max-width:768px){.edit-profile-modal-backdrop{padding:10px}.edit-profile-modal{max-height:95vh}.modal-header{padding:15px 20px}.modal-header h2{font-size:18px}.modal-form{padding:20px}.form-row{gap:0;grid-template-columns:1fr}.modal-actions{flex-direction:column-reverse;gap:10px}.btn-cancel,.btn-save{width:100%}}@media (max-width:480px){.edit-profile-modal-backdrop{padding:5px}.modal-header{padding:12px 15px}.modal-form{padding:15px}.form-input,.form-select,.form-textarea{padding:10px 12px}.input-help{align-items:flex-start;flex-direction:column;gap:2px}}.report-modal-backdrop{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.report-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0000004d;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{background:#fff5f5;border-bottom:1px solid #e9ecef;border-radius:12px 12px 0 0;padding:20px 25px}.modal-header h2{color:#dc3545;font-size:20px;font-weight:600}.close-btn{background:none;border:none;border-radius:4px;color:#6c757d;cursor:pointer;font-size:20px;padding:5px;transition:all .2s ease}.close-btn:hover{background:#f8d7da;color:#721c24}.report-user-info{background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:20px 25px}.report-user-info p{color:#495057;margin:0 0 10px}.report-user-info strong{color:#212529}.report-disclaimer{color:#6c757d;font-size:13px;font-style:italic}.report-form{padding:25px}.error-message{margin-bottom:20px}.form-section{margin-bottom:25px}.form-section h3{color:#212529;font-size:16px;font-weight:600;margin:0 0 15px}.category-grid{display:flex;flex-direction:column;gap:10px}.category-option{background:#fff;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;display:block;padding:15px;transition:all .2s ease}.category-option:hover{background:#f8f9ff;border-color:#007bff}.category-option.selected{background:#e7f3ff;border-color:#007bff}.category-option input[type=radio]{display:none}.category-content{align-items:flex-start;display:flex;gap:12px}.category-icon{flex-shrink:0;font-size:24px}.category-text{flex:1 1}.category-label{color:#212529;font-weight:500;margin-bottom:4px}.category-description{color:#6c757d;font-size:13px;line-height:1.4}.reason-textarea{border:2px solid #e9ecef;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:1.5;min-height:100px;padding:12px 15px;resize:vertical;transition:all .2s ease;width:100%}.reason-textarea:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff1a;outline:none}.textarea-help{color:#6c757d;font-size:12px;margin-top:5px;text-align:right}.modal-actions{border-top:1px solid #e9ecef;gap:12px;justify-content:flex-end;margin-top:30px;padding-top:20px}.btn-cancel,.btn-report{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;min-width:120px;padding:12px 24px;transition:all .2s ease}.btn-cancel{background:#6c757d;color:#fff}.btn-cancel:hover:not(:disabled){background:#545b62;transform:translateY(-1px)}.btn-report:hover:not(:disabled){background:#c82333;transform:translateY(-1px)}.btn-cancel:disabled,.btn-report:disabled{cursor:not-allowed;opacity:.6;transform:none}.report-success{padding:40px 25px;text-align:center}.success-icon{font-size:48px;margin-bottom:20px}.report-success h2{color:#28a745;font-size:24px;margin:0 0 15px}.report-success p{color:#495057;line-height:1.5;margin:0 0 15px}.success-note{color:#6c757d;font-size:14px;font-style:italic;margin-bottom:25px!important}.report-success .btn-primary{background:#007bff;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:12px 30px;transition:all .2s ease}.report-success .btn-primary:hover{background:#0056b3;transform:translateY(-1px)}@media (max-width:768px){.report-modal-backdrop{padding:10px}.report-modal{max-height:95vh}.modal-header{padding:15px 20px}.modal-header h2{font-size:18px}.report-user-info{padding:15px 20px}.report-form{padding:20px}.category-option{padding:12px}.category-content{gap:10px}.category-icon{font-size:20px}.modal-actions{flex-direction:column-reverse;gap:10px}.btn-cancel,.btn-report{width:100%}.report-success{padding:30px 20px}.success-icon{font-size:40px}.report-success h2{font-size:20px}}@media (max-width:480px){.report-modal-backdrop{padding:5px}.modal-header,.report-user-info{padding:12px 15px}.report-form{padding:15px}.category-option{padding:10px}.reason-textarea{padding:10px 12px}.report-success{padding:25px 15px}}.tier-badge{background:#fff;border:2px solid;border-radius:clamp(12px,2vw,16px);display:inline-flex;gap:clamp(4px,1vw,8px);padding:clamp(4px,1vw,8px) clamp(8px,2vw,12px);transition:all .2s ease}.tier-badge-clickable{cursor:pointer}.tier-badge-clickable:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.tier-badge-small{font-size:clamp(11px,2vw,13px);padding:3px 8px}.tier-badge-small .tier-badge-emoji{font-size:clamp(12px,2.5vw,14px)}.tier-badge-medium{font-size:clamp(13px,2.5vw,15px);padding:clamp(4px,1vw,6px) clamp(8px,2vw,12px)}.tier-badge-medium .tier-badge-emoji{font-size:clamp(16px,3vw,18px)}.tier-badge-large{font-size:clamp(15px,3vw,18px);padding:clamp(6px,1.5vw,10px) clamp(12px,2.5vw,16px)}.tier-badge-large .tier-badge-emoji{font-size:clamp(20px,4vw,24px)}.tier-badge-free{border-color:#95a5a6;color:#95a5a6}.tier-badge-starter{border-color:#3498db;color:#3498db}.tier-badge-premium{background:linear-gradient(135deg,#fff9e6,#fff);border-color:#f39c12;color:#f39c12}.tier-badge-emoji{line-height:1}.tier-badge-label{font-weight:700;letter-spacing:.5px;text-transform:uppercase}.profile-page{background:#f8f9fa;margin:0 auto;max-width:800px;min-height:100vh;padding:20px}.profile-navigation{margin-bottom:15px}.btn-back{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:8px;box-shadow:0 1px 3px #0000000d;color:#495057;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:8px 16px;transition:all .2s ease}.btn-back:hover{background:#f8f9fa;border-color:#007bff;box-shadow:0 2px 6px #0000001a;color:#007bff;transform:translateY(-1px)}.profile-error,.profile-loading{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{border:4px solid #e9ecef;border-top-color:#007bff;height:40px;margin-bottom:20px;width:40px}.profile-error h2{color:#dc3545;margin-bottom:10px}.profile-error p{color:#6c757d;margin-bottom:20px}.profile-header{align-items:flex-start;background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;display:flex;gap:30px;margin-bottom:20px;padding:30px}.profile-photo-section{flex-shrink:0}.profile-photo-container{height:120px;position:relative;width:120px}.profile-photo{object-fit:cover}.profile-photo,.profile-photo-placeholder{border:4px solid #e9ecef;border-radius:50%;height:100%;width:100%}.profile-photo-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center}.profile-initials{color:#fff;font-size:36px;font-weight:700}.profile-photo-actions{bottom:-5px;display:flex;gap:5px;position:absolute;right:-5px}.photo-delete-btn,.photo-upload-btn{align-items:center;background:#007bff;border:2px solid #fff;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:14px;height:32px;justify-content:center;transition:all .2s ease;width:32px}.photo-delete-btn:hover,.photo-upload-btn:hover{background:#0056b3;transform:scale(1.1)}.photo-delete-btn{background:#dc3545}.photo-delete-btn:hover{background:#c82333}.profile-name-section{margin-bottom:20px}.profile-name{color:#212529;font-size:28px;font-weight:700;margin:0 0 8px}.profile-country{color:#6c757d;font-size:14px}.profile-stats{border-bottom:1px solid #e9ecef;border-top:1px solid #e9ecef;display:flex;gap:30px;margin-bottom:20px;padding:15px 0}.stat{align-items:center;display:flex;flex-direction:column;text-align:center}.stat-number{color:#007bff;font-size:20px;font-weight:700}.stat-label{color:#6c757d;font-size:12px;letter-spacing:.5px;text-transform:uppercase}.profile-actions{margin-bottom:20px}.profile-external-actions{display:flex;flex-wrap:wrap;gap:10px}.btn-primary,.btn-report,.btn-secondary{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all .2s ease}.btn-primary:hover{background:#0056b3;transform:translateY(-1px)}.btn-secondary:hover{background:#545b62;transform:translateY(-1px)}.btn-report{background:#dc3545;color:#fff;justify-content:center;min-width:40px;padding:10px}.btn-report:hover{background:#c82333;transform:translateY(-1px)}.btn-upgrade{align-items:center;background:linear-gradient(135deg,#f39c12,#e67e22);border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;margin-left:10px;padding:10px 20px;transition:all .2s ease}.btn-upgrade:hover{background:linear-gradient(135deg,#e67e22,#d35400);box-shadow:0 4px 12px #f39c124d;transform:translateY(-1px)}.profile-completeness{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:15px}.completeness-bar{background:#e9ecef;border-radius:4px;height:8px;margin-bottom:8px;overflow:hidden;width:100%}.completeness-fill{background:linear-gradient(90deg,#28a745,#20c997);height:100%;transition:width .3s ease}.completeness-text{color:#6c757d;font-size:12px;font-weight:500}.profile-content{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.profile-tabs{background:#f8f9fa;border-bottom:1px solid #e9ecef;display:flex}.tab{background:#0000;border:none;border-bottom:3px solid #0000;color:#6c757d;cursor:pointer;flex:1 1;font-size:14px;font-weight:500;padding:15px 20px;transition:all .2s ease}.tab:hover{background:#e9ecef;color:#495057}.tab.active{background:#fff;border-bottom-color:#007bff;color:#007bff}.tab-content{padding:30px}.profile-create-post-section{border-bottom:1px solid #e9ecef;margin-bottom:clamp(1rem,2.5vw,1.5rem);padding:0 0 clamp(1rem,2.5vw,1.5rem)}.create-post-btn{background:#fff;border:1px solid #ddd;border-radius:clamp(.5rem,1.5vw,.75rem);color:#666;cursor:pointer;font-size:clamp(.875rem,2vw,1rem);padding:clamp(.75rem,2vw,1rem);text-align:left;transition:all .2s ease;width:100%}.create-post-btn:hover{background:#f8fafc;border-color:#4a90e2}.posts-loading{align-items:center;color:#6c757d;padding:40px}.posts-grid,.posts-loading{display:flex;flex-direction:column}.posts-grid{gap:20px}.no-posts{color:#6c757d;padding:60px 20px;text-align:center}.no-posts p{font-size:16px;margin:0 0 1.5rem}.btn-create-first-post{align-items:center;background:#4a90e2;border:none;border-radius:clamp(.375rem,1vw,.5rem);color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:clamp(.75rem,2vw,1rem) clamp(1rem,2.5vw,1.5rem);transition:background .2s ease}.btn-create-first-post:hover{background:#3a7bc8;transform:translateY(-1px)}.profile-about{display:flex;flex-direction:column;gap:30px}.about-section h3,.profile-details h3{color:#212529;font-size:18px;font-weight:600;margin:0 0 15px}.about-text{color:#495057;line-height:1.6;margin:0}.about-empty{color:#6c757d;font-style:italic;margin:0}.details-grid{grid-gap:15px;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.detail-item{border-bottom:1px solid #f1f3f4;padding:12px 0}.detail-item:last-child{border-bottom:none}.detail-label{color:#6c757d;font-size:14px}.detail-value{color:#212529;font-size:14px}.dev-wallet-section{background:linear-gradient(135deg,#ffd7001a,#ff95000d);border:2px solid #ffd7004d;border-radius:12px;margin-top:30px;padding:20px}.dev-wallet-section h3{color:#ff9500;font-size:18px;font-weight:600;margin:0 0 15px}.wallet-balance{display:flex;flex-direction:column;gap:12px}.balance-display{align-items:center;background:#fffc;border:1px solid #ffd70033;border-radius:8px;display:flex;justify-content:space-between;padding:15px 20px}.balance-label{color:#666;font-size:14px;font-weight:600}.balance-amount{color:#ff9500;font-family:Courier New,monospace;font-size:24px;font-weight:700}.wallet-note{color:#666;font-size:13px;line-height:1.5;margin:0}.wallet-note-small{color:#999;font-size:11px;font-style:italic;margin:0}@media (max-width:768px){.profile-page{padding:15px}.profile-header{align-items:center;flex-direction:column;gap:20px;padding:20px;text-align:center}.profile-photo-container{height:100px;width:100px}.profile-name{font-size:24px}.profile-stats{gap:20px}.profile-external-actions,.profile-stats{justify-content:center}.tab-content{padding:20px}.details-grid{grid-template-columns:1fr}.detail-item{align-items:flex-start;flex-direction:column;gap:5px}}@media (max-width:480px){.profile-page{padding:10px}.profile-header{padding:15px}.profile-stats{gap:15px}.stat-number{font-size:18px}.stat-label{font-size:11px}.tab{font-size:13px;padding:12px 15px}.tab-content{padding:15px}}.profile-view{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}@media (max-width:768px){.profile-view{padding:10px}}.onboarding-wizard{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.onboarding-container{animation:wizardSlideIn .5s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}@keyframes wizardSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.progress-section{border-bottom:1px solid #f1f3f4;padding:25px 30px 20px}.progress-bar{background:#f1f3f4;border-radius:4px;height:8px;margin-bottom:10px;width:100%}.progress-fill{background:linear-gradient(90deg,#28a745,#20c997);border-radius:4px;transition:width .4s ease}.progress-text{color:#6c757d;font-size:14px;font-weight:500;text-align:center}.error-message{background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;color:#721c24;font-size:14px;margin:20px 30px 0;padding:12px 15px}.onboarding-step{padding:30px}.step-header{margin-bottom:30px;text-align:center}.step-header h2{color:#212529;font-size:24px;font-weight:600;margin:0 0 10px}.step-header p{color:#6c757d;line-height:1.5;margin:0}.step-content{margin:0 auto;max-width:400px}.form-group,.form-row{margin-bottom:20px}.form-row{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.form-label{align-items:center;color:#495057;display:flex;font-size:14px;font-weight:500;gap:8px;margin-bottom:8px}.optional-badge{background:#e9ecef;border-radius:12px;color:#6c757d;font-size:11px;font-weight:600;padding:2px 8px;text-transform:uppercase}.form-input,.form-select,.form-textarea{background:#fff;border:2px solid #e9ecef;border-radius:8px;box-sizing:border-box;font-size:14px;padding:12px 15px;transition:all .2s ease;width:100%}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff1a;outline:none}.form-textarea{font-family:inherit;line-height:1.5;min-height:100px;resize:vertical}.input-help{color:#6c757d;font-size:12px;margin-top:5px}.photo-upload-section{display:flex;justify-content:center;margin-bottom:20px}.photo-upload-area{align-items:center;background:#f8f9fa;border:3px dashed #dee2e6;border-radius:12px;cursor:pointer;display:flex;height:200px;justify-content:center;position:relative;transition:all .2s ease;width:200px}.photo-upload-area:hover{background:#f0f8ff;border-color:#007bff}.upload-placeholder{color:#6c757d;text-align:center}.upload-icon{font-size:48px;margin-bottom:10px}.upload-placeholder p{font-size:14px;margin:5px 0}.upload-hint{color:#adb5bd!important;font-size:12px!important}.file-input{cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.photo-preview{height:200px;position:relative;width:200px}.preview-image{border:3px solid #e9ecef;border-radius:12px;height:100%;object-fit:cover;width:100%}.remove-photo-btn{align-items:center;background:#dc3545;border:none;border-radius:50%;box-shadow:0 2px 8px #0003;color:#fff;cursor:pointer;display:flex;font-size:12px;height:32px;justify-content:center;position:absolute;right:-10px;top:-10px;transition:all .2s ease;width:32px}.remove-photo-btn:hover{background:#c82333;transform:scale(1.1)}.completion-preview{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;margin-top:30px;padding:20px}.completion-preview h3{color:#495057;font-size:16px;margin:0 0 15px;text-align:center}.profile-card{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:8px;display:flex;gap:15px;padding:15px}.profile-avatar{flex-shrink:0;height:60px;width:60px}.avatar-image{object-fit:cover}.avatar-image,.avatar-placeholder{border-radius:50%;height:100%;width:100%}.avatar-placeholder{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;font-size:24px;font-weight:700;justify-content:center}.profile-info{flex:1 1}.profile-info h4{color:#212529;font-size:16px;margin:0 0 5px}.profile-info p{color:#6c757d;font-size:13px;margin:0 0 3px}.bio{color:#495057!important;font-style:italic}.onboarding-actions{align-items:center;border-top:1px solid #f1f3f4;display:flex;justify-content:space-between;padding:20px 30px 30px}.action-left,.action-right{align-items:center;display:flex;gap:12px}.btn-complete,.btn-primary,.btn-secondary,.btn-skip{align-items:center;border:none;border-radius:8px;cursor:pointer;display:inline-flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;min-width:100px;padding:12px 24px;transition:all .2s ease}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover:not(:disabled){background:#545b62;transform:translateY(-1px)}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover:not(:disabled){background:#0056b3;transform:translateY(-1px)}.btn-skip{background:#0000;border:1px solid #dee2e6;color:#6c757d}.btn-skip:hover:not(:disabled){background:#f8f9fa;color:#495057}.btn-complete{background:#28a745;color:#fff;min-width:140px}.btn-complete:hover:not(:disabled){background:#218838;transform:translateY(-1px)}.btn-complete:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-skip:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-spinner{animation:spin 1s linear infinite;border:2px solid #0000;border-radius:50%;border-top-color:currentcolor;height:16px;width:16px}@media (max-width:768px){.onboarding-wizard{padding:10px}.onboarding-container{max-height:95vh}.progress-section{padding:20px 25px 15px}.onboarding-step{padding:25px}.step-header h2{font-size:20px}.form-row{gap:0;grid-template-columns:1fr}.photo-preview,.photo-upload-area{height:150px;width:150px}.onboarding-actions{flex-direction:column;gap:15px;padding:15px 25px 25px}.action-left,.action-right{justify-content:center;width:100%}.btn-complete,.btn-primary,.btn-secondary,.btn-skip{flex:1 1;min-width:auto}}@media (max-width:480px){.onboarding-wizard{padding:5px}.progress-section{padding:15px 20px 12px}.onboarding-step{padding:20px}.step-header h2{font-size:18px}.photo-preview,.photo-upload-area{height:120px;width:120px}.upload-icon{font-size:36px}.onboarding-actions{padding:12px 20px 20px}.profile-card{flex-direction:column;gap:10px;text-align:center}.profile-avatar{align-self:center}}.onboarding-view{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;justify-content:center;min-height:100vh;padding:20px}@media (max-width:768px){.onboarding-view{align-items:flex-start;padding:40px 10px 10px}}.token-purchase-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;padding:clamp(1rem,2vw,2rem);position:fixed;right:0;top:0;z-index:1000}.token-purchase-modal{animation:slideUp .3s ease-out;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:clamp(12px,2vw,20px);box-shadow:0 20px 60px #00000080;max-height:90vh;max-width:min(500px,95vw);overflow-y:auto;position:relative;width:100%}.token-purchase-modal-header{background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 0 0;padding:clamp(1.5rem,3vw,2rem);position:relative;text-align:center}.token-purchase-icon{animation:bounce .6s ease-out;font-size:clamp(3rem,8vw,4rem);margin-bottom:.5rem}.token-purchase-modal-header h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);font-weight:600;margin:0}.modal-discount-badge{background:#10b981e6;border-radius:clamp(12px,2vw,16px);color:#fff;display:inline-block;font-size:clamp(.75rem,2vw,.875rem);font-weight:600;margin-top:.5rem;padding:clamp(.25rem,1vw,.375rem) clamp(.75rem,2vw,1rem)}.token-purchase-close-btn{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:clamp(1.5rem,3vw,2rem);height:clamp(32px,6vw,40px);justify-content:center;position:absolute;right:clamp(1rem,2vw,1.5rem);top:clamp(1rem,2vw,1.5rem);transition:all .2s;width:clamp(32px,6vw,40px)}.token-purchase-close-btn:hover:not(:disabled){background:#fff3;transform:rotate(90deg)}.token-purchase-close-btn:disabled{cursor:not-allowed;opacity:.5}.token-purchase-price-section,.token-purchase-summary{padding:clamp(1.5rem,3vw,2rem)}.token-purchase-price-section{background:linear-gradient(135deg,#f59e0b1a,#d977061a);border:2px solid #f59e0b4d;border-radius:clamp(8px,1.5vw,12px);margin-bottom:clamp(1.5rem,3vw,2rem);text-align:center}.token-purchase-price-main{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.token-purchase-price-amount{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f59e0b,#d97706);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:clamp(2rem,5vw,3rem);font-weight:700}.token-purchase-price-usd{color:#94a3b8;font-size:clamp(1.125rem,3vw,1.25rem);font-weight:500}.token-purchase-savings{color:#10b981;font-size:clamp(.875rem,2vw,1rem);font-weight:600;margin-top:.5rem}.token-purchase-details-section{margin-bottom:clamp(1.5rem,3vw,2rem)}.token-purchase-details-section h3{color:#fff;font-size:clamp(1.125rem,2.5vw,1.25rem);margin-bottom:1rem}.token-purchase-details-list{list-style:none;margin:0;padding:0}.token-purchase-details-list li{align-items:center;border-bottom:1px solid #ffffff0d;color:#e2e8f0;display:flex;font-size:clamp(.875rem,2vw,1rem);gap:.75rem;padding:clamp(.5rem,1.5vw,.75rem) 0}.token-purchase-details-list li:last-child{border-bottom:none}.detail-check{color:#10b981;flex-shrink:0;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700}.mock-token-payment-notice{background:linear-gradient(135deg,#fbbf241a,#f59e0b1a);border:2px solid #fbbf244d;border-radius:clamp(8px,1.5vw,12px);display:flex;gap:clamp(.75rem,2vw,1rem);margin-bottom:clamp(1rem,2vw,1.5rem);padding:clamp(1rem,2vw,1.5rem)}.mock-token-payment-notice p{color:#fbbf24;font-size:clamp(.875rem,2vw,.95rem);line-height:1.5;margin:0}.mock-token-payment-notice strong{color:#fcd34d}.token-purchase-error{align-items:center;background:linear-gradient(135deg,#ef44441a,#dc26261a);border:2px solid #ef44444d;border-radius:clamp(8px,1.5vw,12px);color:#fca5a5;display:flex;font-size:clamp(.875rem,2vw,.95rem);gap:clamp(.75rem,2vw,1rem);margin-top:1rem;padding:clamp(1rem,2vw,1.5rem)}.token-purchase-modal-actions{display:flex;gap:clamp(.75rem,2vw,1rem);padding:0 clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2rem)}.token-purchase-btn-cancel,.token-purchase-btn-confirm{border:none;border-radius:clamp(8px,1.5vw,12px);cursor:pointer;flex:1 1;font-size:clamp(.95rem,2vw,1.05rem);font-weight:600;min-height:44px;padding:clamp(.875rem,2vw,1.125rem) clamp(1.5rem,3vw,2rem);transition:all .2s}.token-purchase-btn-cancel{background:#ffffff1a;border:2px solid #fff3;color:#fff}.token-purchase-btn-cancel:hover:not(:disabled){background:#ffffff26;transform:translateY(-2px)}.token-purchase-btn-confirm{align-items:center;background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 15px #f59e0b4d;color:#fff;display:flex;gap:.5rem;justify-content:center}.token-purchase-btn-confirm:hover:not(:disabled){box-shadow:0 6px 20px #f59e0b66;transform:translateY(-2px)}.token-purchase-btn-confirm:disabled{cursor:not-allowed;opacity:.7;transform:none}.token-purchase-success{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px;padding:clamp(2rem,4vw,3rem);text-align:center}.token-purchase-success h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);margin-bottom:.5rem}.token-purchase-success p{color:#94a3b8;font-size:clamp(1rem,2.5vw,1.125rem);margin:.5rem 0}.token-purchase-success strong{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#f59e0b,#d97706);-webkit-background-clip:text;background-clip:text;color:#fff}@media (max-width:480px){.token-purchase-modal-actions{flex-direction:column}.token-purchase-btn-cancel,.token-purchase-btn-confirm{width:100%}}.tournament-tokens-view{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.tokens-content{display:flex;flex-direction:column;gap:1.5rem;margin:0 auto;max-width:600px;padding:clamp(1rem,4vw,2rem)}.balance-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 8px 24px #00000026;display:flex;gap:1.25rem;padding:clamp(1.25rem,5vw,2rem)}.balance-icon{font-size:clamp(3rem,10vw,4rem);line-height:1}.balance-info h2{color:#333;font-size:clamp(1.1rem,4vw,1.4rem);margin:0 0 .5rem}.balance-amount{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,8vw,3rem);font-weight:900;margin:.25rem 0}.balance-amount.loading{animation:pulse 1.5s ease-in-out infinite;opacity:.5}.balance-description{color:#666;font-size:clamp(.85rem,3vw,.95rem);line-height:1.4;margin:.5rem 0 0}.coming-soon-card{background:#fffffff2;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(1.25rem,5vw,2rem)}.coming-soon-card h3{color:#333;font-size:clamp(1.2rem,4.5vw,1.5rem);margin:0 0 1rem}.coming-soon-card>p{color:#555;font-size:clamp(.9rem,3.5vw,1rem);line-height:1.6;margin:0 0 1.5rem}.feature-preview{background:#f8f9fa;border-radius:12px;margin-bottom:1.25rem;padding:1.25rem}.feature-preview h4{color:#667eea;font-size:clamp(1rem,3.5vw,1.1rem);margin:0 0 .75rem}.feature-preview ul{list-style:none;margin:0;padding-left:1.5rem}.feature-preview li{color:#555;font-size:clamp(.85rem,3vw,.95rem);line-height:1.5;margin-bottom:.5rem;position:relative}.feature-preview li:before{color:#667eea;content:"•";font-weight:700;left:-1.25rem;position:absolute}.beta-notice{padding:1rem clamp(1rem,4vw,1.5rem)}.beta-notice p{font-size:clamp(.85rem,3vw,.95rem);line-height:1.5;margin:0}.beta-notice strong{font-weight:700}.token-packages-section{background:#fffffff2;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(1.25rem,5vw,2rem)}.token-packages-section h3{color:#333;font-size:clamp(1.2rem,4.5vw,1.5rem);margin:0 0 .5rem;text-align:center}.packages-description{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin:0 0 1.5rem;text-align:center}.packages-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:1.25rem}.package-card{background:#fff;border:3px solid #e0e0e0;border-radius:16px;overflow:hidden;padding:1.25rem 1rem;position:relative;text-align:center;transition:all .3s ease}.package-card.popular{border-color:#667eea;box-shadow:0 4px 16px #667eea33}.package-card:hover{box-shadow:0 8px 20px #00000026;transform:translateY(-4px)}.popular-badge{background:linear-gradient(135deg,#ff9a56,#ff6a88);right:.5rem}.discount-badge,.popular-badge{border-radius:6px;color:#fff;font-size:clamp(.65rem,2.5vw,.75rem);font-weight:700;padding:.25rem .5rem;position:absolute;top:.5rem}.discount-badge{background:#4caf50;left:.5rem}.package-tokens{margin-bottom:1rem}.package-icon{font-size:clamp(2.5rem,8vw,3.5rem);margin-bottom:.5rem}.package-amount{color:#667eea;font-size:clamp(2rem,7vw,2.5rem);font-weight:900;line-height:1}.package-label{color:#666;font-size:clamp(.85rem,3vw,.95rem);margin-top:.25rem}.package-price{margin-bottom:.75rem}.price-pi{color:#333;font-size:clamp(1.1rem,4vw,1.3rem);font-weight:700}.price-usd{color:#999;font-size:clamp(.8rem,3vw,.9rem);margin-top:.25rem}.package-savings{color:#4caf50;font-size:clamp(.75rem,2.8vw,.85rem);font-weight:600;margin-bottom:.75rem;min-height:2rem}.purchase-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:clamp(.85rem,3vw,.95rem);font-weight:700;padding:.75rem 1rem;transition:all .3s ease;width:100%}.purchase-button:hover:not(:disabled){box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.purchase-button:disabled{cursor:not-allowed;opacity:.6}.free-tokens-section{background:#fffffff2;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(1.25rem,5vw,2rem)}.free-tokens-section h3{color:#333;font-size:clamp(1.1rem,4vw,1.3rem);margin:0 0 1.25rem;text-align:center}.tier-options{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.tier-option{align-items:center;background:#f8f9fa;border:2px solid #0000;border-radius:12px;display:flex;flex-direction:column;padding:1.25rem;text-align:center;transition:all .3s ease}.tier-option.premium{background:linear-gradient(135deg,#fff9e6,#ffe6f0);border-color:gold}.tier-option:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.tier-icon{font-size:clamp(2.5rem,8vw,3rem);margin-bottom:.75rem}.tier-info{width:100%}.tier-info h4{color:#333;font-size:clamp(1rem,3.5vw,1.2rem);margin:0 0 .5rem}.tier-desc{color:#666;font-size:clamp(.8rem,3vw,.9rem);margin:0 0 .75rem}.tier-tokens{background:linear-gradient(135deg,#667eea,#764ba2);font-weight:700;margin-bottom:.75rem;padding:.5rem .75rem}.tier-button,.tier-tokens{border-radius:8px;color:#fff;font-size:clamp(.85rem,3vw,.95rem)}.tier-button{background:#667eea;font-weight:600;padding:.7rem 1rem}.tier-button.premium{background:linear-gradient(135deg,gold,#fa0);color:#333}.tier-button:hover{box-shadow:0 4px 12px #0003}.beta-notice{align-items:flex-start;background:linear-gradient(135deg,#ff9a56,#ff6a88);border:2px solid #ffffff4d;border-radius:12px;color:#fff;display:flex;gap:1rem;padding:1.25rem}.notice-icon{font-size:clamp(2rem,6vw,2.5rem);line-height:1}.notice-content h4{font-size:clamp(1rem,3.5vw,1.2rem);font-weight:700;margin:0 0 .5rem}.notice-content p{font-size:clamp(.85rem,3vw,.95rem);line-height:1.5;margin:0 0 .75rem}.notice-content p:last-child{margin-bottom:0}.notice-highlight{font-size:clamp(.9rem,3.2vw,1rem);font-weight:700}.navigation-buttons{display:flex;flex-wrap:wrap;gap:1rem}.nav-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:12px;color:#fff;cursor:pointer;flex:1 1;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600;min-width:200px;padding:.9rem 1.5rem;transition:all .3s ease}.nav-button:hover{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}.nav-button:active{transform:translateY(0)}@media (min-width:640px){.balance-card{gap:1.75rem}.token-sources{gap:1.25rem}}@media (prefers-reduced-motion:reduce){.back-button:hover,.balance-amount.loading,.token-source:hover{animation:none;transform:none}}.tournament-history-view{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.history-content{display:flex;flex-direction:column;gap:1.5rem;margin:0 auto;max-width:900px;padding:clamp(1rem,4vw,1.5rem)}.stats-summary{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.stat-card{align-items:center;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;display:flex;gap:.75rem;padding:1rem;transition:all .3s ease}.stat-card:hover{box-shadow:0 6px 16px #00000026;transform:translateY(-2px)}.stat-icon{font-size:clamp(2rem,8vw,2.5rem);line-height:1}.stat-info{flex:1 1;min-width:0}.stat-label{color:#666;font-size:clamp(.75rem,3vw,.85rem);margin-bottom:.25rem}.stat-value{color:#333;font-size:clamp(1.3rem,5vw,1.6rem);font-weight:900}.filter-tabs{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;display:flex;gap:.5rem;overflow-x:auto;padding:.5rem;scrollbar-width:thin}.filter-tab,.filter-tabs{background:#ffffff1a;border:1px solid #fff3}.filter-tab{border-radius:8px;color:#ffffffb3;cursor:pointer;flex:1 1;font-size:clamp(.85rem,3.5vw,.95rem);font-weight:600;min-width:max-content;padding:.65rem 1rem;transition:all .3s ease}.filter-tab.active{background:#fff;border-color:#fff;box-shadow:0 2px 8px #00000026;color:#667eea}.filter-tab:hover:not(.active){background:#fff3;border-color:#ffffff4d}.history-list{display:flex;flex-direction:column;gap:1rem}.history-card{background:#fff;border-radius:16px;box-shadow:0 4px 12px #0000001a;padding:clamp(1rem,4vw,1.25rem);transition:all .3s ease}.history-card:hover{box-shadow:0 6px 16px #00000026;transform:translateY(-2px)}.card-header{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;margin-bottom:1rem}.tier-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:clamp(.85rem,3vw,.95rem);font-weight:700;gap:.5rem;padding:.5rem .75rem}.status-badge,.tier-badge{align-items:center;border-radius:8px;display:flex}.status-badge{font-size:clamp(.8rem,3vw,.9rem);gap:.4rem;padding:.4rem .75rem}.status-badge.waiting{background:#fff3cd;color:#856404}.status-badge.active{background:#d1ecf1;color:#0c5460}.status-badge.completed{background:#d4edda;color:#155724}.status-badge.cancelled{background:#f8d7da;color:#721c24}.status-icon{font-size:1rem;line-height:1}.card-body{display:flex;flex-direction:column;gap:.75rem}.game-type{align-items:center;color:#333;display:flex;font-size:clamp(1rem,4vw,1.1rem);font-weight:600;gap:.5rem}.tournament-details{display:flex;flex-wrap:wrap;gap:1.5rem}.detail{display:flex;font-size:clamp(.85rem,3.5vw,.95rem);gap:.35rem}.card-actions{border-top:1px solid #e0e0e0;margin-top:1rem;padding-top:1rem}.rejoin-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600;padding:.85rem 1.25rem;transition:all .3s ease;width:100%}.rejoin-button:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.rejoin-button:active{transform:translateY(0)}.history-loading{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,3rem);text-align:center}.history-loading p{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin:0}.history-error{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,3rem);text-align:center}.history-error p{color:#e74c3c;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600;margin:0 0 1.5rem}.no-history{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,4rem) clamp(1rem,4vw,2rem);text-align:center}.no-history-icon{font-size:clamp(3rem,12vw,5rem);margin-bottom:1rem}.no-history h3{color:#333;font-size:clamp(1.2rem,5vw,1.5rem);margin:0 0 .75rem}.no-history p{color:#666;font-size:clamp(.9rem,3.5vw,1rem);line-height:1.4;margin:.5rem 0 1.5rem}.enter-tournament-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;font-size:clamp(1rem,4vw,1.1rem);font-weight:700;padding:1rem 2rem;transition:all .3s ease}.enter-tournament-button:hover{box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.enter-tournament-button:active{transform:translateY(0)}.back-button{margin:.5rem auto 0}.back-button:active{transform:translateY(0)}@media (min-width:640px){.stats-summary{grid-template-columns:repeat(3,1fr)}.card-header{flex-wrap:nowrap}}@media (prefers-reduced-motion:reduce){.back-button:hover,.enter-tournament-button:hover,.history-card:hover,.loading-spinner,.rejoin-button:hover,.retry-button:hover,.stat-card:hover{animation:none;transform:none}}.tournament-lobby{display:flex;flex-direction:column;gap:1.5rem;padding:clamp(1rem,4vw,1.5rem)}.tournament-lobby.compact{gap:1rem;padding:.75rem}.game-type-filter{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;display:flex;gap:.75rem;padding:.5rem}.filter-button,.game-type-filter{background:#ffffff1a;border:1px solid #fff3}.filter-button{border-radius:8px;color:#ffffffb3;cursor:pointer;flex:1 1;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600;padding:.75rem 1rem;transition:all .3s ease}.filter-button.active{background:#fff;border-color:#fff;box-shadow:0 2px 8px #00000026;color:#667eea}.filter-button:hover:not(.active){background:#fff3;border-color:#ffffff4d}.tournaments-grid{grid-gap:1.25rem;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.tournament-card{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;cursor:pointer;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,5vw,1.5rem);transition:all .3s ease}.tournament-card:hover{box-shadow:0 8px 24px #667eea33;transform:translateY(-4px)}.tournament-card:active{transform:translateY(-2px)}.tournament-tier{align-items:center;align-self:flex-start;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px;color:#fff;display:flex;font-size:clamp(.85rem,3vw,.95rem);font-weight:700;gap:.5rem;padding:.5rem .75rem}.tier-icon{font-size:1.2rem;line-height:1}.tournament-cost{background:#f8f9fa;border-radius:10px;padding:.75rem;text-align:center}.cost-label{color:#666;font-size:clamp(.8rem,3vw,.85rem);margin-bottom:.25rem}.cost-value{color:#333;font-size:clamp(1.1rem,4vw,1.3rem);font-weight:700}.tournament-prize{align-items:center;background:linear-gradient(135deg,gold,#ffed4e);border-radius:10px;display:flex;gap:.75rem;padding:.75rem}.prize-icon{font-size:clamp(2rem,6vw,2.5rem);line-height:1}.prize-info{flex:1 1}.prize-label{color:#666;font-size:clamp(.75rem,3vw,.85rem);margin-bottom:.15rem}.prize-value{color:#333;font-size:clamp(1.3rem,5vw,1.6rem);font-weight:900}.tournament-players{grid-gap:.5rem .75rem;background:#f0f4ff;border-radius:10px;display:grid;gap:.5rem .75rem;grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:.75rem}.players-icon{align-self:center;font-size:clamp(2rem,6vw,2.5rem);grid-row:1/3;line-height:1}.players-info{align-items:baseline;display:flex;justify-content:space-between}.players-label{color:#666;font-size:clamp(.75rem,3vw,.85rem)}.players-count{color:#333;font-size:clamp(1rem,4vw,1.2rem);font-weight:700}.players-bar{background:#667eea33;border-radius:4px;grid-column:2;height:8px;overflow:hidden}.players-progress{background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;height:100%;transition:width .5s ease}.join-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;box-shadow:0 4px 12px #667eea4d;color:#fff;cursor:pointer;font-size:clamp(1rem,4vw,1.1rem);font-weight:700;padding:1rem 1.5rem;transition:all .3s ease}.join-button:hover{box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.join-button:active{transform:translateY(0)}.tournament-time{color:#999;font-size:clamp(.75rem,3vw,.85rem);font-style:italic;text-align:center}.no-tournaments{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,4rem) clamp(1rem,4vw,2rem);text-align:center}.no-tournaments-icon{font-size:clamp(3rem,12vw,5rem);margin-bottom:1rem}.no-tournaments h3{color:#333;font-size:clamp(1.2rem,5vw,1.5rem);margin:0 0 .75rem}.no-tournaments p{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin:.5rem 0}.no-tournaments .hint{background:linear-gradient(135deg,#667eea20,#764ba220);border-radius:8px;color:#667eea;font-style:normal;font-weight:600;margin-top:1rem;padding:.75rem 1rem}.create-hint{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:1px solid #fff3;border-radius:10px;color:#fff;font-size:clamp(.85rem,3vw,.95rem);line-height:1.4;padding:1rem;text-align:center}.lobby-loading{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,3rem);text-align:center}.loading-spinner{animation:spin 2s linear infinite;font-size:clamp(2.5rem,10vw,4rem)}.lobby-loading p{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin:0}.lobby-error{background:#fff;border-radius:16px;box-shadow:0 4px 16px #0000001a;padding:clamp(2rem,8vw,3rem);text-align:center}.error-icon{font-size:clamp(2.5rem,10vw,4rem)}.lobby-error p{color:#e74c3c;margin:0 0 1.5rem}.lobby-error p,.retry-button{font-size:clamp(.9rem,3.5vw,1rem);font-weight:600}.retry-button{background:#667eea;border:none;border-radius:8px;color:#fff;cursor:pointer;padding:.75rem 1.5rem;transition:all .3s ease}.retry-button:hover{background:#5568d3;box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.retry-button:active{transform:translateY(0)}@media (min-width:640px){.tournaments-grid{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@media (min-width:1024px){.tournaments-grid{grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}}@media (prefers-reduced-motion:reduce){.join-button:hover,.loading-spinner,.retry-button:hover,.tournament-card:hover{animation:none;transform:none}.players-progress{transition:none}}.tournament-entry-modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.tournament-entry-modal{animation:slideUp .3s ease;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.modal-header{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px 20px 0 0;color:#fff;display:flex;justify-content:space-between;padding:clamp(1.25rem,5vw,1.5rem)}.modal-header h2{font-size:clamp(1.2rem,5vw,1.5rem);font-weight:700;margin:0}.close-button{align-items:center;background:#fff3;border:1px solid #ffffff4d;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:36px;justify-content:center;line-height:1;transition:all .3s ease;width:36px}.close-button:hover{background:#ffffff4d;transform:scale(1.1)}.close-button:active{transform:scale(.95)}.modal-game-type{align-items:center;background:#f8f9fa;border-radius:10px;display:flex;font-size:clamp(.95rem,4vw,1.05rem);font-weight:600;gap:.5rem;margin:1.25rem clamp(1.25rem,5vw,1.5rem);padding:.75rem 1rem}.game-icon{line-height:1}.modal-details{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;padding:0 clamp(1.25rem,5vw,1.5rem)}.detail-card{align-items:center;background:#f8f9fa;border-radius:12px;display:flex;gap:1rem;padding:1rem;transition:all .3s ease}.detail-card:hover{background:#f0f4ff;transform:translateX(4px)}.detail-icon{font-size:clamp(2rem,8vw,2.5rem);line-height:1}.detail-info{flex:1 1}.detail-label{font-size:clamp(.75rem,3vw,.85rem);margin-bottom:.25rem}.detail-value{font-size:clamp(1.1rem,4.5vw,1.3rem);font-weight:700}.beta-disclaimer{background:linear-gradient(135deg,#ff9a56,#ff6a88);border:2px solid #ffffff4d;border-radius:12px;color:#fff;display:flex;gap:.75rem;margin:0 clamp(1.25rem,5vw,1.5rem) 1.25rem;padding:1rem clamp(1.25rem,5vw,1.5rem)}.disclaimer-icon{font-size:1.5rem;line-height:1}.disclaimer-content{flex:1 1;font-size:clamp(.85rem,3.5vw,.95rem);line-height:1.5}.disclaimer-content strong{font-weight:700}.eligibility-loading{padding:1.5rem clamp(1.25rem,5vw,1.5rem);text-align:center}.spinner{animation:spin 2s linear infinite;font-size:clamp(2rem,8vw,3rem);margin-bottom:.75rem}.eligibility-loading p{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin:0}.eligibility-success{background:linear-gradient(135deg,#4caf5020,#8bc34a20);border:2px solid #4caf50;border-radius:12px;display:flex;gap:.75rem;margin:0 clamp(1.25rem,5vw,1.5rem) 1.25rem;padding:1rem clamp(1.25rem,5vw,1.5rem)}.success-icon{font-size:1.5rem;line-height:1}.success-content{flex:1 1}.success-title{color:#2e7d32;font-size:clamp(1rem,4vw,1.1rem);font-weight:700;margin-bottom:.35rem}.success-balance{color:#558b2f;font-size:clamp(.85rem,3.5vw,.95rem)}.eligibility-error{background:linear-gradient(135deg,#ff525220,#ff634720);border:2px solid #ff5252;border-radius:12px;display:flex;gap:.75rem;margin:0 clamp(1.25rem,5vw,1.5rem) 1.25rem;padding:1rem clamp(1.25rem,5vw,1.5rem)}.error-icon{font-size:1.5rem;line-height:1}.error-content{flex:1 1}.error-title{color:#c62828;font-size:clamp(1rem,4vw,1.1rem);margin-bottom:.35rem}.error-reason{color:#d32f2f;font-size:clamp(.85rem,3.5vw,.95rem);margin-bottom:.75rem}.buy-tokens-button,.upgrade-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600;margin-top:.5rem;padding:.75rem 1.25rem;transition:all .3s ease;width:100%}.buy-tokens-button:hover,.upgrade-button:hover{box-shadow:0 4px 12px #667eea4d;transform:translateY(-2px)}.buy-tokens-button:active,.upgrade-button:active{transform:translateY(0)}.entry-error{background:#fff3f3;border:2px solid #ff5252;border-radius:12px;color:#c62828;display:flex;gap:.75rem;margin:0 clamp(1.25rem,5vw,1.5rem) 1.25rem;padding:1rem clamp(1.25rem,5vw,1.5rem)}.error-message{flex:1 1;font-size:clamp(.9rem,3.5vw,1rem);font-weight:600}.modal-actions{display:flex;gap:.75rem;padding:0 clamp(1.25rem,5vw,1.5rem) 1.25rem}.cancel-button,.enter-button{border:none;border-radius:12px;cursor:pointer;flex:1 1;font-size:clamp(.95rem,4vw,1.05rem);font-weight:700;padding:1rem 1.5rem;transition:all .3s ease}.cancel-button{background:#e0e0e0;color:#666}.cancel-button:hover:not(:disabled){background:#d0d0d0;transform:translateY(-2px)}.enter-button{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 12px #667eea4d;color:#fff}.enter-button:hover:not(:disabled){box-shadow:0 6px 16px #667eea66;transform:translateY(-2px)}.cancel-button:disabled,.enter-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.cancel-button:active:not(:disabled),.enter-button:active:not(:disabled){transform:translateY(0)}.modal-footer{padding:0 clamp(1.25rem,5vw,1.5rem) 1.5rem}.modal-footer p{color:#999;font-size:clamp(.8rem,3vw,.9rem);line-height:1.4;margin:0;text-align:center}@media (min-width:640px){.modal-details{display:grid;grid-template-columns:repeat(3,1fr)}.detail-card{flex-direction:column;gap:.5rem;text-align:center}.detail-card:hover{transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.buy-tokens-button:hover,.cancel-button:hover,.close-button:hover,.detail-card:hover,.enter-button:hover,.spinner,.tournament-entry-modal,.tournament-entry-modal-overlay,.upgrade-button:hover{animation:none;transform:none}}.tournament-disclaimer-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;padding:clamp(1rem,3vw,2rem);position:fixed;right:0;top:0;z-index:10000}.tournament-disclaimer-modal{animation:slideUp .3s ease;background:linear-gradient(135deg,#fff,#f8f9fa);border-radius:clamp(1rem,2.5vw,1.5rem);box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}.disclaimer-header{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.5rem) 0 0;padding:clamp(1.5rem,4vw,2rem)}.disclaimer-header h2{color:#fff;font-size:clamp(1.25rem,4vw,1.75rem);font-weight:700;margin:0;text-align:center}.disclaimer-content{color:#333;padding:clamp(1.5rem,4vw,2rem)}.disclaimer-section{margin-bottom:clamp(1.5rem,3vw,2rem)}.disclaimer-section:last-child{margin-bottom:0}.disclaimer-section h3{color:#667eea;font-size:clamp(1rem,3vw,1.25rem);font-weight:600;margin:0 0 clamp(.75rem,2vw,1rem)}.disclaimer-section ul{list-style:none;margin:0;padding:0}.disclaimer-section li{background:#667eea0d;border-left:3px solid #667eea;border-radius:.25rem;font-size:clamp(.875rem,2vw,.95rem);line-height:1.5;margin-bottom:clamp(.5rem,1.5vw,.75rem);padding:clamp(.5rem,1.5vw,.75rem) clamp(.75rem,2vw,1rem)}.disclaimer-section li strong{color:#667eea;font-weight:600}.disclaimer-section.recommendation{background:linear-gradient(135deg,#ff95001a,#ff6b000d);border:2px solid #ff95004d;border-radius:clamp(.5rem,1.5vw,.75rem);padding:clamp(1rem,2.5vw,1.5rem)}.disclaimer-section.recommendation h3{color:#ff9500}.disclaimer-section.recommendation p{font-size:clamp(.9rem,2.5vw,1rem);line-height:1.6;margin:0 0 clamp(.75rem,2vw,1rem)}.practice-links{display:flex;flex-direction:column;gap:clamp(.5rem,1.5vw,.75rem)}.practice-links span{background:#ff95001a;border-radius:.25rem;color:#333;font-size:clamp(.85rem,2vw,.9rem);padding:clamp(.5rem,1.5vw,.75rem)}.disclaimer-footer{background:#f8f9fa;border-radius:0 0 clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.5rem);display:flex;flex-wrap:wrap;gap:clamp(.75rem,2vw,1rem);padding:clamp(1rem,2.5vw,1.5rem) clamp(1.5rem,4vw,2rem)}.disclaimer-btn{border:none;border-radius:clamp(.5rem,1.5vw,.75rem);cursor:pointer;flex:1 1;font-size:clamp(.9rem,2.5vw,1rem);font-weight:600;min-width:140px;padding:clamp(.75rem,2vw,1rem) clamp(1.5rem,3vw,2rem);transition:all .3s ease}.disclaimer-btn.secondary{background:#fff;border:2px solid #667eea;color:#667eea}.disclaimer-btn.secondary:hover{background:#f0f2ff;box-shadow:0 4px 12px #667eea33;transform:translateY(-2px)}.disclaimer-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 4px 15px #667eea4d;color:#fff}.disclaimer-btn.primary:hover{background:linear-gradient(135deg,#5a6fd8,#6a4190);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}.disclaimer-btn:active{transform:translateY(0)}.disclaimer-note{color:#666;font-size:clamp(.75rem,2vw,.85rem);margin:clamp(.5rem,1.5vw,1rem) 0 0;padding:0 clamp(1.5rem,4vw,2rem) clamp(1rem,2.5vw,1.5rem);text-align:center}@media (max-width:480px){.disclaimer-footer{flex-direction:column}.disclaimer-btn{min-width:0;min-width:auto;width:100%}}.tournament-lobby-view{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.lobby-content{display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;padding:clamp(1rem,4vw,1.5rem)}.game-type-selector{display:flex;gap:1rem;justify-content:center}.game-type-button{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff26;border:2px solid #fff3;border-radius:16px;color:#fff;cursor:pointer;display:flex;flex:1 1;font-size:clamp(1rem,4vw,1.1rem);font-weight:700;gap:.75rem;justify-content:center;max-width:250px;padding:1.25rem 1.5rem;transition:all .3s ease}.game-type-button:hover{background:#ffffff40;border-color:#fff6;transform:translateY(-2px)}.game-type-button.active{background:#fff;border-color:#fff;box-shadow:0 8px 24px #0003;color:#667eea}.game-icon{font-size:1.5rem}.tournament-explanation{background:#fff;border-radius:20px;box-shadow:0 8px 24px #00000026;padding:clamp(1.5rem,6vw,2.5rem);text-align:center}.tournament-explanation h2{color:#333;font-size:clamp(1.5rem,6vw,2rem);margin:0 0 1rem}.tournament-explanation p{color:#666;font-size:clamp(1rem,4vw,1.1rem);line-height:1.6;margin:0 0 1.5rem}.prize-structure h3{color:#333;font-size:clamp(1.1rem,4.5vw,1.3rem);margin:1.5rem 0 1rem}.prize-bars{display:flex;flex-direction:column;gap:.75rem;margin:0 auto;max-width:400px}.prize-bar{align-items:center;background:#f8f9fa;border-radius:10px;display:flex;font-weight:700;justify-content:space-between;padding:.75rem 1.25rem}.rank{font-size:clamp(1rem,4vw,1.1rem)}.percentage{color:#667eea;font-size:clamp(1.1rem,4.5vw,1.3rem)}.beta-badge{background:linear-gradient(135deg,#ff9a56,#ff6a88);border:2px solid #ffffff4d;border-radius:12px;color:#fff;font-weight:700;margin-top:1.5rem;padding:1rem 1.5rem}.tier-info{background:#fffffff2;border-radius:20px;box-shadow:0 4px 16px #0000001a;padding:clamp(1.5rem,6vw,2rem)}.tier-info h3{color:#333;font-size:clamp(1.2rem,5vw,1.5rem);margin:0 0 1.5rem;text-align:center}.tiers-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.tier-card{border:3px solid;border-radius:16px;padding:1.5rem 1rem;text-align:center;transition:all .3s ease}.tier-card:hover{box-shadow:0 8px 20px #00000026;transform:translateY(-4px)}.tier-card.bronze{border-color:#cd7f32}.tier-card.silver{border-color:silver}.tier-card.gold{border-color:gold}.tier-icon{font-size:clamp(2.5rem,10vw,3.5rem)}.tier-name{color:#333;font-size:clamp(1.1rem,4.5vw,1.3rem);font-weight:700;margin-bottom:.5rem}.tier-cost{color:#666;font-size:clamp(.9rem,3.5vw,1rem);margin-bottom:.25rem}.tier-pot{color:#667eea;font-size:clamp(.95rem,4vw,1.1rem);font-weight:700}.lobby-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:clamp(1.25rem,5vw,1.5rem)}.lobby-section h3{color:#fff;font-size:clamp(1.2rem,5vw,1.4rem);margin:0 0 1rem;text-align:center}.quick-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.action-button{background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;color:#667eea;flex:1 1;font-size:clamp(1rem,4vw,1.1rem);font-weight:700;max-width:300px;min-width:200px;padding:1rem 1.5rem;transition:all .3s ease}.action-button:hover{box-shadow:0 6px 16px #00000026;transform:translateY(-2px)}.action-button:active{transform:translateY(0)}@media (min-width:640px){.tiers-grid{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion:reduce){.action-button:hover,.game-type-button:hover,.tier-card:hover{transform:none}}.purchase-modal-overlay{align-items:center;animation:fadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;bottom:0;display:flex;justify-content:center;left:0;padding:clamp(1rem,2vw,2rem);position:fixed;right:0;top:0;z-index:1000}.purchase-modal{animation:slideUp .3s ease-out;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:clamp(12px,2vw,20px);box-shadow:0 20px 60px #00000080;max-height:90vh;max-width:min(500px,95vw);overflow-y:auto;position:relative;width:100%}.purchase-modal-header{background:linear-gradient(135deg,#0f3460,#16213e);border-radius:clamp(12px,2vw,20px) clamp(12px,2vw,20px) 0 0;padding:clamp(1.5rem,3vw,2rem);position:relative;text-align:center}.purchase-tier-icon{animation:bounce .6s ease-out;font-size:clamp(3rem,8vw,4rem);margin-bottom:.5rem}.purchase-modal-header h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);font-weight:600;margin:0}.purchase-close-btn{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:clamp(1.5rem,3vw,2rem);height:clamp(32px,6vw,40px);justify-content:center;position:absolute;right:clamp(1rem,2vw,1.5rem);top:clamp(1rem,2vw,1.5rem);transition:all .2s;width:clamp(32px,6vw,40px)}.purchase-close-btn:hover:not(:disabled){background:#fff3;transform:rotate(90deg)}.purchase-close-btn:disabled{cursor:not-allowed;opacity:.5}.purchase-price-section,.purchase-summary{padding:clamp(1.5rem,3vw,2rem)}.purchase-price-section{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border:2px solid #3b82f64d;border-radius:clamp(8px,1.5vw,12px);margin-bottom:clamp(1.5rem,3vw,2rem);text-align:center}.purchase-price-main{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.purchase-price-amount{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#9333ea);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:clamp(2rem,5vw,3rem);font-weight:700}.purchase-price-pi{color:#94a3b8;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:500}.purchase-billing-cycle{color:#94a3b8;font-size:clamp(.875rem,2vw,1rem);margin-top:.5rem}.purchase-features-section{margin-bottom:clamp(1.5rem,3vw,2rem)}.purchase-features-section h3{color:#fff;font-size:clamp(1.125rem,2.5vw,1.25rem);margin-bottom:1rem}.purchase-features-list{list-style:none;margin:0;padding:0}.purchase-features-list li{align-items:center;border-bottom:1px solid #ffffff0d;color:#e2e8f0;display:flex;font-size:clamp(.875rem,2vw,1rem);gap:.75rem;padding:clamp(.5rem,1.5vw,.75rem) 0}.purchase-features-list li:last-child{border-bottom:none}.feature-check{color:#10b981;flex-shrink:0;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700}.mock-payment-notice{background:linear-gradient(135deg,#fbbf241a,#f59e0b1a);border:2px solid #fbbf244d;border-radius:clamp(8px,1.5vw,12px);display:flex;gap:clamp(.75rem,2vw,1rem);margin-bottom:clamp(1rem,2vw,1.5rem);padding:clamp(1rem,2vw,1.5rem)}.notice-icon{flex-shrink:0;font-size:clamp(1.25rem,3vw,1.5rem)}.mock-payment-notice p{color:#fbbf24;font-size:clamp(.875rem,2vw,.95rem);line-height:1.5;margin:0}.mock-payment-notice strong{color:#fcd34d}.purchase-error{align-items:center;background:linear-gradient(135deg,#ef44441a,#dc26261a);border:2px solid #ef44444d;border-radius:clamp(8px,1.5vw,12px);color:#fca5a5;display:flex;font-size:clamp(.875rem,2vw,.95rem);gap:clamp(.75rem,2vw,1rem);margin-top:1rem;padding:clamp(1rem,2vw,1.5rem)}.error-icon{flex-shrink:0;font-size:clamp(1.25rem,3vw,1.5rem)}.purchase-modal-actions{display:flex;gap:clamp(.75rem,2vw,1rem);padding:0 clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2rem)}.purchase-btn-cancel,.purchase-btn-confirm{border:none;border-radius:clamp(8px,1.5vw,12px);cursor:pointer;flex:1 1;font-size:clamp(.95rem,2vw,1.05rem);font-weight:600;min-height:44px;padding:clamp(.875rem,2vw,1.125rem) clamp(1.5rem,3vw,2rem);transition:all .2s}.purchase-btn-cancel{background:#ffffff1a;border:2px solid #fff3;color:#fff}.purchase-btn-cancel:hover:not(:disabled){background:#ffffff26;transform:translateY(-2px)}.purchase-btn-confirm{align-items:center;background:linear-gradient(135deg,#3b82f6,#9333ea);box-shadow:0 4px 15px #3b82f64d;color:#fff;display:flex;gap:.5rem;justify-content:center}.purchase-btn-confirm:hover:not(:disabled){box-shadow:0 6px 20px #3b82f666;transform:translateY(-2px)}.purchase-btn-confirm:disabled{cursor:not-allowed;opacity:.7;transform:none}.processing-spinner{animation:spin .6s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:16px;width:16px}.purchase-success{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:400px;padding:clamp(2rem,4vw,3rem);text-align:center}.success-animation{margin-bottom:clamp(1.5rem,3vw,2rem);position:relative}.success-checkmark{align-items:center;animation:successPop .6s cubic-bezier(.68,-.55,.265,1.55);background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;box-shadow:0 10px 30px #10b98166;color:#fff;display:flex;font-size:clamp(3rem,8vw,4rem);height:clamp(80px,15vw,100px);justify-content:center;width:clamp(80px,15vw,100px)}.purchase-success h2{color:#fff;font-size:clamp(1.5rem,4vw,2rem);margin-bottom:.5rem}.purchase-success p{color:#94a3b8;font-size:clamp(1rem,2.5vw,1.125rem);margin:.5rem 0}.purchase-success strong{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#3b82f6,#9333ea);-webkit-background-clip:text;background-clip:text;color:#fff}.success-confetti{animation:confetti .6s ease-out;font-size:clamp(2rem,5vw,3rem);margin:clamp(1rem,2vw,1.5rem) 0}.success-message{font-style:italic;margin-top:clamp(1rem,2vw,1.5rem)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes successPop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes confetti{0%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}to{opacity:1;transform:scale(1) rotate(1turn)}}@media (max-width:480px){.purchase-modal-actions{flex-direction:column}.purchase-btn-cancel,.purchase-btn-confirm{width:100%}}.tier-comparison-view{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.tier-comparison-content{display:flex;flex-direction:column;gap:2rem;margin:0 auto;max-width:1200px;padding:clamp(1rem,4vw,2rem)}.comparison-header{color:#fff;padding:2rem 0;text-align:center}.comparison-header h1{font-size:clamp(1.8rem,6vw,2.5rem);font-weight:900;margin:0 0 1rem}.comparison-header p{font-size:clamp(1rem,3.5vw,1.2rem);margin:0 0 1.5rem;opacity:.9}.current-tier-badge{display:inline-block}.tier-indicator{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:20px;font-weight:600;padding:.5rem 1.5rem}.tier-indicator.starter{background:linear-gradient(135deg,gold,#fa0);color:#333}.tier-indicator.premium{background:linear-gradient(135deg,#9d4edd,#c77dff);color:#fff}.tier-cards-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:2rem}.tier-card{background:#fff;border-radius:20px;box-shadow:0 8px 24px #00000026;overflow:hidden;padding:2rem;position:relative;transition:transform .3s ease,box-shadow .3s ease}.tier-card:before{background:linear-gradient(90deg,#667eea,#764ba2);content:"";height:6px;left:0;position:absolute;right:0;top:0}.tier-card.free:before{background:linear-gradient(90deg,#6c757d,#495057)}.tier-card.starter:before{background:linear-gradient(90deg,gold,#fa0)}.tier-card.premium:before{background:linear-gradient(90deg,#9d4edd,#c77dff)}.tier-card:hover{box-shadow:0 12px 32px #0003;transform:translateY(-8px)}.tier-card.current{border:3px solid #4caf50}.tier-badge-popular{background:linear-gradient(135deg,#ff9a56,#ff6a88);border-radius:12px;color:#fff;font-size:.85rem;font-weight:700;padding:.4rem .8rem;position:absolute;right:1rem;top:1rem}.tier-header{margin-bottom:1.5rem;text-align:center}.tier-icon{font-size:clamp(3rem,8vw,4rem);margin-bottom:.5rem}.tier-header h2{color:#333;font-size:clamp(1.5rem,5vw,2rem);margin:.5rem 0}.tier-price{margin-top:1rem}.price-amount{color:#667eea;display:block;font-size:clamp(2rem,6vw,2.5rem);font-weight:900}.price-period{color:#666;display:block;font-size:clamp(.9rem,3vw,1rem);margin-top:.25rem}.tier-price-breakdown{color:#999;font-size:.9rem;margin-top:.5rem}.tier-features{margin:1.5rem 0}.tier-features ul{list-style:none;margin:0;padding:0}.tier-features li{border-bottom:1px solid #f0f0f0;color:#444;font-size:clamp(.95rem,3.2vw,1.05rem);padding:.75rem 0}.tier-features li:last-child{border-bottom:none}.feature-boost{background:linear-gradient(135deg,#4caf50,#45a049);border-radius:6px;color:#fff;font-size:.75rem;font-weight:700;margin-left:.5rem;padding:.15rem .4rem}.tier-status{border-radius:10px;font-weight:600;margin-top:1.5rem;padding:.75rem;text-align:center}.tier-status.current{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.tier-status.included{background:#f0f0f0;color:#666}.tier-button{border:none;border-radius:12px;cursor:pointer;font-size:clamp(1rem,3.5vw,1.1rem);font-weight:700;margin-top:1.5rem;padding:1rem;transition:all .3s ease;width:100%}.tier-button.upgrade{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.tier-button.upgrade.premium{background:linear-gradient(135deg,#9d4edd,#c77dff)}.tier-button:hover{box-shadow:0 6px 16px #0003;transform:translateY(-2px)}.feature-comparison-table{background:#fff;border-radius:20px;box-shadow:0 8px 24px #00000026;padding:clamp(1.5rem,4vw,2.5rem)}.feature-comparison-table h2{color:#333;font-size:clamp(1.3rem,4.5vw,1.8rem);margin:0 0 1.5rem;text-align:center}.table-wrapper{overflow-x:auto}.feature-comparison-table table{border-collapse:collapse;width:100%}.feature-comparison-table td,.feature-comparison-table th{border-bottom:1px solid #e0e0e0;padding:1rem;text-align:left}.feature-comparison-table th{background:#f8f9fa;color:#333;font-weight:700;position:relative}.feature-comparison-table th.highlight{background:linear-gradient(135deg,#667eea15,#764ba225);border:2px solid #667eea}.feature-comparison-table td.highlight{background:linear-gradient(135deg,#667eea05,#764ba210);font-weight:600}.current-badge{background:linear-gradient(135deg,#4caf50,#45a049);border-radius:8px;color:#fff;font-size:.7rem;font-weight:700;padding:.15rem .5rem;position:absolute;right:.5rem;top:.5rem}.feature-name{color:#444;font-weight:600}.upgrade-cta-section{background:#fffffff2;border-radius:20px;box-shadow:0 8px 24px #00000026;padding:clamp(1.5rem,5vw,2.5rem);text-align:center}.upgrade-cta-section h2{color:#333;font-size:clamp(1.5rem,5vw,2rem);margin:0 0 1rem}.upgrade-cta-section p{color:#666;font-size:clamp(1rem,3.5vw,1.2rem);margin:0 0 2rem}.cta-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.cta-button{border:none;border-radius:16px;cursor:pointer;flex:1 1;font-size:clamp(1rem,3.5vw,1.2rem);font-weight:700;min-width:250px;padding:1.25rem 2rem;transition:all .3s ease}.cta-button.starter{background:linear-gradient(135deg,gold,#fa0);color:#333}.cta-button.premium{background:linear-gradient(135deg,#9d4edd,#c77dff);color:#fff}.cta-button:hover{box-shadow:0 8px 20px #00000040;transform:translateY(-4px)}.back-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:2px solid #ffffff4d;border-radius:12px;color:#fff;cursor:pointer;display:block;font-size:clamp(.95rem,3.5vw,1.05rem);font-weight:600;margin:1rem auto 0;max-width:250px;padding:.9rem 1.5rem;transition:all .3s ease;width:100%}.back-button:hover{background:#ffffff4d;border-color:#ffffff80;box-shadow:0 4px 12px #0003;transform:translateY(-2px)}@media (max-width:768px){.tier-cards-grid{grid-template-columns:1fr}.cta-buttons{flex-direction:column}.cta-button{min-width:100%}.feature-comparison-table table{font-size:.9rem}.feature-comparison-table td,.feature-comparison-table th{padding:.75rem .5rem}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tier-card{animation:fadeInUp .5s ease-out}@media (prefers-reduced-motion:reduce){.back-button,.cta-button,.tier-button,.tier-card{animation:none;transform:none!important;transition:none}}.admin-portal{background:linear-gradient(135deg,#0c0c0c,#1a1a2e 25%,#16213e 50%,#0f3460 75%,#533483);background-attachment:fixed;color:#fff;min-height:100vh;overflow-x:hidden;position:relative}.admin-portal:before{animation:floating 20s ease-in-out infinite;background-image:radial-gradient(circle at 20% 50%,#7877c64d 0,#0000 50%),radial-gradient(circle at 80% 20%,#ff77c64d 0,#0000 50%),radial-gradient(circle at 40% 80%,#78dbff4d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.admin-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0006;border-bottom:1px solid #ffffff1a;position:sticky;top:0;z-index:100}.admin-header-content{align-items:center;display:flex;height:4rem;justify-content:space-between;margin:0 auto;max-width:1280px;padding:0 1rem}.admin-title{align-items:center;color:#fff;display:flex;font-size:1.5rem;font-weight:700;gap:.5rem;text-shadow:0 2px 10px #00000080}.admin-badge{animation:pulse 2s infinite;background:linear-gradient(135deg,#10b981,#059669);border-radius:9999px;box-shadow:0 4px 15px #10b98166;color:#fff;margin-left:1rem}.admin-controls{align-items:center;display:flex;gap:1rem}.refresh-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:.5rem;box-shadow:0 4px 15px #3b82f666;color:#fff;cursor:pointer;font-weight:600;padding:.5rem 1rem;transition:all .3s ease}.refresh-button:hover{box-shadow:0 8px 25px #3b82f699;transform:translateY(-2px)}.refresh-button:disabled{cursor:not-allowed;opacity:.7;transform:none}.last-updated{color:#d1d5db;font-size:.875rem;opacity:.8}.tab-navigation{margin:0 auto;max-width:1280px;padding:1.5rem 1rem 0}.tab-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border:1px solid #ffffff1a;border-radius:.75rem;display:flex;flex-wrap:wrap;gap:.25rem;padding:.25rem}.tab-button{align-items:center;border:none;border-radius:.5rem;cursor:pointer;display:flex;flex:1 1;font-size:.875rem;font-weight:600;gap:.5rem;justify-content:center;min-width:120px;padding:.75rem 1.5rem;transition:all .3s ease;white-space:nowrap}.tab-button.active{background:linear-gradient(135deg,#3b82f6,#1e40af);box-shadow:0 4px 15px #3b82f666;color:#fff;transform:translateY(-1px)}.tab-button.inactive{background:#0000;color:#d1d5db}.tab-button.inactive:hover{background:#374151b3;color:#fff;transform:translateY(-1px)}.admin-content{margin:0 auto;max-width:1280px;padding:2rem 1rem}.analytics-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem}.analytics-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border:1px solid #ffffff1a;border-radius:1rem;overflow:hidden;padding:1.5rem;position:relative;transition:all .3s ease}.analytics-card:before{background:linear-gradient(90deg,var(--card-color-primary),var(--card-color-secondary));content:"";height:3px;left:0;position:absolute;right:0;top:0}.analytics-card:hover{border-color:#fff3;box-shadow:0 20px 40px #0000004d;transform:translateY(-4px)}.analytics-card.blue{--card-color-primary:#3b82f6;--card-color-secondary:#1e40af}.analytics-card.green{--card-color-primary:#10b981;--card-color-secondary:#059669}.analytics-card.purple{--card-color-primary:#8b5cf6;--card-color-secondary:#7c3aed}.analytics-card.yellow{--card-color-primary:#f59e0b;--card-color-secondary:#d97706}.analytics-card.red{--card-color-primary:#ef4444;--card-color-secondary:#dc2626}.card-content{align-items:center;display:flex;justify-content:space-between}.card-info h3{color:#d1d5db;font-size:.875rem;font-weight:500;margin:0 0 .5rem}.card-info p{color:#fff;font-size:2rem;font-weight:700;margin:0;text-shadow:0 2px 10px #00000080}.card-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:3rem;opacity:.8}.data-table-container{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border:1px solid #ffffff1a;border-radius:1rem;overflow:hidden;padding:1.5rem}.data-table-title{align-items:center;color:#fff;display:flex;font-size:1.25rem;font-weight:700;gap:.5rem;margin:0 0 1.5rem}.data-table{border-collapse:collapse;overflow-x:auto;width:100%}.data-table th{border-bottom:1px solid #4b556380;color:#d1d5db;font-weight:600;text-align:left}.data-table td,.data-table th{font-size:.875rem;padding:.75rem}.data-table td{border-bottom:1px solid #4b63584d;color:#fff}.admin-portal *{color:inherit}.admin-portal div,.admin-portal li,.admin-portal p,.admin-portal span,.admin-portal table,.admin-portal tbody,.admin-portal td,.admin-portal th,.admin-portal tr{color:#fff}.admin-badge{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#3b82f633,#9333ea33);border:1px solid #3b82f64d;border-radius:.5rem;box-shadow:0 2px 10px #3b82f633;color:#60a5fa;font-size:.875rem;font-weight:600;margin:2rem auto 0;padding:.5rem 1rem;text-align:center;width:fit-content}.data-table tr:hover{background:hsla(0,0%,100%,.774)}.status-badge{border-radius:9999px;font-size:.75rem;font-weight:600;letter-spacing:.025em;padding:.25rem .75rem;text-transform:uppercase}.status-badge.active{background:#10b98133;border:1px solid #10b9814d;color:#34d399}.status-badge.inactive{background:#ef444433;border:1px solid #ef44444d;color:#f87171}.health-panel-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.health-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border:1px solid #ffffff1a;border-radius:1rem;padding:1.5rem}.health-panel h3{align-items:center;color:#fff;display:flex;font-size:1.25rem;font-weight:700;gap:.5rem;margin:0 0 1rem}.health-metric{align-items:center;border-bottom:1px solid #4b556333;display:flex;justify-content:space-between;margin-bottom:.75rem;padding:.5rem 0}.health-metric:last-child{border-bottom:none;margin-bottom:0}.health-metric-label{color:#d1d5db;font-size:.875rem}.health-metric-value{font-size:.875rem;font-weight:600}.health-metric-value.success{color:#34d399}.health-metric-value.warning{color:#fbbf24}.health-metric-value.error{color:#f87171}.health-metric-value.info{color:#60a5fa}.loading-container{align-items:center;color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:50vh}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #3b82f633;border-radius:50%;border-top-color:#3b82f6;height:4rem;margin-bottom:1rem;width:4rem}.loading-text{font-size:1.25rem;font-weight:600;text-shadow:0 2px 10px #00000080}.error-container{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:28rem;min-height:50vh;padding:2rem;text-align:center}.error-icon{font-size:4rem;margin-bottom:1rem}.error-title{color:#fff;font-size:1.5rem;font-weight:700;margin-bottom:1rem}.error-message{color:#d1d5db;line-height:1.6;margin-bottom:1.5rem}.error-retry-button{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border:none;border-radius:.5rem;box-shadow:0 4px 15px #3b82f666;color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.error-retry-button:hover{box-shadow:0 8px 25px #3b82f699;transform:translateY(-2px)}.recent-activity{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0000004d;border:1px solid #ffffff1a;border-radius:1rem;margin-top:2rem;padding:1.5rem}.recent-activity h3{align-items:center;color:#fff;display:flex;font-size:1.25rem;font-weight:700;gap:.5rem;margin:0 0 1rem}.activity-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.activity-item{background:#ffffff0d;border-radius:.5rem;padding:1rem;text-align:center;transition:all .3s ease}.activity-item:hover{background:#ffffff1a;transform:translateY(-2px)}.activity-value{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.activity-value.blue{color:#60a5fa}.activity-value.green{color:#34d399}.activity-value.purple{color:#c4b5fd}.activity-label{color:#d1d5db;font-size:.875rem}@media (max-width:768px){.admin-header-content{flex-direction:column;gap:1rem;height:auto;padding:1rem}.admin-title{font-size:1.25rem}.admin-badge{margin-left:0}.tab-button{flex:1 1;min-width:auto;padding:.5rem 1rem}.analytics-grid{gap:1rem}.activity-grid,.analytics-grid,.health-panel-grid{grid-template-columns:1fr}.data-table-container{overflow-x:auto}.data-table{min-width:600px}}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#0000001a;border-radius:4px}::-webkit-scrollbar-thumb{background:#3b82f699;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3b82f6cc}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.error-retry-button:focus,.refresh-button:focus,.tab-button:focus{outline:2px solid #3b82f6;outline-offset:2px}.database-analytics{background:#0003;border:1px solid #ffffff1a;border-radius:1rem;margin-top:2rem;padding:1.5rem}.database-analytics h3{color:#fff;font-size:1.25rem;margin-bottom:1.5rem;text-align:center}.table-analytics-section{margin-bottom:2rem}.table-analytics-section h4{border-bottom:1px solid #ffffff1a;color:#d1d5db;font-size:1rem;margin-bottom:1rem;padding-bottom:.5rem}.table-list{display:flex;flex-direction:column;gap:.75rem}.table-item{background:#0000004d;border:1px solid #ffffff1a;border-radius:.5rem;padding:1rem;transition:all .3s ease}.table-item:hover{background:#0006;border-color:#3b82f64d}.table-item.growing{border-left:3px solid #3b82f6}.table-info{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem}.table-name{color:#fff;font-size:.875rem;font-weight:600}.table-details{color:#d1d5db;font-size:.75rem}.table-sizes{display:flex;font-size:.75rem;gap:1rem}.size-data{color:#34d399}.size-indexes{color:#60a5fa}.growth-indicator{display:flex;gap:.5rem;justify-content:flex-end}.growth-warning{background:#f8717133;color:#f87171}.growth-caution,.growth-warning{border-radius:.25rem;font-size:.75rem;font-weight:600;padding:.25rem .5rem}.growth-caution{background:#fbbf2433;color:#fbbf24}.data-table.compact{font-size:.8rem}.data-table.compact td,.data-table.compact th{padding:.5rem}.table-name-cell{align-items:center;display:flex;gap:.5rem}.growth-badge{background:#3b82f633;border-radius:.25rem;color:#60a5fa;font-size:.7rem;padding:.125rem .25rem}@media (max-width:768px){.table-info{align-items:flex-start}.table-info,.table-sizes{flex-direction:column;gap:.25rem}.database-analytics{padding:1rem}.data-table.compact{font-size:.7rem}}.tier-badge{border-radius:.375rem;font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.25rem .5rem;text-transform:uppercase}.tier-badge.free{background:#22c55e33;border:1px solid #22c55e4d;color:#4ade80}.tier-badge.paid{background:#a855f733;border:1px solid #a855f74d;color:#c4b5fd}.storage-actions{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.5rem;display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.action-button{border-radius:.5rem;display:flex;gap:.5rem;justify-content:center;padding:.75rem 1.5rem}.action-button.cleanup{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.action-button.cleanup:hover{background:linear-gradient(135deg,#d97706,#b45309);box-shadow:0 4px 12px #f59e0b4d;transform:translateY(-1px)}.action-button.unfriend-cleanup{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}.action-button.unfriend-cleanup:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9);box-shadow:0 4px 12px #8b5cf64d;transform:translateY(-1px)}.cleanup-info{background:#3b82f61a;border:1px solid #3b82f633;border-radius:.375rem;padding:1rem}.cleanup-info p{color:#93c5fd;font-size:.875rem;line-height:1.4;margin:0}.cleanup-info p:first-child{font-weight:600;margin-bottom:.25rem}.status-badge.warning{background:#f59e0b33;border:1px solid #f59e0b4d;color:#fbbf24}@media (max-width:768px){.storage-actions{padding:1rem}.action-button{font-size:.875rem;padding:.5rem 1rem}.cleanup-info{padding:.75rem}.tier-badge{font-size:.625rem;padding:.125rem .375rem}}.insights-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:1rem}.insight-card{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:.5rem;padding:1.5rem;text-align:center;transition:transform .2s ease}.insight-card:hover{background:#ffffff14;transform:translateY(-2px)}.insight-card h4{color:#e2e8f0;font-size:.875rem;font-weight:600;letter-spacing:.05em;margin:0 0 .5rem;text-transform:uppercase}.insight-card p{color:#94a3b8;font-size:1.25rem;font-weight:700;margin:0}.analytics-card.red{background:linear-gradient(135deg,#ef44441a,#dc26260d);border:1px solid #ef444433}.analytics-card.orange{background:linear-gradient(135deg,#f973161a,#ea580c0d);border:1px solid #f9731633}.status-badge.caution{background:#f9731633;border:1px solid #f973164d;color:#fb923c}@media (max-width:768px){.insights-grid{gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:.75rem}.insight-card{padding:1rem}.insight-card h4{font-size:.75rem}.insight-card p{font-size:1rem}}.category-badge{border-radius:.375rem;display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:.25rem .75rem;text-transform:uppercase}.category-badge.harassment{background:#ef444433;border:1px solid #ef44444d;color:#f87171}.category-badge.spam{background:#f9731633;border:1px solid #f973164d;color:#fb923c}.category-badge.inappropriate_content{background:#dc262633;border:1px solid #dc26264d;color:#ef4444}.category-badge.fake_profile{background:#a855f733;border:1px solid #a855f74d;color:#c084fc}.category-badge.scam_fraud{background:#eab30833;border:1px solid #eab3084d;color:#facc15}.action-buttons{display:flex;gap:.5rem;justify-content:flex-end}.action-button{align-items:center;border:none;border-radius:.375rem;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:600;gap:.25rem;padding:.5rem 1rem;transition:all .2s ease}.action-button.ban{background:#ef444433;border:1px solid #ef44444d;color:#f87171}.action-button.ban:hover{background:#ef44444d;transform:translateY(-1px)}.action-button.dismiss{background:#64748b33;border:1px solid #64748b4d;color:#94a3b8}.action-button.dismiss:hover{background:#64748b4d;transform:translateY(-1px)}.empty-state{color:#94a3b8;padding:3rem;text-align:center}.empty-state p{font-size:1.125rem;margin:0}.status-badge.error{background:#ef444433;border:1px solid #ef44444d;color:#f87171}.admin-auth-container{align-items:center;background:linear-gradient(135deg,#0c0c0c,#1a1a2e 25%,#16213e 50%,#0f3460 75%,#533483);background-attachment:fixed;display:flex;justify-content:center;min-height:100vh;overflow:hidden;padding:2rem;position:relative}.admin-auth-container:before{animation:floating 20s ease-in-out infinite;background-image:radial-gradient(circle at 20% 50%,#7877c64d 0,#0000 50%),radial-gradient(circle at 80% 20%,#ff77c64d 0,#0000 50%),radial-gradient(circle at 40% 80%,#78dbff4d 0,#0000 50%);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}@keyframes floating{0%,to{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}.admin-auth-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0006;border:1px solid #ffffff1a;border-radius:1rem;box-shadow:0 20px 50px #00000080;max-width:500px;padding:3rem;position:relative;width:100%;z-index:1}.admin-auth-header{margin-bottom:2rem;text-align:center}.admin-auth-header h1{color:#fff;font-size:2rem;font-weight:700;margin-bottom:.5rem;text-shadow:0 2px 10px #00000080}.admin-auth-header p{color:#d1d5db;font-size:1rem;line-height:1.5}.admin-auth-form{margin-bottom:2rem}.form-group{margin-bottom:1.5rem}.form-group label{color:#d1d5db;display:block;font-size:.875rem;font-weight:600;margin-bottom:.5rem}.form-group input{background:#0000004d;border:1px solid #fff3;border-radius:.5rem;color:#fff;font-size:1rem;padding:.75rem 1rem;transition:all .3s ease;width:100%}.form-group input:focus{background:#00000080;border-color:#3b82f680;box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-group input::placeholder{color:#9ca3af}.form-group input:disabled{cursor:not-allowed;opacity:.6}.admin-error{align-items:center;background:#f871711a;border:1px solid #f871714d;border-radius:.5rem;color:#f87171;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1.5rem;padding:.75rem 1rem}.admin-error-icon{font-size:1rem}.admin-login-button{align-items:center;background:linear-gradient(135deg,#3b82f6,#1e40af);border:none;border-radius:.5rem;box-shadow:0 4px 15px #3b82f666;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;padding:.875rem 1.5rem;transition:all .3s ease;width:100%}.admin-login-button:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 6px 20px #3b82f680;transform:translateY(-1px)}.admin-login-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.login-spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:1rem;width:1rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.admin-auth-footer{color:#9ca3af;font-size:.875rem;line-height:1.5;text-align:center}.admin-auth-footer p{margin-bottom:.25rem}.admin-loading{color:#fff;text-align:center}.admin-loading-spinner{animation:spin 1s linear infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#3b82f6;height:3rem;margin:0 auto 1rem;width:3rem}.admin-loading p{color:#d1d5db;font-size:1rem}.logout-button{background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:.375rem;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;margin-left:1rem;padding:.5rem 1rem;transition:all .3s ease}.logout-button:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 15px #ef444466;transform:translateY(-1px)}@media (max-width:640px){.admin-auth-container{padding:1rem}.admin-auth-card{padding:2rem 1.5rem}.admin-auth-header h1{font-size:1.5rem}}.volume-controls{-webkit-tap-highlight-color:transparent;background:#fff;border-radius:clamp(8px,2vw,12px);box-shadow:0 2px 8px #0000001a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;max-width:min(92vw,450px);padding:clamp(12px,3vw,20px);-webkit-user-select:none;user-select:none;width:100%}.volume-controls.compact{max-width:min(85vw,320px);padding:clamp(8px,2vw,16px)}.volume-controls.audio-disabled{background:#fff8e1;border:2px solid #ff9800}.volume-controls.loading{align-items:center;display:flex;justify-content:center;min-height:clamp(80px,15vw,120px)}.volume-loading{align-items:center;color:#666;display:flex;flex-direction:column;font-size:clamp(14px,3.5vw,16px);gap:clamp(8px,2vw,12px)}.volume-loading span:first-child{animation:pulse 1.5s ease-in-out infinite;font-size:clamp(24px,6vw,32px)}.audio-status-alert{align-items:center;background:#fff3cd;border:1px solid #ffeaa7;border-radius:clamp(6px,1.5vw,8px);color:#856404;display:flex;font-size:clamp(12px,3vw,14px);gap:clamp(8px,2vw,12px);margin-bottom:clamp(12px,3vw,16px);padding:clamp(8px,2vw,12px)}.status-icon{flex-shrink:0;font-size:clamp(16px,4vw,20px)}.status-text{flex:1 1;line-height:1.4}.volume-quick-actions{display:flex;flex-wrap:wrap;gap:clamp(8px,2vw,12px);margin-bottom:clamp(16px,4vw,20px)}.volume-action-button{align-items:center;background:#f5f5f5;border:1px solid #ddd;border-radius:clamp(6px,1.5vw,8px);color:#333;cursor:pointer;display:flex;flex:1 1;font-size:clamp(12px,3vw,14px);font-weight:500;gap:clamp(6px,1.5vw,8px);justify-content:center;min-height:44px;min-width:44px;padding:clamp(8px,2vw,12px) clamp(12px,3vw,16px);transition:all .2s ease}.volume-action-button:hover:not(:disabled){background:#e3f2fd;border-color:#2196f3;transform:translateY(-1px)}.volume-action-button:active:not(:disabled){background:#bbdefb;transform:translateY(0)}.volume-action-button:disabled{background:#f0f0f0;cursor:not-allowed;opacity:.5}.volume-action-button.mute-all:hover:not(:disabled){background:#ffebee;border-color:#f44336}.volume-action-button.unmute-all:hover:not(:disabled){background:#e8f5e8;border-color:#4caf50}.volume-action-button span:first-child{font-size:clamp(16px,4vw,18px)}.volume-section{margin-bottom:clamp(16px,4vw,20px)}.volume-section:last-child{margin-bottom:0}.volume-section-title{align-items:center;color:#333;display:flex;font-size:clamp(14px,3.5vw,16px);font-weight:600;gap:clamp(6px,1.5vw,8px);margin:0 0 clamp(12px,3vw,16px)}.volume-slider{margin-bottom:clamp(16px,4vw,20px);opacity:1;transition:opacity .3s ease}.volume-slider.disabled{opacity:.5}.volume-slider:last-child{margin-bottom:0}.volume-slider-header{align-items:center;display:flex;gap:clamp(8px,2vw,12px);margin-bottom:clamp(8px,2vw,10px)}.volume-mute-button{align-items:center;background:#f5f5f5;border:1px solid #ddd;border-radius:50%;cursor:pointer;display:flex;flex-shrink:0;height:44px;justify-content:center;transition:all .2s ease;width:44px}.volume-mute-button:hover:not(:disabled){background:#e3f2fd;border-color:#2196f3;transform:scale(1.05)}.volume-mute-button:active:not(:disabled){transform:scale(.95)}.volume-mute-button:disabled{cursor:not-allowed;opacity:.5}.volume-mute-button.muted{background:#ffebee;border-color:#f44336;color:#f44336}.volume-icon{font-size:clamp(16px,4vw,20px)}.volume-label{color:#333;flex:1 1;font-size:clamp(13px,3.2vw,15px);font-weight:500}.volume-value{color:#666;font-size:clamp(12px,3vw,14px);font-weight:500;min-width:clamp(35px,8vw,45px);text-align:right}.volume-slider-container{background:#f0f0f0;border:1px solid #ddd;border-radius:clamp(20px,4vw,24px);height:clamp(40px,8vw,48px);overflow:hidden;position:relative}.volume-range{appearance:none;background:#0000;cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.volume-range::-webkit-slider-thumb{appearance:none;background:#fff;border:2px solid #2196f3;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:clamp(20px,5vw,24px);-webkit-transition:all .2s ease;transition:all .2s ease;width:clamp(20px,5vw,24px)}.volume-range::-webkit-slider-thumb:hover{border-color:#1976d2;transform:scale(1.2)}.volume-range::-webkit-slider-thumb:active{transform:scale(1.1)}.volume-range::-moz-range-thumb{background:#fff;border:2px solid #2196f3;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:clamp(20px,5vw,24px);-moz-transition:all .2s ease;transition:all .2s ease;width:clamp(20px,5vw,24px)}.volume-range.muted::-webkit-slider-thumb{background:#f0f0f0;border-color:#ccc}.volume-range.muted::-moz-range-thumb{background:#f0f0f0;border-color:#ccc}.volume-range:disabled{cursor:not-allowed}.volume-fill{background:#2196f3;border-radius:inherit;height:100%;left:0;position:absolute;top:0;transition:all .3s ease;z-index:1}.volume-advanced-controls{display:flex;flex-direction:column;gap:clamp(12px,3vw,16px)}.volume-feedback-info{align-items:center;background:#f8f9fa;border-radius:clamp(6px,1.5vw,8px);display:flex;font-size:clamp(12px,3vw,14px);justify-content:space-between;padding:clamp(8px,2vw,12px)}.feedback-label{color:#666;font-weight:500}.feedback-value{color:#333;font-weight:600}.volume-visual-feedback{pointer-events:none;position:fixed;right:20px;top:20px;z-index:1000}.visual-indicator{align-items:center;background:#2196f3cc;border-radius:50%;display:flex;height:clamp(40px,8vw,60px);justify-content:center;width:clamp(40px,8vw,60px)}.visual-pulse{animation:pulse .6s ease-out;background:#fff;border-radius:50%;height:50%;width:50%}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@media (max-width:480px){.volume-controls{padding:clamp(10px,2.5vw,16px)}.volume-quick-actions{flex-direction:column}.volume-action-button{min-width:100%}.volume-slider-header{flex-wrap:wrap;gap:clamp(6px,1.5vw,10px)}.volume-value{flex-basis:100%;margin-top:clamp(4px,1vw,6px);order:3;text-align:center}}@media (max-width:320px){.volume-controls{padding:clamp(8px,2vw,12px)}.volume-slider-container{height:clamp(36px,7vw,44px)}.volume-range::-webkit-slider-thumb{height:clamp(16px,4vw,20px);width:clamp(16px,4vw,20px)}.volume-range::-moz-range-thumb{height:clamp(16px,4vw,20px);width:clamp(16px,4vw,20px)}}@media (prefers-contrast:high){.volume-action-button,.volume-controls,.volume-slider-container{border:2px solid #000}}@media (prefers-reduced-motion:reduce){.volume-controls *{animation:none!important;transition:none!important}}.audio-performance-monitor{-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:1px solid #0000001a;border-radius:clamp(8px,2vw,12px);box-shadow:0 4px 20px #00000026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,monospace;font-size:clamp(11px,2.5vw,13px);max-height:80vh;overflow-y:auto;position:fixed;right:clamp(10px,2vw,20px);top:clamp(10px,2vw,20px);-webkit-user-select:none;user-select:none;width:clamp(280px,35vw,400px);z-index:1000}.audio-performance-monitor.compact{max-height:60vh;width:clamp(240px,30vw,320px)}.audio-performance-monitor.has-issues{border-color:#ff9800;box-shadow:0 4px 20px #ff98004d}.performance-monitor-toggle{align-items:center;background:#2196f3e6;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:clamp(16px,4vw,20px);height:clamp(40px,8vw,50px);justify-content:center;position:fixed;right:clamp(10px,2vw,20px);top:clamp(10px,2vw,20px);transition:all .3s ease;width:clamp(40px,8vw,50px);z-index:999}.performance-monitor-toggle:hover{background:#2196f3;transform:scale(1.1)}.monitor-header{background:#f8f9facc;border-bottom:1px solid #0000001a;border-radius:clamp(8px,2vw,12px) clamp(8px,2vw,12px) 0 0;justify-content:space-between;padding:clamp(10px,2.5vw,16px)}.monitor-header,.monitor-title{align-items:center;display:flex}.monitor-title{color:#333;font-size:clamp(12px,3vw,14px);font-weight:600;gap:clamp(6px,1.5vw,8px)}.title-icon{font-size:clamp(14px,3.5vw,16px)}.critical-badge{background:#f44336;border-radius:50%;color:#fff;font-size:clamp(10px,2.5vw,12px);font-weight:700;height:clamp(18px,4vw,22px);margin-left:clamp(4px,1vw,6px);width:clamp(18px,4vw,22px)}.critical-badge,.monitor-hide-button{align-items:center;display:flex;justify-content:center}.monitor-hide-button{background:#0000;border:none;border-radius:50%;color:#666;cursor:pointer;font-size:clamp(12px,3vw,14px);height:clamp(24px,5vw,30px);transition:all .2s ease;width:clamp(24px,5vw,30px)}.monitor-hide-button:hover{background:#0000001a;color:#333}.issues-alert{background:#fff3cd;border:1px solid #ffeaa7;border-radius:clamp(6px,1.5vw,8px);color:#856404;margin:clamp(8px,2vw,12px);padding:clamp(8px,2vw,12px)}.alert-header{align-items:center;display:flex;font-size:clamp(11px,2.8vw,13px);font-weight:600;gap:clamp(6px,1.5vw,8px);margin-bottom:clamp(6px,1.5vw,8px)}.alert-icon{font-size:clamp(14px,3.5vw,16px)}.issue-item{align-items:center;border-top:1px solid #ffc1074d;display:flex;font-size:clamp(10px,2.5vw,12px);justify-content:space-between;padding:clamp(4px,1vw,6px) 0}.issue-item:first-child{border-top:none}.issue-item.critical{color:#d32f2f;font-weight:600}.issue-item.high{color:#f57c00;font-weight:500}.issue-message{flex:1 1}.issue-time{color:#666;font-size:clamp(9px,2.2vw,11px);margin-left:clamp(8px,2vw,12px)}.metrics-grid{grid-gap:clamp(8px,2vw,12px);display:grid;gap:clamp(8px,2vw,12px);grid-template-columns:1fr 1fr}.metric-card,.metrics-grid{padding:clamp(8px,2vw,12px)}.metric-card{background:#f8f9fa;border-left:3px solid #4caf50;border-radius:clamp(6px,1.5vw,8px);transition:all .2s ease}.metric-card.warning{background:#fff8e1;border-left-color:#ff9800}.metric-card.error{background:#ffebee;border-left-color:#f44336}.metric-header{align-items:center;display:flex;gap:clamp(4px,1vw,6px);margin-bottom:clamp(4px,1vw,6px)}.metric-icon{font-size:clamp(12px,3vw,14px)}.metric-title{color:#666;font-size:clamp(10px,2.5vw,12px);font-weight:500}.metric-value{color:#333;font-size:clamp(12px,3vw,14px);font-weight:600;margin-bottom:clamp(2px,.5vw,4px)}.metric-subtitle{color:#888;font-size:clamp(9px,2.2vw,11px)}.progress-metric{background:#f8f9fa;border-radius:clamp(6px,1.5vw,8px);margin:clamp(8px,2vw,12px);padding:clamp(8px,2vw,12px)}.progress-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:clamp(6px,1.5vw,8px)}.progress-label{color:#333;font-size:clamp(11px,2.8vw,13px);font-weight:500}.progress-value{color:#666;font-size:clamp(10px,2.5vw,12px)}.progress-bar{background:#e0e0e0;border-radius:clamp(3px,.7vw,4px);height:clamp(6px,1.5vw,8px);margin-bottom:clamp(4px,1vw,6px);overflow:hidden}.progress-fill{border-radius:inherit;height:100%;transition:width .3s ease}.progress-fill.good{background:#4caf50}.progress-fill.warning{background:#ff9800}.progress-fill.error{background:#f44336}.progress-percentage{color:#666;font-size:clamp(9px,2.2vw,11px);text-align:center}.performance-details{background:#f8f9fa;border-radius:clamp(6px,1.5vw,8px);margin:clamp(8px,2vw,12px);padding:clamp(8px,2vw,12px)}.details-title{align-items:center;color:#333;display:flex;font-size:clamp(11px,2.8vw,13px);font-weight:600;gap:clamp(4px,1vw,6px);margin:0 0 clamp(8px,2vw,10px)}.details-grid{grid-gap:clamp(6px,1.5vw,8px);display:grid;gap:clamp(6px,1.5vw,8px);grid-template-columns:1fr 1fr}.detail-item{align-items:center;display:flex;font-size:clamp(10px,2.5vw,12px);justify-content:space-between}.detail-label{color:#666;font-weight:500}.detail-value{color:#333;font-weight:600}.debug-info{background:#f0f0f0;border:1px solid #ddd;border-radius:clamp(6px,1.5vw,8px);margin:clamp(8px,2vw,12px);padding:clamp(8px,2vw,12px)}.debug-title{align-items:center;color:#333;display:flex;font-size:clamp(11px,2.8vw,13px);font-weight:600;gap:clamp(4px,1vw,6px);margin:0 0 clamp(8px,2vw,10px)}.debug-capabilities{margin-bottom:clamp(10px,2.5vw,12px)}.capability-item,.debug-item{align-items:center;display:flex;font-family:monospace;font-size:clamp(10px,2.5vw,12px);justify-content:space-between;padding:clamp(3px,.7vw,4px) 0}.capability-item span:first-child,.debug-item span:first-child{color:#666}.capability-item span:last-child,.debug-item span:last-child{color:#333;font-weight:600}@media (max-width:480px){.audio-performance-monitor{right:clamp(5px,1vw,10px);top:clamp(5px,1vw,10px);width:clamp(260px,90vw,300px)}.details-grid,.metrics-grid{grid-template-columns:1fr}.progress-header{gap:clamp(4px,1vw,6px)}.issue-item,.progress-header{align-items:stretch;flex-direction:column}.issue-item{gap:clamp(2px,.5vw,4px)}.issue-time{margin-left:0;text-align:right}}@media (max-width:320px){.audio-performance-monitor{left:2.5vw;right:2.5vw;width:95vw}.monitor-header{padding:clamp(8px,2vw,12px)}.debug-info,.metrics-grid,.performance-details,.progress-metric{margin:clamp(6px,1.5vw,8px);padding:clamp(6px,1.5vw,8px)}}@media (prefers-contrast:high){.audio-performance-monitor{background:#fff;border:2px solid #000}.debug-info,.metric-card,.performance-details,.progress-metric{border:1px solid #000}}@media (prefers-reduced-motion:reduce){.audio-performance-monitor *,.performance-monitor-toggle,.progress-fill{transition:none!important}}
/*# sourceMappingURL=main.81a26d7c.css.map*/