/* اسألني — ستايل الموقع */
:root{
  --bg:#FFF5CC;
  --bg-2:#FFEDA8;
  --paper:#FFFDF6;
  --ink:#1E1B16;
  --ink-2:#5E5747;
  --line:#1E1B16;
  --yellow:#FFD23F;
  --a:#2F6FED; --a-soft:#DDE7FF;
  --b:#EF5B3F; --b-soft:#FFE0D8;
  --gold:#F59F00;
  --r:16px; --r-lg:22px;
  --sh:4px 4px 0 var(--ink);
  --sh-lg:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.5,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;color:var(--ink);
  background-color:var(--bg);
  background-image:radial-gradient(rgba(30,27,22,.07) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:inherit}
img{display:block}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
h1,h2,h3,.step-title,.win-name{font-family:'Changa',sans-serif;font-weight:800}

/* ---------- أزرار ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;
  font-weight:700;font-size:1rem;border:2.5px solid var(--ink);box-shadow:var(--sh);white-space:nowrap;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:var(--sh)}
.btn-lg{padding:14px 26px;font-size:1.1rem}
.btn-sm{padding:7px 14px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn-primary{background:var(--ink);color:var(--yellow)}
.btn-secondary{background:var(--paper)}
.btn small{font-weight:500;opacity:.7;font-size:.82em}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;color:var(--ink-2)}
.link:hover{color:var(--ink)}

/* ---------- الشاشات ---------- */
.screen{display:none;min-height:100vh;min-height:100dvh;flex-direction:column;padding:18px clamp(16px,3.5vw,44px) 28px}
.screen.active{display:flex;animation:enter .45s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(16px)}}

.bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:46px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:'Changa';font-weight:800;font-size:1.5rem}
.wordmark img{width:38px;height:38px}
.wordmark.sm{font-size:1.25rem}
.wordmark.sm img{width:32px;height:32px}

/* ---------- الرئيسية ---------- */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1180px,100%);margin:0 auto}
.site-nav{display:flex;gap:22px}
.home{flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;width:min(1180px,100%);margin:0 auto;padding:20px 0}
.eyebrow{display:inline-block;font-weight:700;font-size:.92rem;padding:5px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper)}
.home-title{font-size:clamp(4.2rem,11vw,8rem);line-height:1;margin:18px 0 14px;letter-spacing:-1px}
.home-title span{color:var(--gold)}
.home-lead{font-size:1.15rem;line-height:1.9;color:var(--ink-2);max-width:470px}
.home-cta{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 18px}
.home-meta{color:var(--ink-2);font-size:.95rem}
.home-meta b{color:var(--ink)}
.home-art{position:relative;height:440px}
.home-art .card{position:absolute;width:44%;box-shadow:var(--sh-lg)}
.home-art .card:nth-child(1){top:2%;right:6%}
.home-art .card:nth-child(2){top:12%;left:4%}
.home-art .card:nth-child(3){bottom:4%;right:16%}
.home-art .card:nth-child(4){bottom:10%;left:12%;z-index:1}
.home-art .card{animation:drop .8s var(--spring) backwards calc(var(--i) * 110ms + .2s),bob 5s ease-in-out calc(var(--i) * -1.3s) infinite}
@keyframes drop{from{opacity:0;scale:.5}}
@keyframes bob{50%{translate:0 -12px}}

/* ---------- كرت الفئة ---------- */
.card{position:relative;display:flex;flex-direction:column;border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:var(--sh);text-align:center}
.card .art{aspect-ratio:4/3;overflow:hidden;border-bottom:2.5px solid var(--ink)}
.card .art svg{width:100%;height:100%;display:block}
.card .nm{padding:8px 6px;font-weight:700;font-size:1rem;background:var(--yellow);line-height:1.3}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
button.card{transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
button.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
button.card:hover .art svg{transform:scale(1.04)}
.card .art svg{transition:transform .3s var(--ease)}
.card .owner{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:.95rem;opacity:0;transform:scale(.4);transition:.25s var(--spring)}
.card .tagc{position:absolute;top:8px;right:8px;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--paper);border:2px solid var(--ink)}
.card.sel-0{outline:4px solid var(--a);outline-offset:-1px}
.card.sel-1{outline:4px solid var(--b);outline-offset:-1px}
.card.sel-0 .nm{background:var(--a);color:#fff}
.card.sel-1 .nm{background:var(--b);color:#fff}
.card.sel-0 .owner{opacity:1;transform:none;background:var(--a)}
.card.sel-1 .owner{opacity:1;transform:none;background:var(--b)}
.card.dim{opacity:.45}
.card.add{border-style:dashed;box-shadow:none;background:transparent;justify-content:center;align-items:center;gap:6px;min-height:150px;font-weight:700}
.card.add span{font-size:2rem;line-height:1}

/* ---------- الإعداد ---------- */
.stepper{display:flex;gap:6px;list-style:none;margin:0 auto}
.stepper li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;font-weight:700;color:var(--ink-2)}
.stepper i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink);background:var(--paper);font-weight:800;color:var(--ink)}
.stepper li.on{background:var(--paper);border:2px solid var(--ink);color:var(--ink)}
.stepper li.on i{background:var(--yellow)}
.stepper li.done i{background:var(--ink);color:var(--yellow)}
.steps{flex:1;width:min(1100px,100%);margin:0 auto}
.step{display:none;flex-direction:column;gap:14px}
.step.on{display:flex;animation:stepIn .6s var(--spring)}
@keyframes stepIn{from{opacity:0;transform:perspective(1200px) rotateY(-22deg) translateX(-60px)}}
.step-title{font-size:clamp(1.6rem,3.4vw,2.3rem);text-align:center}
.step-sub{text-align:center;color:var(--ink-2);margin-top:-6px}
.wiz-sum{text-align:center;color:var(--ink-2);font-weight:600;margin-top:18px}

.teams-row{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:20px}
.team-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 22px 24px;border:2.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-lg);cursor:text}
.team-card::before{content:"";position:absolute;inset:0 0 auto;height:12px;border-radius:19px 19px 0 0;border-bottom:2.5px solid var(--ink)}
.team-card.ta::before{background:var(--a)}
.team-card.tb::before{background:var(--b)}
.team-tag{font-weight:700;color:var(--ink-2);font-size:.92rem}
.team-card input{width:100%;text-align:center;border:2.5px solid var(--ink);border-radius:12px;background:#fff;padding:13px;font-size:1.3rem;font-weight:700;outline:none}
.team-card input:focus{background:#FFFBEA;box-shadow:0 0 0 4px var(--yellow)}
.vs{font-family:'Changa';font-weight:800;font-size:1.5rem;color:var(--ink-2)}

.badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;color:#fff;border:2.5px solid var(--ink);font-family:'Changa'}
.badge.big{width:84px;height:84px;font-size:2.4rem;box-shadow:var(--sh)}
.ta .badge,.badge.ta{background:var(--a)}
.tb .badge,.badge.tb{background:var(--b)}

.pick-head{display:flex;flex-direction:column;gap:12px}
.pick-bar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pick-chip{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2.5px solid var(--ink);border-radius:var(--r);background:var(--paper);text-align:start;transition:transform .15s,box-shadow .15s}
.pick-chip.on{box-shadow:var(--sh);transform:translate(-2px,-2px)}
.pick-chip.on.ta{background:var(--a-soft)}
.pick-chip.on.tb{background:var(--b-soft)}
.pc-name{flex:1;min-width:0;font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-name small{display:block;font-weight:500;color:var(--ink-2);font-size:.82rem}
.slots{display:flex;gap:6px}
.slots i{width:44px;height:34px;border-radius:8px;border:2px dashed var(--ink-2);overflow:hidden;display:block}
.slots i.f{border-style:solid;border-color:var(--ink)}
.slots svg{width:100%;height:100%;display:block}
.pick-tools{display:flex;align-items:center;gap:16px;justify-content:flex-end}

.settings{display:flex;flex-direction:column;border:2.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-lg);overflow:hidden;width:min(680px,100%);margin:10px auto 0}
.set-row{display:flex;align-items:center;gap:16px;padding:18px 20px;border-bottom:2px solid rgba(30,27,22,.15)}
.set-row:last-child{border:0}
.set-row.col{flex-direction:column;align-items:stretch}
.set-txt{flex:1}
.set-txt b{display:block;font-size:1.08rem}
.set-txt small{color:var(--ink-2)}
.seg{display:flex;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden}
.seg button{min-width:48px;padding:8px 10px;font-weight:700;border-inline-start:2px solid var(--ink)}
.seg button:first-child{border:0}
.seg button.on{background:var(--ink);color:var(--yellow)}
.switch{width:56px;height:32px;border-radius:999px;border:2.5px solid var(--ink);background:#fff;position:relative;flex:none;transition:background .2s}
.switch i{position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;background:var(--ink);transition:transform .25s var(--spring)}
.switch.on{background:var(--yellow)}
.switch.on i{transform:translateX(-24px)}
.starter{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.starter button{padding:12px 8px;border:2.5px solid var(--ink);border-radius:12px;background:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
.starter button em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.starter button .badge{width:28px;height:28px;font-size:.9rem;border-width:2px}
.starter button.on{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}

/* ---------- اللوحة ---------- */
.board-bar{justify-content:space-between;width:min(1500px,100%);margin-inline:auto}
.toolbar{display:flex;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.toolbar button{padding:8px 14px;font-weight:600;font-size:.92rem;border-inline-start:2px solid var(--ink);white-space:nowrap}
.toolbar button:first-child{border:0}
.toolbar button:hover:not(:disabled){background:var(--yellow)}
.toolbar button:disabled{opacity:.35;cursor:not-allowed}
.toolbar .danger:hover{background:var(--b);color:#fff}

.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;width:min(1500px,100%);margin:0 auto 18px}
.team-hud{display:flex;align-items:center;gap:12px;padding:10px 16px;border:2.5px solid var(--ink);border-radius:var(--r);background:var(--paper);transition:transform .25s var(--ease),box-shadow .25s}
.team-hud.tb{flex-direction:row-reverse}
.team-hud.active{box-shadow:var(--sh-lg);transform:translate(-2px,-2px)}
.team-hud.ta.active{background:var(--a-soft)}
.team-hud.tb.active{background:var(--b-soft)}
.th-info{flex:1;min-width:0}
.team-hud.tb .th-info{text-align:left}
.th-name{font-weight:700;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-meta{display:flex;gap:5px;margin-top:4px;align-items:center;font-size:.8rem}
.team-hud.tb .th-meta{justify-content:flex-end}
.hd{padding:1px 7px;border:1.5px solid var(--ink);border-radius:6px;font-weight:600;background:#fff}
.hd.used{text-decoration:line-through;opacity:.35}
.streak{padding:1px 8px;border-radius:6px;background:var(--ink);color:var(--yellow);font-weight:700}
.th-score{font-family:'Changa';font-weight:800;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.bump{animation:bump .5s var(--spring)}
@keyframes bump{40%{transform:scale(1.3)}}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:210px}
.turn{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;white-space:nowrap}
.turn .badge{width:28px;height:28px;font-size:.9rem;border-width:2px}
.progress{width:100%;height:10px;border:2px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--yellow);border-inline-end:2px solid var(--ink);transition:width .6s var(--ease)}
.hud-mid small{color:var(--ink-2);font-weight:600}

.board{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.3vw,18px);width:min(1500px,100%);margin:0 auto}
.col{display:flex;flex-direction:column;gap:9px}
.board.intro .col .card{animation:colIn .8s var(--spring) backwards;animation-delay:calc(var(--i) * 90ms)}
@keyframes colIn{from{opacity:0;transform:perspective(900px) rotateX(-80deg) translateY(-30px);transform-origin:50% 0}}
.board.intro .pt{animation:ptIn .55s var(--spring) backwards;animation-delay:calc(var(--i) * 90ms + var(--j) * 45ms + .35s)}
@keyframes ptIn{from{opacity:0;transform:perspective(400px) rotateX(-90deg) translateY(12px)}}
.col .card .nm{font-size:clamp(.85rem,1.1vw,1rem)}
.col .card .art{aspect-ratio:16/10;max-height:22vh;width:100%}
.col.o0 .card .nm{background:var(--a);color:#fff}
.col.o1 .card .nm{background:var(--b);color:#fff}
.pts-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt{padding:clamp(9px,1.5vh,15px) 0;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);font-family:'Changa';font-weight:800;font-size:clamp(1.05rem,1.6vw,1.4rem);
  box-shadow:3px 3px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s,background .15s}
.pt:hover:not(:disabled){background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.pt:active:not(:disabled){transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.pt:disabled{cursor:default;box-shadow:none;transform:translate(3px,3px)}
.pt.just{animation:flip3d .9s var(--spring) backwards .35s}
@keyframes flip3d{from{transform:translate(3px,3px) perspective(300px) rotateX(-180deg);background:var(--yellow);color:transparent}}
.pt.w0:disabled{background:var(--a);color:#fff}
.pt.w1:disabled{background:var(--b);color:#fff}
.pt.wn:disabled{background:transparent;color:var(--ink-2);border-style:dashed}

/* شبح الانتقال */
.zoom-ghost{position:fixed;z-index:70;border:2.5px solid var(--ink);border-radius:12px;background:var(--yellow);display:grid;place-items:center;font-family:'Changa';font-weight:800;pointer-events:none}

/* ---------- السؤال ---------- */
.q-meta{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.tag{padding:6px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--paper);font-weight:700;font-size:.95rem}
.tag-pts{background:var(--ink);color:var(--yellow)}
.tag-gold{background:var(--gold);color:var(--ink)}
.q-stage{flex:1;width:min(980px,100%);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.q-timer-row{display:flex;align-items:center;gap:18px}
.round-btn{width:44px;height:44px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
.round-btn:active{transform:translate(2px,2px);box-shadow:none}
.round-btn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#btn-pause .i-play{display:none}#btn-pause.paused .i-play{display:block}#btn-pause.paused .i-pause{display:none}
.timer{position:relative;width:110px;height:110px;display:grid;place-items:center}
.timer svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:#fff;stroke-width:10}
.timer .track{stroke:var(--bg-2)}
.timer .prog{fill:none;stroke:var(--ink);stroke-linecap:butt;stroke-dasharray:326.7;transition:stroke-dashoffset .25s linear}
.timer b{position:relative;font-family:'Changa';font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}
.timer.warn .prog{stroke:var(--b)}
.timer.warn b{color:var(--b);animation:tick 1s infinite}
.timer.steal .prog{stroke:var(--gold)}
@keyframes tick{50%{transform:scale(1.1)}}
.phase{font-weight:700;color:var(--ink-2);min-height:1.5em}
.phase.steal{color:var(--ink);background:var(--gold);padding:2px 12px;border-radius:8px;border:2px solid var(--ink)}
.phase.over{color:var(--b)}

.flip{width:100%;perspective:1600px}
.flip-inner{display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,1.3,.5,1)}
.flip.revealed .flip-inner{transform:rotateY(180deg)}
.face{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-height:clamp(250px,40vh,420px);
  border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:8px 8px 0 var(--ink);padding:clamp(22px,4vw,48px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;position:relative}
.front{background:var(--paper)}
.back{background:var(--yellow);transform:rotateY(180deg)}
.flip.golden .front{background:#FFF1C7;border-color:var(--ink);box-shadow:8px 8px 0 var(--gold)}
.flip.shake .flip-inner{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.face-art{width:96px;aspect-ratio:4/3;border:2.5px solid var(--ink);border-radius:10px;overflow:hidden}
.face-art svg{width:100%;height:100%;display:block}
.q-text{font-size:clamp(1.4rem,3.2vw,2.5rem);font-weight:700;line-height:1.65}
.back small{font-weight:700;font-size:.95rem;padding:2px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper)}
.a-text{font-family:'Changa';font-size:clamp(2rem,4.6vw,3.4rem);font-weight:800;line-height:1.35}
.q-mini{color:var(--ink-2);font-weight:500;max-width:85%}
.q-badge{position:absolute;top:14px;left:14px;padding:4px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--yellow);font-weight:700;transform:scale(0);transition:transform .3s var(--spring)}
.q-badge.on{transform:none}

.helpers{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.helper{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);font-weight:700;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .15s;text-align:start}
.helper:hover:not(:disabled){background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.helper:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.helper:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.helper .hi{width:30px;height:30px;display:grid;place-items:center;font-family:'Changa';font-weight:800}
.helper .hi svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.helper small{display:block;font-weight:500;color:var(--ink-2);font-size:.76rem}

.q-actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.kbd-hint{font-size:.82rem;color:var(--ink-2)}
.judge{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 18px;border:2.5px solid var(--ink);border-radius:var(--r);background:var(--paper);box-shadow:var(--sh);animation:enter .35s var(--ease)}
.judge-title{font-weight:700}
.judge-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-team{color:#fff;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.btn-team.ta{background:var(--a)}
.btn-team.tb{background:var(--b)}

/* ---------- الفائز ---------- */
#screen-winner{align-items:center;justify-content:center}
.win-wrap{width:min(680px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.win-name{font-size:clamp(2.6rem,9vw,4.6rem);line-height:1.15}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:22px;height:280px;width:100%;margin:8px 0}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(190px,42%)}
.pod .crown{font-family:'Changa';font-weight:800;font-size:.85rem;padding:2px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--yellow);visibility:hidden}
.pod.win .crown{visibility:visible}
.pod .badge{width:58px;height:58px;font-size:1.6rem}
.pod-name{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-block{width:100%;border:2.5px solid var(--ink);border-radius:12px 12px 0 0;box-shadow:var(--sh);display:flex;justify-content:center;padding-top:12px;
  font-family:'Changa';font-weight:800;font-size:2rem;color:#fff;animation:grow .9s var(--spring) backwards .2s;transform-origin:bottom}
@keyframes grow{from{transform:scaleY(0)}}
.pod.ta .pod-block{background:var(--a)}.pod.tb .pod-block{background:var(--b)}
.win-stats{width:100%;border-collapse:collapse;border:2.5px solid var(--ink);border-radius:var(--r);background:var(--paper);overflow:hidden;margin:6px 0 16px;box-shadow:var(--sh)}
.win-stats td{padding:10px 14px;border-bottom:2px solid rgba(30,27,22,.12);font-weight:600}
.win-stats tr:last-child td{border:0}
.win-stats td:first-child,.win-stats td:last-child{font-family:'Changa';font-weight:800;font-size:1.2rem;width:22%}
.win-stats thead td{background:var(--bg-2);font-weight:700}
.win-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

/* ---------- نافذة ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(30,27,22,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:28px 24px 24px;
  transform:perspective(1000px) rotateX(-28deg) translateY(30px) scale(.94);transform-origin:50% 0;transition:transform .5s var(--spring)}
.modal-card.wide{width:min(760px,100%)}
.modal.open .modal-card{transform:none}
.modal-x{position:absolute;top:12px;left:12px;width:34px;height:34px;border:2px solid var(--ink);border-radius:8px;font-weight:700;background:#fff}
.modal-x:hover{background:var(--yellow)}
.modal-card h3{font-size:1.5rem;margin-bottom:12px;padding-left:40px}
.modal-card ol{padding-inline-start:20px;line-height:2}
.modal-card p{line-height:1.85;color:var(--ink-2)}
.m-actions{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.friend-timer{font-family:'Changa';font-size:5rem;font-weight:800;text-align:center;margin:6px 0}

.coin-stage{perspective:800px;display:grid;place-items:center;height:200px}
.coin{position:relative;width:140px;height:140px;transform-style:preserve-3d;transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.coin-face{position:absolute;inset:0;border-radius:50%;border:4px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:'Changa';font-weight:800;font-size:3rem}
.coin-face small{font-family:'IBM Plex Sans Arabic';font-size:.85rem;font-weight:700;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coin-face.f0{background:var(--a)}
.coin-face.f1{background:var(--b);transform:rotateY(180deg)}

.cm-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.cm-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.cm-item .mini{width:52px;aspect-ratio:4/3;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.cm-item .mini svg{width:100%;height:100%;display:block}
.cm-item b{flex:1}
.empty{text-align:center;color:var(--ink-2);padding:20px;border:2px dashed var(--ink-2);border-radius:12px;margin-bottom:6px}
.ed-top{display:grid;grid-template-columns:80px 1fr;gap:10px;margin-bottom:14px}
.field{width:100%;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:10px 12px;font-weight:500;outline:none}
.field:focus{box-shadow:0 0 0 3px var(--yellow)}
.ed-top .field:first-child{text-align:center;font-size:1.3rem}
.ed-lv{margin-bottom:14px}
.ed-lv h4{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:700}
.ed-lv h4 span{padding:1px 10px;border-radius:6px;background:var(--ink);color:var(--yellow);font-family:'Changa'}
.ed-lv h4 small{color:var(--ink-2);font-weight:500}
.ed-row{display:grid;grid-template-columns:1.6fr 1fr;gap:8px;margin-bottom:8px}
.ed-err{color:var(--b);font-weight:700;text-align:center;min-height:1.4em}

.log{display:flex;flex-direction:column;gap:8px}
.log-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.log-item .mini{width:52px;aspect-ratio:4/3;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.log-item .mini svg{width:100%;height:100%;display:block}
.log-item p{font-size:.92rem;line-height:1.55;color:var(--ink)}
.log-item p small{display:block;color:var(--ink-2);font-weight:600}
.log-res{font-weight:700;font-size:.85rem;padding:3px 10px;border:2px solid var(--ink);border-radius:8px;white-space:nowrap;color:#fff}
.log-res.r0{background:var(--a)}.log-res.r1{background:var(--b)}.log-res.rn{background:#fff;color:var(--ink-2)}

.adj{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adj-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:2px solid var(--ink);border-radius:14px;background:#fff}
.adj-card b{font-family:'Changa';font-size:2.2rem}
.adj-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.adj-btns button{padding:5px 10px;border:2px solid var(--ink);border-radius:8px;font-weight:700;background:var(--paper)}
.adj-btns button:hover{background:var(--yellow)}

/* بانر */
.banner{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}
.banner-txt{padding:18px 40px;border:3px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:8px 8px 0 var(--ink);
  font-family:'Changa';font-weight:800;font-size:clamp(1.8rem,6vw,3.6rem);white-space:nowrap;opacity:0}
.banner-txt.ta{background:var(--a);color:#fff}
.banner-txt.tb{background:var(--b);color:#fff}
.banner-txt.gold{background:var(--gold)}
.banner-txt.steal{background:var(--yellow)}
.banner-txt.play{animation:bannerIn 1.4s var(--ease) both}
.banner{perspective:900px}
.banner-txt{transform-origin:50% 0}
@keyframes bannerIn{
  0%{opacity:0;transform:translateY(-50px) rotateX(-100deg)}
  18%{opacity:1;transform:rotateX(22deg) rotate(-2deg)}
  27%{transform:rotateX(-10deg) rotate(-2deg)}
  35%{transform:rotateX(4deg) rotate(-2deg)}
  42%{transform:rotateX(0) rotate(-2deg)}
  80%{opacity:1;transform:rotate(-2deg)}
  100%{opacity:0;transform:translateY(30px) rotateX(80deg) rotate(-2deg)}}

.fly{position:fixed;z-index:65;font-family:'Changa';font-weight:800;font-size:2.6rem;padding:2px 16px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:4px 4px 0 var(--ink);pointer-events:none}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;z-index:80;padding:10px 18px;border:2.5px solid var(--ink);border-radius:12px;background:var(--ink);color:var(--yellow);font-weight:700;transition:.25s var(--ease);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:75}

/* ---------- الجوال والتابلت ---------- */
@media (max-width:1100px){
  .board{grid-template-columns:repeat(3,1fr)}
  .home{grid-template-columns:1fr;gap:10px}
  .home-art{height:340px;max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:760px){
  .screen{padding:14px 16px 22px}
  .site-nav{gap:14px;font-size:.92rem}
  .home-title{margin:14px 0 10px}
  .home-lead{font-size:1.02rem}
  .home-cta .btn{flex:1}
  .home-art{height:270px}
  .stepper span{display:none}
  .stepper li{padding:4px}
  .teams-row{grid-template-columns:1fr;gap:12px}
  .badge.big{width:64px;height:64px;font-size:1.8rem}
  .pick-bar{grid-template-columns:1fr;gap:10px}
  .slots i{width:38px;height:28px}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .set-row{flex-wrap:wrap}
  .board-bar{flex-wrap:wrap}
  .toolbar{width:100%;overflow-x:auto}
  .toolbar button{flex:1;padding:8px 10px;font-size:.85rem}
  .hud{grid-template-columns:1fr 1fr;gap:10px}
  .hud-mid{grid-column:1/-1;grid-row:1;flex-direction:row;min-width:0;gap:10px}
  .hud-mid .progress{flex:1}
  .team-hud{padding:8px 10px;gap:8px}
  .team-hud .badge{width:32px;height:32px;font-size:.95rem}
  .th-name{font-size:.95rem}
  .th-meta .hd{display:none}
  .board{grid-template-columns:repeat(2,1fr)}
  .bar .turn{display:none}
  .timer{width:90px;height:90px}
  .timer b{font-size:2rem}
  .face{min-height:220px;box-shadow:5px 5px 0 var(--ink)}
  .face-art{width:72px}
  .helper small{display:none}
  .judge{position:sticky;bottom:10px;width:100%}
  .btn-team{flex:1 1 40%}
  .podium{height:220px}
  .adj{grid-template-columns:1fr}
  .ed-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   حركة + 3D
   ========================================================= */
/* أشكال الخلفية */
.deco{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  transform:translate(calc(var(--px,0) * 30px),calc(var(--py,0) * 30px));transition:transform .8s var(--ease)}
.deco .d{position:absolute;width:var(--s,46px);height:var(--s,46px);opacity:.22;animation:drift var(--t,22s) ease-in-out infinite;animation-delay:var(--w,0s)}
.deco svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.deco .d2 svg,.deco .d6 svg{fill:var(--yellow)}
.d1{top:12%;left:6%;--s:54px;--t:20s}
.d2{top:70%;left:4%;--s:40px;--t:24s;--w:-6s}
.d3{top:30%;left:46%;--s:60px;--t:28s;--w:-3s}
.d4{top:84%;left:40%;--s:36px;--t:18s;--w:-9s}
.d5{top:8%;left:58%;--s:30px;--t:21s;--w:-2s}
.d6{top:52%;right:5%;--s:44px;--t:26s;--w:-12s}
.d7{top:88%;right:18%;--s:42px;--t:23s;--w:-5s}
.d8{top:20%;right:30%;--s:34px;--t:19s;--w:-8s}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(0) rotateY(0)}
  33%{transform:translate(26px,-30px) rotate(25deg) rotateY(180deg)}
  66%{transform:translate(-18px,20px) rotate(-15deg) rotateY(360deg)}}

/* عنوان بارز ثلاثي الأبعاد */
.home-title{text-shadow:2px 2px 0 var(--yellow),4px 4px 0 var(--yellow),6px 6px 0 var(--yellow),8px 8px 0 var(--ink);
  transform-origin:50% 100%;animation:titleIn 1s var(--spring) backwards .1s}
@keyframes titleIn{from{opacity:0;transform:perspective(600px) rotateX(85deg) translateY(30px)}}
.home-title span{display:inline-block;animation:dotBounce 2.4s var(--spring) infinite 1.2s}
@keyframes dotBounce{0%,60%,100%{transform:none}70%{transform:translateY(-22px)}80%{transform:translateY(0) scaleY(.8)}}
.eyebrow{animation:enter .6s var(--ease) backwards}
.home-lead{animation:enter .7s var(--ease) backwards .25s}
.home-cta{animation:enter .7s var(--ease) backwards .35s}
.home-meta{animation:enter .7s var(--ease) backwards .45s}
.home-art{transform:translate(calc(var(--px,0) * -26px),calc(var(--py,0) * -26px));transition:transform .6s var(--ease);perspective:1200px}
.win-name{text-shadow:2px 2px 0 var(--yellow),4px 4px 0 var(--yellow),6px 6px 0 var(--ink);animation:titleIn .9s var(--spring) backwards .2s;transform-origin:50% 100%}

/* إمالة الكروت ثلاثية الأبعاد مع ظل يتحرك */
.card[data-tilt]{transform:perspective(800px) rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:var(--sx,4px) var(--sy,4px) 0 var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.home-art .card[data-tilt]{box-shadow:var(--sx,6px) var(--sy,6px) 0 var(--ink)}
.card[data-tilt].tilting{transition:transform .08s linear,box-shadow .08s linear}
button.card[data-tilt]:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(16px)}
.card[data-tilt] .art svg{transition:transform .4s var(--ease)}
.card[data-tilt].tilting .art svg{transform:scale(1.07)}
.board .col .card{transform-origin:50% 0}
#cat-grid .card{animation:catIn .6s var(--spring) backwards;animation-delay:calc(var(--i) * 35ms)}
@keyframes catIn{from{opacity:0;scale:.6;translate:0 30px}}

/* كلمات السؤال تطلع وحدة وحدة */
.q-text{perspective:600px}
.q-text .w{display:inline-block;animation:wIn .6s var(--spring) backwards;animation-delay:calc(var(--d) + .25s)}
@keyframes wIn{from{opacity:0;transform:translateY(22px) rotateX(-80deg)}}
.face-art{animation:artPop .7s var(--spring) backwards .15s}
@keyframes artPop{from{opacity:0;transform:scale(.4) rotate(-12deg)}}
.helpers .helper{animation:enter .45s var(--ease) backwards}
.helpers .helper:nth-child(1){animation-delay:.35s}.helpers .helper:nth-child(2){animation-delay:.42s}.helpers .helper:nth-child(3){animation-delay:.49s}
.timer.warn{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.07)}}

/* اللوحة و الـ HUD */
.team-hud.active .badge{animation:spinY 4s ease-in-out infinite}
@keyframes spinY{0%,75%{transform:none}90%{transform:perspective(200px) rotateY(180deg)}100%{transform:perspective(200px) rotateY(360deg)}}
.turn{animation:enter .4s var(--ease)}
.progress i{background-image:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(30,27,22,.15) 6px 12px);background-size:34px 100%;animation:stripes 1.2s linear infinite}
@keyframes stripes{to{background-position:34px 0}}

/* الفائز */
.pod.win .crown{animation:crownDrop .8s var(--spring) backwards 1s}
@keyframes crownDrop{from{opacity:0;transform:translateY(-60px) rotate(-30deg)}}
.pod .badge{animation:enter .6s var(--spring) backwards .8s}
.win-stats{animation:enter .6s var(--ease) backwards 1.1s}
.win-actions{animation:enter .6s var(--ease) backwards 1.3s}

@media (prefers-reduced-motion:reduce){
  .deco{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* =========================================================
   عداد الوقت فوق بالنص (ساعة إيقاف)
   ========================================================= */
.q-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;margin:4px auto 22px;width:min(1200px,100%)}
.q-side{display:flex;align-items:center;gap:10px;min-height:46px;flex-wrap:wrap}
.q-left{justify-content:flex-end}
.q-meta{flex:none}
.clock-wrap{display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:40px}
.clock{display:flex;align-items:center;gap:14px;padding:8px 14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:var(--sh);height:64px}
.clock .timer{width:118px;height:118px;margin:-30px 0 -26px;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;position:relative}
.clock .timer svg{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);transform:rotate(-90deg)}
.clock .timer circle{fill:none;stroke-width:12}
.clock .timer .track{stroke:#FFF3C4}
.clock .timer .prog{stroke:var(--yellow);stroke-linecap:round;stroke-dasharray:326.7;transition:stroke-dashoffset .25s linear,stroke .3s}
.clock .timer .ticks path{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.knob{position:absolute;top:-17px;left:50%;width:22px;height:13px;margin-left:-11px;background:var(--ink);border-radius:5px 5px 2px 2px}
.knob::before{content:"";position:absolute;top:-7px;left:4px;right:4px;height:7px;background:var(--ink);border-radius:4px 4px 0 0}
.ear{position:absolute;top:2px;right:6px;width:16px;height:9px;background:var(--ink);border-radius:3px;transform:rotate(42deg)}
.t-face{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.t-face b{font-family:'Changa';font-weight:800;font-size:2.5rem;font-variant-numeric:tabular-nums;display:block}
.t-face small{font-size:.72rem;font-weight:700;color:var(--ink-2);margin-top:2px}
.clock .timer.warn{animation:pulse .5s ease-in-out infinite alternate}
.clock .timer.warn .prog{stroke:var(--b)}
.clock .timer.warn b{color:var(--b);animation:none}
.clock .timer.steal .prog{stroke:var(--gold)}
.clock .timer.run .knob{animation:knob 1s ease-in-out infinite}
@keyframes knob{0%,80%{transform:none}90%{transform:translateY(4px)}}
.clock-wrap .phase{margin:0;font-size:.92rem}

/* لوحة الحروف */
.letters{display:grid;grid-template-columns:repeat(14,1fr);gap:7px;width:100%;max-width:760px;position:relative}
.letters .cap{grid-column:1/-1;justify-self:center;font-weight:700;font-size:.9rem;color:var(--ink-2);margin-bottom:4px}
.letters span:not(.cap){aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;background:#fff;
  font-family:'Changa';font-weight:700;font-size:clamp(.95rem,2vw,1.4rem);color:var(--ink-2);
  animation:lIn .45s var(--spring) backwards;animation-delay:calc(var(--k) * 22ms + .2s)}
@keyframes lIn{from{opacity:0;transform:perspective(300px) rotateX(-90deg)}}
.letters span.hit{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);transform:scale(1.3) rotate(-5deg);z-index:1;
  animation:hit .9s var(--spring) backwards 1s,glow 1.6s ease-in-out infinite 2s}
@keyframes hit{0%{transform:scale(1);background:#fff}40%{transform:scale(1.6) rotate(8deg)}}
@keyframes glow{50%{box-shadow:3px 3px 0 var(--ink),0 0 0 6px rgba(255,210,63,.45)}}
.q-hint{font-weight:700;padding:5px 14px;border:2px dashed var(--ink);border-radius:10px;background:#fff;animation:enter .4s var(--ease)}

/* ساعة اللعبة */
.game-clock{font-family:'Changa';font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem;padding:1px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--paper)}

@media (max-width:760px){
  .q-head{grid-template-columns:1fr auto;grid-template-areas:"r l" "c c";row-gap:6px}
  .q-right{grid-area:r}.q-left{grid-area:l}.clock-wrap{grid-area:c;padding-top:36px;gap:24px}
  .clock{height:56px;gap:10px}
  .clock .timer{width:98px;height:98px;margin:-26px 0 -22px}
  .t-face b{font-size:2rem}
  .letters{grid-template-columns:repeat(7,1fr);gap:5px}
  .letters span.hit{transform:scale(1.2) rotate(-5deg)}
}

/* =========================================================
   أزرار المساعدات + تعديل النقاط
   ========================================================= */
.th-meta{flex-wrap:wrap;gap:6px;margin-top:6px}
.hchip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 3px;border:2px solid var(--ink);border-radius:999px;background:#fff;
  font-weight:700;font-size:.78rem;box-shadow:2px 2px 0 var(--ink);user-select:none;transition:transform .15s var(--ease),box-shadow .15s,background .15s}
.hchip i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:var(--yellow);display:grid;place-items:center;
  font-style:normal;font-family:'Changa';font-weight:800;font-size:.72rem;line-height:1}
.hchip i svg{width:13px;height:13px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hchip:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:#FFFBEA}
.hchip:active{transform:translate(2px,2px);box-shadow:none}
.hchip.used{opacity:.4;box-shadow:none;background:transparent}
.hchip.used span{text-decoration:line-through}
.hchip.used i{background:#E9E4D4}
.team-hud.tb .th-meta{justify-content:flex-end}

.th-score-wrap{display:flex;align-items:center;gap:10px}
.edit-score{width:32px;height:32px;flex:none;border:2px solid var(--ink);border-radius:9px;background:var(--paper);display:grid;place-items:center;
  box-shadow:2px 2px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s,background .15s}
.edit-score svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.edit-score:hover{background:var(--yellow);transform:translate(-1px,-1px) rotate(-8deg);box-shadow:3px 3px 0 var(--ink)}
.edit-score:active{transform:translate(2px,2px);box-shadow:none}

#score-pop{position:fixed;z-index:55;display:none;padding:12px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);transform-origin:var(--arrow,50%) 0}
#score-pop.open{display:block;animation:popIn .3s var(--spring)}
#score-pop::before{content:"";position:absolute;top:-9px;left:calc(var(--arrow,50%) - 8px);width:14px;height:14px;background:var(--paper);border-top:2.5px solid var(--ink);border-left:2.5px solid var(--ink);transform:rotate(45deg)}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.85)}}
.sp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700}
.sp-head .badge{width:26px;height:26px;font-size:.85rem;border-width:2px}
.sp-btns{display:grid;grid-template-columns:repeat(4,auto);gap:8px;direction:ltr}
.sp-btns button{min-width:62px;padding:8px 10px;border:2px solid var(--ink);border-radius:10px;font-family:'Changa';font-weight:800;font-size:1.05rem;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.sp-btns button:active{transform:translate(2px,2px);box-shadow:none}
.sp-btns .minus{background:var(--b-soft)}
.sp-btns .plus{background:#DFF5E1}
.sp-btns button:hover{filter:brightness(.96)}

/* مساعدات صفحة السؤال */
.helpers{gap:12px}
.helper{padding:8px 16px 8px 8px;border-radius:999px}
.helper .hi{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink);font-size:1rem}
.helper .hi svg{width:19px;height:19px}
.helper:hover:not(:disabled) .hi{transform:rotate(-10deg) scale(1.08)}
.helper .hi{transition:transform .25s var(--spring)}
.helper:disabled .hi{background:#E9E4D4;box-shadow:none}
.helper:disabled span{text-decoration:line-through}
.helper:disabled small{text-decoration:none}

@media (max-width:760px){
  .hchip span{display:none}
  .hchip{padding:2px}
  .th-score-wrap{gap:6px}
  .edit-score{width:28px;height:28px}
  .sp-btns{grid-template-columns:repeat(2,auto)}
  .helper{padding:6px 12px 6px 6px}
  .helper .hi{width:32px;height:32px}
}

/* =========================================================
   فئات الحركة: زر "اضغط مطوّل" لعرض الكلمة
   ========================================================= */
.peek{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:2.5px dashed var(--ink);border-radius:14px;background:#fff;
  font-weight:700;user-select:none;-webkit-user-select:none;touch-action:none;transition:background .15s;animation:enter .5s var(--ease) backwards .5s}
.peek svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.peek:hover{background:#FFFBEA}
.peek:active{background:var(--yellow);border-style:solid}
.peek-card{position:absolute;inset:0;z-index:3;border-radius:inherit;background:var(--yellow);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;text-align:center;opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .15s,transform .2s var(--spring)}
.peek-card.show{opacity:1;transform:none}
.peek-card small{font-weight:700;padding:2px 10px;border:2px solid var(--ink);border-radius:6px;background:var(--paper)}
.peek-card b{font-family:'Changa';font-size:clamp(2rem,5vw,3.6rem);font-weight:800;line-height:1.3}
.peek-card p{font-weight:700;font-size:1.05rem;padding:4px 12px;border-radius:8px;background:var(--paper);border:2px solid var(--ink)}
.peek-card p:empty{display:none}

/* =========================================================
   تسجيل الدخول
   ========================================================= */
.auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;width:min(1120px,100%);margin:0 auto;padding:28px clamp(16px,4vw,44px)}
.auth-side .home-title{margin:22px 0 30px;line-height:1.15}
.auth-plans{list-style:none;display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.auth-plans li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:var(--sh);min-width:118px;animation:enter .5s var(--ease) backwards}
.auth-plans li:nth-child(2){animation-delay:.08s}.auth-plans li:nth-child(3){animation-delay:.16s}
.auth-plans b{font-family:'Changa';font-size:1.3rem}
.auth-plans span{color:var(--ink-2);font-weight:600}
.auth-card{border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);box-shadow:8px 8px 0 var(--ink);padding:26px;animation:enter .6s var(--spring) backwards .15s}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;border:2.5px solid var(--ink);border-radius:12px;overflow:hidden;margin-bottom:22px}
.auth-tabs button{padding:11px;font-weight:700}
.auth-tabs button+button{border-inline-start:2.5px solid var(--ink)}
.auth-tabs button.on{background:var(--ink);color:var(--yellow)}
#auth-form{display:flex;flex-direction:column;gap:14px}
.fld{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.95rem}
.fld .field{padding:13px 14px;font-size:1.02rem;border-width:2.5px}
#auth-form .btn{width:100%;margin-top:4px}
.auth-switch{text-align:center;color:var(--ink-2);font-size:.95rem}
.auth ~ .deco{z-index:-1}

/* =========================================================
   شريط الحساب
   ========================================================= */
.site-nav{align-items:center}
.acct{display:flex;align-items:center;gap:10px}
.credits{padding:7px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:600;box-shadow:2px 2px 0 var(--ink);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.credits b{font-family:'Changa';font-size:1.05rem}
.credits:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);background:#FFFBEA}
.credits.zero{background:var(--b-soft)}
.credits.inf{background:var(--yellow)}
.acct-menu{position:relative}
.acct-btn{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 3px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.acct-btn .badge{width:30px;height:30px;font-size:.9rem;border-width:2px}
.acct-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-drop{position:absolute;top:calc(100% + 10px);left:0;z-index:40;min-width:220px;display:none;flex-direction:column;padding:8px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.acct-drop.open{display:flex;animation:popIn .25s var(--spring)}
.acct-drop small{padding:6px 10px 10px;color:var(--ink-2);border-bottom:2px solid rgba(30,27,22,.12);margin-bottom:4px;text-align:right}
.acct-drop a,.acct-drop button{display:block;text-align:right;padding:9px 10px;border-radius:8px;font-weight:600}
.acct-drop a:hover,.acct-drop button:hover{background:var(--yellow)}
.acct-drop .danger{color:var(--b)}

/* الباقات */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 14px 16px;border:2.5px solid var(--ink);border-radius:16px;background:#fff;box-shadow:4px 4px 0 var(--ink);text-align:center;animation:enter .45s var(--spring) backwards}
.plan:nth-child(2){animation-delay:.07s}.plan:nth-child(3){animation-delay:.14s}
.plan.best{background:#FFFBEA;transform:translateY(-6px)}
.plan.life{background:var(--yellow)}
.ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:2px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--b);color:#fff;font-weight:700;font-size:.82rem}
.pl-n{font-family:'Changa';font-weight:800;font-size:2.8rem;line-height:1}
.pl-l{font-weight:700;color:var(--ink-2)}
.pl-p{font-family:'Changa';font-size:1.6rem;margin-top:8px}
.pl-p small{font-size:.9rem}
.pl-x{color:var(--ink-2);font-size:.8rem;min-height:1.2em}
.pl-btns{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:12px}
.order-box{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px;margin:8px 0 14px;border:2.5px dashed var(--ink);border-radius:14px;background:#fff}
.order-box b{font-family:'Changa';font-size:2.4rem}
.order-box span{color:var(--ink-2);font-weight:600}
.pay-info{padding:12px 14px;border-radius:10px;background:var(--yellow);border:2px solid var(--ink);color:var(--ink)!important;font-weight:600;margin-bottom:8px}
.ord-id{font-family:'Changa';font-size:1.1rem}
.ord-st{font-weight:700;font-size:.82rem;padding:3px 10px;border:2px solid var(--ink);border-radius:8px;white-space:nowrap}
.ord-st.paid{background:#DFF5E1}.ord-st.pending{background:#FFF3C4}.ord-st.rejected{background:var(--b-soft)}
.stack{display:flex;flex-direction:column;gap:10px}
.btn-danger{background:var(--b);color:#fff}

/* =========================================================
   لوحة الأدمن
   ========================================================= */
.admin{width:min(1240px,100%);margin:0 auto;padding:20px clamp(14px,3vw,36px) 40px}
.admin-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.admin-head .spacer{flex:1}
.admin-tag{padding:4px 12px;border:2px solid var(--ink);border-radius:8px;background:var(--ink);color:var(--yellow);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:22px}
.stat{padding:14px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:var(--sh);animation:enter .45s var(--ease) backwards}
.stat:nth-child(2){animation-delay:.04s}.stat:nth-child(3){animation-delay:.08s}.stat:nth-child(4){animation-delay:.12s}.stat:nth-child(5){animation-delay:.16s}.stat:nth-child(6){animation-delay:.2s}
.stat b{display:block;font-family:'Changa';font-size:1.8rem;line-height:1.2}
.stat span{color:var(--ink-2);font-weight:600;font-size:.9rem}
.admin-tabs{display:flex;gap:8px;margin-bottom:14px}
.admin-tabs button{padding:9px 18px;border:2.5px solid var(--ink);border-radius:12px;background:var(--paper);font-weight:700;display:flex;align-items:center;gap:8px}
.admin-tabs button.on{background:var(--ink);color:var(--yellow)}
.count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--b);color:#fff;font-size:.78rem;display:grid;place-items:center}
.panel{border:2.5px solid var(--ink);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-lg);overflow:hidden}
.panel-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px;border-bottom:2.5px solid var(--ink);flex-wrap:wrap}
.search{max-width:360px}
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:760px}
.tbl th{text-align:right;padding:10px 14px;font-size:.85rem;color:var(--ink-2);background:var(--bg-2);border-bottom:2px solid var(--ink)}
.tbl td{padding:10px 14px;border-bottom:1.5px solid rgba(30,27,22,.12);vertical-align:middle}
.tbl td small{display:block;color:var(--ink-2)}
.tbl tr:hover td{background:#FFFBEA}
.tbl tr.is-banned td{opacity:.6}
.num{font-family:'Changa';font-weight:700;font-size:1.05rem}
.row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.pill{display:inline-block;padding:2px 10px;border:2px solid var(--ink);border-radius:8px;font-weight:700;font-size:.8rem;background:#fff;white-space:nowrap}
.pill.admin{background:var(--ink);color:var(--yellow)}
.pill.life{background:var(--yellow)}
.pill.ok{background:#DFF5E1}
.pill.pend{background:#FFF3C4}
.pill.banned{background:var(--b-soft)}
.empty-row{text-align:center;color:var(--ink-2);padding:30px!important}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.inline-form{display:flex;gap:8px;margin-top:10px}
.inline-form .field{flex:1}
.more-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.check{display:flex;align-items:center;gap:8px;font-weight:600}
.check input{width:18px;height:18px;accent-color:#1E1B16}

@media (max-width:900px){
  .auth{grid-template-columns:1fr;gap:24px}
  .auth-side .home-title{font-size:4rem}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .plans{grid-template-columns:1fr}
  .plan.best{transform:none}
  .site-head{flex-wrap:wrap}
  .site-nav{flex-wrap:wrap;gap:10px}
  .acct-name{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .admin-head{flex-wrap:wrap}
}

/* كود الإيميل في صفحة الدخول */
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form .btn{width:100%;margin-top:4px}
.view .step-title{margin-bottom:4px}
.forgot-link{align-self:flex-start;font-size:.9rem;margin-top:-6px}
.code-sub{text-align:center;color:var(--ink-2);margin-bottom:18px;line-height:1.8}
.code-sub b{color:var(--ink)}
.code-input{font-family:'Changa';font-size:2.2rem!important;font-weight:800;text-align:center;letter-spacing:.5em;padding:12px!important;border-width:3px!important}
.mail-ic{width:76px;height:76px;margin:0 auto 12px;border:3px solid var(--ink);border-radius:20px;background:var(--yellow);display:grid;place-items:center;box-shadow:4px 4px 0 var(--ink);animation:artPop .7s var(--spring) backwards}
.mail-ic svg{width:44px;height:44px;fill:#fff;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
#resend:disabled{opacity:.5;text-decoration:none;cursor:default}

/* لوحة الأدمن: الأسئلة والذكاء الاصطناعي */
.ai-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;padding:18px;border-bottom:2.5px solid var(--ink);flex-wrap:wrap}
.ai-info h3{font-family:'Changa';font-size:1.25rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ai-info p{color:var(--ink-2);line-height:1.9}
.ai-info b{color:var(--ink)}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap}
.ai-prog{max-width:360px;margin-top:10px}
.ai-cats{padding:10px 14px 14px}
.ai-cat{border:2px solid var(--ink);border-radius:12px;background:#fff;margin-top:8px;overflow:hidden}
.ai-cat summary{cursor:pointer;padding:10px 14px;display:flex;align-items:center;gap:10px;list-style:none}
.ai-cat summary::-webkit-details-marker{display:none}
.ai-cat summary::before{content:"+";font-family:'Changa';font-weight:800;width:20px}
.ai-cat[open] summary::before{content:"−"}
.ai-cat[open] summary{border-bottom:2px solid rgba(30,27,22,.12)}
.ai-lv{display:flex;gap:12px;padding:10px 14px;align-items:flex-start}
.ai-lv ol{padding-inline-start:18px;line-height:1.7;flex:1}
.ai-lv small{display:block;color:var(--ink-2);font-weight:600}