/* محيبس الغابة — own look. 🎨 كارتون (default) = sunny cartoon forest, thick outlines. 🎯 عادي = forest at night (moon, fireflies). */
:root{--bg:#0b1d14;--bg2:#163a27;--ink:#eefbe9;--muted:#9fc7ac;--card:#10281c;--line:#24503a;--hot:#2f9e44;--gold:#ffc83d;--gold2:#b8860b;--field:#0a1a12;--paper:#14301f;color-scheme:dark;font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;color:var(--ink)}
body{min-height:100vh;user-select:none;background:radial-gradient(120% 80% at 50% 0,var(--bg2),var(--bg) 70%) fixed,var(--bg)}
.page{position:relative;width:min(100%,560px);margin:auto;padding:max(10px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:17px;cursor:pointer}
.sinan-credit{margin:18px auto 0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:1.5px;font-weight:800}
.sinan-credit b{color:var(--gold);font-size:14px;letter-spacing:2px}
.theme-switch{display:flex;width:max-content;margin:0 auto 14px;padding:4px;gap:4px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.theme-switch button{border:0;border-radius:999px;padding:8px 16px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:800;cursor:pointer}
.theme-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#5fd27a,var(--hot));color:#fff}

.hero{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border:1px solid #2f9e4466;border-radius:22px;background:linear-gradient(135deg,#1e5a35,#0f2a1c);box-shadow:0 12px 28px #0007}
.hero h1{margin:0;font-size:31px;line-height:1.1;color:#fff;text-shadow:0 2px 0 #0008}
.hero .hero-turn{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 0;color:var(--muted);font-size:16px;font-weight:800}
.hero-ring{flex:none;display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,#fff6c9,#ffd76a 55%,#e8a400);box-shadow:0 0 0 4px #fff4,0 8px 18px #0006;animation:bob 2.4s ease-in-out infinite}
.hero-ring svg{width:54px;height:54px}
@keyframes bob{50%{transform:translateY(-5px) rotate(-6deg)}}
.hero-name{display:inline-block;max-width:180px;overflow:hidden;padding:3px 13px;border:0;border-radius:999px;background:#ffffff1a;color:#fff;font:inherit;font-size:16px;line-height:1.5;font-weight:800;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.hero-name.empty{outline:2px dashed currentColor;outline-offset:-2px}
.hero-name.set{background:var(--hot);animation:hn 2.4s ease-in-out infinite}
.hero-name.go{animation:hn .5s ease 2}
@keyframes hn{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.06)}75%{transform:rotate(4deg) scale(1.06)}}

.card{padding:14px;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:0 14px 30px #0006}
.card[hidden],[hidden]{display:none!important}
.sec-title{margin:2px 0 8px;font-size:21px;text-align:center}
.add-form{display:flex;gap:8px;margin-bottom:12px}
.add-form input{flex:1;min-width:0;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink);font:inherit;font-size:17px;user-select:text}
.add-form input:focus{outline:2px solid var(--hot);outline-offset:1px}
.add-form button{flex:none;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(180deg,#5fd27a,var(--hot));color:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer}
.players{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow:auto}
.pl{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:17px;font-weight:800}
.pl.new{animation:pop .35s ease}
.pl .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:13px}
.pl .del{width:26px;height:26px;border:0;border-radius:50%;background:#ffffff14;color:#ff8a8a;font-size:17px;cursor:pointer}
.empty{width:100%;padding:18px;text-align:center;color:var(--muted);font-size:15px}
.hearts-pick{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:14px 2px 0;font-weight:800;color:var(--muted)}
.pick{display:flex;gap:6px}
.pick button{min-width:40px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--field);color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.pick button[aria-pressed="true"]{background:linear-gradient(180deg,#ff8a8a,#e03131);color:#fff;border-color:transparent}
.status{min-height:20px;margin:10px 0;text-align:center;color:var(--muted);font-size:15px;font-weight:700}
.btn{display:block;width:100%;border:0;font:inherit;cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:disabled{opacity:.5;cursor:default}
.btn-main{padding:15px;border-radius:18px;background:linear-gradient(180deg,#ffd76a,var(--gold));color:#3a2200;font-size:22px;font-weight:800;box-shadow:0 6px 0 var(--gold2),0 12px 24px #0006}
.btn-main:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--gold2)}
.btn-ghost{margin-top:10px;padding:12px;border-radius:16px;background:transparent;border:1px solid var(--line);color:var(--ink);font-size:16px;font-weight:800}

.turn-bar{text-align:center;margin-bottom:8px}
.turn-bar small{color:var(--muted);font-weight:800}
.turn-bar h2{margin:0;font-size:28px;color:var(--pc,#fff);text-shadow:0 2px 0 #0006}
.hearts{font-size:18px;letter-spacing:2px;min-height:24px}

/* ---------- the forest scene (always left→right so the hiding places stay put) ---------- */
.scene{position:relative;direction:ltr;height:clamp(300px,86vw,400px);overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#0e1f3d 0,#16335a 55%,#1b3d2a 56%);box-shadow:inset 0 0 0 1px #ffffff14}
.sky{position:absolute;inset:0}
.sun{position:absolute;right:9%;top:7%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff,#e8eefc 60%,#b8c6e6);box-shadow:0 0 30px #fff6}
.cloud{position:absolute;height:22px;border-radius:30px;background:#ffffff22;animation:drift 26s linear infinite}
.cloud.c1{top:12%;left:-30%;width:90px}.cloud.c2{top:22%;left:-40%;width:60px;animation-delay:-12s;animation-duration:34s}
@keyframes drift{to{transform:translateX(160vw)}}
.hill{position:absolute;left:-10%;right:-10%;bottom:34%;height:30%;border-radius:50% 50% 0 0;background:#1d4a30}
.grass{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,#22593a,#163f29)}
.tree{position:absolute;left:2%;bottom:30%;width:26%;height:46%;z-index:4}
.tree .trunk{position:absolute;left:40%;bottom:0;width:20%;height:46%;border-radius:6px;background:linear-gradient(90deg,#5a3418,#7a4a22)}
.tree .crown{position:absolute;left:0;right:0;top:0;height:70%;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,#3fa34d,#1f6b2f);box-shadow:inset -8px -10px 0 #0002}
.pond{position:absolute;left:36%;bottom:31%;width:30%;height:13%;z-index:2;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#5bc0eb,#1c6ea4);box-shadow:inset 0 -6px 0 #0003}
.pond .ripple{position:absolute;inset:25%;border-radius:50%;border:2px solid #ffffff55;animation:ripple 2.6s ease-out infinite}
.pond.splash{animation:splash .7s ease}
@keyframes ripple{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
@keyframes splash{30%{transform:scaleY(1.5) translateY(-6%);box-shadow:0 -14px 0 -4px #9fe2ff88,inset 0 -6px 0 #0003}}
.rock{position:absolute;right:3%;bottom:30%;width:24%;height:22%;z-index:4;border-radius:48% 52% 30% 30%/60% 60% 30% 30%;background:radial-gradient(circle at 35% 30%,#a5a5b5,#5e5e6e);box-shadow:inset -8px -8px 0 #0002}

.animal{position:absolute;bottom:2%;width:31%;z-index:6;transition:transform .7s cubic-bezier(.4,1.3,.5,1),opacity .35s}
.animal.bear{left:2%;color:#a8683a}.animal.croc{left:34.5%;color:#46a856}.animal.lion{left:67%;color:#f2a93b}
.animal .body{display:block;width:100%;aspect-ratio:120/130;filter:drop-shadow(0 6px 4px #0005)}
.animal{animation:idle 2.6s ease-in-out infinite}
.animal.croc{animation-delay:-.9s}.animal.lion{animation-delay:-1.7s}
@keyframes idle{50%{translate:0 -4px}}
.animal.away{animation:none;z-index:3}
.animal.away .hand{opacity:0}
.animal.behind{opacity:0}
.animal.dive{opacity:0;transform-origin:50% 100%}
.hand{position:absolute;bottom:-2%;width:40%;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;color:inherit;transition:transform .2s,opacity .3s;filter:drop-shadow(0 4px 2px #0006)}
.hand.l{left:-6%}.hand.r{right:-6%}
.hand svg{width:100%;height:100%}
.hand:not(:disabled):hover,.hand:not(:disabled):active{transform:scale(1.08)}
.hand:not(:disabled){animation:ready 1.2s ease-in-out infinite}
@keyframes ready{50%{transform:scale(1.07) rotate(-4deg)}}
.hand.open{animation:none;transform:scale(1.12)}
.hand.empty:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#ff4d4d;font-size:30px;font-weight:900;text-shadow:0 2px 0 #000}
.hand.found,.hand.reveal{filter:drop-shadow(0 0 10px #ffd76a) drop-shadow(0 0 4px #fff)}
.hand .gem{position:absolute;left:12%;top:-10%;width:76%;height:76%;animation:gem .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes gem{from{transform:scale(0) rotate(-40deg)}}
.fly-ring{position:absolute;z-index:9;width:44px;height:44px;transition:left .24s ease,top .24s cubic-bezier(.3,-.8,.6,1.4);filter:drop-shadow(0 0 8px #ffd76a)}
.fly-ring svg{width:100%;height:100%}
.scene-msg{position:absolute;left:6%;right:6%;top:36%;z-index:10;padding:12px;border-radius:16px;text-align:center;font-size:20px;font-weight:800;color:#fff;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.scene-msg.ok{background:#2b8a3ee6}.scene-msg.bad{background:#c92a2ae6}
@keyframes pop{from{transform:scale(.7);opacity:0}}

.hint{min-height:26px;margin:12px 0 6px;text-align:center;font-weight:800;font-size:16px}
.tries{display:flex;justify-content:center;gap:8px;min-height:30px;font-size:24px}
.tries i{font-style:normal}.tries i.used{opacity:.25;filter:grayscale(1)}
.tools{display:flex;gap:8px;margin-top:12px}
.tools button{flex:1;padding:10px 4px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.board-title{margin:18px 4px 8px;font-size:19px}
.board{display:grid;gap:6px}
.br{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-weight:800}
.br.now{outline:2px solid var(--gold)}
.br.out{opacity:.45}
.br .dot,.pr .dot{flex:none;width:12px;height:12px;border-radius:50%}
.br .bn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br .bh{letter-spacing:1px}

.overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#000a;backdrop-filter:blur(3px)}
.modal{position:relative;width:min(100%,420px);max-height:90vh;overflow:auto;padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--card);text-align:center;box-shadow:0 20px 50px #000a}
.modal h2{margin:4px 0 8px}
.modal ol{text-align:right;padding-right:20px;line-height:1.7;font-weight:700}
.modal p{color:var(--muted);font-weight:700}
.plist{display:grid;gap:6px;margin:6px 0;max-height:46vh;overflow:auto}
.pr{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);font-weight:800}
.pr.out{opacity:.55}
.pr .nm{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .hc{display:flex;align-items:center;gap:6px}
.pr .hc button{width:30px;height:30px;border:0;border-radius:50%;background:#ffffff18;color:var(--ink);font:inherit;font-size:18px;font-weight:800;cursor:pointer}
.pr .hc b{min-width:22px;color:#ff6b6b}
.pr .del{border:0;background:none;font-size:18px;cursor:pointer}
.win{overflow:hidden}
.win-ring{width:110px;height:110px;margin:10px auto 4px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#fff6c9,#ffd76a 60%,#e8a400);box-shadow:0 0 40px #ffd76a99;animation:bob 2s ease-in-out infinite}
.win-ring svg{width:80px;height:80px}
.win small{color:var(--muted);font-weight:800}
.win h2{margin:0 0 10px;font-size:30px}
.podium{display:grid;gap:6px;margin-bottom:14px}
.pod{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:14px;background:var(--paper);font-weight:800}
.pod b{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#confetti{position:absolute;inset:0;pointer-events:none}
#confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;background:var(--c);animation:fall var(--d) linear infinite var(--delay)}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
/* 🌙 night: fireflies */
body:not(.kids) .scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(3px 3px at 20% 60%,#fff59d,transparent 60%),radial-gradient(3px 3px at 70% 55%,#fff59d,transparent 60%),radial-gradient(2px 2px at 45% 66%,#fff59d,transparent 60%),radial-gradient(2px 2px at 85% 62%,#fff59d,transparent 60%);animation:fire 3s ease-in-out infinite alternate}
@keyframes fire{to{opacity:.3;transform:translateY(-8px)}}

/* 🎨 كارتون (default): sunny forest, thick ink outlines */
body.kids{--bg:#d8f5c1;--ink:#1f3a14;--muted:#4f6e3c;--card:#fff;--line:#1f3a14;--paper:#f3fbe9;--field:#fff;color-scheme:light;background:radial-gradient(circle at 15% 8%,#fff 0 60px,transparent 61px),linear-gradient(180deg,#a8e6ff,#d8f5c1 60%) fixed}
.kids .icon,.kids .theme-switch{border:3px solid var(--line);background:#fff;box-shadow:0 3px 0 var(--line)}
.kids .theme-switch button{color:var(--muted)}
.kids .hero{border:3px solid var(--line);background:linear-gradient(135deg,#69db7c,#2f9e44 60%,#2b8a3e);box-shadow:0 6px 0 var(--line)}
.kids .hero h1{text-shadow:0 3px 0 var(--line)}
.kids .hero .hero-turn{color:#fff}
.kids .hero-name{background:#ffffff40}.kids .hero-name.set{background:var(--line)}
.kids .hero-name.empty{background:#fff8;color:#1f3a14}
.kids .hero-ring{box-shadow:0 0 0 3px var(--line),0 6px 0 var(--line)}
.kids .card{border:3px solid var(--line);box-shadow:0 7px 0 var(--line)}
.kids .add-form input{border:3px solid var(--line);background:#fff}
.kids .add-form button{border:3px solid var(--line);box-shadow:0 4px 0 var(--line)}
.kids .pl,.kids .pick button{border:2px solid var(--line);background:#fff}
.kids .btn-main{border:3px solid var(--line);box-shadow:0 6px 0 var(--line)}
.kids .btn-main:active:not(:disabled){box-shadow:0 2px 0 var(--line)}
.kids .btn-ghost{border:3px solid var(--line);background:#fff}
.kids .scene{border:3px solid var(--line);box-shadow:0 6px 0 var(--line);background:linear-gradient(180deg,#7fd3ff 0,#c9efff 55%,#8bd46e 56%)}
.kids .sun{background:radial-gradient(circle at 40% 40%,#fff9c4,#ffd43b 60%,#fab005);box-shadow:0 0 30px #ffe066}
.kids .cloud{background:#fff;box-shadow:inset 0 -4px 0 #d0ebff}
.kids .hill{background:#69c95a}
.kids .grass{background:linear-gradient(180deg,#5fbf4f,#3f9e35)}
.kids .tree .trunk{border:3px solid var(--line)}
.kids .tree .crown{background:radial-gradient(circle at 35% 30%,#69db7c,#2f9e44);border:3px solid var(--line)}
.kids .pond{border:3px solid var(--line);background:radial-gradient(ellipse at 50% 40%,#74c0fc,#1c7ed6)}
.kids .rock{border:3px solid var(--line);background:radial-gradient(circle at 35% 30%,#ced4da,#868e96)}
.kids .tools button{border:3px solid var(--line);background:#fff;box-shadow:0 3px 0 var(--line)}
.kids .br{border:2px solid var(--line);background:#fff}
.kids .modal{border:3px solid var(--line);background:#fff;box-shadow:0 8px 0 var(--line)}
.kids .pr{border:2px solid var(--line);background:#fff}
.kids .pr .hc button{background:#e9f7df}
.kids .pod{background:#f3fbe9;border:2px solid var(--line)}
.kids .turn-bar h2{-webkit-text-stroke:1px var(--line);text-shadow:0 2px 0 #fff}
.kids .sinan-credit b{color:var(--hot)}

/* old huddle/smoke (unused since the ring is passed behind the tree/pond/rock) */
.animal.huddle.bear{transform:translateX(38%) rotate(6deg)}.animal.huddle.croc{transform:scale(1.04)}.animal.huddle.lion{transform:translateX(-38%) rotate(-6deg)}
.smoke{position:absolute;left:8%;right:8%;bottom:6%;height:62%;z-index:8;pointer-events:none;opacity:0}
.smoke i{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e9eef5 60%,#cfd8e3);box-shadow:inset -6px -8px 0 #0001}
.smoke i:nth-child(1){left:2%;bottom:6%;width:34%;aspect-ratio:1}.smoke i:nth-child(2){left:24%;bottom:22%;width:40%;aspect-ratio:1}
.smoke i:nth-child(3){left:52%;bottom:4%;width:38%;aspect-ratio:1}.smoke i:nth-child(4){left:70%;bottom:26%;width:30%;aspect-ratio:1}
.smoke i:nth-child(5){left:36%;bottom:-4%;width:32%;aspect-ratio:1}
.smoke.puff{animation:puff 1.5s ease forwards}
@keyframes puff{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.05)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}
.fly-ring.poof{transition:transform .5s,opacity .5s;transform:scale(.2) translateY(120px);opacity:0}

/* v3: Fluent 3D art (owner: «اكثر حقيقية») */
.animal .body{object-fit:contain;filter:drop-shadow(0 10px 8px #0006)}
.animal.bear .body,.animal.lion .body{transform:translateY(4%)}
.animal.croc .body{transform:scale(1.06)}
.hand img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.animal.bear .hand img{filter:sepia(.9) saturate(1.3) hue-rotate(-18deg) brightness(.72)}
.animal.croc .hand img{filter:hue-rotate(58deg) saturate(1.15) brightness(.92)}
.animal.lion .hand img{filter:saturate(1.2) hue-rotate(-8deg)}
.hand .gem{object-fit:contain}
.tree{background:none}.tree img,.rock img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 6px #0005)}
.tree{left:0;width:30%;height:56%}.rock{background:none!important;border:0!important;box-shadow:none!important;width:26%;height:30%;bottom:28%}
.cloud{height:auto;background:none!important;box-shadow:none!important;border-radius:0}
.cloud.c1{width:90px}.cloud.c2{width:64px}
.hero-ring img,.win-ring img,.fly-ring img{width:78%;height:78%;object-fit:contain}
.fly-ring img{width:100%;height:100%}
/* the ring is thrown between the hiding places, then swapped out of sight */
.fly-ring.pass{transition:left .36s cubic-bezier(.4,0,.6,1),top .36s cubic-bezier(.3,-.9,.6,1.3),opacity .3s,transform .3s}
.fly-ring.gone{opacity:0;transform:scale(.5)}
.tree.rustle,.rock.rustle{animation:rustle .4s ease}
@keyframes rustle{25%{transform:rotate(-5deg) translateX(-3%)}60%{transform:rotate(4deg) translateX(2%)}}
.tree,.rock{transform-origin:50% 100%}
.fly-ring.gone{z-index:3}

/* v6 (owner 2026-10-28 «تصميم احترافي»): painted forest, own animals with fists drawn on them, each animal's own open paw */
.scene{height:clamp(330px,98vw,440px);background:#2b6a35}
.bgart{position:absolute;inset:0;background:url(/assets/forest/v2/bg_day.webp?v=1) 50% 38%/cover no-repeat}
body:not(.kids) .bgart{background-image:url(/assets/forest/v2/bg_night.webp?v=1)}
.scene:before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 60%,#0004)}
.sky,.hill,.grass{display:none}
.tree{left:-2%;bottom:33%;width:36%;height:auto;z-index:4}
.tree img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 8px #0004)}
.pond{left:33%;bottom:36%;width:36%;height:auto;z-index:2;border:0!important;border-radius:0;background:none!important;box-shadow:none!important}
.pond img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px #0003)}
.pond .ripple{inset:32% 30% 30% 30%}
.pond.splash{animation:splash2 .7s ease}
@keyframes splash2{30%{transform:scaleY(1.2) translateY(-4%);filter:brightness(1.25)}}
.rock{right:0;bottom:33%;width:30%;height:auto!important}
.rock img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 6px #0005)}
.animal{bottom:-14%;width:32%}
.animal.bear{left:1%}.animal.croc{left:34%}.animal.lion{left:67%}
.animal .body{aspect-ratio:auto;height:auto;transform:none!important;filter:drop-shadow(0 8px 10px #0007)}
.animal.bear{--lx:37%;--rx:64%;--y:59%}.animal.croc{--lx:25%;--rx:75%;--y:64%}.animal.lion{--lx:23%;--rx:79%;--y:69%}
.hand{bottom:auto;top:var(--y);width:31%;translate:-50% -50%;border-radius:50%;filter:none!important}
.hand.l{left:var(--lx);right:auto}.hand.r{left:var(--rx);right:auto}
.hand:not(:disabled){animation:none}
.hand:not(:disabled):before{content:"";position:absolute;inset:-8%;border-radius:50%;border:3px solid #fff;box-shadow:0 0 12px #ffe066,inset 0 0 10px #ffe06688;animation:glow 1.3s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.15);opacity:.35}}
.hand:not(:disabled):hover,.hand:not(:disabled):active{transform:scale(1.1)}
.hand .paw{position:absolute;left:50%;bottom:-25%;width:150%;translate:-50% 0;opacity:0;transform:translateY(25%) scale(.5);transform-origin:50% 100%;pointer-events:none;transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.hand .paw>img:first-child{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px #0006)}
.animal.croc .hand .paw{width:175%}
.hand.open .paw{opacity:1;transform:none}
.hand.open{transform:none;z-index:2}
.hand .gem{position:absolute;left:18%;top:22%;width:64%;height:auto;animation:gem .5s cubic-bezier(.3,1.8,.5,1);filter:drop-shadow(0 0 10px #ffe066) drop-shadow(0 0 3px #fff)}
.animal.croc .hand .gem{top:30%}
.hand.found .paw>img:first-child,.hand.reveal .paw>img:first-child{filter:drop-shadow(0 0 12px #ffd76a) drop-shadow(0 0 4px #fff)}
.hand.empty:after{inset:auto;left:50%;top:-110%;translate:-50% 0;width:40px;height:40px;border-radius:50%;background:#fff;color:#e03131;font-size:24px;text-shadow:none;box-shadow:0 3px 8px #0006;z-index:3}
.hero-ring img,.win-ring img{width:70%;height:70%}
.kids .pick button[aria-pressed="true"]{background:linear-gradient(180deg,#ff8a8a,#e03131);color:#fff}
.bgart{background-position:50% 62%}
.tree{left:-3%;bottom:27%;width:42%}
.pond{left:29%;bottom:31%;width:42%}
.rock{right:-1%;bottom:28%;width:33%}
.animal{bottom:-5%;width:35%}
.animal.bear{left:-1%}.animal.croc{left:32.5%}.animal.lion{left:66%}
.hand.empty:after{top:-45%;width:34px;height:34px;font-size:20px}
body:not(.kids) .tree img,body:not(.kids) .pond img,body:not(.kids) .rock img{filter:brightness(.62) saturate(.85) hue-rotate(8deg) drop-shadow(0 8px 6px #0006)}
body:not(.kids) .animal .body{filter:brightness(.86) drop-shadow(0 8px 10px #0008)}

/* v7 (owner 2026-10-30): real cartoon animals that move (packed-alpha video drawn on a canvas) and talk with their
   own voice; the one that kept the ring laughs «ابلع يا <name>». The still picture stays as the fallback. */
.animal{bottom:1%;width:34%}
.animal.bear{left:-1%}.animal.croc{left:33%}.animal.lion{left:67%}
.animal .body,.animal .live{display:block;width:100%;height:auto;aspect-ratio:280/460}
.animal .live{position:absolute;left:0;top:0;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 10px #0007)}
.animal.is-live .live{opacity:1}.animal.is-live .body{visibility:hidden}
.animal.is-live{animation:none}
body:not(.kids) .animal .live{filter:brightness(.86) drop-shadow(0 8px 10px #0008)}
.animal.bear{--lx:38%;--rx:60%;--y:47%}.animal.croc{--lx:30%;--rx:72%;--y:55%}.animal.lion{--lx:22%;--rx:78%;--y:56%}
.animal.bear .hand{width:25%}
.hand.empty:after{top:-60%}
.animal.talking:not(.is-live) .body{animation:talkbob .28s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes talkbob{to{transform:scaleY(1.03) rotate(-1deg)}}
.say{position:absolute;left:50%;bottom:100%;z-index:9;translate:-50% -4px;min-width:110px;max-width:170%;padding:7px 12px;border-radius:16px;background:#fff;color:#1d2b1f;font-size:16px;font-weight:800;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px #0005;direction:rtl;opacity:0;transform:scale(.6);transform-origin:50% 100%;transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.say:after{content:"";position:absolute;left:50%;top:100%;translate:-50% -1px;border:8px solid transparent;border-top-color:#fff}
.say.on{opacity:1;transform:none}
.animal.bear .say{left:62%}.animal.lion .say{left:38%}
.say.big{background:#ffe066;font-size:18px}
.scene-msg{top:3%;padding:9px 12px;font-size:17px}
.live-src{position:fixed;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none;z-index:-1}
.hand .paw{width:118%;bottom:-38%}
.animal.croc .hand .paw{width:135%}
.animal.bear .hand .paw{width:128%}
.hand.empty:after{top:auto;bottom:-30%;left:auto;right:-22%;translate:0 0;width:24px;height:24px;font-size:15px;box-shadow:0 2px 5px #0006}
.animal.bear .say{left:0;translate:0 -4px}
.animal.lion .say{left:auto;right:0;translate:0 -4px}
.animal.bear .say:after{left:40%}.animal.lion .say:after{left:60%}

/* owner 2026-10-31 fixes: rings sit exactly on each animal's fists (measured on the still frame), the open paw appears
   in the same place and covers the fist (it is the animal's own hand opening, not a second hand on top), breathing idle */
.animal.bear{--lx:36%;--rx:62%;--y:44.5%}
.animal.croc{--lx:22.5%;--rx:76%;--y:57%}
.animal.lion{--lx:27%;--rx:77%;--y:56.5%}
.hand{width:27%}
.hand .paw{left:50%;top:50%;bottom:auto;width:132%;translate:-50% -50%;transform:scale(.55);transform-origin:50% 50%}
.animal.croc .hand .paw{width:150%}
.hand.open .paw{transform:scale(1)}
.hand .gem{top:18%}
.animal.is-live:not(.talking) .live{animation:fr-breathe 3.4s ease-in-out infinite;transform-origin:50% 100%}
.animal.croc.is-live:not(.talking) .live{animation-delay:-1.1s}
.animal.lion.is-live:not(.talking) .live{animation-delay:-2.2s}
@keyframes fr-breathe{0%,100%{transform:scale(1,1) rotate(0)}50%{transform:scale(1.012,1.022) rotate(-.6deg)}}

/* owner 2026-11-01: 5 animals (monkey + elephant at the back, bear / croc / lion in front) = 10 numbered hands,
   five hiding places (bush, log, tree, pond, rock), and they WALK (walking clip) to hide and back */
.scene{height:clamp(440px,132vw,600px)}
.tree{left:-4%;bottom:44%;width:31%;z-index:3}
.bush{position:absolute;left:21%;bottom:58%;width:21%;z-index:2;transform-origin:50% 100%}
.pond{left:37%;bottom:63%;width:28%;z-index:1}
.log{position:absolute;left:60%;bottom:58%;width:23%;z-index:2;transform-origin:50% 100%}
.rock{right:-3%;bottom:44%;width:27%;z-index:3}
.bush img,.log img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 6px #0005)}
body:not(.kids) .bush img,body:not(.kids) .log img{filter:brightness(.62) saturate(.85) hue-rotate(8deg) drop-shadow(0 8px 6px #0006)}
.bush.rustle,.log.rustle{animation:rustle .4s ease}
.animal{transition:transform 1s cubic-bezier(.45,.1,.4,1),opacity .35s}
.animal.monkey,.animal.elephant{bottom:33%;width:29%;z-index:5}
.animal.monkey{left:12%}.animal.elephant{left:56%}
.animal.bear,.animal.croc,.animal.lion{bottom:0;width:34%;z-index:6}
.animal.bear{left:-1%}.animal.croc{left:33%}.animal.lion{left:67%}
.animal.monkey{--lx:35%;--rx:65%;--y:51%}
.animal.elephant{--lx:30%;--rx:66%;--y:55%}
.animal.monkey .hand,.animal.elephant .hand{width:29%}
.animal.monkey .hand .paw{width:120%}
.animal.elephant .hand .paw{width:125%}
.animal.monkey.is-live:not(.talking) .live{animation-delay:-.6s}
.animal.elephant.is-live:not(.talking) .live{animation-delay:-1.6s}
.animal.monkey .say{left:30%}.animal.elephant .say{left:70%}
/* the number under every hand (owner: easier to choose) */
.hand .hn{position:absolute;left:50%;top:100%;translate:-50% 2px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#fff;color:#1d2b1f;font:900 14px/22px "Baloo Bhaijaan 2",system-ui,sans-serif;box-shadow:0 2px 6px #0007;border:2px solid #2f9e44;pointer-events:none;z-index:4}
.hand:disabled .hn{opacity:.55}
.hand.open .hn{opacity:0}
.animal.away .hand .hn{opacity:0}
/* the hand opening is animated: the paw unfolds with a little shake */
.hand.open .paw{animation:paw-open .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes paw-open{0%{transform:scale(.45) rotate(-28deg)}55%{transform:scale(1.12) rotate(10deg)}75%{transform:scale(.96) rotate(-5deg)}100%{transform:scale(1) rotate(0)}}
/* bigger hiding places, closer to the animals */
.tree{left:-7%;bottom:40%;width:37%}
.bush{left:18%;bottom:49%;width:26%}
.pond{left:35%;bottom:56%;width:31%}
.log{left:59%;bottom:49%;width:28%}
.rock{right:-6%;bottom:40%;width:33%}
.animal.monkey,.animal.elephant{bottom:29%;width:30%}
.animal.monkey{left:11%}.animal.elephant{left:57%}