@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');
@font-face { font-family: 'Massira'; src: url('/play/fonts/massira.woff') format('woff'); font-weight: 400; font-display: swap; }

/* ========================================================================
   عالم "الدفتر" الموحّد (2026-07-15) — نفس توكِنات كتالوج الألعاب
   (index.html) بالضبط، حتى تبدو صفحات اللعب امتداداً لنفس الدفتر لا واجهة
   اختبار منفصلة. الوضع الداكن تلقائي عبر prefers-color-scheme (لا مفتاح
   يدوي) اتساقاً مع قرار الكتالوج المعتمد أصلاً.
   ======================================================================== */
:root {
  --ink: #1E1B1B; --line: #EEE7DD; --muted: #8A7E82; --page-bg: #FFFDF9;
  --card-bg: #fff; --paper: #FFFFFF; --paper-edge: #F2E4EA; --art-bg: #F5EFF1;
  --pink: #D9487D; --orange: #FF7A33; --blue: #3E6DBF; --green: #3F8F5C; --gold: #C9A227;
  --win-bg: #FFF3E9; --sel-pink: #FBDDE9; --sel-green: #D8F0DF; --sel-red: #FBE2E2;
  /* توافقاً مع الأسماء القديمة (--orange/--pink/--bg-deep...) التي ما زالت تُستخدَم
     في بعض ملفات .html كأسماء متغيّرات مباشرة قبل إعادة التسمية الكاملة */
  --gradient: linear-gradient(135deg, var(--orange), var(--pink));
  --bg-deep: var(--page-bg);
  --panel: var(--card-bg);
  --panel-border: var(--line);
  --text-dim: var(--muted);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2ECE9; --line: #3A312B; --muted: #A99C93; --page-bg: #14100E;
    --card-bg: #241E1A; --paper: #322B27; --paper-edge: #3E362F; --art-bg: #3A322D;
    --win-bg: #2E2318; --sel-pink: #3A2530; --sel-green: #1E3324; --sel-red: #3A2020;
  }
}
/* الوضع الداكن كان تلقائياً حصراً عبر prefers-color-scheme (تفضيل نظام التشغيل)، بلا أي
   مفتاح يدوي — فطالبة اختارت المظهر الفاتح داخل ووردبريس تفاجأ بلوحة الرسم سوداء بمجرد
   فتح لعبة جماعية، لأن خادم الألعاب أصل منفصل تماماً لا يرى اختيارها المخزَّن هناك، ويعتمد
   فقط على إعداد نظام تشغيلها. الرابط الذي تفتحه ووردبريس الآن يُلحِق ?theme=dark|light،
   و[data-theme] هنا يتجاوز media query تفضيل النظام في الاتجاهين — يطابق نفس نمط
   body[data-theme] المستخدَم أصلاً في ووردبريس نفسه.
*/
:root[data-theme="dark"] {
  --ink: #F2ECE9; --line: #3A312B; --muted: #A99C93; --page-bg: #14100E;
  --card-bg: #241E1A; --paper: #322B27; --paper-edge: #3E362F; --art-bg: #3A322D;
  --win-bg: #2E2318; --sel-pink: #3A2530; --sel-green: #1E3324; --sel-red: #3A2020;
}
:root[data-theme="light"] {
  --ink: #1E1B1B; --line: #EEE7DD; --muted: #8A7E82; --page-bg: #FFFDF9;
  --card-bg: #fff; --paper: #FFFFFF; --paper-edge: #F2E4EA; --art-bg: #F5EFF1;
  --win-bg: #FFF3E9; --sel-pink: #FBDDE9; --sel-green: #D8F0DF; --sel-red: #FBE2E2;
}

* { box-sizing: border-box; }

body {
  font-family: 'Cairo', Tahoma, sans-serif;
  color: var(--ink);
  margin: 0;
  padding: 1.5rem;
  min-height: 100vh;
  background: var(--page-bg);
  direction: rtl;
}

.wrap { max-width: 720px; margin: 0 auto; }

/* ===== شريط الهوية العلوي (يحل محل site-header القديم) ===== */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 720px; margin: 0 auto 1.25rem; padding: 12px 4px;
  border-bottom: 2px solid var(--line);
}
.site-header .brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.05rem; font-family: 'Massira','Cairo',sans-serif; }
.site-header .brand .logo-emoji { font-size: 1.4rem; }
.site-header .back-link {
  font-size: 0.8rem; font-weight: 700; color: var(--ink); text-decoration: none;
  border: 1.5px solid var(--ink); border-radius: 10px; padding: 8px 14px; background: var(--card-bg);
  transition: transform 0.15s;
}
.site-header .back-link:hover { transform: translateY(-2px); }

h1 { color: var(--ink); font-size: 1.5rem; margin: 0 0 0.35rem; font-family: 'Massira','Cairo',sans-serif; }
h1 .title-icon { -webkit-text-fill-color: initial; }
h2 { color: var(--ink); font-size: 1.25rem; font-family: 'Massira','Cairo',sans-serif; }

.panel {
  background: var(--card-bg);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 1.4rem;
  margin-bottom: 1.1rem;
  box-shadow: 6px 6px 0 var(--paper-edge), 10px 10px 0 var(--ink);
  animation: flipIn 0.3s ease both;
}

@keyframes flipIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

input, button {
  font-family: inherit; font-size: 0.95rem; border-radius: 10px;
  border: 1.5px solid var(--ink); padding: 0.6rem 0.9rem;
}
input {
  background: var(--card-bg); color: var(--ink); width: 100%;
  box-sizing: border-box; margin-bottom: 0.6rem; transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(217,72,125,0.18);
}
button {
  background: var(--pink); color: #fff; font-weight: 800; cursor: pointer;
  border: 2px solid var(--ink); margin: 0.15rem; padding: 0.6rem 1.1rem;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform .1s;
}
button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
button.btn-secondary { background: var(--card-bg); color: var(--ink); }
button.btn-orange { background: var(--orange); }
button.btn-blue { background: var(--blue); }

#status { color: var(--muted); font-size: 0.92rem; }

canvas {
  background: #fff; border-radius: 8px; touch-action: none; cursor: crosshair;
  width: 100%; max-width: 500px; display: block;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 6px var(--card-bg);
  margin-bottom: 0.5rem;
}

.reveal-grid { display: flex; gap: 1rem; flex-wrap: wrap; }
.reveal-card {
  flex: 1; min-width: 160px; text-align: center; background: var(--card-bg);
  border: 1.5px solid var(--ink); border-radius: 12px; padding: 0.7rem;
  transition: transform 0.15s;
}
.reveal-card:hover { transform: translateY(-3px); }
.reveal-card img { width: 100%; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; }
.reveal-card p { margin: 0.5rem 0 0.3rem; font-size: 0.9rem; }

.timer {
  font-weight: 800; color: var(--ink); display: inline-block;
  background: var(--art-bg); border-radius: 999px; padding: 0.15rem 0.8rem;
  font-family: 'Cairo', sans-serif;
}
.timer.urgent { color: var(--pink); background: var(--sel-pink); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.hidden { display: none !important; }

/* سجل تصحيح تقني (event log) — مفيد للتطوير فقط، مخفي افتراضياً عن اللاعب/المتابع
   العادي (كان ظاهراً دائماً في وضع المتابعة القديم، لا مقابل له في تصميم الدفتر). */
.log {
  max-height: 160px; overflow-y: auto; font-size: 0.85rem; color: var(--muted);
  background: var(--art-bg); border-radius: 10px; padding: 0.5rem 0.7rem; margin-top: 0.5rem;
  display: none;
}
.log.dev-visible { display: block; }
.log div { padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
.log div:last-child { border-bottom: none; }

.note { font-size: 0.85rem; color: var(--muted); }

.vote-btn { display: block; width: 100%; margin-top: 0.4rem; }

/* ===== شارات (تعليمية / عدد اللاعبين) ===== */
.game-badge {
  display: inline-flex; align-items: center; gap: 4px; font-family: 'Cairo',sans-serif;
  font-weight: 800; font-size: 11px; color: #fff; border: 2px solid var(--ink);
  border-radius: 999px; padding: 4px 11px;
}
.game-badge.badge-blue { background: var(--blue); }
.game-badge.badge-green { background: var(--green); }

/* ===== تقدّم الجولة ===== */
.progress-bar-track { background: var(--art-bg); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-bar-fill { background: var(--green); height: 100%; border-radius: 999px; transition: width .25s ease; }

/* ===== توست سفلي ===== */
#gameToast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--page-bg); font-family: 'Cairo',sans-serif; font-weight: 700;
  font-size: 14px; padding: 10px 20px 10px 14px; border-radius: 999px; display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 500;
}
#gameToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#gameToast::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }

@media (max-width: 480px) {
  body { padding: 0.9rem; }
  .panel { padding: 1rem; border-radius: 12px; }
  h1 { font-size: 1.25rem; }
  .reveal-card { min-width: 130px; }
}

/* ===== طبقة تحذير الخمول (٦٠ث/١٠ث/٣٠ث) — نفس لغة .panel البصرية (حدّ ٢px داكن +
   ظل مُزاح) فوق طبقة تعتيم كامل الشاشة، حتى تبدو امتداداً لنفس الدفتر لا نافذة منبثقة
   غريبة عن التصميم. ===== */
.idle-warning-overlay {
  position: fixed; inset: 0; background: rgba(20, 16, 14, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 900; padding: 1rem; transition: opacity .2s;
}
.idle-warning-overlay.hidden { display: none; }
.idle-warning-modal {
  background: var(--card-bg); border: 2px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 var(--paper-edge), 10px 10px 0 var(--ink);
  padding: 1.6rem 1.4rem; max-width: 320px; width: 100%; text-align: center;
  animation: flipIn 0.25s ease both;
}
.idle-warning-icon { font-size: 2.2rem; margin-bottom: 0.3rem; }
.idle-warning-title {
  font-family: 'Massira','Cairo',sans-serif; font-size: 1.15rem; font-weight: 800;
  color: var(--ink); margin: 0 0 0.4rem;
}
.idle-warning-sub {
  font-size: 0.9rem; color: var(--muted); min-height: 1.2em; margin: 0 0 0.9rem;
}
.idle-warning-urgent .idle-warning-sub { color: var(--pink); font-weight: 700; animation: pulse 1s infinite; }
.idle-warning-btn {
  background: var(--pink); color: #fff; font-weight: 800; width: 100%;
}

.player-name-link {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}
.player-name-link:hover { color: var(--orange); }

/* ===== شخصية اللعبة (ماسكوت) ===== */
.mascot-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 0.75rem;
  transform: rotate(-5deg);
  transition: transform 0.2s ease;
}
.mascot-badge[data-mascot-state="success"] { animation: mascotBounce 0.5s ease; }
@keyframes mascotBounce {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(-5deg) scale(1.15); }
}

/* ===== خانات اللاعبين (الردهة) ===== */
.player-slot {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px;
  border: 2px solid var(--ink); background: var(--card-bg); font-size: 12.5px; font-weight: 700;
}
.player-slot.empty { border-style: dashed; background: transparent; color: var(--muted); font-weight: 600; }
.player-slot .avatar-dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: var(--art-bg); flex: none; }