:root{--ink: #16312a;--ink-soft: #33574d;--line: rgba(255, 255, 255, .38);--glass: rgba(12, 43, 36, .38);--card: rgba(255, 255, 255, .84);--card-soft: rgba(255, 255, 255, .76);--accent: #2da86d;--accent-2: #1b7a4c;--warning: #ee9648;--neutral: #4d6861;--danger: #d84b4b;--shadow-lg: 0 24px 48px rgba(8, 26, 21, .3);--shadow-md: 0 10px 26px rgba(16, 46, 37, .26)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;width:100%;min-height:100vh;min-height:100dvh}body{font-family:Outfit,system-ui,sans-serif;color:var(--ink);overflow:hidden;overscroll-behavior:none;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(165deg,#08221c57,#0e3b2f33),url(/assets/background.jpg);background-size:cover;background-position:center;z-index:-2}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 20% 20%,rgba(141,255,191,.2),transparent 42%),radial-gradient(circle at 78% 18%,rgba(162,239,255,.2),transparent 44%);z-index:-1}.app-shell{width:100%;min-height:100vh;min-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:stretch;justify-content:center}.screen{width:min(980px,100%);height:calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));min-height:calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--line);background:var(--glass);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.screen:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/assets/background.jpg);background-size:cover;background-position:center;opacity:.32;z-index:0}.screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#e6fff6cc,#def6ffb3);z-index:0}.screen>*{position:relative;z-index:1}.screen-fade-wrap{width:100%;height:100%;min-height:100%;display:flex;flex-direction:column}.menu,.settings,.scores{padding:clamp(18px,4vw,34px);min-height:100%;display:grid;place-items:center;gap:16px;text-align:center}.menu{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;overflow:hidden;padding:clamp(12px,2.8vw,24px);height:100%;min-height:100%}.menu-main{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:10px;flex:1;min-height:0;padding-block:6px}.menu-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.menu>:not(.menu-particles){position:relative;z-index:1}.menu-particle{position:absolute;border-radius:999px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.82),rgba(194,255,228,.55) 45%,rgba(141,220,194,.08) 74%,transparent 100%);filter:hue-rotate(var(--particle-hue, 0deg)) saturate(1.05) drop-shadow(0 8px 12px rgba(111,200,165,.18));mix-blend-mode:screen}.menu-lang-switch{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;align-self:center;margin:0 auto 6px;border-radius:999px;padding:4px;border:1px solid rgba(255,255,255,.72);background:#ffffffd1;box-shadow:0 6px 12px #0f493629;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.menu-flag-btn{border:1px solid transparent;border-radius:999px;min-width:52px;padding:5px 9px;font:inherit;font-weight:800;color:#1e5c49;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 2px 4px #0f493600;transition:transform .17s ease,filter .17s ease,box-shadow .17s ease,background .17s ease,border-color .17s ease}.menu-flag-btn:hover{filter:brightness(1.02);box-shadow:0 7px 12px #0f493626}.menu-flag-btn:active{transform:scale(.95)}.menu-flag-btn.active{border-color:#2ea46bc7;color:#fff;background:linear-gradient(180deg,#37be7d,#218d59);box-shadow:0 9px 16px #1f7d543d}.menu-flag{font-size:14px;line-height:1}.menu-flag-code{font-size:.68rem;letter-spacing:.02em}.title{margin:0;font-size:clamp(1.9rem,5.2vw,3.15rem);font-weight:800;line-height:1.02;letter-spacing:.01em;color:#0d513b;text-shadow:0 4px 22px rgba(59,167,122,.25)}.subtitle{margin:0;font-size:clamp(.94rem,2.3vw,1.2rem);color:#2b5b4f;max-width:64ch}.title-kids{color:#0f5f45;letter-spacing:.015em}.subtitle-kids{font-weight:600}.logo{width:min(300px,62vw);height:auto;filter:drop-shadow(0 14px 24px rgba(23,79,59,.3))}.btn-group{width:min(360px,100%);display:grid;gap:8px}.feature-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.feature-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:700;color:#155640;background:#ffffffd6;border:1px solid rgba(255,255,255,.68);box-shadow:0 4px 10px #13523c29}.hero-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:.76rem;font-weight:700;color:#0f6246;background:#ffffffdb;border:1px solid rgba(180,239,214,.84);box-shadow:0 8px 14px #13523c2b}.button{border:none;border-radius:16px;padding:14px 16px;font:inherit;font-weight:700;font-size:clamp(.96rem,2.8vw,1.05rem);color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 10px 18px #135e3e47;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}.button.fun-btn{position:relative;overflow:visible;isolation:isolate;transform-origin:center}.button.fun-btn:active{transform:none}.fun-btn-content{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:8px}.fun-btn-glow{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:20px;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 50%,#56e29e9e,#56e29e00);filter:blur(8px);opacity:.28;transition:opacity .16s ease}.button.fun-btn:hover .fun-btn-glow{opacity:.58}.button.fun-btn.secondary .fun-btn-glow{background:radial-gradient(circle at 50% 50%,#6eccff9e,#6eccff00)}.button.fun-btn.warning .fun-btn-glow{background:radial-gradient(circle at 50% 50%,#ffbc699e,#ffbc6900)}.button.fun-btn.neutral .fun-btn-glow{background:radial-gradient(circle at 50% 50%,#b0c5be8c,#b0c5be00)}.button.fun-btn.danger .fun-btn-glow{background:radial-gradient(circle at 50% 50%,#ff88889e,#f880)}.fun-star{position:absolute;z-index:1;pointer-events:none;font-size:12px;line-height:1;opacity:0;color:#ffe98b;text-shadow:0 0 8px rgba(255,198,93,.55)}.fun-star.s1{top:-6px;left:12%}.fun-star.s2{top:-8px;right:16%}.fun-star.s3{bottom:-7px;left:18%}.fun-star.s4{bottom:-9px;right:12%}.button:hover{filter:brightness(1.03)}.button:active{transform:translateY(1px) scale(.98);filter:brightness(.94);box-shadow:0 6px 10px #135e3e3d}.button.has-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}.button.secondary{background:linear-gradient(180deg,#43b3e6,#2f84b8)}.button.warning{background:linear-gradient(180deg,#f1ac54,#dc8430)}.button.neutral{background:linear-gradient(180deg,#6f8a83,#4c6660)}.button.danger{background:linear-gradient(180deg,#e16565,#bf3d3d)}.menu-brand-row{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:auto;padding-bottom:2px}.mavisehir-wrap{grid-column:2;justify-self:center;padding:0;background:transparent;border:none;box-shadow:none}.mavisehir-logo{display:block;width:min(130px,30vw);max-width:100%;height:auto}.dev-badge{grid-column:3;justify-self:end;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 12px;color:#0f5f45;text-decoration:none;font-size:.78rem;font-weight:800;background:#ffffffe6;border:1px solid rgba(255,255,255,.72);box-shadow:0 8px 14px #13523c29;transition:transform .13s ease,box-shadow .13s ease,filter .13s ease}.dev-badge:hover{filter:brightness(.98)}.dev-badge:active{transform:scale(.98);box-shadow:0 4px 8px #13523c1f}@media (min-width: 769px){.mavisehir-logo{width:min(130px,22vw)}}.settings-card,.scores-card{width:min(640px,100%);border:1px solid rgba(255,255,255,.5);border-radius:18px;background:linear-gradient(180deg,#ffffffdb,#f6fffbd6),url(/assets/card_pattern_recycle.png);background-size:cover,240px;background-repeat:no-repeat,repeat;padding:clamp(14px,2.8vw,20px);box-shadow:var(--shadow-md)}.settings-card-fun,.scores-card-fun{background:linear-gradient(180deg,#ffffffe6,#f5fffae6),url(/assets/card_pattern_recycle.png);background-size:cover,240px;background-repeat:no-repeat,repeat}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed rgba(23,71,56,.18)}.settings-row:last-child{border-bottom:none}.row-label{display:inline-flex;align-items:center;gap:7px;font-weight:700}.pill{border:none;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:6px;color:#fff;background:linear-gradient(180deg,#34bc79,#1f8a56)}.pill.off{background:linear-gradient(180deg,#8ca29b,#677e77)}.language-switch{display:inline-flex;gap:6px}.language-pill{border:1px solid rgba(150,206,184,.72);border-radius:999px;min-width:44px;padding:7px 11px;font:inherit;font-weight:800;color:#1f6250;background:#e8fff3eb}.language-pill.active{color:#fff;border-color:#2faa6fcc;background:linear-gradient(180deg,#34bc79,#1f8a56)}.stats-strip{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.settings-reset{margin-top:12px}.reset-progress-btn{width:100%}.stats-chip{border-radius:12px;padding:10px 6px;background:#e4fcefdb;border:1px solid rgba(130,212,171,.42);color:#165d44}.stats-label{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;opacity:.86;margin-bottom:4px}.game{min-height:100%;display:grid;grid-template-rows:auto 1fr;gap:10px;padding:10px}.hud{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}.hud-box{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:14px;border:1px solid rgba(255,255,255,.56);background:#ffffffe6;padding:10px 12px;font-weight:800;font-size:clamp(.92rem,2.5vw,1.06rem);color:#124836;box-shadow:0 6px 15px #1f544033}.hud-box strong{display:inline;margin-top:0;font-size:1.18em;line-height:1}.hud-label{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;opacity:.8}.hud-actions{display:flex;gap:8px}.icon-btn{display:grid;place-items:center;border:none;border-radius:12px;width:44px;height:44px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(180deg,#2ca96c,#1a7b4d);box-shadow:0 8px 14px #185c3d4d}.game-board{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(255,255,255,.55);background:#d3fae97a;min-height:min(66dvh,580px);box-shadow:inset 0 0 0 1px #0e423414,0 12px 22px #11392c2e}.playfield-surface{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#a3ebc96b,#b2e6ff52),url(/assets/background.jpg);background-size:cover;background-position:center;opacity:.64}.board-bins{position:absolute;left:8px;right:8px;bottom:8px;z-index:8}.bin-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.bin{border:1px solid rgba(255,255,255,.58);border-radius:14px;background:#ffffffd6;padding:8px;text-align:center;min-height:112px;box-shadow:0 8px 14px #1241322e;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,filter .14s ease;position:relative}.bin:nth-child(1){background:linear-gradient(180deg,#b4ebffeb,#e2faffe6)}.bin:nth-child(2){background:linear-gradient(180deg,#fff3abf0,#fffcdaeb)}.bin:nth-child(3){background:linear-gradient(180deg,#ffd2aceb,#ffeedde6)}.bin img{width:clamp(56px,12vw,84px);height:auto}.bin-label{margin-top:4px;font-size:clamp(.72rem,1.95vw,.92rem);font-weight:800;color:#1b5a45}.game-board.is-dragging .bin{filter:saturate(1.05)}.bin.active{transform:translateY(-4px) scale(1.03);border-color:#fffffff5;box-shadow:0 0 0 3px #ffffff8c,0 14px 20px #ffffff38}.waste{position:absolute;width:clamp(74px,15vw,116px);border:none;background:transparent;padding:0;touch-action:none;-webkit-user-select:none;user-select:none;transform-origin:center;animation:waste-sway var(--sway-duration, 3.1s) ease-in-out infinite;animation-delay:var(--sway-delay, -.4s)}.waste img{width:100%;aspect-ratio:1 / 1;object-fit:contain;display:block;filter:drop-shadow(0 7px 10px rgba(13,45,35,.25))}.waste-name{margin-top:4px;margin-inline:auto;width:fit-content;max-width:110%;font-size:clamp(.7rem,2.05vw,.86rem);font-weight:700;text-align:center;color:#15503b;background:#ffffffc7;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:2px 8px}.waste.dragging{animation:none;transform:translate(-50%,-50%) scale(1.08) rotate(1.2deg)}@keyframes waste-sway{0%{transform:translate(-50%,-50%) rotate(calc(var(--sway-angle, 3deg) * -1))}50%{transform:translate(-50%,-52%) rotate(var(--sway-angle, 3deg))}to{transform:translate(-50%,-50%) rotate(calc(var(--sway-angle, 3deg) * -1))}}.feedback{position:absolute;top:10px;left:50%;transform:translate(-50%);border-radius:999px;padding:8px 14px;font-weight:800;font-size:clamp(.78rem,2vw,.96rem);color:#fff;background:linear-gradient(180deg,#2fa56e,#1f794f);z-index:60;box-shadow:0 8px 16px #0c342742}.feedback.bad{background:linear-gradient(180deg,#de6767,#bf3f3f)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:120;background:#061712a6;display:grid;place-items:center;padding:14px}.overlay-fun{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{width:min(470px,100%);border-radius:20px;background:#f6fffbf7;border:1px solid rgba(255,255,255,.66);padding:18px;text-align:center;box-shadow:var(--shadow-lg)}.modal-fun{position:relative;overflow:hidden;z-index:2}.modal-record{border-color:#ffd455d6;background:linear-gradient(180deg,#fffbdff5,#ecfff3f2)}.modal-title{margin:0 0 8px}.modal-subtitle{font-size:.98rem;font-weight:600}.result-badge{margin-inline:auto;width:fit-content;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:800;color:#0f6549;background:#e9fff5e0;border:1px solid rgba(164,232,202,.68)}.record-ribbon{position:absolute;top:10px;right:-38px;transform:rotate(24deg);padding:6px 48px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#6a4200;background:linear-gradient(180deg,#ffe68a,#ffc95e);box-shadow:0 4px 12px #56340033}.record-title{color:#0d6749;text-shadow:0 4px 14px rgba(255,214,101,.65)}.result-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.result-stat{border-radius:14px;padding:10px 8px;background:#ffffffdb;border:1px solid rgba(255,255,255,.68)}.stat-label{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;color:#346557;margin-bottom:4px}.stat-value{display:block;font-size:1.35rem;font-weight:800;color:#124d38}.modal h2{margin:0 0 8px;font-size:clamp(1.35rem,4vw,1.95rem);color:#124d38}.modal p{margin:6px 0;color:#2a5f50}.modal-actions{display:grid;gap:10px;margin-top:14px}.pause-audio-controls{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:8px}.pause-audio-btn{border:1px solid rgba(84,197,135,.42);border-radius:12px;width:44px;height:44px;padding:0;background:#c1ffdcf5;color:#156846;font:inherit;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 12px #175e3f29}.pause-audio-btn.off{color:#8a2b2b;background:#ffcdcdf5;border-color:#d34e4e73}.score-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}.score-row{border:1px solid rgba(255,255,255,.56);border-radius:12px;background:#ffffffd1;padding:10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;color:#1a5440}.score-row>*{min-width:0}.score-row.top-score{background:linear-gradient(180deg,#fff6bfeb,#fffee6e0);border-color:#f1ce5b9e}.rank-pill,.date-pill{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-pill{color:#0f5f45}@media (max-width: 768px){body:before,.screen:before,.playfield-surface{background-image:linear-gradient(165deg,#08221c4d,#0e3b2f2e),url(/assets/background_mobile.png);background-position:center;background-size:cover}.screen{border-radius:20px}.menu{padding:12px;gap:8px}.menu-main{gap:8px;justify-content:center;padding-block:2px}.menu-lang-switch{margin-bottom:4px;padding:3px;gap:4px}.menu-flag-btn{min-width:46px;padding:4px 8px}.menu-flag{font-size:13px}.menu-flag-code{font-size:.64rem}.logo{width:min(220px,58vw)}.title{font-size:clamp(1.45rem,7.4vw,2.2rem)}.subtitle{font-size:clamp(.84rem,3.3vw,1rem)}.button{padding:12px 14px}.game-board{min-height:min(64dvh,530px)}.bin{min-height:96px;padding:6px}.stats-strip{grid-template-columns:1fr}.pause-audio-controls{gap:8px}.menu-brand-row{grid-template-columns:1fr;justify-items:center;gap:6px;margin-top:8px}.mavisehir-logo{width:min(110px,36vw)}.mavisehir-wrap,.dev-badge{grid-column:auto;justify-self:center;font-size:.72rem;padding:7px 10px}}@media (max-width: 560px){.hud{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px}.icon-btn{width:38px;height:38px}.hud-box{padding:7px 8px;border-radius:10px;min-width:0}.hud-label{font-size:.68rem;gap:4px}.hud-box strong{font-size:1rem}.game-board{min-height:min(70dvh,560px)}.board-bins{left:6px;right:6px;bottom:6px}.bin-row{gap:6px}}@media (max-height: 760px){.hero-badge{display:none}.menu-main{gap:7px}.logo{width:min(190px,44vw)}.title{font-size:clamp(1.28rem,4.5vw,2rem)}.subtitle{font-size:clamp(.78rem,2vw,.94rem)}.button{padding:10px 12px}}