:root{--orange: #f0682f;--orange-dark: #c8501f;--green: #7ec529;--green-dark: #5fa015;--board: #1f7ce0;--board-dark: #1560b4;--hole: #cfd6dd;--hole-shadow: #9aa6b2;--ink: #2b3440}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{font-family:Fredoka,system-ui,sans-serif;color:var(--ink);min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px;background-color:#aab4bf;background-image:repeating-linear-gradient(135deg,#b4bdc7 0,#b4bdc7 14px,#a6b0bb 14px,#a6b0bb 28px)}html[lang=ar] body{font-family:"Baloo Bhaijaan 2",Fredoka,system-ui,sans-serif}#root{display:contents}.wrap{width:100%;max-width:520px}.topbar{display:flex;justify-content:flex-end;margin-bottom:10px}.lang-toggle{background:#ffffffeb;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:15px;color:var(--ink);padding:8px 16px;border-radius:14px;box-shadow:0 4px #0000002e}.lang-toggle:active{transform:translateY(3px);box-shadow:0 1px #0000002e}.title{text-align:center;font-weight:700;letter-spacing:1px;font-size:clamp(40px,13vw,68px);line-height:1;margin:0 0 18px;-webkit-text-stroke:2px #fff;text-shadow:0 4px 0 rgba(0,0,0,.18);direction:ltr}.c1{color:var(--orange)}.c2{color:var(--green)}.c3{color:var(--board)}.card{background:#ffffffeb;border-radius:26px;padding:26px 22px 30px;box-shadow:0 14px 40px #00000040}.sub{text-align:center;font-weight:600;color:#5a6675;margin:0 0 20px;font-size:18px}.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:20px;color:#fff;padding:16px;border-radius:18px;margin-bottom:14px;box-shadow:0 5px #00000038;transition:transform .08s,box-shadow .08s}.btn:active{transform:translateY(4px);box-shadow:0 1px #00000038}.btn-orange{background:linear-gradient(180deg,#ff7d44,var(--orange))}.btn-green{background:linear-gradient(180deg,#92d83f,var(--green))}.btn-blue{background:linear-gradient(180deg,#3a93ef,var(--board))}.btn-grey{background:linear-gradient(180deg,#8b97a4,#6c7884)}.hidden{display:none!important}.levels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:6px 0 4px}.levels .btn{font-size:17px;padding:14px 6px;margin:0}.back-link{display:block;text-align:center;margin-top:8px;color:#5a6675;background:none;border:none;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;width:100%}.status{display:flex;align-items:center;justify-content:center;gap:12px;background:#ffffffeb;border-radius:18px;padding:12px 16px;margin-bottom:14px;font-size:21px;font-weight:600;min-height:58px;text-align:center;box-shadow:0 8px 22px #0000002e}.dot{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:inset 0 -3px #00000040,inset 0 4px 5px #ffffff8c}.dot.o{background:radial-gradient(circle at 35% 30%,#ff9b6a,var(--orange))}.dot.g{background:radial-gradient(circle at 35% 30%,#aee36a,var(--green))}.board{background:linear-gradient(180deg,var(--board),var(--board-dark));border-radius:20px;padding:12px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 14px 36px #00000052,inset 0 3px #ffffff40;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;touch-action:manipulation;direction:ltr}.col{display:flex;flex-direction:column;gap:8px;cursor:pointer;border-radius:12px;padding:2px 0 0;transition:background .12s;border:0;background:transparent;color:inherit;font:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.col:not(.dead):hover{background:#ffffff29}.col.dead{cursor:not-allowed}.cell{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 50% 42%,var(--hole-shadow),var(--hole));box-shadow:inset 0 4px 7px #0006}.disc{position:absolute;top:6%;right:6%;bottom:6%;left:6%;border-radius:50%;box-shadow:inset 0 -5px #00000047,inset 0 5px 6px #ffffff80}.disc.o{background:radial-gradient(circle at 35% 30%,#ff9b6a,var(--orange) 70%,var(--orange-dark))}.disc.g{background:radial-gradient(circle at 35% 30%,#aee36a,var(--green) 70%,var(--green-dark))}.disc.drop{animation:drop var(--dur, .5s) cubic-bezier(.34,1.5,.55,1) both}@keyframes drop{0%{transform:translateY(var(--fall, -560%))}to{transform:translateY(0)}}.disc.win{animation:win .7s ease-in-out infinite}@keyframes win{0%,to{transform:scale(1)}50%{transform:scale(.78);filter:brightness(1.35)}}.actions{display:flex;gap:12px;margin-top:16px}.actions .btn{margin:0;font-size:18px}.think{font-size:16px;color:#5a6675;font-weight:600}
