/* لعبة البلوعة — own look: a street square. 🎨 كارتون (default) = sunny road-works yellow / 🎯 عادي = night asphalt */
:root{--bg:#14161d;--bg2:#1f232d;--card:#20242e;--ink:#f4f1ea;--muted:#a9adb8;--line:#343a47;--acc:#ffb703;--acc2:#fb8500;--danger:#e63946;--road:#2b2f38}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{min-height:100vh;background:repeating-linear-gradient(135deg,#ffffff05 0 14px,#0000 14px 28px),radial-gradient(120% 70% at 50% 0,var(--bg2),var(--bg) 70%) fixed,var(--bg);color:var(--ink);
  font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;user-select:none}
.page{max-width:560px;margin:0 auto;padding:calc(10px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px)) 12px calc(18px + env(safe-area-inset-bottom))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.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}
.theme-switch{display:flex;width:max-content;margin:0 auto 12px;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,#ffd166,var(--acc));color:#231a02}
/* hero with the editable game name */
.hero{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:22px;overflow:hidden;
  background:repeating-linear-gradient(-45deg,#ffb703 0 16px,#1b1b1b 16px 32px) top/100% 8px no-repeat,linear-gradient(135deg,#2b2f38,#1a1d24);border:1px solid #ffb70355}
.hero-lid{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 6px #0008);animation:lidspin 9s linear infinite}
@keyframes lidspin{to{transform:rotate(360deg)}}
.hero-txt{min-width:0}
.title-btn{display:flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:inherit;font:inherit;cursor:pointer;text-align:start}
.title-btn h1{margin:0;font-size:28px;line-height:1.15;color:var(--acc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.title-btn i{font-style:normal;font-size:14px;opacity:.75}
.hero p{margin:2px 0 0;color:var(--muted);font-size:14px;font-weight:600}
.card{padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 12px 26px #0006;margin-bottom:12px}
.sec-title{margin:0 0 10px;font-size:19px}
.add-form{display:flex;gap:8px}
.add-form input{flex:1;min-width:0;height:48px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:#0f1117;color:var(--ink);font:inherit;font-size:17px;font-weight:700;user-select:text}
.add-form button{flex:none;padding:0 14px;border:0;border-radius:14px;background:linear-gradient(180deg,#ffd166,var(--acc));color:#231a02;font:inherit;font-weight:900;font-size:16px;cursor:pointer}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.pl{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:14px;background:#0f1117;border:1px solid var(--line)}
.pl.new{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.pl img{flex:none;width:34px;height:34px;object-fit:contain}
.pl .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.pl .del{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:#e6394633;color:#ff8a93;font-size:18px;cursor:pointer}
.empty{grid-column:1/-1;padding:14px;text-align:center;color:var(--muted)}
.hearts-pick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0}
.hearts-pick>span{font-weight:800}
.pick{display:flex;gap:6px;flex-wrap:wrap}
.pick button{min-width:40px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#0f1117;color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.pick button[aria-pressed="true"]{background:linear-gradient(180deg,#ffd166,var(--acc));color:#231a02;border-color:transparent}
.status{min-height:22px;margin:6px 0;text-align:center;color:var(--muted);font-weight:700}
.btn{display:block;width:100%;margin-top:8px;padding:13px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--ink);font:inherit;font-size:18px;font-weight:900;cursor:pointer}
.btn-main{border:0;background:linear-gradient(180deg,#ffd166,var(--acc));color:#231a02;box-shadow:0 5px 0 var(--acc2)}
.btn-main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--acc2)}
.btn:disabled{opacity:.45}
.btn-ghost{font-size:16px}
/* turn bar + waiting bench */
.turn-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:#0f1117;border:1px solid var(--line)}
.turn-av{flex:none;width:52px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 4px #0008)}
.turn-bar small{color:var(--muted);font-weight:700}
.turn-bar h2{margin:0;font-size:22px;color:var(--acc);line-height:1.2}
.turn-bar>div{flex:1;min-width:0}
.hearts{font-size:14px;letter-spacing:1px}
.round-no{flex:none;padding:4px 10px;border-radius:999px;background:#ffb70322;color:var(--acc);font-size:13px}
.bench{display:flex;gap:6px;overflow-x:auto;padding:8px 2px;scrollbar-width:none;min-height:66px}
.bench::-webkit-scrollbar{display:none}
.bench em{margin:auto;color:var(--muted);font-weight:700}
.sit{flex:none;display:flex;flex-direction:column;align-items:center;width:56px;opacity:.75}
.sit img{width:40px;height:46px;object-fit:contain}
.sit span{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:800}
.sit.now{opacity:1;transform:translateY(-3px)}
.sit.now img{filter:drop-shadow(0 0 6px var(--acc))}
/* the street square */
.yard{position:relative;width:100%;aspect-ratio:3/5;min-height:360px;border-radius:20px;overflow:hidden;border:3px solid #ffb703;box-shadow:inset 0 0 30px #0007}
.yard-bg{position:absolute;inset:0;background:#3a3e46 url(/assets/manhole/bg_night.webp?v=1) center/cover no-repeat}
.holes,.kids-layer{position:absolute;inset:0}
.kids-layer{pointer-events:none}
.hole{position:absolute;width:23%;aspect-ratio:1;translate:-50% -50%;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 4px #0009)}
.hole img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s,transform .35s}
.hole .pit{opacity:0}
.hole b{position:absolute;left:50%;top:50%;translate:-50% -50%;min-width:28px;padding:1px 7px;border-radius:999px;background:#ffb703;color:#231a02;font-size:14px;font-weight:900;box-shadow:0 2px 0 #0007}
.hole:not(.taken):hover .lid,.hole:not(.taken):active .lid{transform:scale(1.06)}
.hole.taken{cursor:default}
.hole.taken b{opacity:0}
.hole.shake .lid{animation:shake .18s linear infinite}
@keyframes shake{25%{transform:translate(-2px,1px) rotate(-3deg)}75%{transform:translate(2px,-1px) rotate(3deg)}}
.hole.open .lid{opacity:1;transform:translate(42%,-30%) rotate(35deg) scale(.9)}
.hole.open .pit{opacity:1}
.kid{position:absolute;width:13.5%;translate:-50% -84%;display:flex;flex-direction:column;align-items:center;z-index:2;transition:transform .5s,left .5s ease-in-out,top .5s ease-in-out}
.kid img{width:100%;height:auto;filter:drop-shadow(0 6px 4px #0008)}
.kid span{margin-top:-6px;max-width:150%;padding:1px 8px;border-radius:999px;background:#000b;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kid.arrive{animation:arrive .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes arrive{from{transform:translateY(-60%) scale(.6);opacity:0}}
.kid.fall{animation:fall .9s cubic-bezier(.55,0,.8,.4) forwards}
@keyframes fall{25%{transform:translateY(-12%) rotate(-8deg)}100%{transform:translateY(40%) scale(.15) rotate(25deg);opacity:0}}
.yard-msg{position:absolute;left:6%;right:6%;top:42%;z-index:5;padding:12px;border-radius:16px;background:#c1121fea;color:#fff;text-align:center;font-size:19px;font-weight:800;box-shadow:0 10px 24px #0008;animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.hint{min-height:24px;margin:10px 0 6px;text-align:center;font-weight:800;color:var(--acc)}
.tools{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.tools button{padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:#0f1117;color:var(--ink);font:inherit;font-weight:800;cursor:pointer}
.board-title{margin:12px 0 6px;font-size:16px}
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.br{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:12px;background:#0f1117;border:1px solid var(--line)}
.br img{flex:none;width:28px;height:32px;object-fit:contain}
.br .bn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:14px}
.br .bh{flex:none;font-size:11px}
.br.now{border-color:var(--acc)}
.br.out{opacity:.45}
/* overlays */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:18px;background:#000c}
.overlay[hidden]{display:none}
.modal{position:relative;width:min(100%,420px);max-height:90vh;overflow:auto;padding:18px;border-radius:22px;background:var(--card);border:1px solid var(--line);text-align:center;animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.modal h2{margin:0 0 10px}
.modal ol{text-align:start;padding-inline-start:20px;line-height:1.8;margin:0 0 8px}
.modal p{color:var(--muted);margin:0 0 6px}
.gender-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0}
.gender-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border:2px solid var(--line);border-radius:18px;background:#0f1117;color:var(--ink);font:inherit;font-size:18px;cursor:pointer}
.gender-pick button:active{transform:scale(.96)}
.gender-pick img{width:90px;height:110px;object-fit:contain}
.plist{display:flex;flex-direction:column;gap:6px;margin:10px 0;text-align:start}
.pr{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:#0f1117;border:1px solid var(--line)}
.pr img{flex:none;width:30px;height:34px;object-fit:contain}
.pr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800}
.pr.out{opacity:.5}
.hctl{display:flex;align-items:center;gap:6px}
.hctl button{width:30px;height:30px;border:0;border-radius:10px;background:#ffb70333;color:var(--acc);font-size:18px;font-weight:900;cursor:pointer}
.pr .del{border:0;background:none;font-size:18px;cursor:pointer}
.win-av{width:120px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 10px #0008);animation:bounce 1s ease-in-out infinite alternate}
@keyframes bounce{to{transform:translateY(-8px)}}
.win small{color:var(--muted);font-weight:800}
.win h2{font-size:30px;color:var(--acc)}
.podium{display:flex;justify-content:center;gap:8px;margin:8px 0}
.pod{display:flex;flex-direction:column;align-items:center;padding:6px 10px;border-radius:12px;background:#0f1117;min-width:80px}
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#confetti i{position:absolute;top:-10px;width:8px;height:12px;background:var(--c);animation:conf var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.sinan-credit{margin:14px 0 4px;text-align:center;font-size:12px;letter-spacing:2px;color:var(--muted)}
.sinan-credit b{color:var(--acc)}

/* 🎨 كارتون (default): sunny street, bold outlines */
body.kids{--bg:#ffe8a3;--bg2:#fff4cf;--card:#fff;--ink:#2a2112;--muted:#7a6a48;--line:#2a2112;--acc:#fb8500;--acc2:#2a2112;
  background:repeating-linear-gradient(135deg,#ffffff55 0 14px,#0000 14px 28px),linear-gradient(180deg,#fff4cf,#ffd76a);color:var(--ink)}
body.kids .icon,body.kids .theme-switch{border:3px solid var(--line);background:#fff;box-shadow:3px 3px 0 var(--line)}
body.kids .theme-switch button{color:var(--ink)}
body.kids .theme-switch button[aria-pressed="true"]{background:#fb8500;color:#fff;text-shadow:1px 1px 0 var(--line)}
body.kids .hero{border:3px solid var(--line);box-shadow:5px 5px 0 var(--line);background:repeating-linear-gradient(-45deg,#ffb703 0 16px,#2a2112 16px 32px) top/100% 10px no-repeat,linear-gradient(135deg,#ffd166,#ffb703)}
body.kids .title-btn h1{color:#fff;text-shadow:2px 2px 0 var(--line),-1px -1px 0 var(--line),1px -1px 0 var(--line),-1px 1px 0 var(--line)}
body.kids .hero p{color:#2a2112}
body.kids .card{border:3px solid var(--line);box-shadow:5px 5px 0 var(--line)}
body.kids .add-form input,body.kids .pl,body.kids .pick button,body.kids .turn-bar,body.kids .br,body.kids .pr,body.kids .tools button,body.kids .gender-pick button,body.kids .pod{background:#fff;border:2px solid var(--line);color:var(--ink)}
body.kids .add-form button,body.kids .btn-main,body.kids .pick button[aria-pressed="true"]{background:#fb8500;color:#fff;border:2px solid var(--line);text-shadow:1px 1px 0 var(--line)}
body.kids .btn-main{box-shadow:0 5px 0 var(--line)}
body.kids .btn{border:3px solid var(--line)}
body.kids .yard{border:3px solid var(--line);box-shadow:5px 5px 0 var(--line)}
body.kids .yard-bg{background-image:url(/assets/manhole/bg_day.webp?v=1)}
body.kids .turn-bar h2,body.kids .win h2{color:#e85d04}
body.kids .hint{color:#c1440e}
body.kids .modal{border:3px solid var(--line);box-shadow:6px 6px 0 var(--line)}
body.kids .overlay{background:#2a2112cc}
body.kids .round-no{background:#2a2112;color:#ffd166}
body.kids .cloud-brand,body.kids .baron-credit{background:#fff;border:2px solid var(--line);color:var(--ink);box-shadow:2px 2px 0 var(--line)}
body.kids .sinan-credit b{color:#e85d04}
@media (max-width:380px){.title-btn h1{font-size:23px}.kid span{font-size:10px}}

.hole{width:21%}


.kid.walk img{animation:hop .25s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-6%)}}
.yard-msg small{font-size:14px;opacity:.9}
.yard-msg.safe{background:#2b9348ea}

/* owner 2026-11-01: 30 different kids, each with a second pose that plays now and then (jump / wave / scratch head /
   scratch belly) — two stacked frames, 256×380 with the standing kid 300 tall and headroom for the jump */
.kid{width:34.6%}
.kid .fr{position:relative;display:block;width:100%;aspect-ratio:256/380;margin:0;padding:0;background:none;border-radius:0;max-width:none;overflow:visible}
.kid .fr img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 4px #0008)}
.kid .fb{opacity:0;animation:kid-b 4.6s steps(1,end) infinite;animation-delay:var(--kd,0s)}
.kid .fa{animation:kid-a 4.6s steps(1,end) infinite;animation-delay:var(--kd,0s)}
@keyframes kid-b{0%,64%{opacity:0}66%,92%{opacity:1}94%,100%{opacity:0}}
@keyframes kid-a{0%,64%{opacity:1}66%,92%{opacity:0}94%,100%{opacity:1}}
.kid.mv-jump .fr{animation:kid-jump 4.6s ease-in-out infinite;animation-delay:var(--kd,0s)}
@keyframes kid-jump{0%,64%,94%,100%{transform:none}72%{transform:translateY(-6%)}84%{transform:translateY(-2%)}}
.kid .kn{margin-top:-14%;max-width:60%;padding:1px 8px;border-radius:999px;background:#000b;color:#fff;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kid.walk .fr img,.kid.fall .fr img{animation:none}
.kid.walk .fb,.kid.fall .fb{opacity:0}.kid.walk .fa,.kid.fall .fa{opacity:1}
.kid.walk .fr{animation:hop .25s ease-in-out infinite alternate}
.opt-fixed{display:flex;align-items:flex-start;gap:10px;margin:12px 0 4px;padding:10px 12px;border-radius:14px;background:#0000000f;font-weight:800;cursor:pointer;text-align:right}
.opt-fixed input{flex:none;width:22px;height:22px;margin-top:2px;accent-color:#fb8500}
.opt-fixed small{display:block;font-weight:600;font-size:12.5px;opacity:.8}
.open-btn{margin:6px auto 4px}
.pl img,.br img,.pr img,.sit img,.turn-av{object-position:50% 100%}
.kid{width:27%}
.kid .kn{position:absolute;left:50%;bottom:16%;translate:-50% 100%;margin:0;max-width:130%;z-index:3}
.open-btn[hidden]{display:none}
.mode-btn{display:block;width:100%;margin:8px 0 2px;padding:9px 12px;border-radius:14px;border:2px dashed #0003;background:#00000010;color:inherit;font:inherit;font-weight:800;font-size:15px;cursor:pointer;text-align:center}
.mode-btn small{display:block;font-size:12px;font-weight:600;opacity:.75}
.mode-btn.on{border-style:solid;border-color:#fb8500;background:#fb85001f}
#genderSheet{z-index:80}   /* asked from the players panel during play: must be on top of it */