:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden;background:#000}#app{width:100vw;height:100vh;position:relative}canvas{display:block;width:100%;height:100%}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center}.interactive{pointer-events:auto}.screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}h1{font-size:3.2em;line-height:1.1;background:linear-gradient(to right,#0ff,#f0f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;text-shadow:0 0 20px rgba(0,255,255,.5)}.class-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;max-width:1200px;padding:20px}.class-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:15px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:10px}.class-card:hover{background:#ffffff26;transform:translateY(-5px);box-shadow:0 5px 15px #0ff3;border-color:#0ff}.class-icon{font-size:3em}.class-name{font-weight:700;font-size:1.2em;color:#fff}.class-bonus{font-size:.8em;color:#aaa}.dev-mode-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px;padding:15px 25px;background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:10px;transition:all .3s ease;cursor:pointer}.dev-mode-container:hover{background:#00ffff1a;border-color:#00ffff80;box-shadow:0 0 15px #0ff3}.dev-mode-checkbox{appearance:none;width:24px;height:24px;border:2px solid #00ffff;border-radius:6px;background:#00000080;cursor:pointer;position:relative;transition:all .3s ease;flex-shrink:0}.dev-mode-checkbox:hover{background:#00ffff1a;box-shadow:0 0 10px #00ffff4d}.dev-mode-checkbox:checked{background:linear-gradient(135deg,#0ff,#0cc);border-color:#0ff;box-shadow:0 0 15px #0ff9,inset 0 0 10px #ffffff4d}.dev-mode-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;font-size:16px;font-weight:700;text-shadow:0 0 5px rgba(255,255,255,.8)}.dev-mode-label{color:#0ff;font-size:1.1em;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none;text-shadow:0 0 10px rgba(0,255,255,.3);transition:all .3s ease}.dev-mode-container:hover .dev-mode-label{text-shadow:0 0 15px rgba(0,255,255,.6)}.dev-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}.dev-tab{padding:12px 24px;background:#00ffff1a;border:2px solid rgba(0,255,255,.3);border-radius:8px;color:#0ff;font-size:1em;font-weight:500;cursor:pointer;transition:all .3s ease;text-shadow:0 0 10px rgba(0,255,255,.3)}.dev-tab:hover{background:#0ff3;border-color:#0ff;transform:translateY(-2px);box-shadow:0 0 15px #00ffff4d}.dev-tab.active{background:linear-gradient(135deg,#0ff,#0cc);color:#000;border-color:#0ff;font-weight:700;box-shadow:0 0 20px #00ffff80;text-shadow:none}.dev-upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;max-height:calc(100vh - 220px);overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:#00ffff rgba(0,0,0,.3)}.dev-upgrade-grid::-webkit-scrollbar{width:8px}.dev-upgrade-grid::-webkit-scrollbar-track{background:#0000004d;border-radius:4px}.dev-upgrade-grid::-webkit-scrollbar-thumb{background:#0ff;border-radius:4px}.dev-upgrade-grid::-webkit-scrollbar-thumb:hover{background:#0dd}.hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;padding:20px;box-sizing:border-box;display:none}.hud-top{display:flex;justify-content:space-between;width:100%}.bar-container{width:300px;height:20px;background:#00000080;border:1px solid #444;border-radius:10px;overflow:hidden;position:relative}.hp-bar-fill{height:100%;background:linear-gradient(90deg,red,#f44);width:100%;transition:width .2s}.xp-bar-container{position:absolute;top:0;left:0;width:100%;height:5px;background:#000}.xp-bar-fill{height:100%;background:#0ff;width:0%;transition:width .2s}.stats{color:#fff;font-family:monospace;text-shadow:1px 1px 0 #000}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.upgrade-grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:20px;max-width:900px}.upgrade-card{background:#000c;border:2px solid #444;padding:20px;border-radius:10px;cursor:pointer;width:200px;text-align:center;transition:all .3s ease}.upgrade-card:hover{border-color:gold;background:#323200cc;transform:scale(1.05)}.upgrade-card.evolution-ready{background:radial-gradient(circle,#8a2be24d,#4b008233);border:3px solid #ff00ff;box-shadow:0 0 20px #ff00ff80,0 0 40px #8a2be24d;animation:pulse 2s infinite}.upgrade-card.evolution-ready:hover{border-color:#0ff;box-shadow:0 0 30px #0ffc,0 0 60px #8a2be280;transform:scale(1.1)}@keyframes pulse{0%,to{box-shadow:0 0 20px #ff00ff80,0 0 40px #8a2be24d}50%{box-shadow:0 0 30px #f0fc,0 0 60px #8a2be280}}.level-indicator{font-size:.9em;color:#0ff;font-weight:700;margin:5px 0}.evolution-ready .level-indicator{color:#f0f;font-size:1.2em;text-shadow:0 0 10px rgba(255,0,255,.8)}.damage-text{position:absolute;color:#fff;font-weight:700;pointer-events:none;animation:floatUp .5s ease-out forwards;text-shadow:1px 1px 0 #000}@keyframes floatUp{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}#joystick-zone{position:absolute;top:0;left:0;width:50%;height:100%;z-index:5}.joystick-base{position:absolute;width:100px;height:100px;background:#ffffff1a;border:2px solid rgba(255,255,255,.3);border-radius:50%;display:none;pointer-events:none;transform:translate(-50%,-50%);z-index:6}.joystick-stick{position:absolute;top:50%;left:50%;width:40px;height:40px;background:#00ffff80;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #00ffff80}*{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}@media screen and (max-height:700px),screen and (max-width:900px){h1{font-size:2em;margin-bottom:10px}.class-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:10px;max-width:100%}.class-card{padding:8px;gap:5px}.class-icon{font-size:2em}.class-name{font-size:.9em}.class-bonus{font-size:.7em}.dev-mode-container{padding:8px 15px;margin-bottom:15px}.dev-mode-label{font-size:.9em}.upgrade-grid{grid-template-columns:repeat(3,1fr);gap:10px;max-width:100%}.upgrade-grid-6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:8px;max-width:100%}.upgrade-card{width:auto;padding:10px;min-height:auto}.upgrade-card h3{font-size:.9em;margin:5px 0}.upgrade-card p{font-size:.75em;margin:5px 0}.upgrade-card>div[style*="font-size: 3em"]{font-size:2em!important}.level-indicator{font-size:.75em}.hud{padding:10px}.bar-container{width:200px;height:15px}.stats{font-size:.8em}.screen h2{font-size:1.5em}.dev-tabs{gap:6px;margin-bottom:10px}.dev-tab{padding:8px 16px;font-size:.85em}.dev-upgrade-grid{gap:10px;max-height:calc(100vh - 180px);padding:5px}}@media screen and (max-height:500px){h1{font-size:1.5em;margin-bottom:5px}.class-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;padding:8px}.class-card{padding:5px}.class-icon{font-size:1.5em}.class-name{font-size:.8em}.class-bonus{font-size:.65em}.upgrade-card{padding:8px}.upgrade-card h3{font-size:.8em}.upgrade-card p{font-size:.7em}.screen h2{font-size:1.2em}.dev-tabs{gap:4px;margin-bottom:8px}.dev-tab{padding:6px 12px;font-size:.75em}.dev-upgrade-grid{gap:8px;max-height:calc(100vh - 150px)}}