:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--hp-color: #e74c3c;--mp-color: #3498db;--xp-color: #2ecc71;--gold-color: #f1c40f;--fire: #ff4500;--water: #1e90ff;--earth: #8b6914;--air: #b0e0e6;--lightning: #ffd700;--ice: #00ffff}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0a0a0a;color:#fafafa}.btn{border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fafafa;padding:.5rem 1rem;border-radius:.5rem;cursor:pointer;font-size:.9rem;transition:all .2s;font-family:inherit}.btn:hover:not(:disabled){background:#ffffff1f;transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:#8b5cf6}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#818cf8,#a78bfa)}.btn-secondary{background:#ffffff14}.btn-large{padding:.85rem 2.5rem;font-size:1.1rem;font-weight:600}.btn-small{font-size:.75rem;padding:.3rem .7rem}.btn-heal{border-color:#2ecc71;color:#2ecc71}.btn-flee{border-color:#95a5a6;color:#95a5a6}.bar{flex:1;height:12px;background:#ffffff14;border-radius:6px;overflow:hidden;position:relative}.bar-fill{height:100%;border-radius:6px;transition:width .4s ease}.bar-hp .bar-fill{background:linear-gradient(90deg,#c0392b,#e74c3c)}.bar-mp .bar-fill{background:linear-gradient(90deg,#2471a3,#3498db)}.bar-xp .bar-fill{background:linear-gradient(90deg,#1abc9c,#2ecc71)}.stat-bar-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}.stat-label{font-size:.7rem;font-weight:700;width:22px;color:#fff9;text-transform:uppercase}.stat-val{font-size:.7rem;width:60px;text-align:right;color:#ffffffb3;font-variant-numeric:tabular-nums}.title-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#1a1025,#0a0a0a 70%)}.title-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.title-particle{position:absolute;font-size:2.5rem;bottom:-10%;animation:float-up 6s ease-in-out infinite;opacity:.7}@keyframes float-up{0%{transform:translateY(0) rotate(0);opacity:0}20%{opacity:.7}80%{opacity:.7}to{transform:translateY(-110vh) rotate(360deg);opacity:0}}.title-content{text-align:center;z-index:1}.title-main{font-size:3rem;font-weight:800;letter-spacing:.1em;background:linear-gradient(135deg,#ff4500,gold,#0ff,#8b5cf6);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 4s ease infinite}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.title-sub{font-size:1.1rem;color:#fff9;margin:.75rem 0 1.5rem}.title-elements{display:flex;gap:.75rem;justify-content:center;margin-bottom:2rem}.title-element-badge{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;border:2px solid;border-radius:50%;animation:pulse 2s ease-in-out infinite}.title-element-badge:nth-child(2){animation-delay:.2s}.title-element-badge:nth-child(3){animation-delay:.4s}.title-element-badge:nth-child(4){animation-delay:.6s}.title-element-badge:nth-child(5){animation-delay:.8s}.title-element-badge:nth-child(6){animation-delay:1s}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.player-stats{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1rem;margin-bottom:1rem}.player-stats-compact{padding:.5rem}.player-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.5rem}.player-name{font-weight:700;font-size:1rem}.player-level{font-size:.8rem;color:var(--gold-color);font-weight:600}.player-elements{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;align-items:center}.element-tag{font-size:.7rem;padding:.15rem .5rem;border:1px solid;border-radius:1rem;font-weight:600}.gold-display{font-size:.8rem;margin-left:auto}.realm-map{max-width:900px;margin:0 auto;padding:1.5rem}.map-title{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.map-subtitle{color:#ffffff80;margin-bottom:1.5rem;font-size:.9rem}.realm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.realm-card{background:#ffffff08;border:2px solid rgba(255,255,255,.1);border-radius:.75rem;padding:1.25rem;position:relative;transition:transform .2s,border-color .2s}.realm-card:not(.locked):hover{transform:translateY(-2px)}.realm-card.locked{opacity:.5}.realm-card.completed{border-color:#2ecc71!important}.realm-icon{font-size:2rem;margin-bottom:.5rem}.realm-name{font-size:1.1rem;font-weight:700}.realm-element{font-size:.75rem;color:#ffffff80;margin-bottom:.5rem}.realm-desc{font-size:.8rem;color:#ffffff8c;margin-bottom:1rem;line-height:1.4}.realm-complete-badge{color:#2ecc71;font-weight:700;font-size:.9rem;margin-bottom:.5rem}.realm-locked-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:#0000004d;border-radius:.75rem}.realm-actions{display:flex;flex-direction:column;gap:.4rem}.battle-screen{max-width:800px;margin:0 auto;padding:1rem}.battle-field{display:flex;align-items:stretch;justify-content:center;gap:1.5rem;margin-bottom:1rem;min-height:200px}.battle-entity{flex:1;max-width:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;transition:transform .15s}.battle-entity.shake{animation:shake .3s ease-in-out}.battle-entity.attacking{animation:attack-anim .4s ease-in-out}.player-entity.attacking{animation:attack-right .4s ease-in-out}.enemy-entity.attacking{animation:attack-left .4s ease-in-out}.battle-entity.healing{animation:heal-glow .6s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}@keyframes attack-right{0%,to{transform:translate(0)}50%{transform:translate(30px) scale(1.1)}}@keyframes attack-left{0%,to{transform:translate(0)}50%{transform:translate(-30px) scale(1.1)}}@keyframes heal-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.5) drop-shadow(0 0 15px #2ecc71)}}.battle-vs{display:flex;align-items:center;font-size:1.2rem;font-weight:800;color:#ffffff4d}.entity-sprite{font-size:4rem;line-height:1}.player-sprite{filter:drop-shadow(0 0 12px rgba(99,102,241,.5))}.enemy-sprite{filter:drop-shadow(0 0 12px rgba(255,69,0,.4))}.enemy-info{width:100%;text-align:center}.enemy-header{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.3rem}.enemy-name{font-weight:700;font-size:.95rem}.boss-badge{font-size:.6rem;font-weight:800;background:#e74c3c;color:#fff;padding:.1rem .4rem;border-radius:.25rem;letter-spacing:.1em}.battle-log{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.5rem;padding:.75rem;margin-bottom:1rem;max-height:160px;overflow-y:auto;font-size:.8rem}.log-entry{padding:.2rem 0;line-height:1.4}.log-player{color:#5dade2}.log-enemy{color:#e74c3c}.log-system{color:#ffffff80;font-style:italic}.log-critical{color:#f1c40f;font-weight:700}.battle-actions{display:flex;flex-direction:column;gap:.75rem}.ability-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.5rem}.btn-ability{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;text-align:left;font-size:.8rem;position:relative}.ability-icon{font-size:1.1rem}.ability-name{flex:1;font-weight:600}.ability-cost{font-size:.7rem;color:var(--mp-color)}.advantage{font-weight:800;font-size:.85rem}.adv-good{color:#2ecc71}.adv-bad{color:#e74c3c}.battle-extra-actions{display:flex;gap:.5rem;justify-content:center}.puzzle-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:radial-gradient(ellipse at center,#1a1520,#0a0a0a 70%)}.puzzle-card{max-width:500px;text-align:center;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:2rem}.puzzle-title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--lightning)}.puzzle-desc{color:#ffffffb3;margin-bottom:1rem;line-height:1.5}.puzzle-hint{font-size:.8rem;color:#fff6;font-style:italic;margin-bottom:1.5rem}.puzzle-options{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.btn-puzzle-option{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;font-size:1rem;font-weight:600}.puzzle-el-icon{font-size:1.3rem}.end-screen{min-height:100vh;display:flex;align-items:center;justify-content:center}.end-content{text-align:center}.end-title{font-size:3rem;font-weight:800;margin-bottom:1rem}.victory-title{background:linear-gradient(135deg,#f1c40f,#e67e22);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.defeat-title{color:#e74c3c}.end-text{color:#ffffffb3;font-size:1.1rem;margin-bottom:.5rem}.end-sub{color:#fff6;font-size:.9rem;margin-bottom:2rem}@media(max-width:600px){.title-main{font-size:2rem}.battle-field{flex-direction:column;align-items:center}.battle-vs{padding:.5rem 0}.ability-grid,.realm-grid,.puzzle-options{grid-template-columns:1fr}}