/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */ /* MB MEDIA — الثعبان (Snake). كل القواعد معزولة تحت #mb-app؛ الاستثناءات الوحيدة: تعريف المتغيرات (بند 3) + @font-face (الخطوط المحلية). */ /* 3. الهوية البصرية — ملزمة بلا تعديل */ :root { --navy: #0E1B2E; --cyan: #17B4D6; --white: #FFFFFF; --coral: #E8734A; } /* 4. الوضع الداكن (الافتراضي) / الفاتح — نفس آلية data-theme. ألوان لوحة اللعب نفسها (شبكة/ثعبان/طعام/عوائق) محدّدة هنا لضمان تباين واضح بالوضعين. */ :root { color-scheme: dark; --bg: var(--navy); --fg: var(--white); --bg-soft: #16233B; --bg-softer: #1C2C47; --border: rgba(255, 255, 255, 0.13); --border-strong: rgba(255, 255, 255, 0.30); --fg-muted: #A9B7CC; --fg-faint: #76859E; --cyan-ink: var(--cyan); --cyan-soft: rgba(23, 180, 214, 0.14); --cyan-soft-2: rgba(23, 180, 214, 0.24); --coral-hover: #F0815B; --coral-glow: rgba(232, 115, 74, 0.30); --overlay-bg: rgba(14, 27, 46, 0.82); --card-bg: var(--bg-soft); --shadow: 0 18px 40px rgba(0, 0, 0, 0.35); --board-bg: #131F33; --grid-line: rgba(255, 255, 255, 0.06); --snake: var(--cyan); --snake-head: #3ED0EE; --snake-ring: rgba(14, 27, 46, 0.90); --snake-eye: #FFFFFF; --food: var(--coral); /* طعام كورال واضح على خلفية داكنة */ --food-glow: rgba(232, 115, 74, 0.35); --obstacle: #4A5A70; --obstacle-edge: rgba(255, 255, 255, 0.30); } /* الوضع الفاتح — يعمل عبر data-theme="light" على */ [data-theme="light"] { color-scheme: light; --bg: #EFF4F9; --fg: var(--navy); --bg-soft: #FFFFFF; --bg-softer: #E6EEF5; --border: rgba(14, 27, 46, 0.14); --border-strong: rgba(14, 27, 46, 0.32); --fg-muted: #47576E; --fg-faint: #7B889E; --cyan-ink: #0B7E9C; --cyan-soft: rgba(11, 143, 174, 0.12); --cyan-soft-2: rgba(11, 143, 174, 0.22); --overlay-bg: rgba(232, 238, 245, 0.88); --card-bg: #FFFFFF; --shadow: 0 18px 40px rgba(14, 27, 46, 0.14); --board-bg: #DCE6F0; --grid-line: rgba(14, 27, 46, 0.06); --snake: #0B93B5; --snake-head: #07596E; --snake-ring: rgba(255, 255, 255, 0.95); --snake-eye: #F2F9FC; --food: var(--navy); --food-glow: rgba(14, 27, 46, 0.26); --obstacle: #B9C8D8; --obstacle-edge: rgba(14, 27, 46, 0.55); } html, body { background: var(--bg); } /* الخطوط المحلية (vendor/fonts) — الأسماء المستعارة تمنع تصادم الخطوط عند الدمج بالموقع. المستخدم فعلياً: خط عربي (400/700) للواجهة + JetBrains Mono (500) للأرقام. */ @font-face { font-family: "MB Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("./vendor/fonts/ibmplexarabic-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "MB Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("./vendor/fonts/ibmplexarabic-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } @font-face { font-family: "MB Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./vendor/fonts/jetbrainsmono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #mb-app { --font-sans: "MB Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; --font-mono: "MB Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* BASE — بلا لمس لـ html/body أو عناصر عامة */ #mb-app { box-sizing: border-box; min-height: 100dvh; margin-inline: auto; padding: 20px 16px 44px; max-width: 520px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-block: 16px; color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; text-align: start; transition: background-color 0.25s ease, color 0.25s ease; } #mb-app *, #mb-app *::before, #mb-app *::after { box-sizing: inherit; } #mb-app [hidden] { display: none !important; } #mb-app button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; } #mb-app svg { display: block; flex: none; } #mb-app :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* الرأس: اسم اللعبة + زر السمة */ #mb-app .mb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-block-end: 14px; } #mb-app .mb-brand { display: grid; gap: 2px; } #mb-app .mb-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--cyan-ink); text-transform: uppercase; } #mb-app .mb-title { margin: 0; font-family: var(--font-sans); font-size: clamp(2rem, 13vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--cyan-ink); } #mb-app .mb-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--fg-muted); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } #mb-app .mb-icon-btn:hover, #mb-app .mb-icon-btn:focus-visible { color: var(--cyan-ink); border-color: var(--border-strong); background: var(--cyan-soft); } #mb-app .mb-icon-btn:active { background: var(--cyan-soft-2); } #mb-app .mb-icon-btn svg { width: 22px; height: 22px; } #mb-app .mb-head__actions { display: flex; align-items: center; gap: 8px; } /* شريط النقاط */ #mb-app .mb-scorebar { display: flex; gap: 10px; margin-block-end: 12px; } #mb-app .mb-score { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } #mb-app .mb-score__label { margin: 0; font-size: 0.74rem; font-weight: 700; color: var(--fg-muted); } #mb-app .mb-score__value { margin: 4px 0 0; font-family: var(--font-mono); font-size: clamp(1.3rem, 7vw, 1.7rem); font-weight: 500; line-height: 1.1; direction: ltr; text-align: start; font-variant-numeric: tabular-nums; } #mb-app .mb-score--best .mb-score__value { color: var(--cyan-ink); } #mb-app .mb-score-pop { animation: mb-score-pop 0.2s ease; } /* اللوحة — canvas. direction:ltr كي يبقى اليمين/اليسار فيزيائياً ثابتاً مهما كان اتجاه الصفحة RTL (شرح مطوّل في README). */ #mb-app .mb-board { position: relative; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--board-bg); box-shadow: var(--shadow); direction: ltr; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; } #mb-app .mb-board canvas { display: block; width: 100%; height: 100%; } /* النوافذ (بدء / نهاية) — UI يتبع اتجاه الصفحة rtl، فوق لوحة ltr */ #mb-app .mb-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: var(--radius-lg); background: var(--overlay-bg); direction: rtl; } #mb-app .mb-overlay__card { width: 100%; max-width: 300px; padding: 22px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow); text-align: center; } #mb-app .mb-overlay__title { margin: 0 0 8px; font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; color: var(--cyan-ink); } #mb-app .mb-overlay__text { margin: 0 0 10px; font-size: 0.92rem; color: var(--fg-muted); } #mb-app .mb-overlay__newbest { margin: 0 0 14px; font-size: 0.84rem; font-weight: 700; color: var(--coral); } #mb-app .mb-overlay__actions { display: grid; gap: 10px; } /* الأزرار — --coral حصراً لزر فعل واحد (ابدأ / لعبة جديدة) */ #mb-app .mb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font-size: 1rem; font-weight: 700; transition: transform 0.12s ease, box-shadow 0.2s ease, background-color 0.2s ease; } #mb-app .mb-btn:active { transform: translateY(1px); } #mb-app .mb-btn svg { width: 20px; height: 20px; } #mb-app .mb-btn--new { background: var(--coral); color: var(--white); box-shadow: 0 10px 26px var(--coral-glow); } #mb-app .mb-btn--new:hover { background: var(--coral-hover); } /* أسهم الاتجاه على الشاشة (D-pad) — direction:ltr كي تبقى المواضع فيزيائية */ #mb-app .mb-dpad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: ". up ." "left center right" ". down ."; gap: 8px; max-width: 232px; margin-inline: auto; margin-block-start: 14px; direction: ltr; } #mb-app .mb-dpad__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--bg-soft); color: var(--fg-muted); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } #mb-app .mb-dpad__btn:hover { color: var(--cyan-ink); border-color: var(--cyan-ink); } #mb-app .mb-dpad__btn:active { background: var(--cyan-soft-2); color: var(--cyan-ink); } #mb-app .mb-dpad__btn svg { width: 26px; height: 26px; } #mb-app .mb-dpad__btn--up { grid-area: up; } #mb-app .mb-dpad__btn--left { grid-area: left; } #mb-app .mb-dpad__btn--right { grid-area: right; } #mb-app .mb-dpad__btn--down { grid-area: down; } #mb-app .mb-dpad__center { grid-area: center; } #mb-app .mb-dpad__arrow { transition: transform 0.12s ease; } #mb-app .mb-dpad__btn--down .mb-dpad__arrow { transform: rotate(180deg); } #mb-app .mb-dpad__btn--right .mb-dpad__arrow { transform: rotate(90deg); } #mb-app .mb-dpad__btn--left .mb-dpad__arrow { transform: rotate(-90deg); } #mb-app .mb-hint { margin: 14px 0 0; text-align: center; font-size: 0.78rem; color: var(--fg-faint); } /* الميزات الإضافية */ #mb-app .mb-extras { margin-block-start: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); } #mb-app .mb-extras > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; user-select: none; } #mb-app .mb-extras > summary::-webkit-details-marker { display: none; } #mb-app .mb-extras__summary { font-weight: 700; font-size: 0.9rem; } #mb-app .mb-extras__group { display: flex; align-items: center; gap: 8px; } #mb-app .mb-extras__chevron { width: 18px; height: 18px; color: var(--fg-muted); transition: transform 0.2s ease; } #mb-app .mb-extras[open] .mb-extras__chevron { transform: rotate(180deg); } #mb-app .mb-extras__body { display: grid; gap: 18px; padding: 14px 16px 16px; border-block-start: 1px solid var(--border); } #mb-app .mb-extras__block { display: grid; gap: 10px; } #mb-app .mb-extras__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--fg-muted); } #mb-app .mb-extras__label svg { width: 17px; height: 17px; color: var(--cyan-ink); } #mb-app .mb-premium-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--cyan-soft); border: 1px solid var(--cyan-soft-2); color: var(--cyan-ink); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.4; white-space: nowrap; } #mb-app .mb-premium-badge svg { width: 12px; height: 12px; } #mb-app .mb-chip-row { display: flex; flex-wrap: wrap; gap: 8px; } #mb-app .mb-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: transparent; color: var(--fg-muted); font-size: 0.9rem; font-weight: 600; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } #mb-app .mb-chip:hover { color: var(--cyan-ink); border-color: var(--cyan-ink); } #mb-app .mb-chip[aria-pressed="true"] { background: var(--cyan-soft); border-color: var(--cyan-ink); color: var(--cyan-ink); } #mb-app .mb-history__empty { margin: 0; font-size: 0.84rem; color: var(--fg-faint); } #mb-app .mb-history__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #mb-app .mb-history__list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); } #mb-app .mb-history__rank { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); min-inline-size: 22px; text-align: center; } #mb-app .mb-history__score { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; direction: ltr; } #mb-app .mb-history__list time { margin-inline-start: auto; font-size: 0.72rem; color: var(--fg-faint); } #mb-app .mb-link { background: none; border: none; padding: 0; color: var(--cyan-ink); font-size: 0.8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } #mb-app .mb-link:hover { color: var(--fg); } #mb-app .mb-footnote { margin: 18px 0 0; text-align: center; font-size: 0.72rem; color: var(--fg-faint); } #mb-app .mb-live { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* حركة مخففة: نُخفّف الزخرف (انتقالات/أنيميشن CSS) فقط؛ تقدم الثعبان نفسه منطق لعب جوهري يُرسم بالـ canvas فيبقى يعمل (بلا تعطيل للعبة). */ @media (prefers-reduced-motion: reduce) { #mb-app *, #mb-app *::before, #mb-app *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @keyframes mb-score-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }