*{box-sizing:border-box}:root{--color-primary: #CC3A50;--color-primary-hover: #D9546A;--color-primary-dark: #9B2335;--color-primary-light: #D4A5AD;--color-accent: #C41E3A;--color-background: #f5f3ef;--color-background-alt: #efebe4;--color-surface: rgba(255, 255, 255, .82);--color-surface-light: rgba(255, 255, 255, .95);--color-surface-hover: rgba(255, 255, 255, 1);--color-text: #23252b;--color-text-secondary: #5b5f6b;--color-text-muted: #9aa0ab;--color-error: #ff4757;--color-warning: #ffa502;--color-success: #2ed573;--color-border: rgba(155, 35, 53, .25);--color-border-subtle: rgba(0, 0, 0, .08);--gradient-primary: linear-gradient(135deg, #9B2335 0%, #C41E3A 100%);--gradient-primary-soft: linear-gradient(135deg, rgba(155, 35, 53, .2) 0%, rgba(196, 30, 58, .1) 100%);--gradient-background: linear-gradient(180deg, #f7f5f0 0%, #f1ece5 50%, #f7f5f0 100%);--gradient-surface: linear-gradient(180deg, rgba(155, 35, 53, .08) 0%, transparent 100%);--gradient-glow: radial-gradient(circle at center, rgba(155, 35, 53, .2) 0%, transparent 70%);--gradient-mesh: radial-gradient(at 40% 20%, rgba(155, 35, 53, .15) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(196, 30, 58, .1) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(155, 35, 53, .1) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(122, 28, 42, .08) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(155, 35, 53, .1) 0px, transparent 50%);--shadow-sm: 0 2px 8px rgba(30, 20, 22, .1);--shadow-md: 0 4px 20px rgba(30, 20, 22, .14);--shadow-lg: 0 8px 40px rgba(30, 20, 22, .18);--shadow-glow: 0 0 40px rgba(155, 35, 53, .25), 0 0 80px rgba(155, 35, 53, .1);--shadow-glow-intense: 0 0 60px rgba(155, 35, 53, .4), 0 0 120px rgba(155, 35, 53, .2);--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s ease;--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;min-width:320px;height:100%;overflow:hidden;background:var(--color-background);position:fixed;width:100%;inset:0}body:before{content:"";position:fixed;inset:-100px 0;background:var(--color-background);background-image:var(--gradient-mesh);background-size:cover;background-attachment:fixed;z-index:-1;pointer-events:none}#root{height:100%;max-height:100%;overflow:hidden;position:relative}body:before{content:"";position:fixed;inset:0;background-image:radial-gradient(2px 2px at 20px 30px,rgba(155,35,53,.3),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.2),transparent),radial-gradient(2px 2px at 50px 160px,rgba(155,35,53,.2),transparent),radial-gradient(2px 2px at 90px 40px,rgba(255,255,255,.15),transparent),radial-gradient(2px 2px at 130px 80px,rgba(155,35,53,.25),transparent),radial-gradient(2px 2px at 160px 120px,rgba(255,255,255,.1),transparent);background-repeat:repeat;background-size:200px 200px;animation:floatParticles 60s linear infinite;pointer-events:none;opacity:.6;z-index:0}@keyframes floatParticles{0%{transform:translateY(0) translate(0)}to{transform:translateY(-200px) translate(100px)}}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}button{font-family:inherit;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}button:active{transform:scale(.97)}button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}button:active:after{width:300px;height:300px}*:focus-visible{outline:2px solid var(--color-primary-light);outline-offset:3px;border-radius:var(--radius-sm)}.skip-to-main{position:absolute;top:-100px;left:0;background:var(--color-primary);color:#fff;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);z-index:9999;text-decoration:none;transition:top .2s ease}.skip-to-main:focus{top:var(--spacing-sm);left:var(--spacing-sm)}button,input[type=button],input[type=submit],input[type=reset],a.button,.interactive-element{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(prefers-contrast:high){:root{--color-border: rgba(155, 35, 53, .4);--color-text-secondary: #d0d0d0;--color-text-muted: #909090}.glass{border-width:2px}}@media(prefers-color-scheme:dark){:root{--color-background: #f5f3ef;--color-surface: rgba(20, 20, 30, .9)}}img{max-width:100%;height:auto}video{max-width:100%}.glass{background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border)}.glow-text{text-shadow:0 0 20px rgba(155,35,53,.5),0 0 40px rgba(155,35,53,.3)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 20px #9b23354d,0 0 40px #9b23351a}50%{box-shadow:0 0 40px #9b233580,0 0 80px #9b233533}}.splash-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-background);z-index:9999;overflow:hidden;transition:opacity .5s ease,transform .5s ease}.splash-screen.exiting{opacity:0;transform:scale(1.1)}.splash-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);z-index:1}.splash-logo{font-family:Chango,cursive;font-size:3.5rem;letter-spacing:-.02em;animation:splashLogoIn .8s ease-out}.splash-text{color:var(--color-text)}.splash-text-highlight{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:splashHighlightPulse 2s ease-in-out infinite}@keyframes splashHighlightPulse{0%,to{filter:drop-shadow(0 0 10px var(--color-primary))}50%{filter:drop-shadow(0 0 25px var(--color-primary))}}.splash-tagline{font-size:1rem;color:var(--color-text-secondary);letter-spacing:.1em;text-transform:uppercase;animation:splashFadeIn .6s ease-out .3s both}.splash-loader{width:200px;height:3px;background:var(--color-surface-light);border-radius:var(--radius-full);overflow:hidden;animation:splashFadeIn .6s ease-out .5s both}.splash-loader-bar{height:100%;width:0%;background:var(--gradient-primary);border-radius:var(--radius-full);animation:splashLoading 1.8s ease-out forwards}@keyframes splashLogoIn{0%{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes splashFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes splashLoading{0%{width:0%}to{width:100%}}.splash-bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}.splash-bg-orb-1{width:400px;height:400px;background:radial-gradient(circle,var(--color-primary) 0%,transparent 70%);top:-150px;right:-100px;animation:splashOrb1 8s ease-in-out infinite}.splash-bg-orb-2{width:300px;height:300px;background:radial-gradient(circle,var(--color-accent) 0%,transparent 70%);bottom:-100px;left:-50px;animation:splashOrb2 10s ease-in-out infinite}.splash-bg-orb-3{width:200px;height:200px;background:radial-gradient(circle,var(--color-primary-dark) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:splashOrb3 6s ease-in-out infinite}@keyframes splashOrb1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-30px,40px) scale(1.1)}}@keyframes splashOrb2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}@keyframes splashOrb3{0%,to{transform:translate(-50%,-50%) scale(.8);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.5}}@media(max-width:480px){.splash-logo{font-size:2.5rem}.splash-tagline{font-size:.85rem}.splash-loader{width:160px}}.splash-logo-img{width:260px;height:260px;object-fit:contain;margin:0 auto 14px;display:block;animation:splash-pop .6s cubic-bezier(.2,.8,.3,1.15) both}@keyframes splash-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.login-page{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);padding-top:calc(var(--spacing-xl) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--spacing-xl) + env(safe-area-inset-bottom,0px));overflow:hidden;z-index:1;background:var(--color-background);background-image:var(--gradient-mesh)}.login-page:before,.login-page:after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}.login-page:before{width:400px;height:400px;background:radial-gradient(circle,rgba(155,35,53,.4) 0%,transparent 70%);top:-100px;right:-100px;animation:floatOrb1 15s ease-in-out infinite}.login-page:after{width:300px;height:300px;background:radial-gradient(circle,rgba(196,30,58,.3) 0%,transparent 70%);bottom:-50px;left:-50px;animation:floatOrb2 12s ease-in-out infinite}@keyframes floatOrb1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-30px,50px) scale(1.1)}66%{transform:translate(20px,-30px) scale(.95)}}@keyframes floatOrb2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,-40px) scale(1.15)}}.login-card{position:relative;background:var(--color-surface);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);max-width:400px;width:100%;box-shadow:var(--shadow-lg),inset 0 1px #ffffff0d;text-align:center;animation:scaleIn .5s ease-out;overflow:hidden}.login-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(155,35,53,.05),transparent);animation:cardShimmer 3s ease-in-out infinite}.login-card h1{font-family:Chango,cursive;font-size:clamp(1.75rem,7vw,2.5rem);font-weight:400;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--spacing-md);letter-spacing:-.03em;position:relative;animation:fadeIn .6s ease-out .2s both}.login-subtitle{font-size:1rem;color:var(--color-text-secondary);margin:0 0 var(--spacing-2xl);animation:fadeIn .6s ease-out .3s both}.login-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-xl);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-full);font-size:1.1rem;font-weight:700;box-shadow:var(--shadow-glow);animation:fadeIn .6s ease-out .4s both,glow 3s ease-in-out infinite;position:relative;z-index:1}.login-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-glow-intense)}.login-button:active{transform:translateY(-1px) scale(.98)}.login-note{margin-top:var(--spacing-lg);font-size:.8rem;color:var(--color-text-muted);animation:fadeIn .6s ease-out .5s both}.login-secondary-buttons{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl);animation:fadeIn .6s ease-out .6s both}.login-secondary-button{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-surface-light);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-lg);font-size:.9rem;font-weight:500;transition:all var(--transition-normal)}.login-secondary-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);transform:translateY(-2px)}.login-secondary-button svg{width:18px;height:18px;color:var(--color-primary)}@media(max-width:480px){.login-card{padding:var(--spacing-xl);margin:var(--spacing-md)}.login-card h1{font-size:2.25rem}}.login-logo{width:240px;height:240px;object-fit:contain;margin:0 auto 10px;display:block}.player-container{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);gap:var(--spacing-lg);position:relative;width:100%;animation:scaleIn .4s ease-out;overflow:hidden}.player-container:before{content:"";position:absolute;top:-50%;left:50%;transform:translate(-50%);width:150%;height:100%;background:radial-gradient(ellipse at center,rgba(155,35,53,.1) 0%,transparent 60%);pointer-events:none;animation:playerGlow 4s ease-in-out infinite}@keyframes playerGlow{0%,to{opacity:.5}50%{opacity:.8}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.player-controls{display:flex;align-items:center;justify-content:center}.player-button{background:none;border:none;color:var(--color-text);padding:var(--spacing-sm);display:flex;align-items:center;justify-content:center}.player-button:hover{color:var(--color-primary)}.player-button svg{width:24px;height:24px}.player-main-button{width:72px;height:72px;background:var(--gradient-primary);border-radius:var(--radius-full);padding:0;box-shadow:var(--shadow-glow);animation:glow 3s ease-in-out infinite}.player-main-button:hover{transform:scale(1.08);box-shadow:0 0 50px #9b233580}.player-main-button:active{transform:scale(.95)}.player-main-button svg{width:32px;height:32px;margin-left:3px}.player-progress{width:100%}.player-progress-bar{width:100%;height:8px;background:var(--color-surface-light);border-radius:var(--radius-full);cursor:pointer;overflow:hidden;transition:height .15s ease}.player-progress-bar:hover{height:12px}.player-progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .1s linear;position:relative}.player-progress-fill:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%) scale(0);width:16px;height:16px;background:var(--color-text);border-radius:var(--radius-full);transition:transform .15s ease}.player-progress-bar:hover .player-progress-fill:after{transform:translateY(-50%) scale(1)}.player-time{display:flex;justify-content:space-between;font-size:.85rem;color:var(--color-text-muted);margin-top:var(--spacing-sm);font-variant-numeric:tabular-nums}.player-volume{display:flex;align-items:center;gap:var(--spacing-sm);width:100%}.player-volume-button{flex-shrink:0;padding:var(--spacing-xs);min-height:36px;min-width:36px}.player-volume-button svg{width:20px;height:20px}.player-volume-bar{flex:1;height:6px;background:var(--color-surface-light);border-radius:var(--radius-full);cursor:pointer;overflow:hidden;transition:height .15s ease}.player-volume-bar:hover{height:10px}.player-volume-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .1s linear}.player-visualizer{display:flex;gap:4px;align-items:flex-end;height:24px}.player-visualizer span{width:4px;background:var(--color-primary);border-radius:2px;animation:visualize .5s ease-in-out infinite alternate}.player-visualizer span:nth-child(1){animation-delay:0s;height:50%}.player-visualizer span:nth-child(2){animation-delay:.1s;height:100%}.player-visualizer span:nth-child(3){animation-delay:.2s;height:30%}.player-visualizer span:nth-child(4){animation-delay:.3s;height:70%}@keyframes visualize{0%{transform:scaleY(.4)}to{transform:scaleY(1)}}.game-page{height:100%;max-height:100%;display:flex;flex-direction:column;position:relative;z-index:1;overflow:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.game-back-button{position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);left:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);transition:all var(--transition-normal);z-index:100;box-shadow:var(--shadow-md)}.game-back-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);color:var(--color-primary);transform:scale(1.05)}.game-back-button:active{transform:scale(.95)}.game-back-button svg{width:22px;height:22px}.game-user{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;display:flex;align-items:center;gap:var(--spacing-sm);z-index:100}.game-user-avatar{width:44px;height:44px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-border);transition:all var(--transition-normal);box-shadow:var(--shadow-md)}.game-user-avatar:hover{border-color:var(--color-primary);box-shadow:0 0 20px #9b23354d}.game-user-avatar-placeholder{width:44px;height:44px;border-radius:var(--radius-full);background:var(--gradient-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:var(--shadow-md)}.game-user-name{display:none}.game-warning{background:linear-gradient(90deg,#ffa50226,#ffa5020d);border-bottom:1px solid rgba(255,165,2,.2);color:var(--color-warning);padding:var(--spacing-md) var(--spacing-lg);text-align:center;animation:fadeIn .3s ease-out}.game-warning strong{display:block;margin-bottom:var(--spacing-xs)}.game-warning p{margin:0;font-size:.85rem;opacity:.9}.game-error{background:linear-gradient(90deg,#ff475726,#ff47570d);border-bottom:1px solid rgba(255,71,87,.2);color:var(--color-error);padding:var(--spacing-md) var(--spacing-lg);text-align:center;font-size:.9rem;animation:fadeIn .3s ease-out}.game-status{background:linear-gradient(90deg,#1db95426,#1db9540d);border-bottom:1px solid rgba(29,185,84,.2);color:var(--color-primary-light, #a7f3d0);padding:var(--spacing-md) var(--spacing-lg);text-align:center;font-size:.9rem;animation:fadeIn .3s ease-out}.game-main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);position:relative}.game-main:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;background:var(--gradient-glow);pointer-events:none;opacity:.6;animation:breathe 4s ease-in-out infinite}@keyframes breathe{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.1);opacity:.8}}.game-content{width:100%;max-width:400px;position:relative;z-index:1;animation:fadeIn .5s ease-out}.game-scanner-section{text-align:center;animation:scaleIn .4s ease-out}.game-scanner-section h2{font-size:1.5rem;font-weight:700;color:var(--color-text);margin:0 0 var(--spacing-lg)}.game-player-section{display:flex;flex-direction:column;gap:var(--spacing-lg);animation:slideUp .4s ease-out}.game-track-url{display:none}.game-scan-again{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-full);font-size:1rem;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-scan-again:hover{background:var(--color-surface-light);border-color:var(--color-primary);box-shadow:0 0 30px #9b233526}.game-scan-again svg{width:20px;height:20px;color:var(--color-primary)}.game-player-connecting{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.game-player-connecting p{margin:0;color:var(--color-text);font-size:1.1rem;font-weight:500}.game-player-hint{color:var(--color-text-secondary)!important;font-size:.85rem!important;margin-top:var(--spacing-sm)!important;font-weight:400!important}.game-player-spinner{width:56px;height:56px;border:3px solid var(--color-surface-light);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--spacing-lg)}.game-menu{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);width:100%}.game-connection-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:.9rem;color:var(--color-text);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeIn .5s ease-out .1s both}.game-status-dot-connected{width:10px;height:10px;background:var(--color-primary);border-radius:var(--radius-full);box-shadow:0 0 15px #9b233599;animation:pulse-glow 2s ease-in-out infinite}.game-status-dot-fallback{width:10px;height:10px;background:#f5a623;border-radius:var(--radius-full);box-shadow:0 0 12px #f5a62380}.game-retry-button{margin-left:12px;padding:4px 14px;border:1px solid currentColor;border-radius:var(--radius-full);background:none;color:inherit;font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer}.game-retry-button:hover{background:#ffffff14}.game-retry-button:disabled{opacity:.6;cursor:default}.game-reveal{display:flex;justify-content:center;margin-top:var(--spacing-lg)}.game-reveal-button{display:flex;align-items:center;gap:10px;padding:14px 28px;border:2px solid var(--color-primary);border-radius:var(--radius-full);background:transparent;color:var(--color-primary);font-family:Chango,cursive;font-size:1rem;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}.game-reveal-button svg{width:20px;height:20px}.game-reveal-button:hover{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-glow)}.game-reveal-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 34px;border:2px solid var(--color-primary);border-radius:var(--radius-lg, 16px);background:var(--gradient-primary-soft, rgba(155, 35, 53, .12));cursor:pointer;font-family:inherit;text-align:center;animation:revealFlip .45s cubic-bezier(.2,.8,.3,1.1);transform-origin:center top;max-width:90vw}.game-reveal-year{font-family:Chango,cursive;font-size:2.8rem;line-height:1;color:var(--color-primary);text-shadow:0 0 24px rgba(155,35,53,.4)}.game-reveal-title{font-size:1.15rem;font-weight:700;color:var(--color-text, #fff);word-break:break-word}.game-reveal-artist{font-size:.95rem;color:var(--color-text-secondary, rgba(255, 255, 255, .7));word-break:break-word}.game-reveal-hint{margin-top:6px;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;color:var(--color-text-secondary, rgba(255, 255, 255, .45));opacity:.7}@keyframes revealFlip{0%{transform:perspective(600px) rotateX(80deg);opacity:0}to{transform:perspective(600px) rotateX(0);opacity:1}}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #9b233580;transform:scale(1)}50%{box-shadow:0 0 20px #9b2335cc;transform:scale(1.1)}}.game-status-spinner{width:18px!important;height:18px!important;border-width:2px!important;margin:0!important}.game-menu-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);border-radius:var(--radius-lg);font-size:1rem;font-weight:500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-normal)}.game-menu-button:hover:not(:disabled){background:var(--color-surface-light);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 10px 30px #0000004d,0 0 20px #9b23351a}.game-menu-button:disabled{opacity:.5;cursor:not-allowed}.game-menu-button svg{width:22px;height:22px;color:var(--color-primary)}.game-menu-button-primary{background:var(--gradient-primary);border-color:transparent;color:#fff;font-weight:700;font-size:1.15rem;padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow-glow);animation:fadeIn .5s ease-out .2s both,glow 3s ease-in-out infinite}.game-menu-button-primary:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-glow-intense);background:var(--gradient-primary);border-color:transparent}.game-menu-button-primary svg{color:#fff}.game-menu-secondary{display:flex;gap:var(--spacing-md);width:100%;animation:fadeIn .5s ease-out .3s both}.game-menu-secondary .game-menu-button{flex:1;font-size:.9rem;padding:var(--spacing-md)}.game-logout-button{background:transparent;border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:.85rem;margin-top:var(--spacing-md);animation:fadeIn .5s ease-out .4s both}.game-logout-button:hover{background:var(--color-surface);color:var(--color-text);border-color:var(--color-text-muted)}.game-status{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#9b23351a;border-radius:var(--radius-full);font-size:.8rem;color:var(--color-primary);margin-bottom:var(--spacing-lg)}.game-status-dot{width:8px;height:8px;background:var(--color-primary);border-radius:var(--radius-full);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.game-info{background:linear-gradient(90deg,#9b23351a,#c41e3a0d);border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);padding:var(--spacing-sm) var(--spacing-lg);text-align:center;font-size:.85rem;animation:fadeIn .3s ease-out}.game-info p{margin:0}.game-non-premium-player{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-2xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:scaleIn .4s ease-out}.game-non-premium-icon{width:80px;height:80px;background:var(--gradient-primary);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);animation:glow 3s ease-in-out infinite}.game-non-premium-icon svg{width:40px;height:40px;color:#fff}.game-non-premium-text{font-size:1.1rem;font-weight:500;color:var(--color-text);margin:0}.game-open-spotify-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);background:#1db954;border:none;color:#fff;border-radius:var(--radius-full);font-size:1rem;font-weight:600;transition:all var(--transition-normal)}.game-open-spotify-button:hover{transform:translateY(-2px);box-shadow:0 0 30px #1db95466}.game-open-spotify-button svg{width:24px;height:24px}.game-menu-logo{width:230px;height:230px;object-fit:contain;margin:0 auto;display:block;animation:fadeIn .5s ease-out both}.settings-page{height:100%;max-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.settings-page:before{content:"";position:fixed;top:20%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(155,35,53,.08) 0%,transparent 70%);pointer-events:none;animation:settingsOrb 10s ease-in-out infinite}@keyframes settingsOrb{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-20px,30px) scale(1.1)}}.settings-back-button{position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);left:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);transition:all var(--transition-normal);z-index:100;box-shadow:var(--shadow-md)}.settings-back-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);color:var(--color-primary);transform:scale(1.05)}.settings-back-button:active{transform:scale(.95)}.settings-back-button svg{width:22px;height:22px}.settings-main{flex:1;padding:var(--spacing-xl);padding-top:calc(env(safe-area-inset-top,0px) + 80px);max-width:500px;margin:0 auto;width:100%;overflow-y:auto}.settings-title{font-size:1.75rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--spacing-xl);text-align:center;animation:fadeIn .5s ease-out}.settings-section{margin-bottom:var(--spacing-xl);animation:fadeIn .5s ease-out backwards}.settings-section:nth-child(1){animation-delay:.1s}.settings-section:nth-child(2){animation-delay:.2s}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.settings-section h2{font-size:.85rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0 0 var(--spacing-md)}.settings-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.settings-option{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);text-align:left;width:100%;transition:all var(--transition-normal)}.settings-option:hover{background:var(--color-surface-light);border-color:var(--color-text-muted)}.settings-option.active{border-color:var(--color-primary);background:var(--gradient-primary-soft);box-shadow:var(--shadow-glow)}.settings-option-flag{font-size:1.5rem}.settings-option-label{flex:1;font-size:1rem;font-weight:500}.settings-option-check{width:20px;height:20px;color:var(--color-primary)}.settings-option-sub{font-size:.8rem;font-weight:400;opacity:.65}.settings-option-art{width:56px;height:56px;object-fit:contain;flex:none}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.theme-option{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);transition:all var(--transition-normal);position:relative}.theme-option:hover{background:var(--color-surface-light);border-color:var(--theme-color);transform:translateY(-2px)}.theme-option.active{border-color:var(--theme-color);box-shadow:0 0 20px color-mix(in srgb,var(--theme-color) 30%,transparent)}.theme-preview{width:48px;height:48px;border-radius:var(--radius-md);overflow:hidden;display:flex;box-shadow:var(--shadow-sm)}.theme-color-primary{flex:1;background:var(--theme-color)}.theme-color-accent{flex:1;background:var(--theme-accent)}.theme-name{font-size:.75rem;font-weight:600;color:var(--color-text-secondary)}.theme-option.active .theme-name{color:var(--color-text)}.theme-check{position:absolute;top:6px;right:6px;width:16px;height:16px;color:var(--theme-color)}.about-page{height:100%;max-height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}.about-page:before,.about-page:after{content:"";position:fixed;border-radius:50%;pointer-events:none}.about-page:before{width:250px;height:250px;background:radial-gradient(circle,rgba(155,35,53,.1) 0%,transparent 70%);top:10%;right:-5%;animation:aboutOrb1 12s ease-in-out infinite}.about-page:after{width:200px;height:200px;background:radial-gradient(circle,rgba(196,30,58,.08) 0%,transparent 70%);bottom:20%;left:-5%;animation:aboutOrb2 10s ease-in-out infinite}@keyframes aboutOrb1{0%,to{transform:translate(0)}50%{transform:translate(-20px,20px)}}@keyframes aboutOrb2{0%,to{transform:translate(0)}50%{transform:translate(20px,-15px)}}.about-back-button{position:fixed;top:calc(env(safe-area-inset-top,0px) + 60px);left:16px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--color-surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text);transition:all var(--transition-normal);z-index:100;box-shadow:var(--shadow-md)}.about-back-button:hover{background:var(--color-surface-hover);border-color:var(--color-primary);color:var(--color-primary);transform:scale(1.05)}.about-back-button:active{transform:scale(.95)}.about-back-button svg{width:22px;height:22px}.about-main{flex:1;padding:var(--spacing-xl);padding-top:calc(env(safe-area-inset-top,0px) + 80px);max-width:500px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--spacing-xl);overflow-y:auto}.about-title{font-size:1.75rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--spacing-md);text-align:center;animation:fadeIn .5s ease-out}.about-card{text-align:center;padding:var(--spacing-xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);animation:fadeIn .5s ease-out .1s backwards;position:relative;overflow:hidden}.about-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(155,35,53,.05),transparent);animation:cardShimmer 4s ease-in-out infinite}@keyframes cardShimmer{0%,to{left:-100%}50%{left:100%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.about-logo{width:80px;height:80px;margin:0 auto var(--spacing-md);color:var(--color-primary);filter:drop-shadow(0 0 20px rgba(155,35,53,.5));animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 20px rgba(155,35,53,.5))}50%{filter:drop-shadow(0 0 30px rgba(155,35,53,.7))}}.about-logo svg{width:100%;height:100%}.about-card h2{font-size:1.75rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--spacing-xs);letter-spacing:-.02em}.about-tagline{font-size:.95rem;color:var(--color-text-secondary);margin:0}.about-content{padding:var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);animation:fadeIn .5s ease-out .2s backwards}.about-content p{margin:0;color:var(--color-text-secondary);line-height:1.6}.about-info{display:flex;flex-direction:column;gap:var(--spacing-sm);animation:fadeIn .5s ease-out .3s backwards}.about-info-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-normal)}.about-info-item:hover{border-color:var(--color-primary);background:var(--color-surface-light)}.about-info-label{font-size:.9rem;color:var(--color-text-secondary)}.about-info-value{font-size:.9rem;font-weight:600;color:var(--color-text)}.loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-text-secondary);gap:var(--spacing-lg);position:relative}.loading-screen:before{content:"";position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(155,35,53,.15) 0%,transparent 70%);border-radius:50%;animation:loadingPulse 2s ease-in-out infinite;pointer-events:none}@keyframes loadingPulse{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.8}}.loading-spinner{width:56px;height:56px;border:3px solid var(--color-surface-light);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;box-shadow:0 0 30px #9b233533;position:relative;z-index:1}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen p{font-size:.9rem;margin:0;animation:fadeIn .5s ease-out;position:relative;z-index:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.swipe-back-indicator{position:fixed;left:0;top:50%;transform:translateY(-50%) translate(0) scale(.5);width:48px;height:48px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:0 var(--radius-full) var(--radius-full) 0;display:flex;align-items:center;justify-content:center;opacity:0;transition:background-color .2s ease;z-index:9999;pointer-events:none}.swipe-back-indicator svg{width:24px;height:24px;color:var(--color-text-secondary);transition:color .2s ease}.swipe-back-indicator.ready{background:var(--color-primary);border-color:var(--color-primary)}.swipe-back-indicator.ready svg{color:var(--color-background)}*{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html,body{overscroll-behavior:none}@supports (padding: env(safe-area-inset-top)){.game-page,.login-page,.settings-page,.about-page{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}