/* VenueOS — Quiz styles */

    /* Quiz modal */
    :root {
      --quiz-cyan: #4dd0e1;
      --quiz-correct: #4ade80;
      --quiz-wrong: #f87171;
      --quiz-sage: #6b9470;
    }
    .quiz-modal-overlay { z-index: 2500; }
    body.dinner-mode .quiz-modal-overlay {
      background: linear-gradient(180deg, rgba(3,25,22,.98) 0%, rgba(0,0,0,.98) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .quiz-modal { position: relative; max-width: 420px; width: 100%; padding: 32px 24px; background: var(--modal-card, var(--card)); border-radius: 20px; border: 1px solid var(--border); }
    .quiz-modal.quiz-modal--set-it-right { max-width: 520px; }
    .quiz-modal .quiz-close { position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px; }
    .quiz-screen { text-align: center; }
    .quiz-title { font-family: 'Syne', sans-serif; font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin-bottom: 24px; }
    .quiz-subtitle { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
    /* Level selection */
    .quiz-game-options { display: grid; grid-template-columns: 1fr; gap: 12px; }
    @media (min-width: 769px) {
      .quiz-game-options { grid-template-columns: 1fr 1fr; }
      .quiz-modal { max-width: 520px; }
    }
    .quiz-game-opt {
      font-family: inherit; padding: 16px 20px; border-radius: 12px;
      border: 2px solid var(--accent); background: transparent; color: var(--text-primary);
      cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    }
    .quiz-game-opt:hover { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .quiz-game-opt-icon { font-size: 1.5rem; }
    .quiz-game-opt-title { font-weight: 700; font-size: 1.1rem; }
    .quiz-game-opt-desc { font-size: 0.85rem; opacity: 0.9; }
    .quiz-levels { display: flex; flex-direction: column; gap: 12px; }
    .quiz-lvl {
      font-family: inherit; font-size: 1.1rem; padding: 14px 24px; border-radius: 12px;
      border: 2px solid var(--accent); background: transparent; color: var(--text-primary);
      cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    }
    .quiz-lvl:hover { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .quiz-lvl:active { transform: translateY(0) scale(0.98); }
    .quiz-lvl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    .quiz-game-screen { position: relative; }
    /* Header, lives, progress */
    .quiz-header { margin-bottom: 24px; }
    .quiz-lives { display: flex; justify-content: center; gap: 8px; font-size: 1.25rem; margin-bottom: 12px; }
    .quiz-heart { display: inline-block; transition: transform 0.3s, opacity 0.3s; }
    .quiz-heart.dim { opacity: 0.25; transform: scale(0.7); }
    .quiz-heart.heartbeat { animation: quiz-heartbeat 1.2s ease-in-out infinite; }
    @keyframes quiz-heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
    .quiz-heart.losing { animation: quiz-heart-lose 0.4s ease-out forwards; }
    @keyframes quiz-heart-lose { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); } 100% { transform: scale(0.6); opacity: 0.2; } }
    .quiz-progress-wrap { height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
    .quiz-progress {
      height: 100%; width: 0; border-radius: 3px;
      background: linear-gradient(90deg, var(--quiz-sage), var(--brass-light));
      background-size: 200% 100%;
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 8px rgba(107,148,112,.4);
    }
    /* Question transition */
    .quiz-content-wrap { position: relative; overflow: hidden; min-height: 120px; }
    .quiz-q-block { transition: transform 0.35s ease, opacity 0.35s ease; }
    .quiz-q-block.slide-out { transform: translateX(-80%); opacity: 0; }
    .quiz-q-block.slide-in { animation: quiz-slide-in 0.35s ease-out forwards; }
    @keyframes quiz-slide-in { from { transform: translateX(80%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .quiz-question { font-family: 'Syne', sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin-bottom: 20px; line-height: 1.4; }
    .quiz-options { display: flex; flex-direction: column; gap: 10px; }
    .quiz-opt {
      font-family: inherit; font-size: 1rem; padding: 14px 20px; border-radius: 12px;
      border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.05); color: var(--text-primary);
      cursor: pointer; text-align: left; min-height: 48px; display: flex; align-items: center;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .quiz-opt:hover:not(.disabled) { background: rgba(77,208,225,.15); border-color: var(--quiz-cyan); }
    .quiz-opt:focus-visible { outline: 2px solid var(--quiz-cyan); outline-offset: 2px; }
    .quiz-opt.disabled { cursor: default; pointer-events: none; }
    .quiz-opt.correct {
      border-color: var(--quiz-correct); background: rgba(74,222,128,.25);
      animation: quiz-correct-pulse 0.6s ease-out;
      box-shadow: 0 0 20px rgba(74,222,128,.5);
    }
    .quiz-opt.wrong {
      border-color: var(--quiz-wrong); background: rgba(248,113,113,.25);
      animation: quiz-wrong-shake 0.5s ease-out;
      box-shadow: 0 0 15px rgba(248,113,113,.4);
    }
    .quiz-opt.reveal-correct { animation: quiz-correct-pulse 0.5s ease-out; }
    @keyframes quiz-correct-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70% { box-shadow: 0 0 0 12px rgba(74,222,128,0); } 100% { box-shadow: 0 0 20px rgba(74,222,128,.5); } }
    @keyframes quiz-wrong-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
    /* Sparkle for correct answer */
    .quiz-sparkle { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
    .quiz-sparkle.active { animation: quiz-sparkle-burst 0.8s ease-out forwards; }
    .quiz-sparkle .spark {
      position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
      background: var(--quiz-correct); border-radius: 50%; box-shadow: 0 0 8px var(--quiz-correct);
      animation: quiz-spark-fade 0.7s ease-out forwards;
    }
    @keyframes quiz-sparkle-burst { 0% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes quiz-spark-fade { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } }
    /* Challenge screen */
    .quiz-challenge-screen { background: rgba(0,0,0,.4); transition: background 0.3s; }
    .quiz-challenge-card {
      background: var(--modal-card, var(--card)); border-radius: 20px; padding: 28px 24px;
      border: 1px solid var(--border); box-shadow: 0 0 40px rgba(0,0,0,.3);
      transform: scale(0.5); opacity: 0;
    }
    .quiz-challenge-card.reveal {
      animation: quiz-challenge-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes quiz-challenge-reveal { to { transform: scale(1); opacity: 1; } }
    .quiz-challenge-ico { font-size: 3rem; margin-bottom: 16px; animation: quiz-emoji-bounce 0.6s ease-out 0.3s both; }
    @keyframes quiz-emoji-bounce { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 80% { transform: scale(0.95); } 100% { transform: scale(1); } }
    .quiz-challenge-txt { font-size: 1.25rem; color: var(--text-primary); margin-bottom: 24px; }
    .quiz-done-btn, .quiz-play-again {
      font-family: inherit; font-size: 1.1rem; padding: 14px 32px; border-radius: 12px; border: none;
      background: var(--quiz-cyan); color: #1a1a1a; font-weight: 600; cursor: pointer;
      min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
      transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
    }
    .quiz-done-btn:hover, .quiz-play-again:hover { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(77,208,225,.4); }
    .quiz-done-btn:focus-visible,
    .quiz-play-again:focus-visible { outline: 2px solid var(--quiz-cyan); outline-offset: 2px; }
    .quiz-play-again:focus-visible { animation: quiz-focus-pulse 1.5s ease-in-out; }
    @keyframes quiz-focus-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(77,208,225,.4); } 50% { box-shadow: 0 0 0 8px rgba(77,208,225,0); } }
    .quiz-challenge-screen { display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 200px; }
    /* End screen */
    #quiz-end { position: relative; }
    .quiz-end-celebration { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
    .quiz-end-celebration .confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; }
    .quiz-end-msg { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
    .quiz-end-msg.master { animation: quiz-badge-glow 2s ease-in-out; text-shadow: 0 0 20px rgba(184,150,78,.5); }
    @keyframes quiz-badge-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
    .quiz-end-score { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 24px; }

    /* Set It Right game (inside quiz modal) */
    .set-it-right-screen { text-align: center; display: block; }
    .set-it-right-title {
      font-family: 'Syne', sans-serif; font-size: 1.75rem; font-weight: 700;
      color: var(--text-primary); margin-bottom: 12px;
    }
    .set-it-right-subtitle {
      font-size: 0.95rem; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5;
    }
    .set-it-right-play-btn {
      font-family: inherit; font-size: 1.1rem; padding: 14px 32px; border-radius: 12px;
      border: 2px solid var(--quiz-sage); background: transparent; color: var(--text-primary);
      cursor: pointer; min-height: 48px; font-weight: 600;
      transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .set-it-right-play-btn:hover {
      background: var(--quiz-sage); color: #fff; transform: translateY(-1px);
    }
    .set-it-right-header {
      margin-bottom: 20px; text-align: left;
    }
    .set-it-right-score {
      font-size: 0.95rem; color: var(--text-muted); display: block; margin-bottom: 8px;
    }
    .set-it-right-progress {
      height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden;
    }
    .set-it-right-progress-bar {
      height: 100%; width: 0; border-radius: 3px;
      background: linear-gradient(90deg, var(--quiz-sage), var(--brass-light));
      transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .set-it-right-question {
      font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 600;
      color: var(--text-primary); margin-bottom: 16px; text-align: left; line-height: 1.4;
    }
    .set-it-right-drag-area {
      margin-bottom: 20px;
    }
    .set-it-right-pool {
      display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; min-height: 44px;
      padding: 12px; background: rgba(0,0,0,.2); border-radius: 12px;
    }
    .set-it-right-chip {
      padding: 10px 14px; border-radius: 10px; font-size: 0.9rem;
      border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
      color: var(--text-primary); cursor: grab; user-select: none;
      transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    }
    .set-it-right-chip:hover { background: rgba(107,148,112,.2); border-color: var(--quiz-sage); }
    .set-it-right-chip.dragging { opacity: 0.5; cursor: grabbing; }
    .set-it-right-chip:active { cursor: grabbing; }
    .set-it-right-table {
      width: 100%; border-collapse: collapse; font-size: 0.9rem;
    }
    .set-it-right-table th,
    .set-it-right-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.15); }
    .set-it-right-table th { color: var(--text-muted); font-weight: 600; }
    .set-it-right-slot-num { width: 40px; color: var(--text-muted); }
    .set-it-right-slot-drop {
      min-height: 48px; min-width: 200px;
      background: rgba(0,0,0,.2); border-radius: 8px; border: 2px dashed rgba(255,255,255,.2);
      transition: background 0.2s, border-color 0.2s;
    }
    .set-it-right-slot-drop.drag-over { background: rgba(107,148,112,.2); border-color: var(--quiz-sage); }
    .set-it-right-slot-drop.has-content { border-style: solid; border-color: rgba(255,255,255,.3); }
    .set-it-right-slot-drop.correct { border-color: var(--quiz-correct); background: rgba(74,222,128,.15); }
    .set-it-right-slot-drop.wrong { border-color: var(--quiz-wrong); background: rgba(248,113,113,.2); }
    .set-it-right-slot-drop .set-it-right-chip { margin: 0; }
    .set-it-right-check-btn {
      font-family: inherit; font-size: 1rem; padding: 12px 24px; border-radius: 12px;
      border: none; background: var(--quiz-sage); color: #fff; font-weight: 600;
      cursor: pointer; min-height: 48px;
      transition: opacity 0.2s, transform 0.2s;
    }
    .set-it-right-check-btn:hover {
      opacity: 0.95; transform: translateY(-1px);
    }
    .set-it-right-end-msg {
      font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px;
    }
    .set-it-right-end-score {
      font-size: 1.1rem; color: var(--text-muted); margin-bottom: 24px;
    }
    .set-it-right-play-again {
      font-family: inherit; font-size: 1.1rem; padding: 14px 32px; border-radius: 12px;
      border: none; background: var(--quiz-sage); color: #fff; font-weight: 600;
      cursor: pointer; min-height: 48px;
      transition: opacity 0.2s, transform 0.2s;
    }
    .set-it-right-play-again:hover {
      opacity: 0.95; transform: translateY(-1px);
    }
    .set-it-right-btn {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
      padding: 10px 18px; border-radius: 10px; border: 2px solid var(--quiz-sage);
      background: transparent; color: var(--text-primary); font-family: inherit;
      font-size: 0.95rem; font-weight: 600; cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .set-it-right-btn:hover {
      background: var(--quiz-sage); color: #fff; transform: translateY(-1px);
    }

    /* Mobile overrides for quiz */
    @media (max-width: 768px) {
      .quiz-modal {
        margin: 12px;
        padding: 24px 16px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
      }

      .quiz-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
      }

      .quiz-lvl {
        min-height: 48px;
        padding: 12px 20px;
        font-size: 1rem;
      }

      .quiz-question {
        font-size: 1.1rem;
        margin-bottom: 16px;
      }

      .quiz-opt {
        padding: 12px 16px;
        min-height: 48px;
        font-size: 0.95rem;
      }

      .set-it-right-modal {
        margin: 12px;
        padding: 24px 16px;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
      }

      /* Set It Right — compact layout so drag-and-drop never needs scrolling */
      .quiz-modal.quiz-modal--set-it-right {
        padding: 14px 12px;
        margin: 8px;
        max-height: calc(100svh - 16px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      #set-it-right-game {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .set-it-right-header { margin-bottom: 8px; }
      .set-it-right-score { font-size: 0.8rem; margin-bottom: 5px; }
      .set-it-right-progress { height: 4px; }
      .set-it-right-question {
        font-size: 0.9rem; margin-bottom: 8px; line-height: 1.3;
      }
      .set-it-right-drag-area { margin-bottom: 8px; flex: 1; overflow: hidden; }
      .set-it-right-pool {
        min-height: 32px; padding: 6px 8px; margin-bottom: 8px; gap: 5px;
      }
      .set-it-right-chip { padding: 5px 9px; font-size: 0.8rem; }
      .set-it-right-table { font-size: 0.8rem; }
      .set-it-right-table th,
      .set-it-right-table td { padding: 5px 7px; }
      .set-it-right-slot-drop { min-height: 34px; min-width: 0; }
      .set-it-right-check-btn {
        padding: 8px 18px; min-height: 38px; font-size: 0.88rem; margin-top: 8px;
      }
      .set-it-right-title { font-size: 1.25rem; margin-bottom: 8px; }
      .set-it-right-subtitle { font-size: 0.85rem; margin-bottom: 14px; }
      .set-it-right-play-btn { padding: 11px 24px; font-size: 0.95rem; min-height: 42px; }
      .set-it-right-end-msg { font-size: 1.2rem; margin-bottom: 8px; }
      .set-it-right-end-score { font-size: 0.95rem; margin-bottom: 16px; }
      .set-it-right-play-again { padding: 11px 24px; font-size: 0.95rem; min-height: 42px; }

      .quiz-modal-overlay {
        align-items: center;
        justify-content: center;
        padding: 16px;
      }

      .quiz-modal-overlay.open .quiz-modal {
        flex: 0 1 auto;
        max-height: calc(100vh - 32px);
      }

      body.dinner-mode .quiz-modal-overlay {
        background: #000000;
      }
      body.dinner-mode .quiz-modal-overlay.open .quiz-modal {
        background: #000000;
      }
    }