/* ═══════════════════════════════════════════════════════════
   حروف — نظام التصميم
   ═══════════════════════════════════════════════════════════ */
:root{
  /* الهوية */
  --p:#6C3BF4;  --p-dark:#4A22C4; --p-light:#8B62FF; --p-soft:#EFE9FF;
  --s:#00C2A8;  --s-dark:#009683; --s-soft:#DDF7F3;
  --a:#FF5D8F;  --a-dark:#DC3B6E; --a-soft:#FFE7EF;
  --gold:#FFB020; --gold-dark:#DF8F00; --gold-soft:#FFF3DC;
  --ok:#2ED573;  --ok-dark:#20A957; --ok-soft:#E1FAEB;
  --bad:#FF4757; --bad-dark:#D92B3B; --bad-soft:#FFE7E9;
  --warn:#FFA502;
  --locked:#C6C0DE; --locked-soft:#F0EDF8;

  /* الأسطح */
  --bg:#F5F3FF; --surface:#FFFFFF; --raised:#FBFAFF;
  --ink:#1A1236; --ink-2:#4A4270; --muted:#8880AC; --line:#E9E5F7;

  /* الشكل */
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:34px; --pill:999px;
  --sh-1:0 2px 8px rgba(26,18,54,.05);
  --sh-2:0 8px 24px rgba(26,18,54,.08);
  --sh-3:0 18px 44px rgba(70,40,160,.16);
  --ease:cubic-bezier(.34,1.56,.64,1);      /* ارتداد */
  --smooth:cubic-bezier(.4,0,.2,1);
  --gap:14px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Cairo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  overflow-x:hidden; overscroll-behavior-y:none;
  background-image:
    radial-gradient(circle at 12% 4%, #E9E0FF 0, transparent 42%),
    radial-gradient(circle at 88% 0%, #DAF6F1 0, transparent 38%);
  background-attachment:fixed;
}
h1{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.28rem;font-weight:700;letter-spacing:0}
b,strong{font-weight:800}
input,button{font-family:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.hide{display:none!important}
.muted{color:var(--muted);font-size:.88rem}
.ic{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.18em}
.ic.gold{color:var(--gold)}

/* ── الهيكل ───────────────────────────────────────────── */
#app{max-width:560px;margin:0 auto;padding:14px 16px calc(96px + env(safe-area-inset-bottom));min-height:100%}
.scr{display:none;flex-direction:column;gap:var(--gap)}
body[data-scr="splash"] #s-splash,body[data-scr="home"] #s-home,body[data-scr="create"] #s-create,
body[data-scr="join"] #s-join,body[data-scr="lobby"] #s-lobby,body[data-scr="play"] #s-play,
body[data-scr="review"] #s-review,body[data-scr="final"] #s-final,body[data-scr="board"] #s-board,
body[data-scr="profile"] #s-profile{display:flex;animation:scrIn .42s var(--smooth)}
@keyframes scrIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px 2px;min-height:44px}
.top h1{flex:1;text-align:center}
.top>span{width:42px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.35rem;font-weight:800}
.brand-tile{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;
  background:linear-gradient(150deg,var(--p-light),var(--p));box-shadow:0 4px 12px rgba(108,59,244,.42);
  font-size:1.1rem;animation:float 3.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}

/* ── الأزرار ──────────────────────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-weight:800;font-size:1rem;border-radius:var(--r);
  padding:14px 20px;position:relative;
  transition:transform .12s var(--smooth),box-shadow .12s var(--smooth),filter .15s;
  will-change:transform;
}
.btn-lg{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.16rem;padding:17px 22px;border-radius:var(--r-lg)}
.btn-sm{padding:9px 15px;font-size:.86rem;border-radius:var(--pill)}
.btn:active{transform:translateY(3px) scale(.985)}
.btn-primary{background:linear-gradient(180deg,var(--p-light),var(--p));color:#fff;box-shadow:0 5px 0 var(--p-dark),0 12px 24px rgba(108,59,244,.32)}
.btn-primary:active{box-shadow:0 2px 0 var(--p-dark),0 6px 12px rgba(108,59,244,.28)}
.btn-teal{background:linear-gradient(180deg,#1FD9C0,var(--s));color:#fff;box-shadow:0 5px 0 var(--s-dark),0 12px 24px rgba(0,194,168,.3)}
.btn-teal:active{box-shadow:0 2px 0 var(--s-dark)}
.btn-gold{background:linear-gradient(180deg,#FFC94D,var(--gold));color:#5A3B00;box-shadow:0 5px 0 var(--gold-dark),0 12px 24px rgba(255,176,32,.34)}
.btn-gold:active{box-shadow:0 2px 0 var(--gold-dark)}
.btn-stop{background:linear-gradient(180deg,#FF7A9C,var(--a));color:#fff;box-shadow:0 6px 0 var(--a-dark),0 16px 30px rgba(255,93,143,.4);
  font-size:1.3rem;letter-spacing:.5px}
.btn-stop:active{box-shadow:0 2px 0 var(--a-dark)}
.btn-stop.ready{animation:breathe 1.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.btn-ghost{background:var(--surface);color:var(--p);border:2px solid var(--line);box-shadow:var(--sh-1)}
.btn-ghost:active{background:var(--p-soft)}
.btn[disabled]{background:var(--locked-soft);color:var(--locked);box-shadow:none;pointer-events:none;border-color:transparent}
.btn-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:var(--surface);
  color:var(--ink-2);box-shadow:var(--sh-1);transition:transform .12s var(--ease)}
.btn-icon:active{transform:scale(.9)}
.btn-icon .ic{width:22px;height:22px}
@media(hover:hover){
  .btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
  .btn-primary:hover{box-shadow:0 7px 0 var(--p-dark),0 18px 30px rgba(108,59,244,.36)}
  .btn-teal:hover{box-shadow:0 7px 0 var(--s-dark),0 18px 30px rgba(0,194,168,.34)}
  .btn-icon:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}

/* ── البطاقات ─────────────────────────────────────────── */
.card{background:var(--surface);border-radius:var(--r-lg);padding:17px;box-shadow:var(--sh-2);border:1px solid var(--line)}
.card.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.lbl{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;margin-bottom:12px;color:var(--ink-2)}
.lbl .ic{color:var(--p)}
.lbl.pad{padding:0 4px;margin:6px 0 0}
.count{margin-inline-start:auto;background:var(--p-soft);color:var(--p);border-radius:var(--pill);padding:2px 11px;font-size:.8rem}
.hint{text-align:center;color:var(--muted);font-size:.85rem;margin:-4px 0 0}

/* ── الافتتاحية ───────────────────────────────────────── */
.splash{min-height:82vh;display:grid;place-content:center;justify-items:center;gap:22px;text-align:center}
.splash-tiles{display:flex;gap:10px;direction:rtl}
.splash-tiles .tile{width:62px;height:70px;display:grid;place-items:center;border-radius:20px;color:#fff;
  font-family:'Baloo Bhaijaan 2',sans-serif;font-size:2.2rem;font-weight:800;
  background:linear-gradient(160deg,var(--p-light),var(--p));box-shadow:0 10px 26px rgba(108,59,244,.34);
  animation:tileUp .6s var(--ease) both}
.tile.t2{background:linear-gradient(160deg,#1FD9C0,var(--s));box-shadow:0 10px 26px rgba(0,194,168,.32);animation-delay:.09s}
.tile.t3{background:linear-gradient(160deg,#FFC94D,var(--gold));box-shadow:0 10px 26px rgba(255,176,32,.34);animation-delay:.18s}
.tile.t4{background:linear-gradient(160deg,#FF8AAB,var(--a));box-shadow:0 10px 26px rgba(255,93,143,.32);animation-delay:.27s}
@keyframes tileUp{from{opacity:0;transform:translateY(26px) rotate(-12deg) scale(.7)}to{opacity:1;transform:none}}
.splash-sub{color:var(--muted);font-size:.9rem;font-weight:600}
.dots{display:flex;gap:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--p);opacity:.3;animation:blip 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes blip{0%,100%{opacity:.25;transform:scale(1)}40%{opacity:1;transform:scale(1.35)}}

/* ── بطاقة اللاعب ─────────────────────────────────────── */
.hero-card{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;padding:18px;
  border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-3);border:1px solid var(--line)}
.hero-glow{position:absolute;inset:auto -30% -70% -30%;height:170px;
  background:radial-gradient(ellipse at center,rgba(108,59,244,.16),transparent 68%);pointer-events:none}
.lvl{position:relative;width:88px;height:88px;flex:none}
.lvl-ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line);stroke-width:9}
.lvl-ring .ring-fg{fill:none;stroke:var(--p);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:270;stroke-dashoffset:270;transition:stroke-dashoffset 1.1s var(--smooth)}
.lvl-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.lvl-num b{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.9rem;color:var(--p)}
.lvl-num small{font-size:.6rem;color:var(--muted);font-weight:700}
.hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.name-input{width:100%;background:var(--raised);border:2px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);padding:10px 13px;font-weight:800;font-size:1.02rem;transition:border-color .2s,background-color .2s}
.name-input:focus{outline:none;border-color:var(--p);background:var(--surface);box-shadow:0 0 0 4px var(--p-soft)}
.xp-row{display:flex;align-items:center;gap:8px}
.xp-row b{font-size:.86rem;color:var(--gold-dark);min-width:34px;text-align:left}
.bar{flex:1;height:11px;border-radius:var(--pill);background:var(--line);overflow:hidden}
/* التعبئة بعرض كامل ونحرّكها بـ transform — بلا إعادة تخطيط كل إطار.
   الإزاحة للأيمن تُخفي الجزء غير المكتسب (اتجاه RTL: تمتلئ من اليمين). */
.bar i{display:block;height:100%;width:100%;border-radius:var(--pill);
  background:linear-gradient(90deg,var(--gold),#FFD46B);
  transform:translateX(100%);transition:transform 1s var(--smooth);will-change:transform;
  box-shadow:0 0 10px rgba(255,176,32,.6)}
.mini-stats{display:flex;gap:12px;font-size:.74rem;color:var(--muted);font-weight:600;flex-wrap:wrap}
.mini-stats b{color:var(--ink);font-size:.86rem}
.streak-pill{display:flex;align-items:center;gap:6px;background:var(--gold-soft);color:var(--gold-dark);
  font-weight:800;padding:7px 13px;border-radius:var(--pill);font-size:.9rem}
.streak-pill .ic{color:var(--warn)}

.how{background:var(--p-soft);border-radius:var(--r);padding:14px 16px;font-size:.83rem;color:var(--ink-2);line-height:1.75}
.how b{display:block;margin-bottom:4px;color:var(--p);font-size:.92rem}

/* ── خانات الرمز ──────────────────────────────────────── */
.code-boxes{display:flex;gap:10px;direction:ltr}
.code-boxes input{width:56px;height:66px;text-align:center;font-family:'Baloo Bhaijaan 2',sans-serif;
  font-size:1.9rem;font-weight:800;border-radius:var(--r-sm);border:2.5px solid var(--line);
  background:var(--raised);text-transform:uppercase;color:var(--p);
  transition:border-color .2s var(--ease),background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.code-boxes input:focus{outline:none;border-color:var(--p);background:var(--surface);transform:scale(1.06);box-shadow:0 0 0 4px var(--p-soft)}
.code-card{text-align:center;padding:20px;border-radius:var(--r-xl);color:#fff;
  background:linear-gradient(150deg,var(--p-light),var(--p) 60%,#4E1FC9);box-shadow:var(--sh-3);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.code-card small{opacity:.8;font-weight:700;font-size:.8rem}
.code-big{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:2.9rem;font-weight:800;letter-spacing:11px;
  direction:ltr;text-shadow:0 3px 12px rgba(0,0,0,.22)}
.code-card .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}

/* ── اللاعبون ─────────────────────────────────────────── */
.players{display:flex;flex-direction:column;gap:9px}
.prow{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--raised);border:1px solid var(--line);animation:pop .4s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.9) translateX(10px)}to{opacity:1;transform:none}}
.prow.me{background:var(--p-soft);border-color:#D9CCFF}
.prow b{flex:1;font-size:.95rem}
.avatar{width:38px;height:38px;flex:none;border-radius:13px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:1rem;box-shadow:var(--sh-1)}
.avatar.xl{width:74px;height:74px;border-radius:24px;font-size:1.9rem;font-family:'Baloo Bhaijaan 2',sans-serif}
.avatar.sm{width:30px;height:30px;border-radius:10px;font-size:.8rem}
.tag{font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:var(--pill)}
.tag.host{background:var(--gold-soft);color:var(--gold-dark)}
.tag.you{background:var(--s-soft);color:var(--s-dark)}
.pend{border:2px dashed #E2B4FF;background:#FBF4FF}
.pend-actions{display:flex;gap:7px}
.ok-btn,.no-btn{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;transition:transform .12s var(--ease)}
.ok-btn{background:var(--ok);box-shadow:0 3px 0 var(--ok-dark)}
.no-btn{background:var(--bad);box-shadow:0 3px 0 var(--bad-dark)}
.ok-btn:active,.no-btn:active{transform:translateY(2px) scale(.94)}

/* ── شاشة اللعب ───────────────────────────────────────── */
.reveal{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:10px;
  background:linear-gradient(160deg,#7C4CFF,#5423CC);color:#fff;animation:revIn .3s ease both}
.reveal.out{animation:revOut .5s var(--smooth) forwards}
@keyframes revIn{from{opacity:0}to{opacity:1}}
@keyframes revOut{to{opacity:0;transform:scale(1.12);visibility:hidden}}
.reveal-word{font-size:1.1rem;font-weight:700;opacity:.85;animation:pop .5s var(--ease) both}
.reveal-letter{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:min(46vw,220px);font-weight:800;line-height:1;
  text-shadow:0 10px 40px rgba(0,0,0,.3);animation:letterIn .8s var(--ease) both .15s}
@keyframes letterIn{0%{opacity:0;transform:scale(.2) rotate(-25deg)}60%{transform:scale(1.15) rotate(6deg)}100%{opacity:1;transform:none}}

.play-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border-radius:var(--r-lg);padding:11px 14px;box-shadow:var(--sh-2);border:1px solid var(--line)}
.round-pill{background:var(--p-soft);color:var(--p);font-weight:800;font-size:.82rem;padding:7px 13px;border-radius:var(--pill)}
.timer{position:relative;width:56px;height:56px}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer .ring-bg{stroke-width:6}
.timer .ring-fg{fill:none;stroke:var(--s);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:163.4;transition:stroke-dashoffset .35s linear,stroke .3s}
.timer b{position:absolute;inset:0;display:grid;place-content:center;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.15rem;color:var(--ink)}
.timer.low .ring-fg{stroke:var(--bad)}
.timer.low b{color:var(--bad)}
.timer.low{animation:tick .9s ease-in-out infinite}
@keyframes tick{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.letter-chip{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;color:#fff;
  font-family:'Baloo Bhaijaan 2',sans-serif;font-size:2rem;font-weight:800;
  background:linear-gradient(160deg,var(--p-light),var(--p));box-shadow:0 6px 16px rgba(108,59,244,.4)}
.letter-chip.sm{width:42px;height:42px;font-size:1.5rem;border-radius:14px}

.fields{display:flex;flex-direction:column;gap:10px}
.field{position:relative;display:flex;align-items:center;gap:11px;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r);padding:4px 13px;box-shadow:var(--sh-1);
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.field:focus-within{border-color:var(--p);box-shadow:0 0 0 4px var(--p-soft);transform:translateY(-1px)}
.field.done{border-color:var(--ok)}
.field label{width:78px;flex:none;font-weight:800;font-size:.84rem;color:var(--ink-2)}
.field input{flex:1;min-width:0;border:0;background:none;color:var(--ink);padding:14px 0;font-size:1rem;font-weight:700}
.field input::placeholder{color:var(--muted)}
.field input:focus{outline:none}
.field .fmark{width:26px;height:26px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:var(--ok);color:#fff;opacity:0;transform:scale(.4)}
.field.done .fmark{animation:markPop .45s var(--ease) forwards}
@keyframes markPop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
.field.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.stop-wrap{position:sticky;bottom:calc(78px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:6px}
.fill-hint{font-size:.78rem;font-weight:800;color:var(--muted)}
.stop-wrap .btn{width:100%}

/* ── جدول المراجعة ────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--sh-2);background:var(--surface);
  border:1px solid var(--line);-webkit-overflow-scrolling:touch}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:.83rem}
table.grid th,table.grid td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid thead th{background:var(--p-soft);color:var(--p);font-weight:800;font-size:.76rem;position:sticky;top:0}
table.grid thead th:first-child{background:var(--p);color:#fff;border-start-start-radius:var(--r-lg);
  font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.5rem;position:sticky;inset-inline-start:0;z-index:3}
table.grid tbody th{background:var(--raised);position:sticky;inset-inline-start:0;z-index:2;text-align:start;
  font-weight:800;box-shadow:1px 0 0 var(--line);min-width:104px}
.thp{display:flex;align-items:center;gap:7px}
table.grid td.cell{min-width:88px;transition:background .2s}
td.cell .val{font-weight:700;display:block;line-height:1.4}
td.cell .pts{display:inline-block;margin-top:3px;font-size:.68rem;font-weight:800;padding:1px 8px;border-radius:var(--pill);
  animation:pop .4s var(--ease) both}
td.ok{background:var(--ok-soft)} td.ok .pts{background:var(--ok);color:#fff}
td.dup{background:var(--gold-soft)} td.dup .pts{background:var(--gold);color:#5A3B00}
td.cancel{background:var(--locked-soft)} td.cancel .val{text-decoration:line-through;color:var(--muted)}
td.cancel .pts{background:var(--locked);color:#fff}
td.empty .val{color:var(--locked)}
td.tot{background:var(--p-soft);font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.15rem;color:var(--p);font-weight:800}
.legend{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;font-size:.74rem;color:var(--muted);font-weight:600}
.legend .dot{width:10px;height:10px;border-radius:4px;display:inline-block;vertical-align:-1px;margin-inline-end:4px}
.dot.ok{background:var(--ok)}.dot.dup{background:var(--gold)}.dot.bad{background:var(--warn)}.dot.cancel{background:var(--locked)}

/* ── النهاية ──────────────────────────────────────────── */
.final-head{text-align:center;padding:8px 0}
/* لون صريح لا متدرّج: الطرف الذهبي كان باهتاً على الخلفية الفاتحة.
   الاحتفال يحمله الكونفيتي والمنصة الذهبية. */
.final-head h1{font-size:1.9rem;color:var(--p);animation:pop .6s var(--ease) both}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:9px;margin-top:6px}
.pod{flex:1;max-width:132px;display:flex;flex-direction:column;align-items:center;gap:8px;
  animation:podUp .7s var(--ease) both}
.pod:nth-child(1){animation-delay:.35s}.pod:nth-child(2){animation-delay:.1s}.pod:nth-child(3){animation-delay:.55s}
@keyframes podUp{from{opacity:0;transform:translateY(50px) scale(.85)}to{opacity:1;transform:none}}
.pod .avatar{width:54px;height:54px;border-radius:18px;font-size:1.3rem}
.pod-name{font-weight:800;font-size:.84rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-base{width:100%;border-radius:var(--r) var(--r) 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:2px;padding:11px 6px;color:#fff}
.pod-base .rank{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.7rem;line-height:1}
.pod-base .sc{font-size:.9rem;font-weight:800;opacity:.95}
.pod1 .pod-base{height:128px;background:linear-gradient(180deg,#FFD35C,var(--gold));box-shadow:0 -6px 26px rgba(255,176,32,.5)}
.pod2 .pod-base{height:98px;background:linear-gradient(180deg,#CBD5E1,#94A3B8)}
.pod3 .pod-base{height:80px;background:linear-gradient(180deg,#E8A87C,#C97B4E)}
.pod1 .crown{color:var(--gold);animation:float 2.4s ease-in-out infinite}
.pod1 .avatar{box-shadow:0 0 0 4px #fff,0 8px 24px rgba(255,176,32,.55)}
.rest{display:flex;flex-direction:column;gap:8px}
.rrow{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 13px;box-shadow:var(--sh-1);animation:pop .4s var(--ease) both}
.rrow .rk{width:26px;font-weight:800;color:var(--muted);text-align:center}
.rrow b{flex:1;font-size:.92rem}
.rrow .sc{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.1rem;color:var(--ink-2)}

/* ── الصدارة ──────────────────────────────────────────── */
.brow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 14px;box-shadow:var(--sh-1);margin-bottom:9px;animation:pop .4s var(--ease) both}
.brow .rk{width:30px;text-align:center;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.2rem;color:var(--muted)}
.brow.top1{background:linear-gradient(100deg,var(--gold-soft),#fff);border-color:#FFE0A3}
.brow.top1 .rk{color:var(--gold-dark)}
.brow.top2{background:linear-gradient(100deg,#F1F5F9,#fff)}.brow.top3{background:linear-gradient(100deg,#FBEDE4,#fff)}
.brow .who{flex:1;min-width:0}
.brow .who b{display:block;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .who small{color:var(--muted);font-size:.72rem;font-weight:600}
.brow .xp{display:flex;align-items:center;gap:4px;color:var(--gold-dark);font-weight:800;font-size:.9rem}

/* ── الملف والأوسمة ───────────────────────────────────── */
.prof-card{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.prof-card>b{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.3rem}
.prof-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:4px}
.pstat{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 4px}
.pstat b{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.35rem;color:var(--p);line-height:1.1}
.pstat small{font-size:.66rem;color:var(--muted);font-weight:700}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px}
.ach{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 8px;
  text-align:center;box-shadow:var(--sh-1);display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .2s var(--ease)}
.ach .emo{font-size:1.7rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.14))}
.ach b{font-size:.76rem}.ach small{font-size:.64rem;color:var(--muted);font-weight:600}
.ach.locked{background:var(--locked-soft);border-style:dashed;box-shadow:none}
.ach.locked .emo{filter:grayscale(1);opacity:.4}
.ach.locked b{color:var(--locked)}
.ach.wiggle{animation:wig .45s}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.ach.got{animation:achIn .6s var(--ease) both}
@keyframes achIn{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}

/* ── الانتظار ─────────────────────────────────────────── */
.waiting{display:flex;flex-direction:column;align-items:center;gap:16px;padding:26px 0;text-align:center}
.pulse-ring{width:58px;height:58px;border-radius:50%;border:5px solid var(--p-soft);border-top-color:var(--p);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .emo{font-size:3rem;display:block;margin-bottom:10px;animation:float 3.4s ease-in-out infinite}

/* ── التنقل السفلي ────────────────────────────────────── */
#tabs{position:fixed;inset-inline:0;bottom:0;z-index:40;display:none;justify-content:center;gap:6px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
body[data-scr="home"] #tabs,body[data-scr="board"] #tabs,body[data-scr="profile"] #tabs{display:flex}
#tabs button{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px;border-radius:var(--r-sm);color:var(--muted);font-size:.68rem;font-weight:800;
  transition:color .22s var(--ease),background-color .22s var(--ease),transform .22s var(--ease)}
#tabs button .ic{width:23px;height:23px}
#tabs button.on{color:var(--p);background:var(--p-soft)}
#tabs button.on .ic{transform:translateY(-2px) scale(1.1)}
#tabs button:active{transform:scale(.92)}

/* ── تنبيهات ──────────────────────────────────────────── */
#toasts{position:fixed;top:14px;inset-inline:0;z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--pill);font-weight:700;font-size:.88rem;
  box-shadow:var(--sh-3);animation:tIn .4s var(--ease),tOut .35s ease 2.6s forwards;max-width:88vw;text-align:center}
.toast.err{background:var(--bad)}.toast.good{background:var(--ok-dark)}
@keyframes tIn{from{opacity:0;transform:translateY(-24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(-14px) scale(.96)}}

#fx{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
#fx.on{display:block}


/* ── الوضع الليلي ────────────────────────────────────── */
:root[data-theme="dark"]{
  --p:#8B62FF;  --p-dark:#5A2FD8; --p-light:#A585FF; --p-soft:#2B2154;
  --s:#1FD9C0;  --s-dark:#0E8C7B; --s-soft:#123832;
  --a:#FF7A9C;  --a-dark:#C93E68; --a-soft:#3B1F2B;
  --gold:#FFC14D; --gold-dark:#C98C10; --gold-soft:#3C2E12;
  --ok:#3DE07F;  --ok-dark:#1C9350; --ok-soft:#123521;
  --bad:#FF6B75; --bad-dark:#C42F3C; --bad-soft:#3B1B20;
  --locked:#5B5386; --locked-soft:#241F3E;
  --bg:#100D1F; --surface:#1B1733; --raised:#221C40;
  --ink:#F3F0FF; --ink-2:#CFC8EC; --muted:#948CBC; --line:#2E2752;
  --sh-1:0 2px 8px rgba(0,0,0,.45);
  --sh-2:0 8px 24px rgba(0,0,0,.5);
  --sh-3:0 18px 44px rgba(0,0,0,.6);
}
:root[data-theme="dark"] body{
  background-image:
    radial-gradient(circle at 12% 4%, #241A47 0, transparent 44%),
    radial-gradient(circle at 88% 0%, #123B39 0, transparent 40%);
}
:root[data-theme="dark"] #tabs{background:rgba(27,23,51,.9)}
:root[data-theme="dark"] .code-card{background:linear-gradient(150deg,#6E45D6,#4A22C4 60%,#331585)}
:root[data-theme="dark"] .reveal{background:linear-gradient(160deg,#5B31C4,#33169B)}
:root[data-theme="dark"] .brow.top1{background:linear-gradient(100deg,var(--gold-soft),var(--surface));border-color:#5A4415}
:root[data-theme="dark"] .brow.top2{background:linear-gradient(100deg,#262B36,var(--surface))}
:root[data-theme="dark"] .brow.top3{background:linear-gradient(100deg,#33241C,var(--surface))}
:root[data-theme="dark"] .pend{background:#2A1B3D;border-color:#6B3F94}
:root[data-theme="dark"] .btn-gold{color:#2A1B00}
:root[data-theme="dark"] td.dup .pts{color:#3A2600}

/* ── الرقم المكتوب ───────────────────────────────────── */
.stepper{display:flex;align-items:center;gap:10px}
.step{width:48px;height:52px;flex:none;border-radius:var(--r-sm);background:var(--p-soft);color:var(--p);
  font-size:1.5rem;font-weight:800;line-height:1;transition:transform .12s var(--ease),background .2s}
.step:active{transform:scale(.9)}
@media(hover:hover){.step:hover{background:var(--p);color:#fff}}
.num{flex:1;min-width:0;height:52px;text-align:center;border-radius:var(--r-sm);border:2.5px solid var(--line);
  background:var(--raised);font-family:'Baloo Bhaijaan 2',sans-serif;font-size:1.6rem;font-weight:800;
  color:var(--p);transition:border-color .2s,background-color .2s,box-shadow .2s}
.num:focus{outline:none;border-color:var(--p);background:var(--surface);box-shadow:0 0 0 4px var(--p-soft)}
.num::-webkit-outer-spin-button,.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num[type=number]{-moz-appearance:textfield}
.sub{margin-top:9px;text-align:center;font-size:.78rem;color:var(--muted);font-weight:600}
.head-right{display:flex;align-items:center;gap:8px}

/* ── زر التصويت على الإلغاء ──────────────────────────── */
.vx{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:3px 9px;border-radius:var(--pill);
  background:var(--surface);border:1.5px solid var(--line);color:var(--muted);
  font-size:.68rem;font-weight:800;
  transition:color .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.vx svg{width:11px;height:11px}
.vx:active{transform:scale(.9)}
@media(hover:hover){.vx:hover{border-color:var(--bad);color:var(--bad)}}
.vx.mine{background:var(--bad);border-color:var(--bad);color:#fff}
.vx.mine svg{color:#fff}
td.warn{box-shadow:inset 0 0 0 2px var(--warn)}
td.warn .val::after{content:"⚠";font-size:.7em;margin-inline-start:4px;color:var(--warn)}
td.cell{vertical-align:top}

/* ── الشاشات الأكبر ───────────────────────────────────── */
@media(min-width:760px){
  #app{max-width:1000px;padding:22px 26px 40px}
  .scr{gap:18px}
  #tabs{inset-inline:auto;inset-inline-start:50%;bottom:18px;transform:translateX(50%);
    border-radius:var(--pill);border:1px solid var(--line);box-shadow:var(--sh-3);padding:7px;gap:4px;width:auto}
  #tabs button{flex-direction:row;gap:8px;font-size:.84rem;padding:10px 20px;border-radius:var(--pill);max-width:none}
  #s-home{display:none}
  body[data-scr="home"] #s-home{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
  body[data-scr="home"] .top{grid-column:1/-1}
  .hero-card{grid-row:2;grid-column:1;padding:24px}
  .how{grid-column:1;grid-row:3}
  #btnCreate{grid-column:2;grid-row:2;align-self:start;height:100%;min-height:96px;font-size:1.3rem}
  #btnJoinScr{grid-column:2;grid-row:3;min-height:76px}
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field input{padding:16px 0}
  .stop-wrap{position:static;padding-top:8px}
  .stop-wrap .btn{max-width:420px}
  table.grid{font-size:.92rem}
  table.grid th,table.grid td{padding:12px 11px}
  .pod{max-width:170px}
  .achs{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .prof-stats{max-width:520px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}