:root {
    --primary-color: #7c3aed;
    --primary-light: #a855f7;
    --primary-dark: #4c1d95;
    --secondary-color: #c084fc;
    --accent-color: #f59e0b;
    /* إطار وسيلة اللوحة (مخاطرة / خطف الدور) — نفس أسلوب حبة الفئة بلون أحمر */
    --board-tool-pill-border: #ef4444;
    --wheel-pill-border-add: #22c55e;
    --wheel-pill-border-deduct: #ef4444;
    --text-light: #f5f3ff;
    --text-muted: #c4b5fd;
    --border-bright: rgba(168, 85, 247, 0.55);
    --bg-deep: #1a0a2e;
    --bg-mid: #22103a;
    --bg-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #c084fc 100%);
    /* مزامنة ارتفاع شريط المؤقت مع بانر «الدور على» */
    --q-sync-bar-py: clamp(8px, 1.2vw, 14px);
    --q-sync-bar-px: clamp(12px, 2vw, 22px);
    --q-sync-bar-radius: clamp(12px, 1.5vw, 18px);
    --q-sync-bar-timer-font: clamp(1.4rem, 2.2vw, 2.6rem);
    --q-sync-timer-inner-py: clamp(4px, 0.8vh, 8px);
    --q-sync-pill-fs: clamp(0.9rem, 1.3vw, 1.3rem);
    --q-sync-pill-py: clamp(4px, 0.6vh, 6px);
    --q-sync-btn-size: clamp(34px, 3.2vw, 48px);
    /* +6px تقريبًا لحدّ #timer (2px) ولـ line-height الخط */
    --q-sync-bar-row-h: max(
      var(--q-sync-btn-size),
      calc(2 * var(--q-sync-timer-inner-py) + 1.22 * var(--q-sync-bar-timer-font) + 6px),
      calc(2 * var(--q-sync-pill-py) + 1.4 * var(--q-sync-pill-fs))
    );
    --q-sync-bar-min-h: calc(2 * var(--q-sync-bar-py) + var(--q-sync-bar-row-h));
    /* نفس حشوة البطاقة الرئيسية — عمود الفرق يأخذ نفس padding-top حتى يصطف البانر مع شريط المؤقت */
    --main-inner-pad: clamp(14px, 2.2vw, 28px);
  }

  * {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
  }

  html, body {
    height: 100%;
    width: 100%;
    font-family: 'Cairo', sans-serif;
    background:
      radial-gradient(1200px 700px at 85% -10%, rgba(168, 85, 247, 0.2), transparent 60%),
      radial-gradient(1000px 600px at 0% 100%, rgba(245, 158, 11, 0.12), transparent 65%),
      linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-mid) 45%, #2b0e46 100%);
    color: white;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    overflow: hidden;
  }

  #particles-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .container {
    position: relative;
    width: min(1900px, 100vw - 20px);
    height: calc(100vh - 20px);
    max-height: 100vh;
    background: linear-gradient(145deg, rgba(45, 26, 74, 0.88), rgba(34, 16, 58, 0.82));
    border-radius: clamp(14px, 2vw, 22px);
    display: grid;
    grid-template-columns: clamp(170px, 16vw, 280px) 1fr;
    grid-template-rows: auto 1fr auto;
    gap: clamp(12px, 1.6vw, 22px);
    padding: clamp(12px, 2vw, 24px);
    box-shadow: 0 18px 44px rgba(0,0,0,0.45), 0 0 30px rgba(124,58,237,0.18);
    border: 1.5px solid var(--border-bright);
    backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .teams-column {
    background: transparent;
    border-radius: 0;
    padding: var(--main-inner-pad) 0 0 0;
    margin: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: clamp(12px, 1.8vh, 20px);
    overflow-y: auto;
    grid-column: 1;
    grid-row: 1 / 4;
  }

  /* البطاقات تبقى في منتصف المساحة تحت خانة الدور */
  .teams-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    align-items: stretch;
    gap: 35px;
    width: 100%;
  }

  /* أعلى عمود الفرق: الدور على: اسم الفريق — نص في وسط الخانة */
  .teams-turn-banner {
    flex-shrink: 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--q-sync-bar-py) var(--q-sync-bar-px);
    min-height: var(--q-sync-bar-min-h);
    border-radius: var(--q-sync-bar-radius);
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.96), rgba(42, 11, 75, 0.98));
    border: 1px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    text-align: center;
    user-select: none;
  }

  .teams-turn-banner__text {
    font-size: clamp(0.82rem, 1.1vw, 1.02rem);
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-light);
    word-break: break-word;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }

  .teams-turn-banner__highlight {
    color: var(--accent-color);
    font-weight: 800;
  }

  .team-block {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 15px;
    transition: all 0.3s ease;
    container-type: inline-size;
    container-name: teamcard;
  }

  .team-block-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .team-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  }

  /* الصورة أوّلاً في الصف الداخلي؛ مع dir=rtl تكون يمين البطاقة */
  .team-block-photo {
    flex-shrink: 0;
  }

  .team-block-avatar {
    display: block;
    width: clamp(40px, 5.5vw, 58px);
    height: clamp(40px, 5.5vw, 58px);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(168, 85, 247, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    background: rgba(76, 29, 149, 0.35);
  }

  .team-block-body {
    flex: 1;
    min-width: 0;
  }

  .team-name {
    font-size: 1.6em;
    font-weight: 700;
    user-select: text;
    color: var(--text-light);
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .help-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 1.4vw, 18px);
    margin-top: 15px;
  }

  .help-icon {
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-gradient);
    color: white;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
  }

  .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."] {
    background: var(--bg-gradient);
    font-size: 0;
  }

  .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 6v3l4-4-4-4v3c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6z'/%3E%3C/svg%3E");
    background-size: contain;
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

  .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]:hover::before {
    transform: rotate(180deg);
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
  }

  .help-icon.disabled {
    filter: grayscale(100%) opacity(0.5);
    cursor: not-allowed;
    background: rgba(189, 195, 199, 0.3);
  }

  .help-icon:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  }

  .help-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    right: 50%;
    transform: translateX(50%);
    background-color: rgba(0,0,0,0.9);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.9em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
  }

  /* بطاقة فريق ضيقة: صورة بحجمها — النص والمساعدات بعرض كامل تحتها */
  @supports (container-type: inline-size) {
    @container teamcard (max-width: 280px) {
      .team-block-inner {
        flex-direction: column;
        align-items: center;
        gap: clamp(8px, 3cqi, 14px);
      }

      .team-block-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .team-name {
        text-align: center;
        max-width: 100%;
        font-size: clamp(0.86rem, 6.2cqi + 0.4rem, 1.35rem);
      }

      .help-icons {
        width: 100%;
        margin-top: clamp(6px, 2.2cqi, 12px);
        gap: clamp(14px, 6cqi + 8px, 26px);
        justify-content: center;
      }

      .help-icon {
        width: 40px;
        height: 40px;
      }

      .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
        width: 24px;
        height: 24px;
      }

      .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
        width: 14px;
        height: 14px;
        grid-template-columns: repeat(2, 5px);
        grid-template-rows: repeat(2, 5px);
        gap: 1px;
      }
    }
  }

  @supports not (container-type: inline-size) {
    @media (min-width: 1001px) and (max-width: 1480px) {
      .team-block-inner {
        flex-direction: column;
        align-items: center;
      }

      .team-block-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .team-name {
        text-align: center;
        max-width: 100%;
        font-size: clamp(0.86rem, 0.52rem + 1.05vw, 1.32rem);
      }

      .help-icons {
        width: 100%;
        margin-top: 10px;
        gap: clamp(12px, 0.55rem + 0.95vw, 20px);
      }

      .help-icon {
        width: clamp(34px, 1.65vw + 26px, 40px);
        height: clamp(34px, 1.65vw + 26px, 40px);
        flex-shrink: 0;
      }
    }
  }

  .main-content {
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: clamp(14px, 2vw, 22px);
    padding: var(--main-inner-pad);
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--secondary-color);
    overflow: hidden;
    min-height: 0;
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .timer-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 20px);
    font-size: var(--q-sync-bar-timer-font);
    font-weight: 900;
    user-select: none;
    background: rgba(106, 13, 173, 0.7);
    border-radius: var(--q-sync-bar-radius);
    padding: var(--q-sync-bar-py) var(--q-sync-bar-px);
    min-height: var(--q-sync-bar-min-h);
    margin-bottom: clamp(4px, 0.9vh, 12px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    position: relative;
  }

  /* نتيجة العجلة تُعرض الآن في #questionBoardToolBadge — إبقاء العنصر للتوافق دون أخذ مساحة */
  .question-wheel-effect-banner {
    display: none !important;
  }

  .timer-category {
    justify-self: start;
  }

  .timer-points {
    justify-self: end;
  }

  .timer-category {
    font-size: var(--q-sync-pill-fs);
    font-weight: 700;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--q-sync-pill-py) clamp(8px, 1.2vw, 14px);
    border-radius: 20px;
    border: 1px solid var(--secondary-color);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .timer-points {
    font-size: var(--q-sync-pill-fs);
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--q-sync-pill-py) clamp(8px, 1.2vw, 14px);
    border-radius: 20px;
    border: 1px solid var(--accent-color);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .timer-controls {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-self: center;
  }
  
  .timer-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: clamp(34px, 3.2vw, 48px);
    height: clamp(34px, 3.2vw, 48px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: clamp(1rem, 1.3vw, 1.4rem);
  }
  
  .timer-btn:hover {
    background: var(--primary-light);
    transform: scale(1.1);
  }

  #timer {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    min-width: clamp(68px, 7vw, 110px);
    text-align: center;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--q-sync-timer-inner-py) clamp(10px, 1.6vw, 18px);
    border-radius: 30px;
    border: 2px solid var(--secondary-color);
  }

  .question-text {
    font-size: clamp(1.15rem, 2vw, 2.2rem);
    font-weight: 700;
    text-align: center;
    margin: clamp(2px, 0.4vh, 8px) 0;
    color: var(--text-light);
    line-height: 1.4;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(3px, 0.45vh, 8px);
    padding: clamp(6px, 1.2vw, 16px);
    padding-bottom: clamp(2px, 0.35vh, 5px);
    overflow: hidden;
    min-height: 0;
  }

  .question-text-content {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    margin-bottom: 0;
    font-weight: bold;
    color: #e1bee7;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  /* يملأ المساحة بين نص السؤال وأسفل البطاقة؛ الصورة تتكيف بـ max-height:100% بدون scroll */
  .question-visual-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    align-self: stretch;
  }

  /* شارة دور الفريق: زاوية أسفل يسار المنطقة الرئيسية */
  .question-turn-status-img {
    position: absolute;
    bottom: clamp(10px, 1.8vh, 22px);
    left: clamp(10px, 1.8vw, 22px);
    z-index: 5;
    max-height: clamp(110px, 22vh, 260px);
    max-width: clamp(200px, 40vw, 440px);
    width: auto;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    display: block;
  }

  .question-turn-status-img.changed {
    animation: statusImagePulse 0.45s ease 3;
  }

  @keyframes statusImagePulse {
    0% {
      transform: scale(0.88);
      opacity: 0.7;
    }
    55% {
      transform: scale(1.12);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* وسيلة اللوحة (مخاطرة / خطف الدور) — نفس شكل حبة اسم الفئة (.timer-category) بإطار أحمر */
  .question-board-tool-badge {
    position: absolute;
    bottom: clamp(10px, 1.8vh, 22px);
    right: clamp(10px, 1.8vw, 22px);
    z-index: 5;
    max-width: min(46vw, 280px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--q-sync-pill-fs);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.3);
    padding: var(--q-sync-pill-py) clamp(8px, 1.2vw, 14px);
    border-radius: 20px;
    border: 1px solid var(--board-tool-pill-border);
    box-shadow: none;
    pointer-events: none;
    user-select: none;
  }

  .question-board-tool-badge[hidden] {
    display: none !important;
  }

  /* نتيجة عجلة الحظ: إطار أخضر للإضافة، أحمر للخصم، بنفسجي لباقي الشرائح */
  .question-board-tool-badge.question-board-tool-badge--wheel-effect {
    box-shadow: none;
  }

  .question-board-tool-badge.question-board-tool-badge--wheel-effect.question-board-tool-badge--wheel-add {
    border-color: var(--wheel-pill-border-add);
  }

  .question-board-tool-badge.question-board-tool-badge--wheel-effect.question-board-tool-badge--wheel-deduct {
    border-color: var(--wheel-pill-border-deduct);
  }

  .question-board-tool-badge.question-board-tool-badge--wheel-effect.question-board-tool-badge--wheel-neutral {
    border-color: var(--secondary-color);
  }

  .question-image {
    box-sizing: border-box;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
    border: 2px solid #6a0dad;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease, max-height 0.3s ease;
    flex-shrink: 1;
    min-height: 0;
  }

  .question-visual-row .question-video {
    box-sizing: border-box;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
    border: 2px solid #6a0dad;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    flex-shrink: 1;
    min-height: 0;
    background: #000;
  }

  .question-visual-row .question-audio {
    box-sizing: border-box;
    width: 100%;
    max-width: min(98%, 480px);
    margin: 0 auto;
    display: block;
  }

  .question-charade-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: min(98%, 360px);
    margin: 0 auto;
    flex-shrink: 1;
    min-height: 0;
  }

  .question-text.question-text--charade {
    gap: clamp(2px, 0.35vh, 6px);
    padding-top: clamp(4px, 0.8vw, 12px);
    padding-bottom: clamp(2px, 0.25vh, 4px);
  }

  /* فئتا «ولا كلمة»: مساحة محدودة بين النص والزر — بدون scroll؛ حجم الرمز من الحاوية (cqmin) */
  .question-visual-row--charade {
    flex: 1 1 0;
    min-height: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: clamp(2px, 0.35vh, 6px) 0;
  }

  @supports (container-type: size) {
    .question-visual-row--charade {
      container-type: size;
    }
  }

  .question-visual-row--charade .question-charade-wrap {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    max-width: min(98%, 360px);
    margin: 0 auto;
    justify-content: center;
    gap: 0;
  }

  .question-charade-qr-host {
    padding: clamp(6px, 1vw, 10px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    line-height: 0;
    flex-shrink: 1;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
  }

  /* احتياط للمتصفحات بدون container queries */
  .question-visual-row--charade .question-charade-qr-host {
    width: min(220px, calc(100vw - 140px), 28vmin, 30vh);
    height: min(220px, calc(100vw - 140px), 28vmin, 30vh);
  }

  @supports (container-type: size) {
    .question-visual-row--charade .question-charade-qr-host {
      width: min(220px, 100cqmin);
      height: min(220px, 100cqmin);
    }
  }

  .question-charade-qr-host img,
  .question-charade-qr-host canvas {
    display: block;
    margin: 0 auto;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .question-charade-fallback-link {
    color: #fbbf24;
    font-weight: 700;
    word-break: break-all;
  }

  .image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2vw, 28px);
  }

  .image-lightbox.open {
    display: flex;
  }

  .image-lightbox-img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 12px;
    border: 3px solid var(--primary-light);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.75);
    object-fit: contain;
  }

  .image-lightbox-img.country-upscaled {
    width: clamp(440px, 78vw, 1200px);
    max-width: 96vw;
    max-height: 92vh;
  }

  /* تكبير موحّد لصورة اللايتبوكس: كل الفئات ما عدا «ما هي الدولة» و«اعلام» */
  .image-lightbox-img.lightbox-large-upscaled {
    width: clamp(480px, 88vw, 1400px);
    max-width: 98vw;
    max-height: 94vh;
  }

  .first-letter {
    font-size: clamp(1.3rem, 2vw, 2.2rem);
    font-weight: 700;
    color: var(--accent-color);
    text-align: center;
    margin: clamp(0px, 0.25vh, 4px) 0;
    user-select: none;
    min-height: clamp(14px, 2vh, 28px);
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }

  .first-letter:empty {
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  /* الخيارات: وسط البطاقة عند العرض، الطرف عند إخفاء الجسم — عمودان × صفّان */
  .choices-aside {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    transition: top 0.28s ease, bottom 0.28s ease, left 0.28s ease, right 0.28s ease,
      transform 0.28s ease, width 0.28s ease, max-width 0.28s ease, min-width 0.28s ease;
  }

  .choices-aside.choices-aside--center {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 24px), clamp(260px, 78vw, 480px));
    max-width: min(calc(100% - 24px), clamp(260px, 78vw, 480px));
    min-width: 0;
  }

  .choices-aside.choices-aside--corner {
    top: auto;
    bottom: clamp(6px, 1vh, 12px);
    left: auto;
    right: clamp(6px, 1vw, 14px);
    transform: none;
    width: auto;
    min-width: min(100%, 160px);
    max-width: min(calc(100% - 16px), clamp(200px, 52vw, 300px));
  }

  .choices-aside.choices-aside--corner .choices-container {
    padding: clamp(6px, 1vh, 10px) clamp(8px, 1.2vw, 12px);
    max-height: none;
    overflow-y: visible;
  }

  .choices-aside .choices-container {
    pointer-events: auto;
  }

  .bottom-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    padding-top: clamp(0px, 0.35vh, 6px);
    flex-shrink: 0;
  }

  #showAnswerBtn {
    background: var(--bg-gradient);
    border: none;
    border-radius: 30px;
    color: white;
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    padding: clamp(10px, 1.4vh, 16px) clamp(18px, 3vw, 48px);
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    min-width: clamp(180px, 18vw, 320px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    border: 2px solid var(--secondary-color);
  }

  #showAnswerBtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  }

  .choices-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    max-height: min(46vh, 340px, calc(100vh - 5rem));
    padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.6vw, 16px);
    margin: 0;
    background-color: rgba(44, 62, 80, 0.95);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
    z-index: 5;
    display: none;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid var(--primary-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .choices-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  .choices-container--body-hidden .choices-header {
    margin-bottom: 0;
  }

  .choices-toggle-visibility-btn {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.45);
    color: #f5f3ff;
    font-family: inherit;
    font-size: clamp(0.78rem, 0.85rem + 0.35vw, 0.98rem);
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    text-align: center;
    line-height: 1.35;
  }

  .choices-toggle-visibility-btn:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: var(--primary-light);
  }

  .choices-container--body-hidden .choices-body {
    display: none !important;
  }

  .choices-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .choice-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: clamp(8px, 1.1vh, 12px) clamp(10px, 1.8vw, 14px);
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.12rem);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.35;
    background: var(--bg-gradient);
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 15px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  }

  .choice-btn:hover:not(:disabled) {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
  }

  .choice-btn:disabled {
    background: rgba(149, 165, 166, 0.5);
    cursor: not-allowed;
  }

  .bottom-buttons {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
  }

  ::-webkit-scrollbar {
    width: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(33, 33, 33, 0.5);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
  }

  /* مثل المقاسات الأكبر: عمودان (الفرق فقط ضبط عرض العمود الأول والمسافات) */
  @media (max-width: 1200px) {
    .container {
      grid-template-columns: clamp(175px, 17vw, 265px) 1fr;
      grid-template-rows: auto 1fr auto;
      gap: clamp(10px, 1.4vw, 18px);
      padding: clamp(12px, 1.8vw, 22px);
    }

    .teams-column {
      flex-direction: column;
      overflow-x: visible;
      overflow-y: auto;
      padding: var(--main-inner-pad) 0 0 0;
      gap: clamp(11px, 1.5vh, 16px);
    }

    .teams-list {
      gap: clamp(16px, 2.4vh, 22px);
    }

    .teams-turn-banner__text {
      font-size: 0.86rem;
    }

    .team-block {
      min-width: 0;
      padding: clamp(11px, 1.2vw, 14px);
    }

    .team-name {
      font-size: 1.45em;
    }

    .help-icons {
      gap: 12px;
      margin-top: 12px;
    }
  }

  /* ≤1000px: مقسوم لثلاثة استعلامات (1000 / 900 / 800) — القاعدة الكاملة تبقى عند ≤1000px عبر التراكب */
  @media (max-width: 1000px) {
    :root {
      --q-sync-bar-py: clamp(4px, 0.6vw, 6px);
      --q-sync-bar-px: clamp(6px, 1.2vw, 10px);
      --q-sync-pill-fs: clamp(0.7rem, 1vw, 1rem);
      --q-sync-pill-py: clamp(2px, 0.4vh, 4px);
      --main-inner-pad: clamp(4px, 0.8vw, 8px);
    }

    .container {
      grid-template-columns: clamp(175px, 18vw, 220px) 1fr !important;
      gap: 8px !important;
    }

    .main-content {
      padding: var(--main-inner-pad) !important;
    }

    .timer-bar {
      margin-bottom: clamp(1px, 0.2vh, 2px) !important;
      padding: var(--q-sync-bar-py) var(--q-sync-bar-px) !important;
    }

    .timer-category,
    .timer-points {
      font-size: var(--q-sync-pill-fs) !important;
      padding: var(--q-sync-pill-py) clamp(4px, 0.8vw, 8px) !important;
    }

    .question-text {
      padding: clamp(3px, 0.8vw, 8px) !important;
      margin: clamp(1px, 0.2vh, 2px) 0 !important;
    }

    .question-text-content {
      margin-bottom: clamp(1px, 0.2vh, 2px) !important;
    }

    .question-turn-status-img {
      bottom: clamp(6px, 1.2vh, 14px) !important;
      left: clamp(6px, 1.2vw, 12px) !important;
      max-height: clamp(120px, 24vh, 260px) !important;
      max-width: clamp(220px, 48vw, 440px) !important;
    }

    .question-board-tool-badge {
      bottom: clamp(6px, 1.2vh, 14px) !important;
      right: clamp(6px, 1.2vw, 12px) !important;
      max-width: min(50vw, 240px) !important;
      font-size: var(--q-sync-pill-fs) !important;
      padding: var(--q-sync-pill-py) clamp(4px, 0.8vw, 8px) !important;
      border-radius: 20px !important;
    }

    .question-image,
    .question-visual-row .question-video {
      margin: 0 auto !important;
      max-width: min(98%, 560px) !important;
      max-height: 100% !important;
    }

    .first-letter {
      margin: clamp(1px, 0.2vh, 2px) 0 !important;
      min-height: clamp(12px, 2vh, 20px) !important;
    }

    .bottom-actions {
      padding-top: clamp(1px, 0.2vh, 2px) !important;
      margin-top: 0 !important;
    }

    .team-name {
      font-size: 1.72em !important;
    }

    /* عمود ضيق: صورة ثم الاسم ثم المساعدات بعرض كامل — الأيقونات بسطر واحد */
    .team-block-inner {
      flex-direction: column !important;
      align-items: center !important;
    }

    .team-block-body {
      width: 100% !important;
    }

    .teams-turn-banner__text {
      font-size: 0.93rem !important;
    }

    .help-icons {
      gap: clamp(4px, 1.2vw, 17px) !important;
      margin-top: 17px !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
    }

    .help-icon {
      width: 42px !important;
      height: 42px !important;
      flex-shrink: 0 !important;
    }

    .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
      width: 26px !important;
      height: 26px !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
      width: 15px !important;
      height: 15px !important;
      grid-template-columns: repeat(2, 6px) !important;
      grid-template-rows: repeat(2, 6px) !important;
      gap: 1px !important;
      margin: auto !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div > div {
      border-radius: 1px !important;
    }
  }

  /* ≤900px: تخطيط الفرق على كل الشاشات حتى الضيقة (تحت 800px لا يُغيَّر max-width:800px) */
  @media (max-width: 900px) {
    .teams-column {
      flex-direction: column !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      padding: var(--main-inner-pad) 0 0 0 !important;
      gap: 7px !important;
      width: 100% !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .teams-list {
      gap: 8px !important;
    }

    .teams-turn-banner__text {
      font-size: 0.74rem !important;
    }

    .team-block {
      min-width: auto !important;
      width: 100% !important;
      padding: 6px !important;
      border-radius: 8px !important;
    }

    .team-block-inner {
      gap: 6px !important;
    }

    .team-block-avatar {
      width: 34px !important;
      height: 34px !important;
      border-width: 1px !important;
    }

    .team-name {
      font-size: 0.85em !important;
      line-height: 1.2 !important;
    }
  }

  /* 801px–900px فقط: عمود أعرض، صورة سؤال أكبر، وسائل مساعدة دائرية (لا تتداخل مع 800px) */
  @media (max-width: 900px) and (min-width: 801px) {
    .container {
      grid-template-columns: clamp(130px, 15vw, 152px) 1fr !important;
    }

    .question-image,
    .question-visual-row .question-video {
      margin: 0 auto !important;
      max-width: min(98%, 520px) !important;
      max-height: 100% !important;
    }

    .help-icons {
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      flex-wrap: nowrap !important;
    }

    .help-icon {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      aspect-ratio: 1 !important;
      border-radius: 50% !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }

    .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
      width: 20px !important;
      height: 20px !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
      width: 12px !important;
      height: 12px !important;
      grid-template-columns: repeat(2, 4.5px) !important;
      grid-template-rows: repeat(2, 4.5px) !important;
      gap: 1px !important;
      margin: auto !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div > div {
      border-radius: 1px !important;
    }
  }

  @media (max-width: 800px) {
    .container {
      grid-template-columns: 120px 1fr !important;
    }

    /* لا تكبير صورة السؤال تحت 800px (يُلغي حجم max-width:900px) */
    .question-image,
    .question-visual-row .question-video {
      margin: 0 auto !important;
      max-width: min(98%, 420px) !important;
      max-height: 100% !important;
    }

    .help-icons {
      gap: 6px !important;
      margin-top: 6px !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
    }

    .help-icon {
      width: 26px !important;
      height: 26px !important;
      font-size: 0.75em !important;
      flex-shrink: 0 !important;
    }

    .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
      width: 14px !important;
      height: 14px !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
      width: 14px !important;
      height: 14px !important;
      grid-template-columns: repeat(2, 5px) !important;
      grid-template-rows: repeat(2, 5px) !important;
      gap: 1px !important;
      margin: auto !important;
    }

    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div > div {
      border-radius: 1px !important;
    }
  }

  /* بين 801px و1000px: تخطيط عمود الفرق فقط — أحجام الأسماء والمساعدة من max-width:1000px (لا تعديل في 900/800) */
  @media (min-width: 801px) and (max-width: 1000px) {
    .teams-column {
      flex-direction: column !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      padding: var(--main-inner-pad) 0 0 0 !important;
      gap: 7px !important;
      width: 100% !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .teams-list {
      gap: 8px !important;
    }

    .team-block {
      min-width: auto !important;
      width: 100% !important;
      padding: 6px !important;
      border-radius: 8px !important;
    }

    .team-block-inner {
      gap: 6px !important;
    }

    .team-block-avatar {
      width: 34px !important;
      height: 34px !important;
      border-width: 1px !important;
    }
  }

  @media (max-width: 768px) {
    :root {
      --q-sync-bar-py: clamp(3px, 0.5vw, 5px);
      --q-sync-bar-px: clamp(5px, 1vw, 8px);
      --q-sync-pill-fs: clamp(0.65rem, 0.9vw, 0.9rem);
      --q-sync-pill-py: clamp(2px, 0.3vh, 3px);
      --main-inner-pad: clamp(3px, 0.6vw, 6px);
    }

    .container {
      width: 100vw;
      height: 100vh;
      max-height: 100vh;
      border-radius: 0;
      padding: 8px;
      grid-template-columns: clamp(112px, 18vw, 132px) 1fr !important;
      gap: 6px !important;
    }
    
    .main-content {
      padding: var(--main-inner-pad) !important;
    }
    
    .timer-bar {
      margin-bottom: clamp(1px, 0.15vh, 1.5px) !important;
      padding: var(--q-sync-bar-py) var(--q-sync-bar-px) !important;
    }
    
    .timer-category,
    .timer-points {
      font-size: var(--q-sync-pill-fs) !important;
      padding: var(--q-sync-pill-py) clamp(3px, 0.6vw, 6px) !important;
    }
    
    .question-text {
      padding: clamp(2px, 0.6vw, 6px) !important;
      margin: clamp(1px, 0.15vh, 1.5px) 0 !important;
    }
    
    .question-text-content {
      margin-bottom: clamp(1px, 0.15vh, 1.5px) !important;
    }

    .question-turn-status-img {
      bottom: clamp(4px, 1vh, 10px) !important;
      left: clamp(4px, 1vw, 8px) !important;
      max-height: clamp(115px, 26vh, 240px) !important;
      max-width: clamp(210px, 65vw, 400px) !important;
    }

    .question-board-tool-badge {
      bottom: clamp(4px, 1vh, 10px) !important;
      right: clamp(4px, 1vw, 8px) !important;
      max-width: min(56vw, 220px) !important;
      font-size: var(--q-sync-pill-fs) !important;
      padding: var(--q-sync-pill-py) clamp(3px, 0.6vw, 6px) !important;
      border-radius: 20px !important;
    }
    
    .question-image,
    .question-visual-row .question-video {
      margin: 0 auto !important;
      max-width: min(98%, 340px) !important;
      max-height: 100% !important;
    }
    
    .first-letter {
      margin: clamp(0.5px, 0.1vh, 1px) 0 !important;
      min-height: clamp(10px, 1.5vh, 16px) !important;
    }
    
    .bottom-actions {
      padding-top: clamp(1px, 0.15vh, 1.5px) !important;
      margin-top: 0 !important;
    }
    
    .teams-column {
      flex-direction: column !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      padding: var(--main-inner-pad) 0 0 0 !important;
      gap: 5px !important;
      width: 100% !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .teams-list {
      gap: 6px !important;
    }

    .teams-turn-banner__text {
      font-size: 0.64rem !important;
    }
    
    .team-block {
      min-width: auto !important;
      width: 100% !important;
      padding: 5px !important;
      border-radius: 6px !important;
    }

    .team-block-inner {
      gap: 4px !important;
    }

    .team-block-avatar {
      width: 28px !important;
      height: 28px !important;
      border-width: 1px !important;
    }
    
    .team-name {
      font-size: 0.75em !important;
      line-height: 1.2 !important;
    }
    
    .help-icons {
      gap: 5px !important;
      margin-top: 5px !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
    }
    
    .help-icon {
      width: 24px !important;
      height: 24px !important;
      font-size: 0.7em !important;
      flex-shrink: 0 !important;
    }
    
    .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
      width: 12px !important;
      height: 12px !important;
    }
    
    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
      width: 12px !important;
      height: 12px !important;
      grid-template-columns: repeat(2, 4px) !important;
      grid-template-rows: repeat(2, 4px) !important;
      gap: 1px !important;
      margin: auto !important;
    }
    
    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div > div {
      border-radius: 1px !important;
    }
  }

  /* iPad والأجهزة اللوحية — بدون حد أدنى كبير لارتفاع اللوحة (لا يغطي الشاشة القصيرة) */
  @media (min-width: 481px) and (max-width: 1024px) {
    .choices-aside.choices-aside--center {
      top: 50%;
      bottom: auto;
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
      width: min(calc(100% - 20px), clamp(280px, 82vw, 460px));
      max-width: min(calc(100% - 20px), clamp(280px, 82vw, 460px));
    }

    .choices-aside.choices-aside--corner {
      top: auto;
      bottom: clamp(6px, 1.2vh, 14px);
      left: auto;
      right: clamp(6px, 1.5vw, 14px);
      transform: none;
      width: auto;
      max-width: min(calc(100% - 14px), clamp(190px, 58vw, 280px));
    }

    .choices-container {
      max-height: min(40vh, 360px, calc(100vh - 5.5rem));
      padding: 10px 12px;
      border-radius: 14px;
    }

    .choices-header {
      margin-bottom: 8px;
      gap: 8px;
    }

    .choices-toggle-visibility-btn {
      font-size: clamp(0.8rem, 1.7vw, 0.98rem);
      padding: 8px 12px;
      min-height: 40px;
      border-radius: 12px;
    }

    .choices-body {
      gap: 8px;
    }

    .choice-btn {
      padding: clamp(7px, 1.3vh, 12px) clamp(10px, 2vw, 14px);
      font-size: clamp(0.88rem, 2.1vw, 1.05rem);
      min-height: 40px;
      border-radius: 12px;
    }
  }

  /* أفقي الجوال والارتفاعات المنخفضة (مثل 764×342) */
  @media (max-width: 1024px) and (max-height: 460px) {
    .choices-aside.choices-aside--center {
      top: 50%;
      bottom: auto;
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
      width: min(calc(100% - 12px), clamp(220px, 88vw, 400px));
      max-width: min(calc(100% - 12px), clamp(220px, 88vw, 400px));
    }

    .choices-aside.choices-aside--corner {
      top: auto;
      bottom: max(4px, env(safe-area-inset-bottom, 0px));
      left: auto;
      right: 6px;
      transform: none;
      width: auto;
      max-width: min(calc(100% - 10px), 220px);
    }

    .choices-container {
      max-height: min(38vh, calc(100vh - 4.5rem), 200px);
      padding: 6px 8px;
      border-radius: 12px;
    }

    .choices-header {
      margin-bottom: 4px;
      gap: 6px;
    }

    .choices-toggle-visibility-btn {
      font-size: clamp(0.68rem, 2vw, 0.82rem);
      padding: 4px 8px;
      min-height: 32px;
      border-radius: 10px;
    }

    .choices-body {
      gap: 4px;
    }

    .choice-btn {
      padding: 4px 8px;
      font-size: clamp(0.7rem, 2.2vw, 0.86rem);
      min-height: 32px;
      border-radius: 10px;
      line-height: 1.25;
    }
  }

  @media (max-width: 480px) {
    :root {
      --q-sync-bar-py: clamp(2px, 0.4vw, 4px);
      --q-sync-bar-px: clamp(4px, 0.8vw, 6px);
      --q-sync-pill-fs: clamp(0.6rem, 0.8vw, 0.8rem);
      --q-sync-pill-py: clamp(1px, 0.2vh, 2px);
      --main-inner-pad: clamp(2px, 0.4vw, 4px);
    }

    .container {
      padding: 6px;
      grid-template-columns: 90px 1fr !important;
      gap: 4px !important;
    }
    
    .main-content {
      padding: var(--main-inner-pad) !important;
    }
    
    .timer-bar {
      margin-bottom: clamp(0.5px, 0.1vh, 1px) !important;
      padding: var(--q-sync-bar-py) var(--q-sync-bar-px) !important;
    }
    
    .timer-category,
    .timer-points {
      font-size: var(--q-sync-pill-fs) !important;
      padding: var(--q-sync-pill-py) clamp(2px, 0.4vw, 4px) !important;
    }
    
    .question-text {
      padding: clamp(1px, 0.4vw, 4px) !important;
      margin: clamp(0.5px, 0.1vh, 1px) 0 !important;
    }
    
    .question-text-content {
      margin-bottom: clamp(0.5px, 0.1vh, 1px) !important;
    }
    
    .question-image,
    .question-visual-row .question-video {
      margin: 0 auto !important;
      max-width: min(98%, 300px) !important;
      max-height: 100% !important;
    }
    
    .first-letter {
      margin: clamp(0px, 0vh, 0px) 0 !important;
      min-height: clamp(8px, 1vh, 12px) !important;
    }
    
    .bottom-actions {
      padding-top: clamp(0.5px, 0.1vh, 1px) !important;
      margin-top: auto !important;
    }
    
    .teams-column {
      flex-direction: column !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      padding: var(--main-inner-pad) 0 0 0 !important;
      gap: 4px !important;
      width: 100% !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }

    .teams-list {
      gap: 5px !important;
    }

    .teams-turn-banner__text {
      font-size: 0.6rem !important;
    }
    
    .team-block {
      min-width: auto !important;
      width: 100% !important;
      padding: 4px !important;
      border-radius: 5px !important;
    }

    .team-block-inner {
      gap: 3px !important;
    }

    .team-block-avatar {
      width: 24px !important;
      height: 24px !important;
      border-width: 1px !important;
    }
    
    .team-name {
      font-size: 0.7em !important;
      line-height: 1.1 !important;
    }
    
    .help-icons {
      gap: 4px !important;
      margin-top: 4px !important;
      flex-wrap: nowrap !important;
      justify-content: center !important;
    }
    
    .help-icon {
      width: 22px !important;
      height: 22px !important;
      font-size: 0.65em !important;
      flex-shrink: 0 !important;
    }

    .help-icon[data-tooltip="تغيير السؤال: اطلب سؤال جديد بدل هذا."]::before {
      width: 11px !important;
      height: 11px !important;
    }
    
    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div {
      width: 10px !important;
      height: 10px !important;
      grid-template-columns: repeat(2, 3.5px) !important;
      grid-template-rows: repeat(2, 3.5px) !important;
      gap: 0.5px !important;
      margin: auto !important;
    }
    
    .help-icon[data-tooltip="أربع خيارات: اختر من بين 4 أجوبة."] > div > div {
      border-radius: 1px !important;
    }
    
    .choices-aside.choices-aside--center {
      top: 50%;
      bottom: auto;
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
      width: min(calc(100% - 10px), 100%);
      max-width: min(calc(100% - 10px), 420px);
    }

    .choices-aside.choices-aside--corner {
      top: auto;
      bottom: max(6px, env(safe-area-inset-bottom, 0px));
      left: auto;
      right: 6px;
      transform: none;
      width: auto;
      max-width: min(calc(100% - 8px), 260px);
    }

    .choices-container {
      max-height: min(44vh, 300px, calc(100vh - 4.5rem));
      padding: 8px 10px;
      border-radius: 12px;
    }

    .choices-header {
      margin-bottom: 6px !important;
      gap: 6px !important;
    }

    .choices-toggle-visibility-btn {
      font-size: clamp(0.78rem, 3.2vw, 0.92rem) !important;
      padding: 6px 10px !important;
      min-height: 40px;
      border-radius: 10px !important;
    }

    .choices-body {
      gap: 6px !important;
    }

    .choice-btn {
      padding: 8px 10px !important;
      font-size: clamp(0.85rem, 3.2vw, 0.98rem) !important;
      min-height: 40px;
      border-radius: 12px !important;
    }
  }

  /* شاشات عريضة متوسطة (مثل 1366×768) — أوضح من الأساس دون بلوك 1440 */
  @media (min-width: 1200px) and (max-width: 1439px) {
    .choices-aside.choices-aside--center {
      width: min(calc(100% - 32px), clamp(300px, 54vw, 540px));
      max-width: min(calc(100% - 32px), clamp(300px, 54vw, 540px));
    }

    .choices-container {
      max-height: min(50vh, 400px, calc(100vh - 5rem));
      padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.8vw, 20px);
    }

    .choice-btn {
      font-size: clamp(1rem, 0.5vw + 0.88rem, 1.22rem);
      padding: clamp(10px, 1.3vh, 14px) clamp(12px, 1.8vw, 18px);
      min-height: 48px;
    }
  }

  @media (min-width: 1440px) {
    :root {
      --q-sync-bar-py: clamp(12px, 1.5vh, 18px);
      --q-sync-bar-px: clamp(20px, 3vw, 32px);
      --q-sync-bar-timer-font: clamp(1.8rem, 2.4vw, 2.8rem);
      --q-sync-pill-fs: clamp(1.1rem, 1.5vw, 1.5rem);
      --q-sync-pill-py: clamp(6px, 0.8vh, 8px);
    }

    .container {
      width: min(96vw, 1900px);
    }

    .timer-bar {
      font-size: var(--q-sync-bar-timer-font);
      padding: var(--q-sync-bar-py) var(--q-sync-bar-px);
    }

    .timer-category,
    .timer-points {
      font-size: var(--q-sync-pill-fs);
      padding: var(--q-sync-pill-py) clamp(12px, 1.5vw, 18px);
    }

    .question-board-tool-badge {
      font-size: var(--q-sync-pill-fs);
      padding: var(--q-sync-pill-py) clamp(12px, 1.5vw, 18px);
    }

    .question-text {
      font-size: clamp(1.6rem, 2.3vw, 2.6rem);
      padding: clamp(16px, 2vh, 28px);
    }

    .question-text-content {
      font-size: clamp(1.3rem, 2vw, 2.1rem);
    }

    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 620px);
      max-height: 100%;
    }

    #showAnswerBtn {
      font-size: clamp(1.2rem, 1.6vw, 1.8rem);
      padding: clamp(14px, 2vh, 20px) clamp(26px, 3.2vw, 52px);
    }

    .choices-aside.choices-aside--center {
      width: min(calc(100% - 40px), clamp(360px, 52vw, 600px));
      max-width: min(calc(100% - 40px), clamp(360px, 52vw, 600px));
    }

    .choices-aside.choices-aside--corner {
      max-width: min(calc(100% - 24px), clamp(240px, 30vw, 360px));
    }

    .choices-container {
      max-height: min(52vh, 440px, calc(100vh - 5rem));
      padding: clamp(14px, 1.8vh, 20px) clamp(16px, 2vw, 22px);
      border-radius: 18px;
    }

    .choices-header {
      margin-bottom: 14px;
      gap: 10px;
    }

    .choices-toggle-visibility-btn {
      font-size: clamp(1rem, 1.1vw, 1.15rem);
      padding: 12px 16px;
      border-radius: 14px;
    }

    .choices-body {
      gap: 12px;
    }

    .choice-btn {
      padding: clamp(12px, 1.5vh, 16px) clamp(14px, 2vw, 20px);
      font-size: clamp(1.05rem, 1.05vw + 0.75rem, 1.35rem);
      border-radius: 16px;
      min-height: 52px;
    }
  }

  @media (min-width: 1600px) {
    .choices-aside.choices-aside--center {
      width: min(calc(100% - 48px), clamp(420px, 46vw, 680px));
      max-width: min(calc(100% - 48px), clamp(420px, 46vw, 680px));
    }

    .choices-container {
      max-height: min(54vh, 480px, calc(100vh - 5rem));
      padding: clamp(16px, 2vh, 24px) clamp(18px, 2.2vw, 26px);
    }

    .choices-toggle-visibility-btn {
      font-size: clamp(1.05rem, 1.15vw, 1.22rem);
      padding: 14px 18px;
    }

    .choices-body {
      gap: 14px;
    }

    .choice-btn {
      font-size: clamp(1.12rem, 1.1vw + 0.8rem, 1.45rem);
      padding: clamp(14px, 1.7vh, 18px) clamp(16px, 2.2vw, 22px);
      min-height: 56px;
    }
  }

  /* نفس الفكرة لشاشات أضيق/أقصر مثل 1575×703 */
  @media (min-width: 1440px) and (max-width: 1680px) and (max-height: 760px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 560px);
      max-height: 100%;
    }
  }

  /* وأضيق/أقصر مثل 1515×637 (لا يطابق 1575×703 لأن max-height أدنى) */
  @media (min-width: 1440px) and (max-width: 1540px) and (max-height: 660px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 520px);
      max-height: 100%;
    }
  }

  /* عرض أقل من 1440px مثل 1429×626 — البلوكات أعلاه لا تنطبق (min-width: 1440px) */
  @media (min-width: 1380px) and (max-width: 1439px) and (max-height: 640px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 480px);
      max-height: 100%;
    }
  }

  /* أضيق/أقصر مثل 1358×588 (تحت 1380px عرضًا حتى لا يتداخل مع الطبقة أعلاه) */
  @media (min-width: 1280px) and (max-width: 1379px) and (max-height: 600px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 440px);
      max-height: 100%;
    }
  }

  /* تحت 1280px عرضًا وارتفاع متوسط مثل 1260×563 (فوق 550px فلا تنطبق طبقة 1292×526) */
  @media (min-width: 1220px) and (max-width: 1279px) and (max-height: 590px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 400px);
      max-height: 100%;
    }
  }

  /* أقصر من طبقة 1358×588 مثل 1292×526 (يأتي بعدها فيزيد التحديد) */
  @media (min-width: 1240px) and (max-width: 1320px) and (max-height: 550px) {
    .question-image,
    .question-visual-row .question-video {
      max-width: min(100%, 380px);
      max-height: 100%;
    }
  }

/* فئة «أعلام» فقط: علم الدولة يملأ المساحة بين نص السؤال وزر عرض الإجابة (مع الحفاظ على النسبة) */
.question-text.question-text--aelan .question-visual-row {
  align-items: stretch !important;
}
.question-text.question-text--aelan .question-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* فئة Attack فقط: صورة السؤال تملأ الفراغ المتاح بين نص السؤال وزر عرض الإجابة */
.question-text.question-text--attack .question-visual-row {
  align-items: stretch !important;
}

.question-text.question-text--attack .question-image {
  width: min(100%, 820px) !important;
  height: 100% !important;
  max-width: min(100%, 820px) !important;
  max-height: 100% !important;
  object-fit: contain !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* فئة «من عينه»: صورة العيون تملأ المساحة الرأسية بين نص السؤال وزر عرض الإجابة */
.question-text.question-text--from-his-eyes .question-visual-row {
  align-items: stretch !important;
}

.question-text.question-text--from-his-eyes .question-image {
  width: min(100%, 920px) !important;
  height: 100% !important;
  max-width: min(100%, 920px) !important;
  max-height: 100% !important;
  object-fit: contain !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: none !important;
  box-shadow: none !important;
}

html.thannak-low-power .container,
html.thannak-low-power .team-card,
html.thannak-low-power .question-box {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}