*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f7f5ff;--surface:#fff;--border:#e2dff7;--text:#1a1730;--text-muted:#7b76a0;--accent:#6c5ce7;--accent-hover:#5849c2;--accent2:#fd79a8;--accent3:#00cec9;--shadow:0 2px 16px #6c5ce71a}body{background:var(--bg);color:var(--text);background-image:radial-gradient(circle,#d8d3f7 1px,#0000 1px);background-size:28px 28px;min-height:100vh;font-family:Georgia,serif}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}.btn{letter-spacing:.02em;cursor:pointer;border:none;border-radius:50px;padding:.55rem 1.3rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:background .15s,transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;display:inline-block}.btn:active{transform:scale(.94)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px #6c5ce759}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 6px 20px #6c5ce773}.btn-ghost{color:#fff;background:#ffffff26;border:1.5px solid #ffffff59}.btn-ghost:hover{background:#ffffff40}input[type=text],input[type=password]{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--text);border-radius:6px;outline:none;padding:.55rem .75rem;font-family:inherit;font-size:1rem;transition:border-color .15s}input:focus{border-color:var(--accent)}.error{color:#c0392b;margin-top:.4rem;font-size:.875rem}nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;background:#ffffffeb;align-items:center;gap:1.5rem;height:58px;padding:0 1.5rem;display:flex;position:sticky;top:0;box-shadow:0 1px 20px #6c5ce714}nav .logo{color:var(--accent);letter-spacing:-.3px;align-items:center;gap:.4rem;font-size:1.15rem;font-weight:700;display:flex}nav .logo-star{font-size:1rem}nav .spacer{flex:1}nav a,nav button.nav-link{color:var(--text-muted);background:0 0;border:none;padding:0;font-size:.9rem;transition:color .15s}nav a:hover,nav button.nav-link:hover{color:var(--accent)}.games-section{max-width:1260px;margin:0 auto;padding:0 1.25rem}.game-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:.75rem 0 1.5rem;display:grid}.game-card{cursor:pointer;aspect-ratio:4/3;-webkit-tap-highlight-color:transparent;border-radius:18px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 4px 16px #00000021}.game-card:hover{transform:translateY(-8px)scale(1.04);box-shadow:0 18px 44px #00000038}.game-card:active{transition-duration:80ms;transform:scale(.96)}.game-card-icon{width:100%;height:100%;position:absolute;inset:0}.game-card-icon svg{width:100%;height:100%;display:block}.game-card-badge{color:#fff;letter-spacing:.06em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0000007a;border-radius:50px;padding:3px 7px;font-size:.6rem;font-weight:700;position:absolute;top:8px;right:8px}.game-card-footer{background:linear-gradient(#0000,#000000b8 70%);padding:1.5rem .75rem .65rem;position:absolute;bottom:0;left:0;right:0}.game-card-title{color:#fff;text-shadow:0 1px 6px #0009;white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:700;overflow:hidden}.game-page{flex-direction:column;align-items:center;min-height:calc(100vh - 56px);padding:1.5rem 1rem 3rem;display:flex}.game-title-bar{align-items:center;gap:1rem;width:100%;max-width:600px;margin-bottom:1rem;display:flex}.game-canvas-wrap{aspect-ratio:4/3;background:#111;border-radius:12px;width:100%;max-width:540px;position:relative;overflow:hidden;box-shadow:0 4px 24px #00000026}.game-canvas-wrap canvas{width:100%;height:auto;display:block}.game-info{flex-wrap:wrap;gap:1.5rem;width:100%;max-width:540px;margin-top:1rem;display:flex}.game-instructions{background:var(--surface);border:1px solid var(--border);min-width:200px;color:var(--text-muted);border-radius:8px;flex:1;padding:.75rem 1rem;font-size:.85rem}.game-score-panel{background:var(--surface);border:1px solid var(--border);border-radius:8px;width:180px;padding:.75rem 1rem}.score-display{color:var(--accent);text-align:center;font-size:2rem;font-weight:700}.score-label{text-align:center;color:var(--text-muted);margin-top:.25rem;font-size:.75rem}.section-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);align-items:center;gap:.5rem;padding:1.25rem 0 0;font-size:.78rem;font-weight:700;display:flex}.section-label:after{content:"";background:var(--border);flex:1;height:1px}.canvas-overlay{color:#fff;text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000ad;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:1.5rem;display:flex;position:absolute;inset:0}.canvas-overlay h2{margin-bottom:.1rem;font-size:1.8rem}.canvas-overlay p{opacity:.85;margin:0;font-size:1rem}.leaderboard-table{border-collapse:collapse;width:100%;margin-top:1rem;font-size:.9rem}.leaderboard-table th{text-align:left;color:var(--text-muted);border-bottom:1px solid var(--border);padding:.4rem .6rem;font-weight:400}.leaderboard-table td{border-bottom:1px solid var(--border);padding:.4rem .6rem}.leaderboard-table tr:last-child td{border-bottom:none}.rank-gold{color:#f9a825;font-weight:700}.rank-silver{color:#90a4ae;font-weight:700}.rank-bronze{color:#a1887f;font-weight:700}.auth-page{max-width:380px;margin:4rem auto;padding:0 1rem}.auth-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:2rem}.auth-card h2{margin-bottom:1.5rem;font-size:1.5rem}.form-group{margin-bottom:1rem}.form-group label{color:var(--text-muted);margin-bottom:.3rem;font-size:.85rem;display:block}.auth-footer{text-align:center;color:var(--text-muted);margin-top:1rem;font-size:.875rem}.auth-footer a{color:var(--accent)}.hero{text-align:center;max-width:800px;margin:0 auto;padding:3rem 1rem .75rem}.hero h1{background:linear-gradient(135deg, var(--accent) 20%, var(--accent2) 80%);-webkit-text-fill-color:transparent;letter-spacing:-2px;-webkit-background-clip:text;background-clip:text;margin-bottom:.4rem;font-size:3.6rem;line-height:1.05}.hero-sub{color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.25rem;font-size:.82rem}.hero-chips{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.75rem;margin-bottom:.5rem;display:flex}.hero-chip{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);border-radius:50px;padding:.3rem .85rem;font-size:.78rem}.hero-marquee{margin:1.25rem 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.hero-marquee-inner{gap:.6rem;width:max-content;animation:55s linear infinite marquee;display:flex}.hero-marquee-item{cursor:pointer;border-radius:12px;flex-shrink:0;width:72px;height:54px;transition:transform .15s;overflow:hidden;box-shadow:0 2px 10px #0000001f}.hero-marquee-item:hover{transform:scale(1.08)}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.mute-btn{background:var(--surface);border:1px solid var(--border);width:44px;height:44px;box-shadow:var(--shadow);z-index:200;border-radius:50%;justify-content:center;align-items:center;font-size:1.25rem;transition:background .15s;display:flex;position:fixed;bottom:1.5rem;right:1.5rem}.mute-btn:hover{background:var(--border)}@media (width>=900px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}@media (width>=1200px){.game-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}@media (width<=640px){.hero h1{letter-spacing:-1px;font-size:2.4rem}.game-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.5rem 0 1.25rem}.games-section{padding:0 .85rem}nav{gap:.75rem;padding:0 1rem}}