/* ==========================================================================
   RAW — باني المشروب · ستايل

   بياخد متغيّرات اللون من الصفحة اللي شايلته (المنيو أو اللعبة)،
   وبيحط بدائل لو مش موجودة — فالملف ده بيشتغل في الاتنين من غير
   نسخة تانية.
   ========================================================================== */
/* نفس قاعدة باقي الأوراق: خاصية `hidden` بتحط `display:none` من
   ستايل المتصفح، وأي `display` في ورقة ستايل بيكسبها. الورقة دي
   بتتحمّل جوه صفحات فيها لوحات بتتقفل بـ`hidden`، فبتسيبها
   محمية مهما كان ترتيب التحميل. */
[hidden] { display: none !important; }

.raw-bld {
  --b-cream: var(--cream, #F7F2E8);
  --b-cream2: var(--cream-2, #EFE6D6);
  --b-ink: var(--ink, #2A2119);
  --b-soft: var(--ink-soft, #6B5C4C);
  --b-line: var(--line, #DCCFB9);
  --b-brass: var(--brass, #B08A4A);
  --b-wine: var(--burgundy, #6E2438);
  --b-good: var(--good, #2E6B3C);
  --b-bad: #A4352B;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: inherit;
  color: var(--b-ink);
}

/* ---------- الحجم ---------- */
.raw-bld .bld-sizes { display: flex; gap: 8px; }
.raw-bld .sz {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px; border: 1.5px solid var(--b-line);
  background: var(--b-cream); color: var(--b-soft);
  border-radius: 12px; cursor: pointer; font: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.raw-bld .sz b { font-size: 15px; font-weight: 700; }
.raw-bld .sz small { font-size: 11px; opacity: .75; }
.raw-bld .sz.on {
  border-color: var(--b-wine); background: #fff;
  color: var(--b-ink); box-shadow: 0 2px 10px rgba(110,36,56,.12);
}

/* ---------- الكوباية + الحكم ---------- */
.raw-bld .bld-stage {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  align-items: stretch;
  padding: 14px; background: #fff;
  border: 1px solid var(--b-line); border-radius: 16px;
}

.raw-bld .bld-cup {
  position: relative; align-self: center;
  width: 92px; height: 132px;
  /* شكل الكوباية: أضيق من تحت */
  clip-path: polygon(8% 0, 92% 0, 80% 100%, 20% 100%);
  background: linear-gradient(180deg, #F2EEE6, #E3DCCE);
  border-radius: 4px 4px 10px 10px;
  overflow: hidden;
}
.raw-bld .bld-cup .liq {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: block; transition: height .25s ease, background .25s ease;
}
/* الطفح: الزيادة بتبان فوق حد الكوباية بلون تحذير */
.raw-bld .bld-cup .liq.over { box-shadow: inset 0 3px 0 var(--b-bad); }
.raw-bld .bld-cup .lip {
  position: absolute; left: 0; right: 0; top: 0; height: 7px;
  display: block; background: rgba(0,0,0,.12);
}
/* علامة الحد الآمن — ٩٠٪ من الكوباية */
.raw-bld .bld-cup .mark {
  position: absolute; left: 0; right: 0; bottom: 90%;
  display: block; height: 0;
  border-top: 1.5px dashed rgba(164,53,43,.55);
}
.raw-bld .bld-cup .bits { position: absolute; inset: 0; display: block; }
.raw-bld .bld-cup .bits s {
  position: absolute; width: 9px; height: 9px;
  border-radius: 50%; display: block;
}

.raw-bld .bld-read { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.raw-bld .rd-head {
  margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3;
  color: var(--b-soft);
}
.raw-bld .rd-head.ok { color: var(--b-good); }

.raw-bld .bld-gauge { position: relative; height: 22px; }
.raw-bld .bld-gauge .g-bar {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--b-brass); border-radius: 11px;
  transition: width .25s ease, background .2s;
}
.raw-bld .bld-gauge .g-bar.low  { background: #C8B88E; }
.raw-bld .bld-gauge .g-bar.over { background: var(--b-bad); }
.raw-bld .bld-gauge::before {
  content: ''; position: absolute; inset: 0;
  background: var(--b-cream2); border-radius: 11px;
}
.raw-bld .bld-gauge .g-bar { z-index: 1; }
.raw-bld .bld-gauge .g-txt {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--b-ink);
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}

.raw-bld .bld-facts { display: flex; gap: 14px; flex-wrap: wrap; }
.raw-bld .fact { display: flex; flex-direction: column; gap: 1px; }
.raw-bld .fact small { font-size: 10px; color: var(--b-soft); }
.raw-bld .fact b { font-size: 13px; }
.raw-bld .pip { font-style: normal; letter-spacing: 1px; color: var(--b-brass); }

.raw-bld .bld-probs {
  margin: 0; padding: 0 16px 0 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.raw-bld .bld-probs li {
  font-size: 12px; color: var(--b-bad); line-height: 1.5;
  padding-right: 14px; position: relative;
}
.raw-bld .bld-probs li::before {
  content: '•'; position: absolute; right: 0; top: -1px;
}

/* ---------- صفوف المكوّنات ---------- */
.raw-bld .bld-rows { display: flex; flex-direction: column; gap: 8px; }
.raw-bld .bld-none {
  margin: 0; padding: 18px 14px; text-align: center;
  font-size: 13px; color: var(--b-soft);
  background: var(--b-cream2); border-radius: 12px;
  border: 1px dashed var(--b-line);
}
.raw-bld .bld-row {
  display: grid;
  grid-template-columns: 10px 1fr auto 28px;
  grid-template-areas: 'dot nm stp rm' '. sld sld sld';
  gap: 6px 10px; align-items: center;
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--b-line); border-radius: 12px;
}
.raw-bld .bld-row .dot {
  grid-area: dot; width: 10px; height: 10px;
  border-radius: 50%; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.raw-bld .bld-row .nm {
  grid-area: nm; display: flex; flex-direction: column; min-width: 0;
}
.raw-bld .bld-row .nm b { font-size: 14px; font-weight: 700; }
.raw-bld .bld-row .nm small {
  font-size: 10.5px; color: var(--b-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.raw-bld .bld-row .stp {
  grid-area: stp; display: flex; align-items: center; gap: 2px;
}
.raw-bld .bld-row .stp button {
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--b-line); background: var(--b-cream);
  border-radius: 8px; cursor: pointer;
  font: 700 17px/1 var(--font, inherit); color: var(--b-ink);
}
.raw-bld .bld-row .stp button:active { background: var(--b-cream2); }
.raw-bld .bld-row .num {
  width: 52px; height: 30px; text-align: center;
  border: 1px solid var(--b-line); border-radius: 8px;
  /* ١٦ بكسل مش ١٣: تحتها سفاري iOS بيكبّر الصفحة عند الدوس وما
     بيرجّعش — وخانات الكميات دي أكتر حاجة بتتداس في الصفحة. */
  background: #fff; font: 700 16px var(--font, inherit); color: var(--b-ink);
  /* أسهم الرقم بتزحم الخانة الضيقة، والسهمين بتوعنا أوضح */
  -moz-appearance: textfield;
}
.raw-bld .bld-row .num::-webkit-outer-spin-button,
.raw-bld .bld-row .num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.raw-bld .bld-row .un { font-size: 10.5px; color: var(--b-soft); min-width: 26px; }
.raw-bld .bld-row .sld {
  grid-area: sld; width: 100%; margin: 0;
  accent-color: var(--b-wine);
}
.raw-bld .bld-row .rm {
  grid-area: rm; width: 28px; height: 28px;
  border: none; background: transparent; cursor: pointer;
  color: var(--b-soft); font-size: 14px; border-radius: 8px;
}
.raw-bld .bld-row .rm:hover { background: var(--b-cream2); color: var(--b-bad); }

/* ---------- الإضافة والمختار ---------- */
.raw-bld .bld-add {
  padding: 12px; border: 1.5px dashed var(--b-line);
  background: var(--b-cream); color: var(--b-ink);
  border-radius: 12px; cursor: pointer;
  font: 700 14px var(--font, inherit);
}
.raw-bld .bld-add.on { border-style: solid; border-color: var(--b-wine); background: #fff; }

.raw-bld .bld-pick {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; background: var(--b-cream2);
  border: 1px solid var(--b-line); border-radius: 12px;
}
.raw-bld .pk-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.raw-bld .pc {
  flex: none; padding: 7px 11px; border: 1px solid var(--b-line);
  background: var(--b-cream); border-radius: 999px; cursor: pointer;
  font: 600 12px var(--font, inherit); color: var(--b-soft); white-space: nowrap;
}
.raw-bld .pc.on { background: var(--b-wine); border-color: var(--b-wine); color: #fff; }
.raw-bld .pk-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px;
}
.raw-bld .pk {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 9px 10px; background: #fff; cursor: pointer;
  border: 1px solid var(--b-line); border-radius: 10px; text-align: right;
}
.raw-bld .pk i { width: 100%; height: 5px; border-radius: 3px; display: block; }
.raw-bld .pk b { font-size: 12.5px; font-weight: 700; }
.raw-bld .pk small { font-size: 10px; color: var(--b-soft); }
.raw-bld .pk.on { border-color: var(--b-brass); background: #FFFDF7; }
.raw-bld .pk.on small { color: var(--b-brass); font-weight: 700; }

.raw-bld .bld-tip {
  padding: 11px 13px; text-align: right;
  background: #FFFBF0; border: 1px solid var(--b-brass);
  border-radius: 12px; cursor: pointer;
  font: 600 12.5px/1.5 var(--font, inherit); color: var(--b-ink);
}

/* ---------- تحت ---------- */
.raw-bld .bld-foot {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: 'name price' 'send send' 'why why';
  gap: 10px; align-items: center;
  padding: 14px; background: #fff;
  border: 1px solid var(--b-line); border-radius: 16px;
  position: sticky; bottom: 0; z-index: 3;
  box-shadow: 0 -6px 18px rgba(42,33,25,.06);
}
.raw-bld .bld-name {
  grid-area: name; width: 100%; height: 42px; padding: 0 12px;
  border: 1px solid var(--b-line); border-radius: 10px;
  background: var(--b-cream); font: 600 16px var(--font, inherit); color: var(--b-ink);
}
.raw-bld .bld-price { grid-area: price; display: flex; align-items: baseline; gap: 3px; }
.raw-bld .bld-price b { font-size: 24px; font-weight: 800; color: var(--b-wine); }
.raw-bld .bld-price small { font-size: 11px; color: var(--b-soft); }
.raw-bld .bld-send {
  grid-area: send; height: 50px; border: none; border-radius: 12px;
  background: var(--b-wine); color: #fff; cursor: pointer;
  font: 800 16px var(--font, inherit);
  transition: background .15s, opacity .15s;
}
.raw-bld .bld-send:hover:not(:disabled) { background: var(--burgundy-2, #8A3350); }
.raw-bld .bld-send:disabled { background: #C9BFB1; cursor: not-allowed; }
.raw-bld .bld-why {
  grid-area: why; margin: 0; font-size: 11.5px;
  color: var(--b-bad); text-align: center;
}

@media (min-width: 700px) {
  .raw-bld .bld-stage { grid-template-columns: 120px 1fr; }
  .raw-bld .bld-cup { width: 120px; height: 168px; }
  .raw-bld .bld-row {
    grid-template-columns: 10px 1fr auto 150px 28px;
    grid-template-areas: 'dot nm stp sld rm';
  }
  .raw-bld .bld-foot { grid-template-areas: 'name price' 'send send'; }
}

@media (prefers-reduced-motion: reduce) {
  .raw-bld * { transition: none !important; }
}

/* ==========================================================================
   الموبايل — اتكشفوا بالقياس على ٣٧٥×٨١٢ مش بالنظر
   ========================================================================== */

/* الخطوط هنا متظبّطة عند تعريفها فوق: ١٦ بكسل في `.num`
   و`.bld-name`. العتبة دي شرط سفاري iOS مش تفضيل شكل —
   تحتها بيكبّر الصفحة عند الدوس وما بيرجّعش. */

/* **مساحة اللمس.** الزراير كانت ٢٨–٣٠ بكسل، وهي أهم تفاعل في
   الصفحة كلها. بنكبّرها على الأجهزة اللي بتتلمس بس — الماوس دقيق
   والشاشة الكبيرة مش محتاجة. */
@media (pointer: coarse) {
  .raw-bld .bld-row .stp button { width: 44px; height: 44px; font-size: 20px; }
  .raw-bld .bld-row .num { width: 62px; height: 44px; }
  .raw-bld .bld-row .rm { width: 40px; height: 40px; font-size: 16px; }
  .raw-bld .sz { padding: 13px 8px; }
  .raw-bld .pc { padding: 10px 14px; }
  .raw-bld .pk { padding: 12px 11px; }
  /* المنزلق: الإصبع محتاج خط أعرض من خط الماوس */
  .raw-bld .bld-row .sld { height: 28px; }
}

/* الشريط السفلي ملزوق، فآخر صف بيعدّي من تحته وإنت بتنزّل.
   المسافة دي بتخلّي الصفوف كلها تبان فوقه لما توصل لآخر الصفحة. */
.raw-bld .bld-tip,
.raw-bld .bld-add { margin-bottom: 2px; }
.raw-bld .bld-foot { margin-top: 6px; }

/* شاشة الموبايل قصيرة: الشريط السفلي بياخد منها، فبنخلّيه أنحف. */
@media (max-height: 760px) {
  .raw-bld .bld-foot { padding: 10px 12px; gap: 8px; }
  .raw-bld .bld-send { height: 46px; font-size: 15px; }
  .raw-bld .bld-name { height: 40px; }
  .raw-bld .bld-price b { font-size: 21px; }
}

/* ==========================================================================
   الشاشة المنبطحة (الموبايل بالعرض)

   القياس على ٨١٢×٣٧٥: الكارت ٣٤٥ بكسل والمحتوى ٦٩٩ — يعني ضعف
   الشاشة، واللاعب لازم يلفّ كتير عشان يشوف صف مكوّن واحد. وده
   الوضع اللي اللعبة بتتلعب فيه أصلاً (بالعرض).

   الحل عمودين: الكوباية والحكم على جنب، والصفوف على الجنب التاني.
   ========================================================================== */
@media (max-height: 460px) and (min-width: 640px) {
  .raw-bld {
    display: grid; gap: 10px;
    grid-template-columns: minmax(210px, 1fr) minmax(260px, 1.2fr);
    grid-template-areas: 'stage rows' 'top rows' 'add rows' 'tip rows' 'foot foot';
    align-items: start;
  }
  .raw-bld .bld-top   { grid-area: top; }
  .raw-bld .bld-stage { grid-area: stage; }
  .raw-bld .bld-rows  { grid-area: rows; }
  .raw-bld .bld-add   { grid-area: add; }
  .raw-bld .bld-tip   { grid-area: tip; }
  .raw-bld .bld-foot  { grid-area: foot; position: static; }
  /* المختار بياخد العرض كله تحت الصفوف */
  .raw-bld .bld-pick  { grid-area: rows; }

  .raw-bld .bld-stage { grid-template-columns: 64px 1fr; padding: 10px; }
  .raw-bld .bld-cup { width: 64px; height: 92px; }
  .raw-bld .rd-head { font-size: 14px; }
  .raw-bld .bld-row {
    grid-template-columns: 10px 1fr auto 28px;
    grid-template-areas: 'dot nm stp rm' '. sld sld sld';
    padding: 7px 10px;
  }
  .raw-bld .bld-row .nm small { display: none; }  /* الوصف بياخد سطر ملوش لازمة هنا */
  .raw-bld .sz { padding: 7px 6px; }
  .raw-bld .sz small { font-size: 10px; }
  .raw-bld .bld-foot { padding: 10px; }
  .raw-bld .bld-send { height: 44px; }
}