*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0a0a12,#12121f,#0f0f1a);color:#e8e8ed;min-height:100vh;overflow-x:hidden}.app{display:flex;flex-direction:column;min-height:100vh}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#12121ef2;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.logo{font-family:"Press Start 2P",cursive;font-size:14px;letter-spacing:1px;display:flex;align-items:baseline}.logo-retro{color:#10b981}.logo-plays{color:#f59e0b}.logo-dot{color:#6b7280;font-size:10px;margin-left:2px}.header-right,.user-section{display:flex;align-items:center;gap:12px}.user-email,.user-nickname{font-size:12px;color:#9ca3af;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-nickname{color:#10b981;font-weight:500}.btn{padding:8px 16px;font-size:14px;font-family:inherit;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 2px 8px #10b9814d}.btn-primary:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 4px 12px #10b98166}.btn-secondary{background:#ffffff14;color:#e8e8ed;border:1px solid rgba(255,255,255,.1)}.btn-secondary:hover{background:#ffffff1f;border-color:#ffffff26}.btn-ghost{background:transparent;color:#9ca3af;padding:8px 12px}.btn-ghost:hover{color:#e8e8ed}.btn-icon{width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;background:#ffffff0f;color:#e8e8ed;font-weight:600;font-size:13px;border:1px solid rgba(255,255,255,.08)}.btn-icon:hover{background:#ffffff1a}.btn-icon.disabled{opacity:.5;color:#6b7280}.btn-back{width:40px;height:40px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background .2s ease}.btn-back:hover{background:#ffffff14}.back-arrow{width:12px;height:12px;border-left:2px solid #e8e8ed;border-bottom:2px solid #e8e8ed;transform:rotate(45deg);margin-left:4px}.audio-controls{display:flex;gap:6px}.home-view{flex:1;padding:24px 16px;max-width:900px;margin:0 auto;width:100%}.hero{text-align:center;margin-bottom:40px;padding:20px 0}.hero-title{font-family:"Press Start 2P",cursive;font-size:18px;font-weight:400;margin-bottom:16px;line-height:1.6;background:linear-gradient(135deg,#10b981,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:15px;color:#9ca3af;font-weight:400}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.game-card{background:linear-gradient(145deg,#1e1e2de6,#141423f2);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px;cursor:pointer;transition:all .3s ease;text-align:left;font-family:inherit;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}.game-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#10b981,#f59e0b);opacity:0;transition:opacity .3s ease}.game-card:hover{transform:translateY(-4px);border-color:#10b9814d;box-shadow:0 12px 32px #0006,0 0 0 1px #10b9811a}.game-card:hover:before{opacity:1}.game-card:active{transform:scale(.98)}.game-preview{width:100%;height:auto;border-radius:10px;aspect-ratio:90 / 70}.game-card-info{display:flex;flex-direction:column;gap:6px}.game-card-title{font-size:14px;font-weight:600;color:#e8e8ed}.game-card-desc{font-size:12px;color:#9ca3af;line-height:1.5}.game-view{flex:1;display:flex;flex-direction:column;padding:16px;max-width:100%;overflow:hidden}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.game-info h1{font-size:20px;font-weight:600;margin-bottom:4px}.game-controls-hint{font-size:12px;color:#9ca3af}.game-controls{display:flex;gap:8px}.game-container{display:flex;justify-content:center;align-items:center;flex:1;min-height:0;overflow:hidden}canvas{border-radius:12px;box-shadow:0 8px 32px #00000080,0 0 0 1px #ffffff0d;max-width:100%;max-height:100%;object-fit:contain}.stats-panel{margin-top:16px;padding:14px 20px;background:#12121ecc;border:1px solid rgba(255,255,255,.06);border-radius:12px;display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.stat-item{text-align:center}.stat-value{font-size:22px;font-weight:600;color:#10b981}.stat-label{font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:1px;margin-top:4px}.auth-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:none;justify-content:center;align-items:center;z-index:1000;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-modal{background:linear-gradient(145deg,#1e1e2d,#16161f);padding:32px 28px;border-radius:16px;width:100%;max-width:380px;position:relative;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px #00000080}.auth-close{position:absolute;top:14px;right:14px;background:none;border:none;color:#6b7280;font-size:24px;cursor:pointer;line-height:1}.auth-close:hover{color:#e8e8ed}.auth-modal h2{font-size:20px;margin-bottom:24px;text-align:center;font-weight:600}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-form input{padding:14px 16px;font-size:14px;font-family:inherit;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#e8e8ed;outline:none;transition:border-color .2s ease,background .2s ease}.auth-form input:focus{border-color:#10b981;background:#10b9810d}.auth-form input::placeholder{color:#6b7280}.auth-form button{padding:14px 18px;font-size:14px;font-family:inherit;font-weight:600;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:all .2s ease;margin-top:4px}.auth-form button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px)}.auth-switch{margin-top:20px;text-align:center;font-size:13px;color:#9ca3af}.auth-switch-btn{background:none;border:none;color:#10b981;font-size:13px;font-family:inherit;cursor:pointer;margin-left:4px;font-weight:500}.auth-switch-btn:hover{text-decoration:underline}.auth-error{margin-top:16px;font-size:13px;color:#ef4444;text-align:center;min-height:18px}.profile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:none;justify-content:center;align-items:center;z-index:1000;padding:16px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.profile-modal{background:linear-gradient(145deg,#1e1e2d,#16161f);padding:32px 28px;border-radius:16px;width:100%;max-width:380px;position:relative;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px #00000080}.profile-modal h2{font-size:20px;margin-bottom:24px;text-align:center;font-weight:600}@media (min-width: 480px){.header{padding:16px 24px}.logo{font-size:16px}.logo-dot{font-size:12px}.home-view{padding:40px 24px}.hero-title{font-size:22px}.hero-subtitle{font-size:16px}.games-grid{gap:20px}.game-card{padding:16px;gap:14px}.game-card-title{font-size:16px}.game-card-desc{font-size:13px}.game-view{padding:24px}.game-info h1{font-size:24px}.user-email{max-width:none}}@media (min-width: 640px){.games-grid{grid-template-columns:repeat(3,1fr)}.hero-title{font-size:26px}}@media (min-width: 768px){.header{padding:18px 32px}.home-view{padding:48px 32px}.hero{margin-bottom:48px}.games-grid{grid-template-columns:repeat(4,1fr);gap:24px}.game-view{padding:32px}.game-info h1{font-size:28px}.stats-panel{gap:56px}}@media (min-width: 1024px){.games-grid{grid-template-columns:repeat(5,1fr)}}@media (max-width: 479px){.user-email,.user-nickname{display:none}.game-header{flex-direction:column;align-items:flex-start}.game-controls{width:100%}.game-controls .btn{flex:1}.stats-panel{gap:20px}.stat-value{font-size:18px}}@media (max-width: 768px) and (pointer: coarse){.app.game-active .header{padding:6px 10px}.app.game-active .logo{font-size:10px}.app.game-active .logo-dot{font-size:8px}.app.game-active .audio-controls,.app.game-active .user-section{display:none}.app.game-active .btn-back{width:32px;height:32px}.app.game-active .back-arrow{width:10px;height:10px}.app.game-active .game-view{padding:8px;gap:8px}.app.game-active .game-header{margin-bottom:8px;gap:6px}.app.game-active .game-info h1{font-size:14px;margin-bottom:0}.app.game-active .game-controls-hint{display:none}.app.game-active .game-controls{gap:4px}.app.game-active .game-controls .btn{padding:6px 12px;font-size:12px}.app.game-active .game-container{flex:1;min-height:0}.app.game-active canvas{width:100%!important;height:100%!important;max-width:100vw;max-height:calc(100vh - 120px);object-fit:contain}.app.game-active .stats-panel{margin-top:8px;padding:8px 12px;gap:12px}.app.game-active .stat-value{font-size:14px}.app.game-active .stat-label{font-size:8px}}@media (max-width: 480px) and (pointer: coarse) and (orientation: portrait){.app.game-active .game-container{max-height:calc(100vh - 140px)}}.game-container:fullscreen,.game-container:-webkit-full-screen,.game-container:-moz-full-screen,.game-container:-ms-fullscreen{background:#0a0a12;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;padding:0;margin:0}.game-container:fullscreen canvas,.game-container:-webkit-full-screen canvas,.game-container:-moz-full-screen canvas,.game-container:-ms-fullscreen canvas{max-width:100vw;max-height:100vh;width:auto;height:auto;object-fit:contain}.leaderboard-panel{margin-top:16px;padding:16px 20px;background:#12121ecc;border:1px solid rgba(255,255,255,.06);border-radius:12px}.leaderboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}.leaderboard-title{font-size:14px;font-weight:600;color:#f59e0b;text-transform:uppercase;letter-spacing:1px}.leaderboard-rank{font-size:12px;color:#10b981;font-weight:500}.leaderboard-list{display:flex;flex-direction:column;gap:6px}.leaderboard-loading,.leaderboard-empty{text-align:center;color:#6b7280;font-size:13px;padding:20px 0}.leaderboard-entry{display:flex;align-items:center;padding:8px 12px;background:#ffffff08;border-radius:8px;transition:background .2s ease}.leaderboard-entry:hover{background:#ffffff0f}.leaderboard-entry.rank-1{background:linear-gradient(135deg,#f59e0b26,#f59e0b0d);border:1px solid rgba(245,158,11,.2)}.leaderboard-entry.rank-2{background:linear-gradient(135deg,#9ca3af26,#9ca3af0d);border:1px solid rgba(156,163,175,.2)}.leaderboard-entry.rank-3{background:linear-gradient(135deg,#b4530926,#b453090d);border:1px solid rgba(180,83,9,.2)}.entry-rank{width:36px;font-weight:700;font-size:13px;color:#9ca3af}.rank-1 .entry-rank{color:#f59e0b}.rank-2 .entry-rank{color:#9ca3af}.rank-3 .entry-rank{color:#b45309}.entry-player{flex:1;font-size:13px;color:#e8e8ed;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.entry-score{font-weight:600;font-size:14px;color:#10b981;margin-left:12px}@media (max-width: 479px){.leaderboard-panel{margin-top:12px;padding:12px 14px}.leaderboard-header{flex-direction:column;align-items:flex-start;gap:4px}.leaderboard-entry{padding:6px 10px}.entry-rank{width:28px;font-size:12px}.entry-player{font-size:12px}.entry-score{font-size:13px}}@media (max-height: 500px) and (pointer: coarse){.app.game-active .header{padding:4px 8px}.app.game-active .logo{font-size:9px}.app.game-active .game-view{padding:4px}.app.game-active .game-header{margin-bottom:4px;flex-direction:row;justify-content:space-between;align-items:center}.app.game-active .game-info h1{font-size:12px}.app.game-active .game-controls .btn{padding:4px 8px;font-size:11px}.app.game-active .stats-panel{display:none}.app.game-active canvas{max-height:calc(100vh - 80px)}}