/* ═══════════════════════════════════════════════════════════
   بيتزا روما — الأنماط
   ═══════════════════════════════════════════════════════════ */
:root {
  --bg:        #FFF4E8;
  --bg-2:      #FFE7D2;
  --card:      #FFFFFF;
  --card-2:    #FFFBF5;
  --ink:       #431407;
  --ink-2:     #6B2A12;
  --muted:     #9A6A52;
  --line:      #F2D6BC;
  --line-2:    #E7BE9B;
  --red:       #DC2626;
  --red-d:     #991B1B;
  --red-l:     #FEE2E2;
  --gold:      #D97706;
  --gold-l:    #FBBF24;
  --gold-bg:   #FEF3C7;
  --green:     #16A34A;
  --green-l:   #DCFCE7;
  --blue:      #0284C7;
  --blue-l:    #E0F2FE;
  --shadow-sm: 0 2px 8px rgba(120, 45, 15, .10);
  --shadow:    0 8px 24px rgba(120, 45, 15, .14);
  --shadow-lg: 0 18px 48px rgba(120, 45, 15, .22);
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-full: 999px;
  --f-display: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
  --f-body: 'Cairo', system-ui, -apple-system, sans-serif;
  --t: .18s cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
svg { display: block; }
.ico { display: block; }

/* ── خلفية بنقش بيتزا ── */
.bg-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(251, 191, 36, .30), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(220, 38, 38, .20), transparent 40%),
    radial-gradient(circle at 50% 108%, rgba(217, 119, 6, .18), transparent 55%),
    var(--bg);
}
.bg-fx::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(rgba(217, 119, 6, .16) 1.4px, transparent 1.6px),
    radial-gradient(rgba(220, 38, 38, .10) 1.2px, transparent 1.4px);
  background-size: 44px 44px, 44px 44px;
  background-position: 0 0, 22px 22px;
}

/* ── الشاشات ── */
.scr { position: relative; z-index: 1; display: none; min-height: 100dvh; }
.scr.is-on { display: flex; flex-direction: column; }

/* ── أزرار ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.7rem; border-radius: var(--r-full);
  font-family: var(--f-display); font-weight: 700; font-size: 1.06rem;
  transition: transform var(--t), box-shadow var(--t), background var(--t), opacity var(--t);
}
.btn-ico { display: flex; }
.btn-ico svg { width: 20px; height: 20px; }
.btn-primary {
  background: linear-gradient(135deg, #EF4444, #DC2626 55%, #B91C1C);
  color: #fff; box-shadow: 0 8px 22px rgba(220, 38, 38, .38), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(220, 38, 38, .5); }
.btn-ghost { border: 2px solid var(--line-2); color: var(--ink-2); background: rgba(255,255,255,.7); }
.btn-ghost:hover:not(:disabled) { background: #fff; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-gold {
  background: linear-gradient(135deg, #FBBF24, #D97706);
  color: #3B1A02; box-shadow: 0 8px 22px rgba(217, 119, 6, .35), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-gold:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(217, 119, 6, .45); }
.btn:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.35); }
.btn-sm { padding: .5rem 1rem; font-size: .88rem; }

/* ── شاشة البداية ── */
#scr-start { justify-content: center; align-items: center; padding: 2rem 1.2rem 2.6rem; }
.start-wrap { width: min(1020px, 100%); text-align: center; animation: rise .5s ease both; }

.brand { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.logo-mark { width: 96px; height: 96px; flex: 0 0 auto; filter: drop-shadow(0 10px 22px rgba(153, 27, 27, .35)); }
.logo-mark svg { width: 100%; height: 100%; }
.brand-txt { text-align: right; }
.brand-txt h1 {
  font-family: var(--f-display); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800;
  line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(180deg, #EF4444, #B91C1C 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
.brand-txt p { color: var(--muted); font-weight: 600; font-size: clamp(.9rem, 2.4vw, 1.1rem); }

.tags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.6rem 0 .4rem; }
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.85); border: 1px solid var(--line);
  border-radius: var(--r-full); padding: .42rem 1rem; font-size: .88rem; font-weight: 600; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.tag svg { width: 17px; height: 17px; color: var(--gold); }

/* ── بطاقات الشخصيات في البداية ── */
.crew-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.8rem 0; }
.ci-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1rem 1.2rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.ci-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ci-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 74px;
  background: linear-gradient(180deg, var(--tint), transparent);
}
.ci-av {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin: 0 auto .6rem;
  border: 4px solid #fff; box-shadow: 0 6px 18px rgba(120,45,15,.22); position: relative;
}
.ci-av svg { width: 100%; height: 100%; }
.ci-name { font-family: var(--f-display); font-size: 1.3rem; font-weight: 800; color: var(--ink); position: relative; }
.ci-role { font-size: .78rem; font-weight: 700; color: var(--c); position: relative; }
.ci-bio { font-size: .85rem; color: var(--muted); margin: .5rem 0 .7rem; min-height: 3.6em; position: relative; }
.ci-skill {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700;
  background: var(--tint); color: var(--c); border-radius: var(--r-full); padding: .28rem .7rem; position: relative;
}
.ci-skill svg { width: 15px; height: 15px; }

.start-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }
.best { margin-top: 1.2rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
.best b { color: var(--gold); }

/* ── شريط المعلومات HUD ── */
.hud {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem clamp(.6rem, 2vw, 1.4rem);
  background: rgba(255, 244, 232, .88); backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--line);
}
.hud-brand { display: flex; align-items: center; gap: .5rem; }
.hud-brand b { font-family: var(--f-display); font-size: 1.15rem; color: var(--red-d); }
.logo-mini { width: 34px; height: 34px; }
.logo-mini svg { width: 100%; height: 100%; }
.hud-brand .lvl {
  font-size: .74rem; font-weight: 800; background: var(--red-l); color: var(--red-d);
  border-radius: var(--r-full); padding: .18rem .6rem;
}
.hud-stats { display: flex; align-items: center; gap: .5rem; flex: 1; flex-wrap: wrap; justify-content: center; }
.hud-actions { display: flex; gap: .4rem; }
.hud-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  box-shadow: var(--shadow-sm); transition: transform var(--t), background var(--t);
}
.hud-btn:hover { transform: translateY(-2px); background: var(--gold-bg); }
.hud-btn svg { width: 19px; height: 19px; }

/* ── مؤشّرات HUD ── */
.hstat {
  display: flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-full);
  padding: .3rem .8rem; box-shadow: var(--shadow-sm); font-weight: 800; font-size: .92rem;
  min-height: 38px;
}
.hstat svg { width: 17px; height: 17px; }
.hstat .v { font-variant-numeric: tabular-nums; }
.hstat-money { color: var(--gold); border-color: #FCD9A5; background: linear-gradient(180deg, #FFFBEE, #FEF3C7); }
.hstat-money .v { color: #92400E; }
.hstat-serve { color: var(--green); border-color: #BBF7D0; background: linear-gradient(180deg, #F5FFF9, var(--green-l)); }
.hstat-serve .v { color: #14532D; }
.hstat-rep { color: var(--red); border-color: #FECACA; background: linear-gradient(180deg, #FFF7F7, var(--red-l)); }
.hstat-day { flex: 1 1 150px; min-width: 132px; color: var(--blue); border-color: #BAE6FD; background: linear-gradient(180deg, #F6FCFF, var(--blue-l)); }
.hstat-combo { color: #B45309; border-color: #FDE68A; background: linear-gradient(180deg,#FFFBEB,#FEF3C7); }
.hbar { flex: 1; height: 8px; border-radius: var(--r-full); background: rgba(120,45,15,.16); overflow: hidden; min-width: 44px; }
.hbar > i { display: block; height: 100%; border-radius: var(--r-full); transition: width .2s linear; }
.hstat-rep .hbar > i { background: linear-gradient(90deg, #F87171, #DC2626); }
.hstat-day .hbar > i { background: linear-gradient(90deg, #38BDF8, #0284C7); }

/* ── لوح اللعب ── */
.board {
  flex: 1; display: grid; gap: clamp(.6rem, 1.4vw, 1rem);
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  padding: clamp(.6rem, 1.4vw, 1rem);
  max-width: 1500px; width: 100%; margin: 0 auto; align-items: start;
}
.panel {
  background: rgba(255, 255, 255, .74); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: .8rem;
  backdrop-filter: blur(8px);
}
.panel-head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: 0 .2rem .65rem; border-bottom: 2px dashed var(--line); margin-bottom: .8rem;
}
.ph-t { font-family: var(--f-display); font-size: 1.16rem; font-weight: 800; color: var(--red-d); display: inline-flex; align-items: center; gap: .4rem; }
.ph-t svg { width: 20px; height: 20px; color: var(--gold); }
.ph-sub { font-size: .74rem; font-weight: 700; color: var(--muted); }

/* ── صالة الزبائن ── */
.hall {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  max-height: min(58vh, 620px); overflow-y: auto; padding: .15rem;
  scrollbar-width: thin;
}
.hall-empty {
  display: none; text-align: center; color: var(--muted); font-weight: 700; font-size: .9rem;
  padding: 2.2rem 1rem; border: 2px dashed var(--line); border-radius: var(--r); background: rgba(255,255,255,.5);
}
.hall-empty.is-on { display: block; }

/* ── بطاقة الزبون ── */
.cust {
  position: relative; background: var(--card); border: 2px solid var(--line);
  border-radius: var(--r); padding: .55rem .6rem .6rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .5rem;
  animation: pop .3s cubic-bezier(.2, 1.4, .5, 1) both;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.cust:hover { box-shadow: var(--shadow); }
.cust.is-vip { border-color: #FCD34D; background: linear-gradient(180deg, #FFFDF3, #fff); }
.cust.is-ready { border-color: #86EFAC; box-shadow: 0 0 0 4px rgba(22, 163, 74, .14), var(--shadow); }
.cust.is-hurry { animation: nudge .6s ease-in-out infinite; border-color: #FCA5A5; }
.cust.is-gone { animation: leave .45s ease forwards; }

.cust-top { display: flex; align-items: center; gap: .5rem; }
.cust-av {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 2.5px solid var(--line); background: var(--card-2);
}
.cust-av svg { width: 100%; height: 100%; }
.cust-meta { min-width: 0; flex: 1; }
.cust-name { font-family: var(--f-display); font-weight: 800; font-size: 1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-trait { font-size: .68rem; font-weight: 800; color: var(--muted); }
.cust-trait.t-vip { color: #B45309; }
.cust-trait.t-hungry { color: var(--red); }

.pat { display: flex; align-items: center; gap: .35rem; margin-top: .1rem; }
.pat svg { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.pat-bar { flex: 1; height: 7px; border-radius: var(--r-full); background: rgba(120,45,15,.14); overflow: hidden; }
.pat-bar > i { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, #4ADE80, #16A34A); transition: width .2s linear, background .3s; }
.pat.low .pat-bar > i { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.pat.crit .pat-bar > i { background: linear-gradient(90deg, #F87171, #DC2626); }
.pat.crit svg { color: var(--red); animation: blink .7s steps(2) infinite; }

/* ── طلبات الزبون ── */
.order { display: flex; flex-direction: column; gap: .32rem; }
.oi {
  display: flex; align-items: center; gap: .45rem;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .26rem .4rem;
  background: var(--card-2); text-align: right; width: 100%;
  transition: transform var(--t), background var(--t), border-color var(--t), opacity var(--t);
}
.oi:not(.is-ready):not(.is-cook):hover { transform: translateX(-3px); border-color: var(--line-2); background: #fff; }
.oi-art { width: 30px; height: 30px; flex: 0 0 auto; }
.oi-art svg { width: 100%; height: 100%; }
.oi-body { flex: 1; min-width: 0; }
.oi-name { display: block; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-st { display: block; font-size: .66rem; font-weight: 800; color: var(--muted); }
.oi-price { font-size: .76rem; font-weight: 800; color: var(--gold); flex: 0 0 auto; }
.oi-badge { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; }
.oi-badge svg { width: 17px; height: 17px; }
.oi.is-wait { border-style: dashed; }
.oi.is-cook { background: var(--gold-bg); border-color: #FCD34D; }
.oi.is-cook .oi-st { color: #B45309; }
.oi.is-ready { background: var(--green-l); border-color: #86EFAC; }
.oi.is-ready .oi-st { color: #15803D; }
.oi.is-ready .oi-badge { color: var(--green); }
.oi.is-burnt { background: #F1F5F9; border-color: #CBD5E1; opacity: .62; }
.oi.is-burnt .oi-badge { color: #64748B; }

/* ── المحطات ── */
.stations { display: flex; flex-direction: column; gap: .6rem; }
.station {
  border: 2px solid var(--line); border-radius: var(--r); background: var(--card);
  padding: .5rem .55rem .6rem; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.station::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c); }
.st-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.st-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--c); flex: 0 0 auto; }
.st-ico svg { width: 17px; height: 17px; }
.st-name { font-family: var(--f-display); font-weight: 800; font-size: 1rem; color: var(--ink); }
.st-q {
  margin-inline-start: auto; font-size: .68rem; font-weight: 800; padding: .16rem .55rem;
  border-radius: var(--r-full); background: var(--tint); color: var(--c);
}
.st-q.is-zero { opacity: .42; }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: .45rem; }
.slot {
  position: relative; aspect-ratio: 1; border-radius: var(--r-sm);
  border: 2px dashed var(--line-2); background: var(--card-2);
  display: grid; place-items: center; padding: 0;
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
}
.slot-empty { color: var(--line-2); }
.slot-empty svg { width: 24px; height: 24px; }
.slot.is-live { border-style: solid; border-color: transparent; background: #fff; cursor: pointer; }
.slot.is-live:hover { transform: translateY(-2px); }
.slot.is-perfect { animation: ready-pulse .5s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(217,119,6,.28); }
.slot.is-good { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.slot.is-burning { box-shadow: 0 0 0 4px rgba(220,38,38,.35); }
.slot-ring {
  position: absolute; inset: 4px; border-radius: 50%;
  background: conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(120,45,15,.13) 0);
  transition: background .06s linear;
  --rc: var(--c);
}
.slot-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.slot-art { position: relative; width: 62%; height: 62%; display: grid; place-items: center; z-index: 1; }
.slot-art svg { width: 100%; height: 100%; }
.slot-name {
  position: absolute; bottom: -3px; inset-inline: 2px; z-index: 2;
  font-size: .56rem; font-weight: 800; text-align: center; color: var(--ink-2);
  background: rgba(255,255,255,.92); border-radius: var(--r-full); padding: 0 .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.slot.is-perfect .slot-ring { --rc: #F59E0B; }
.slot.is-burning .slot-ring { --rc: #DC2626; }
.slot.is-good .slot-ring { --rc: #16A34A; }

/* ── زر التسليم ── */
.serve {
  width: 100%; border-radius: var(--r-full); padding: .4rem; font-weight: 800; font-size: .84rem;
  font-family: var(--f-display); background: #EEF2F6; color: #9AA7B5; cursor: not-allowed;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
}
.serve.is-on {
  background: linear-gradient(135deg, #22C55E, #15803D); color: #fff; cursor: pointer;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .34); animation: ready-pulse .7s ease-in-out infinite;
}
.serve.is-on:hover { transform: translateY(-2px); }
.cust-tag { position: absolute; top: -9px; inset-inline-start: 10px; font-size: .6rem; font-weight: 800; padding: .1rem .5rem; border-radius: var(--r-full); background: var(--gold-l); color: #78350F; box-shadow: var(--shadow-sm); }

/* ── شريط الطاقم ── */
.crew {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr);
  gap: .55rem; padding: .5rem clamp(.6rem, 1.4vw, 1rem) 1rem;
  max-width: 1500px; width: 100%; margin: 0 auto;
}
.crew-card {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 2px solid var(--line); border-radius: var(--r);
  padding: .35rem .5rem; box-shadow: var(--shadow-sm);
  transition: transform var(--t), border-color var(--t);
}
.crew-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.crew-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2.5px solid var(--tint); }
.crew-av svg { width: 100%; height: 100%; }
.crew-info { min-width: 0; flex: 1; }
.crew-name { font-family: var(--f-display); font-weight: 800; font-size: .95rem; line-height: 1.1; }
.crew-role { font-size: .64rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-pips { display: flex; gap: 3px; margin-top: 2px; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: rgba(120,45,15,.16); }
.pip.on { background: var(--c); }
.crew-buy {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  border: 2px solid #FCD9A5; background: linear-gradient(180deg, #FFFBEE, #FEF3C7);
  border-radius: var(--r); color: #92400E; font-family: var(--f-display); font-weight: 800; font-size: .95rem;
  padding: .4rem .8rem; box-shadow: var(--shadow-sm); position: relative;
  transition: transform var(--t), box-shadow var(--t);
}
.crew-buy:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.crew-buy svg { width: 20px; height: 20px; }
.crew-buy .dot {
  position: absolute; top: -6px; inset-inline-end: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: .68rem; display: grid; place-items: center;
  font-weight: 800; box-shadow: 0 3px 10px rgba(220,38,38,.5); animation: ready-pulse .9s infinite;
}

/* ── النوافذ المنبثقة ── */
.modal-root { position: relative; z-index: 60; }
.overlay {
  position: fixed; inset: 0; background: rgba(67, 20, 7, .55); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 1rem; z-index: 60; animation: fade .2s ease both;
  overflow-y: auto;
}
.modal {
  background: var(--card); border-radius: var(--r-lg); border: 2px solid var(--line);
  box-shadow: var(--shadow-lg); width: min(760px, 100%); padding: 1.3rem 1.2rem 1.4rem;
  animation: pop .28s cubic-bezier(.2, 1.4, .5, 1) both; margin: auto;
}
.modal.wide { width: min(1000px, 100%); }
.m-title { font-family: var(--f-display); font-size: 1.7rem; font-weight: 800; color: var(--red-d); text-align: center; }
.m-sub { text-align: center; color: var(--muted); font-weight: 600; font-size: .92rem; margin-bottom: 1rem; }
.m-body { display: flex; flex-direction: column; gap: .9rem; }
.m-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.m-hero { width: 112px; margin: 0 auto -0.3rem; }
.m-hero svg { width: 100%; height: 100%; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.kpi {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: .7rem .8rem; text-align: center;
}
.kpi .k { font-size: .72rem; font-weight: 800; color: var(--muted); }
.kpi .v { font-family: var(--f-display); font-size: 1.6rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kpi.good .v { color: var(--green); }
.kpi.warn .v { color: var(--red); }
.kpi.gold .v { color: var(--gold); }

/* ── شرح اللعب ── */
.steps { display: flex; flex-direction: column; gap: .6rem; }
.step { display: flex; gap: .7rem; align-items: flex-start; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r); padding: .65rem .75rem; }
.step-n {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(135deg, #EF4444, #B91C1C); color: #fff; font-weight: 800; font-size: .88rem;
}
.step-b { font-size: .88rem; }
.step-b b { color: var(--red-d); }
.win-legend { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
.lg { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; border-radius: var(--r-full); padding: .2rem .6rem; border: 1px solid var(--line); }
.lg i { width: 12px; height: 12px; border-radius: 50%; display: block; }

/* ── متجر الترقيات ── */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: .7rem; }
.shop-card {
  display: flex; gap: .65rem; background: var(--card-2);
  border: 2px solid var(--line); border-radius: var(--r); padding: .7rem;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.shop-card.is-max { background: var(--green-l); border-color: #86EFAC; }
.shop-card.is-poor { opacity: .78; }
.shop-av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; border: 2.5px solid var(--tint); }
.shop-av svg { width: 100%; height: 100%; }
.shop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.shop-name { font-family: var(--f-display); font-weight: 800; font-size: 1rem; line-height: 1.15; color: var(--ink); }
.shop-desc { font-size: .76rem; color: var(--muted); font-weight: 600; }
.shop-eff { font-size: .72rem; font-weight: 800; color: var(--c); }
.shop-foot { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; }
.shop-cost {
  display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .86rem;
  color: #92400E; background: var(--gold-bg); border-radius: var(--r-full); padding: .16rem .6rem;
}
.shop-cost svg { width: 15px; height: 15px; }
.shop-max { font-weight: 800; color: #15803D; font-size: .84rem; display: inline-flex; align-items: center; gap: .3rem; }
.shop-max svg { width: 16px; height: 16px; }
.shop-buy { margin-inline-start: auto; }
.shop-buy .btn { padding: .34rem .9rem; font-size: .84rem; }

/* ── التنبيهات ── */
.toasts { position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; z-index: 90; display: flex; flex-direction: column; gap: .45rem; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: .9rem;
  padding: .55rem .95rem; border-radius: var(--r-full); box-shadow: var(--shadow);
  background: #fff; border: 2px solid var(--line); color: var(--ink);
  animation: slide-in .28s cubic-bezier(.2, 1.4, .5, 1) both;
}
.toast svg { width: 18px; height: 18px; flex: 0 0 auto; }
.toast.good { background: linear-gradient(180deg, #F0FDF4, #DCFCE7); border-color: #86EFAC; color: #14532D; }
.toast.bad  { background: linear-gradient(180deg, #FEF2F2, #FEE2E2); border-color: #FCA5A5; color: #7F1D1D; }
.toast.gold { background: linear-gradient(180deg, #FFFBEB, #FEF3C7); border-color: #FCD34D; color: #78350F; }
.toast.info { background: linear-gradient(180deg, #F0F9FF, #E0F2FE); border-color: #BAE6FD; color: #075985; }
.toast.is-out { animation: slide-out .3s ease forwards; }

/* ── حركات ── */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes leave { to { opacity: 0; transform: translateY(-14px) scale(.86); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes ready-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .42); } 50% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes slide-out { to { opacity: 0; transform: translateX(-26px); } }

/* ── استجابة الشاشات ── */
@media (max-width: 1020px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .hall { max-height: none; }
  .board .panel-kitchen { order: 2; }
  .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crew-buy { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hud { gap: .4rem; padding: .45rem .5rem; }
  .hud-brand b { font-size: 1rem; }
  .hud-stats { justify-content: flex-start; }
  .hstat { font-size: .82rem; padding: .22rem .6rem; min-height: 34px; border-radius: var(--r-sm); }
  .hstat-day { flex-basis: 100%; }
  .hall { grid-template-columns: minmax(0, 1fr); }
  .crew { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .crew-card { grid-column: span 1; }
  .crew-buy { grid-column: 1 / -1; }
  .brand-txt { text-align: center; }
  .brand { gap: .6rem; }
  .logo-mark { width: 72px; height: 72px; }
  .modal { padding: 1rem .85rem 1.1rem; }
  .m-title { font-size: 1.35rem; }
  .slots { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── صور الشخصيات (بديل الصور النقطية للرسم المتجهي) ── */
.ci-av img, .crew-av img, .shop-av img, .cust-av img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
}
.ci-av.is-photo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 -14px 22px rgba(120, 45, 15, .28), inset 0 0 0 2px rgba(255, 255, 255, .55);
  pointer-events: none;
}
.ci-av.is-photo:hover img { transform: scale(1.06); }
.ci-av img { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
@media (max-width: 720px) { .ci-av { width: 78px; height: 78px; } }

/* ── خانات طهي بحجم ثابت على الشاشات العريضة (تخطيط أكثر إحكاماً) ── */
@media (min-width: 1021px) {
  .slots { display: flex; flex-wrap: wrap; gap: .45rem; }
  .slot { flex: 0 0 auto; width: 88px; height: 88px; }
}
@media (min-width: 1021px) {
  .board { align-items: stretch; }
  .panel-hall .hall { min-height: 240px; }
}