@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap";:root{--primary-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--secondary-gradient:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);--accent-gradient:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);--success-gradient:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);--danger-gradient:linear-gradient(135deg,#fa709a 0%,#fee140 100%);--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-shadow:0 8px 32px 0 #1f26875e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#fffffff2;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.6}html{overscroll-behavior:none;background-color:#1a1a2e;height:100%}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background:linear-gradient(-45deg,#0f0c29,#302b63,#24243e,#1a1a2e) 0 0/400% 400%;place-items:center;min-width:320px;min-height:100vh;margin:0;animation:15s infinite gradientShift;display:flex;position:relative;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 20%,#7877c61a 0%,#0000 50%),radial-gradient(circle at 80% 80%,#fc466b1a 0%,#0000 50%),radial-gradient(circle at 40% 20%,#6366f11a 0%,#0000 50%);width:100%;height:100%;position:fixed;top:0;left:0}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}#root{width:100%;max-width:1400px;padding:2rem;padding-top:max(2rem,env(safe-area-inset-top));padding-bottom:calc(max(2rem,env(safe-area-inset-bottom)) + 60px);padding-left:max(2rem,env(safe-area-inset-left));padding-right:max(2rem,env(safe-area-inset-right));text-align:center;z-index:1;margin:0 auto;position:relative}h1{letter-spacing:2px;background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#4facfe 75%,#00f2fe 100%) 0 0/200%;-webkit-text-fill-color:transparent;text-shadow:0 0 40px #667eea80,0 0 80px #764ba24d;-webkit-background-clip:text;background-clip:text;margin-bottom:2rem;font-family:Orbitron,monospace;font-size:4rem;font-weight:900;line-height:1.1;animation:3s linear infinite shimmer;display:inline-block;position:relative}h1:after{content:"";background:var(--accent-gradient);border-radius:2px;width:60%;height:3px;position:absolute;bottom:-10px;left:50%;transform:translate(-50%);box-shadow:0 0 20px #4facfe99}@keyframes shimmer{to{background-position:200%}}.game-container{perspective:1000px;flex-flow:wrap;justify-content:center;align-items:flex-start;gap:2.5rem;display:flex}.sidebar{text-align:left;-webkit-backdrop-filter:blur(20px)saturate(180%);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;gap:1.2rem;min-width:200px;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.6s ease-out slideInLeft;display:flex;box-shadow:0 8px 32px #1f26875e,inset 0 1px #ffffff1a}.sidebar:hover{transform:translateY(-5px);box-shadow:0 12px 40px #1f268780,inset 0 1px #ffffff26}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.stat-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#667eea1a 0%,#764ba21a 100%);border:1px solid #ffffff14;border-radius:12px;padding:1rem;transition:all .3s;position:relative;overflow:hidden}.stat-box:before{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.stat-box:hover:before{left:100%}.stat-box:hover{border-color:#667eea66;transform:scale(1.05);box-shadow:0 4px 20px #667eea4d}.stat-label{letter-spacing:1.5px;text-transform:uppercase;color:#fff9;margin-bottom:.3rem;font-size:.75rem;font-weight:600}.stat-value{background:var(--accent-gradient);-webkit-text-fill-color:transparent;text-shadow:0 0 20px #4facfe80;-webkit-background-clip:text;background-clip:text;font-family:Orbitron,monospace;font-size:2rem;font-weight:700}button{letter-spacing:.5px;background:var(--primary-gradient);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:.8em 1.6em;font-family:Inter,sans-serif;font-size:1em;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 4px 15px #667eea66,0 1px 3px #0003}button:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}button:hover:before{left:100%}button:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 6px 25px #667eea99,0 2px 6px #0000004d}button:active{transform:translateY(0)scale(.98)}button[style*="backgroundColor: #d32f2f"],button[style*="backgroundColor:#d32f2f"]{box-shadow:0 4px 15px #fa709a66,0 1px 3px #0003;background:var(--danger-gradient)!important}button[style*="backgroundColor: #d32f2f"]:hover,button[style*="backgroundColor:#d32f2f"]:hover{box-shadow:0 6px 25px #fa709a99,0 2px 6px #0000004d}button:focus,button:focus-visible{outline-offset:2px;outline:2px solid #667eea80}@media (max-width:768px){h1{margin-top:0;margin-bottom:1.5rem;font-size:2rem}h1:after{width:80%}.game-container{flex-direction:column;align-items:center;gap:1rem}.sidebar{width:100%;box-shadow:none;-webkit-backdrop-filter:none;background:0 0;border:none;flex-direction:column;grid-template-columns:1fr 1fr;gap:.8rem;margin:0;padding:0;animation:.6s ease-out slideInUp;display:grid}.stat-box{-webkit-backdrop-filter:blur(12px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;flex-direction:column;grid-row:1;justify-content:center;align-items:center;padding:.8rem;display:flex;box-shadow:0 4px 15px #0000001a}.stat-label{letter-spacing:1px;color:#fff9;text-transform:uppercase;margin-bottom:.2rem;font-size:.7rem;font-weight:600}.stat-value{text-shadow:0 0 15px #fff3;font-size:1.6rem;font-weight:700}.sidebar>div:last-child{grid-area:2/1/auto/-1;gap:.5rem;width:100%;display:flex}.sidebar button{color:#fff;-webkit-backdrop-filter:blur(8px);white-space:nowrap;text-overflow:ellipsis;background:#ffffff14;border:1px solid #ffffff1a;border-radius:8px;flex:1;min-width:0;padding:.5rem .2rem;font-size:.65rem;font-weight:600;transition:all .2s;overflow:hidden;box-shadow:0 2px 4px #0000001a;background-image:none!important}.sidebar button:active{background:#ffffff26;transform:scale(.96)}.sidebar button[style*="backgroundColor: #d32f2f"]{color:#ff8a80!important;box-shadow:none!important;background:#ff525226!important;border-color:#ff52524d!important}.sidebar button:last-child{color:#ffffffb3;background:#ffffff0d;border-color:#ffffff26}#root{padding:.5rem;padding-top:max(.5rem,env(safe-area-inset-top));padding-bottom:max(.5rem,env(safe-area-inset-bottom));padding-left:max(.5rem,env(safe-area-inset-left));padding-right:max(.5rem,env(safe-area-inset-right))}}@keyframes flicker{0%,to{filter:brightness()drop-shadow(0 0 5px orange);transform:scale(1)}50%{filter:brightness(1.2)drop-shadow(0 0 8px red);transform:scale(1.05)}}@keyframes wave{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes rumble{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes pulse-dynamite{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2)drop-shadow(0 0 5px red);transform:scale(1.1)}}@media (max-width:768px){.mobile-only{width:100%;max-width:300px;margin:0 auto;display:block}}@media (min-width:769px) and (max-width:1024px){h1{font-size:3rem}.game-container{gap:2rem}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes cellPop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes effectExpand{0%{opacity:.8;transform:scale(.5)}to{opacity:0;transform:scale(2)}}@keyframes floatUp{0%{opacity:0;transform:translateY(0)scale(.8)}20%{opacity:1;transform:translateY(-10px)scale(1.2)}to{opacity:0;transform:translateY(-40px)scale(1)}}@keyframes elementalShift{0%{color:#ff4500;text-shadow:0 0 10px #ff450080}25%{color:#00bfff;text-shadow:0 0 10px #00bfff80}50%{color:#a9a9a9;text-shadow:0 0 10px #a9a9a980}75%{color:#dc143c;text-shadow:0 0 10px #dc143c80}to{color:#ff4500;text-shadow:0 0 10px #ff450080}}.mobile-only{display:none}@media (max-width:768px){.mobile-only{width:100%;max-width:300px;margin:0 auto;display:block}}html{scroll-behavior:smooth}::selection{color:#fff;background:#667eea4d}::selection{color:#fff;background:#667eea4d}.start-screen{z-index:1000;-webkit-overflow-scrolling:touch;background:linear-gradient(-45deg,#0f0c29,#302b63,#24243e,#1a1a2e) 0 0/400% 400%;flex-direction:column;justify-content:flex-start;align-items:center;padding:0;animation:15s infinite gradientShift;display:flex;position:fixed;inset:0;overflow-y:auto}@media (min-height:800px){.start-screen{justify-content:center}}.start-screen:before{content:"";pointer-events:none;background-image:radial-gradient(circle at 20%,#7877c626 0%,#0000 50%),radial-gradient(circle at 80% 80%,#fc466b26 0%,#0000 50%),radial-gradient(circle at 40% 20%,#6366f126 0%,#0000 50%);width:100%;height:100%;position:fixed;top:0;left:0}.language-selector{z-index:10;width:100%;padding-top:calc(env(safe-area-inset-top) + 50px);padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-left));justify-content:flex-end;gap:10px;margin-bottom:.5rem;display:flex}.lang-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;padding:8px 12px;font-family:inherit;font-size:.9rem;transition:all .3s}.lang-btn:hover{background:#fff3}.lang-btn.active{background:#ffffff4d;border-color:#4facfe;font-weight:700;box-shadow:0 0 10px #4facfe4d}.start-screen-content{z-index:1;text-align:center;width:100%;max-width:700px;padding:10px 20px 20px;padding-bottom:max(120px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));margin:0 auto;animation:.8s ease-out fadeInUp;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.game-title{letter-spacing:2px;background:linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#4facfe 75%,#00f2fe 100%) 0 0/200%;-webkit-text-fill-color:transparent;text-shadow:0 0 40px #667eea80,0 0 80px #764ba24d;-webkit-background-clip:text;background-clip:text;margin-top:.5rem;margin-bottom:.5rem;font-family:Orbitron,monospace;font-size:4rem;font-weight:900;line-height:1.1;animation:3s linear infinite shimmer}.game-subtitle{color:#fffc;letter-spacing:1px;margin-bottom:2rem;font-size:1.2rem;font-weight:500}.game-info-container{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:2rem;display:grid}.info-section{-webkit-backdrop-filter:blur(20px)saturate(180%);text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:16px;padding:1.2rem;transition:all .3s}.info-section:hover{border-color:#667eea66;transform:translateY(-3px);box-shadow:0 8px 25px #667eea33}.info-section h3{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.8rem;font-family:Orbitron,monospace;font-size:1rem;font-weight:700}.info-section ul{margin:0;padding:0;list-style:none}.info-section li{color:#fffc;padding:.3rem 0;font-size:.85rem;line-height:1.4}.description-text{color:#fffc;margin:0;font-size:.85rem;line-height:1.5}.elements-section{grid-column:1/-1}.element-grid{flex-direction:column;gap:.6rem;display:flex}.element-item{background:#ffffff08;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem;font-size:.9rem;display:flex}.element-icon{font-size:1.2rem}.element-vs{color:#fff6;font-weight:700}.element-result{color:#ffffffb3;font-size:.8rem}.button-container{flex-direction:column;align-items:center;gap:1rem;display:flex}.continue-button{letter-spacing:2px;color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:16px;justify-content:center;align-items:center;gap:.8rem;padding:1.2rem 3rem;font-family:Orbitron,monospace;font-size:1.3rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);animation:2s ease-in-out infinite pulse-glow-continue;display:inline-flex;box-shadow:0 8px 30px #667eea66,0 0 #667eea66}@keyframes pulse-glow-continue{0%,to{box-shadow:0 8px 30px #667eea66,0 0 #667eea66}50%{box-shadow:0 8px 40px #667eea99,0 0 0 10px #667eea00}}.continue-button:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 12px 40px #667eea99,0 0 60px #764ba24d}.continue-button:active{transform:translateY(0)scale(.98)}.start-button{letter-spacing:2px;color:#0a0a0a;cursor:pointer;background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);border:none;border-radius:16px;justify-content:center;align-items:center;gap:.8rem;padding:1.2rem 3rem;font-family:Orbitron,monospace;font-size:1.3rem;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);animation:2s ease-in-out infinite pulse-glow;display:inline-flex;box-shadow:0 8px 30px #43e97b66,0 0 #43e97b66}@keyframes pulse-glow{0%,to{box-shadow:0 8px 30px #43e97b66,0 0 #43e97b66}50%{box-shadow:0 8px 40px #43e97b99,0 0 0 10px #43e97b00}}.start-button:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 12px 40px #43e97b99,0 0 60px #38f9d74d}.start-button:active{transform:translateY(0)scale(.98)}.button-icon{font-size:1.5rem}.button-text{text-shadow:0 1px 2px #0003}.developer-credit{margin-top:2rem}.developer-credit a{color:#ffffff4d;font-family:monospace;font-size:.8rem;text-decoration:none;transition:color .3s}.developer-credit a:hover{color:#fffc}@media (max-width:600px){.game-title{margin-top:1rem;margin-bottom:.5rem;font-size:2.2rem}.game-subtitle{margin-bottom:1.5rem;font-size:.95rem}.game-info-container{grid-template-columns:1fr;gap:.8rem}.info-section{padding:1rem}.info-section h3{font-size:.9rem}.info-section li{font-size:.8rem}.elements-section{grid-column:1}.element-item{flex-wrap:wrap}.start-button{padding:1rem 2rem;font-size:1.1rem}}@media (min-width:601px) and (max-width:768px){.game-title{font-size:3rem}}
