/* فك البراغي — own look: a sunny garage workshop, pegboard wall, acrylic model pieces, little trucks on the road */
:root{--ink:#2a2238;--muted:#6b5f7a;--line:#2a2238;--main:#ff8a1f;--main2:#ffbf2e;--road:#4a4a5a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;color:var(--ink);font-family:"Baloo Bhaijaan 2",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;overflow:hidden}
body{background:radial-gradient(circle at 15% 0,#fff3b0 0,#0000 40%),linear-gradient(180deg,#ffe2a8 0,#ffd2a1 45%,#ffc6b0 100%)}
.page{position:relative;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(10px + env(safe-area-inset-bottom));height:100dvh;display:flex;flex-direction:column;gap:7px}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:40px;height:40px;border:2.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:17px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.hud{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px}
.chip{background:#fff;border:2.5px solid var(--line);border-radius:16px;padding:2px 10px;text-align:center;box-shadow:0 3px 0 var(--line)}
.chip small{display:block;font-size:11px;color:var(--muted);line-height:1.3}.chip b{font-size:21px;line-height:1.15}
/* pegboard wall with the model */
.board-wrap{position:relative;flex:1;min-height:0;display:grid;place-items:center;border:3px solid var(--line);border-radius:22px;box-shadow:0 4px 0 var(--line);
  background:radial-gradient(circle,#b9875099 1.6px,#0000 2.2px) 0 0/18px 18px,linear-gradient(180deg,#f3d3a3,#e9bf86);overflow:hidden}
.board-wrap::before{content:"";position:absolute;inset:8px;border:2px dashed #a0703d55;border-radius:16px;pointer-events:none}
.board{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);overflow:visible;touch-action:manipulation}
.plate .body{stroke-width:1.1;fill-opacity:.88;filter:drop-shadow(0 1.4px 0 #0003)}
.plate .gloss{opacity:.55}
.plate .hole{fill:#3a2a1f;stroke:#0004;stroke-width:.6}
.plate{transition:transform 1.1s cubic-bezier(.5,0,.9,.6),opacity 1.1s ease-in}
.plate.fall{transform:translate(0,170px) rotate(var(--spin,30deg));opacity:0;transform-box:fill-box;transform-origin:center}
.screw{cursor:pointer}
.screw .hit{fill:transparent}
.screw .head{stroke-width:.8}
.screw .slot{stroke:#0007;stroke-width:1.1;stroke-linecap:round}
.screw.out{animation:unscrew .3s ease-in forwards}
@keyframes unscrew{to{opacity:0;transform:scale(1.6)}}
.screw.out{transform-box:fill-box;transform-origin:center}
.screw.nope{animation:nope .35s}
@keyframes nope{25%{translate:-1.2px 0}75%{translate:1.2px 0}}
/* toolbox */
.box-row{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#e94b3c,#c7392c);border:3px solid var(--line);border-radius:16px;padding:6px 10px;box-shadow:0 4px 0 var(--line)}
.box-label{font-size:22px}
.box{flex:1;display:flex;gap:6px;justify-content:center}
.cell{width:30px;height:30px;border-radius:50%;background:#7a1f17;border:2.5px solid #4a120d;box-shadow:inset 0 3px 4px #0006;display:grid;place-items:center}
.bscrew,.fly{display:block;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff9 0 18%,#0000 45%),var(--c);border:2px solid #0006;position:relative}
.bscrew::before,.fly::before{content:"";position:absolute;inset:45% 22%;background:#0007;border-radius:2px}
.bscrew::after,.fly::after{content:"";position:absolute;inset:22% 45%;background:#0007;border-radius:2px}
.bscrew{animation:pop .25s ease}
@keyframes pop{from{transform:scale(.3)}}
.fly{position:fixed;z-index:50;pointer-events:none;transition:transform .42s cubic-bezier(.4,.1,.3,1)}
/* road + trucks */
.road{position:relative;display:flex;align-items:flex-end;gap:8px;background:linear-gradient(180deg,#5b5b6e,#3f3f4e);border:3px solid var(--line);border-radius:18px;padding:8px 10px 10px;box-shadow:0 4px 0 var(--line);overflow:hidden}
.road::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:4px;background:repeating-linear-gradient(90deg,#ffd23f 0 22px,#0000 22px 40px);opacity:.8}
.dock{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;direction:ltr}
.slot{height:74px;display:flex;align-items:flex-end;justify-content:center}
.queue-wrap{flex:none;width:76px;text-align:center;color:#fff;z-index:1}
.queue-wrap small{font-size:11px;opacity:.85}
.queue{display:flex;flex-direction:column;gap:3px;align-items:center;direction:ltr}
.queue em{color:#fff9}
.truck{position:relative;width:132px;height:62px;display:flex;align-items:flex-end;transition:transform .6s cubic-bezier(.5,0,.8,.4);z-index:1}
.truck.go{transform:translateX(-160vw)}
.truck.come{transform:translateX(130vw);transition:none}
.truck .cab{position:relative;width:38px;height:46px;margin-bottom:9px;background:var(--c);border:2.5px solid var(--line);border-radius:14px 6px 4px 4px;box-shadow:inset -4px -4px 0 var(--d)}
.truck .win{position:absolute;left:5px;top:6px;width:20px;height:15px;border-radius:7px 3px 3px 3px;background:linear-gradient(135deg,#e8fbff,#9fdcf0);border:2px solid var(--line)}
.truck .bed{flex:1;height:34px;margin-bottom:9px;margin-left:-2px;background:var(--c);border:2.5px solid var(--line);border-radius:4px 10px 4px 4px;box-shadow:inset 0 -5px 0 var(--d);display:flex;align-items:center;justify-content:center;gap:4px;padding:0 4px}
.peg{width:18px;height:18px;border-radius:50%;background:#0005;border:2px solid #0004;box-shadow:inset 0 2px 3px #0006;transition:all .2s}
.peg.on{background:radial-gradient(circle at 35% 30%,#fff9 0 18%,#0000 45%),var(--c);border-color:#0007;box-shadow:0 0 0 2px #fff8;transform:scale(1.08)}
.truck .wheel{position:absolute;bottom:0;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#ddd 0 26%,#222 30%);border:2.5px solid var(--line)}
.truck .w1{left:8px}.truck .w2{right:12px}
.truck.go .wheel,.truck.come .wheel{animation:roll .3s linear infinite}
@keyframes roll{to{transform:rotate(-360deg)}}
.truck.mini{width:66px;height:24px}
.truck.mini .cab{width:18px;height:18px;margin-bottom:4px;border-width:2px;border-radius:7px 3px 2px 2px;box-shadow:inset -2px -2px 0 var(--d)}
.truck.mini .win{left:2px;top:3px;width:9px;height:6px;border-width:1.5px}
.truck.mini .bed{height:14px;margin-bottom:4px;border-width:2px;padding:0;box-shadow:none}
.truck.mini .bed b{color:#fff;font-size:11px;line-height:1;text-shadow:0 1px 0 #0008}
.truck.mini .wheel{width:9px;height:9px;border-width:1.5px}.truck.mini .w1{left:3px}.truck.mini .w2{right:6px}
.tools{display:flex;gap:8px;justify-content:center}
.tool{border:2.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:800;padding:6px 12px;box-shadow:0 3px 0 var(--line);cursor:pointer}
.tool b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--main);color:#fff;font-size:13px}
.tool:disabled{opacity:.45}
/* panels */
.panel{position:absolute;inset:56px 0 0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;background:#fff4e2f2;backdrop-filter:blur(3px);border-radius:22px}
.panel[hidden]{display:none}
.panel h1{margin:0;font-size:44px;line-height:1.1;color:var(--main);-webkit-text-stroke:1.2px var(--line);text-shadow:0 3px 0 var(--line)}
.panel h2{margin:0;font-size:30px}
.lead{margin:0;color:var(--muted);font-size:16px;max-width:330px}
.logo{display:flex;gap:16px;align-items:center;height:100px}
.logo i{position:relative;width:54px;height:54px;border-radius:50%;border:3px solid var(--line);background:radial-gradient(circle at 35% 30%,#fff9 0 18%,#0000 45%),var(--c);box-shadow:0 4px 0 var(--line);animation:spin 2.4s cubic-bezier(.6,0,.4,1) infinite}
.logo i::before{content:"";position:absolute;inset:44% 18%;background:#0008;border-radius:3px}
.logo i::after{content:"";position:absolute;inset:18% 44%;background:#0008;border-radius:3px}
.logo i:nth-child(2){animation-delay:.3s;transform:translateY(-10px)}.logo i:nth-child(3){animation-delay:.6s}
@keyframes spin{60%,100%{rotate:-360deg}}
.btn{width:min(280px,100%);border:3px solid var(--line);border-radius:16px;padding:12px;font:inherit;font-size:20px;font-weight:800;cursor:pointer;box-shadow:0 5px 0 var(--line);color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.btn:disabled{opacity:.45}
.btn-main{background:linear-gradient(135deg,var(--main),var(--main2));color:#fff}
.btn-ghost{background:#fff;font-size:16px}
.best-line{margin:0;font-size:15px}
.howto{margin:4px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted);line-height:1.7}
.win-emo{font-size:58px;line-height:1}
.toast{position:absolute;left:50%;top:38%;translate:-50% 0;padding:6px 16px;border:2.5px solid var(--line);border-radius:999px;background:#ffe066;font-weight:800;font-size:19px;z-index:8;pointer-events:none;animation:toastIn 1.1s ease forwards;white-space:nowrap}
.toast[hidden]{display:none}
@keyframes toastIn{0%{scale:.5;opacity:0}18%{scale:1.1;opacity:1}70%{scale:1;opacity:1}100%{opacity:0;translate:-50% -24px}}
@media (max-height:680px){.howto{display:none}.slot{height:64px}}
@media (max-width:370px){.truck{width:118px}.peg{width:15px;height:15px}.cell{width:26px;height:26px}}

/* 2026-10-31 owner «نسوي لعبة البراغي و ايقونتها»: real workshop — pegboard wall, clear acrylic plates, metal screws,
   metal red toolbox, glossy trucks; no blur behind panels (iPhone) */
.board-wrap{background:linear-gradient(#ffffff14,#0000001f),url(/assets/unscrew/peg.webp?v=1) 0 0/220px,#d9b07a}
.board-wrap::before{border:0;inset:0;border-radius:20px;box-shadow:inset 0 0 26px #5a3a1a66}
.plate .body{fill-opacity:.62;stroke-width:.9;filter:none}
.plate .shadow{opacity:.22}
.plate .gloss{opacity:.4}
.plate .sheen{stroke-width:.55}
.plate .hole{fill:#2b1d12;stroke:#ffffff55;stroke-width:.45}
.screw .slot{stroke:#000a;stroke-width:.9}
.box-row{background:linear-gradient(180deg,#f0604f 0,#d23a2b 45%,#a8281c 100%);box-shadow:inset 0 2px 0 #ffffff66,inset 0 -3px 0 #0000003a,0 4px 0 var(--line)}
.box-row::before{content:"";position:absolute}
.cell{background:radial-gradient(circle at 50% 35%,#2a0d09,#5a1a12);border-color:#3a0e09;box-shadow:inset 0 3px 5px #000a,0 1px 0 #ffffff40}
.bscrew,.fly{background:radial-gradient(circle at 35% 30%,#fffc 0 14%,#0000 40%),radial-gradient(circle at 40% 35%,var(--c) 0 55%,color-mix(in srgb,var(--c) 55%,#000) 100%);
  border:2.5px solid #9aa1ab;box-shadow:0 0 0 1px #4b5563,0 2px 3px #0007}
.truck .cab,.truck .bed{background:linear-gradient(180deg,#ffffff55 0,#ffffff00 40%),var(--c)}
.truck .win{background:linear-gradient(135deg,#ffffff 0,#bfefff 35%,#7cc8e6 36%,#a8e2f5 100%)}
.truck .wheel{background:radial-gradient(circle,#f1f3f5 0 22%,#9aa1ab 24% 30%,#1f1f24 33%)}
.road{background:linear-gradient(180deg,#5d5d6b,#3c3c48),#444}
.panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff4e2fa}