/* ==========================================================================
   RAW — واجهة المطبخ: بيج كريمي، خشب دافي، ولمسات نحاس وبرجندي
   ========================================================================== */
:root {
  /* اللعبة غامق ثابت — فوق مشهد ليلي. من غير السطر ده المتصفح بيلوّن
     السكرول والإنبوت حسب إعداد الجهاز، فالصفحة بتبان مختلفة
     على موبايل غامق عن موبايل فاتح. */
  color-scheme: dark;
  --cream: #F7F2E8;
  --cream-2: #EFE6D6;
  --ink: #2A2119;
  --ink-soft: #6B5C4C;
  --line: #DCCFB9;
  --brass: #B08A4A;
  --brass-2: #8E6E3A;
  --emerald: #2E5A4B;
  --burgundy: #6E2438;
  --burgundy-2: #8A3350;
  --r: 14px;
  --shadow: 0 18px 44px rgba(60, 42, 26, .22);
  --font: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --emerald-kora: #149B83;
  --copper: #C56A38;
}

* { box-sizing: border-box; }

/* **لازم `!important`.**

   خاصية `hidden` بتحط `display:none` من ستايل المتصفح الافتراضي،
   وأي `display` بنكتبه إحنا في ورقة ستايل بيكسبها — لأن ستايل
   المؤلف أقوى من ستايل المتصفح.

   القاعدة دي كانت موجودة في `raw-menu.css` و`raw-staff.css`
   و`raw-admin.css` **وناقصة هنا بس**. النتيجة: `.raw-own`
   (`display:flex`) كانت بتفضل ظاهرة مهما اتحط عليها `hidden`:

     · أول ما الصفحة تفتح، اللوحة ظاهرة والباني لسه ماتبناش —
       فالكارت بيطلع ترويسة وجوّه فاضي.
     · و`closeOwn()` بتحط `hidden` وما بيحصلش حاجة — «الزرار مش شغال».

   عطل واحد بوشّين، والاتنين اللي أحمد شافهم.

   واختباري كان بيدوّر على `own.hidden === true` — يعني كان بيتأكد
   من **الخاصية** مش من **الأثر**، فكان بيعدّي وهو غلط. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  overflow: hidden;
}
button { font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- الشريط العلوي ---------- */
.raw-top {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(115deg, #241C16, #3A2A20 55%, var(--burgundy));
  color: #F7F2E8;
}
.raw-brand { display: flex; align-items: baseline; gap: 10px; }
.raw-brand b {
  font-size: 1.34rem; font-weight: 800; letter-spacing: .22em;
  font-family: 'Outfit', var(--font);
}
.raw-brand span { font-size: .72rem; opacity: .72; letter-spacing: .04em; }
.raw-top .raw-tagline {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #E2BE86;
}

/* ---------- المسرح ---------- */
.raw-wrap { position: relative; height: calc(100svh - 56px); }
#stage { position: absolute; inset: 0; }

/* ---------- لوحة المخزون (أعلى اليمين) ---------- */
.raw-stock {
  position: absolute; bottom: 14px; left: 14px; top: auto; inset-inline-start: auto;
  width: 176px; z-index: 12;
  background: rgba(247, 242, 232, .93);
  backdrop-filter: blur(9px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 13px 13px 11px;
}
.raw-stock h3 {
  margin: 0 0 10px; font-size: .84rem; font-weight: 800;
  padding-bottom: 8px; border-bottom: 2px solid var(--brass);
}
.raw-stock h3 button {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.raw-stock h3 button span { transition: transform .2s ease; opacity: .55; }
.raw-stock.folded h3 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.raw-stock.folded h3 button span { transform: rotate(-90deg); }
.raw-stock.folded #stock, .raw-stock.folded .raw-rank,
.raw-stock.folded .raw-sound, .raw-stock.folded .raw-closeall { display: none; }
.raw-stock button {
  display: flex; width: 100%; align-items: center; gap: 9px; margin-bottom: 6px;
  padding: 8px 10px; border-radius: 10px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: .79rem; font-weight: 600; color: var(--ink);
  cursor: pointer; text-align: start;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.raw-stock button:hover { border-color: var(--brass); transform: translateX(-2px); }
.raw-stock button i {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: var(--c); box-shadow: 0 0 0 2px rgba(0,0,0,.06);
}
.raw-stock button.at {
  background: #F3E7EC; border-color: var(--burgundy); font-weight: 800;
}
.raw-sound {
  margin-top: 4px; width: 100%; padding: 6px; border-radius: 9px;
  border: 1px dashed var(--line); background: transparent;
  font-size: .72rem; color: var(--ink-soft); cursor: pointer;
}
.raw-sound.off { opacity: .55; }

/* ---------- شريط التعليمات ---------- */
.raw-help {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(36, 28, 22, .72); color: #F7F2E8;
  padding: 8px 14px; border-radius: 12px; text-align: center;
  font-size: .72rem; line-height: 1.7; max-width: min(460px, 90%);
  transition: opacity .5s ease, transform .5s ease;
}
body.seen-help .raw-help { opacity: 0; transform: translateX(-50%) translateY(-8px); pointer-events: none; }
.raw-help b { color: #E2BE86; font-weight: 700; }

/* ---------- شريط التفاعل اليدوي ---------- */
.raw-acts {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 7px; flex-wrap: wrap; justify-content: center;
  max-width: min(520px, calc(100% - 400px)); z-index: 12;
}
/* الشاشات الضيقة: عمود على اليمين تحت نورة.

   **`flex-wrap` لازم يبقى `nowrap` هنا.** كان `wrap` موروث من
   التخطيط العرضي، ومع `column` وعرض ثابت ٧٤ بكسل الأزرار كانت
   بتلف لعمود **تاني** بيطلع بره الحاوية ويركب على اللي جنبه —
   ده كان التداخل.

   والعرض بقى `min-content` بدل ٧٤ ثابتة: الزرار جواه
   `min-width: 62px` + حشو ١٨ = ٨٠ بكسل، يعني كان بيفيض من
   الحاوية أصلاً قبل ما يلف. */
@media (max-width: 1080px) {
  .raw-acts {
    left: auto; right: 12px; bottom: 12px; transform: none;
    flex-direction: column; align-items: stretch;
    flex-wrap: nowrap;
    width: max-content; max-width: 40vw; gap: 5px;
    /* لو الأزرار كترت عن طول الشاشة بتتمرّر بدل ما تفيض */
    max-height: calc(100svh - 150px); overflow-y: auto;
    scrollbar-width: none;
  }
  .raw-acts::-webkit-scrollbar { display: none; }
  /* النص الطويل («مسك البورتافلتر») بيلف جوّه الزرار مش بره الشريط */
  .raw-acts button { min-width: 0; white-space: normal; text-align: center; }
  /* **نورة فوق الشريط مش جنبه.**

     كانت `right: 96px` عشان تبعد عن شريط الأفعال اللي كان عمود على
     اليمين. الشريط اتنقل تحت في وضع المحطة، فنورة بقت تركب على
     الأفعال ونصّها بيتقص من حافة الشاشة.

     فوق الشريط بـ٨٠ بكسل، والعرض من حافة لحافة ناقص هامش. */
  .raw-nora {
    bottom: 80px; right: 12px; left: 12px;
    max-width: none; justify-content: flex-end;
  }
  .raw-nora .bubble { max-width: calc(100vw - 90px); }
  .raw-toasts { bottom: 14px; left: 42%; }
}
.raw-acts button {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 62px; padding: 7px 9px 5px; cursor: pointer;
  border-radius: 13px; border: 1px solid rgba(255, 236, 205, .18);
  background: rgba(26, 20, 17, .74); backdrop-filter: blur(9px);
  color: #F3EADC; font-family: inherit; font-size: .68rem; font-weight: 700;
  transition: background .15s ease, transform .12s ease, border-color .15s ease, opacity .2s ease;
}
.raw-acts button b { font-size: 1.05rem; line-height: 1.1; }
.raw-acts button kbd {
  font-family: var(--mono); font-size: .56rem; opacity: .5;
  border: 1px solid rgba(255,255,255,.2); border-radius: 4px; padding: 0 3px; margin-top: 2px;
}
.raw-acts button:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brass); }
.raw-acts button:active:not(:disabled) { transform: scale(.94); }
.raw-acts button:disabled { opacity: .3; cursor: default; }
.raw-acts button.on {
  background: rgba(20, 155, 131, .3); border-color: #2FE0B0;
  box-shadow: 0 0 16px rgba(47, 224, 176, .3);
}
.raw-meter {
  width: 100%; margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.raw-meter i {
  display: block; height: 5px; width: 0%; max-width: 220px; min-width: 6px;
  border-radius: 999px; background: linear-gradient(90deg, #2FE0B0, #8FE9FF);
  box-shadow: 0 0 12px rgba(47, 224, 176, .5); transition: width .08s linear;
}
.raw-meter::before {
  content: ''; position: absolute; width: 220px; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,.12); z-index: -1;
}
.raw-meter em {
  font-style: normal; font-size: .66rem; font-weight: 700; color: #CFE9E2;
  background: rgba(26, 20, 17, .72); padding: 3px 9px; border-radius: 999px;
}
/* لوحة الماكينة مفتوحة؟ أزرار التفاعل بتروح عمود على الشمال فوق لوحة المخزون */
.raw-wrap.paneled .raw-acts {
  left: 12px; right: auto; bottom: 62px; top: auto; transform: none;
  flex-direction: column; align-items: stretch; width: 72px; max-width: 72px; gap: 5px;
}
.raw-wrap.paneled .raw-acts button kbd { display: none; }
body.is-touch .raw-wrap.paneled .raw-acts { left: auto; right: 8px; bottom: 10px; }
@media (max-width: 620px) {
  .raw-acts button { min-width: 52px; font-size: .62rem; padding: 6px 7px 4px; }
  .raw-acts button kbd { display: none; }
}

/* ---------- اسم المحطة ---------- */
.raw-tag {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(14px);
  background: rgba(36, 28, 22, .88); color: #fff;
  backdrop-filter: blur(8px);
  padding: 11px 22px; border-radius: 15px;
  font-weight: 700; font-size: .98rem; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: var(--shadow);
}
.raw-tag.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.raw-tag small { display: block; font-weight: 500; font-size: .73rem; opacity: .75; margin-top: 3px; }
.raw-wrap.paneled .raw-tag { opacity: 0; }

/* ---------- قراءة حالة الكوباية ---------- */
.raw-cup {
  position: absolute; left: 50%; top: 14px; bottom: auto; transform: translateX(-50%);
  z-index: 13;
  display: flex; align-items: center; gap: 10px;
  background: rgba(36, 28, 22, .72); color: #F7F2E8;
  padding: 6px 14px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  backdrop-filter: blur(6px); pointer-events: none;
}
.raw-cup[hidden] { display: none; }   /* الـdisplay:flex فوق بيلغي hidden لوحده */
.raw-cup i { width: 4px; height: 4px; border-radius: 50%; background: #E2BE86; }
.raw-wrap.paneled .raw-cup { top: 14px; }
body.seen-help .raw-cup { top: 14px; }
/* التعليمات فوق، فالكوباية بتنزل تحتيها لحد ما التعليمات تختفي */
body:not(.seen-help) .raw-cup { top: 58px; }

/* ---------- وضع المشاهدة: المشهد لوحده ---------- */
.raw-top-right { display: flex; align-items: center; gap: 10px; }
.raw-eye, .raw-eye-back {
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1);
  color: #F7F2E8; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: .92rem; line-height: 1; transition: background .15s ease, transform .15s ease;
}
.raw-eye:hover, .raw-eye-back:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.raw-eye-back {
  position: absolute; top: 12px; right: 12px; z-index: 40;
  display: none; background: rgba(26, 20, 17, .6); backdrop-filter: blur(6px);
}
body.cinema .raw-eye-back { display: block; }
body.cinema .raw-stock,
body.cinema .raw-help,
body.cinema .raw-acts,
body.cinema .raw-cup,
body.cinema .raw-nora,
body.cinema .raw-toasts,
body.cinema .raw-tag,
body.cinema .raw-hud,
body.cinema .raw-serve { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
body.cinema .raw-top { display: none; }        /* مش بس شفاف — يسيب مكانه للمشهد */
body.cinema .raw-wrap { height: 100svh; }

/* ---------- الوضع الطولي على الموبايل: اللعب لازم يكون بالعرض ---------- */
.raw-rotate { display: none; }
body.blocked .raw-rotate {
  display: flex; position: fixed; inset: 0; z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 28px max(28px, env(safe-area-inset-left)); text-align: center;
  background: linear-gradient(160deg, #241C16, #12100E 58%, #3A1622);
  color: var(--cream);
}
body.blocked .raw-rotate b { font-size: 1.15rem; font-weight: 800; }
body.blocked .raw-rotate span { font-size: .82rem; opacity: .72; max-width: 300px; line-height: 1.75; }
body.blocked .raw-rotate small { font-size: .7rem; color: #F5D08A; min-height: 16px; }
body.blocked .raw-rotate button {
  margin-top: 6px; padding: 13px 24px; border: none; border-radius: 13px; cursor: pointer;
  background: linear-gradient(120deg, var(--burgundy), var(--burgundy-2));
  color: #fff; font-family: inherit; font-size: .9rem; font-weight: 800;
  box-shadow: 0 12px 26px rgba(110, 36, 56, .45);
}
/* موبايل بيلفّ */
.raw-rotate .phone {
  width: 74px; height: 118px; border-radius: 13px;
  border: 3px solid rgba(232, 201, 154, .75);
  position: relative; animation: rawturn 2.8s ease-in-out infinite;
}
.raw-rotate .phone i {
  position: absolute; left: 50%; bottom: 7px; width: 26px; height: 3px;
  margin-left: -13px; border-radius: 3px; background: rgba(232, 201, 154, .6);
}
@keyframes rawturn {
  0%, 26% { transform: rotate(0deg); }
  52%, 86% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .raw-rotate .phone { animation: none; transform: rotate(-90deg); } }
/* كل حاجة تانية بتختفي ورا شاشة القفل — بس هي نفسها جوه الـwrap فلازم ترجع تبان */
body.blocked .raw-top, body.blocked .raw-wrap { visibility: hidden; }
body.blocked .raw-rotate { visibility: visible; }

/* ==========================================================================
   لوحة تحكّم الماكينة (HUD) — زجاج داكن شفاف فوق المشهد
   ========================================================================== */
.raw-hud {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%) translateY(18px) scale(.985);
  width: min(560px, calc(100% - 28px));
  max-height: min(64%, calc(100% - 88px)); overflow-y: auto;
  background: linear-gradient(180deg, rgba(26, 20, 17, .82), rgba(18, 14, 12, .88));
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255, 236, 205, .16);
  border-radius: 20px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 236, 205, .12),
              0 0 44px rgba(176, 138, 74, .16);
  color: #F3EADC; padding: 14px 16px 16px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2, .9, .3, 1);
  scrollbar-width: thin;
}
.raw-hud.on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1); }

.raw-hud-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 236, 205, .14); }
.raw-hud-id { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.raw-hud-id .ico { font-size: 1.3rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.raw-hud-id .txt { display: flex; flex-direction: column; min-width: 0; }
.raw-hud-id b { font-family: 'Outfit', var(--font); font-size: .82rem; letter-spacing: .09em;
  color: #E8C99A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raw-hud-id small { font-size: .72rem; opacity: .66; }

.raw-leds { display: flex; gap: 6px; }
.raw-leds .led { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 3px rgba(0,0,0,.6); transition: background .2s ease, box-shadow .2s ease; }
.raw-leds .led.ready.on { background: #4ADE80; box-shadow: 0 0 9px #4ADE80; }
.raw-leds .led.busy.on { background: #F5B942; box-shadow: 0 0 9px #F5B942; animation: rawpulse .8s ease infinite; }
.raw-leds .led.warn.on { background: #F0563F; box-shadow: 0 0 9px #F0563F; }
@keyframes rawpulse { 50% { opacity: .35; } }

.raw-hud-big {
  border: 1px solid rgba(255,236,205,.2); background: rgba(255,255,255,.06);
  color: #F3EADC; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: .85rem; line-height: 1; flex: none; transition: background .15s ease;
}
.raw-hud-big:hover { background: rgba(255,255,255,.16); }
.raw-hud.big {
  width: min(680px, calc(100% - 24px)); max-height: calc(100% - 60px); bottom: 12px;
}
.raw-hud.mini { max-height: 74px; overflow: hidden; }
.raw-hud.mini::after { content: 'اسحب لفوق تفتحها'; }
.raw-hud-x { border: 1px solid rgba(255,236,205,.28); background: rgba(240, 86, 63, .18);
  color: #FFD9CF; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font-size: .95rem; line-height: 1; flex: none;
  transition: background .15s ease, transform .15s ease; }
.raw-hud-x:hover { background: rgba(240, 86, 63, .3); transform: rotate(90deg); }

/* شاشة رقمية */
.raw-lcd { display: flex; gap: 8px; margin: 9px 0 9px; padding: 8px 10px;
  background: rgba(6, 12, 14, .72); border: 1px solid rgba(120, 220, 235, .16);
  border-radius: 12px; box-shadow: inset 0 0 22px rgba(0, 190, 220, .07); }
.raw-lcd-cell { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 4px;
  font-family: var(--mono); }
.raw-lcd-cell .ic { font-size: .8rem; opacity: .9; }
.raw-lcd-cell .val { font-size: 1.02rem; font-weight: 800; color: #8FE9FF;
  text-shadow: 0 0 10px rgba(90, 210, 255, .45); }
.raw-lcd-cell .un { font-size: .62rem; opacity: .6; }

/* صف المفتاح والخزان والصيانة */
.raw-hud-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; flex-wrap: wrap; }
.raw-power { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.22); background: rgba(255,255,255,.05); color: #E7DCCB;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.raw-power.on { background: rgba(74, 222, 128, .16); border-color: rgba(74, 222, 128, .5);
  color: #A8F0C2; box-shadow: 0 0 16px rgba(74, 222, 128, .22); }
.raw-gauge { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 7px;
  font-size: .68rem; opacity: .8; }
.raw-gauge i { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.raw-gauge b { display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #56C7E8, #8FE9FF); transition: width .4s ease; }
.raw-gauge b.low { background: linear-gradient(90deg, #F0563F, #F5B942); }
.raw-care { padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: .72rem; font-weight: 700;
  border: 1px dashed rgba(255,236,205,.24); background: transparent; color: #CFC0AA; opacity: .55; }
.raw-care.due { opacity: 1; border-style: solid; border-color: #F0563F; color: #FFC9BC;
  background: rgba(240, 86, 63, .16); animation: rawpulse 1.4s ease infinite; }

/* التحكّمات */
.raw-ctrls { display: flex; flex-direction: column; gap: 8px; }
.raw-ctrl .row { display: flex; align-items: center; justify-content: space-between;
  font-size: .76rem; font-weight: 700; margin-bottom: 6px; }
.raw-ctrl .row output { font-family: var(--mono); color: #8FE9FF; }
.raw-ctrl .row output.off { color: #FFB4A2; }
.raw-ctrl .hint { font-size: .66rem; opacity: .55; margin-top: 5px; }
.raw-track { position: relative; height: 22px; display: flex; align-items: center; }
.raw-track .ok { position: absolute; top: 8px; height: 6px; border-radius: 999px;
  background: rgba(74, 222, 128, .34); box-shadow: 0 0 10px rgba(74, 222, 128, .25); }
.raw-track input[type=range] { position: relative; width: 100%; margin: 0; accent-color: #E8C99A;
  background: transparent; }

.raw-choice { display: flex; gap: 7px; flex-wrap: wrap; }
.raw-choice .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 11px; border-radius: 999px; font-size: .73rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.18); background: rgba(255,255,255,.04); color: #E7DCCB;
  transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.raw-choice .chip i { width: 11px; height: 11px; border-radius: 50%; }
.raw-choice .chip:hover { transform: translateY(-1px); }
.raw-choice .chip.on { border-color: #E8C99A; background: rgba(232, 201, 154, .16); }

.raw-counter { display: flex; align-items: center; gap: 10px; }
.raw-counter .cbtn { width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,236,205,.22); background: rgba(255,255,255,.05);
  color: #F3EADC; font-size: 1rem; line-height: 1; transition: background .15s ease, transform .1s ease; }
.raw-counter .cbtn:active { transform: scale(.9); background: rgba(232, 201, 154, .24); }
.raw-counter .dots { display: flex; gap: 5px; flex: 1; }
.raw-counter .dots i { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1);
  transition: background .18s ease, box-shadow .18s ease; }
.raw-counter .dots i.goal { outline: 1px dashed rgba(232, 201, 154, .5); outline-offset: 2px; }
.raw-counter .dots i.on { background: #E8C99A; box-shadow: 0 0 8px rgba(232, 201, 154, .5); }

/* ---------- المكوّنات جوه لوحة الماكينة ---------- */
.raw-mixhost { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,236,205,.14); }
.raw-bin { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.raw-bin .lab { font-size: .68rem; opacity: .6; }
.raw-bin .items { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.raw-bin .empty { font-style: normal; font-size: .68rem; opacity: .35; }
.raw-bin .in {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.28); background: rgba(255,255,255,.07); color: #F3EADC;
}
.raw-bin .in b { width: 9px; height: 9px; border-radius: 50%; }
.raw-bin .in em { font-style: normal; opacity: .5; font-size: .62rem; }
.raw-bin .in:hover { border-color: #F0563F; }
.raw-bin .clr {
  padding: 4px 9px; border-radius: 999px; cursor: pointer; font-size: .64rem; font-weight: 700;
  border: 1px dashed rgba(255,236,205,.28); background: transparent; color: #CFC0AA;
}
.raw-cats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.raw-cats .cat {
  padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: .68rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.16); background: rgba(255,255,255,.04); color: #DCD0BC;
}
.raw-cats .cat.on { border-color: var(--emerald-kora); background: rgba(20,155,131,.2); color: #BFF0E2; }
.raw-ing { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.raw-ing .ing {
  display: flex; align-items: center; gap: 7px; cursor: grab;
  padding: 7px 9px; border-radius: 11px; font-size: .7rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.16); background: rgba(255,255,255,.05); color: #F3EADC;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.raw-ing .ing b { width: 12px; height: 12px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.raw-ing .ing:hover { transform: translateY(-1px); border-color: var(--brass); }
.raw-ing .ing:active { cursor: grabbing; transform: scale(.96); }
.raw-ing .ing.on { background: rgba(20,155,131,.22); border-color: var(--emerald-kora); }
.raw-tip {
  display: block; width: 100%; margin-top: 9px; padding: 8px 10px; cursor: pointer;
  border-radius: 11px; border: 1px dashed rgba(245, 208, 138, .45);
  background: rgba(245, 208, 138, .08); color: #F5D08A;
  font-family: inherit; font-size: .68rem; font-weight: 700; text-align: start; line-height: 1.6;
}
.raw-tip:hover { background: rgba(245, 208, 138, .16); }
.raw-recipe {
  margin-top: 8px; padding: 7px 10px; border-radius: 10px; text-align: center;
  background: rgba(74, 222, 128, .16); border: 1px solid rgba(74, 222, 128, .45);
  color: #C9F7DA; font-size: .7rem; font-weight: 800;
}

/* زرار التشغيل وشريط التقدّم */
.raw-run { width: 100%; margin-top: 11px; padding: 11px; cursor: pointer;
  border: none; border-radius: 13px; font-size: .88rem; font-weight: 800; color: #fff;
  background: linear-gradient(120deg, var(--burgundy), var(--burgundy-2));
  box-shadow: 0 10px 26px rgba(110, 36, 56, .4);
  transition: filter .15s ease, transform .12s ease; }
.raw-run:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.raw-run:active:not(:disabled) { transform: scale(.985); }
.raw-run:disabled { cursor: default; filter: grayscale(.4) brightness(.8); }
/* تلميح اختصار ⏎ على زرار تشغيل الماكينة. بـ`::after` مش عنصر جوّه الزرار
   لأن `raw-console-ui` بتعيد كتابة `textContent` مع كل رسمة وكانت هتمسحه.
   مقصور على `#hud` عشان زرار «قدّم واحفظ» في كارت التقديم بياخد نفس الكلاس.
   وبيختفي على اللمس — مفيش كيبورد. */
#hud .raw-run::after { content: ' ⏎'; opacity: .5; font-size: .85em; }
body.is-touch #hud .raw-run::after { content: none; }
.raw-prog { position: relative; height: 5px; margin-top: 9px; border-radius: 999px;
  background: rgba(255,255,255,.08); overflow: visible; }
.raw-prog i { display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #E8C99A, #F5B942); box-shadow: 0 0 12px rgba(245, 185, 66, .5);
  transition: width .1s linear; }
.raw-prog span { position: absolute; inset-inline-end: 0; top: 8px; font-size: .68rem;
  font-family: var(--mono); font-weight: 600; color: #F5B942; }
.raw-note { min-height: 16px; margin-top: 12px; font-size: .72rem; font-weight: 700; text-align: center; }
.raw-note.good { color: #A8F0C2; }
.raw-note.warn { color: #F5D08A; }
.raw-note.bad { color: #FFB4A2; }

/* ---------- نورة: صورة مصغّرة وفقاعة كلام ---------- */
.raw-nora {
  position: absolute; right: 14px; left: auto; inset-inline-start: auto; bottom: 14px;
  display: flex; align-items: flex-end; gap: 8px; max-width: 250px; z-index: 12;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.raw-nora.on { opacity: 1; transform: translateY(0); }
.raw-nora .face { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(160deg, #3A2A20, #241C16);
  border: 2px solid rgba(232, 201, 154, .5); overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.raw-nora .bubble { background: rgba(247, 242, 232, .95); color: #2A2119;
  border-radius: 14px; border-bottom-right-radius: 4px;
  padding: 8px 11px; font-size: .71rem; font-weight: 600; line-height: 1.6;
  box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.raw-nora[data-mood="happy"] .face { border-color: #4ADE80; }
.raw-nora[data-mood="oops"] .face { border-color: #F0563F; }

/* ---------- إشعارات ---------- */
.raw-toasts {
  position: absolute; bottom: 118px; top: auto; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; gap: 7px; align-items: center;
  pointer-events: none; z-index: 14;
}
.raw-toast { padding: 8px 15px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: rgba(26, 20, 17, .88); color: #F3EADC; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,236,205,.16);
  opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }
.raw-toast.in { opacity: 1; transform: translateY(0); }
.raw-toast.good { border-color: rgba(74, 222, 128, .5); color: #C9F7DA; }
.raw-toast.warn { border-color: rgba(245, 185, 66, .5); color: #F7DFAE; }
.raw-toast.bad { border-color: rgba(240, 86, 63, .55); color: #FFC9BC; }

/* ---------- وضع التركيز السينمائي ---------- */
.raw-wrap.focus::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 44%, rgba(0,0,0,0) 40%, rgba(12, 8, 6, .5) 100%);
  opacity: 0; transition: opacity .5s ease;
}
.raw-wrap.focus::after { opacity: 1; }
.raw-wrap.focus .raw-stock, .raw-wrap.focus .raw-help { opacity: .35; transition: opacity .4s ease; }
.raw-wrap.focus .raw-stock:hover { opacity: 1; }

@media (max-width: 820px) {
  .raw-hud { bottom: 10px; padding: 9px 10px 11px; max-height: calc(100% - 64px); border-radius: 16px; }
  .raw-hud-id b { font-size: .74rem; }
  .raw-lcd { padding: 6px 8px; margin: 7px 0; }
  .raw-lcd-cell .val { font-size: .86rem; }
  .raw-ctrl .row { font-size: .7rem; margin-bottom: 4px; }
  .raw-ctrls { gap: 6px; }
  .raw-run { padding: 10px; font-size: .82rem; margin-top: 9px; }
  .raw-ing { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .raw-ing .ing { font-size: .65rem; padding: 6px 7px; }
}
@media (max-width: 620px) {
  .raw-lcd-cell .val { font-size: .9rem; }
  .raw-nora { display: none; }
}


/* زرار الإيقاف اليدوي + علامة الهدف على الشريط */
.raw-run.stop { background: linear-gradient(120deg, #B3352F, #E0663C); animation: rawpulse 1.1s ease infinite; }
.raw-prog i.near { background: linear-gradient(90deg, #4ADE80, #A8F0C2); box-shadow: 0 0 14px rgba(74, 222, 128, .55); }
.raw-ctrl .live-hint { color: #F5D08A; opacity: .85; }

/* شريط الكوباية + زرار التقديم */
.raw-cup button {
  pointer-events: auto; margin-inline-start: 6px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid rgba(232, 201, 154, .5); background: rgba(232, 201, 154, .16);
  color: #F7E7C8; font-family: inherit; font-size: .7rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.raw-cup button:hover { background: rgba(232, 201, 154, .3); transform: translateY(-1px); }
.raw-cup button[hidden] { display: none; }

/* شارة المستوى في لوحة المخزون */
.raw-rank {
  margin-top: 6px; padding: 5px 8px; border-radius: 9px; text-align: center;
  background: rgba(20, 155, 131, .12); border: 1px solid rgba(20, 155, 131, .35);
  color: #14684F; font-size: .68rem; font-weight: 700;
}

/* كارت مراجعة المشروب */
.raw-serve {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97);
  width: min(360px, calc(100% - 32px));
  background: linear-gradient(180deg, rgba(26, 20, 17, .93), rgba(12, 9, 8, .95));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 236, 205, .18); border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  color: #F3EADC; padding: 16px 18px 18px; z-index: 12;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.raw-serve.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.raw-serve header { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,236,205,.14); padding-bottom: 9px; }
.raw-serve header b { font-size: .9rem; }
.raw-serve .score { text-align: center; margin: 14px 0 10px; }
.raw-serve .score b { display: block; font-family: var(--mono); font-size: 2.6rem; font-weight: 700;
  line-height: 1; color: #8FE9FF; text-shadow: 0 0 22px rgba(90, 210, 255, .4); }
.raw-serve .score b.good { color: #8CF0B4; text-shadow: 0 0 22px rgba(74, 222, 128, .4); }
.raw-serve .score b.warn { color: #F5D08A; text-shadow: 0 0 22px rgba(245, 185, 66, .35); }
.raw-serve .score b.bad { color: #FFB4A2; text-shadow: 0 0 22px rgba(240, 86, 63, .35); }
.raw-serve .score small { font-size: .68rem; opacity: .6; }
.raw-serve .lines { list-style: none; margin: 0 0 10px; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.raw-serve .lines li { font-size: .73rem; opacity: .82; padding-inline-start: 14px; position: relative; }
.raw-serve .lines li::before { content: '·'; position: absolute; inset-inline-start: 4px; color: var(--copper); }
.raw-serve .review { margin: 0 0 12px; font-size: .78rem; font-weight: 600; line-height: 1.7;
  color: #E8C99A; }
.raw-serve .name { display: block; font-size: .7rem; opacity: .75; margin-bottom: 12px; }
.raw-serve .name input {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  border-radius: 10px; border: 1px solid rgba(255,236,205,.2);
  background: rgba(255,255,255,.05); color: #F3EADC; font-family: inherit; font-size: .8rem;
}
.raw-serve .name input:focus { outline: none; border-color: var(--emerald-kora); }

@media (prefers-reduced-motion: reduce) {
  .raw-hud, .raw-serve, .raw-toast, .raw-nora { transition-duration: .01ms !important; }
  .raw-leds .led.busy.on, .raw-run.stop, .raw-care.due { animation: none !important; }
}


/* ==========================================================================
   الموبايل: جويستيك، مساحات لمس أكبر، واحترام حواف الشاشة
   ========================================================================== */
/* الجويستيك على الشمال الفيزيائي (صباع الإيد الشمال) مهما كان اتجاه الصفحة */
.raw-stick-zone {
  position: absolute; left: 0; right: auto; bottom: 0;
  width: 44%; height: 55%;
  touch-action: none; z-index: 6;
}
.raw-stick {
  position: absolute; width: 108px; height: 108px; margin: -54px 0 0 -54px;
  border-radius: 50%; border: 2px solid rgba(255, 236, 205, .28);
  background: rgba(26, 20, 17, .3); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.raw-stick.on { opacity: 1; }
.raw-stick i {
  position: absolute; inset-inline-start: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgba(232, 201, 154, .8);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* على اللمس: مفيش مفاتيح كيبورد ولا تلميحات كيبورد */
body.is-touch .raw-acts button kbd { display: none; }
body.is-touch .raw-help { display: none; }
body.is-touch .raw-acts button { min-width: 66px; padding: 9px 10px; }
body.is-touch .raw-acts { bottom: 14px; inset-inline-end: 10px; left: auto; transform: none;
  flex-direction: column; align-items: stretch; max-width: 84px; }
body.is-touch .raw-meter { position: absolute; inset-inline-end: 96px; bottom: 8px; width: 180px; }
body.is-touch .raw-cup { bottom: 12px; left: 42%; }
body.is-touch .raw-tag { bottom: 78px; }

/* حواف الشاشة (الـnotch) */
.raw-top { padding-inline-start: max(20px, env(safe-area-inset-left));
           padding-inline-end: max(20px, env(safe-area-inset-right)); }
.raw-stock { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
.raw-acts { padding-bottom: env(safe-area-inset-bottom); }

/* الشاشة العرضية القصيرة (موبايل مقلوب): كل حاجة أنحف */
@media (max-height: 480px) and (orientation: landscape) {
  .raw-top { height: 42px; }
  .raw-wrap { height: calc(100svh - 42px); }
  .raw-stock { width: 132px; padding: 8px; top: auto; bottom: 10px; }
  .raw-stock h3 { font-size: .74rem; margin-bottom: 6px; padding-bottom: 5px; }
  .raw-stock button { font-size: .66rem; padding: 5px 7px; margin-bottom: 4px; }
  .raw-rank, .raw-sound { font-size: .62rem; padding: 4px 6px; }
  .raw-hud { max-height: calc(100% - 54px); padding: 9px 11px 11px; }
  .raw-hud-id small { display: none; }
  .raw-lcd { margin: 7px 0; padding: 6px 8px; }
  .raw-ctrls { gap: 6px; }
  .raw-run { margin-top: 8px; padding: 9px; }
  .raw-serve { padding: 12px 14px 14px; }
  .raw-serve .score b { font-size: 2rem; }
}

/* الموبايل الطولي: اللوحة بتاخد نص الشاشة السفلي */
@media (max-width: 620px) and (orientation: portrait) {
  .raw-hud { max-height: 52%; }
  .raw-serve { width: calc(100% - 24px); }
}


/* ---------- التحميل والبديل ---------- */
.raw-load {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center; align-content: center; gap: 14px;
  background: var(--cream-2); transition: opacity .45s ease;
}
.raw-load.gone { opacity: 0; pointer-events: none; }
.raw-load i {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(120, 90, 70, .2); border-top-color: var(--burgundy);
  animation: rawspin .85s linear infinite;
}
.raw-load span { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
@keyframes rawspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .raw-load i { animation: none; } }

.raw-fallback { display: none; padding: 70px 22px; text-align: center; }
.raw-fallback h2 { font-size: 1.1rem; }
.raw-fallback p { color: var(--ink-soft); font-size: .88rem; }

/* ---------- شاشات صغيرة ---------- */
@media (max-width: 820px) {
  .raw-stock { width: 152px; padding: 10px; top: auto; }
  .raw-stock button { font-size: .73rem; padding: 6px 8px; }
  .raw-help { font-size: .68rem; max-width: 160px; padding: 7px 10px; }
}
@media (max-width: 520px) {
  .raw-stock { width: 112px; top: auto; bottom: 8px; left: 8px; padding: 7px; }
  .raw-stock h3 { font-size: .72rem; margin-bottom: 6px; padding-bottom: 5px; }
  .raw-stock button { font-size: .63rem; padding: 5px 6px; gap: 5px; margin-bottom: 4px; }
  .raw-stock button i { width: 8px; height: 8px; }
  .raw-rank, .raw-sound { font-size: .58rem; padding: 4px 5px; }
  .raw-help { display: none; }
  .raw-tag { font-size: .84rem; padding: 9px 14px; bottom: 14px; }
  .raw-panel { bottom: 10px; padding: 13px 14px; }
}


/* ==========================================================================
   تصحيحات أخيرة (بتيجي في الآخر عشان تغلب أي قاعدة مكرّرة فوق)
   ========================================================================== */
body.is-touch .raw-acts button span { display: none; }
body.is-touch .raw-acts button kbd { display: none; }
body.is-touch .raw-acts button b { font-size: 1.4rem; line-height: 1.2; }
body.is-touch .raw-acts button { min-width: 0; padding: 12px 4px; border-radius: 15px; }
body.is-touch .raw-acts {
  left: auto; right: 8px; bottom: 10px; top: auto; transform: none;
  flex-direction: column; align-items: stretch; width: 62px; max-width: 62px; gap: 6px;
}
body.is-touch .raw-stock { top: auto; }

/* الإشعارات وقت ما اللوحة مفتوحة بتعلى شوية عشان ما تتغطّاش */
.raw-wrap.paneled .raw-toasts { bottom: auto; top: 58px; }


/* ---------- ترويسة قسم المكوّنات ---------- */
.raw-mix-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.raw-mix-head .ttl { font-size: .72rem; font-weight: 800; opacity: .8; }
.raw-mix-toggle {
  padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: .64rem; font-weight: 700;
  border: 1px solid rgba(255,236,205,.24); background: rgba(255,255,255,.06); color: #E7DCCB;
  font-family: inherit;
}
.raw-mix-toggle:hover { background: rgba(255,255,255,.16); }
/* وصف المكوّن تحت اسمه */
.raw-ing .ing { flex-direction: row; align-items: center; }
.raw-ing .ing .nm { font-weight: 700; }
.raw-ing .ing small { display: block; font-size: .58rem; opacity: .55; font-weight: 500; line-height: 1.4; }
.raw-ing .ing > b { align-self: flex-start; margin-top: 3px; }

/* زرار إغلاق الكل */
.raw-closeall {
  width: 100%; margin-top: 4px; padding: 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(240, 86, 63, .4); background: rgba(240, 86, 63, .12);
  color: #B3352F; font-family: inherit; font-size: .68rem; font-weight: 800;
}
.raw-closeall:hover { background: rgba(240, 86, 63, .22); }


/* ==========================================================================
   الوضع الداكن — بيتبع إعداد النظام. اللوحات الزجاجية (HUD/الماكينة) داكنة
   أصلاً، فاللي بيتغيّر هو الأسطح الفاتحة: المخزون، فقاعة نورة، كارت التقديم.
   ========================================================================== */
/* الوضع الغامق بقى ثابت — الصفحة شكلها واحد على كل جهاز */

  :root {
    --cream: #16130F;
    --cream-2: #1E1A16;
    --ink: #EFE6D8;
    --ink-soft: #A99C89;
    --line: #3A322A;
    --shadow: 0 18px 44px rgba(0, 0, 0, .6);
  }
  .raw-stock {
    background: rgba(24, 20, 16, .93);
    border-color: var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }
  .raw-stock h3 { color: var(--ink); }
  .raw-stock button {
    background: #241F1A; color: var(--ink); border-color: var(--line);
  }
  .raw-stock button.at { background: #3A2028; border-color: var(--burgundy-2); }
  .raw-sound { color: var(--ink-soft); }
  .raw-rank { background: rgba(20, 155, 131, .18); color: #7FD9C2; border-color: rgba(20,155,131,.4); }
  .raw-nora .bubble { background: rgba(28, 24, 20, .95); color: var(--ink); }
  .raw-serve .name input { background: rgba(255,255,255,.06); }
  .raw-load { background: var(--cream-2); }
  .raw-load span { color: var(--ink-soft); }
  .raw-fallback p { color: var(--ink-soft); }

/* ===== العملات والتحديات اليومية ===== */
.raw-coins { display: flex; align-items: center; gap: 7px; margin: 6px 0 2px;
  padding: 5px 8px; border-radius: 10px; background: rgba(176,138,74,.14);
  border: 1px solid rgba(176,138,74,.3); }
.raw-coins .ico { font-size: .9rem; }
.raw-coins .n { font-weight: 800; font-size: .82rem; color: #F0C97A;
  font-variant-numeric: tabular-nums; flex: 1; }
.raw-coins .go { border: 1px solid rgba(255,236,205,.24); background: transparent;
  color: #EFE6D8; border-radius: 999px; padding: 3px 9px; font-size: .66rem;
  font-weight: 700; cursor: pointer; font-family: inherit; }
.raw-coins .go:hover { background: rgba(255,236,205,.12); border-color: var(--brass); }

.raw-chal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(400px, calc(100% - 32px)); max-height: min(76%, 560px); overflow-y: auto;
  background: linear-gradient(180deg, rgba(26,20,17,.94), rgba(18,14,12,.96));
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,236,205,.18); border-radius: 18px;
  box-shadow: 0 26px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,236,205,.1);
  color: #F3EADC; padding: 14px 16px 16px; z-index: 16; }
.raw-chal .hd { display: flex; align-items: center; gap: 10px; padding-bottom: 9px;
  margin-bottom: 9px; border-bottom: 1px solid rgba(255,236,205,.14); }
.raw-chal .hd b { flex: 1; font-size: .86rem; letter-spacing: .04em; }
.raw-chal .hd .x { border: 1px solid rgba(255,236,205,.26); background: rgba(240,86,63,.16);
  color: #F3EADC; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: .7rem; font-family: inherit; }
.raw-chal .hd .x:hover { background: rgba(240,86,63,.3); }
.raw-chal .row { display: flex; align-items: center; gap: 9px; padding: 7px 2px;
  border-bottom: 1px solid rgba(255,236,205,.06); font-size: .74rem; }
.raw-chal .row.done { opacity: .55; }
.raw-chal .row .mk { font-style: normal; }
.raw-chal .row .tx { flex: 1; }
.raw-chal .row .pr { opacity: .6; font-variant-numeric: tabular-nums; font-size: .68rem; }
.raw-chal .row .rw { color: #F0C97A; font-weight: 700; font-size: .68rem; }
.raw-chal .sep { margin: 12px 0 4px; font-size: .68rem; opacity: .55;
  letter-spacing: .06em; }
.raw-chal .row.skin .dot { width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: rgba(230,240,245,.5); border: 1px solid rgba(255,255,255,.25); }
.raw-chal .row.skin.on { background: rgba(20,155,131,.14); border-radius: 8px; }
.raw-chal .row .buy { border: 1px solid rgba(255,236,205,.24); background: transparent;
  color: #EFE6D8; border-radius: 999px; padding: 3px 10px; font-size: .66rem;
  font-weight: 700; cursor: pointer; font-family: inherit; }
.raw-chal .row .buy:hover:not(:disabled) { background: rgba(255,236,205,.12); }
.raw-chal .row .buy:disabled { opacity: .5; cursor: default; }

@media (max-width: 620px) {
  .raw-chal { width: calc(100% - 24px); padding: 12px 13px 14px; }
  .raw-chal .row { font-size: .7rem; }
}

/* ==========================================================================
   الوضع اليدوي: التحكّم على الماكينة نفسها

   لوحة الـDOM بتتخفي — بس **مش بـ`display:none`**. المحرّك
   (`raw-console-ui`) لسه بيقراها ويكتب فيها: العدّاد والتقييم والتقديم كلهم
   بيمرّوا من هناك. لو شلناها من الشجرة كنا هنكسر المنطق ده كله.

   فبنخفيها بصرياً ونمنع اللمس عنها، وسايبينها في الشجرة شغّالة. القراءات
   بقت على شاشة الماكينة في المشهد.
   ========================================================================== */
body.manual #hud {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
/* الإشعارات وفقاعة نورة بتفضل — دي مش تحكّم، دي كلام */
body.manual #toasts, body.manual #bubble { visibility: visible; opacity: 1; }

/* ==========================================================================
   شريط الأفعال السياقي

   كان بيعرض ست أزرار على طول أغلبها معطّل. دلوقتي الزرار بيختفي لما يبقى
   مش متاح، والشريط كله بيختفي لما مفيش فعل ممكن.

   `visibility` مش `display` للشريط: الأزرار لسه في الشجرة و`paintHands`
   بيقراها كل فريم، وإخفاؤها من التخطيط بيخلّي الشريط ينطّ كل ما زرار
   يظهر أو يختفي.
   ========================================================================== */
.raw-acts button.hide {
  display: none;
}
.raw-acts.empty {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.raw-acts {
  transition: opacity .22s ease;
}

/* ==========================================================================
   الوضع الطولي على الموبايل

   كان مقفول تماماً — اللعبة بترفض تشتغل لحد ما تلفّ الموبايل. بقى مسموح،
   فالتخطيط محتاج يتفكّ على شاشة ٣٧٥ بكسل عرض.

   المبدأ: المشهد ياخد أكبر مساحة، والواجهة تتكوّم على الأطراف بدل ما
   تتنافس على العرض.
   ========================================================================== */
body.portrait .raw-stock {
  inset-inline-start: 8px;
  top: 58px;
  max-width: 44vw;
}
body.portrait .raw-stock button { font-size: .74rem; padding: 7px 9px; }

/* شريط الأفعال بينزل تحت في صف أفقي بدل عمود على الجنب */
body.portrait .raw-acts {
  inset-inline-end: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 94vw;
}
body.portrait .raw-acts button { min-width: 58px; padding: 8px 8px; font-size: .7rem; }

body.portrait .raw-tag { bottom: 96px; font-size: .82rem; }
body.portrait .raw-cup { bottom: 96px; left: 50%; transform: translateX(-50%); }

/* لوحة الماكينة بتاخد عرض الشاشة كله في الطولي */
body.portrait #hud {
  inset-inline: 8px;
  width: auto;
  max-height: 52vh;
  overflow-y: auto;
}

/* زرار «كمّل بالطول» في شاشة التلميح */
.raw-rotate button.ghost {
  background: transparent;
  border: 1px solid rgba(239, 230, 216, .28);
  color: var(--ink, #EFE6D8);
  margin-top: 8px;
}
.raw-rotate button.ghost:hover { border-color: var(--brass, #B08A4A); }

/* ==========================================================================
   كارت الطلب

   الحالة بتتعرض **كاسم** («مستعجل») مش كعدّاد تنازلي. العدّاد بيخلّي
   اللعبة مهمّة، والاسم بيسيبها لعبة.
   ========================================================================== */
.raw-order {
  /* اليمين صراحةً: `inset-inline-end` في صفحة RTL بيرمي الكارت على
     الشمال، وهناك قايمة المكوّنات — الاتنين كانوا بيتصادموا. */
  position: absolute; top: 14px; right: 14px; inset-inline-end: auto; z-index: 14;
  background: rgba(247, 242, 232, .95);
  /* لازم لون خط صريح: الكارت خلفيته فاتحة جوّه واجهة غامقة، ومن غير
     السطر ده بيورّث `--ink` الفاتح فيبقى فاتح على فاتح — مش مقروء. */
  color: var(--ink);
  border: 1px solid rgba(58, 46, 34, .14);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(40, 30, 18, .18);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 156px; max-width: 42vw;
}
.raw-order b { font-size: .86rem; font-weight: 800; }
.raw-order span { font-size: .78rem; opacity: .78; }
.raw-order em {
  font-style: normal; font-size: .72rem; font-weight: 700;
  margin-top: 3px; padding: 2px 8px; border-radius: 999px; align-self: flex-start;
}
.raw-order em.ok   { background: rgba(58, 122, 74, .16); color: #2E6B3C; }
.raw-order em.warn { background: rgba(200, 132, 32, .18); color: #8A5A10; }
.raw-order em.bad  { background: rgba(190, 62, 48, .16); color: #9E2F24; }
/* طلب التطبيق: مش مزاج — دي إشارة مصدر. لون مختلف عن التلاتة عشان
   الباريستا يفرّق بلمحة بين حد واقف قدّامه وحد مستني بره. */
.raw-order em.app  { background: rgba(58, 104, 168, .18); color: #2C5C96; }

/* في الطولي الكارت بينزل تحت الهيدر على عرض الشاشة */
body.portrait .raw-order {
  inset-inline: 8px; top: 62px; max-width: none;
  flex-direction: row; align-items: center; gap: 8px;
}
body.portrait .raw-order em { margin-top: 0; margin-inline-start: auto; }

/* لازم يبقى **بعد** القاعدة الأساسية: التجاوز جوّه `@media` مبياخدش
   أولوية زيادة، فلو اتحط قبلها الخلفية الفاتحة بتكسبه. */
/* الوضع الغامق بقى ثابت — الصفحة شكلها واحد على كل جهاز */

  .raw-order em.app { background: rgba(94, 148, 214, .20); color: #8FBDF0; }
  .raw-order {
    background: rgba(24, 20, 16, .94);
    border-color: var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  }


/* ==========================================================================
   وضع المحطة · والإعدادات

   اللوحة الجانبية (المخزون والجودة والوقت والصوت) اتشالت. كانت تفكير
   قديم: قوائم بتقول للاعب يعمل إيه، وبتاخد ربع الشاشة، وبتبعد العين
   عن المكن — واللعبة أصلاً عن المكن.

   بدالها: تدوس على مكن → يملا الشاشة → تعمل الحركات عليه → ✕ تخرج.
   ========================================================================== */

/* ---------- زر الإعدادات ---------- */
.raw-gear {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 13;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; line-height: 1;
  background: rgba(26, 20, 17, .72); color: #F3EADC;
  border: 1px solid rgba(255, 236, 205, .2);
  backdrop-filter: blur(9px);
  transition: background .15s ease, transform .12s ease;
}
.raw-gear:hover { background: rgba(26, 20, 17, .9); transform: rotate(35deg); }

.raw-sheet {
  position: absolute; top: 64px; inset-inline-start: 14px; z-index: 13;
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px; border-radius: 15px; min-width: 176px;
  background: rgba(22, 19, 15, .94); backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.raw-sheet button {
  font-family: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; text-align: start;
  background: rgba(255, 255, 255, .06); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .1);
}
.raw-sheet button:hover { background: rgba(255, 255, 255, .13); }
.raw-sheet .raw-rank {
  margin: 2px 0 0; text-align: center; font-size: .68rem;
  padding: 7px; border-radius: 9px;
  background: rgba(20, 155, 131, .18); color: #7FD9C2;
  border: 1px solid rgba(20, 155, 131, .34);
}

/* ---------- وضع المحطة ---------- */
.raw-focus {
  position: absolute; inset: 0; z-index: 14;
  /* **بيسيب الدوسات تعدّي.** الطبقة دي بتغطّي المشهد كله، ولو
     بلعت الدوسات مكانش حد هيقدر يلمس المكن اللي هي أصلاً عشانه.
     الأزرار جواها بترجّع `pointer-events`. */
  pointer-events: none;
}
.raw-focus > * { pointer-events: auto; }

.raw-x {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-size: 1.15rem; line-height: 1;
  background: rgba(26, 20, 17, .82); color: #F3EADC;
  border: 1px solid rgba(255, 236, 205, .24);
  backdrop-filter: blur(9px);
  transition: background .15s ease, transform .12s ease;
}
.raw-x:hover { background: rgba(190, 62, 48, .85); border-color: #E4796B; transform: scale(1.06); }

.raw-focus-name {
  position: absolute; top: 20px; inset-inline: 0; margin: auto;
  width: max-content; max-width: 70vw;
  font-size: .9rem; font-weight: 700; color: #F3EADC;
  padding: 8px 20px; border-radius: 999px;
  background: rgba(26, 20, 17, .6); backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 236, 205, .14);
}

/* الأفعال في الوضع ده: شريط أفقي تحت، كبير وواضح */
/* **`left` و`right` صريحين مش `inset-inline`.**

   كتبت `inset-inline: 0` وبعدها `left: auto; right: auto` في نفس
   القاعدة — التانية بتلغي الأولى، فالعنصر فضل من غير مرساة و`margin:
   auto` مقدرش يوسّطه. النتيجة إنه لزق في اليمين (من قاعدة الشاشة
   الضيقة اللي بتحط `right: 12px`).

   التوسيط الصح: الطرفين صفر + `margin-inline: auto` + عرض بالمحتوى. */
.raw-focus .raw-acts {
  position: absolute; left: 0; right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  margin-inline: auto; width: max-content; max-width: calc(100% - 28px);
  transform: none;
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 8px; max-height: none; overflow: visible;
}
.raw-focus .raw-acts button { min-width: 72px; }

/* في الوضع ده كل حاجة تانية بتختفي — الشاشة للمكن */
body.in-focus .raw-gear,
body.in-focus .raw-nora,
body.in-focus .raw-help,
body.in-focus .raw-tag,
body.in-focus .raw-sheet { display: none !important; }

@media (max-width: 560px) {
  .raw-focus .raw-acts button { min-width: 62px; padding: 6px 7px 4px; }
  .raw-focus-name { font-size: .8rem; padding: 6px 14px; }
}

/* ---------- وضع المحطة: المكن لوحده ----------

   المرجع: الجهاز بيملا الشاشة ومفيش غيره. الكاميرا بتقرب، بس المطبخ
   حواليه بيفضل باين وبيسحب العين.

   تعتيم دائري من الحواف: المركز صافي والأطراف بتغمق. ده بيعزل المكن
   من غير ما يخفي المكان — اللاعب لسه حاسس إنه في مطبخ. */
.raw-focus::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 48%,
              transparent 0%, transparent 42%, rgba(12, 8, 16, .55) 78%,
              rgba(12, 8, 16, .82) 100%);
  opacity: 0;
  animation: focusIn .55s ease forwards;
}
@keyframes focusIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .raw-focus::before { animation: none; opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   شريط العملية
   ══════════════════════════════════════════════════════════════════
   اللعبة كانت زرارين وسايل بينزل. دي الحتة اللي بتخلّيها عملية:
   خطوات بترتيب، وعدّاد ليه نطاق صح، ودرجة على كل خطوة.

   مكانه تحت الاسم وفوق المكن — في مسار عين اللاعب وهو بيبص على
   الماكينة، من غير ما يغطّيها. */
.raw-proc {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 64px;
  margin-inline: auto;
  width: min(520px, calc(100% - 32px));
  display: grid;
  gap: 10px;
  justify-items: center;
  pointer-events: none;      /* الزرار بس بياخد اللمس */
  z-index: 6;
}
.raw-proc > * { pointer-events: auto; }

.pr-steps {
  display: flex; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: nowrap;          /* اللفّ في عمود ضيق بيعمل تداخل */
  width: max-content; max-width: 100%;
}
.pr-steps li {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 600 12px/1 "IBM Plex Sans Arabic", system-ui, sans-serif;
  background: rgba(20, 16, 28, .62);
  color: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .10);
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.pr-steps li.now {
  background: #8B5CF0; color: #fff; border-color: #C9B3F5;
  box-shadow: 0 0 0 3px rgba(139, 92, 240, .22);
}
.pr-steps li.done { color: #9EE6A8; border-color: rgba(158, 230, 168, .4); }
.pr-steps li em { font-style: normal; opacity: .85; font-size: 11px; }

.pr-now { text-align: center; }
.pr-now b {
  display: block;
  font: 800 19px/1.2 "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: #F6F1E8;
}
.pr-now span { font-size: 12.5px; color: rgba(255,255,255,.66); }

/* العدّاد: النطاق الأخضر هو الهدف، والخط الأبيض هو إنت */
.pr-gauge {
  position: relative;
  width: 100%; height: 26px;
  border-radius: 8px;
  background: rgba(20, 16, 28, .72);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.pr-zone {
  position: absolute; inset-block: 0;
  background: linear-gradient(180deg, rgba(110,220,130,.42), rgba(110,220,130,.22));
  border-inline: 1px solid rgba(150,240,170,.75);
}
.pr-fill {
  position: absolute; inset-block: 0;
  width: 3px; margin-inline-start: -1.5px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,255,.85);
}
.pr-gauge em {
  position: absolute; inset-inline-end: 8px; inset-block-start: 5px;
  font: 700 12px/1 "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: rgba(255,255,255,.9); font-style: normal;
}

.pr-go {
  min-width: 170px;
  padding: 11px 22px;
  border: 0; border-radius: 999px;
  font: 800 15px/1 "IBM Plex Sans Arabic", system-ui, sans-serif;
  background: #F0D8A8; color: #2A1F12;
  cursor: pointer;
  transition: transform .12s, background .18s, opacity .18s;
}
.pr-go:active { transform: scale(.96); }
.pr-go.live  { background: #E2604A; color: #fff; }
.pr-go:disabled { opacity: .42; cursor: not-allowed; }

@media (max-width: 560px) {
  .raw-proc { inset-block-start: 56px; gap: 7px; }
  .pr-steps li { padding: 4px 8px; font-size: 11px; }
  .pr-now b { font-size: 16px; }
}

/* **زرار العملية على اللمس.**

   القياس على ٣٧٥×٨١٢ طلّعه ١٧٠×٣٧. وده مش زرار عادي: خطوة
   `hold` معناها إنك **ماسكه بصباعك** وبتسيب في اللحظة الصح —
   يعني هو أداة التحكم في اللعبة كلها، ودقّة التوقيت بتتحدّد
   بيه. ٣٧ بكسل تحت الحد المريح للإصبع (٤٤).

   والمقياس بيكبّر معاه: المؤشّر اللي بتوقّفه في النطاق، لأن
   النطاق الضيق على شريط رفيع صعب تشوفه وإنت ماسك. */
@media (pointer: coarse) {
  .pr-go {
    min-width: 200px; padding: 16px 26px; font-size: 17px;
    /* الضغط المستمر بيختار النص على بعض المتصفحات وبيلغي اللمسة */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }
  .pr-gauge { height: 34px; }
  .pr-gauge em { font-size: 13px; inset-block-start: 9px; }
  .pr-fill { width: 4px; margin-inline-start: -2px; }

  /* الباقي من نفس القياس: قفل اللوحة (٣٣)، تشغيل الماكينة (٣٨)،
     وزرار المشهد السينمائي (٣٢). التلاتة بتتداس بالصباع. */
  .raw-hud-x { width: 44px; height: 44px; font-size: 18px; }
  .raw-run { padding: 15px; font-size: 16px; }
  #cinema, .raw-cinema { min-height: 44px; padding-block: 11px; }
}

/* ==========================================================================
   اعمل مشروبك — جوّه اللعبة

   المدخل ده كان ناقص خالص: الباني اتبنى في صفحة المنيو بس، فاللاعب
   اللي بيفتح اللعبة على طول مكانش بيشوف أي أثر ليه — مفيش طلب خاص
   في الطابور، فالخطوات بترجع للمسار الثابت القديم.
   ========================================================================== */
.raw-make {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer;
  border: 1px solid rgba(240,216,168,.45);
  background: linear-gradient(135deg, rgba(240,216,168,.22), rgba(240,216,168,.08));
  color: #F3E6CE; border-radius: 999px;
  font: 700 13px "IBM Plex Sans Arabic", system-ui, sans-serif;
  transition: background .18s, transform .12s;
}
.raw-make:hover { background: rgba(240,216,168,.3); }
.raw-make:active { transform: scale(.97); }
/* في وضع المشاهدة الواجهة بتختفي — الزرار ده جزء منها */
body.cinema .raw-make { display: none; }

.raw-own {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(12, 9, 18, .72);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.raw-own .own-card {
  width: min(560px, 100%); max-height: 92vh; overflow-y: auto;
  padding: 16px; border-radius: 18px;
  background: #F7F2E8; color: #2A2119;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.raw-own .own-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.raw-own .own-hd b { display: block; font-size: 18px; font-weight: 800; }
.raw-own .own-hd small { display: block; font-size: 11.5px; color: #6B5C4C; margin-top: 2px; }
.raw-own .own-x {
  width: 38px; height: 38px; flex: none; cursor: pointer;
  border: 1px solid #DCCFB9; background: #fff;
  border-radius: 10px; color: #2A2119; font-size: 16px;
}

/* التذكرة وإنت بتحضّر — الأرقام اللي بتلاحقها قدامك على الشاشة */
.raw-ticket {
  position: fixed; inset-inline-end: 12px; inset-block-start: 68px; z-index: 22;
  max-width: 220px; padding: 11px 13px;
  background: rgba(22, 17, 30, .86);
  border: 1px solid rgba(240,216,168,.3);
  border-radius: 12px; color: #F3E6CE;
  font: 400 12px/1.6 "IBM Plex Sans Arabic", system-ui, sans-serif;
  pointer-events: none;
}
.raw-ticket b { display: block; font-size: 14px; font-weight: 800; }
.raw-ticket small { display: block; font-size: 10.5px; opacity: .72; margin-bottom: 5px; }
.raw-ticket ul { margin: 0; padding: 0; list-style: none; }
.raw-ticket li { font-size: 11.5px; opacity: .92; }
.raw-ticket i {
  display: block; margin-top: 5px; padding-top: 5px; font-style: normal;
  font-size: 11px; font-weight: 700; color: #F0D8A8;
  border-top: 1px dashed rgba(240,216,168,.28);
}
body.cinema .raw-ticket { display: none; }
/* في وضع المحطة الشاشة للمكن — التذكرة بتتنقل تحت عشان ما تزحمش */
body.in-focus .raw-ticket {
  inset-block-start: auto; inset-block-end: 12px;
  max-width: 180px; font-size: 11px;
}

@media (max-width: 560px) {
  .raw-make span { display: none; }           /* الأيقونة بس */
  .raw-make { padding: 8px 11px; }
  .raw-own { padding: 10px; }
  .raw-own .own-card { padding: 12px; max-height: 94vh; }
  .raw-ticket { max-width: 160px; padding: 8px 10px; }
}
@media (pointer: coarse) {
  .raw-make { min-height: 40px; }
  .raw-own .own-x { width: 44px; height: 44px; }
}

/* رسالة فشل الباني — بدل الكارت الفاضي اللي مبيقولش حاجة */
.raw-own .own-fail {
  padding: 18px 16px; border-radius: 12px;
  background: #FBE9E7; border: 1px solid #E0A49C;
  color: #8C2F24; font: 600 13px/1.7 "IBM Plex Sans Arabic", system-ui, sans-serif;
}
/* زرار القفل: مساحة لمس أكبر من شكله، عشان الصباع ميضيعش */
.raw-own .own-x { position: relative; }
.raw-own .own-x::after {
  content: ''; position: absolute; inset: -10px;   /* هالة لمس غير مرئية */
}

/* ---------- الشيبسة بقت بتقول «فين» ----------
   الخطوات كانت أسامي أفعال مجرّدة من غير أي إشارة إن كل واحدة في
   مكان تاني في المطبخ. دلوقتي اسم المحطة تحت الفعل، واللي في
   محطتك دلوقتي متعلّمة. */
.pr-steps li { flex-direction: column; align-items: center; gap: 1px; padding: 5px 10px; }
.pr-steps li i {
  font-style: normal; font-size: 9.5px; font-weight: 600;
  opacity: .62; letter-spacing: .2px;
}
/* المحطة اللي إنت واقف فيها دلوقتي */
.pr-steps li.at {
  box-shadow: inset 0 0 0 1px rgba(240,216,168,.55);
}
.pr-steps li.at i { opacity: .95; color: #F0D8A8; }

/* ---------- الخطوة في محطة تانية ----------
   اللوحة كانت بتفضل بنفس شكلها: مقياس بيعرض «٠ جم» وزرار مقفول
   من غير سبب ظاهر. المقياس اللي مينفعش تحرّكه ضوضا — بيخلّي
   اللاعب يدوس ويستنى حاجة تحصل. */
.raw-proc.away .pr-now b { opacity: .55; }
.raw-proc.away .pr-now span { color: #F0D8A8; font-weight: 700; }
.raw-proc.away .pr-go {
  background: transparent; color: #F0D8A8;
  border: 1.5px dashed rgba(240,216,168,.55);
  opacity: 1;                       /* مش معطّل بصرياً — ده اتجاه مش منع */
}

/* ==========================================================================
   رسم اللاتيه
   ========================================================================== */
.raw-latte {
  position: fixed; inset: 0; z-index: 75;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; background: rgba(10, 8, 14, .78);
  backdrop-filter: blur(5px);
}
.raw-latte .lt-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 18px;
  background: #16121D; border: 1px solid rgba(240,216,168,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  max-height: 96vh;
}
.raw-latte .lt-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.raw-latte .lt-hd b {
  display: block; font: 800 17px "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: #F3E6CE;
}
.raw-latte .lt-hd small {
  display: block; font-size: 11.5px; color: rgba(243,230,206,.6); margin-top: 1px;
}
.raw-latte .lt-phase {
  flex: none; padding: 5px 12px; border-radius: 999px;
  background: rgba(240,216,168,.16); color: #F0D8A8;
  font: 700 12px "IBM Plex Sans Arabic", system-ui, sans-serif;
}
.raw-latte canvas {
  display: block; width: min(68vh, 320px); height: min(68vh, 320px);
  margin: 0 auto; border-radius: 50%;
  /* من غير ده السحب على الموبايل بيحرّك الصفحة مش الإبريق */
  touch-action: none; cursor: crosshair;
}
.raw-latte .lt-say {
  margin: 0; text-align: center; min-height: 18px;
  font: 600 12.5px "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: rgba(243,230,206,.72);
}
.raw-latte .lt-foot { display: flex; gap: 8px; }
.raw-latte .lt-foot button {
  flex: 1; height: 46px; border-radius: 12px; cursor: pointer;
  font: 800 15px "IBM Plex Sans Arabic", system-ui, sans-serif;
}
.raw-latte .lt-skip {
  border: 1px solid rgba(243,230,206,.25); background: transparent;
  color: rgba(243,230,206,.72); flex: 0 0 96px;
}
.raw-latte .lt-done { border: 0; background: #F0D8A8; color: #2A1F12; }
.raw-latte .lt-done:disabled { background: rgba(240,216,168,.22); color: rgba(243,230,206,.4); cursor: not-allowed; }

/* الشاشة المنبطحة: الكوباية والأزرار جنب بعض */
@media (max-height: 460px) and (min-width: 640px) {
  .raw-latte .lt-card {
    display: grid; grid-template-columns: auto 190px;
    grid-template-areas: 'cup hd' 'cup say' 'cup foot';
    align-items: start; gap: 8px 14px;
  }
  .raw-latte .lt-hd { grid-area: hd; flex-direction: column; align-items: flex-start; gap: 4px; }
  .raw-latte canvas { grid-area: cup; width: min(80vh, 260px); height: min(80vh, 260px); }
  .raw-latte .lt-say { grid-area: say; text-align: right; }
  .raw-latte .lt-foot { grid-area: foot; }
}

/* ==========================================================================
   اللافتات المعلّقة على الحاجات

   الشكل من ريل ألعاب Parita اللي أحمد بعته: لافتة بيضا صغيرة
   بأيقونة ملوّنة على الجنب وفعل قصير، وتحتها سطر أصغر رمادي.
   بيضا على مشهد دافي = بتبان من غير ما تزحم.
   ========================================================================== */
.raw-pins {
  position: absolute; inset: 0; z-index: 14;
  pointer-events: none;                 /* اللافتة نفسها بتفتح اللمس لو ليها فعل */
  overflow: hidden;
}
.raw-pin {
  /* **`left` فيزيائي مش `inset-inline-start`.**

     الصفحة `dir="rtl"`، و`inset-inline-start` في RTL معناها
     **يمين**. والإحداثيات اللي الإسقاط بيطلّعها فيزيائية (بكسلات
     من حافّة الكانفس الشمال)، فالاتنين مع بعض كانوا بيحطّوا
     اللافتة على ‎1354px‎ بدل ‎508‎ — بره الطبقة وبتتقص بـ
     `overflow:hidden`. قِستها: `transform` بيقول ٥٠٨ و
     `getBoundingClientRect().left` بيقول ١٣٥٤. */
  position: absolute; top: 0; left: 0; right: auto;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 4px 14px rgba(20,14,8,.3), 0 1px 0 rgba(255,255,255,.9) inset;
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  color: #241B12; white-space: nowrap;
  /* الانتقال على الشفافية بس — الموضع بيتحدّث كل فريم فأي انتقال
     عليه بيعمل تأخير مطّاطي ورا الكاميرا. */
  transition: opacity .18s ease;
  will-change: transform;
}
.raw-pin .pin-ico {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: #6E2438; color: #F3E6CE;
  font-style: normal; font-size: 13px; line-height: 1;
}
.raw-pin .pin-txt { display: flex; flex-direction: column; gap: 1px; text-align: start; }
.raw-pin .pin-txt b { font-size: 13.5px; font-weight: 800; line-height: 1.15; }
.raw-pin .pin-txt small { font-size: 10.5px; color: #6B5C4C; line-height: 1.2; }

/* اللي دورك عليه دلوقتي */
.raw-pin.hot .pin-ico { background: #B08A4A; color: #2A1F12; }
/* محطة تانية — اللافتة بتهدى عشان متنافسش */
.raw-pin.muted { background: rgba(255,255,255,.78); }
.raw-pin.muted .pin-ico { background: #8C8176; color: #fff; }

.raw-pin.tappable { pointer-events: auto; cursor: pointer; }
.raw-pin.tappable:active { transform: translate(-50%,-50%) scale(.96); }

body.cinema .raw-pins { display: none; }

@media (pointer: coarse) {
  .raw-pin { padding: 8px 14px 8px 8px; }
  .raw-pin .pin-ico { width: 28px; height: 28px; }
  .raw-pin .pin-txt b { font-size: 14.5px; }
}

/* ==========================================================================
   وضع المحطة بلا واجهة

   المرجع (ألعاب Parita) مفيهوش HUD خالص: الحاجة قدّامك ولافتة
   صغيرة عليها وبس. اللي كان عندنا فوق المكن: اسم المحطة + صفّ
   الخطوات + لوحة كبيرة + زرار + تذكرة + شريط أفعال — ست طبقات.

   اللي بيفضل: المقياس (محتاجه عشان تعرف توقف فين) وزرار الخروج.
   الباقي اتنقل للافتة نفسها.
   ========================================================================== */
body.bare .raw-focus-name,
body.bare .pr-steps,
body.bare .pr-now,
body.bare .pr-go,
body.bare .raw-ticket,
body.bare .raw-acts,
body.bare .raw-make { display: none !important; }

/* اللوحة بقت المقياس وبس — بلا خلفية ولا إطار */
/* الموضع بيتحسب في `paintPins` عشان يلزق تحت اللافتة —
   اللي هنا الشكل بس. */
body.bare .raw-proc {
  background: none; border: 0; box-shadow: none; padding: 0;
  width: min(52%, 300px);
}
body.bare .pr-gauge { height: 30px; }

/* اللافتة وهي شغّالة — نفس لون الزرار اللي كان بيتمسك */
.raw-pin.live .pin-ico { background: #E2604A; color: #fff; }
.raw-pin.live { box-shadow: 0 0 0 2px rgba(226,96,74,.5), 0 6px 18px rgba(20,14,8,.35); }

/* ---------- إحساس الضغط ----------
   الضغط كان مش بيعمل أي حاجة غير إن الشريط يتحرّك. المقياس بيكبر
   شوية وإنت ماسك، واللافتة بتنبض — حاجات صغيرة بتخلّي الزرار
   حاسس إنه اتمسك فعلاً. */
.raw-proc { transition: transform .12s ease; }
.raw-proc.pressing { transform: scale(1.06); }
.raw-proc.pressing .pr-gauge {
  box-shadow: 0 0 0 2px rgba(240,216,168,.5), 0 6px 20px rgba(0,0,0,.45);
}
/* النطاق المطلوب بينبض وإنت ماسك — عشان عينك تمسكه */
.raw-proc.pressing .pr-zone { animation: rawZone 1s ease-in-out infinite; }
@keyframes rawZone {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5); }
}
/* **مفيش أنيميشن على اللافتة نفسها.**

   جرّبت أخلّيها تنبض، بس `transform` بتاعها بيتكتب بالجافاسكريبت
   **كل فريم** (الإسقاط من العالم للشاشة). أي `@keyframes` على
   `transform` بتتخانق معاه وبتودّي اللافتة مكان تاني.

   النبض على الأيقونة اللي جوّاها بدل كده — عنصر منفصل ملوش
   علاقة بالموضع. */
.raw-pin.live .pin-ico { animation: rawIco .85s ease-in-out infinite; }
@keyframes rawIco {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .raw-proc.pressing .pr-zone, .raw-pin.live .pin-ico { animation: none; }
}