:root{--background: #fdfcf9;--text-primary: #4a3f35;--text-secondary: #7a6a5d;--accent-teal: #00a28b;--accent-teal-dark: #007a68;--accent-gold: #c5a66b;--accent-gold-dark: #a18654;--accent-orange: #ff6a13;--destructive: #d92525;--card-bg: #ffffff;--border-color: #e8e2d9;--shadow: 0 4px 12px -2px rgba(74, 63, 53, .1);--ocean-bg: #a1dad2;--wave-color: rgba(255, 255, 255, .4);--top-hud-height: 80px;--bottom-nav-height: 80px;--safe-gap: 1rem;--stage-height: calc(100dvh - var(--top-hud-height) - var(--bottom-nav-height));--h1-clamp: clamp(2.5rem, 6vw, 6rem);--h2-clamp: clamp(1.8rem, 4vw, 4rem);--h3-clamp: clamp(1.2rem, 3vw, 2.5rem);--status-clamp: clamp(.6rem, 1vw, .8rem);--film-strip-bg: var(--accent-teal);--film-strip-text: #f0fdfa;--star-filled-color: #facc15;--star-empty-color: #9ca3af;--perfect-score-glow: #38bdf8}@media(min-width:768px){:root{--top-hud-total: 180px;--bottom-nav-total: 120px}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--background);color:var(--text-primary);line-height:1.6}#app{display:flex;flex-direction:column;align-items:center;padding:0;gap:0;min-height:100vh}.app-header{width:100%;max-width:1400px;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;padding-bottom:.5rem}.partner-banner{display:flex;align-items:center;justify-content:space-around;gap:3rem;flex-wrap:wrap;background:#fff;padding:1.5rem 3rem;border-radius:1rem;border:1px solid var(--border-color);box-shadow:var(--shadow);width:100%}.partner-banner img{height:70px;width:auto;object-fit:contain;transition:transform .3s ease}.partner-banner img:hover{transform:scale(1.1)}.header-text{text-align:left}.app-header h1{font-size:2rem;font-weight:700;color:var(--text-primary)}.app-header p{color:var(--text-secondary);font-size:1rem}.app-body{width:100%;max-width:1400px;display:flex;gap:1.5rem;align-items:flex-start}.main-content{flex-grow:1;display:flex;flex-direction:column;gap:1.5rem;min-width:0}.tabs{width:100%;max-width:1400px;display:flex;gap:.5rem;border-bottom:2px solid var(--border-color)}.tab{padding:.75rem 1.5rem;border:none;background-color:transparent;cursor:pointer;font-size:1.1rem;font-weight:600;color:var(--text-secondary);border-bottom:3px solid transparent;transition:color .2s ease-in-out,border-color .2s ease-in-out}.tab:hover{color:var(--text-primary)}.tab.active{color:var(--accent-teal);border-bottom-color:var(--accent-teal)}.tab-panel{display:none;width:100%;max-width:1400px}.tab-panel.active{display:block;animation:fadeIn .5s ease-in-out}.card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow)}.card-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:1rem}.countdown-card{padding:1rem 1.5rem}.countdown-card .card-title{margin-bottom:.5rem}.countdown-timer{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}.countdown-timer span{font-size:2.5rem;font-weight:700;display:block;line-height:1}.countdown-timer small{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase}.ocean-container{width:100%;height:400px;background-color:var(--ocean-bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,42.4V0Z' fill='%23ffffff' opacity='.15'%3E%3C/path%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 50%;background-size:auto 100%;border-radius:1rem;border:1px solid var(--border-color);box-shadow:var(--shadow);position:relative;overflow:hidden;animation:wave-pan 20s linear infinite}.character{position:absolute;height:auto;animation:bobbing 5s ease-in-out infinite;z-index:10;mix-blend-mode:multiply;object-fit:contain}.mascot-bubble{object-fit:cover;aspect-ratio:1 / 1;mix-blend-mode:multiply}.rubbish{position:absolute;width:30px;height:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6a13'%3E%3Cpath d='M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7a.996.996 0 1 0-1.41 1.41L10.59 12l-4.89 4.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:.9;z-index:5;animation:floating 15s ease-in-out infinite}.divider{display:flex;align-items:center;text-align:center;margin:1rem 0;color:var(--text-secondary);font-size:.8rem;font-weight:600}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid var(--border-color)}.divider:not(:empty):before{margin-right:.5em}.divider:not(:empty):after{margin-left:.5em}.google-button{background:#fff;color:#444;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%}.google-button img{width:20px;height:20px}.controls-section,.camera-section{width:100%}.section-title{font-size:1.5rem;font-weight:600;text-align:center;margin-bottom:1.5rem}.camera-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;width:100%}.stats-strip{display:flex;justify-content:center;gap:1rem;margin:1rem auto 2rem;flex-wrap:wrap;max-width:1200px}.stat-block{background:#fff;padding:1rem;border-radius:.75rem;border:1px solid var(--border-color);box-shadow:var(--shadow);text-align:center;min-width:120px;flex:1;max-width:200px}.stat-block h4{font-size:.7rem;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.5rem;font-weight:700;letter-spacing:.05em}.stat-block .stat-value{font-size:1.75rem;font-weight:800;color:var(--primary-blue)}.stat-value.plastic{color:#3b82f6}.stat-value.recyclables{color:#10b981}.stat-value.landfill{color:#ef4444}.safe-exploring-banner{background:#fffbeb;border:1px solid #fef3c7;color:#92400e;padding:1rem;border-radius:.75rem;margin:0 auto 2rem;display:flex;align-items:center;gap:.75rem;font-weight:500;font-size:.95rem;max-width:1200px;box-shadow:0 1px 2px #0000000d}.safe-exploring-banner .material-icons{color:#f59e0b}.camera-card{padding:1rem;text-align:center;transition:border-color .2s ease-in-out}.camera-card:hover{border-color:var(--accent-gold)}.camera-card h3{font-weight:600;margin-bottom:.5rem}.video-container{width:100%;aspect-ratio:4 / 3;background-color:#f7f5f2;border-radius:.5rem;position:relative;overflow:hidden;margin-bottom:1rem}.video-container video{display:none;width:100%;height:100%;object-fit:cover}.video-container video.active{display:block}.video-container .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.25rem;color:var(--text-secondary)}.video-container .placeholder svg{width:48px;height:48px}.video-container .placeholder .placeholder-error-text{font-size:.8rem;color:var(--destructive);padding:0 .5rem;text-align:center}.video-container .placeholder svg.error{color:var(--destructive)}.flash-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;opacity:0;pointer-events:none;transition:opacity .3s ease-out}.flash-overlay.flash{opacity:.8;transition:opacity .05s ease-in}.help-text{color:var(--text-secondary);font-size:.875rem;text-align:center;margin-top:.5rem}.button-group{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.button{padding:.6rem 1.2rem;border:1px solid var(--border-color);border-radius:.5rem;background-color:#fff;color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.button svg{width:16px;height:16px}.button:hover:not(:disabled){border-color:var(--text-primary);color:var(--text-primary);background-color:var(--background)}.button:disabled{opacity:.6;cursor:not-allowed}.scan-button{background-color:var(--accent-teal);color:#fff;border-color:var(--accent-teal);font-weight:600}.scan-button:hover:not(:disabled){background-color:var(--accent-teal-dark);border-color:var(--accent-teal-dark);color:#fff}.mission-log{text-align:center;padding:.5rem 1rem}.mission-intro-text{color:var(--text-secondary);font-style:italic;margin-bottom:1rem}.last-mission-update{background-color:#fffaf2;border-radius:.75rem;padding:1rem;border:1px solid var(--accent-gold)}.mission-dialogue{color:var(--text-primary);font-weight:500;font-size:1.1rem;margin-bottom:.5rem}.mission-next-item{color:var(--accent-teal);font-weight:600}.project-credit{font-size:.8rem;color:var(--text-secondary);text-align:center;margin-top:1.5rem}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}.scan-button .spinner{width:16px;height:16px}.toast{position:fixed;bottom:20px;left:50%;background-color:var(--accent-teal);color:#fff;padding:1rem 1.5rem;border-radius:.5rem;box-shadow:0 5px 15px #0003;opacity:0;transform:translate(-50%,20px);transition:opacity .3s ease,transform .3s ease;z-index:1000}.toast.show{opacity:1;transform:translate(-50%)}.toast.error{background-color:var(--destructive)}.gallery-sidebar{display:flex;flex-direction:column;width:280px;flex-shrink:0;height:calc(100vh - 120px);max-height:800px;padding:8px 4px;background-color:var(--film-strip-bg);border-radius:12px;overflow:hidden;position:relative;box-shadow:var(--shadow)}.gallery-sidebar:before,.gallery-sidebar:after{content:"";position:absolute;left:0;right:0;height:20px;background-repeat:repeat-x;background-size:40px 20px}.gallery-sidebar:before{top:0;background-image:radial-gradient(circle at 20px -10px,transparent 20px,var(--film-strip-bg) 21px);z-index:2}.gallery-sidebar:after{bottom:0;background-image:radial-gradient(circle at 20px 30px,transparent 20px,var(--film-strip-bg) 21px);z-index:2}.gallery-header{flex-shrink:0;padding:20px 16px 10px;text-align:center}.gallery-title{font-size:1.1rem;font-weight:700;text-transform:uppercase;color:var(--film-strip-text);letter-spacing:.05em}.gallery-count{font-size:1.5rem;font-weight:700;color:#fff}#gallery-placeholder{color:var(--film-strip-text);padding:2rem 1rem;text-align:center}.film-strip-content{margin-top:-10px;margin-bottom:-10px;height:100%;overflow-y:auto;padding:0 8px;scrollbar-width:thin;scrollbar-color:var(--accent-teal-dark) var(--film-strip-bg)}.film-strip-content::-webkit-scrollbar{width:8px}.film-strip-content::-webkit-scrollbar-track{background:var(--film-strip-bg);border-radius:10px}.film-strip-content::-webkit-scrollbar-thumb{background-color:var(--accent-teal-dark);border-radius:10px;border:2px solid var(--film-strip-bg)}.film-strip-item-wrapper{margin-bottom:1rem}.film-strip-item-wrapper .title{margin-top:.25rem;text-align:center;font-size:.75rem;color:var(--film-strip-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}.film-strip-frame{position:relative;display:block;background-color:#ccfbf1;height:120px;border-radius:4px;overflow:hidden;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;cursor:pointer}.film-strip-frame:hover{transform:scale(1.05);z-index:5}.film-strip-frame:hover .description-overlay{opacity:1}.film-strip-frame img{width:100%;height:100%;object-fit:cover;transition:filter .3s ease}.film-strip-frame:hover img{filter:blur(2px) brightness(.7)}.sprockets{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around}.sprockets.left{left:4px}.sprockets.right{right:4px}.sprocket-hole{width:6px;height:8px;background-color:#00000080;border-radius:2px}.description-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#0009;color:#fff;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;opacity:0;transition:opacity .3s ease-in-out;font-size:13px;line-height:1.3}.star-rating-overlay{position:absolute;bottom:4px;left:50%;transform:translate(-50%);background-color:#00000080;border-radius:8px;padding:2px 6px;display:flex;align-items:center;transition:opacity .3s ease}.film-strip-frame:hover .star-rating-overlay{opacity:0}.star{color:var(--star-empty-color);font-size:16px;transition:color .2s;-webkit-user-select:none;user-select:none}.star.filled{color:var(--star-filled-color)}.perfect-score{box-shadow:0 0 15px 3px var(--perfect-score-glow)}.perfect-score-icon{position:absolute;top:4px;right:4px;color:var(--perfect-score-glow);font-size:20px;text-shadow:0 0 8px rgba(56,189,248,.8)}.modal{display:none}.modal:target{display:flex;position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000000bf;align-items:center;justify-content:center;padding:1rem;z-index:2000;animation:fadeIn .3s ease-in-out}.modal-content{background-color:var(--card-bg);border-radius:1rem;box-shadow:0 10px 30px -5px #0000004d;max-width:900px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal-body{display:flex;flex-grow:1;min-height:0}.modal-image{flex-basis:60%;flex-shrink:0}.modal-image img{width:100%;height:100%;object-fit:cover}.modal-details{flex-basis:40%;padding:1.5rem;display:flex;flex-direction:column;overflow-y:auto}.modal-details h3{font-size:1.75rem;font-weight:700;margin-bottom:.5rem;color:var(--text-primary)}.modal-details .star{font-size:2rem}.modal-details .score-text{margin-left:.5rem;font-size:1.25rem;font-weight:600;color:var(--text-secondary)}.modal-details .star-rating{margin-bottom:1rem;display:flex;align-items:center}.modal-details .description{font-size:.95rem;color:var(--text-secondary);margin-bottom:1rem;flex-grow:1}.modal-dialogue{background:#f7f5f2;border-left:4px solid var(--accent-gold);padding:.75rem;border-radius:0 4px 4px 0;font-style:italic;color:var(--text-primary);margin-bottom:1.5rem}.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border-color);text-align:right;flex-shrink:0}.modal-close{text-decoration:none}#setup-screen-container,#lock-screen-container{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#fdfcf9cc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:3000}.auth-form-card{background-color:var(--card-bg);padding:2rem;border-radius:1rem;box-shadow:0 10px 30px -5px #4a3f3533;border:2px solid var(--accent-gold);width:100%;max-width:450px;text-align:center}.auth-logo{width:80px;height:auto;margin:0 auto 1rem}.auth-form-card h2{font-size:1.75rem;margin-bottom:.5rem;color:var(--text-primary)}.auth-form-card p{color:var(--text-secondary);margin-bottom:1.5rem}.auth-form-card form{display:flex;flex-direction:column;gap:1rem}.auth-form-card input{padding:.75rem;border-radius:.5rem;border:1px solid var(--border-color);background-color:var(--background);font-size:1rem;color:var(--text-primary);width:100%;text-align:left}.auth-form-card input:focus{outline:none;border-color:var(--accent-gold);box-shadow:0 0 0 3px #c5a66b40}.combo-inputs{display:flex;justify-content:center;gap:.75rem}.combo-inputs input{flex:0 0 100px;text-align:center}.error-message{color:var(--destructive);font-size:.9rem;margin-top:.5rem}.app-footer-bar{width:100%;padding:1rem 2rem;background-color:var(--background);border-top:1px solid var(--border-color)}.footer-content{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;color:var(--text-secondary);font-size:.8rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s ease-in-out;margin:0 .5rem}.footer-links a:hover{color:var(--accent-teal);text-decoration:underline}.copyright{text-align:right;flex-grow:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes wave-pan{0%{background-position-x:0}to{background-position-x:-120px}}@keyframes bobbing{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}@keyframes floating{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(8deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(15px) rotate(-8deg)}to{transform:translateY(0) rotate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 4s ease-in-out infinite}.animate-fade-in{animation:fadeIn .3s ease-out forwards}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.animate-fade-in-up{animation:fade-in-up .5s cubic-bezier(.25,.46,.45,.94) forwards}@media(max-width:1024px){.app-body{flex-direction:column}.gallery-sidebar{width:100%;height:auto;max-height:400px}#kidsranger-panel #root>div{padding-left:1rem;padding-right:1rem}}@media(max-width:768px){#app{padding:1rem}.app-header h1{font-size:1.5rem}.footer-content{flex-direction:column;justify-content:center;text-align:center}.copyright{text-align:center;margin-top:.5rem}.modal-body{flex-direction:column}.modal-image{flex-basis:auto;height:250px}.modal-details{flex-basis:auto}}