/* الأساس: متغيرات الألوان (تُستبدل من config.js)، المسرح 1920×1080 مع ملاءمة الشاشة، أدوات الخط والإطار. */
:root {
  --yellow: #FFC72C; --yellow-light: #FFE38A; --yellow-dark: #E39A00;
  --red: #E63B2E; --red-dark: #A8231A; --red-light: #FF7A66;
  --orange: #FF8A1F; --orange-dark: #D96A00;
  --brown: #6B3A1E; --brown-dark: #3D1F0C; --brown-light: #A66A3A;
  --cardboard: #D9A066; --cardboard-dark: #B57B42;
  --cream: #FFF3D6; --ink: #2B1407;
  --ok: #3DC96A; --warn: #FFB020; --bad: #E5483B;
  --f-body: 'Tajawal', 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --f-display: 'Noto Kufi Arabic', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --m-top: 36px; --m-right: 60px; --m-bottom: 70px; --m-left: 60px;
  --scale: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #2B1407; }
body { font-family: var(--f-body); color: var(--cream); direction: rtl; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; text-rendering: optimizeLegibility; }
button { font-family: inherit; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at center, #5a2f12 0%, #2B1407 75%); }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; margin: -540px 0 0 -960px;
  transform: scale(var(--scale)); transform-origin: 50% 50%; overflow: hidden; background: #E87D1E;
}
#stage > * { position: absolute; }

/* ───── نص بحدّ كرتوني (text-shadow يُرسم خلف النص فلا تتداخل حروف العربية المتصلة) ───── */
.ol  { text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 5px 0 var(--ink); }
.ol2 { text-shadow: 5px 0 0 var(--ink), -5px 0 0 var(--ink), 0 5px 0 var(--ink), 0 -5px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink), 0 8px 0 var(--ink); }
.ol3 { text-shadow: 7px 0 0 var(--ink), -7px 0 0 var(--ink), 0 7px 0 var(--ink), 0 -7px 0 var(--ink), 5px 5px 0 var(--ink), -5px 5px 0 var(--ink), 5px -5px 0 var(--ink), -5px -5px 0 var(--ink), 0 11px 0 var(--ink); }

/* ───── بطاقة خشبية داكنة ───── */
.card {
  background: linear-gradient(180deg, var(--brown) 0%, var(--brown-dark) 100%);
  border: 6px solid var(--ink); border-radius: 30px;
  box-shadow: 0 8px 0 rgba(43, 20, 7, .55), inset 0 0 0 3px rgba(255, 255, 255, .12);
}

.btn {
  font: 900 30px var(--f-body); color: var(--ink); background: var(--yellow); border: 5px solid var(--ink);
  border-radius: 24px; padding: 10px 30px; box-shadow: 0 7px 0 var(--ink); cursor: pointer;
}
.btn:hover { background: var(--yellow-light); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.btn.sm { font-size: 20px; padding: 6px 14px; border-width: 4px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }

.ic { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }
.hidden { display: none !important; }

/* ───── جودة الأداء: كلما قلّت الجودة قلّت الحركة الزخرفية ───── */
body[data-quality="low"] .spin-slow, body[data-quality="low"] .spin-slow-r, body[data-quality="low"] .lamp,
body[data-quality="low"] .steam, body[data-quality="low"] .exhaust { animation: none !important; }
body[data-quality="minimal"] .spin-slow, body[data-quality="minimal"] .spin-slow-r, body[data-quality="minimal"] .lamp,
body[data-quality="minimal"] .steam, body[data-quality="minimal"] .exhaust, body[data-quality="minimal"] .bubble,
body[data-quality="minimal"] .flame, body[data-quality="minimal"] .mixer, body[data-quality="minimal"] .roll-spin,
body[data-quality="minimal"] .oil-wave, body[data-quality="minimal"] .mgr-body, body[data-quality="minimal"] .mgr-head,
body[data-quality="minimal"] .glow-anim { animation: none !important; }
body[data-quality="low"] .card, body[data-quality="minimal"] .card { box-shadow: 0 6px 0 rgba(43, 20, 7, .55); }
body[data-quality="minimal"] .ol, body[data-quality="minimal"] .ol2, body[data-quality="minimal"] .ol3 { text-shadow: 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink); }

@media (prefers-reduced-motion: reduce) { .spin-slow, .spin-slow-r, .lamp, .steam { animation: none !important; } }