/* ============================================================
   هدهد رسم — التنسيق
   ============================================================
   شاشتان في صفحةٍ واحدة:
   • الجوّال: اللاعب يكتب ويرسم بإصبعه — كل شيء يُلمس بحجمٍ كبير،
     ولا شيء يحتاج تصغيراً أو تكبيراً باليد.
   • الشاشة الكبيرة: المذيع يعرض على البثّ — العرض النهائي بخطٍّ ضخم
     يُقرأ من الجوّال البعيد الذي يشاهد البثّ.

   الهويّة نفسها هويّة هدهد (كحليّ بنفسجيّ)، إلّا اللوح: ورقٌ فاتح.
   ============================================================ */

:root{
  --bg:#0f1224;
  --bg-2:#141833;
  --surf:#191e3d;
  --surf-2:#1f2650;
  --panel:rgba(255,255,255,.04);
  --panel-2:rgba(255,255,255,.075);
  --line:rgba(160,170,255,.12);
  --line-2:rgba(160,170,255,.24);
  --txt:#e8eaf6;
  --dim:#a3a9cc;
  --dim-2:#787ea6;
  --p1:#8b7ad6;
  --p2:#6fa3dd;
  --p3:#a48ce8;
  --ink:#e08bc4;          /* لون «الرسم» — هوية هذه اللعبة */
  --ok:#6fb5c9;
  --bad:#d97f9e;
  --warn:#e0b567;
  --paper:#fdfdfb;
  --r:16px;
  --r-md:12px;
  --r-sm:9px;
  --shadow:0 14px 34px rgba(6,8,26,.5);
  --shadow-sm:0 4px 14px rgba(6,8,26,.34);
  --emoji:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  --top:52px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Tajawal',system-ui,'Segoe UI',sans-serif;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(140,120,220,.20), transparent 60%),
    radial-gradient(100% 70% at 96% 106%, rgba(224,139,196,.14), transparent 62%),
    var(--bg);
  color:var(--txt);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hidden{display:none !important}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.11);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ══════════════════ الشريط العلوي ══════════════════ */
.hd-top{
  height:var(--top);flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 12px;
  background:rgba(15,18,36,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:relative;z-index:40;
}
.hd-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--txt)}
.hd-brand svg{width:26px;height:26px;flex:0 0 auto}
.hd-brand b{font-size:16px;font-weight:800;letter-spacing:.2px}
.hd-brand b span{color:var(--ink)}
.hd-top-r{display:flex;align-items:center;gap:8px}

.hd-code{
  font-family:ui-monospace,'Courier New',monospace;
  font-weight:800;font-size:15px;letter-spacing:3px;
  padding:4px 10px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line-2);color:#fff;
}
.hd-link{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim-2)}
.hd-link i{width:8px;height:8px;border-radius:50%;background:var(--bad);flex:0 0 auto}
.hd-link[data-s="on"] i{background:var(--ok);box-shadow:0 0 8px rgba(111,181,201,.8)}
.hd-link[data-s="wait"] i{background:var(--warn);animation:pulse 1s infinite}
.hd-link[data-s="on"] em{display:none}
@keyframes pulse{50%{opacity:.3}}

/* ══════════════════ الجسم ══════════════════ */
.hd-main{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;position:relative}
.hd-boot{padding:80px 20px;text-align:center;color:var(--dim)}
.wrap{max-width:920px;margin:0 auto;padding:20px 16px 40px}
.wrap-wide{max-width:1280px}

/* أزرار */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--txt);font-weight:700;font-size:14px;
  transition:transform .12s ease,background .18s ease,border-color .18s ease,opacity .18s;
}
.btn:hover{background:rgba(255,255,255,.11);border-color:rgba(160,170,255,.36)}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-p{
  background:linear-gradient(135deg,var(--p1),var(--p2));
  border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(139,122,214,.32);
}
.btn-p:hover{background:linear-gradient(135deg,#9a8ae2,#7fb1e6)}
.btn-ink{
  background:linear-gradient(135deg,var(--ink),#c07ad6);
  border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(224,139,196,.3);
}
.btn-ink:hover{background:linear-gradient(135deg,#e79bcd,#c98ade)}
.btn-g{background:transparent;border-color:var(--line)}
.btn-lg{padding:15px 26px;font-size:17px;border-radius:14px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

.em{font-family:var(--emoji);font-style:normal;line-height:1}

/* ══════════════════ البوّابة ══════════════════ */
.gate{padding:min(6vh,44px) 0 30px;text-align:center}
.gate-h{
  font-size:clamp(30px,7vw,52px);font-weight:900;line-height:1.15;
  margin-bottom:10px;
}
.gate-h span{
  background:linear-gradient(100deg,var(--ink),var(--p3) 60%,var(--p2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gate-s{color:var(--dim);font-size:clamp(14px,3.6vw,17px);max-width:46ch;margin:0 auto 26px}

.flow{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  max-width:760px;margin:0 auto 30px;text-align:right;
}
.flow-c{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;position:relative;overflow:hidden;
}
.flow-c b{display:block;font-size:14px;margin-bottom:3px}
.flow-c p{font-size:12.5px;color:var(--dim-2);line-height:1.5}
.flow-c i{font-size:26px;display:block;margin-bottom:8px}
.flow-n{
  position:absolute;inset-inline-start:10px;top:8px;
  font-size:34px;font-weight:900;color:rgba(255,255,255,.05);
}

.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));max-width:700px;margin:0 auto}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:20px;padding:22px 18px;
  text-align:center;transition:transform .16s ease,border-color .2s;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.card i{font-size:40px;font-family:var(--emoji)}
.card b{font-size:19px;font-weight:800}
.card p{font-size:13px;color:var(--dim-2);min-height:34px}
.card .btn{width:100%;margin-top:4px}
.card.locked{opacity:.75}
.card-tag{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:rgba(224,139,196,.16);color:var(--ink);border:1px solid rgba(224,139,196,.3);
}

/* حقل الكود */
.codebox{display:flex;gap:8px;justify-content:center;margin-top:6px;width:100%}
.inp{
  width:100%;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(0,0,0,.28);border:1px solid var(--line-2);color:var(--txt);
  outline:none;transition:border-color .18s,box-shadow .18s;
}
.inp:focus{border-color:var(--p3);box-shadow:0 0 0 3px rgba(164,140,232,.16)}
.inp-code{
  text-align:center;font-family:ui-monospace,'Courier New',monospace;
  font-size:24px;font-weight:800;letter-spacing:8px;text-transform:uppercase;
}
.fld{text-align:right;margin-bottom:14px}
.fld label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px;font-weight:700}
.fld .err{font-size:12px;color:var(--bad);margin-top:5px;min-height:16px}

/* ══════════════════ اختيار الأفتار ══════════════════ */
.avs{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.av-b{
  aspect-ratio:1;border-radius:14px;font-size:24px;font-family:var(--emoji);
  background:var(--panel);border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .12s,border-color .16s,background .16s;
}
.av-b:hover{transform:scale(1.08)}
.av-b.on{background:rgba(224,139,196,.18);border-color:var(--ink);transform:scale(1.06)}

/* ══════════════════ اللوبي ══════════════════ */
.lob{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:860px){ .lob{grid-template-columns:1.05fr .95fr;align-items:start} }

.pane{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;
}
.pane-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.pane-h b{font-size:15px;font-weight:800}
.pane-h em{font-size:12px;color:var(--dim-2);font-style:normal}

/* بطاقة الدعوة — أكبر شيء في الشاشة، تُقرأ من البثّ */
.invite{text-align:center;padding:20px 16px}
.invite-lab{font-size:13px;color:var(--dim);margin-bottom:6px}
.invite-code{
  font-family:ui-monospace,'Courier New',monospace;
  font-size:clamp(42px,12vw,76px);font-weight:900;letter-spacing:min(14px,3vw);
  line-height:1.05;
  background:linear-gradient(100deg,#fff,var(--p3) 70%,var(--ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-inline-start:min(14px,3vw);        /* يوازن تباعد الحرف الأخير */
}
.invite-url{
  margin-top:10px;font-size:14px;color:var(--dim);
  word-break:break-all;direction:ltr;
}
.invite-url b{color:#fff}
.invite .btn-row{justify-content:center;margin-top:14px}
.steps{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dim-2);text-align:right;
}
.steps li{margin-inline-start:18px;margin-bottom:4px}

/* قائمة اللاعبين */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pchip{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:8px 10px;position:relative;
  animation:pin .3s ease;
}
@keyframes pin{from{opacity:0;transform:scale(.86)}}
.pchip i{font-size:22px;font-family:var(--emoji);flex:0 0 auto}
.pchip b{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pchip.gone{opacity:.42}
.pchip.gone b{text-decoration:line-through}
.pchip.done{border-color:rgba(111,181,201,.5);background:rgba(111,181,201,.12)}
.pchip.me{border-color:var(--ink)}
.pchip-x{
  position:absolute;inset-inline-end:4px;top:3px;font-size:11px;
  width:18px;height:18px;border-radius:50%;color:var(--dim-2);
  display:grid;place-items:center;
}
.pchip-x:hover{background:rgba(217,127,158,.22);color:#fff}
.pchip-k{position:absolute;inset-inline-end:5px;bottom:3px;font-size:11px;font-family:var(--emoji)}
/* اللاعب الآليّ يُعرَف من بعيد: حدٌّ متقطّع ووسمٌ صريح — فلا
   يظنّ المذيع أن أحداً دخل غرفته، ولا يحسبهم الجمهور أشخاصاً */
.pchip.bot{border-style:dashed;border-color:rgba(160,170,255,.34);background:rgba(255,255,255,.03)}
.pchip-bot{
  position:absolute;inset-inline-end:6px;top:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.3px;
  padding:1px 6px;border-radius:20px;
  background:rgba(160,170,255,.16);color:var(--dim);
}
.pchip.bot b{padding-inline-end:34px}
.pempty{color:var(--dim-2);font-size:13px;text-align:center;padding:18px 0}

/* الإعدادات */
.set{display:grid;gap:12px}
.set-r{display:grid;gap:6px}
.set-r>label{font-size:13px;font-weight:700;color:var(--dim)}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{
  flex:1 1 auto;min-width:74px;padding:9px 10px;border-radius:var(--r-sm);
  background:var(--panel);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--dim);
  transition:background .16s,color .16s,border-color .16s;
}
.seg button:hover{color:var(--txt)}
.seg button.on{background:rgba(164,140,232,.2);border-color:var(--p3);color:#fff}
.set-note{font-size:12px;color:var(--dim-2);line-height:1.5}
.rng{display:flex;align-items:center;gap:10px}
.rng input[type=range]{flex:1;accent-color:var(--p3)}
.rng b{min-width:56px;text-align:center;font-size:13px;
  background:var(--panel-2);border-radius:var(--r-sm);padding:4px 6px}
.sw{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.sw input{appearance:none;width:42px;height:24px;border-radius:20px;
  background:rgba(0,0,0,.4);border:1px solid var(--line-2);position:relative;
  transition:background .2s;flex:0 0 auto}
.sw input::after{content:'';position:absolute;inset-block:2px;inset-inline-start:2px;
  width:18px;border-radius:50%;background:var(--dim);transition:.2s}
.sw input:checked{background:rgba(164,140,232,.4);border-color:var(--p3)}
.sw input:checked::after{inset-inline-start:20px;background:#fff}
.sw span{font-size:13.5px}

/* سؤالان متجاوران حين يتّسع العرض — وقتُ الكتابة ووقتُ الرسم
   يُقرآن معاً لأنّ أحدهما يُقاس بالآخر */
.set-2{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:520px){ .set-2{grid-template-columns:1fr 1fr} }

/* اختيار لاعبي التجربة بالأعيان */
.bots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:7px;margin-top:10px}
.botc{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:var(--r-md);
  background:var(--panel);border:1px dashed var(--line-2);
  color:var(--dim);text-align:start;
  transition:background .16s,border-color .16s,color .16s,transform .1s;
}
.botc:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.botc:active{transform:scale(.97)}
.botc i{font-size:20px;font-family:var(--emoji);flex:0 0 auto;filter:grayscale(1);opacity:.6;transition:.16s}
.botc b{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.botc.on{
  background:rgba(164,140,232,.16);border-style:solid;
  border-color:var(--p3);color:#fff;
}
.botc.on i{filter:none;opacity:1}

/* ══════════════════ شاشة المهمّة ══════════════════ */
.play{display:flex;flex-direction:column;height:100%;min-height:0}
.task-h{
  flex:0 0 auto;padding:8px 12px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);background:rgba(15,18,36,.6);
}
.task-h .rnd{font-size:12px;color:var(--dim-2);font-weight:700;white-space:nowrap}
.task-h .ask{font-size:13.5px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* شارةُ قيد الجولة: يعرف اللاعب لماذا ضاقت لوحتُه قبل أن يبحث */
.ink-tag{
  flex:0 0 auto;font-size:11px;font-weight:800;white-space:nowrap;
  padding:3px 10px;border-radius:20px;
  background:rgba(224,139,196,.16);color:var(--ink);
  border:1px solid rgba(224,139,196,.34);
}
@media(max-width:520px){ .ink-tag{display:none} }

.clock{
  display:flex;align-items:center;gap:7px;flex:0 0 auto;
  font-variant-numeric:tabular-nums;font-weight:800;font-size:15px;
}
.clock em{font-style:normal;font-family:var(--emoji);font-size:13px}
.clock.hot{color:var(--bad);animation:tick .6s infinite}
@keyframes tick{50%{opacity:.55}}
.bar{height:3px;background:rgba(255,255,255,.07);flex:0 0 auto;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p2),var(--p3),var(--ink));
  transition:width .25s linear}
.bar.hot i{background:linear-gradient(90deg,#d97f9e,#e0b567)}

/* بطاقة ما استلمته */
.got{
  margin:12px auto 0;max-width:820px;width:calc(100% - 24px);
  background:linear-gradient(180deg,rgba(224,139,196,.13),rgba(255,255,255,.02));
  border:1px solid rgba(224,139,196,.28);border-radius:var(--r);
  padding:14px 16px;text-align:center;
}
.got-from{font-size:12px;color:var(--dim);margin-bottom:8px}
.got-from i{font-family:var(--emoji)}
.got-t{
  font-size:clamp(19px,5vw,30px);font-weight:800;line-height:1.35;
  word-break:break-word;
}
.got.empty .got-t{color:var(--dim-2);font-weight:600;font-size:17px}
.got-art{
  display:block;width:100%;max-width:560px;margin:0 auto;
  aspect-ratio:4/3;border-radius:var(--r-md);background:var(--paper);
  border:1px solid rgba(0,0,0,.25);box-shadow:var(--shadow-sm);
}
.got-hint{font-size:12.5px;color:var(--dim-2);margin-top:8px}

/* كتابة الجملة */
.write{max-width:640px;margin:0 auto;padding:18px 16px 24px;width:100%}
.write-lab{font-size:14px;color:var(--dim);margin-bottom:8px;text-align:center}
.write textarea{
  width:100%;min-height:96px;resize:none;padding:14px;
  border-radius:var(--r);background:rgba(0,0,0,.3);
  border:1px solid var(--line-2);color:#fff;outline:none;
  font-size:clamp(17px,4.4vw,22px);font-weight:700;line-height:1.5;text-align:center;
  transition:border-color .18s,box-shadow .18s;
}
.write textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(224,139,196,.15)}
.write-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.cnt{font-size:12px;color:var(--dim-2);font-variant-numeric:tabular-nums}
.cnt.hot{color:var(--warn)}
.tips{
  margin-top:14px;font-size:12.5px;color:var(--dim-2);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
}
.tips b{color:var(--dim)}

/* ══════════════════ اللوح ══════════════════
   ثلاثة أعمدة: الأدوات يميناً واللوح وسطاً والألوان يساراً — لأنّ
   اليد تُمسك أداةً واحدة وتُبدّل اللون كثيراً، فيستحقّ اللونُ عموداً
   يُرى كلّه دفعةً واحدة بلا فتح قوائم. وعلى الجوّال ينقلب الكلّ
   شرائطَ أفقيّة حيث العرض شحيح والارتفاع فائض. */
.pad{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:8px;padding:8px 10px 10px;
}
.pad-main{flex:1 1 auto;min-height:0;display:flex;gap:8px;align-items:stretch}
.pad-stage{flex:1 1 auto;min-width:0;display:grid;place-items:center}

.canvas-fr{
  position:relative;width:100%;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;
  background:var(--paper);
  box-shadow:0 12px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.35);
}
canvas.board{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
/* حلقةُ الفرشاة: تُري الحجم قبل أن يُرسم. حدٌّ مزدوج (فاتحٌ فوق
   داكن) حتى تُرى على الورق الأبيض وعلى الحبر الأسود معاً. */
.ring{
  position:absolute;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);
  border:1.5px solid var(--ink);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
  transition:width .08s ease,height .08s ease;
  z-index:2;
}

/* ── الأيقونات ── */
.ic{width:20px;height:20px;flex:0 0 auto;display:block}
.btn .ic{width:17px;height:17px}
.btn-lg .ic{width:19px;height:19px}

/* ── عمود الأدوات ── */
.rail{
  flex:0 0 auto;display:flex;flex-direction:column;gap:5px;
  align-content:flex-start;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:14px;padding:6px;
}
.rail-gap{height:1px;background:var(--line);margin:3px 2px;flex:0 0 auto}
.tbtn{
  width:42px;height:42px;border-radius:11px;
  display:grid;place-items:center;color:var(--dim);
  border:1px solid transparent;background:transparent;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.tbtn:hover{background:rgba(255,255,255,.09);color:var(--txt)}
.tbtn:active{transform:scale(.93)}
.tbtn.on{
  background:linear-gradient(145deg,rgba(224,139,196,.26),rgba(164,140,232,.2));
  border-color:rgba(224,139,196,.55);color:#fff;
}
.tbtn[disabled]{opacity:.3;pointer-events:none}
.tbtn-fill .sq{
  width:17px;height:17px;border-radius:4px;
  border:2px solid currentColor;background:transparent;
}
.tbtn-fill.on .sq{background:currentColor}

/* ── عمود الألوان ── */
.inks{
  flex:0 0 auto;width:132px;
  display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:14px;padding:8px;
  overflow:auto;
}
.pal{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.sw-c{
  aspect-ratio:1;border-radius:5px;min-width:0;
  border:2px solid rgba(255,255,255,.1);
  transition:transform .1s,border-color .14s;
}
.sw-c:hover{transform:scale(1.18);border-color:rgba(255,255,255,.45)}
.sw-c.on{border-color:#fff;transform:scale(1.2);box-shadow:0 0 0 2px rgba(0,0,0,.55)}

.ink-row{display:flex;align-items:center;gap:6px}
.cust{
  width:30px;height:30px;border-radius:9px;overflow:hidden;
  border:2px solid rgba(255,255,255,.3);cursor:pointer;position:relative;
  display:block;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
}
.cust input[type=color]{
  position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
  border:0;padding:0;background:none;cursor:pointer;opacity:0;
}
.recent{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;flex:1 1 auto;min-width:0}
.sw-r{
  aspect-ratio:1;border-radius:4px;min-width:0;
  border:1px solid rgba(255,255,255,.16);
}
.sw-r.on{border-color:#fff}

/* المقترحات المتناسقة: ظلٌّ وضوءٌ ومجاوران ومكمّل — يشتقّها المحرّك
   من اللون الحاليّ، فيجد غيرُ الرسّام ظلَّه بلا تخمين */
.harm-t{font-size:10.5px;color:var(--dim-2);font-weight:700;margin-top:2px}
.harm{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
/* بلا وسمٍ مكتوب: الكلمة داخل مربّعٍ صغير تخرج بحجمٍ لا يُقرأ،
   والتلميح عند المرور يقول «ظلّ» أو «مكمّل» بلا زحام */
.sw-h{
  aspect-ratio:1;border-radius:6px;min-width:0;
  border:1px solid rgba(255,255,255,.2);
  transition:transform .1s,border-color .14s;
}
.sw-h:hover{border-color:#fff;transform:scale(1.18)}

/* ── الشريط السفليّ ── */
.pad-bar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);border-radius:14px;padding:8px 12px;
}
.pen{display:flex;align-items:center;gap:9px;flex:0 0 auto}
/* خلفيّة الورق لا الحبر: القلم الأسود كان يختفي في مربّعٍ داكن */
.pen-prev{
  width:34px;height:34px;border-radius:10px;
  background:var(--paper);display:grid;place-items:center;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.pen-prev i{display:block;border-radius:50%;border:1px solid transparent;transition:.12s}
.pen input[type=range]{width:120px;accent-color:var(--ink)}
.pen-lab{font-size:12px;color:var(--dim-2);font-weight:700;white-space:nowrap}
.pen-n{
  min-width:36px;text-align:center;font-size:12px;font-weight:700;
  color:var(--dim);font-variant-numeric:tabular-nums;
}
.pad-send{margin-inline-start:auto;flex:0 0 auto;min-width:150px;padding:12px 20px;font-size:15px}

/* ── الجوّال: كل شيء شرائطُ أفقيّة ── */
@media(max-width:760px){
  .pad{padding:6px 6px 8px;gap:6px}
  .pad-main{flex-direction:column;gap:6px}
  .pad-stage{order:1}
  .rail{
    order:2;flex-direction:row;justify-content:center;flex-wrap:wrap;
    border-radius:12px;padding:5px;
  }
  .rail-gap{width:1px;height:auto;align-self:stretch;margin:2px 3px}
  .tbtn{width:44px;height:44px}
  .inks{order:3;width:auto;flex-direction:row;align-items:center;gap:8px;padding:7px}
  .pal{grid-template-columns:repeat(10,1fr);flex:1 1 auto;min-width:0;gap:4px}
  .ink-row{flex-direction:column;gap:4px;flex:0 0 auto}
  .recent{grid-template-columns:repeat(5,1fr);width:76px;flex:0 0 auto}
  .harm-t{display:none}
  .harm{grid-template-columns:repeat(5,1fr);width:76px;flex:0 0 auto}
  .pad-bar{gap:8px;padding:7px 8px}
  .pen{flex:1 1 46%}
  .pen input[type=range]{flex:1;width:auto;min-width:0}
  .pad-send{order:9;flex:1 1 100%;min-width:0;margin-inline-start:0}
}
/* الجوّال أفقيّاً: اللوح يأخذ الشاشة والأعمدة تضيق */
@media(max-height:520px) and (orientation:landscape){
  .pad-main{flex-direction:row}
  .rail{flex-direction:column;flex-wrap:nowrap}
  .tbtn{width:34px;height:34px;border-radius:9px}
  .ic{width:17px;height:17px}
  .inks{width:96px;flex-direction:column;padding:6px}
  .pal{grid-template-columns:repeat(4,1fr)}
  .harm-t{display:none}
  .pen-prev,.cust{width:26px;height:26px}
  .pen input[type=range]{width:84px}
  .pad-send{min-width:110px;padding:8px 12px;font-size:13px}
}

/* ══════════════════ الانتظار ══════════════════ */
.wait{text-align:center;padding:min(8vh,54px) 16px}
.wait-i{font-size:54px;font-family:var(--emoji);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-9px)}}
.wait h2{font-size:clamp(20px,5vw,28px);font-weight:800;margin:10px 0 6px}
.wait p{color:var(--dim);font-size:14px;max-width:40ch;margin:0 auto 20px}
.prog{
  max-width:340px;margin:0 auto 18px;height:9px;border-radius:9px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.prog i{display:block;height:100%;border-radius:9px;
  background:linear-gradient(90deg,var(--p2),var(--ink));transition:width .35s ease}
.prog-n{font-size:13px;color:var(--dim);margin-bottom:10px;font-weight:700}
.mine-peek{
  max-width:380px;margin:18px auto 0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:12px;
}
.mine-peek b{font-size:12px;color:var(--dim-2);display:block;margin-bottom:8px}

/* ══════════════════ العرض ══════════════════ */
.show{display:flex;flex-direction:column;height:100%;min-height:0}
.show-h{
  flex:0 0 auto;padding:9px 14px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);background:rgba(15,18,36,.6);
}
.show-h .own{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;min-width:0}
.show-h .own i{font-size:22px;font-family:var(--emoji)}
.show-h .own span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show-h .pn{
  margin-inline-start:auto;font-size:12px;color:var(--dim-2);
  font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.dots{display:flex;gap:4px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.dots i.on{background:var(--ink);transform:scale(1.35)}
.dots i.past{background:var(--p3)}

.show-body{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:14px;position:relative}
.pg{
  width:100%;max-width:min(96vw,1020px);text-align:center;
  animation:pgin .42s cubic-bezier(.2,.8,.25,1);
}
@keyframes pgin{from{opacity:0;transform:translateY(16px) scale(.985)}}
.pg-by{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:30px;padding:6px 14px 6px 8px;font-size:13px;font-weight:700;
}
.pg-by i{font-size:20px;font-family:var(--emoji)}
.pg-by em{font-style:normal;color:var(--dim-2);font-weight:600}
.pg-text{
  font-size:clamp(26px,6.4vw,58px);font-weight:900;line-height:1.3;
  padding:22px 18px;word-break:break-word;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:22px;
}
.pg.first .pg-text{
  background:linear-gradient(180deg,rgba(164,140,232,.18),rgba(255,255,255,.02));
  border-color:rgba(164,140,232,.4);
}
.pg.empty .pg-text{color:var(--dim-2);font-size:clamp(19px,4vw,30px);font-weight:700}
.pg-art{
  /* العرضُ يُشتقّ من الارتفاع المتاح ولا يُترك ١٠٠٪: كان max-height يقصّ
     الارتفاع والعرضُ باقٍ كاملاً، فتنمطّ الرسمة أفقيّاً على الآيباد —
     والتحميلُ يرسمها من جديد بمقاسها فيخرج سليماً. */
  display:block;height:auto;aspect-ratio:4/3;border-radius:18px;
  width:min(100%, max(260px, calc((100vh - var(--top) - 210px) * 4 / 3)));
  width:min(100%, max(260px, calc((100dvh - var(--top) - 210px) * 4 / 3)));
  background:var(--paper);box-shadow:0 16px 44px rgba(0,0,0,.5);
  margin:0 auto;
  border:1px solid rgba(0,0,0,.3);
}
.pg-empty-art{
  display:grid;place-items:center;aspect-ratio:4/3;border-radius:18px;
  background:rgba(255,255,255,.03);border:1px dashed var(--line-2);
  color:var(--dim-2);font-weight:700;
}
.pg-tag{
  display:inline-block;margin-bottom:10px;font-size:12px;font-weight:800;
  padding:4px 12px;border-radius:20px;
  background:rgba(164,140,232,.18);border:1px solid rgba(164,140,232,.36);color:#cfc3ff;
}

.show-f{
  flex:0 0 auto;padding:9px 12px;display:flex;align-items:center;gap:8px;
  justify-content:center;flex-wrap:wrap;
  border-top:1px solid var(--line);background:rgba(15,18,36,.6);
}
.reacts{display:flex;gap:5px}
.rbtn{
  width:40px;height:40px;border-radius:50%;font-size:20px;font-family:var(--emoji);
  background:var(--panel-2);border:1px solid var(--line);
  display:grid;place-items:center;transition:transform .12s,background .16s;
}
.rbtn:hover{transform:scale(1.14);background:rgba(255,255,255,.13)}
.rbtn:active{transform:scale(.9)}
.hd-fly{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.fly{
  position:absolute;bottom:70px;font-size:34px;font-family:var(--emoji);
  animation:flyup 2.6s ease-out forwards;
}
@keyframes flyup{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:1;transform:translateY(-14px) scale(1.15)}
  100%{opacity:0;transform:translateY(-58vh) scale(.9)}
}

/* ══════════════════ النهاية ══════════════════ */
.done-h{text-align:center;padding:22px 16px 6px}
.done-h i{font-size:46px;font-family:var(--emoji)}
.done-h h2{font-size:clamp(22px,5.4vw,34px);font-weight:900;margin:6px 0}
.done-h p{color:var(--dim);font-size:14px}
.abl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-top:18px}
.ab{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 12px;text-align:center;transition:transform .14s,border-color .18s;
}
.ab:hover{transform:translateY(-3px);border-color:var(--ink)}
.ab i{font-size:30px;font-family:var(--emoji);display:block;margin-bottom:6px}
.ab b{display:block;font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab em{font-size:12px;color:var(--dim-2);font-style:normal}

/* ══════════════════ الرسائل الطائرة ══════════════════ */
.hd-toasts{
  position:fixed;inset-inline:0;top:calc(var(--top) + 8px);z-index:70;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;
}
.toast{
  background:rgba(25,30,61,.96);border:1px solid var(--line-2);
  border-radius:30px;padding:8px 16px;font-size:13.5px;font-weight:700;
  box-shadow:var(--shadow);animation:tin .28s ease;max-width:90vw;
}
@keyframes tin{from{opacity:0;transform:translateY(-10px)}}
.toast.err{border-color:rgba(217,127,158,.6);background:rgba(60,26,42,.96)}
.toast.ok{border-color:rgba(111,181,201,.6);background:rgba(20,48,54,.96)}

/* ══════════════════ لوحة الخطأ الكبيرة ══════════════════ */
.big-note{text-align:center;padding:min(10vh,70px) 18px}
.big-note i{font-size:52px;font-family:var(--emoji)}
.big-note h2{font-size:clamp(20px,5vw,28px);font-weight:800;margin:12px 0 8px}
.big-note p{color:var(--dim);max-width:44ch;margin:0 auto 20px;font-size:14px}

/* ══════════════════ الجوّال ══════════════════ */
@media(max-width:640px){
  :root{--top:48px}
  .wrap{padding:14px 12px 26px}
  .got{margin-top:8px;padding:10px 12px}
  .got-art{max-width:360px}
  .show-f{padding:7px 8px}
  .rbtn{width:44px;height:44px}
  .flow{grid-template-columns:1fr 1fr}
}
/* الجوّال أفقيّاً أثناء الرسم: اللوح يأخذ الشاشة والأدوات تضيق */
@media(max-height:520px) and (orientation:landscape){
  .hd-top{height:38px}
  :root{--top:38px}
  .task-h{padding:4px 10px}
  /* الورقة الواردة تُخفى أفقيّاً: اللوح أولى بالارتفاع الشحيح،
     والجملة باقيةٌ في العنوان أعلى الشاشة */
  .got{display:none}
}

/* من يكره الحركة */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ══════════ شبكةُ أمانٍ للّوح ══════════
   حتى لو أخطأ الحسابُ لحظةً، لا يخرج اللوحُ عن حاويته أبداً. */
.canvas-fr{max-width:100%;max-height:100%}

/* ══════════ الأصابع لا الفئران ══════════
   على الشاشات اللمسيّة تكبر الأهدافُ الصغيرة: مربّعُ لونٍ ٢٠ بكسل
   يُصاب بالفأرة ولا يُصاب بالإبهام. القاعدة تسري على الجوال
   والآيباد معاً لأنها تسأل عن نوع المؤشّر لا عن عرض الشاشة. */
@media (pointer: coarse){
  .sw-c{min-height:34px;border-radius:8px}
  .sw-h,.sw-r{min-height:30px;border-radius:8px}
  .cust{width:40px;height:40px}
  .pen-prev{width:40px;height:40px}
  .tbtn{width:48px;height:48px}
  .ic{width:22px;height:22px}
  .pen input[type=range]{height:32px}
  .rbtn{width:48px;height:48px}
  .av-b{min-height:52px}
}
/* الآيباد: ثلاثة أعمدة على ٧٦٨ بكسل تخنق اللوح — نطويها كالجوال */
@media (max-width: 900px){
  .pad-main{flex-direction:column;gap:6px}
  .pad-stage{order:1}
  .rail{order:2;flex-direction:row;justify-content:center;flex-wrap:wrap}
  .rail-gap{width:1px;height:auto;align-self:stretch;margin:2px 3px}
  .inks{order:3;width:auto;flex-direction:row;align-items:center;gap:8px}
  .pal{grid-template-columns:repeat(10,1fr);flex:1 1 auto;min-width:0}
  .ink-row{flex-direction:column;gap:4px;flex:0 0 auto}
  .recent,.harm{grid-template-columns:repeat(5,1fr);width:92px;flex:0 0 auto}
  .harm-t{display:none}
}

/* ══════════════════ الباركود ══════════════════
   أسرعُ بابٍ للجمهور: يصوّره من شاشة البثّ فيدخل بلا كتابةِ كود.
   خلفيّتُه بيضاء دائماً — الكاميرا تحتاج تبايناً لا أناقة. */
.qr{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  margin:14px auto 0;padding:12px;border-radius:16px;
  background:#fff;border:1px solid var(--line-2);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .16s ease,box-shadow .16s ease;
  cursor:pointer;
}
.qr:hover{transform:scale(1.03);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.qr:active{transform:scale(.99)}
/* المقاس يأتي من المرمِّز نفسه (نمطٌ سطريّ) ولا يُفرض هنا: فرضُه
   يعني تصغيراً كسريّاً يُفسد المربّعات ويمنع القراءة. */
.qr canvas{display:block;image-rendering:pixelated}
.qr span{font-size:11.5px;font-weight:800;color:#4a4f6a}

/* ملءُ الشاشة — للعرض على البثّ */
.qr-full{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(8,10,22,.94);backdrop-filter:blur(10px);
  animation:qrIn .2s ease;cursor:zoom-out;
}
@keyframes qrIn{from{opacity:0}}
.qr-full-in{display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px}
.qr-full canvas{
  display:block;                      /* المقاس من المرمِّز — لا إعادة قياس */
  background:#fff;padding:14px;border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);image-rendering:pixelated;
}
.qr-full-code{
  font-family:ui-monospace,'Courier New',monospace;
  font-size:clamp(34px,8vw,64px);font-weight:900;letter-spacing:min(12px,2.6vw);
  margin-inline-start:min(12px,2.6vw);
  background:linear-gradient(100deg,#fff,var(--p3) 70%,var(--ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.qr-full-url{font-size:14px;color:var(--dim);direction:ltr}
.qr-full-hint{font-size:13px;color:var(--dim-2);font-style:normal}

/* تحذيرُ العنوان: الرمزُ سليمٌ والعنوانُ لا يُوصَل — نقولها بدل أن
   يُجرَّب الباركود مرّةً بعد مرّة ويُظنّ معطوباً */
.qr-warn{
  display:grid;grid-template-columns:auto 1fr;gap:4px 9px;align-items:center;
  margin:10px auto 0;max-width:280px;padding:9px 12px;border-radius:12px;
  background:rgba(224,181,103,.12);border:1px solid rgba(224,181,103,.34);
  text-align:start;
}
.qr-warn .ic{width:18px;height:18px;color:var(--warn);grid-row:span 2}
.qr-warn b{font-size:12px;color:var(--warn)}
.qr-warn span{font-size:11px;color:var(--dim);line-height:1.5}
.qr-warn code{
  font-family:ui-monospace,monospace;font-size:10.5px;
  background:rgba(0,0,0,.3);padding:1px 5px;border-radius:5px;
}

/* زرّ إنهاء الجولة المفتوحة — بارزٌ لأنه القرار الوحيد بيد المذيع
   في طور التحفة، ومكانُه أعلى الشاشة حيث تقع العين أوّلاً */
.end-wrap{display:flex;justify-content:center;padding:10px 12px 0}
.end-round{padding:11px 22px;font-size:15px;box-shadow:0 8px 24px rgba(224,139,196,.34)}
#endSlot{display:flex;justify-content:center;margin:0 0 16px}
/* «بلا وقت» أهدأ من رقمٍ ينزل — لا يستعجل الرسّام */
.clock:has(b:not(:empty)) b{font-variant-numeric:tabular-nums}

/* ══════════════════ الرسم بالإصبع ══════════════════
   أربعة أشياء تُفسد الرسم على اللمس ولا تُرى على الفأرة: تحديدُ
   النصّ حول اللوح، وانزلاقُ الصفحة تحت الإصبع، وسحبُ التحديث في
   الأعلى، وقائمةُ النظام عند الضغط المطوّل. تُمنع كلُّها هنا. */
html, body{
  overscroll-behavior:none;          /* لا سحبَ تحديثٍ ولا ارتدادَ صفحة */
  touch-action:manipulation;
}
.pad, .pad *, .rail, .inks, .task-h, .show, .hd-top{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;        /* الضغط المطوّل لا يفتح قائمة */
}
.pad{ touch-action:none; overscroll-behavior:contain; }
canvas.board{
  touch-action:none;
  -webkit-user-drag:none;
  user-select:none;
}
/* الحقول تبقى قابلةً للتحديد — منعُ التحديد فيها يمنع التصحيح */
.write textarea, .inp, input, textarea{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* حين يبقى وقتُ الرسم وحده (التحفة) يأخذ العرض كلّه بدل نصفٍ فارغ */
.set-2.one{grid-template-columns:1fr}

/* حلقةُ الفرشاة تتحرّك بـtransform لا بـleft/top: التحويل يجري على
   طبقةِ التركيب بلا إعادة تخطيط، فلا يتلعثم الخطّ تحت الإصبع. */
.ring{
  /* أصلُ التحويل هو ركن اللوح: بلا left/top يبدأ العنصر من موضعه
     الساكن فينزاح بمقدار مكانه في الصفّ. */
  left:0;top:0;
  will-change:transform;
}