/* ==========================================================================
   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; }
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; }
}