@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Press+Start+2P&display=swap";:root{--color-bg:#6e6e6e;--color-surface:#4a4a4a;--color-primary:#333;--color-accent:#42884b;--color-neon-green:#39ff14;--color-neon-purple:#bc13fe;--color-neon-cyan:#0ff;--color-text:#fff;--color-text-dim:#94a3b8;--font-retro:"Press Start 2P", system-ui;--font-main:"Inter", system-ui}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);background-image:radial-gradient(circle,#6e6e6ecc,#6e6e6e),linear-gradient(#42884b1a 1px,#0000 1px),linear-gradient(90deg,#42884b1a 1px,#0000 1px);background-size:100% 100%,30px 30px,30px 30px;min-height:100vh;overflow-x:hidden}#root{width:100%}h1,h2,h3{font-family:var(--font-retro);text-transform:uppercase;letter-spacing:2px;text-shadow:3px 3px 0px var(--color-accent)}.container{max-width:1200px;margin:0 auto;padding:2rem}.scene{perspective:1000px;justify-content:center;align-items:center;padding:50px;display:flex}.glass{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px}button{cursor:pointer;font-family:var(--font-retro);clip-path:polygon(10% 0,100% 0,100% 70%,90% 100%,0 100%,0% 30%);border:none;padding:1rem 2rem;font-size:.8rem;transition:all .2s}button.primary{background:var(--color-accent);color:#fff}button.primary:hover{box-shadow:0 0 20px var(--color-accent);transform:scale(1.05)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-primary);border:2px solid var(--color-bg);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}.box-container{perspective:1000px;cursor:pointer;width:240px;height:320px;margin:40px}.box{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative;transform:rotateY(-20deg)rotateX(10deg)}.box-container:hover .box{transform:rotateY(20deg)rotateX(-10deg)scale(1.1)}.side{background:var(--color-surface);border:2px solid #ffffff1a;flex-direction:column;width:100%;height:100%;display:flex;position:absolute;overflow:hidden}.front{border-color:var(--color-neon-cyan);background:linear-gradient(135deg,#2c3e50,#000);padding:15px;transform:translateZ(30px)}.back{color:var(--color-text-dim);background:#16213e;padding:20px;font-size:.7rem;transform:rotateY(180deg)translateZ(30px)}.right{background:#0f3460;justify-content:center;align-items:center;width:60px;height:320px;display:flex;left:210px;transform:rotateY(90deg)}.left{background:#0f3460;justify-content:center;align-items:center;width:60px;height:320px;display:flex;left:-30px;transform:rotateY(-90deg)}.top{background:#1a1a2e;width:240px;height:60px;top:-30px;transform:rotateX(90deg)}.bottom{background:#1a1a2e;width:240px;height:60px;bottom:-30px;transform:rotateX(-90deg);box-shadow:0 50px 50px #00000080}.spine-text{white-space:nowrap;font-family:var(--font-retro);color:var(--color-neon-cyan);font-size:.6rem;transform:rotate(90deg)}.box-content{flex-direction:column;flex:1;gap:10px;display:flex}.platform{font-size:.5rem;font-family:var(--font-retro);color:#000;background:#fff;align-self:flex-start;padding:2px 5px}.artwork{image-rendering:pixelated;background-position:50%;background-size:cover;border:1px solid #fff3;flex:1}.box-title{text-shadow:2px 2px #000;margin-top:5px;font-size:.8rem}.usk-container{z-index:10;position:absolute;bottom:10px;right:10px}.back-content{flex-direction:column;justify-content:space-between;height:100%;display:flex}.specs{border-top:1px dashed var(--color-text-dim);flex-direction:column;gap:5px;padding-top:10px;display:flex}.specs span{font-family:monospace;font-size:.6rem}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{border:2px solid var(--color-neon-cyan);width:90%;max-width:600px;max-height:90vh;padding:3rem;position:relative;overflow-y:auto;box-shadow:0 0 30px #0ff3}.close-btn{color:var(--color-text-dim);clip-path:none;background:0 0;padding:.5rem;position:absolute;top:1rem;right:1rem}.close-btn:hover{color:var(--color-accent)}.modal-header h2{color:var(--color-neon-cyan);margin-bottom:1.5rem;font-size:1.5rem}.progress-bar-container{border:1px solid var(--color-text-dim);background:#ffffff1a;width:100%;height:20px;margin-bottom:2rem;position:relative}.progress-bar{background:var(--color-neon-green);height:100%;box-shadow:0 0 10px var(--color-neon-green);transition:width .3s}.progress-text{font-size:.6rem;font-family:var(--font-retro);color:#000;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.modal-body{flex-direction:column;gap:2rem;display:flex}.description{color:var(--color-text);border-left:4px solid var(--color-accent);padding-left:1rem;font-size:1.1rem;line-height:1.6}.checklist h3{color:var(--color-neon-purple);margin-bottom:1rem;font-size:1rem}.task-item{cursor:pointer;background:#ffffff0d;border:1px solid #0000;align-items:center;gap:1rem;margin-bottom:.5rem;padding:1rem;transition:all .2s;display:flex}.task-item:hover{border-color:var(--color-neon-cyan);background:#ffffff1a}.task-item.completed{opacity:.7}.task-item span{font-size:1rem}.task-icon{color:var(--color-text-dim);flex-shrink:0}.task-icon.completed{color:var(--color-neon-green)}.achievement{border:2px solid var(--color-neon-green);color:var(--color-neon-green);font-family:var(--font-retro);background:#39ff141a;align-items:center;gap:1rem;margin-top:1.5rem;padding:1rem;font-size:.7rem;display:flex}.achievement .icon{animation:1s infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.admin-overlay{z-index:4000;justify-content:flex-end;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.admin-modal{border-left:2px solid var(--color-accent);background:#2a2a2a;width:100%;max-width:500px;height:100%;padding:2rem;overflow-y:auto;box-shadow:-10px 0 30px #00000080}.admin-nav{border-bottom:1px solid #ffffff1a;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;display:flex}.admin-nav button{color:var(--color-text-dim);clip-path:none;font-family:var(--font-retro);background:0 0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.6rem;display:flex}.admin-nav button.active{color:var(--color-accent);background:#42884b1a}.tab-pane header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.tab-pane h3{color:#fff;font-size:.9rem}.item-list{flex-direction:column;gap:.5rem;margin-bottom:2rem;display:flex}.admin-item{background:#ffffff0d;border-radius:4px;justify-content:space-between;align-items:center;padding:.8rem 1rem;display:flex}.admin-item .actions{gap:.5rem;display:flex}.admin-item button{clip-path:none;background:#ffffff1a;padding:.4rem}.admin-footer{margin-top:3rem}.admin-footer hr{border:0;border-top:1px dashed #fff3;margin-bottom:2rem}.admin-footer h4{font-family:var(--font-retro);margin-bottom:1rem;font-size:.7rem}.editor-overlay{z-index:5000;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex;position:fixed;top:0;left:0}.editor-card{flex-direction:column;gap:1rem;width:100%;max-width:600px;padding:2rem;display:flex}.editor-card h4{font-family:var(--font-retro);color:var(--color-accent);margin-bottom:1rem;font-size:.8rem}.editor-card input,.editor-card textarea,.editor-card select{color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:4px;padding:.8rem}.editor-card option{color:#fff;background:#2a2a2a}.editor-card textarea{min-height:120px}.editor-actions{gap:1rem;margin-top:1rem;display:flex}button.mini{padding:.5rem 1rem;font-size:.6rem}.login-gate-overlay{background:var(--color-bg);z-index:5000;background-image:radial-gradient(circle,#6e6e6ee6,#6e6e6e),linear-gradient(#42884b33 1px,#0000 1px),linear-gradient(90deg,#42884b33 1px,#0000 1px);background-size:100% 100%,30px 30px,30px 30px;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.login-card{border:2px solid var(--color-accent);text-align:center;width:100%;max-width:400px;padding:3rem;box-shadow:0 0 30px #42884b4d}.login-header h1{margin-bottom:.5rem;font-size:2rem}.login-header p{font-family:var(--font-retro);color:#ebebeb;letter-spacing:2px;margin-bottom:2rem;font-size:.7rem}.input-field{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:4px;align-items:center;gap:1rem;margin-bottom:1rem;padding:.8rem 1rem;display:flex}.input-field input{color:#fff;background:0 0;border:none;outline:none;width:100%}.login-error{color:#ff4d4d;font-size:.8rem;font-family:var(--font-retro);margin-bottom:1rem}.login-card button{justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:1rem;display:flex}.trophy-section{text-align:center;background:#0003;border:1px solid #ffffff0d;border-radius:20px;width:100%;max-width:1000px;margin-top:8rem;padding:3rem}.trophy-header{flex-direction:column;align-items:center;gap:1rem;margin-bottom:3rem;display:flex}.trophy-header h2{color:var(--color-accent);font-size:1.2rem}.trophy-main-icon{color:gold;filter:drop-shadow(0 0 10px #ffd70080)}.trophy-grid{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.trophy-item{flex-direction:column;align-items:center;gap:1rem;width:120px;display:flex}.trophy-icon-wrapper{background:#ffffff0d;border:2px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;transition:all .3s;display:flex}.trophy-item.unlocked .trophy-icon-wrapper{border-color:var(--color-accent);background:#42884b1a;box-shadow:0 0 20px #42884b66}.star-icon{color:gold;fill:gold}.trophy-label{font-family:var(--font-retro);color:var(--color-text-dim);text-transform:uppercase;font-size:.5rem}.trophy-item.unlocked .trophy-label{color:#fff}.credits-overlay{z-index:10000;background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0;overflow:hidden}.credits-container{width:100%;max-width:800px;height:100%;position:relative}.credits-content{text-align:center;flex-direction:column;gap:4rem;width:100%;padding:100px 0;display:flex;position:absolute}.credits-content h1{font-family:var(--font-retro);color:var(--color-accent);margin-bottom:2rem;font-size:3rem}.credits-content h3{font-family:var(--font-retro);color:#ebebeb;margin-bottom:.5rem;font-size:1rem}.credits-content p{color:#fff;font-size:1.5rem}.final-message{border-top:1px dashed var(--color-accent);margin-top:5rem;padding-top:3rem}.final-message p{font-family:var(--font-retro);color:var(--color-accent);font-size:1rem;line-height:2}.skip-credits{color:#fff;font-family:var(--font-retro);clip-path:none;z-index:10001;background:#ffffff1a;padding:.5rem 1rem;font-size:.6rem;position:fixed;bottom:2rem;right:2rem}.skip-credits:hover{background:var(--color-accent)}.leaderboard-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:6000;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex;position:fixed;top:0;left:0}.leaderboard-modal{border:2px solid var(--color-accent);width:100%;max-width:500px;padding:3rem;position:relative;box-shadow:0 0 50px #42884b4d}.leaderboard-header{text-align:center;flex-direction:column;align-items:center;gap:1rem;margin-bottom:3rem;display:flex}.leaderboard-header h2{color:#fff;letter-spacing:4px;font-size:1.5rem}.gold-glow{color:gold;filter:drop-shadow(0 0 10px gold)}.leaderboard-list{flex-direction:column;gap:1rem;display:flex}.leaderboard-entry{background:#ffffff0d;border-radius:8px;align-items:center;gap:1.5rem;padding:1rem;transition:transform .2s;display:flex}.leaderboard-entry:hover{background:#ffffff1a;transform:translate(10px)}.leaderboard-entry.top-three{border-left:4px solid var(--color-accent)}.rank{width:30px;font-family:var(--font-retro);color:var(--color-text-dim);justify-content:center;font-size:.8rem;display:flex}.username{flex:1;font-size:1.1rem;font-weight:500}.score{flex-direction:column;align-items:center;display:flex}.score .count{font-family:var(--font-retro);color:var(--color-accent);font-size:1.2rem}.score .label{color:var(--color-text-dim);text-transform:uppercase;font-size:.5rem}.top-controls{z-index:1500;align-items:center;gap:1.5rem;display:flex;position:fixed;top:2rem;right:2rem}.control-btn{color:var(--color-neon-cyan);clip-path:none;cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:.5rem;transition:all .3s;display:flex}.control-btn:hover{color:var(--color-accent);filter:drop-shadow(0 0 10px var(--color-accent));transform:scale(1.1)}.library-container{flex-direction:column;align-items:center;min-height:100vh;padding:4rem 2rem;display:flex}.library-header{text-align:center;margin-bottom:5rem}.library-header h1{background:linear-gradient(to bottom, #fff, var(--color-accent));-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 15px #42884b66);-webkit-background-clip:text;margin-bottom:1rem;font-size:3rem}.library-header p{font-family:var(--font-retro);color:#ebebeb;font-size:1rem;animation:1.5s infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.game-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));justify-items:center;gap:2rem;width:100%;max-width:1200px;display:grid}.reset-container{justify-content:center;gap:2rem;width:100%;margin-top:4rem;margin-bottom:4rem;display:flex}.leaderboard-btn{color:#42884b;font-family:var(--font-retro);clip-path:none;cursor:pointer;text-shadow:0 0 5px #42884b80;background:#1a1a1a;border:2px solid #42884b;border-radius:4px;align-items:center;gap:.8rem;padding:1rem 2rem;font-size:.7rem;transition:all .3s;display:flex;box-shadow:0 4px 15px #0000004d}.leaderboard-btn:hover{color:#fff;background:#42884b;transform:translateY(-3px);box-shadow:0 0 20px #42884b99}.reset-progress-btn{color:#ff4d4d;font-family:var(--font-retro);clip-path:none;cursor:pointer;text-shadow:0 0 5px #ff4d4d80;background:#1a1a1a;border:2px solid #ff4d4d;border-radius:4px;align-items:center;gap:.8rem;padding:1rem 2rem;font-size:.7rem;transition:all .3s;display:flex;box-shadow:0 4px 15px #0000004d}.reset-progress-btn:hover{color:#fff;background:#ff4d4d;transform:translateY(-3px);box-shadow:0 0 20px #ff4d4d99}.App{width:100%;min-height:100vh}