:root{--color-primary:#4fc3f7;--color-primary-dark:#0288d1;--color-accent:#ffd54f;--color-accent-glow:#fff176;--color-danger:#ef5350;--color-success:#66bb6a;--color-earth:#8d6e63;--color-electric:#ffee58;--color-fire:#ff7043;--color-water:#42a5f5;--color-nature:#66bb6a;--color-air:#b3e5fc;--color-poison:#ab47bc;--ui-bg:#0009;--ui-bg-solid:#1a1a2e;--ui-border:#fff3;--ui-border-active:var(--color-accent);--ui-radius:12px;--ui-radius-lg:20px;--font-game:"Fredoka", "Comic Sans MS", cursive, sans-serif;--font-size-sm:14px;--font-size-md:18px;--font-size-lg:24px;--font-size-xl:36px;--font-size-xxl:48px;--touch-min:60px;--touch-button:80px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-glow:0 0 20px #4fc3f780}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;width:100%;height:100%;font-family:var(--font-game);color:#fff;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:#000;overflow:hidden}#game-canvas{touch-action:none;outline:none;width:100%;height:100%;position:fixed;top:0;left:0}#ui-overlay{pointer-events:none;z-index:10;width:100%;height:100%;position:fixed;top:0;left:0}#ui-overlay>*{pointer-events:auto}#loading-screen{z-index:1000;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .5s,visibility .5s;display:flex;position:fixed;top:0;left:0}#loading-screen.hidden{opacity:0;visibility:hidden}.loading-content{text-align:center;padding:40px}.loading-title{font-size:var(--font-size-xxl);color:var(--color-accent);text-shadow:0 0 30px #ffd54f80;margin-bottom:30px;font-weight:700;animation:1.5s ease-in-out infinite pulse}.loading-bar{border:2px solid var(--ui-border);background:#ffffff1a;border-radius:10px;width:300px;max-width:80vw;height:20px;margin:0 auto 20px;overflow:hidden}.loading-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-accent));width:0%;height:100%;box-shadow:0 0 10px var(--color-primary);border-radius:8px;transition:width .3s}.loading-tip{font-size:var(--font-size-md);color:#fff9;font-weight:400}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 10px var(--color-accent)}50%{box-shadow:0 0 25px var(--color-accent), 0 0 40px #ffd54f4d}}.game-btn{min-width:var(--touch-min);min-height:var(--touch-min);border-radius:var(--ui-radius);background:var(--ui-bg);color:#fff;font-family:var(--font-game);font-size:var(--font-size-lg);cursor:pointer;-webkit-tap-highlight-color:transparent;border:3px solid #ffffff4d;justify-content:center;align-items:center;font-weight:600;transition:transform .1s,box-shadow .1s;display:flex}.game-btn:active{box-shadow:var(--shadow-glow);transform:scale(.92)}.game-btn--primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));border-color:var(--color-primary)}.game-btn--danger{background:linear-gradient(135deg, var(--color-danger), #c62828);border-color:var(--color-danger)}.game-btn--accent{background:linear-gradient(135deg, var(--color-accent), #f9a825);border-color:var(--color-accent);color:#1a1a2e}@supports (padding:env(safe-area-inset-top)){#ui-overlay{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}