*,*:before,*:after{box-sizing:border-box}*{margin:0}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:focus-visible{outline:2px solid var(--focus-color, #00d97f);outline-offset:2px}:focus:not(:focus-visible){outline:none}html{scroll-behavior:smooth}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--text-xs: clamp(.75rem, .7rem + .2vw, .8rem);--text-sm: clamp(.875rem, .8rem + .3vw, .95rem);--text-base: clamp(1rem, .9rem + .4vw, 1.1rem);--text-lg: clamp(1.125rem, 1rem + .5vw, 1.25rem);--text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.4rem);--text-2xl: clamp(1.5rem, 1.3rem + .8vw, 1.75rem);--text-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.25rem);--text-4xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--font-black: 900;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--color-primary: #001789;--color-primary-light: #0024b3;--color-primary-dark: #000d5e;--color-accent: #00d97f;--color-accent-light: #00ff88;--color-accent-dark: #00b369;--color-background: var(--color-primary);--color-surface: rgba(255, 255, 255, .05);--color-surface-hover: rgba(255, 255, 255, .08);--color-surface-active: rgba(255, 255, 255, .12);--color-text-primary: #ffffff;--color-text-secondary: rgba(255, 255, 255, .8);--color-text-muted: rgba(255, 255, 255, .6);--color-border: rgba(255, 255, 255, .1);--color-border-hover: rgba(255, 255, 255, .2);--color-border-focus: var(--color-accent);--color-success: #00ff88;--color-warning: #ffa500;--color-error: #ff4444;--color-info: #00bfff;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .1);--shadow-xl: 0 12px 24px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .12);--shadow-2xl: 0 20px 40px rgba(0, 0, 0, .25), 0 12px 24px rgba(0, 0, 0, .15);--shadow-glow: 0 0 20px var(--color-accent);--shadow-glow-strong: 0 0 30px var(--color-accent), 0 0 60px var(--color-accent);--radius-none: 0;--radius-sm: .125rem;--radius-base: .25rem;--radius-md: .375rem;--radius-lg: .5rem;--radius-xl: .75rem;--radius-2xl: 1rem;--radius-3xl: 1.5rem;--radius-full: 9999px;--duration-75: 75ms;--duration-100: .1s;--duration-150: .15s;--duration-200: .2s;--duration-300: .3s;--duration-500: .5s;--duration-700: .7s;--duration-1000: 1s;--ease-linear: linear;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.68, -.55, .265, 1.55);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--z-hide: -1;--z-auto: auto;--z-base: 0;--z-docked: 10;--z-dropdown: 1000;--z-sticky: 1100;--z-banner: 1200;--z-overlay: 1300;--z-modal: 1400;--z-popover: 1500;--z-skip-link: 1600;--z-toast: 1700;--z-tooltip: 1800;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px;--focus-ring-width: 2px;--focus-ring-offset: 2px;--focus-ring-color: var(--color-accent);--focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color);--glass-background: rgba(255, 255, 255, .05);--glass-border: 1px solid rgba(255, 255, 255, .1);--glass-backdrop-filter: blur(20px) saturate(180%);--glass-shadow: var(--shadow-lg)}:root.theme-beach{--color-primary: #87ceeb;--color-primary-light: #b0e0e6;--color-primary-dark: #5f9ea0;--color-accent: #ffd700;--color-accent-light: #ffed4e;--color-accent-dark: #daa520}:root.theme-park{--color-primary: #90ee90;--color-primary-light: #98fb98;--color-primary-dark: #32cd32;--color-accent: #228b22;--color-accent-light: #32cd32;--color-accent-dark: #006400}:root.theme-city{--color-primary: #696969;--color-primary-light: #808080;--color-primary-dark: #2f2f2f;--color-accent: #ff6347;--color-accent-light: #ff7f50;--color-accent-dark: #dc143c}.p-0{padding:var(--space-0)}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}.m-0{margin:var(--space-0)}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.m-auto{margin:auto}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.hidden{display:none!important}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.rounded-none{border-radius:var(--radius-none)}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-base)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-none{box-shadow:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-2xl{box-shadow:var(--shadow-2xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}.transition-none{transition:none}.transition-all{transition:all var(--duration-150) var(--ease-out)}.transition-colors{transition:color var(--duration-150) var(--ease-out),background-color var(--duration-150) var(--ease-out),border-color var(--duration-150) var(--ease-out)}.transition-transform{transition:transform var(--duration-150) var(--ease-out)}html{font-family:gillsans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:var(--leading-normal);scroll-behavior:smooth}body{background:var(--color-background);color:var(--color-text-primary);margin:0;padding:0;min-height:100vh;overflow-x:hidden;font-size:var(--text-base)}.game-content{min-height:100vh;display:flex;flex-direction:column}.soda-drinker-header{position:sticky;top:0;z-index:var(--z-sticky);background:var(--glass-background);backdrop-filter:var(--glass-backdrop-filter);border-bottom:var(--glass-border);padding:var(--space-2) var(--space-4)}.header-main-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4)}.main-game-content{flex:1;max-width:1200px;margin:0 auto;padding:var(--space-3) var(--space-4);display:grid;grid-template-columns:1fr 360px;gap:var(--space-6);align-items:start;min-height:calc(100vh - 80px)}.main-content-area{display:flex;flex-direction:column;gap:var(--space-4);height:100%}.game-sidebar{position:sticky;top:calc(140px + var(--space-4));height:fit-content;max-height:calc(100vh - 180px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--color-accent) transparent}.game-sidebar::-webkit-scrollbar{width:6px}.game-sidebar::-webkit-scrollbar-track{background:transparent}.game-sidebar::-webkit-scrollbar-thumb{background:var(--color-accent);border-radius:var(--radius-full)}.soda-main-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4);justify-content:flex-start;min-height:calc(100vh - 120px)}.soda-container{width:min(280px,75vw);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;margin:var(--space-2) 0}.soda-button{width:100%;height:100%;border:none;background:transparent;border-radius:var(--radius-2xl);cursor:pointer;transition:transform var(--duration-150) var(--ease-out);position:relative;overflow:hidden}.soda-button:hover{transform:scale(1.02)}.soda-button:active{transform:scale(.98)}.click-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:var(--z-overlay)}.action-buttons,.suction-button-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-3);width:100%;max-width:700px;margin-top:auto}@media (min-width: 1280px){.main-game-content{grid-template-columns:1fr 400px;gap:var(--space-12)}.soda-container{width:min(320px,80vw)}}@media (max-width: 1024px){.header-main-content{grid-template-columns:1fr;gap:var(--space-3);text-align:center}.main-game-content{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-2);min-height:calc(100vh - 60px)}.game-sidebar{position:static;max-height:none;order:2}.main-content-area{order:1}.soda-main-section{min-height:60vh;justify-content:center}}@media (max-width: 768px){.soda-drinker-header{padding:var(--space-1) var(--space-3)}.main-game-content{padding:var(--space-2);gap:var(--space-3);min-height:calc(100vh - 50px)}.soda-main-section{padding:var(--space-1) var(--space-2);gap:var(--space-3);min-height:50vh;justify-content:center}.soda-container{width:min(240px,70vw);margin:var(--space-1) 0}.action-buttons,.suction-button-container{grid-template-columns:1fr;gap:var(--space-2)}}@media (max-width: 480px){.soda-drinker-header{padding:var(--space-1) var(--space-2)}.main-game-content{padding:var(--space-1);gap:var(--space-2);min-height:calc(100vh - 40px)}.soda-main-section{padding:var(--space-1);gap:var(--space-2);min-height:45vh;justify-content:flex-start}.soda-container{width:min(200px,65vw);margin:0}}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}.container-sm{max-width:640px;margin:0 auto;padding:0 var(--space-4)}.container-lg{max-width:1400px;margin:0 auto;padding:0 var(--space-6)}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-full{grid-column:1 / -1}.grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--min-column-width, 200px),1fr));gap:var(--space-4)}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--min-column-width, 200px),1fr));gap:var(--space-4)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.flex-shrink-0{flex-shrink:0}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.aspect-4-3{aspect-ratio:4 / 3}@supports (padding: max(0px)){.safe-top{padding-top:max(var(--space-4),env(safe-area-inset-top))}.safe-bottom{padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}.safe-left{padding-left:max(var(--space-4),env(safe-area-inset-left))}.safe-right{padding-right:max(var(--space-4),env(safe-area-inset-right))}}@media print{.soda-drinker-header,.game-sidebar{display:none}.main-game-content{grid-template-columns:1fr}*{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}}.btn,button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text-primary);font-size:var(--text-sm);font-weight:var(--font-medium);text-decoration:none;cursor:pointer;transition:all var(--duration-200) var(--ease-out);position:relative;overflow:hidden;min-height:44px;backdrop-filter:var(--glass-backdrop-filter);box-shadow:var(--shadow-sm)}.btn:hover,button:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active,button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus-ring-shadow),var(--shadow-md)}.btn-primary{background:var(--color-accent);color:var(--color-primary);border-color:var(--color-accent);font-weight:var(--font-semibold)}.btn-primary:hover{background:var(--color-accent-light);border-color:var(--color-accent-light)}.btn-secondary{background:transparent;border:2px solid var(--color-accent);color:var(--color-accent)}.btn-secondary:hover{background:var(--color-accent);color:var(--color-primary)}.btn-ghost{background:transparent;border:none;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);min-height:36px}.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-lg);min-height:52px}.btn-xl{padding:var(--space-5) var(--space-8);font-size:var(--text-xl);min-height:60px}.btn:disabled,button:disabled{opacity:.5;cursor:not-allowed;transform:none;pointer-events:none}.btn-loading{color:transparent}.btn-loading:after{content:"";position:absolute;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}.card{background:var(--glass-background);border:var(--glass-border);border-radius:var(--radius-xl);padding:var(--space-6);backdrop-filter:var(--glass-backdrop-filter);box-shadow:var(--shadow-md);transition:all var(--duration-300) var(--ease-out);position:relative;overflow:hidden}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--color-border-hover)}.card-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.card-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0}.card-subtitle{font-size:var(--text-sm);color:var(--color-text-secondary);margin:var(--space-1) 0 0 0}.card-content{color:var(--color-text-secondary);line-height:var(--leading-relaxed)}.card-footer{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.card-compact{padding:var(--space-4)}.card-spacious{padding:var(--space-8)}.upgrade-card{@apply card;transition:all var(--duration-200) var(--ease-out)}.upgrade-card:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--shadow-xl);border-color:var(--color-accent)}.upgrade-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.upgrade-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-lg);font-size:var(--text-xl);border:1px solid var(--color-border)}.upgrade-info{flex:1}.upgrade-name{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0}.upgrade-description{font-size:var(--text-sm);color:var(--color-text-secondary);margin:var(--space-1) 0 0 0}.upgrade-btn{@apply btn btn-primary;width:100%;margin-top:var(--space-4);justify-content:space-between}.upgrade-cost{font-weight:var(--font-bold)}.upgrade-stats{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-secondary)}.upgrade-owned{font-weight:var(--font-medium)}.upgrade-effect{color:var(--color-accent);font-weight:var(--font-medium)}.upgrade-card.affordable .upgrade-btn{background:var(--color-success);border-color:var(--color-success);color:var(--color-primary);box-shadow:0 0 20px #00ff884d}.upgrade-card.unaffordable .upgrade-btn{opacity:.6;cursor:not-allowed}.suction-btn{@apply btn;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);text-align:left;min-height:80px;width:100%}.suction-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-lg);font-size:var(--text-2xl);flex-shrink:0}.suction-info{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}.suction-name{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary)}.suction-cost{font-size:var(--text-sm);color:var(--color-text-secondary)}.suction-effect{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:var(--space-1);flex-shrink:0}.click-power-display{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.click-power-value{font-weight:var(--font-bold);color:var(--color-accent)}.suction-bonus{font-size:var(--text-xs);color:var(--color-accent);font-weight:var(--font-medium)}.level-display-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.level-polygon-container{display:flex;align-items:center;gap:var(--space-3);background:var(--glass-background);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);backdrop-filter:var(--glass-backdrop-filter);transition:all var(--duration-200) var(--ease-out)}.level-polygon-container:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);border-color:var(--color-accent)}.level-polygon{width:48px;height:48px;background:var(--color-accent);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}.level-number{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-primary)}.level-info-minimal{display:flex;flex-direction:column;gap:var(--space-1)}.level-name-minimal{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-accent);letter-spacing:.05em}.currency-display-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.currency-polygon-main{background:var(--color-accent);color:var(--color-primary);border-radius:var(--radius-xl);padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-3);box-shadow:var(--shadow-md);transition:all var(--duration-200) var(--ease-out)}.currency-polygon-main:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-lg)}.currency-icon-polygon{font-size:var(--text-2xl);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.currency-value-main{font-size:var(--text-3xl);font-weight:var(--font-bold);line-height:1}.currency-label-main{font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:.1em;opacity:.9}.secondary-stats-minimal{display:flex;gap:var(--space-3)}.stat-polygon{background:var(--glass-background);border:var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);backdrop-filter:var(--glass-backdrop-filter);display:flex;align-items:center;gap:var(--space-1);transition:all var(--duration-200) var(--ease-out)}.stat-polygon:hover{background:var(--color-surface-hover);transform:translateY(-1px)}.stat-value{font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-accent)}.stat-label{font-size:var(--text-xs);color:var(--color-text-secondary);letter-spacing:.05em}.controls-section{display:flex;gap:var(--space-2)}.control-polygon{@apply btn btn-ghost;width:48px;height:48px;padding:0;border-radius:var(--radius-lg)}.control-icon{font-size:var(--text-lg)}.modal-overlay{position:fixed;inset:0;background:#000c;backdrop-filter:blur(4px);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.modal-content{background:var(--glass-background);border:var(--glass-border);border-radius:var(--radius-2xl);backdrop-filter:var(--glass-backdrop-filter);box-shadow:var(--shadow-2xl);max-width:90vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:modalEnter var(--duration-300) var(--ease-spring)}@keyframes modalEnter{0%{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{padding:var(--space-6) var(--space-6) var(--space-4);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.modal-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0}.modal-close{@apply btn btn-ghost;width:40px;height:40px;padding:0;flex-shrink:0}.modal-body{padding:var(--space-6);flex:1;overflow-y:auto}.modal-footer{padding:var(--space-4) var(--space-6) var(--space-6);border-top:1px solid var(--color-border);display:flex;gap:var(--space-3);justify-content:flex-end}.progress-container{width:100%;background:var(--color-surface);border-radius:var(--radius-full);overflow:hidden;height:8px;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light));border-radius:var(--radius-full);transition:width var(--duration-500) var(--ease-out);position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShimmer 2s infinite}@keyframes progressShimmer{0%{left:-100%}to{left:100%}}.progress-lg{height:12px}.progress-xl{height:16px}.form-group{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.form-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-primary)}.form-input,.form-select,.form-textarea{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);color:var(--color-text-primary);font-size:var(--text-base);transition:all var(--duration-200) var(--ease-out)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #00d97f1a}.tooltip{position:relative;cursor:help}.tooltip:before,.tooltip:after{position:absolute;opacity:0;pointer-events:none;transition:opacity var(--duration-200) var(--ease-out);z-index:var(--z-tooltip)}.tooltip:before{content:attr(data-tooltip);bottom:100%;left:50%;transform:translate(-50%) translateY(-4px);background:var(--color-primary);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);white-space:nowrap;box-shadow:var(--shadow-lg)}.tooltip:after{content:"";bottom:100%;left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--color-primary)}.tooltip:hover:before,.tooltip:hover:after{opacity:1}.skeleton{background:linear-gradient(90deg,var(--color-surface),var(--color-surface-hover),var(--color-surface));background-size:200% 100%;animation:skeleton 1.5s infinite;border-radius:var(--radius-md)}@keyframes skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid var(--color-surface);border-top:2px solid var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media (prefers-contrast: high){.card,.btn,.form-input{border-width:2px}.btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}}.soda-clicked{animation:sodaClick var(--duration-300) var(--ease-spring)}@keyframes sodaClick{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.click-ripple{position:absolute;border-radius:50%;background:var(--color-accent);transform:scale(0);animation:ripple var(--duration-700) linear;pointer-events:none}@keyframes ripple{0%{transform:scale(0);opacity:.6}to{transform:scale(2);opacity:0}}.click-feedback{position:fixed;pointer-events:none;z-index:var(--z-toast);font-weight:var(--font-bold);font-size:var(--text-lg);color:var(--color-accent);text-shadow:0 0 10px var(--color-accent);animation:clickFeedbackFloat var(--duration-1000) var(--ease-out) forwards}@keyframes clickFeedbackFloat{0%{opacity:1;transform:translateY(0) scale(1)}20%{transform:translateY(-10px) scale(1.1)}to{opacity:0;transform:translateY(-60px) scale(.8)}}.critical-click-feedback{font-size:var(--text-2xl);color:var(--color-warning);text-shadow:0 0 20px var(--color-warning);animation:criticalFeedbackFloat var(--duration-1000) var(--ease-spring) forwards}@keyframes criticalFeedbackFloat{0%{opacity:1;transform:translateY(0) scale(1) rotate(-5deg)}15%{transform:translateY(-15px) scale(1.3) rotate(5deg)}to{opacity:0;transform:translateY(-80px) scale(.7) rotate(-3deg)}}.purchase-feedback{color:var(--color-success);text-shadow:0 0 15px var(--color-success);animation:purchaseFeedbackFloat var(--duration-1000) var(--ease-out) forwards}@keyframes purchaseFeedbackFloat{0%{opacity:1;transform:translateY(0) scale(1)}30%{transform:translateY(-20px) scale(1.2)}to{opacity:0;transform:translateY(-70px) scale(.9)}}.purchase-success{position:relative;overflow:visible}.purchase-success:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;border:2px solid var(--color-success);border-radius:inherit;transform:translate(-50%,-50%) scale(1);opacity:1;animation:purchaseSuccessRing var(--duration-500) var(--ease-out)}@keyframes purchaseSuccessRing{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}.purchase-success-glow{background:var(--color-success)!important;color:var(--color-primary)!important;box-shadow:0 0 30px var(--color-success)!important;animation:purchaseGlow var(--duration-500) var(--ease-out)}@keyframes purchaseGlow{0%{box-shadow:0 0 10px var(--color-success)}50%{box-shadow:0 0 30px var(--color-success),0 0 60px var(--color-success)}to{box-shadow:0 0 10px var(--color-success)}}.value-increase{animation:valueIncrease var(--duration-300) var(--ease-spring)}@keyframes valueIncrease{0%{transform:scale(1);color:var(--color-text-primary)}50%{transform:scale(1.1);color:var(--color-success)}to{transform:scale(1);color:var(--color-text-primary)}}.value-flash{animation:valueFlash var(--duration-200) var(--ease-out)}@keyframes valueFlash{0%{background:transparent}50%{background:var(--color-accent);color:var(--color-primary)}to{background:transparent}}.level-up-celebration{position:relative;animation:levelUpCelebration var(--duration-1000) var(--ease-spring)}@keyframes levelUpCelebration{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.1) rotate(-2deg)}50%{transform:scale(1.2) rotate(2deg)}75%{transform:scale(1.1) rotate(-1deg)}to{transform:scale(1) rotate(0)}}.level-up-particles{position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--color-accent);border-radius:50%;pointer-events:none;animation:levelUpParticle var(--duration-1000) var(--ease-out) forwards}@keyframes levelUpParticle{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--particle-x, 0px)),calc(-50% + var(--particle-y, 0px))) scale(.3)}}.fade-in{animation:fadeIn var(--duration-500) var(--ease-out)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-in-up{animation:slideInUp var(--duration-300) var(--ease-out)}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-in-left{animation:slideInLeft var(--duration-300) var(--ease-out)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.scale-in{animation:scaleIn var(--duration-200) var(--ease-spring)}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.hover-lift{transition:transform var(--duration-200) var(--ease-out)}.hover-lift:hover{transform:translateY(-2px)}.hover-scale{transition:transform var(--duration-200) var(--ease-out)}.hover-scale:hover{transform:scale(1.02)}.hover-glow{transition:box-shadow var(--duration-300) var(--ease-out)}.hover-glow:hover{box-shadow:0 0 20px var(--color-accent)}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.bounce{animation:bounce 1s infinite}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.number-roll{display:inline-block;overflow:hidden;vertical-align:baseline;position:relative}.number-roll-content{display:inline-block;transition:transform var(--duration-500) var(--ease-out)}.progress-pulse{position:relative;overflow:hidden}.progress-pulse:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progressPulse 2s infinite}@keyframes progressPulse{0%{left:-100%}to{left:100%}}.shake{animation:shake var(--duration-500) var(--ease-out)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.shake-vertical{animation:shakeVertical var(--duration-500) var(--ease-out)}@keyframes shakeVertical{0%,to{transform:translateY(0)}10%,30%,50%,70%,90%{transform:translateY(-2px)}20%,40%,60%,80%{transform:translateY(2px)}}.confetti-piece{position:fixed;width:8px;height:8px;background:var(--color-accent);pointer-events:none;z-index:var(--z-toast);animation:confetti var(--duration-1000) var(--ease-out) forwards}@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}.confetti-piece:nth-child(2n){background:var(--color-success);animation-delay:.1s}.confetti-piece:nth-child(3n){background:var(--color-warning);animation-delay:.2s;width:6px;height:6px}.confetti-piece:nth-child(4n){background:var(--color-info);animation-delay:.3s;border-radius:50%}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pulse,.bounce,.spin,.confetti-piece{animation:none}}.will-change-transform{will-change:transform}.will-change-auto{will-change:auto}.soda-button,.upgrade-card,.currency-value-main,.click-feedback{will-change:transform}.animation-complete{will-change:auto}.stagger-in>*{opacity:0;animation:slideInUp var(--duration-300) var(--ease-out) forwards}.stagger-in>*:nth-child(1){animation-delay:0ms}.stagger-in>*:nth-child(2){animation-delay:50ms}.stagger-in>*:nth-child(3){animation-delay:.1s}.stagger-in>*:nth-child(4){animation-delay:.15s}.stagger-in>*:nth-child(5){animation-delay:.2s}.stagger-in>*:nth-child(6){animation-delay:.25s}:root{--click-scale: .95;--hover-lift-distance: -2px;--glow-intensity: 20px;--particle-count: 12;--confetti-count: 50}:root{--theme-transition-duration: var(--duration-500);--theme-primary: var(--color-primary);--theme-accent: var(--color-accent);--theme-background: var(--color-background);--themed-surface: var(--color-surface);--themed-border: var(--color-border);--themed-text: var(--color-text-primary)}body,.card,.btn,.upgrade-card,.suction-btn,.currency-polygon-main,.level-polygon,.stat-polygon,.control-polygon,.form-input,.form-select,.modal-content{transition:background-color var(--theme-transition-duration) var(--ease-out),border-color var(--theme-transition-duration) var(--ease-out),color var(--theme-transition-duration) var(--ease-out),box-shadow var(--theme-transition-duration) var(--ease-out)}.theme-beach{--color-primary: #87ceeb;--color-primary-light: #98fb98;--color-primary-dark: #5f9ea0;--color-accent: #ffd700;--color-accent-light: #ffed4e;--color-accent-dark: #daa520;--color-background: linear-gradient(135deg, #87ceeb 0%, #98fb98 100%);--color-surface: rgba(255, 215, 0, .15);--color-border: rgba(255, 215, 0, .3);--shadow-glow: 0 0 30px rgba(255, 215, 0, .4);--glass-backdrop-filter: blur(20px) saturate(160%) hue-rotate(10deg)}.theme-park{--color-primary: #90ee90;--color-primary-light: #98fb98;--color-primary-dark: #32cd32;--color-accent: #228b22;--color-accent-light: #32cd32;--color-accent-dark: #006400;--color-background: linear-gradient(135deg, #90ee90 0%, #32cd32 100%);--color-surface: rgba(34, 139, 34, .15);--color-border: rgba(34, 139, 34, .3);--shadow-glow: 0 0 30px rgba(34, 139, 34, .4);--glass-backdrop-filter: blur(20px) saturate(140%) hue-rotate(-20deg)}.theme-weird-room{--color-primary: #dda0dd;--color-primary-light: #da70d6;--color-primary-dark: #8b008b;--color-accent: #8b008b;--color-accent-light: #da70d6;--color-accent-dark: #4b0082;--color-background: linear-gradient(135deg, #dda0dd 0%, #da70d6 100%);--color-surface: rgba(139, 0, 139, .15);--color-border: rgba(139, 0, 139, .3);--shadow-glow: 0 0 30px rgba(139, 0, 139, .4);--glass-backdrop-filter: blur(20px) saturate(180%) hue-rotate(30deg)}.theme-space{--color-primary: #000080;--color-primary-light: #191970;--color-primary-dark: #000040;--color-accent: #00ffff;--color-accent-light: #87ceeb;--color-accent-dark: #008b8b;--color-background: linear-gradient(135deg, #000080 0%, #191970 100%);--color-surface: rgba(0, 255, 255, .15);--color-border: rgba(0, 255, 255, .3);--shadow-glow: 0 0 30px rgba(0, 255, 255, .4);--glass-backdrop-filter: blur(20px) saturate(200%) brightness(120%)}.theme-castle{--color-primary: #8b4513;--color-primary-light: #a0522d;--color-primary-dark: #654321;--color-accent: #ffd700;--color-accent-light: #ffed4e;--color-accent-dark: #daa520;--color-background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);--color-surface: rgba(255, 215, 0, .15);--color-border: rgba(255, 215, 0, .3);--shadow-glow: 0 0 30px rgba(255, 215, 0, .4);--glass-backdrop-filter: blur(20px) saturate(140%) sepia(20%)}.theme-mouth{--color-primary: #ffb6c1;--color-primary-light: #ffc0cb;--color-primary-dark: #ff69b4;--color-accent: #ff69b4;--color-accent-light: #ffc0cb;--color-accent-dark: #c71585;--color-background: linear-gradient(135deg, #ffb6c1 0%, #ffc0cb 100%);--color-surface: rgba(255, 105, 180, .15);--color-border: rgba(255, 105, 180, .3);--shadow-glow: 0 0 30px rgba(255, 105, 180, .4);--glass-backdrop-filter: blur(20px) saturate(160%) hue-rotate(-10deg)}.theme-convention{--color-primary: #708090;--color-primary-light: #2f4f4f;--color-primary-dark: #2f2f2f;--color-accent: #ffd700;--color-accent-light: #ffed4e;--color-accent-dark: #daa520;--color-background: linear-gradient(135deg, #708090 0%, #2f4f4f 100%);--color-surface: rgba(255, 215, 0, .15);--color-border: rgba(255, 215, 0, .3);--shadow-glow: 0 0 30px rgba(255, 215, 0, .4);--glass-backdrop-filter: blur(20px) saturate(110%) contrast(120%)}.theme-empty-pool{--color-primary: #00ced1;--color-primary-light: #20b2aa;--color-primary-dark: #008b8b;--color-accent: #ff69b4;--color-accent-light: #ffc0cb;--color-accent-dark: #c71585;--color-background: linear-gradient(135deg, #00ced1 0%, #20b2aa 100%);--color-surface: rgba(255, 105, 180, .15);--color-border: rgba(255, 105, 180, .3);--shadow-glow: 0 0 30px rgba(255, 105, 180, .4);--glass-backdrop-filter: blur(20px) saturate(160%) hue-rotate(-30deg)}.theme-dark-woods{--color-primary: #2f4f2f;--color-primary-light: #000000;--color-primary-dark: #1a1a1a;--color-accent: #8b0000;--color-accent-light: #dc143c;--color-accent-dark: #660000;--color-background: linear-gradient(135deg, #2f4f2f 0%, #000000 100%);--color-surface: rgba(139, 0, 0, .15);--color-border: rgba(139, 0, 0, .3);--color-text-primary: #ffffff;--shadow-glow: 0 0 30px rgba(139, 0, 0, .4);--glass-backdrop-filter: blur(20px) saturate(120%) brightness(80%)}.theme-county-fair{--color-primary: #ff6347;--color-primary-light: #ff4500;--color-primary-dark: #dc143c;--color-accent: #ffd700;--color-accent-light: #ffed4e;--color-accent-dark: #daa520;--color-background: linear-gradient(135deg, #ff6347 0%, #ff4500 100%);--color-surface: rgba(255, 215, 0, .15);--color-border: rgba(255, 215, 0, .3);--shadow-glow: 0 0 30px rgba(255, 215, 0, .4);--glass-backdrop-filter: blur(20px) saturate(180%) brightness(110%)}body{background:var(--color-background);background-attachment:fixed}.currency-polygon-main,.level-polygon{background:var(--color-accent)!important;color:var(--color-primary)!important}.btn-primary,.upgrade-btn{background:var(--color-accent)!important;color:var(--color-primary)!important;border-color:var(--color-accent)!important}.btn-primary:hover,.upgrade-btn:hover{background:var(--color-accent-light)!important;border-color:var(--color-accent-light)!important}.stat-value,.upgrade-effect,.click-power-value,.suction-bonus,.level-name-minimal,.currency-label-main{color:var(--color-accent)!important}.progress-fill,.progress-fill-minimal{background:linear-gradient(90deg,var(--color-accent),var(--color-accent-light))!important}.card,.upgrade-card,.level-polygon-container,.stat-polygon{border-color:var(--color-border)!important;background:var(--color-surface)!important}:focus-visible{outline-color:var(--color-accent)!important;box-shadow:0 0 0 3px rgba(var(--color-accent-rgb, 0, 217, 127),.3)!important}.theme-beach .currency-icon-polygon{animation:beachPulse 3s ease-in-out infinite}@keyframes beachPulse{0%,to{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(10deg) brightness(1.1)}}.theme-park .level-polygon{animation:parkGrow 2s ease-in-out infinite}@keyframes parkGrow{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.theme-weird-room .control-polygon{animation:weirdRoomPulse 2s ease-in-out infinite}@keyframes weirdRoomPulse{0%,to{transform:scale(1) rotate(0);filter:hue-rotate(0deg)}50%{transform:scale(1.05) rotate(5deg);filter:hue-rotate(30deg)}}.theme-space .progress-fill{animation:spaceShimmer 2s linear infinite}@keyframes spaceShimmer{0%{background-position:-100% 0;filter:brightness(1)}50%{filter:brightness(1.2)}to{background-position:100% 0;filter:brightness(1)}}.theme-castle .card{animation:castleFloat 4s ease-in-out infinite}@keyframes castleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}.theme-mouth .soda-button{animation:mouthPulse 3s ease-in-out infinite}@keyframes mouthPulse{0%,to{transform:scale(1);filter:saturate(1)}50%{transform:scale(1.02);filter:saturate(1.2)}}.theme-convention .upgrade-card{animation:conventionFlicker 5s ease-in-out infinite}@keyframes conventionFlicker{0%,to{box-shadow:var(--shadow-md)}50%{box-shadow:var(--shadow-lg),0 0 15px var(--color-accent)}}.theme-empty-pool .currency-polygon-main{animation:poolRipple 4s ease-in-out infinite}@keyframes poolRipple{0%,to{transform:scale(1);filter:hue-rotate(0deg)}25%{transform:scale(1.02);filter:hue-rotate(-5deg)}75%{transform:scale(1.02);filter:hue-rotate(5deg)}}.theme-dark-woods .level-polygon{animation:darkWoodsGlow 3s ease-in-out infinite}@keyframes darkWoodsGlow{0%,to{box-shadow:var(--shadow-md);filter:brightness(1)}50%{box-shadow:var(--shadow-lg),0 0 20px var(--color-accent);filter:brightness(1.2)}}.theme-county-fair .stat-polygon{animation:fairSpin 6s linear infinite}@keyframes fairSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.theme-transition{position:relative;overflow:hidden}.theme-transition:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:themeTransitionSweep var(--theme-transition-duration) var(--ease-out);z-index:1;pointer-events:none}@keyframes themeTransitionSweep{0%{left:-100%}to{left:100%}}@media (prefers-contrast: high){.theme-beach,.theme-park,.theme-city,.theme-desert,.theme-mountain,.theme-ocean{--color-surface: rgba(0, 0, 0, .8);--color-border: rgba(255, 255, 255, .8);--color-text-primary: #ffffff;--color-text-secondary: rgba(255, 255, 255, .9)}}@media (prefers-reduced-motion: reduce){.theme-beach .currency-icon-polygon,.theme-park .level-polygon,.theme-weird-room .control-polygon,.theme-space .progress-fill,.theme-castle .card,.theme-mouth .soda-button,.theme-convention .upgrade-card,.theme-empty-pool .currency-polygon-main,.theme-dark-woods .level-polygon,.theme-county-fair .stat-polygon{animation:none}.theme-transition:before{animation:none;display:none}}@media (prefers-color-scheme: dark){:root{--glass-backdrop-filter: blur(20px) saturate(180%) brightness(.8);--color-surface: rgba(255, 255, 255, .08);--color-border: rgba(255, 255, 255, .15)}}.theme-bg{background:var(--color-background)!important}.theme-surface{background:var(--color-surface)!important}.theme-primary{color:var(--color-primary)!important}.theme-accent{color:var(--color-accent)!important}.theme-text{color:var(--color-text-primary)!important}.theme-border{border-color:var(--color-border)!important}.force-theme-accent{background:var(--color-accent)!important;color:var(--color-primary)!important;border-color:var(--color-accent)!important}.force-theme-surface{background:var(--color-surface)!important;color:var(--color-text-primary)!important;border-color:var(--color-border)!important}.fountain-panel{padding:var(--space-2) 0;display:flex;justify-content:center;align-items:center}.fountain-progress{max-width:400px;width:100%}.soda-button{position:relative;z-index:var(--z-base);min-height:160px;min-width:160px}@media (max-height: 600px){.soda-container{width:min(200px,60vw)!important;height:min(200px,30vh)!important;aspect-ratio:1}.soda-main-section{min-height:35vh!important}}@media (max-height: 500px){.soda-container{width:min(160px,50vw)!important;height:min(160px,25vh)!important}.soda-main-section{min-height:30vh!important;padding:var(--space-1)!important}.action-buttons,.suction-button-container{gap:var(--space-1)!important}}.soda-fallback{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-2xl)}.settings-modal{position:fixed;inset:0;background:#000c;backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.settings-modal-content{background:var(--glass-background);border:var(--glass-border);border-radius:var(--radius-2xl);backdrop-filter:var(--glass-backdrop-filter);box-shadow:var(--shadow-2xl);max-width:90vw;max-height:90vh;width:800px;overflow:hidden;display:flex;flex-direction:column;animation:modalEnter var(--duration-300) var(--ease-spring)}.settings-modal-header{padding:var(--space-6);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}.settings-modal-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0;display:flex;align-items:center;gap:var(--space-2)}.settings-modal-close{@apply btn btn-ghost;width:40px;height:40px;padding:0}.settings-modal-tabs{display:flex;border-bottom:1px solid var(--color-border);overflow-x:auto}.settings-tab-btn{@apply btn btn-ghost;border-radius:0;border-bottom:2px solid transparent;padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;min-height:60px}.settings-tab-btn.active{background:var(--color-surface-hover);border-bottom-color:var(--color-accent);color:var(--color-accent)}.settings-modal-body{flex:1;overflow-y:auto;padding:var(--space-6)}.settings-group{margin-bottom:var(--space-8)}.settings-group-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin:0 0 var(--space-4) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.settings-btn{@apply btn;margin-bottom:var(--space-2)}.audio-control{margin-bottom:var(--space-4)}.volume-slider-container{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}.volume-slider{flex:1;height:6px;background:var(--color-surface);border-radius:var(--radius-full);outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:var(--color-accent);border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:20px;height:20px;background:var(--color-accent);border-radius:50%;cursor:pointer;border:none}.volume-value{font-weight:var(--font-medium);color:var(--color-accent);min-width:40px;text-align:right}.level-selector-container{display:flex;flex-direction:column;gap:var(--space-4)}.current-level-display{@apply card;text-align:center;padding:var(--space-6)}.current-level-info{display:flex;flex-direction:column;gap:var(--space-2)}.current-level-name{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-accent)}.current-level-number{font-size:var(--text-base);color:var(--color-text-secondary)}.level-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3);max-height:400px;overflow-y:auto}.level-item{@apply card card-compact;cursor:pointer;transition:all var(--duration-200) var(--ease-out);display:flex;flex-direction:column;gap:var(--space-2)}.level-item:hover{background:var(--color-accent);color:var(--color-primary);transform:scale(1.02)}.level-item.current{background:var(--color-accent);color:var(--color-primary)}.level-item.locked{opacity:.5;cursor:not-allowed}.level-item-name{font-weight:var(--font-semibold);font-size:var(--text-sm)}.level-item-number{font-size:var(--text-xs);opacity:.8}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}.stat-card{@apply card card-compact;display:flex;align-items:center;gap:var(--space-3)}.stat-icon{font-size:var(--text-2xl);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-lg);flex-shrink:0}.stat-content{flex:1}.stat-label{font-size:var(--text-sm);color:var(--color-text-secondary);margin:0}.stat-value{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--color-accent);margin:0}.pwa-indicators{display:flex;gap:var(--space-2);align-items:center;justify-content:center;padding:var(--space-1) 0}.offline-indicator{background:var(--color-warning);color:var(--color-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium)}.pwa-install-button{@apply btn btn-primary btn-sm;}@media (max-width: 768px){.settings-modal-content{width:95vw;height:95vh;margin:0}.settings-modal-tabs{overflow-x:auto;scrollbar-width:none}.settings-modal-tabs::-webkit-scrollbar{display:none}.settings-tab-btn{padding:var(--space-3) var(--space-4);min-width:120px}.stats-grid,.level-list{grid-template-columns:1fr}}@media print{.settings-modal,.pwa-indicators,.control-polygon,.soda-button,.suction-btn{display:none!important}}.perf-monitor{position:fixed;top:var(--space-4);right:var(--space-4);background:#000c;color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-xs);font-family:monospace;z-index:var(--z-tooltip);pointer-events:none}#gameContent{display:block}#gameContent.hidden{display:none}.loading-screen{position:fixed;inset:0;background:var(--color-background);z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-4)}.loading-spinner{width:40px;height:40px;border:4px solid var(--color-surface);border-top:4px solid var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}.loading-text{font-size:var(--text-lg);color:var(--color-text-primary);text-align:center}