:root{--bg-dark: #0f172a;--bg-card: rgba(30, 41, 59, .7);--bg-card-hover: rgba(51, 65, 85, .8);--primary: #8b5cf6;--secondary: #ec4899;--accent: #06b6d4;--text-main: #f8fafc;--text-muted: #94a3b8;--border-color: rgba(255, 255, 255, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -2px rgba(0, 0, 0, .1);--glass-blur: blur(8px);--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;min-height:100dvh;background-image:radial-gradient(ellipse at 15% 50%,rgba(139,92,246,.12),transparent 40%),radial-gradient(ellipse at 85% 30%,rgba(236,72,153,.12),transparent 40%);overflow-x:hidden}a{color:inherit;text-decoration:none}button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}input{color:inherit}.glass{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);will-change:transform}.game-image-container,.player-avatar-container{aspect-ratio:1 / 1;contain:layout style}.text-gradient{background:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.flex-center{display:flex;align-items:center;justify-content:center}.container{max-width:1200px;margin:0 auto;padding:1rem}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.container{padding:.75rem}button,[role=button],input[type=checkbox],input[type=radio]{min-height:44px;min-width:44px}html{font-size:16px;-webkit-text-size-adjust:100%}body{overflow-x:hidden}header{margin:1rem 0 1.5rem!important;flex-wrap:wrap;gap:.75rem}header h1{font-size:1.5rem!important}.glass,.stats-banner{padding:1rem!important}.stats-banner .stat-number{font-size:1.75rem!important}.game-card{padding:.75rem!important}.form-section{padding:1rem!important;margin-bottom:1rem!important}.modal-content{margin:.5rem!important;max-height:calc(100vh - 1rem)!important;max-height:calc(100dvh - 1rem)!important}}@media(max-width:480px){.container{padding:.5rem}nav{gap:.5rem!important;padding:.75rem!important}nav button{flex:1 1 calc(33% - .5rem);min-width:0;padding:.5rem .75rem!important;font-size:.8rem!important}header{margin:.75rem 0 1rem!important}header h1{font-size:1.25rem!important}header p{font-size:.75rem!important}.stats-banner .stat-number{font-size:1.5rem!important}.stats-banner .stat-label{font-size:.7rem!important}.selection-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important;gap:.5rem!important}.action-buttons{flex-direction:column!important}.action-buttons button{width:100%!important}}@media(hover:none)and (pointer:coarse){button:active,[role=button]:active{transform:scale(.97);filter:brightness(.9)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.modal-scroll,[style*="overflow: auto"],[style*="overflow-y: auto"]{-webkit-overflow-scrolling:touch}
