/* الأساسيات المعدلة */
        :root {
          --main-color: #1a0a0a;
          --accent-color: #ff6b6b;
          --text-color: #ffffff;
          --gold-color: #ffd93d;
          --success-color: #6bcf7f;
          --warning-color: #ffa726;
          --error-color: #ef5350;
          --gradient-primary: linear-gradient(135deg, #1a0a0a 0%, #2d1b1b 50%, #1a0a0a 100%);
          --gradient-secondary: linear-gradient(145deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1));
          --shadow-primary: 0 10px 30px rgba(0, 0, 0, 0.3);
          --shadow-secondary: 0 5px 15px rgba(255, 107, 107, 0.2);
        }
            
        body {
          margin: 0;
          background: var(--gradient-primary);
          min-height: 100vh;
          font-family: 'Tajawal', sans-serif;
          color: var(--text-color);
          direction: rtl;
          overflow-x: hidden;
          position: relative;
        }

        body::before {
          content: '';
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: 
            radial-gradient(circle at 20% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 217, 61, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(107, 207, 127, 0.05) 0%, transparent 50%);
          pointer-events: none;
          z-index: -1;
        }

        /* تأثير المطر الدموي المحسن */
        .blood-rain {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: -1;
        }
        
        .drop {
          position: absolute;
          top: -20px;
          width: 2px;
          height: 25px;
          background: linear-gradient(to bottom, 
            rgba(255, 107, 107, 0.8) 0%, 
            rgba(220, 53, 69, 0.9) 50%, 
            rgba(139, 0, 0, 0.7) 100%);
          border-radius: 50% 50% 20% 20%;
          opacity: 0.6;
          animation: fall linear infinite;
          filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.5));
          transform-origin: center bottom;
        }

        .drop::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 4px;
          height: 4px;
          background: rgba(255, 107, 107, 0.6);
          border-radius: 50%;
          filter: blur(1px);
        }

        @keyframes fall {
          0% {
            transform: translateY(-20px) rotate(0deg);
            opacity: 0;
          }
          10% {
            opacity: 0.6;
          }
          90% {
            opacity: 0.6;
          }
          100% {
            transform: translateY(120vh) rotate(360deg);
            opacity: 0;
          }
        }

        /* توليد عشوائي محسن للقطرات */
        .drop:nth-child(1)  { left: 3%;  animation-duration: 2.1s;  animation-delay: 0s;   }
        .drop:nth-child(2)  { left: 12%; animation-duration: 2.8s;  animation-delay: 0.3s; }
        .drop:nth-child(3)  { left: 21%; animation-duration: 2.3s;  animation-delay: 0.7s; }
        .drop:nth-child(4)  { left: 29%; animation-duration: 3.1s;  animation-delay: 0.1s; }
        .drop:nth-child(5)  { left: 37%; animation-duration: 2.6s;  animation-delay: 0.5s; }
        .drop:nth-child(6)  { left: 45%; animation-duration: 2.9s;  animation-delay: 0.9s; }
        .drop:nth-child(7)  { left: 53%; animation-duration: 2.4s;  animation-delay: 0.2s; }
        .drop:nth-child(8)  { left: 61%; animation-duration: 3.2s;  animation-delay: 0.6s; }
        .drop:nth-child(9)  { left: 69%; animation-duration: 2.7s;  animation-delay: 0.8s; }
        .drop:nth-child(10) { left: 77%; animation-duration: 2.2s;  animation-delay: 0.4s; }
        .drop:nth-child(11) { left: 85%; animation-duration: 3.0s;  animation-delay: 0.1s; }
        .drop:nth-child(12) { left: 93%; animation-duration: 2.5s;  animation-delay: 0.7s; }
        .drop:nth-child(13) { left: 7%;  animation-duration: 2.8s;  animation-delay: 0.3s; }
        .drop:nth-child(14) { left: 15%; animation-duration: 2.1s;  animation-delay: 0.6s; }
        .drop:nth-child(15) { left: 23%; animation-duration: 3.3s;  animation-delay: 0.2s; }
        .drop:nth-child(16) { left: 31%; animation-duration: 2.4s;  animation-delay: 0.8s; }
        .drop:nth-child(17) { left: 39%; animation-duration: 2.9s;  animation-delay: 0.4s; }
        .drop:nth-child(18) { left: 47%; animation-duration: 2.6s;  animation-delay: 0.1s; }
        .drop:nth-child(19) { left: 55%; animation-duration: 3.1s;  animation-delay: 0.5s; }
        .drop:nth-child(20) { left: 63%; animation-duration: 2.3s;  animation-delay: 0.9s; }
        .drop:nth-child(21) { left: 71%; animation-duration: 2.7s;  animation-delay: 0.2s; }
        .drop:nth-child(22) { left: 79%; animation-duration: 2.8s;  animation-delay: 0.6s; }
        .drop:nth-child(23) { left: 87%; animation-duration: 2.5s;  animation-delay: 0.3s; }
        .drop:nth-child(24) { left: 95%; animation-duration: 3.2s;  animation-delay: 0.7s; }
        .drop:nth-child(25) { left: 5%;  animation-duration: 2.2s;  animation-delay: 0.4s; }

        /* تحسينات القائمة العلوية */
        .head {
          position: relative;
          z-index: 10;
          background: linear-gradient(135deg, rgba(26, 10, 10, 0.95), rgba(45, 27, 27, 0.95));
          backdrop-filter: blur(10px);
          border-bottom: 1px solid rgba(255, 107, 107, 0.3);
          box-shadow: var(--shadow-primary);
        }

        .head nav {
          padding: 25px 40px;
          position: relative;
        }

        .head nav ul {
          display: flex;
          flex-wrap: wrap;
          gap: 30px;
          justify-content: center;
          padding: 0;
          margin: 0;
          list-style: none;
        }

        .head nav ul li {
          position: relative;
        }

        .head nav ul li button {
          all: unset;
          color: var(--text-color);
          font-family: 'Lateef', cursive;
          font-size: 26px;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          padding: 10px 20px;
          border-radius: 15px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 107, 107, 0.2);
          backdrop-filter: blur(5px);
        }

        .head nav ul li button::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 217, 61, 0.1));
          border-radius: 15px;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .head nav ul li button:hover::before {
          opacity: 1;
        }

        .head nav ul li:hover button {
          color: var(--gold-color);
          text-shadow: 0 0 15px var(--gold-color);
          transform: translateY(-2px);
          box-shadow: var(--shadow-secondary);
          border-color: var(--gold-color);
        }

        .head .active_1 .sais_1 {
          font-size: 32px;
          color: var(--gold-color);
          text-shadow: 0 0 20px var(--gold-color);
          background: linear-gradient(135deg, rgba(255, 217, 61, 0.1), rgba(255, 107, 107, 0.1));
          border-color: var(--gold-color);
        }

        .head .active-line_1 {
          position: absolute;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%);
          width: 120px;
          height: 4px;
          background: linear-gradient(90deg, var(--accent-color), var(--gold-color), var(--accent-color));
          border-radius: 10px;
          box-shadow: 0 0 20px var(--accent-color);
          animation: glow 2s ease-in-out infinite alternate;
        }

        @keyframes glow {
          0% { box-shadow: 0 0 20px var(--accent-color); }
          100% { box-shadow: 0 0 30px var(--gold-color); }
        }

        hr {
          border: none;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--accent-color), var(--gold-color), var(--accent-color), transparent);
          box-shadow: 0 0 15px var(--accent-color);
          margin: 0 40px;
          opacity: 0.8;
        }

        /* تحسينات بطاقات اللعبة */
        .container {
          max-width: 1000px;
          margin: 0 auto;
          padding: 30px 20px;
          position: relative;
        }

        h1, h2 {
          font-size: 2.8rem;
          margin-bottom: 30px;
          text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
          text-align: center;
          font-family: 'Lateef', cursive;
          color: var(--gold-color);
          position: relative;
        }

        h1::after, h2::after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 3px;
          background: linear-gradient(90deg, var(--accent-color), var(--gold-color));
          border-radius: 2px;
          box-shadow: 0 0 10px var(--accent-color);
        }

        .rules {
          background: linear-gradient(145deg, rgba(26, 10, 10, 0.8), rgba(45, 27, 27, 0.9));
          padding: 25px;
          border-radius: 20px;
          margin-bottom: 40px;
          border: 2px solid rgba(255, 107, 107, 0.3);
          box-shadow: var(--shadow-primary);
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
        }

        .rules::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 217, 61, 0.1), transparent);
          transition: left 0.6s ease;
        }

        .rules:hover::before {
          left: 100%;
        }

        .rules h2 {
          font-size: 2.2rem;
          margin-bottom: 20px;
          color: var(--gold-color);
        }

        .rules p {
          font-size: 1.1rem;
          line-height: 1.6;
          margin: 12px 0;
          color: var(--text-color);
          opacity: 0.9;
          position: relative;
          z-index: 2;
        }

        .game-area {
          display: none;
          background: linear-gradient(145deg, rgba(26, 10, 10, 0.8), rgba(45, 27, 27, 0.9));
          padding: 30px;
          border-radius: 20px;
          border: 2px solid rgba(255, 107, 107, 0.3);
          box-shadow: var(--shadow-primary);
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
        }

        .game-area::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--gradient-secondary);
          opacity: 0.3;
          pointer-events: none;
        }

        .question {
          font-size: 1.6rem;
          margin-bottom: 30px;
          min-height: 100px;
          padding: 25px;
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.1));
          border-radius: 15px;
          border: 1px solid rgba(255, 107, 107, 0.2);
          box-shadow: var(--shadow-secondary);
          text-align: center;
          line-height: 1.6;
          color: var(--text-color);
          position: relative;
          z-index: 2;
          backdrop-filter: blur(5px);
        }

        .options {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-bottom: 30px;
          position: relative;
          z-index: 2;
        }

        .option {
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.12));
          padding: 20px;
          border-radius: 15px;
          cursor: pointer;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          text-align: center;
          border: 2px solid rgba(255, 107, 107, 0.2);
          box-shadow: var(--shadow-secondary);
          backdrop-filter: blur(5px);
          position: relative;
          overflow: hidden;
          font-size: 1.1rem;
          line-height: 1.5;
          color: var(--text-color);
        }

        .option::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 217, 61, 0.1), transparent);
          transition: left 0.5s ease;
        }

        .option:hover::before {
          left: 100%;
        }

        .option:hover {
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.2));
          transform: translateY(-5px) scale(1.02);
          box-shadow: 0 15px 35px rgba(255, 107, 107, 0.3);
          border-color: var(--gold-color);
        }

        .correct {
          background: linear-gradient(145deg, rgba(107, 207, 127, 0.3), rgba(107, 207, 127, 0.4)) !important;
          box-shadow: 0 0 25px rgba(107, 207, 127, 0.6) !important;
          border-color: var(--success-color) !important;
          animation: correctPulse 0.6s ease-in-out;
        }

        .incorrect {
          background: linear-gradient(145deg, rgba(239, 83, 80, 0.3), rgba(239, 83, 80, 0.4)) !important;
          box-shadow: 0 0 25px rgba(239, 83, 80, 0.6) !important;
          border-color: var(--error-color) !important;
          animation: incorrectShake 0.6s ease-in-out;
        }

        @keyframes correctPulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); }
        }

        @keyframes incorrectShake {
          0%, 100% { transform: translateX(0); }
          25% { transform: translateX(-5px); }
          75% { transform: translateX(5px); }
        }

        .team-input {
          margin-bottom: 20px;
        }

        .team-input > div {
          background: linear-gradient(145deg, rgba(75, 0, 0, 0.6), rgba(40, 0, 0, 0.8));
          padding: 20px;
          border-radius: 15px;
          margin-bottom: 15px;
          border: 1px solid rgba(255, 77, 77, 0.3);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .team-input h3 {
          color: var(--gold-color);
          margin-bottom: 15px;
          font-family: 'Lateef', cursive;
          font-size: 24px;
        }

        .team-input select {
          background: rgba(255, 255, 255, 0.1);
          color: var(--text-color);
          border: 1px solid rgba(255, 77, 77, 0.5);
          padding: 8px 12px;
          border-radius: 8px;
          margin-right: 10px;
        }

        .team-input select:focus {
          outline: none;
          border-color: var(--gold-color);
          box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .team-players {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          margin-top: 10px;
        }

        .team-players input {
          flex: 1;
          min-width: 150px;
          background: rgba(255, 255, 255, 0.1);
          color: var(--text-color);
          border: 1px solid rgba(255, 77, 77, 0.3);
          padding: 10px;
          border-radius: 8px;
          transition: all 0.3s;
        }

        .team-players input:focus {
          outline: none;
          border-color: var(--gold-color);
          box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
          background: rgba(255, 255, 255, 0.15);
        }

        input, button, select {
          padding: 10px;
          margin: 5px;
          border: none;
          border-radius: 5px;
          font-family: 'Tajawal', sans-serif;
        }

        button {
          background: linear-gradient(145deg, var(--accent-color), #e74c3c);
          color: white;
          cursor: pointer;
          font-weight: bold;
          font-size: 1.1rem;
          padding: 15px 30px;
          border: none;
          border-radius: 15px;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: var(--shadow-secondary);
          position: relative;
          overflow: hidden;
          backdrop-filter: blur(5px);
          font-family: 'Tajawal', sans-serif;
        }

        button::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transition: left 0.5s ease;
        }

        button:hover::before {
          left: 100%;
        }

        button:hover {
          background: linear-gradient(145deg, #e74c3c, var(--accent-color));
          transform: translateY(-3px) scale(1.05);
          box-shadow: 0 15px 35px rgba(255, 107, 107, 0.4);
        }

        button:active {
          transform: translateY(-1px) scale(1.02);
        }

        button:disabled {
          background: linear-gradient(145deg, #6c757d, #495057);
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
          opacity: 0.6;
        }

        button:disabled:hover {
          transform: none;
          box-shadow: none;
        }

        #start-game {
          background: linear-gradient(145deg, var(--success-color), #28a745);
          font-size: 1.3rem;
          padding: 20px 40px;
          margin-top: 20px;
        }

        #start-game:hover {
          background: linear-gradient(145deg, #28a745, var(--success-color));
        }

        #next-question {
          background: linear-gradient(145deg, var(--gold-color), #ffc107);
          color: #333;
          font-size: 1.2rem;
          padding: 18px 35px;
        }

        #next-question:hover {
          background: linear-gradient(145deg, #ffc107, var(--gold-color));
        }

        #restart-game {
          background: linear-gradient(145deg, var(--accent-color), #e74c3c);
          font-size: 1.2rem;
          padding: 18px 35px;
          margin-top: 20px;
        }

        .teams {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          margin-bottom: 20px;
          gap: 15px;
        }

        .team {
          background: linear-gradient(145deg, rgba(75, 0, 0, 0.8), rgba(40, 0, 0, 0.9));
          padding: 20px;
          border-radius: 15px;
          margin: 5px;
          width: 180px;
          text-align: center;
          transition: all 0.3s ease;
          border: 2px solid rgba(255, 77, 77, 0.3);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
          position: relative;
          overflow: hidden;
        }

        .team::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
          transition: left 0.5s;
        }

        .team:hover::before {
          left: 100%;
        }

        .team:hover {
          transform: translateY(-8px) scale(1.05);
          box-shadow: 0 15px 35px rgba(255, 77, 77, 0.4);
          border-color: var(--gold-color);
        }

        .team h4 {
          font-family: 'Lateef', cursive;
          font-size: 22px;
          margin: 0 0 15px 0;
          color: var(--gold-color);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
          position: relative;
          z-index: 2;
        }

        .team p {
          margin: 8px 0;
          font-size: 14px;
          line-height: 1.4;
          color: var(--text-color);
          opacity: 0.9;
          position: relative;
          z-index: 2;
        }

        .team .score {
          font-weight: bold;
          font-size: 18px;
          color: var(--accent-color);
          text-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
          margin-top: 10px;
          padding: 8px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 8px;
          border: 1px solid rgba(255, 77, 77, 0.3);
        }

        .team.selected {
          background: linear-gradient(145deg, rgba(0, 100, 0, 0.8), rgba(0, 60, 0, 0.9));
          border-color: #4CAF50;
          box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
        }

        .team.selected h4 {
          color: #4CAF50;
        }

        .team.waiting {
          background: linear-gradient(145deg, rgba(255, 165, 0, 0.8), rgba(255, 140, 0, 0.9));
          border-color: #FFA500;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.02); }
          100% { transform: scale(1); }
        }

        .progress-container {
          width: 100%;
          background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.15));
          border-radius: 15px;
          margin: 25px 0;
          padding: 3px;
          border: 1px solid rgba(255, 107, 107, 0.3);
          box-shadow: var(--shadow-secondary);
          backdrop-filter: blur(5px);
          position: relative;
          z-index: 2;
        }

        .progress-bar {
          height: 25px;
          background: linear-gradient(90deg, var(--success-color), var(--gold-color), var(--accent-color));
          border-radius: 12px;
          width: 0%;
          transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          box-shadow: 0 0 15px rgba(107, 207, 127, 0.5);
          position: relative;
          overflow: hidden;
        }

        .progress-bar::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          animation: progressShine 2s infinite;
        }

        @keyframes progressShine {
          0% { left: -100%; }
          100% { left: 100%; }
        }

        .timer {
          font-size: 2rem;
          margin: 20px 0;
          color: var(--gold-color);
          text-shadow: 0 0 15px rgba(255, 217, 61, 0.8);
          text-align: center;
          font-weight: bold;
          font-family: 'Lateef', cursive;
          background: linear-gradient(145deg, rgba(255, 217, 61, 0.1), rgba(255, 107, 107, 0.1));
          padding: 15px 30px;
          border-radius: 15px;
          border: 2px solid rgba(255, 217, 61, 0.3);
          box-shadow: var(--shadow-secondary);
          backdrop-filter: blur(5px);
          position: relative;
          z-index: 2;
          animation: timerPulse 1s ease-in-out infinite alternate;
        }

        .timer.warning {
          color: var(--warning-color);
          text-shadow: 0 0 15px rgba(255, 167, 38, 0.8);
          animation: timerWarning 0.5s ease-in-out infinite alternate;
        }

        .timer.danger {
          color: var(--error-color);
          text-shadow: 0 0 15px rgba(239, 83, 80, 0.8);
          animation: timerDanger 0.3s ease-in-out infinite alternate;
        }

        @keyframes timerPulse {
          0% { transform: scale(1); }
          100% { transform: scale(1.05); }
        }

        @keyframes timerWarning {
          0% { transform: scale(1); }
          100% { transform: scale(1.1); }
        }

        @keyframes timerDanger {
          0% { transform: scale(1); }
          100% { transform: scale(1.15); }
        }

        /* بطاقات الأئمة في القائمة */
        .imam-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          margin: 30px 0;
        }

        .imam-card {
          background: linear-gradient(145deg, rgba(75, 0, 0, 0.8), rgba(40, 0, 0, 0.9));
          color: var(--text-color);
          padding: 15px;
          border-radius: 15px;
          border: 1px solid rgba(255, 77, 77, 0.5);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          transition: all 0.3s ease;
          text-align: center;
          cursor: pointer;
        }

        .imam-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 25px rgba(255, 77, 77, 0.4);
        }

        .imam-card h3 {
          font-family: 'Lateef', cursive;
          font-size: 24px;
          margin: 0;
          color: var(--gold-color);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .imam-card p {
          font-size: 16px;
          margin: 10px 0 0 0;
          opacity: 0.9;
        }

        /* النتائج النهائية */
        #final-teams {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 15px;
        }

        .final-team {
          background: linear-gradient(145deg, rgba(75, 0, 0, 0.8), rgba(40, 0, 0, 0.9));
          padding: 20px;
          border-radius: 15px;
          width: 250px;
          text-align: center;
          transition: all 0.3s ease;
          border: 2px solid rgba(255, 77, 77, 0.3);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
          position: relative;
          overflow: hidden;
        }

        .final-team::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
          transition: left 0.5s;
        }

        .final-team:hover::before {
          left: 100%;
        }

        .final-team:hover {
          transform: translateY(-5px) scale(1.05);
          box-shadow: 0 15px 35px rgba(255, 77, 77, 0.4);
        }

        .final-team h4 {
          font-family: 'Lateef', cursive;
          font-size: 24px;
          margin: 0 0 15px 0;
          color: var(--gold-color);
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .final-team p {
          margin: 8px 0;
          font-size: 16px;
          line-height: 1.4;
          color: var(--text-color);
          opacity: 0.9;
        }

        .final-team .final-score {
          font-weight: bold;
          font-size: 20px;
          color: var(--accent-color);
          text-shadow: 0 0 10px rgba(255, 77, 77, 0.5);
          margin-top: 15px;
          padding: 10px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 10px;
          border: 1px solid rgba(255, 77, 77, 0.3);
        }

        .final-team.winner {
          background: linear-gradient(145deg, rgba(0, 100, 0, 0.8), rgba(0, 60, 0, 0.9));
          box-shadow: 0 0 25px rgba(0, 255, 0, 0.6);
          border-color: #4CAF50;
          animation: winnerGlow 2s ease-in-out infinite alternate;
        }

        .final-team.winner h4 {
          color: #4CAF50;
          text-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
        }

        .final-team.winner .final-score {
          color: #4CAF50;
          text-shadow: 0 0 15px rgba(76, 175, 80, 0.8);
        }

        @keyframes winnerGlow {
          0% { box-shadow: 0 0 25px rgba(0, 255, 0, 0.6); }
          100% { box-shadow: 0 0 35px rgba(0, 255, 0, 0.8); }
        }

        /* زر العودة للأعلى */
        #topBtn {
          display: none;
          position: fixed;
          bottom: 20px;
          left: 20px;
          z-index: 99;
          border: none;
          outline: none;
          background-color: var(--accent-color);
          color: white;
          cursor: pointer;
          padding: 15px;
          border-radius: 50%;
          font-size: 18px;
          width: 50px;
          height: 50px;
          text-align: center;
          box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
          transition: all 0.3s;
        }

        #topBtn:hover {
          background-color: var(--gold-color);
          transform: scale(1.1);
        }

        /* تأثيرات للجوال */
        @media (max-width: 768px) {
          .options {
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
          }
          
          .imam-cards {
            grid-template-columns: 1fr 1fr;
          }
          
          .team {
            width: 150px;
            font-size: 14px;
            padding: 15px;
          }

          .team h4 {
            font-size: 18px;
          }

          .team .score {
            font-size: 16px;
          }
          
          .question {
            font-size: 1.3rem;
            padding: 20px;
            min-height: 80px;
          }

          .timer {
            font-size: 1.6rem;
            padding: 12px 25px;
          }
          
          .drop:nth-child(n+16) {
            display: none;
          }

          .team-players {
            flex-direction: column;
          }

          .team-players input {
            min-width: auto;
            width: 100%;
          }

          .team-input > div {
            padding: 15px;
          }

          .head nav {
            padding: 20px 20px;
          }

          .head nav ul li button {
            font-size: 20px;
            padding: 8px 15px;
          }

          .rules, .game-area {
            padding: 20px;
            margin-bottom: 30px;
          }

          h1, h2 {
            font-size: 2.2rem;
          }

          .rules h2 {
            font-size: 1.8rem;
          }
        }

        /* تحسينات للهواتف الصغيرة */
        @media (max-width: 480px) {
          .container {
            padding: 15px 10px;
            max-width: 100%;
          }

          h1, h2 {
            font-size: 1.8rem;
            margin-bottom: 20px;
          }

          h1::after, h2::after {
            width: 60px;
            height: 2px;
          }

          .rules {
            padding: 15px;
            margin-bottom: 25px;
            border-radius: 15px;
          }

          .rules h2 {
            font-size: 1.5rem;
            margin-bottom: 15px;
          }

          .rules p {
            font-size: 1rem;
            margin: 8px 0;
          }

          .game-area {
            padding: 15px;
            border-radius: 15px;
          }

          .question {
            font-size: 1.1rem;
            padding: 15px;
            min-height: 60px;
            line-height: 1.4;
          }

          .options {
            grid-template-columns: 1fr;
            gap: 10px;
            margin-bottom: 20px;
          }

          .option {
            padding: 15px;
            font-size: 1rem;
            border-radius: 12px;
          }

          .timer {
            font-size: 1.4rem;
            padding: 10px 20px;
            margin: 15px 0;
          }

          .progress-container {
            margin: 20px 0;
            border-radius: 12px;
          }

          .progress-bar {
            height: 20px;
            border-radius: 10px;
          }

          .teams {
            gap: 10px;
            justify-content: center;
          }
          
          .team {
            width: 120px;
            padding: 12px;
            border-radius: 12px;
          }

          .team h4 {
            font-size: 16px;
            margin-bottom: 10px;
          }

          .team p {
            font-size: 12px;
            margin: 5px 0;
          }

          .team .score {
            font-size: 14px;
            margin-top: 8px;
            padding: 6px;
          }

          .hint-btn {
            font-size: 11px;
            padding: 6px 10px;
            margin-top: 6px;
          }

          .hint-text {
            font-size: 12px;
            padding: 6px;
            margin-top: 6px;
          }

          .head nav {
            padding: 15px 10px;
          }

          .head nav ul {
            gap: 15px;
          }

          .head nav ul li button {
            font-size: 18px;
            padding: 6px 12px;
            border-radius: 12px;
          }

          .head .active_1 .sais_1 {
            font-size: 20px;
          }

          .head .active-line_1 {
            width: 80px;
            height: 3px;
            bottom: 15px;
          }

          hr {
            margin: 0 20px;
            height: 1px;
          }

          button {
            font-size: 1rem;
            padding: 12px 25px;
            border-radius: 12px;
          }

          #start-game {
            font-size: 1.1rem;
            padding: 15px 30px;
          }

          #next-question {
            font-size: 1rem;
            padding: 12px 25px;
          }

          .team-input > div {
            padding: 12px;
            border-radius: 12px;
          }

          .team-input h3 {
            font-size: 20px;
            margin-bottom: 12px;
          }

          .team-input select {
            padding: 6px 10px;
            font-size: 14px;
          }

          .team-players {
            gap: 8px;
            margin-top: 8px;
          }

          .team-players input {
            padding: 8px;
            font-size: 14px;
            border-radius: 8px;
          }

          .final-team {
            width: 200px;
            padding: 15px;
            border-radius: 12px;
          }

          .final-team h4 {
            font-size: 18px;
            margin-bottom: 12px;
          }

          .final-team p {
            font-size: 14px;
            margin: 6px 0;
          }

          .final-team .final-score {
            font-size: 16px;
            margin-top: 12px;
            padding: 8px;
          }

          .drop:nth-child(n+11) {
            display: none;
          }
        }

        /* تحسينات للهواتف الصغيرة جداً */
        @media (max-width: 360px) {
          .container {
            padding: 10px 5px;
          }

          h1, h2 {
            font-size: 1.6rem;
          }

          .rules h2 {
            font-size: 1.3rem;
          }

          .question {
            font-size: 1rem;
            padding: 12px;
          }

          .option {
            padding: 12px;
            font-size: 0.9rem;
          }

          .timer {
            font-size: 1.2rem;
            padding: 8px 15px;
          }

          .team {
            width: 100px;
            padding: 10px;
          }

          .team h4 {
            font-size: 14px;
          }

          .team p {
            font-size: 11px;
          }

          .team .score {
            font-size: 12px;
          }

          .head nav ul li button {
            font-size: 16px;
            padding: 5px 10px;
          }

          button {
            font-size: 0.9rem;
            padding: 10px 20px;
          }

          .drop:nth-child(n+8) {
            display: none;
          }
        }

        /* تحسينات للشاشات الكبيرة */
        @media (min-width: 1200px) {
          .container {
            max-width: 1200px;
            padding: 40px 30px;
          }

          h1, h2 {
            font-size: 3.2rem;
          }

          .question {
            font-size: 1.8rem;
            padding: 30px;
          }

          .option {
            font-size: 1.2rem;
            padding: 25px;
          }

          .timer {
            font-size: 2.5rem;
            padding: 20px 40px;
          }

          .team {
            width: 220px;
            padding: 25px;
          }

          .team h4 {
            font-size: 26px;
          }

          .team p {
            font-size: 16px;
          }

          .team .score {
            font-size: 20px;
          }
        }

        /* تحسينات للشاشات المتوسطة */
        @media (min-width: 769px) and (max-width: 1199px) {
          .container {
            max-width: 900px;
            padding: 25px 20px;
          }

          .options {
            grid-template-columns: 1fr 1fr;
            gap: 25px;
          }

          .teams {
            gap: 20px;
          }

          .team {
            width: 200px;
            padding: 22px;
          }
        }

        /* تحسينات للوضع الأفقي في الهواتف */
        @media (max-width: 768px) and (orientation: landscape) {
          .container {
            padding: 15px 20px;
          }

          .head nav {
            padding: 15px 20px;
          }

          .rules, .game-area {
            padding: 20px;
          }

          .question {
            min-height: 60px;
            padding: 15px;
          }

          .teams {
            flex-wrap: wrap;
            gap: 10px;
          }

          .team {
            width: 140px;
            padding: 12px;
          }

          .timer {
            font-size: 1.4rem;
            padding: 10px 20px;
          }
        }

        /* تحسينات للشاشات عالية الدقة */
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          .drop {
            transform: scale(0.8);
          }

          .option, .team, .rules, .game-area {
            border-width: 1px;
          }
        }

        /* تحسينات للشاشات التي تدعم اللمس */
        @media (hover: none) and (pointer: coarse) {
          .option:hover, .team:hover, button:hover {
            transform: none;
          }

          .option:active, .team:active, button:active {
            transform: scale(0.98);
          }

          .head nav ul li button:hover {
            transform: none;
          }

          .head nav ul li button:active {
            transform: scale(0.95);
          }
        }

        .hint-btn {
          background: linear-gradient(145deg, var(--warning-color), #ff9800);
          color: white;
          border: none;
          padding: 8px 12px;
          border-radius: 8px;
          font-size: 12px;
          font-weight: bold;
          cursor: pointer;
          margin-top: 8px;
          transition: all 0.3s ease;
          box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
        }

        .hint-btn:hover:not(:disabled) {
          background: linear-gradient(145deg, #ff9800, var(--warning-color));
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(255, 167, 38, 0.4);
        }

        .hint-btn:disabled {
          background: linear-gradient(145deg, #6c757d, #495057);
          cursor: not-allowed;
          opacity: 0.6;
          transform: none;
          box-shadow: none;
        }

        .hint-text {
          background: linear-gradient(145deg, rgba(255, 217, 61, 0.1), rgba(255, 217, 61, 0.2));
          border: 1px solid rgba(255, 217, 61, 0.3);
          border-radius: 8px;
          padding: 8px;
          margin-top: 8px;
          font-style: italic;
          text-align: center;
          backdrop-filter: blur(5px);
        }

        .team .score {
          font-size: 16px;
        }

        .hint-btn {
          font-size: 11px;
          padding: 6px 10px;
          margin-top: 6px;
        }

        .hint-text {
          font-size: 12px;
          padding: 6px;
          margin-top: 6px;
        }

        .setup > div {
          margin-bottom: 20px;
          background: linear-gradient(145deg, rgba(75, 0, 0, 0.6), rgba(40, 0, 0, 0.8));
          padding: 15px;
          border-radius: 12px;
          border: 1px solid rgba(255, 77, 77, 0.3);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .setup label {
          color: var(--gold-color);
          font-weight: bold;
          margin-bottom: 8px;
          display: block;
          font-family: 'Lateef', cursive;
          font-size: 18px;
        }

        .setup select, .setup input {
          background: rgba(255, 255, 255, 0.1);
          color: var(--text-color);
          border: 1px solid rgba(255, 77, 77, 0.5);
          padding: 10px 15px;
          border-radius: 8px;
          font-size: 16px;
          transition: all 0.3s ease;
        }

        .setup select:focus, .setup input:focus {
          outline: none;
          border-color: var(--gold-color);
          box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
          background: rgba(255, 255, 255, 0.15);
        }

        #custom-timer {
          background: linear-gradient(145deg, rgba(255, 217, 61, 0.1), rgba(255, 107, 107, 0.1));
          border: 1px solid rgba(255, 217, 61, 0.3);
          border-radius: 12px;
          padding: 15px;
          margin-top: 10px;
        }

        #custom-timer-input {
          width: 150px !important;
          text-align: center;
          font-weight: bold;
        }

        .team-input > div {
          padding: 15px;
        }

        .setup > div {
          padding: 12px;
          margin-bottom: 15px;
        }

        .setup label {
          font-size: 16px;
          margin-bottom: 6px;
        }

        .setup select, .setup input {
          padding: 8px 12px;
          font-size: 14px;
        }

        #custom-timer {
          padding: 12px;
          margin-top: 8px;
        }

        #custom-timer-input {
          width: 120px !important;
        }

        button {
          font-size: 0.9rem;
          padding: 10px 20px;
        }

        .setup > div {
          padding: 8px;
          margin-bottom: 10px;
        }

        .setup label {
          font-size: 13px;
          margin-bottom: 4px;
        }

        .setup select, .setup input {
          padding: 5px 8px;
          font-size: 12px;
        }

        #custom-timer {
          padding: 8px;
          margin-top: 5px;
        }

        #custom-timer-input {
          width: 80px !important;
        }

        .drop:nth-child(n+8) {
          display: none;
        }

        .hint-display {
          background: linear-gradient(145deg, rgba(255, 217, 61, 0.15), rgba(255, 217, 61, 0.25));
          border: 2px solid rgba(255, 217, 61, 0.4);
          border-radius: 15px;
          padding: 20px;
          margin: 20px 0;
          font-style: italic;
          text-align: center;
          backdrop-filter: blur(10px);
          color: var(--gold-color);
          font-size: 1.2rem;
          font-weight: bold;
          box-shadow: 0 5px 15px rgba(255, 217, 61, 0.3);
          position: relative;
          overflow: hidden;
        }

        .hint-display::before {
          content: '💡 تلميح: ';
          font-weight: bold;
          color: var(--warning-color);
        }

        .hint-display::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          animation: hintShine 2s infinite;
        }

        @keyframes hintShine {
          0% { left: -100%; }
          100% { left: 100%; }
        }

        .hint-text {
          font-size: 12px;
          padding: 6px;
          margin-top: 6px;
        }

        .hint-display {
          font-size: 1rem;
          padding: 15px;
          margin: 15px 0;
          border-radius: 12px;
        }

        .hint-display::before {
          font-size: 0.9rem;
        }

        .hint-btn {
          font-size: 11px;
          padding: 6px 10px;
          margin-top: 6px;
        }

        .hint-display {
          font-size: 0.9rem;
          padding: 12px;
          margin: 12px 0;
          border-radius: 10px;
        }

        .hint-display::before {
          font-size: 0.8rem;
        }

        @keyframes hintShine {
          0% { left: -100%; }
          100% { left: 100%; }
        }

        .correct-answer {
          background: linear-gradient(145deg, rgba(107, 207, 127, 0.15), rgba(107, 207, 127, 0.25));
          border: 2px solid rgba(107, 207, 127, 0.4);
          border-radius: 15px;
          padding: 20px;
          margin: 20px 0;
          text-align: center;
          backdrop-filter: blur(10px);
          color: var(--success-color);
          font-size: 1.2rem;
          font-weight: bold;
          box-shadow: 0 5px 15px rgba(107, 207, 127, 0.3);
          position: relative;
          overflow: hidden;
          display: none;
        }

        .correct-answer::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          animation: correctAnswerShine 2s infinite;
        }

        @keyframes correctAnswerShine {
          0% { left: -100%; }
          100% { left: 100%; }
        }

        .correct-answer-content h3 {
          margin: 0 0 10px 0;
          color: var(--success-color);
          font-family: 'Lateef', cursive;
          font-size: 1.4rem;
          text-shadow: 0 0 10px rgba(107, 207, 127, 0.5);
        }

        .correct-answer-content p {
          margin: 0;
          font-size: 1.3rem;
          font-weight: bold;
          color: var(--text-color);
          text-shadow: 0 0 8px rgba(107, 207, 127, 0.3);
        }

        .hint-display::before {
          font-size: 0.8rem;
        }

        .correct-answer {
          font-size: 0.9rem;
          padding: 12px;
          margin: 12px 0;
          border-radius: 10px;
        }

        .correct-answer-content h3 {
          font-size: 1rem;
        }

        .correct-answer-content p {
          font-size: 0.9rem;
        }