:root{--font-heading: "Fredoka One", cursive;--font-body: "Nunito", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--space-1: .5rem;--space-2: 1rem;--space-3: 1.5rem;--space-4: 2rem;--space-5: 2.5rem;--space-6: 3rem;--space-8: 4rem;--tile-size: 40px;--char-size: 36px;--touch-target: 44px;--game-max-width: 480px;--game-max-height: 900px;--color-white: #FFFFFF;--color-black: #000000;--text-primary: #2D3436;--text-light: #F9F9F9;--text-muted: #636e72;--glass-bg: rgba(255, 255, 255, .15);--glass-bg-strong: rgba(255, 255, 255, .25);--glass-border: rgba(255, 255, 255, .3);--glass-blur: 12px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16);--shadow-xl: 0 12px 48px rgba(0, 0, 0, .24);--color-success: #00b894;--color-warning: #fdcb6e;--color-danger: #ff7675;--color-info: #74b9ff;--w1-bg-dark: #1A1A2E;--w1-bg-medium: #16213E;--w1-primary: #0F3460;--w1-accent: #00FFF5;--w1-accent-dim: rgba(0, 255, 245, .3);--w1-gem-gradient: linear-gradient(135deg, #E94560 0%, #a21a32 100%);--w1-text: #F9F9F9;--w2-sky-gradient: linear-gradient(to top, #6C5B7B, #C06C84, #F67280, #F8B195);--w2-platform: rgba(255, 255, 255, .85);--w2-accent: #FFD700;--w2-char: #6A0572;--w2-text: #2D3436;--w3-bg: #050505;--w3-grid: #1F1F1F;--w3-primary: #00F0FF;--w3-accent: #FF0099;--w3-tertiary: #FFFF00;--w3-trail: rgba(0, 240, 255, .4);--w3-text: #FFFFFF;--w4-bg-gradient: linear-gradient(to bottom, #588157, #3A5A40);--w4-panel: rgba(255, 255, 255, .2);--w4-primary: #A3B18A;--w4-accent: #DAD7CD;--w4-flower-pink: #FFB5A7;--w4-flower-purple: #C8B6FF;--w4-flower-yellow: #FFE66D;--w4-text: #2D3436;--z-background: 0;--z-game-world: 10;--z-game-entities: 20;--z-ui-overlay: 30;--z-modal: 40;--z-toast: 50;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease;--transition-slowest: .6s ease;--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--ease-in-out-circ: cubic-bezier(.85, 0, .15, 1);--ease-spring: cubic-bezier(.68, -.55, .265, 1.55);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}html{height:100%;height:-webkit-fill-available}body{font-family:var(--font-body);background-color:#2d3436;color:var(--text-primary);overflow:hidden;height:100%;height:-webkit-fill-available;min-height:100vh;min-height:-webkit-fill-available;width:100%;display:flex;justify-content:center;align-items:center;position:fixed;inset:0;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}#root{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.game-root{width:100%;height:100%;max-width:var(--game-max-width);max-height:var(--game-max-height);background:var(--w1-bg-dark);position:relative;overflow:hidden;box-shadow:0 0 60px #0009;transition:background var(--transition-slowest)}.game-root:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.015) 2px,rgba(255,255,255,.015) 4px);pointer-events:none;z-index:var(--z-ui-overlay);opacity:.6}@media(min-width:481px){.game-root{border-radius:var(--radius-lg)}body:before{content:"";position:fixed;inset:0;background:inherit;filter:blur(40px);opacity:.3;z-index:-1}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:400;line-height:1.2;letter-spacing:.02em}p{line-height:1.6}button{font-family:inherit;cursor:pointer;border:none;background:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*:focus-visible{outline:3px solid var(--w1-accent);outline-offset:2px;border-radius:var(--radius-sm)}*:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skip-to-content{position:absolute;top:-100px;left:0;background:var(--color-white);color:var(--text-primary);padding:var(--space-2);text-decoration:none;z-index:100}.skip-to-content:focus{top:0}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.glass-panel-strong{background:var(--glass-bg-strong);backdrop-filter:blur(calc(var(--glass-blur) * 1.5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}@supports not (backdrop-filter: blur(10px)){.glass-panel,.glass-panel-strong{background:#fffffff2}}.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target);padding:var(--space-2) var(--space-4);font-family:var(--font-heading);font-size:var(--text-xl);color:var(--text-primary);background:var(--color-white);border-radius:var(--radius-full);box-shadow:var(--shadow-md);transition:transform var(--transition-fast),box-shadow var(--transition-fast);letter-spacing:.03em}.btn-primary:hover{box-shadow:var(--shadow-lg)}.btn-primary:active{transform:scale(.96);box-shadow:var(--shadow-sm)}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch-target);padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-size:var(--text-base);font-weight:700;color:var(--text-light);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-full);transition:all var(--transition-fast)}.btn-secondary:active{transform:scale(.96);background:var(--glass-bg-strong)}.btn-icon{display:flex;align-items:center;justify-content:center;width:var(--touch-target);height:var(--touch-target);min-width:var(--touch-target);background:var(--glass-bg);backdrop-filter:blur(calc(var(--glass-blur) * .5));-webkit-backdrop-filter:blur(calc(var(--glass-blur) * .5));border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-light);font-size:var(--text-xl);transition:all var(--transition-fast)}.btn-icon:active{transform:scale(.92);background:var(--glass-bg-strong)}.flex-center{display:flex;align-items:center;justify-content:center}.flex-col{display:flex;flex-direction:column}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-start{display:flex;justify-content:flex-start;align-items:center}.flex-end{display:flex;justify-content:flex-end;align-items:center}.absolute-fill{position:absolute;inset:0}.relative{position:relative}.w-full{width:100%}.h-full{height:100%}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-heading-lg{font-family:var(--font-heading);font-size:var(--text-4xl);color:var(--text-light);text-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1.1}.text-heading-md{font-family:var(--font-heading);font-size:var(--text-2xl);color:var(--text-light);text-shadow:0 2px 4px rgba(0,0,0,.2)}.text-heading-sm{font-family:var(--font-heading);font-size:var(--text-xl);color:var(--text-light)}.text-body{font-size:var(--text-base);font-weight:600;color:var(--text-light)}.text-small{font-size:var(--text-sm);color:var(--text-muted)}.text-xs{font-size:var(--text-xs)}.text-muted{opacity:.7}.screen-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4);position:relative}.overlay{position:fixed;inset:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xl)}.absolute{position:absolute}.top-0{top:0}.left-0{left:0}.right-0{right:0}.bottom-0{bottom:0}.bottom-8{bottom:var(--space-8)}.top-20{top:5rem}.flex{display:flex}.flex-1{flex:1}.items-center{align-items:center}.justify-center{justify-content:center}.max-w-sm{max-width:24rem}@media(max-width:480px){.hide-mobile{display:none!important}}@media(min-width:481px){.hide-desktop{display:none!important}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes glow{0%,to{box-shadow:0 0 5px currentColor}50%{box-shadow:0 0 20px currentColor,0 0 30px currentColor}}@keyframes spin-fast{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slide-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes scale-pop{0%{transform:scale(0) rotate(-15deg);opacity:0}70%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes squash{0%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(1.25) scaleY(.75)}to{transform:scaleX(1) scaleY(1)}}@keyframes stretch{0%{transform:scaleX(1) scaleY(1)}50%{transform:scaleX(.75) scaleY(1.25)}to{transform:scaleX(1) scaleY(1)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}56%{transform:scale(1)}}@keyframes wing-flap{0%,to{transform:scaleX(1)}50%{transform:scaleX(.3)}}.anim-float{animation:float 3s ease-in-out infinite}.anim-breathe{animation:breathe 2.5s ease-in-out infinite}.anim-pulse{animation:pulse 1.5s ease-in-out infinite}.anim-glow{animation:glow 2s ease-in-out infinite}.anim-spin-fast{animation:spin-fast .3s linear}.anim-bounce-in{animation:bounce-in .5s var(--ease-out-back)}.anim-slide-up{animation:slide-up .4s var(--ease-in-out-circ)}.anim-slide-down{animation:slide-down .3s var(--ease-in-out-circ)}.anim-fade-in{animation:fade-in .3s ease}.anim-fade-out{animation:fade-out .3s ease}.anim-scale-pop{animation:scale-pop .4s var(--ease-spring)}.anim-shake{animation:shake .5s ease}.anim-squash{animation:squash .15s ease}.anim-stretch{animation:stretch .15s ease}.anim-wiggle{animation:wiggle .5s ease}.anim-heartbeat{animation:heartbeat 1.5s ease-in-out infinite}.anim-wing-flap{animation:wing-flap .8s ease-in-out infinite}.anim-wing-flap-fast{animation:wing-flap .3s ease-in-out infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.delay-600{animation-delay:.6s}.delay-700{animation-delay:.7s}.delay-800{animation-delay:.8s}.transition-all{transition:all var(--transition-base)}.transition-transform{transition:transform var(--transition-base)}.transition-opacity{transition:opacity var(--transition-base)}.transition-colors{transition:background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.transition-fast{transition-duration:var(--transition-fast)}.transition-slow{transition-duration:var(--transition-slow)}
