:root{--color-primary: #2e9e8f;--color-primary-dark: #247d72;--color-primary-light: #5cbfb3;--color-secondary: #f0c040;--color-secondary-dark: #d4a520;--color-accent: #e05555;--color-accent-dark: #c43e3e;--color-success: #4caf50;--color-error: #e05555;--color-warning: #f0c040;--bg-sky: #7ec8e3;--bg-sand: #f5e6c8;--bg-ocean: #3a8fb7;--bg-wood: #8b6b45;--bg-wood-light: #c4a265;--bg-card: rgba(255, 252, 240, .92);--bg-overlay: rgba(20, 40, 60, .55);--text-primary: #3b2f20;--text-secondary: #7a6b55;--text-light: #fff8e8;--text-on-primary: #fff8e8;--shadow-sm: 0 2px 6px rgba(80, 50, 20, .15);--shadow-md: 0 4px 14px rgba(80, 50, 20, .2);--shadow-lg: 0 8px 28px rgba(80, 50, 20, .25);--radius-sm: 10px;--radius-md: 14px;--radius-lg: 22px;--radius-full: 50%;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 28px;--font-size-xxl: 36px;--min-btn: 44px}.island-bg{background:linear-gradient(180deg,var(--bg-sky) 0%,#a8dce8 35%,var(--bg-sand) 65%,#e8d5a8 100%);position:relative}.island-bg:after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:radial-gradient(ellipse 120% 80px at 20% 100%,var(--bg-ocean) 40%,transparent 41%),radial-gradient(ellipse 100% 60px at 70% 100%,#4a9cc5 35%,transparent 36%),radial-gradient(ellipse 140% 50px at 50% 100%,var(--bg-ocean) 30%,transparent 31%);opacity:.3;pointer-events:none}.island-bg-dark{background:linear-gradient(180deg,#0c1b2e,#152942,#1a3352 60%,#1e3a5f)}.cloud{position:absolute;background:#fff9;border-radius:50%;pointer-events:none}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud-1{width:80px;height:30px;top:8%;left:10%;animation:cloudDrift 25s linear infinite}.cloud-1:before{width:40px;height:40px;top:-20px;left:15px}.cloud-1:after{width:50px;height:35px;top:-15px;left:35px}.cloud-2{width:60px;height:22px;top:14%;right:15%;animation:cloudDrift 35s linear infinite reverse;opacity:.5}.cloud-2:before{width:30px;height:30px;top:-15px;left:10px}.cloud-2:after{width:40px;height:25px;top:-12px;left:25px}@keyframes cloudDrift{0%{transform:translate(-20px)}50%{transform:translate(20px)}to{transform:translate(-20px)}}*,*:before,*:after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0;padding:0}.scrollable,.scrollable *{touch-action:pan-y}.scrollable{overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none}.scrollable::-webkit-scrollbar{display:none}html,body{height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-touch-callout:none;font-family:var(--font-family);font-size:var(--font-size-md);color:var(--text-primary);background:var(--bg-sand);line-height:1.4}button,.btn{min-height:var(--min-btn);min-width:var(--min-btn);border:none;cursor:pointer;font-family:inherit;font-size:inherit;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:transform .12s ease,box-shadow .12s ease}button:active,.btn:active{transform:scale(.94) translateY(1px)}.btn-primary{background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));color:var(--text-on-primary);padding:var(--spacing-sm) var(--spacing-lg);font-weight:800;font-size:var(--font-size-lg);box-shadow:var(--shadow-md),inset 0 1px #ffffff40;border-bottom:3px solid var(--color-primary-dark)}.btn-primary:active{box-shadow:var(--shadow-sm);border-bottom-width:1px}.btn-secondary{background:linear-gradient(180deg,#f7d355,var(--color-secondary));color:var(--text-primary);padding:var(--spacing-sm) var(--spacing-lg);font-weight:800;font-size:var(--font-size-lg);box-shadow:var(--shadow-md),inset 0 1px #ffffff4d;border-bottom:3px solid var(--color-secondary-dark)}.btn-secondary:active{box-shadow:var(--shadow-sm);border-bottom-width:1px}.btn-accent{background:linear-gradient(180deg,#f07070,var(--color-accent));color:var(--text-light);padding:var(--spacing-sm) var(--spacing-lg);font-weight:800;font-size:var(--font-size-lg);box-shadow:var(--shadow-md),inset 0 1px #fff3;border-bottom:3px solid var(--color-accent-dark)}.btn-accent:active{box-shadow:var(--shadow-sm);border-bottom-width:1px}.btn-icon{background:#fffcf080;width:var(--min-btn);height:var(--min-btn);padding:var(--spacing-xs);border-radius:var(--radius-full)}.btn-icon:active{background:#fffcf0b3}.screen{display:flex;flex-direction:column;height:100dvh;width:100%;overflow:hidden;position:relative}.screen-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);padding-top:max(var(--spacing-sm),env(safe-area-inset-top));padding-left:max(var(--spacing-md),env(safe-area-inset-left));padding-right:max(var(--spacing-md),env(safe-area-inset-right));min-height:52px;flex-shrink:0;z-index:2}.screen-content{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:var(--spacing-md);z-index:1}.screen-content.scrollable{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}.ad-btn-2line{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--spacing-sm) var(--spacing-md)}.ad-btn-main{font-weight:800}.ad-btn-sub{font-size:var(--font-size-sm);opacity:.8;font-weight:600}.card{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-md);border:2px solid rgba(180,150,100,.2)}.wood-plank{background:linear-gradient(135deg,#c4a265,#b08840,#c4a265);border:2px solid #8b6b3a;border-radius:var(--radius-md);box-shadow:var(--shadow-md),inset 0 1px #ffffff26;color:var(--text-light);text-shadow:0 1px 2px rgba(0,0,0,.3)}.game-hud{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);padding-top:max(var(--spacing-sm),env(safe-area-inset-top));background:#fffcf0d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid rgba(180,150,100,.15);flex-shrink:0;z-index:2}.hud-lives{display:flex;gap:4px}.heart{font-size:22px;transition:opacity .3s ease,transform .3s ease}.heart.lost{opacity:.2;filter:grayscale(1);transform:scale(.8)}.hud-progress{display:flex;align-items:center;gap:8px;flex:1;max-width:200px;margin:0 auto}.progress-bar{flex:1;height:10px;background:#8b6b4526;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));border-radius:5px;transition:width .3s ease}.progress-text{font-size:var(--font-size-sm);font-weight:800;color:var(--text-secondary);white-space:nowrap}.hint-btn{background:linear-gradient(180deg,#f7d355,var(--color-secondary));color:var(--text-primary);font-weight:800;font-size:var(--font-size-md);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);gap:6px;box-shadow:var(--shadow-sm);border-bottom:2px solid var(--color-secondary-dark)}.hint-btn.disabled,.hint-btn:disabled{opacity:.4;pointer-events:none;border-bottom-width:1px}.hint-btn.used{opacity:.5;background:#ccc;border-color:#999}.hint-btn:active{transform:scale(.93) translateY(1px)}.hint-btn-dark{background:#ffffff26;color:#fff;font-weight:800;font-size:var(--font-size-md);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);gap:6px}.hint-btn-dark.disabled{opacity:.3;pointer-events:none}.hint-btn-dark:active{transform:scale(.93)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes starEarn{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.3) rotate(10deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideUp .3s ease}.animate-bounce{animation:bounce .3s ease}.animate-shake{animation:shake .3s ease}.animate-float{animation:float 2s ease-in-out infinite}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-height:500px)and (orientation:landscape){.screen-header,.game-hud{padding:var(--spacing-xs) var(--spacing-sm);min-height:40px}.screen-content{padding:var(--spacing-sm)}}
