/* ===== CSS VARIABLES - جميع الألوان في مكان واحد ===== */
:root {
  /* Primary Colors */
  --primary-blue: #1e60f1;
  --primary-blue-light: #1e61f1b9;
  --secondary-blue: #3498db;
  --dark-blue: #2980b9;
  
  /* Green Colors */
  --green-primary: #27ae60;
  --green-secondary: #2ecc71;
  --green-success: #22c55e;
  --green-teal: #16a085;
  --green-light: #d5f4e6;
  --green-text: #1e7e34;
  --green-cyan: #1abc9c;
  --green-info: #e0f7fa;
  --green-border: #00bcd4;
  
  /* Red Colors */
  --red-primary: #e74c3c;
  --red-secondary: #c0392b;
  --red-dark: #a93226;
  --red-error: #ef4444;
  
  /* Background Colors */
  --bg-body: #f4f6fa;
  --bg-white: #fff;
  --bg-light: #f8f9fa;
  --bg-gray: #eee;
  --bg-dark: #2c3e50;
  
  /* Text Colors */
  --text-primary: #333;
  --text-secondary: #222;
  --text-muted: #64748b;
  --text-light: #bdc3c7;
  --text-white: #fff;
  --text-gray: #999;
  --text-yellow: rgb(235,235,9);
  
  /* Border & Shadow Colors */
  --border-light: #e2e8f0;
  --border-gray: #ddd;
  --border-red: rgb(197,27,27);
  --shadow-light: rgba(0,0,0,0.1);
  --shadow-medium: rgba(0,0,0,0.15);
  --shadow-dark: rgba(0,0,0,0.3);
  
  /* Warning/Alert Colors */
  --warning-orange: #f59e0b;
  --warning-yellow: #fbbf24;
  --purple-accent: #8b5cf6;
  
  /* Glassmorphism */
  --glass-bg: rgba(255,255,255,0.1);
  --glass-border: rgba(255,255,255,0.2);
  --glass-hover: rgba(255,255,255,0.25);
}

/* ===== BASE STYLES ===== */
body{font-family:'Cairo',sans-serif;background:var(--bg-body);margin:0;padding:0}

/* ===== CONTAINER ===== */
.container{max-width:900px;margin:20px auto;background:var(--bg-white);border-radius:12px;box-shadow:0 0 15px var(--shadow-light);padding:0;overflow:hidden}

/* ===== LAYOUT GROUPS ===== */
.left-group,.right-group{display:flex;align-items:center;gap:12px}
.center-group{flex:1;text-align:center;font-size:16px;font-weight:bold}

/* ===== LANGUAGE SWITCHER ===== */
.language-switcher{text-align:center;margin:10px 0;gap:6px;padding:4px}
.language-switcher button{background:var(--primary-blue);color:var(--text-white);border:none;padding:8px 12px;margin:0 4px;border-radius:20px;font-weight:bold;cursor:pointer;font-size:13px;position:relative;transition:all 0.3s ease;min-width:60px}
.language-switcher button.active{background:linear-gradient(135deg,var(--green-primary) 0%,var(--green-teal) 100%);color:var(--text-white);font-weight:600}
.language-switcher button.transitioning{transition:all 0.2s ease-out}

/* ===== QUESTION SECTION ===== */
.question-section{display:flex;flex-direction:column;padding:20px;gap:20px}
.options-container{flex:1}
.question-text{margin:15px 0;font-weight:bold;background:var(--green-light);color:var(--green-text);padding:15px 20px;border-radius:8px;border-left:4px solid var(--green-primary)}

/* ===== OPTIONS & FEEDBACK ===== */
.options label{display:block;background:var(--bg-gray);margin-bottom:10px;padding:10px;border-radius:6px;cursor:pointer;font-size:15px}
.image-container{flex:1}
.image-container img{width:100%;height:auto;border-radius:10px}
.feedback{text-align:right;margin:10px 20px;font-weight:bold;font-size:15px}
.feedback.correct{color:var(--green-primary)}
.feedback.wrong{color:var(--red-primary)}

/* ===== BUTTONS ===== */
.buttons{display:flex;justify-content:space-between;padding:20px;flex-wrap:wrap;gap:10px}
.buttons button{background:var(--primary-blue);color:var(--text-white);border:none;padding:10px 18px;font-size:14px;font-weight:bold;border-radius:8px;cursor:pointer;flex:1 1 auto}
.buttons button:disabled{background:#888}

/* ===== TOP BAR ===== */
.top-bar{background:linear-gradient(135deg,var(--primary-blue) 0%,var(--primary-blue-light) 100%);padding:20px 30px;display:flex;align-items:center;justify-content:space-between;position:relative;box-shadow:0 2px 10px var(--shadow-light)}

/* ===== TIMER SECTION ===== */
.timer-section{display:flex!important;align-items:center;gap:12px;background:var(--glass-bg);padding:12px 20px;border-radius:25px;backdrop-filter:blur(10px);border:1px solid var(--glass-border)}
.timer-icon{color:var(--red-primary);font-size:18px;animation:pulse 2s infinite}
.timer-display{color:var(--text-white);font-size:18px;font-weight:600;letter-spacing:1px}
#timer-display,.timer{display:flex!important;align-items:center!important;justify-content:center!important;padding:10px 15px!important;background:var(--bg-white)!important;border:2px solid var(--border-red)!important;border-radius:8px!important;box-shadow:0 2px 8px var(--shadow-light)!important;position:relative!important;z-index:1000!important}
#timer,.timer-display{font-size:20px!important;font-weight:bold!important;color:#f3efef!important;background:transparent!important;border:none!important;outline:none!important;min-width:70px!important;text-align:center!important;line-height:1.2!important;display:inline-block!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:1001!important}

/* ===== QUIZ INFO ===== */
.quiz-info{text-align:center;flex:1;margin:0 30px}
.quiz-title{color:var(--text-white);font-size:24px;font-weight:700;margin-bottom:8px}
.progress-info{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:15px}
.progress-text{color:var(--text-light);font-size:14px;font-weight:500}
.progress-bar-container{width:300px;height:8px;background:var(--glass-border);border-radius:4px;overflow:hidden;position:relative}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--secondary-blue),var(--green-secondary));border-radius:4px;width:2%;transition:width 0.3s ease;position:relative}
.progress-percentage{color:#ecf0f1;font-size:12px;font-weight:600;margin-left:10px}

/* ===== ACTION BUTTONS ===== */
.action-section{display:flex;align-items:center;gap:15px}
.menu-btn,.flag-btn,.report-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-white);width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.menu-btn{width:45px;height:45px;border-radius:12px;color:var(--text-white)}
.menu-btn:hover,.flag-btn:hover,.report-btn:hover{background:var(--glass-hover);transform:translateY(-3px) scale(1.05);box-shadow:0 8px 25px var(--shadow-medium)}

/* ===== FLAG BUTTON ===== */
.flag-btn{color:var(--text-light)}
.flag-btn.active{background:linear-gradient(135deg,var(--red-primary),var(--red-secondary));color:var(--text-white);border-color:var(--red-primary);box-shadow:0 6px 20px rgba(231,76,60,0.4);animation:flagPulse 0.6s ease-out}
.flag-btn.active .flag-icon{animation:flagWave 0.8s ease-in-out}

/* ===== SUBMIT BUTTON ===== */
.submit-btn{background:linear-gradient(135deg,var(--red-primary),var(--red-secondary));color:var(--text-white);border:none;padding:12px 24px;border-radius:25px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(231,76,60,0.3)}
.submit-btn:hover{background:linear-gradient(135deg,var(--red-secondary),var(--red-dark));transform:translateY(-2px);box-shadow:0 6px 20px rgba(231,76,60,0.4)}

/* ===== MODAL STYLES ===== */
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all 0.3s ease;padding:20px;box-sizing:border-box}
.modal-overlay.active{opacity:1;visibility:visible}
.modal-container{background:var(--bg-white);border-radius:16px;width:100%;max-width:700px;max-height:calc(100vh - 40px);box-shadow:0 20px 40px var(--shadow-medium);transform:scale(0.9) translateY(20px);transition:all 0.3s ease;display:flex;flex-direction:column;overflow:hidden}
.modal-overlay.active .modal-container{transform:scale(1) translateY(0)}
.modal-header{background:linear-gradient(135deg,var(--secondary-blue),var(--dark-blue));color:var(--text-white);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.modal-title{font-size:20px;font-weight:600;margin:0}
.close-btn{background:var(--glass-border);border:none;color:var(--text-white);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}
.close-btn:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg)}

/* ===== MODAL CONTENT ===== */
.modal-content{padding:24px;flex:1;min-height:0;overflow-y:auto}
.modal-description{color:var(--text-muted);font-size:14px;margin:0 0 20px 0;line-height:1.5}
.result-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-bottom:20px}
.stat-item{display:flex;flex-direction:column;gap:4px}
.stat-label{font-size:12px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.stat-value{font-size:24px;font-weight:700;display:flex;align-items:center;gap:4px}
.stat-answered{color:var(--green-success)}
.stat-skipped{color:var(--warning-orange)}
.stat-unanswered{color:var(--text-muted)}
.stat-marked{color:var(--purple-accent)}
.star-icon{font-size:18px;color:var(--warning-yellow)}
.divider{height:1px;background:var(--border-light);margin:20px 0}

/* ===== QUESTIONS GRID ===== */
.questions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px;max-height:300px;overflow-y:auto;padding:2px}
.question-btn{width:40px;height:40px;border:2px solid var(--border-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s ease;background:var(--bg-white);color:var(--text-muted)}
.question-btn:hover{border-color:var(--secondary-blue);transform:translateY(-1px);box-shadow:0 4px 8px rgba(52,152,219,0.2)}
.question-btn.answered{background:var(--green-success);border-color:var(--green-success);color:var(--text-white)}
.question-btn.skipped{background:var(--warning-orange);border-color:var(--warning-orange);color:var(--text-white)}
.question-btn.correct{background:var(--green-success);color:var(--text-white)}
.question-btn.wrong{background:var(--red-error);color:var(--text-white)}
.question-btn.marked{position:relative}
.question-btn.marked::after{content:'★';position:absolute;top:-4px;right:-4px;background:var(--warning-yellow);color:var(--text-white);font-size:10px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ===== REPORT MODAL ===== */
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
.modal-contentt{background:var(--bg-white);margin:5% auto;padding:25px;border-radius:15px;width:90%;max-width:450px;text-align:right;direction:rtl;box-shadow:0 4px 20px var(--shadow-dark);position:relative}
.close{position:absolute;right:15px;top:15px;font-size:24px;cursor:pointer;color:var(--text-gray)}
.close:hover{color:var(--text-primary)}
.modal-contentt h2{color:#007bff;margin-bottom:20px;text-align:center}
.form-group{margin:15px 0;padding:10px;border-radius:8px;border:1px solid #e0e0e0}
.form-group:hover{background:var(--bg-light)}
.form-group label{display:flex;align-items:center;cursor:pointer;width:100%}
.form-group input[type="radio"]{margin-left:10px;transform:scale(1.2)}
.radio-text{font-size:16px;color:var(--text-primary)}
#details{width:100%;height:80px;margin:15px 0;padding:12px;border-radius:8px;border:1px solid var(--border-gray);font-family:inherit;resize:vertical;box-sizing:border-box}
.send-btn{background:#007bff;color:var(--text-white);padding:12px 30px;border:none;border-radius:25px;cursor:pointer;width:100%;font-size:16px;font-weight:bold;transition:background-color 0.3s}
.send-btn:hover{background:#b30000}

/* ===== MISC ELEMENTS ===== */
.thumb{font-size:40px;color:var(--text-yellow);margin-right:10px;margin-top:10px}
.explanation{margin:1.2rem 0;padding:1.1rem 1.3rem 1.1rem 2.7rem;background:linear-gradient(90deg,var(--green-info) 0%,var(--bg-white) 100%);border-left:5px solid var(--green-border);border-radius:12px;font-size:1.12rem;color:var(--text-secondary);box-shadow:0 2px 12px rgba(0,188,212,0.08);position:relative;font-family:'Inter','Cairo',Arial,sans-serif;letter-spacing:0.01em}

/* ===== ANIMATIONS ===== */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes flagPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes flagWave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}

/* ===== RESPONSIVE DESIGN ===== */
@media (min-width:768px){.question-section{flex-direction:row;justify-content:space-between;align-items:flex-start}}
@media (max-width:768px){
.container{border-radius:0;margin:0}
.top-bar{flex-direction:column;gap:20px;padding:20px}
.quiz-info{margin:0}
.progress-bar-container{width:250px}
.action-section{width:100%;justify-content:center}
.modal-container{width:95%;margin:20px}
.questions-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
.language-switcher button{padding:8px 12px;font-size:13px;min-width:60px}
.language-switcher{gap:6px;padding:4px}
.modal-header{padding:16px 20px}
.modal-title{font-size:18px}
.modal-content{padding:20px}
.result-info{grid-template-columns:repeat(2,1fr);gap:12px}
.questions-grid{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px;max-height:250px}
.question-btn{width:36px;height:36px;font-size:13px}
#timer,.timer-display{font-size:18px!important;min-width:60px!important}
#timer-display,.timer{padding:8px 12px!important}
}
@media (max-width:480px){
.result-info{grid-template-columns:1fr;gap:12px}
.stat-item{flex-direction:row;justify-content:space-between;align-items:center}
.stat-value{font-size:20px}
.questions-grid{max-height:200px}
.question-media img{
    max-width: 250px !important;
}

}

/* ===== SCROLLBAR STYLING ===== */
.questions-grid::-webkit-scrollbar{width:6px}
.questions-grid::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}
.questions-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.questions-grid::-webkit-scrollbar-thumb:hover{background:#94a3b8}
 /* media container */
.image-container { display:flex; justify-content:center; align-items:center; padding:10px; }
.media-container { width:100%; max-width:520px; }
   /* 🖼️ CSS للـ Sequence Questions - الأرقام على الصورة مباشرة */

/* Image wrapper */
[id*="image-wrapper"] {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 20px auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: visible; /* مهم للسماح للأرقام بالظهور خارج حدود الصورة */
}

/* الصورة نفسها */
[id*="sequence-image"] {
  filter: brightness(1.02) contrast(1.05);
  transition: filter 0.3s ease;
}

/* الأرقام القابلة للسحب على الصورة */
.draggable-number-on-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: grab;
}

.draggable-number-on-image:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5) !important;
}

.draggable-number-on-image:active {
  cursor: grabbing !important;
  transform: translate(-50%, -50%) scale(1.05) rotate(3deg) !important;
}

/* الأرقام الموضوعة في المكان الصحيح */
.draggable-number-on-image.placed-correctly {
  cursor: pointer;
  animation: placeSuccess 0.6s ease;
}

.draggable-number-on-image.placed-correctly:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
  box-shadow: 0 6px 25px rgba(16, 185, 129, 0.6) !important;
}

.draggable-number-on-image.placed-correctly:active {
  transform: translate(-50%, -50%) scale(0.95) !important;
}

@keyframes placeSuccess {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Drop zones على الصورة */
.vehicle-drop-zone-on-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.vehicle-drop-zone-on-image:hover {
  border-color: #059669 !important;
  background-color: rgba(16, 185, 129, 0.25) !important;
  transform: translate(-50%, -50%) scale(1.15) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* حالة السحب النشطة */
.dragging-number {
  opacity: 0.7 !important;
  transform: translate(-50%, -50%) scale(1.1) rotate(8deg) !important;
  z-index: 200 !important;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.6) !important;
}

/* تأثيرات الـ Drop Zone النشطة */
.drop-zone-active {
  border-color: #059669 !important;
  background-color: rgba(16, 185, 129, 0.3) !important;
  transform: translate(-50%, -50%) scale(1.2) !important;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* تحسينات الـ Responsive */
@media (max-width: 768px) {
  .vehicle-drop-zone-on-image {
    width: 55px !important;
    height: 55px !important;
    border-width: 3px !important;
  }
  
  .draggable-number-on-image {
    width: 45px !important;
    height: 45px !important;
    font-size: 18px !important;
  }
  
  [id*="image-wrapper"] {
    margin: 15px auto;
  }
}

@media (max-width: 480px) {
  .vehicle-drop-zone-on-image {
    width: 50px !important;
    height: 50px !important;
    border-width: 2px !important;
  }
  
  .draggable-number-on-image {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }
  
  [id*="image-wrapper"] {
    margin: 10px auto;
  }
}

/* مؤثرات بصرية إضافية للـ Tooltips */
.number-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.draggable-number-on-image:hover .number-tooltip {
  opacity: 1;
}

/* تحسين التباين للوضوح */
[id*="sequence-image"]:hover {
  filter: brightness(1.05) contrast(1.08);
}

/* تأثيرات الـ Feedback */
.sequence-feedback {
  margin-top: 20px;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  transition: all 0.3s ease;
}

.sequence-feedback.correct {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 2px solid #10b981;
  color: #047857;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.sequence-feedback.incorrect {
  background: linear-gradient(135deg, #fef2f2, #fecaca);
  border: 2px solid #ef4444;
  color: #dc2626;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

/* تحسينات الـ Touch للموبايل */
@media (pointer: coarse) {
  .vehicle-drop-zone-on-image {
    min-width: 55px !important;
    min-height: 55px !important;
    border-width: 3px !important;
  }
  
  .draggable-number-on-image {
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 45px !important;
    min-height: 45px !important;
  }
  
  .draggable-number-on-image.placed-correctly {
    touch-action: manipulation;
  }
}

/* إضافة مؤثرات الإضاءة للـ Drop Zones */
.vehicle-drop-zone-on-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3), transparent);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vehicle-drop-zone-on-image:hover::before {
  opacity: 1;
}

/* تأثيرات التحديد المتقدمة */
.number-highlight {
  position: relative;
}

.number-highlight::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 3px solid #fbbf24;
  border-radius: 50%;
  animation: highlight-pulse 2s infinite;
}

@keyframes highlight-pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(1.1);
  }
}

/* مؤشرات ترقيم التسلسل */
.sequence-order-indicator {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #92400e;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 150;
}

/* تحسين الـ Loading State */
.image-loading {
  position: relative;
}

.image-loading::before {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  z-index: 1000;
  font-size: 14px;
  font-weight: 500;
}

/* تأثيرات الانتقال الناعم */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

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

/* تحسينات إضافية للأرقام */
.draggable-number-on-image {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.draggable-number-on-image.placed-correctly {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.2);
}

/* تحسين الظلال للعناصر المختلفة */
[id*="image-wrapper"] {
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1));
}

.vehicle-drop-zone-on-image {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* إضافة تأثيرات التركيز للـ accessibility */
.draggable-number-on-image:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.vehicle-drop-zone-on-image:focus {
  outline: 3px solid #10b981;
  outline-offset: 2px;
}

/* تحسين الألوان للوضع المظلم */
@media (prefers-color-scheme: dark) {
  .number-tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    color: #1f2937;
  }
  
  .sequence-feedback.correct {
    background: linear-gradient(135deg, #064e3b, #065f46);
    color: #a7f3d0;
  }
  
  .sequence-feedback.incorrect {
    background: linear-gradient(135deg, #7f1d1d, #991b1b);
    color: #fca5a5;
  }
}