@import"https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&display=swap";:root{--primary-blue: #3498db;--bright-green: #2ecc71;--sunny-yellow: #f1c40f;--accent-orange: #e67e22;--warning-red: #e74c3c;--neutral-light-gray: #ecf0f1;--neutral-dark-gray: #34495e;--text-color: #2c3e50;--font-family: "Baloo 2", sans-serif,"Taprom", system-ui}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow-y:scroll}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.ui-top-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem;z-index:1000;pointer-events:none}.notification-icon-container,.music-toggle-container{pointer-events:all}.music-toggle-button{background-color:transparent;border:none;padding:10px;cursor:pointer;transition:filter .2s ease,transform .2s ease;background:#0006;border:1px solid rgba(255,255,255,.5);color:#fff;width:40px;height:40px;border-radius:50%}.music-toggle-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:10px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:linear-gradient(145deg,#0000004d,#00000080);color:#fff;cursor:pointer;box-shadow:0 4px 6px #0006;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}.music-toggle-button:hover{filter:brightness(1.3);transform:scale(1.1);box-shadow:0 6px 12px #ffffff4d}.music-toggle-button:active{transform:scale(.95);box-shadow:0 2px 4px #fff3}.settings-modal-content{background:linear-gradient(to bottom right,#e0f7fa,#fce4ec);padding:20px;border-radius:12px;box-shadow:0 8px 20px #0000001a}.settings-section{margin-top:20px;text-align:center}.settings-label{display:block;font-size:1.1rem;font-weight:700;color:#4a148c;margin-bottom:10px}.music-selector{padding:10px 12px;font-size:1rem;border:2px solid #ce93d8;border-radius:8px;background-color:#fff3e0;color:#4a148c;cursor:pointer;transition:all .3s ease}.music-selector:hover{background-color:#ffe0b2;border-color:#ab47bc}body{margin:0;font-family:var(--font-family);background-color:var(--neutral-light-gray);color:var(--text-color);display:flex;justify-content:center;align-items:center;min-height:100vh;text-align:center}.App{width:100%;height:100%;background-color:#fff;border-radius:15px;box-shadow:0 10px 25px #0000001a;padding:20px;box-sizing:border-box;display:flex;flex-direction:column;overflow-y:auto}.screen{width:100%;padding:15px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}h1,h2,h3{color:var(--primary-blue);margin-top:0}h1{font-size:2.5em}h2{font-size:1.8em}h3{font-size:1.4em}.icon{margin-right:8px;font-size:1.2em}.game-button{background-color:#3498db;color:#fff;border:none;width:100%;padding:12px 25px;border-radius:25px;font-size:1em;font-weight:700;cursor:pointer;transition:background-color .2s ease,transform .1s ease;box-shadow:0 4px 6px #32325d1c,0 1px 3px #00000014;display:inline-flex;align-items:center;justify-content:center}.game-button:hover:not(:disabled){background-color:#2980b9;transform:translateY(-2px)}.game-button:active:not(:disabled){transform:translateY(1px)}.game-button:disabled{background-color:#bdc3c7;cursor:not-allowed;opacity:.7}.play-button{background-color:var(--bright-green);font-size:1.5em;padding:15px 40px}.play-button:hover:not(:disabled){background-color:#27ae60}.main-menu-kid-friendly{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:20px;box-sizing:border-box;background:linear-gradient(180deg,#87ceeb,#98fb98);text-align:center}.main-menu-header h1{font-family:Fredoka One,cursive;font-size:clamp(3rem,10vw,5rem);color:#fff;text-shadow:4px 4px 0px #2E8B57;margin:0}.main-menu-header p{font-family:"Baloo 2",cursive;font-size:clamp(1rem,4vw,1.5rem);color:#3cb371;background-color:#ffffff80;padding:.25rem 1rem;border-radius:20px}.ai-buddy-corner{display:flex;flex-direction:column;align-items:center;gap:5px;color:#006400;font-weight:700}.ai-buddy-corner .icon{font-size:5rem}.main-menu-actions{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:350px}.btn-playful{padding:18px 30px;border-radius:50px;border:none;font-family:"Baloo 2",cursive;font-weight:700;font-size:1.5rem;color:#fff;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;text-transform:uppercase}.btn-playful:active{transform:translateY(4px);box-shadow:none}.btn-play{background-color:gold;box-shadow:0 8px #daa520}.btn-how-to-play{background-color:#32cd32;box-shadow:0 8px #228b22}.btn-settings{background-color:#1e90ff;box-shadow:0 8px #1c86ee}.btn-play:hover{filter:brightness(1.1);box-shadow:0 6px #b8860b}.btn-how-to-play:hover{filter:brightness(1.1);box-shadow:0 6px #1e7c1e}.btn-settings:hover{filter:brightness(1.1);box-shadow:0 6px #1874cd}@media (min-width: 768px){.ai-buddy-corner{position:absolute;top:20px;right:20px}}.notification-icon-container{display:none;position:fixed;top:15px;right:15px;z-index:1500}.notification-icon-button{width:44px;height:44px;padding:0;background-color:#ffffffe6;border:1px solid rgba(0,0,0,.1);border-radius:50%;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;justify-content:center}.notification-icon-button .icon{font-size:1.3rem;margin:0}.notification-badge{position:absolute;top:4px;right:4px;width:9px;height:9px;background-color:#e74c3c;border-radius:50%;border:2px solid white}.notification-history-header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-bottom:1px solid #eee;background-color:#f8f9fa;width:100%}.notification-history-header h3{margin:0;font-size:1.2rem}.notification-history-list{padding:1rem;overflow-y:auto;height:100%;width:100%;display:flex;flex-direction:column;gap:.5rem}.notification-history-list .notification{animation:none}@media (max-width: 768px){.notification-area{display:none}.notification-icon-container{display:block}.screen{padding-top:65px}.main-menu-kid-friendly,.forest-mission-screen{padding-top:0}}.ocean-mission-screen{position:relative}.help-button{background-color:#f04}.help-button:hover:not(:disabled){background-color:#7f8c8d}.environment-view{width:100%;height:250px;background-color:var(--primary-blue);border-radius:10px;margin-bottom:15px;position:relative;overflow:hidden;transition:background-color 1s ease,opacity 1s ease;display:flex;justify-content:space-around;align-items:center;font-size:2em}.pollution-item,.clean-item{animation:float 3s ease-in-out infinite alternate}.oil-slick{width:80px;height:30px;background-color:#333;opacity:.5;border-radius:50%}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-10px)}}.ai-helper-mission{display:flex;align-items:center;gap:10px;background-color:var(--neutral-light-gray);padding:10px;border-radius:8px;width:90%;box-shadow:0 2px 4px #0000000d}.ai-avatar{font-size:2em}.dialogue-box{flex-grow:1;text-align:left;background-color:#fff;padding:8px 12px;border-radius:6px;border:1px solid #ddd}.main-ui-dashboard{background-color:#fffc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:15px;border-radius:10px;width:100%;box-sizing:border-box;box-shadow:0 4px 10px #0000001a;display:flex;flex-direction:column;gap:15px}.status-bar{width:100%}.progress-bar-container{width:100%;height:25px;background-color:#e0e0e0;border-radius:12.5px;overflow:hidden;margin-top:5px}.progress-bar-fill{height:100%;background-color:var(--bright-green);border-radius:12.5px 0 0 12.5px;transition:width .5s ease-in-out,background-color .5s ease-in-out;text-align:center;color:#fff;font-weight:700;line-height:25px}.resource-counters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;font-size:1.1em;font-weight:700;margin-bottom:1rem}.resource-counters span{background-color:var(--neutral-light-gray);padding:8px 12px;border-radius:8px}.action-buttons-mission{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:0 1rem}.ocean-footer-buttons{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;margin-top:1.5rem;padding:0 1rem}.back-button-mission{margin-bottom:20px}@media (min-width: 768px){.ocean-footer-buttons{flex-direction:row;justify-content:center;align-items:center;gap:1.5rem;max-width:100%;margin-left:auto;margin-right:auto}}.back-button-mission{margin-top:15px;background-color:var(--accent-orange);padding:.75rem 1.25rem;font-size:1rem;border-radius:8px;color:#fff;border:none;cursor:pointer;transition:background-color .2s ease}.back-button-mission:hover:not(:disabled){background-color:#d35400}@media (min-width: 768px){.action-buttons-mission{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem;margin:0 auto}}.sort-trash-minigame{background-color:#e8f6fd;padding:1.5rem 1rem;box-sizing:border-box;width:100%;max-width:800px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.sort-trash-minigame h2{margin:0;text-align:center}.minigame-timer{font-size:1.2em;font-weight:700;color:var(--primary-blue);background-color:#fff;padding:.5rem 1rem;border-radius:20px;box-shadow:0 2px 5px #0000001a;margin-top:.75rem;margin-bottom:1.5rem}.minigame-item-area{background-color:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 5px #0000001a;max-width:500px;text-align:center;margin-bottom:1.5rem;width:-webkit-fill-available;width:-moz-available;width:stretch}.item-to-sort{font-size:clamp(2rem,8vw,3rem);font-weight:700;margin-top:.5rem;word-wrap:break-word}.sorting-bins{display:flex;flex-direction:column;gap:1rem;max-width:500px;width:100%;margin:0 auto;align-items:center}@media (min-width: 768px){.sorting-bins{flex-direction:row;justify-content:center;align-items:stretch}.sorting-bins .game-button{flex-grow:1;min-width:120px}}.minigame-feedback{font-size:1.2em;font-weight:700;margin-top:1rem;min-height:1.5em;text-align:center}.minigame-feedback.correct{color:green}.minigame-feedback.incorrect{color:red}.sort-trash-minigame>p{margin-top:1rem}.minigame-quit-button{margin-top:1rem;background-color:var(--warning-red)}.minigame-quit-button:hover:not(:disabled){background-color:#c0392b}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.upgrade-panel{background-color:#fff;padding:25px;border-radius:15px;box-shadow:0 10px 30px #0003;width:90%;max-width:500px;max-height:80vh;overflow-y:auto;text-align:left}.upgrade-panel h3{text-align:center;margin-bottom:20px}.upgrade-item{background-color:var(--neutral-light-gray);padding:15px;border-radius:8px;border-left:5px solid var(--sunny-yellow)}.upgrade-item h4{margin-top:0;color:var(--neutral-dark-gray)}.upgrade-item p{margin-bottom:10px}.upgrade-item .game-button{width:100%;margin-top:10px}.upgrade-item.purchased{border-left-color:var(--bright-green);opacity:.8}.upgrade-item.purchased .game-button{background-color:var(--bright-green)}.upgrade-panel>.game-button{display:block;margin:20px auto 0;background-color:var(--accent-orange)}.upgrade-panel>.game-button:hover:not(:disabled){background-color:#d35400}.animated-ai .icon{display:inline-block;animation:subtleBob 1.5s ease-in-out infinite}@keyframes subtleBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;padding:15px;box-sizing:border-box}.modal-content{background-color:#fff;padding:25px;border-radius:15px;box-shadow:0 10px 30px #0003;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;text-align:left}.modal-content h3{text-align:center;margin-top:0;margin-bottom:20px;color:var(--primary-blue)}.modal-content ol{padding-left:20px;margin-bottom:15px}.modal-content li{margin-bottom:8px}.modal-close-button{display:block;margin:20px auto 0;background-color:var(--accent-orange)}.modal-close-button:hover:not(:disabled){background-color:#d35400}.mission-select-screen{display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:1.5rem}.mission-cards-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;width:100%}.mission-card{background-color:#fff;border:1px solid #e0e0e0;border-left:5px solid transparent;border-radius:12px;padding:25px;width:100%;max-width:320px;box-shadow:0 4px 15px #0000000d;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;text-align:left;align-items:center}.mission-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px #0000001a}.mission-card-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.mission-card-header .icon{font-size:2em;margin:0}.mission-card-header h3{margin:0;font-size:1.4em}.mission-card p{flex-grow:1;margin:0 0 20px;color:#555;line-height:1.5}.mission-card-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;color:#3498db;font-weight:700;margin-top:auto}.mission-card.locked{background-color:#f8f9fa;cursor:not-allowed;color:#999;border-left-color:#bdc3c7}.mission-card.locked:hover{transform:none;box-shadow:0 4px 15px #0000000d}.mission-card.locked .mission-card-header .icon,.mission-card.locked h3,.mission-card.locked .mission-card-footer{color:#999}.mission-card.completed{border-left-color:#27ae60;background-color:#f0fdf4}.mission-card.completed .mission-card-header,.mission-card.completed .mission-card-footer{color:#27ae60}.ocean-view{background:linear-gradient(to bottom,var(--primary-blue) 0%,#1abc9c 100%);position:relative}.ocean-view:before{content:"";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,#ffffff4d,#fff0);opacity:var(--pollution-opacity, .5);animation:shimmer 5s linear infinite}@keyframes shimmer{0%{transform:translate(-20%)}to{transform:translate(20%)}}.pollution-item,.clean-item{position:absolute;font-size:1.5em;opacity:var(--pollution-opacity, 1);transition:opacity .5s ease}.clean-item{opacity:calc(1 - var(--pollution-opacity, 0))}.pollution-item.plastic-bottle{top:20%;left:15%}.pollution-item.plastic-bag{top:50%;left:70%}.pollution-item.oil-slick{top:70%;left:30%;width:60px;height:20px;background-color:#222;opacity:calc(var(--pollution-opacity, 1) * .7)!important;border-radius:50%}.pollution-item.tire{top:80%;left:5%;font-size:1.8em}.clean-item.happy-fish{top:30%;left:60%;font-size:2em}.clean-item.coral{top:65%;left:20%;color:coral;font-size:1.8em;transform:rotate(-15deg)}.clean-item.sun-rays{top:10%;left:50%;transform:translate(-50%);font-size:3em;color:var(--sunny-yellow);opacity:calc((1 - var(--pollution-opacity, 0)) * .7)}.ai-helper-mission .ai-avatar .icon{font-size:1.5em;transition:transform .3s ease}.ai-helper-mission .ai-avatar .icon.happyAI{color:var(--bright-green);transform:scale(1.1)}.ai-helper-mission .ai-avatar .icon.concernedAI{color:var(--accent-orange)}.ai-helper-mission .ai-avatar .icon.thinkingAI{animation:thinkingPulse 1s infinite}@keyframes thinkingPulse{0%,to{opacity:1}50%{opacity:.7}}.notification-area{position:fixed;top:20px;right:20px;z-index:2000;overflow-y:scroll;height:100vh;display:flex;flex-direction:column;gap:10px;width:auto;max-width:300px}.notification{background-color:var(--neutral-dark-gray);color:#fff;padding:10px 15px;border-radius:8px;box-shadow:0 4px 10px #0003;display:flex;align-items:center;gap:10px;animation:slideInNotification .3s ease-out}.notification.notification-success{background-color:var(--bright-green)}.notification.notification-error{background-color:var(--warning-red)}.notification.notification-info{background-color:var(--primary-blue)}.notification-dismiss{background:none;border:none;color:#fff;font-size:1.2em;cursor:pointer;margin-left:auto;padding:0 5px}@keyframes slideInNotification{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.minigame-timer{font-size:1.2em;font-weight:700;color:var(--primary-blue);margin-bottom:10px;background-color:#fff;padding:5px 10px;border-radius:5px}[title]{position:relative}.upgrade-panel{max-height:80vh;overflow-y:auto}.upgrade-list{display:flex;flex-direction:column;gap:15px}.forest-mission-screen{width:100%;background:#e8f5e9;color:#1b5e20;padding:0;padding-bottom:2rem}.forest-hud{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:10px 20px;padding:12px;background:#ffffffe6;border-bottom:2px solid #a5d6a7;position:sticky;top:0;z-index:10}.hud-item{display:flex;align-items:center;gap:8px;font-size:1em}.forest-main-content{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem}.forest-map-container{overflow-x:auto;background-color:#0000000d;border-radius:8px;padding:1rem}.forest-map-grid{display:grid;grid-template-columns:repeat(var(--grid-width, 15),40px);gap:3px;padding-bottom:5px}.forest-action-panel{display:flex;flex-direction:column;gap:12px;padding:12px;background:#c8e6c9;border-radius:12px}.forest-action-panel h3{display:none}.forest-action-panel .resource-counters.vertical{width:100%;display:flex;justify-content:space-around;font-size:1em;padding-bottom:12px;border-bottom:1px solid #a5d6a7}.action-button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.planting-menu{position:fixed;bottom:10px;left:10px;right:10px;background:#fff;border:2px solid #81c784;border-radius:12px;padding:15px;box-shadow:0 4px 15px #0003;z-index:20}.planting-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.planting-menu-header h4{margin:0}.close-popup-button{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1}.planting-menu ul{list-style-type:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.planting-menu li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;transition:background-color .2s}.planting-menu li:hover{background-color:#e8f5e9}.planting-menu li.selected{background-color:#a5d6a7;font-weight:700}.planting-menu li.disabled{opacity:.5;cursor:not-allowed;background-color:transparent!important}.planting-menu .tree-visual{font-size:1.8em}.planting-menu .tree-info{flex-grow:1;display:flex;flex-direction:column;text-align:left}.planting-menu .tree-info strong{font-size:1.1em}.planting-menu .tree-info span{font-size:.85em;opacity:.8}.planting-menu .tree-cost{font-size:1.1em;font-weight:700}.training-item-area{margin-top:.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem;width:100%;max-width:100%;box-sizing:border-box}.training-image-placeholder{width:100%;max-width:320px;height:auto;border-radius:10px;object-fit:contain;box-shadow:0 2px 6px #0000001a}.ai-training-screen{padding-top:1rem;padding-bottom:2rem;display:flex;flex-direction:column;align-items:center}@media (min-width: 1024px){.forest-mission-screen{display:grid;grid-template-rows:auto 1fr}.forest-hud{position:static}.forest-main-content{grid-template-columns:240px 1fr;padding:0;gap:0;height:100%;overflow:hidden}.forest-action-panel{border-radius:0;border-top:none;border-right:2px solid #a5d6a7;overflow-y:auto}.action-button-grid{display:flex;flex-direction:column}.forest-map-container{overflow:auto;justify-content:center;padding:1rem}.planting-menu{position:absolute;width:300px;bottom:20px;left:260px;right:auto}}@media (min-width: 768px){.App{padding:20px;border-radius:15px;min-height:90vh;max-height:95vh}h1{font-size:2.5em}h2{font-size:1.8em}h3{font-size:1.4em}.main-menu-screen .planet-background{width:90%}.mission-select-screen .mission-cards-container{flex-direction:row;flex-wrap:wrap;justify-content:center}.mission-card{width:clamp(250px,40%,300px)}.environment-view{height:250px}.ai-helper-mission{flex-direction:row}.dialogue-box{text-align:left}.resource-counters{flex-direction:row;justify-content:space-around;font-size:1.1em}.action-buttons-mission{flex-direction:row;flex-wrap:wrap;justify-content:space-around}.sorting-bins,.classification-buttons{flex-direction:row;column-gap:10px}.sorting-bins .game-button,.classification-buttons .game-button{width:auto;flex-grow:1;max-width:200px}}.tile{width:40px;height:40px;border:1px solid #a5d6a7;border-radius:4px;display:grid;place-items:center;font-size:1.5em;transition:all .2s ease}@media (max-width: 480px){.training-image-placeholder{max-width:90vw}}.custom-select-container{position:relative;width:180px;font-family:Arial,sans-serif;font-size:1rem;margin-top:.5rem}.selected-item{display:flex;align-items:center;padding:.5rem .8rem;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;justify-content:space-between;gap:8px}.flag-icon{width:20px;height:auto;margin-right:5px;vertical-align:middle}.arrow{margin-left:auto;font-size:.7em}.options-list{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;background-color:#fff;list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto;z-index:100;box-shadow:0 2px 5px #0000001a}.option-item{display:flex;align-items:center;padding:.5rem .8rem;cursor:pointer;gap:8px}.option-item:hover{background-color:#f0f0f0}.option-item.selected{background-color:#e0e0e0;font-weight:700}.option-item .flag-icon{margin-right:5px}.game-guide-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.game-guide-content{background-color:#f4f4f9;color:#333;padding:25px 35px;border-radius:12px;max-width:800px;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 5px 25px #0003;border:1px solid #ddd}.game-guide-content h2{margin-top:0;color:#2c3e50;border-bottom:2px solid #3498db;padding-bottom:10px;margin-bottom:20px}.guide-section{margin-bottom:20px}.guide-section h4{margin-bottom:10px;color:#34495e}.guide-section ul,.guide-section ol{padding-left:20px;line-height:1.6}.game-guide-content .close-button{position:absolute;top:15px;right:15px;background:none;border:none;font-size:1.5rem;color:#777;cursor:pointer;padding:5px;line-height:1}.game-guide-content .close-button:hover{color:#333}.icon-text{display:inline-flex;align-items:center;gap:4px;background-color:#e9e9f2;padding:2px 6px;border-radius:4px;font-weight:500;white-space:nowrap}.panel-container{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4facfe,#00f2fe);padding:2rem;overflow-y:auto}.city-panel{width:100%;max-width:1000px;background-color:#ffffffe6;border-radius:2rem;padding:2rem;box-shadow:0 10px 30px #0003;border:4px solid white;animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.panel-title{text-align:center;font-size:2.5rem;color:#0b4f6c;margin-bottom:1.5rem;text-shadow:2px 2px 5px rgba(0,0,0,.1)}.panel-body{display:flex;gap:2rem;flex-direction:column}@media (min-width: 768px){.panel-body{flex-direction:row}}.left-panel,.right-panel{width:100%}@media (min-width: 768px){.left-panel{flex:.4}.right-panel{flex:.6}}.city-map-card,.health-report-card{background:#f0f8ff;border-radius:1rem;padding:1rem;box-shadow:inset 0 2px 4px #0000000f}.city-map-card h3,.health-report-card h3{margin-top:0;color:#0b4f6c;text-align:center}.city-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.district-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:1rem;border-radius:1rem;transition:transform .2s ease-in-out}.district-tile:hover{transform:scale(1.05)}.district-name{font-weight:700;font-size:1.1rem}.district-status{font-size:.8rem;opacity:.9;background-color:#16161626;padding:.1rem .4rem;border-radius:5px;color:#fff}.aqi-green{background-color:#2ecc71}.aqi-yellow{background-color:#f1c40f}.aqi-red{background-color:#e74c3c}.aqi-orange{background-color:#ff7300}.report-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #e0e0e0}.report-item:last-child{border-bottom:none}.report-value{font-weight:700;color:#2c3e50}.resource-counters.horizontal{display:flex;justify-content:space-around;background:#eaf8ff;border-radius:.75rem;margin-top:1.5rem;font-weight:700}.resource-counters.horizontal span{flex:1;text-align:center}.decision-list{flex-grow:1;overflow-y:auto;max-height:400px;padding-right:1rem}.decision-card{display:flex;flex-direction:column;background:#fff;border-radius:1rem;margin-bottom:1rem;padding:1rem;box-shadow:0 4px 15px #0000001a;gap:1rem;animation:slideInUp .5s ease-out;transition:box-shadow .2s}@media (min-width: 768px){.decision-card{flex-direction:row;align-items:center}}.decision-card:hover{box-shadow:0 6px 20px #00000026}.decision-card.disabled{opacity:.6;background-color:#f8f9fa}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.decision-icon{font-size:3rem;padding:1rem;background-color:#eaf8ff;border-radius:50%}.decision-content{flex-grow:1}.decision-content h4{margin:0 0 .25rem;font-size:1.25rem;color:#0b4f6c}.decision-content p{margin:0;color:#555}.decision-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem;flex-wrap:wrap}.cost{font-weight:700;color:#e67e22}.impact-hint span{font-size:1.2rem;margin-left:.5rem;padding:.2rem;border-radius:4px}.impact-good{background-color:#d4edda}.impact-bad{background-color:#f8d7da}.approve-button,.back-button{padding:1rem 1.5rem;border-radius:50px;border:none;font-family:"Baloo 2",cursive;font-weight:700;font-size:1.2rem;cursor:pointer;transition:all .2s ease;text-align:center}.approve-button{background-color:#2ecc71;color:#fff;box-shadow:0 4px #27ae60}.approve-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #27ae60}.approve-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #27ae60}.approve-button:disabled{background-color:#bdc3c7;box-shadow:0 4px #95a5a6;cursor:not-allowed}.back-button{margin-top:1.5rem;align-self:center;background-color:#3498db;color:#fff;box-shadow:0 4px #2980b9}.back-button:hover{transform:translateY(-2px);box-shadow:0 6px #2980b9}.no-decisions{text-align:center;padding:3rem;color:#7f8c8d}.city-action-buttons{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem}@media (min-width: 768px){.city-action-buttons{flex-direction:row;justify-content:center}}.decision-card.recommended-by-ai{box-shadow:0 0 15px 5px #00f2fe;border:2px solid #4facfe;position:relative;overflow:hidden}.ai-recommend-banner{position:absolute;top:0;left:0;background-color:#4facfe;color:#fff;padding:.2rem 1.2rem;font-size:.75rem;font-weight:700;transform:translate(-25%) translateY(15px) rotate(-45deg);transform-origin:center;box-shadow:0 0 10px #0000004d}.cost.discounted{color:#27ae60}.original-cost{text-decoration:line-through;color:#e74c3c;font-size:.8em;margin-right:.25rem;opacity:.8}.tile-diseased{background-color:#9b59b6;border-color:#8e44ad}.tile-fire_risk{background-color:#e67e22;border-color:#d35400}.proposal-icon{font-size:2rem}@media (max-width: 768px){.proposal-icon{font-size:3rem}}.game-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background-color:#3498db;color:#fff;font-weight:700;font-family:"Baloo 2",cursive;font-size:1rem;padding:.75rem 1.5rem;border-radius:999px;border:none;cursor:pointer;box-shadow:0 4px #2980b9;transition:transform .1s ease,box-shadow .1s ease;min-width:100px;max-width:250px;text-align:center;white-space:nowrap}.classification-buttons{column-gap:20px;display:flex}.game-button .icon{display:flex;align-items:center;justify-content:center;font-size:1.25rem;width:24px;height:24px}.tutorial-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000b3;z-index:998;pointer-events:none}.tutorial-highlight{position:relative;z-index:999;background-color:#588fff;border-radius:8px;box-shadow:0 0 15px 5px #00d9ff,0 0 5px 2px #fff;transition:all .3s ease-in-out;pointer-events:auto}.tutorial-dialogue{position:fixed;background-color:#282c34;color:#fff;border:2px solid #00d9ff;border-radius:12px;padding:20px;box-shadow:0 5px 20px #00000080;z-index:1000;max-width:350px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:15px;transition:top .3s ease,left .3s ease;pointer-events:auto}.tutorial-close-button{position:absolute;top:8px;right:8px;z-index:10;background-color:transparent!important;border:none!important;color:#f55!important;padding:0!important;width:36px;height:36px;min-width:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:1.2em;cursor:pointer;transition:color .2s,background-color .2s}.tutorial-close-button:hover{color:#fff!important;background-color:#f55!important}.tutorial-dialogue p{margin:0;font-size:1.1em;line-height:1.5}.tutorial-dialogue strong{color:#61dafb}.tutorial-dialogue .ai-avatar-small{font-size:2.5em;margin-bottom:10px}