/* עיצוב עמוד החידון – quiz_new.css (מקושר מ-quiz.php) */
#quizViewNew{font-family:'Arimo',Arial,sans-serif;background:#fff;margin:0;padding:20px}
#quizViewNew.page{max-width:620px;margin:0 auto}

.game{border-radius:26px;padding:30px 20px;max-width:620px;margin:0 auto;transition:.3s;--clock-empty:#e5e7eb;box-shadow:0 14px 34px rgba(0,0,0,.10);position:relative;overflow:hidden}
.game>*{position:relative;z-index:1}

.game.btn-raised .answer{padding:18px 12px;font-size:17px;border-radius:20px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.game.btn-raised .answer:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.28);filter:brightness(1.03)}
.game.btn-flat .answer{padding:16px 10px;font-size:16px;border-radius:18px;box-shadow:none !important;transform:none !important;filter:none !important}
.game.btn-flat .answer:hover{transform:none !important;box-shadow:none !important;filter:brightness(1.02)}
.game.btn-flat .answers.isStart .startBtn:hover{transform:translate(-50%,-50%) !important}

.game.specialBg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.20;mix-blend-mode:overlay;background:radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),radial-gradient(circle at 75% 20%, rgba(255,255,255,.26), rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 75%, rgba(0,0,0,.12), rgba(0,0,0,0) 55%),repeating-linear-gradient(60deg, rgba(255,255,255,.24) 0 2px, transparent 2px 42px),repeating-linear-gradient(-60deg, rgba(255,255,255,.24) 0 2px, transparent 2px 42px),repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 42px)}
.game.specialBg.lightBg::before{opacity:.14;mix-blend-mode:normal;background:radial-gradient(circle at 25% 20%, rgba(56,189,248,.20), rgba(56,189,248,0) 50%),radial-gradient(circle at 75% 20%, rgba(34,197,94,.14), rgba(34,197,94,0) 50%),radial-gradient(circle at 50% 75%, rgba(0,0,0,.10), rgba(0,0,0,0) 60%),repeating-linear-gradient(60deg, rgba(15,23,42,.08) 0 2px, transparent 2px 42px),repeating-linear-gradient(-60deg, rgba(15,23,42,.08) 0 2px, transparent 2px 42px),repeating-linear-gradient(0deg, rgba(15,23,42,.06) 0 2px, transparent 2px 42px)}

.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin:0 0 8px}
.pill{padding:5px 8px;border-radius:999px;font-weight:900;border:1px solid rgba(0,0,0,.15);background:rgba(255,255,255,.6);text-align:center;white-space:nowrap;font-size:13px;width:max-content;max-width:140px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 18px rgba(0,0,0,.08)}
.pill.right{justify-self:end}
.titleTop{text-align:center;font-size:20px;font-weight:900;line-height:1.1;padding:0 8px;margin-top:-2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; min-height:2.2em}

.clock{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:-5px auto 10px;font-weight:900;font-size:14px;box-shadow:0 10px 22px rgba(0,0,0,.10);user-select:none}
.game.isStart .clock{visibility:hidden}

.question{border-radius:18px;padding:22px;text-align:center;font-size:22px;margin-bottom:24px;font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,.06)}

.answers{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.answers.isStart{position:relative}
.answers.isStart .ghost{visibility:hidden}
.answers.isStart .startBtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) !important;width:62%;max-width:280px}

.answer{display: flex; align-items: center;justify-content: center;text-align:center;font-weight:900;cursor:pointer;transition:transform .15s, box-shadow .15s, filter .15s, opacity .15s;user-select:none;position:relative;border:0;background:#e5e7eb;color:#0f172a;box-shadow:0 10px 22px rgba(0,0,0,.14);border-radius:18px;padding:16px 10px;font-size:16px}

.answer.correct{outline:3px solid rgba(34,197,94,.9);filter:brightness(1.05);animation:correctBlink2s 0.75s ease-in-out 3}

.answer.wrong{outline:3px solid rgba(239,68,68,.9);opacity:.92}
.answer.reveal-correct{outline:3px solid rgba(34,197,94,.75)}
.answer.locked{cursor:default}
.answer.blink-correct{animation:blinkCorrect 0.6s ease-in-out infinite}
@keyframes blinkCorrect{0%{outline-color:rgba(34,197,94,.2)}50%{outline-color:rgba(34,197,94,1)}100%{outline-color:rgba(34,197,94,.2)}}
@keyframes correctBlink2s{0%,100%{opacity:1;outline-color:rgba(34,197,94,.9)}50%{opacity:0.75;outline-color:rgba(34,197,94,.35)}}

.answer.correct::after,.answer.wrong::after{position:absolute;top:10px;inset-inline-end:10px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;box-shadow:0 10px 18px rgba(0,0,0,.18)}
.answer.correct::after{content:"\2713";background:rgba(34,197,94,.95);color:#fff}
.answer.wrong::after{content:"\2717";background:rgba(239,68,68,.95);color:#fff}

.lifelines{display:flex;justify-content:center;gap:16px;margin-top:26px;margin-bottom:0}
.life{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;cursor:pointer;transition:transform .15s, box-shadow .15s, filter .15s;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15), 0 10px 22px rgba(0,0,0,.25);backdrop-filter:blur(4px);user-select:none}
.life:hover{transform:scale(1.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25), 0 16px 30px rgba(0,0,0,.35)}
.life.used{opacity:0.45;pointer-events:none;cursor:default}

.stylesRow{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.stylesGroup{display:flex;align-items:center;gap:10px}
.styles{display:flex;justify-content:flex-start;gap:10px;flex-wrap:wrap}
.styleBtn{width:28px;height:28px;border-radius:50%;border:2px solid #cbd5f5;cursor:pointer;transition:transform .15s, box-shadow .15s, filter .15s;box-shadow:0 10px 18px rgba(0,0,0,.12)}
.styleBtn:hover{transform:scale(1.15);box-shadow:0 14px 24px rgba(0,0,0,.18);filter:brightness(1.03)}

.shareBtn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:10px 14px;border-radius:999px;font-weight:900;font-size:14px;background:#0ea5e9;color:#fff;box-shadow:0 12px 22px rgba(0,0,0,.16);transition:transform .15s, filter .15s, box-shadow .15s;white-space:nowrap}
.shareBtn:hover{transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 16px 28px rgba(0,0,0,.20)}

.togglesRow{display:flex;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.toggleBtn{display:inline-flex;align-items:center;gap:10px;border:1px solid #e2e8f0;cursor:pointer;padding:10px 14px;border-radius:999px;font-weight:900;font-size:14px;background:#ffffff;color:#0f172a;box-shadow:0 10px 20px rgba(0,0,0,.10);transition:transform .15s, filter .15s, box-shadow .15s;white-space:nowrap}
.toggleBtn:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 14px 26px rgba(0,0,0,.14)}
.toggleBtn.active{border-color:#38bdf8;box-shadow:0 14px 26px rgba(14,165,233,.18)}

.scoresWrap{margin:26px auto 0;max-width:520px;border-radius:18px;overflow:hidden;border:1px solid #e5e7eb;font-family: 'Arimo';box-shadow:0 12px 26px rgba(0,0,0,.10);background:#fff}
.scoresHead{padding:12px 14px;font-weight:900;font-size:16px;background:#f8fafc;color:#0f172a;border-bottom:1px solid #e5e7eb;text-align:center}
table.scores{width:100%;border-collapse:collapse;table-layout:fixed}
table.scores th,table.scores td{padding:12px 12px;font-size:14px;text-align:center;border-bottom:1px solid #eef2f7;width:33.333%}
table.scores th{font-weight:900;background:#ffffff;color:#0f172a}
table.scores tr:last-child td{border-bottom:0}
.rankBadge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-weight:900;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;margin:0 auto}

.theme-colorful{background:linear-gradient(180deg,#2aa9ff 0%, #1486ff 45%, #0b5bd6 100%);border-color:rgba(255,255,255,.25);color:#ffffff;--clock-empty:rgba(255,255,255,.22)}
.theme-colorful .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.theme-colorful .question{background:rgba(5,24,58,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.theme-colorful .clock{border:3px solid rgba(255,255,255,.55);color:#fff}
.theme-colorful .life{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.22);color:#fff}
.game.btn-raised.theme-colorful .answer:nth-child(1){background:linear-gradient(180deg,#ff4d4d 0%, #e11d48 100%);color:#fff}
.game.btn-raised.theme-colorful .answer:nth-child(2){background:linear-gradient(180deg,#38bdf8 0%, #2563eb 100%);color:#fff}
.game.btn-raised.theme-colorful .answer:nth-child(3){background:linear-gradient(180deg,#34d399 0%, #16a34a 100%);color:#fff}
.game.btn-raised.theme-colorful .answer:nth-child(4){background:linear-gradient(180deg,#fde047 0%, #f59e0b 100%);color:#1f2937}
.game.btn-flat.theme-colorful .answer:nth-child(1){background:#ff4d4d;color:#fff;border:0}
.game.btn-flat.theme-colorful .answer:nth-child(2){background:#38bdf8;color:#0b1b2a;border:0}
.game.btn-flat.theme-colorful .answer:nth-child(3){background:#34d399;color:#05301e;border:0}
.game.btn-flat.theme-colorful .answer:nth-child(4){background:#fde047;color:#1f2937;border:0}

.theme-neon{background:linear-gradient(180deg,#2aa9ff 0%, #1486ff 45%, #0b5bd6 100%);border-color:rgba(255,255,255,.25);color:#ffffff;--clock-empty:rgba(255,255,255,.22)}
.theme-neon .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.theme-neon .question{background:rgba(5,24,58,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.theme-neon .clock{border:3px solid rgba(255,255,255,.55);color:#fff}
.theme-neon .life{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.22);color:#fff}
.game.btn-raised.theme-neon .answer:nth-child(1){background:linear-gradient(180deg,#7c3aed 0%, #5b21b6 100%);color:#fff}
.game.btn-raised.theme-neon .answer:nth-child(2){background:linear-gradient(180deg,#38bdf8 0%, #0284c7 100%);color:#fff}
.game.btn-raised.theme-neon .answer:nth-child(3){background:linear-gradient(180deg,#f472b6 0%, #db2777 100%);color:#fff}
.game.btn-raised.theme-neon .answer:nth-child(4){background:linear-gradient(180deg,#fb923c 0%, #ea580c 100%);color:#fff}
.game.btn-flat.theme-neon .answer:nth-child(1){background:#7c3aed;color:#fff;border:0}
.game.btn-flat.theme-neon .answer:nth-child(2){background:#38bdf8;color:#0b1b2a;border:0}
.game.btn-flat.theme-neon .answer:nth-child(3){background:#f472b6;color:#3b0b1f;border:0}
.game.btn-flat.theme-neon .answer:nth-child(4){background:#fb923c;color:#2b1206;border:0}

.theme-deepblue{background:radial-gradient(120% 120% at 30% 0%, #1fb6ff 0%, #0b4fbf 45%, #072a6f 100%);border-color:rgba(255,255,255,.25);color:#ffffff;--clock-empty:rgba(255,255,255,.18)}
.theme-deepblue .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.theme-deepblue .question{background:rgba(7,26,62,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.theme-deepblue .life{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.22);color:#fff}
.theme-deepblue .clock{border:3px solid rgba(255,255,255,.55);color:#fff}
.game.btn-raised.theme-deepblue .answer{border:0;color:#ffffff;background:linear-gradient(180deg,#1fb6ff 0%,#0b4fbf 58%,#0d46a6 100%);box-shadow:0 10px 22px rgba(0,0,0,.20)}
.game.btn-flat.theme-deepblue .answer{background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.20);color:#fff}

.theme-aquacolor{background:linear-gradient(180deg,#2aa9ff 0%, #1486ff 45%, #0b5bd6 100%);border-color:rgba(255,255,255,.25);color:#ffffff;--clock-empty:rgba(255,255,255,.22)}
.theme-aquacolor .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.theme-aquacolor .question{background:rgba(5,24,58,.55);border:1px solid rgba(255,255,255,.18);color:#fff}
.theme-aquacolor .life{background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.22);color:#fff}
.theme-aquacolor .clock{border:3px solid rgba(255,255,255,.55);color:#fff}
.game.btn-raised.theme-aquacolor .answer{background:linear-gradient(180deg,#38bdf8 0%, #0ea5e9 60%, #0284c7 100%);color:#fff;border:0}
.game.btn-flat.theme-aquacolor .answer{background:#0ea5e9;color:#fff;border:0}

.theme-aquawhite{background:#ffffff;border-color:#bae6fd;color:#0f172a;--clock-empty:#e5e7eb}
.theme-aquawhite .pill{background:#f0f9ff;border:1px solid #bae6fd;color:#0f172a}
.theme-aquawhite .clock{border:3px solid #0ea5e9;color:#0f172a}
.theme-aquawhite .life{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border:2px solid #38bdf8;color:#0f172a}
.theme-aquawhite .question{background:#e0f2fe;border:1px solid #bae6fd;color:#0f172a}
.game.btn-raised.theme-aquawhite .answer{background:linear-gradient(180deg,#38bdf8 0%, #0ea5e9 60%, #0284c7 100%);color:#fff;border:0}
.game.btn-flat.theme-aquawhite .answer{background:#e0f2fe;color:#0f172a;border:2px solid #38bdf8}

.theme-blue{background:linear-gradient(180deg,#ecfeff 0%, #e0f2fe 55%, #f8fbff 100%);border-color:#0ea5e9;color:#0f172a}
.theme-blue .question{background:#ffffff;border:1px solid #e5e7eb}
.theme-blue .life{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border:2px solid #38bdf8}
.theme-blue .clock{border:3px solid #0ea5e9}
.game.btn-raised.theme-blue .answer{background:linear-gradient(180deg,#38bdf8 0%, #0ea5e9 60%, #0284c7 100%);color:#fff;border:0}
.game.btn-flat.theme-blue .answer{background:#e0f2fe;color:#0f172a;border:2px solid #38bdf8}

.theme-pink{background:#fff0f7;border-color:#ec4899;color:#831843}
.theme-pink .question{background:#fff;border:1px solid #fbcfe8}
.theme-pink .life{background:linear-gradient(135deg,#ec4899 0%, #db2777 60%, #9d174d 100%);border:2px solid #ec4899;color:#fff}
.theme-pink .clock{border:3px solid #ec4899;color:#831843}
.game.btn-raised.theme-pink .answer{background:linear-gradient(180deg,#ec4899 0%, #db2777 60%, #9d174d 100%);color:#fff;border:0}
.game.btn-flat.theme-pink .answer{background:#ec4899;color:#fff;border:0}

.theme-green{background:#f0fdf4;border-color:#22c55e;color:#14532d}
.theme-green .question{background:#fff;border:1px solid #bbf7d0}
.theme-green .life{background:linear-gradient(135deg,#22c55e 0%, #16a34a 60%, #15803d 100%);border:2px solid #22c55e;color:#fff}
.theme-green .clock{border:3px solid #22c55e;color:#14532d}
.game.btn-raised.theme-green .answer{background:linear-gradient(180deg,#34d399 0%, #22c55e 60%, #16a34a 100%);color:#fff;border:0}
.game.btn-flat.theme-green .answer{background:#22c55e;color:#fff;border:0}

.theme-yellow{background:linear-gradient(180deg,#fff7cc 0%, #ffef99 55%, #fffbe6 100%);border-color:#facc15;color:#78350f}
.theme-yellow .question{background:#ffffff;border:1px solid #fde68a}
.theme-yellow .life{background:linear-gradient(135deg,#fde047 0%, #facc15 60%, #f59e0b 100%);border:2px solid #facc15;color:#78350f}
.theme-yellow .clock{border:3px solid #facc15;color:#78350f}
.game.btn-raised.theme-yellow .answer{background:linear-gradient(180deg,#fde047 0%, #facc15 60%, #f59e0b 100%);color:#1f2937;border:0}
.game.btn-flat.theme-yellow .answer{background:#facc15;color:#1f2937;border:0}

.theme-purple{background:#faf5ff;border-color:#8b5cf6;color:#4c1d95}
.theme-purple .question{background:#fff;border:1px solid #ddd6fe}
.theme-purple .life{background:linear-gradient(135deg,#8b5cf6 0%, #7c3aed 60%, #4c1d95 100%);border:2px solid #8b5cf6;color:#fff}
.theme-purple .clock{border:3px solid #8b5cf6;color:#4c1d95}
.game.btn-raised.theme-purple .answer{background:linear-gradient(180deg,#8b5cf6 0%, #7c3aed 60%, #4c1d95 100%);color:#fff;border:0}
.game.btn-flat.theme-purple .answer{background:#8b5cf6;color:#fff;border:0}

.theme-red{background:#fff5f5;border-color:#ef4444;color:#7f1d1d}
.theme-red .question{background:#fff;border:1px solid #fecaca}
.theme-red .life{background:linear-gradient(135deg,#ef4444 0%, #dc2626 60%, #991b1b 100%);border:2px solid #ef4444;color:#fff}
.theme-red .clock{border:3px solid #ef4444;color:#7f1d1d}
.game.btn-raised.theme-red .answer{background:linear-gradient(180deg,#ef4444 0%, #dc2626 60%, #991b1b 100%);color:#fff;border:0}
.game.btn-flat.theme-red .answer{background:#ef4444;color:#fff;border:0}

.theme-bw{background:#ffffff;border-color:#e5e7eb;color:#111827}
.theme-bw .answer{background:#ffffff;border:2px solid #d1d5db;color:#111827}
.theme-bw .question{background:#ffffff;border:1px solid #d1d5db}
.theme-bw .life{background:#ffffff;border:2px solid #d1d5db;color:#111827;box-shadow:0 8px 16px rgba(0,0,0,.08)}
.theme-bw .clock{border:3px solid #111827;color:#FFF}

#quiz_screen ul li {
    text-align: center;
}
@media (max-width:520px){

    #quizViewNew{padding:12px}.answers{gap:14px}.question{font-size:20px}.stylesRow{flex-direction:column;align-items:stretch}.shareBtn{justify-content:center}.stylesGroup{justify-content:center}.styles{justify-content:center}.answers.isStart .startBtn{width:78%}}