:root{--bg:#f5f7fb;--card:#fff;--ink:#172033;--muted:#697386;--primary:#635bff;--primary2:#8b5cf6;--good:#16a34a;--bad:#ef4444;--shadow:0 18px 50px rgba(31,41,55,.12)}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,#eef2ff,#f8fafc 45%,#eefcf8);color:var(--ink)}a{text-decoration:none;color:inherit}.wrap{max-width:1180px;margin:auto;padding:24px}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}.brand{font-weight:900;font-size:24px}.btn{border:0;border-radius:14px;padding:12px 18px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer;display:inline-block}.btn.secondary{background:#e9ecf7;color:var(--ink)}.btn.danger{background:#fee2e2;color:#991b1b}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.card{background:rgba(255,255,255,.94);border-radius:24px;padding:22px;box-shadow:var(--shadow);border:1px solid #edf0f7}.hero{padding:40px}.muted{color:var(--muted)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #edf0f5;text-align:left;vertical-align:top}.form{display:grid;gap:14px}.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid #dbe1ed;border-radius:12px;font:inherit}.quiz{min-height:100vh;padding:22px;display:flex;flex-direction:column}.quiz-head{display:flex;justify-content:space-between;align-items:center;max-width:1180px;width:100%;margin:auto}.progress{height:10px;background:#e8ebf3;border-radius:20px;overflow:hidden;max-width:1180px;width:100%;margin:12px auto}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));transition:.4s}.quiz-card{max-width:1000px;width:100%;margin:auto;background:#fff;border-radius:34px;padding:28px;box-shadow:var(--shadow);text-align:center}.question-img{max-height:300px;max-width:100%;object-fit:contain;border-radius:22px;margin:10px auto 20px;display:block}.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:25px}.option{background:#fff;border:3px solid #edf0f7;border-radius:24px;padding:18px;cursor:pointer;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 25px rgba(31,41,55,.06);animation:pop .55s both;transition:.2s}.option:hover{transform:translateY(-5px);border-color:#b9b5ff}.option img{width:150px;height:120px;object-fit:contain;border-radius:15px}.letter{font-size:25px;font-weight:900}.option.correct{border-color:#22c55e;background:#f0fdf4;animation:bounce .6s}.option.wrong{border-color:#ef4444;background:#fff1f2;animation:shake .4s}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}.mic{font-size:17px}.score{font-size:70px;font-weight:1000;line-height:1}.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}.piece{position:absolute;width:10px;height:18px;animation:fall 2.6s linear forwards}.admin-nav{display:flex;gap:8px;flex-wrap:wrap}.login{max-width:460px;margin:10vh auto}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#172033;color:white;padding:12px 18px;border-radius:99px;display:none}.fade1{animation-delay:.05s}.fade2{animation-delay:.15s}.fade3{animation-delay:.25s}.fade4{animation-delay:.35s}@keyframes pop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}@keyframes bounce{50%{transform:scale(1.06)}}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}@media(max-width:650px){.wrap{padding:14px}.hero{padding:25px}.quiz{padding:12px}.quiz-card{padding:18px;border-radius:24px}.question-img{max-height:220px}.options{grid-template-columns:1fr 1fr;gap:10px}.option{min-height:170px;padding:10px}.option img{width:100px;height:80px}.score{font-size:54px}}

/* Full-screen game */
html.game-body, body.game-body{width:100%;height:100%;height:100dvh;overflow:hidden}
.game-body{background:radial-gradient(circle at 20% 10%,#eef2ff 0,#f8fafc 42%,#ecfdf5 100%)}
.quiz-fullscreen{width:100%;height:100dvh;min-height:100dvh;padding:clamp(8px,1.5vw,22px);overflow:hidden;display:flex;align-items:center;justify-content:center}
.quiz-card-full{position:relative;width:min(1500px,100%);height:min(94dvh,100%);min-height:0;margin:0;padding:clamp(14px,2.2vw,36px);border-radius:clamp(18px,2.5vw,34px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.question-content{width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.question-count{position:absolute;top:clamp(10px,1.4vw,22px);right:clamp(14px,2vw,30px);font-size:clamp(18px,2vw,30px);font-weight:900;color:#c4c9d8}
.question-title{font-size:clamp(24px,3.4vw,58px);line-height:1.08;margin:0 0 clamp(8px,1.3vh,18px);max-width:1100px}
.quiz-card-full .question-img{width:auto;max-width:min(70vw,650px);height:min(25dvh,260px);max-height:25dvh;margin:0 auto clamp(8px,1.3vh,18px)}
.quiz-card-full .options{width:100%;max-width:1150px;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);margin-top:clamp(6px,1vh,14px)}
.quiz-card-full .option{min-height:0;height:clamp(110px,25dvh,250px);padding:clamp(8px,1vw,16px);gap:clamp(5px,1vh,10px);border-radius:clamp(14px,1.8vw,24px);font-size:clamp(16px,1.7vw,28px)}
.quiz-card-full .option img{width:auto;height:min(13dvh,125px);max-width:90%;object-fit:contain}
.quiz-card-full .letter{font-size:clamp(20px,2.2vw,34px)}
.quiz-card-full .option-text{font-weight:800}
.question-enter{animation:questionIn .55s cubic-bezier(.2,.8,.2,1) both}
.finish-enter{animation:finishIn .65s cubic-bezier(.2,.8,.2,1) both}
.finish-icon{font-size:clamp(64px,10vw,150px);line-height:1}
.finish-label{font-size:clamp(20px,2.5vw,40px);font-weight:900;margin-top:10px}
.finish-score{font-size:clamp(64px,11vw,150px);line-height:.95;font-weight:1000;margin:8px 0}
.finish-hint{font-size:clamp(15px,1.5vw,24px);font-weight:700;color:var(--muted)}
.toast{z-index:20;bottom:4vh;font-size:clamp(13px,1.2vw,18px)}
@keyframes questionIn{from{opacity:0;transform:scale(.96) translateY(25px)}to{opacity:1;transform:none}}
@keyframes finishIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .quiz-fullscreen{padding:6px}
 .quiz-card-full{height:calc(100dvh - 12px);border-radius:18px;padding:12px 10px}
 .question-title{font-size:clamp(22px,7vw,34px);max-width:95vw}
 .quiz-card-full .question-img{height:min(22dvh,180px);max-width:88vw}
 .quiz-card-full .options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .quiz-card-full .option{height:min(25dvh,175px);font-size:clamp(14px,4vw,19px)}
 .quiz-card-full .option img{height:min(11dvh,80px)}
}
@media(max-width:390px){.quiz-card-full .option{height:min(23dvh,145px)}.quiz-card-full .option img{height:min(9dvh,65px)}.question-title{font-size:21px}}
@media(min-width:1600px){.quiz-card-full .question-img{height:min(29dvh,300px)}.quiz-card-full .option{height:min(27dvh,280px)}}

.setting-toggle{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:start;padding:15px;border:1px solid #e2e6f0;border-radius:14px;background:#fafbff}.setting-toggle input{width:20px;height:20px;grid-row:span 2}.setting-toggle .muted{grid-column:2}

/* Quiz sequential answer reveal + stronger confetti */
.quiz-card-full .option-hidden{visibility:hidden;opacity:0;pointer-events:none;animation:none}
.quiz-card-full .option-reveal{visibility:visible;opacity:1;animation:optionReveal .7s cubic-bezier(.2,.85,.25,1) both}
.quiz-card-full .option.correct{box-shadow:0 0 0 5px rgba(34,197,94,.12),0 18px 45px rgba(34,197,94,.22)}
.quiz-card-full .option.wrong{box-shadow:0 0 0 5px rgba(239,68,68,.1),0 18px 45px rgba(239,68,68,.16)}
.finish-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.confetti{z-index:10}
.confetti-big{z-index:10}
.piece{background:linear-gradient(135deg,#635bff,#f59e0b);border-radius:2px;will-change:transform,opacity}
@keyframes optionReveal{0%{opacity:0;transform:translateY(45px) scale(.72) rotate(-3deg)}60%{opacity:1;transform:translateY(-8px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--x),110vh,0) rotate(var(--r))}}
.table-scroll{overflow-x:auto}.actions{white-space:nowrap}.option-row-admin{margin:3px 0}

/* Latest game/admin refinements */
.hidden{display:none!important}
.image-preview-box{margin-top:-4px;min-height:12px;display:flex;align-items:center;justify-content:flex-start}.image-preview-box img{max-width:240px;max-height:170px;width:auto;height:auto;object-fit:contain;border-radius:14px;border:1px solid #e5e7eb;padding:5px;background:#fff}.image-preview-box.small{min-height:70px}.image-preview-box.small img{max-width:150px;max-height:110px}.radio-correct{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f8fafc;border-radius:12px}.radio-correct input{width:20px;height:20px}.admin-thumb{max-width:110px;max-height:80px;object-fit:contain;border-radius:10px;border:1px solid #e5e7eb;padding:3px;background:#fff}.admin-thumb.tiny{max-width:70px;max-height:55px}.music-setting audio{width:min(520px,100%);margin-top:8px}.win-music{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:min(420px,80vw);opacity:.7;z-index:4}

/* True edge-to-edge game: no left/right gutters on any display. */
.game-body{margin:0!important;padding:0!important;width:100vw;max-width:none;overflow:hidden}
.quiz-fullscreen{width:100vw;height:100dvh;min-height:100dvh;padding:0!important;margin:0!important}
.quiz-card-full{width:100vw;max-width:none;height:100dvh;min-height:100dvh;margin:0!important;border-radius:0!important;border-left:0;border-right:0;padding:clamp(12px,2vw,34px);}
.quiz-card-full .question-content{width:min(96vw,1700px);max-width:100%;}
.quiz-card-full .options{max-width:1500px}

/* Directional entrance: A left, B bottom, C right, D top. */
.quiz-card-full .option-dir-0.option-reveal{animation:answerFromLeft .72s cubic-bezier(.2,.85,.25,1) both}
.quiz-card-full .option-dir-1.option-reveal{animation:answerFromBottom .72s cubic-bezier(.2,.85,.25,1) both}
.quiz-card-full .option-dir-2.option-reveal{animation:answerFromRight .72s cubic-bezier(.2,.85,.25,1) both}
.quiz-card-full .option-dir-3.option-reveal{animation:answerFromTop .72s cubic-bezier(.2,.85,.25,1) both}
@keyframes answerFromLeft{0%{opacity:0;transform:translateX(-35vw) scale(.72) rotate(-5deg)}65%{opacity:1;transform:translateX(14px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes answerFromBottom{0%{opacity:0;transform:translateY(35vh) scale(.72) rotate(5deg)}65%{opacity:1;transform:translateY(-12px) scale(1.04) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes answerFromRight{0%{opacity:0;transform:translateX(35vw) scale(.72) rotate(5deg)}65%{opacity:1;transform:translateX(-14px) scale(1.04) rotate(-1deg)}100%{opacity:1;transform:none}}
@keyframes answerFromTop{0%{opacity:0;transform:translateY(-35vh) scale(.72) rotate(-4deg)}65%{opacity:1;transform:translateY(12px) scale(1.04) rotate(1deg)}100%{opacity:1;transform:none}}

/* Final game visual + voice responsiveness */
html.game-body, body.game-body{background:
 radial-gradient(circle at 8% 12%,rgba(99,91,255,.30),transparent 28%),
 radial-gradient(circle at 92% 15%,rgba(34,197,94,.22),transparent 26%),
 radial-gradient(circle at 50% 100%,rgba(245,158,11,.18),transparent 34%),
 linear-gradient(135deg,#0b1026 0%,#18234b 48%,#102a3b 100%);
 color:#fff;
}
.game-body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 40%,rgba(255,255,255,.04));z-index:0}
.quiz-fullscreen{position:relative;z-index:1}
.quiz-card-full{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 100px rgba(0,0,0,.25);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.question-content{width:min(94vw,1680px);gap:0}
.question-count{color:rgba(255,255,255,.45)}
.question-title{color:#fff;text-shadow:0 4px 22px rgba(0,0,0,.22)}
.quiz-card-full .question-img{max-height:min(22dvh,230px);filter:drop-shadow(0 15px 28px rgba(0,0,0,.18))}
.quiz-card-full .options{max-width:1500px;gap:clamp(10px,1.4vw,22px)}
.quiz-card-full .option{height:clamp(170px,25dvh,265px);min-height:0;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,246,255,.92));color:#121a32;border:2px solid rgba(255,255,255,.75);box-shadow:0 18px 40px rgba(0,0,0,.20);overflow:hidden;justify-content:center}
.quiz-card-full .option img{height:min(9dvh,90px);max-height:90px;width:min(30%,120px);min-width:55px}
.quiz-card-full .letter{font-size:clamp(24px,2.5vw,38px);line-height:1}
.quiz-card-full .option-text{font-size:clamp(17px,2vw,30px);line-height:1.15;max-width:96%;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quiz-card-full .option.correct{background:linear-gradient(145deg,#dcfce7,#bbf7d0);border-color:#4ade80}
.quiz-card-full .option.wrong{background:linear-gradient(145deg,#fee2e2,#fecaca);border-color:#fb7185}
.finish-content{width:min(92vw,900px);min-height:80vh;padding:clamp(18px,4vw,50px);border-radius:40px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.finish-label,.finish-hint{color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.2)}
.finish-score{font-size:clamp(70px,12vw,170px);text-shadow:0 8px 30px rgba(0,0,0,.25)}
.voice-status{margin-top:clamp(14px,2vh,24px);font-size:clamp(14px,1.4vw,22px);font-weight:800;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16)}
.win-music{display:none!important}
.confetti{z-index:20}
@media(max-width:700px){
 .quiz-card-full{padding:10px 8px}
 .question-content{width:96vw}
 .question-title{font-size:clamp(21px,6.5vw,34px);max-width:94vw;margin-bottom:7px}
 .quiz-card-full .question-img{height:min(18dvh,145px);max-width:75vw;margin-bottom:6px}
 .quiz-card-full .options{gap:8px;margin-top:5px}
 .quiz-card-full .option{height:min(25dvh,178px);padding:7px;gap:5px;border-radius:18px}
 .quiz-card-full .option img{height:min(8dvh,62px);width:min(32%,75px)}
 .quiz-card-full .letter{font-size:clamp(20px,6vw,29px)}
 .quiz-card-full .option-text{font-size:clamp(14px,3.8vw,19px)}
 .finish-content{min-height:78vh;border-radius:26px}
}
@media(max-width:390px){.quiz-card-full .option{height:min(24dvh,155px)}.quiz-card-full .option img{height:min(7dvh,52px)}.quiz-card-full .option-text{font-size:14px}}

/* Final layout: 4 answers use a balanced 2 x 2 layout on larger screens. */
.quiz-card-full .question-content{height:100%;min-height:0}
.quiz-card-full .options{align-content:stretch}
.quiz-card-full .options-count-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));max-width:1500px;flex:1;min-height:0}
.quiz-card-full .options-count-4 .option{height:auto;min-height:0}
.quiz-card-full .options-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.quiz-card-full .options-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.quiz-card-full .options-count-1{grid-template-columns:minmax(280px,700px);justify-content:center}
.quiz-card-full .option img{height:min(12dvh,125px);max-height:125px;width:min(34%,140px);min-width:65px}
.quiz-card-full .option-text{line-height:1.12;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-overflow:clip}

/* Game themes configurable from Admin > Pengaturan Game. */
.game-body.theme-candy{background:radial-gradient(circle at 12% 10%,rgba(255,122,180,.38),transparent 28%),radial-gradient(circle at 88% 18%,rgba(255,216,95,.30),transparent 28%),linear-gradient(135deg,#35154d 0%,#742c64 48%,#ff7b7b 100%)}
.game-body.theme-space{background:radial-gradient(circle at 20% 15%,rgba(99,102,241,.35),transparent 25%),radial-gradient(circle at 82% 25%,rgba(168,85,247,.28),transparent 26%),linear-gradient(135deg,#050816 0%,#11163b 50%,#24104f 100%)}
.game-body.theme-forest{background:radial-gradient(circle at 12% 12%,rgba(74,222,128,.28),transparent 28%),radial-gradient(circle at 90% 18%,rgba(163,230,53,.20),transparent 25%),linear-gradient(135deg,#08251b 0%,#123b2e 48%,#234d36 100%)}
.game-body.theme-sunset{background:radial-gradient(circle at 15% 10%,rgba(251,191,36,.32),transparent 28%),radial-gradient(circle at 88% 18%,rgba(244,114,182,.28),transparent 25%),linear-gradient(135deg,#391a4b 0%,#7c2d52 48%,#c2410c 100%)}
.game-body.theme-royal{background:radial-gradient(circle at 12% 12%,rgba(192,132,252,.32),transparent 28%),radial-gradient(circle at 90% 20%,rgba(96,165,250,.25),transparent 25%),linear-gradient(135deg,#15103a 0%,#30205e 48%,#183d6b 100%)}

/* Category picker voice animation on the start page. */
.home-category-hidden{opacity:0;visibility:hidden;transform:translateY(28px) scale(.94);pointer-events:none}
.category-card.home-category-reveal{visibility:visible;animation:categoryReveal .72s cubic-bezier(.2,.85,.25,1) both}
.category-card.voice-selected{animation:categoryVoiceSelected .5s ease both;box-shadow:0 0 0 5px rgba(99,91,255,.18),0 25px 70px rgba(99,91,255,.22)}
.home-voice-status{margin-top:18px;text-align:center;font-weight:800;color:#5b6475;padding:10px 16px;border-radius:999px;background:#f6f7fb;border:1px solid #e8ebf2}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.category-card{transition:box-shadow .25s,transform .25s}
.category-card:hover{transform:translateY(-4px)}
.category-icon{font-size:42px}
@keyframes categoryReveal{0%{opacity:0;visibility:visible;transform:translateY(40px) scale(.88)}65%{opacity:1;transform:translateY(-8px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes categoryVoiceSelected{50%{transform:scale(1.04)}100%{transform:scale(1)}}

@media(min-width:701px){
 .quiz-card-full .options-count-4 .option img{height:min(13dvh,145px);max-height:145px}
 .quiz-card-full .options-count-4 .option-text{font-size:clamp(20px,2vw,32px)}
}
@media(max-width:700px){
 .quiz-card-full .options-count-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 .quiz-card-full .options-count-4 .option{height:auto}
 .quiz-card-full .option img{height:min(10dvh,85px);max-height:85px;width:min(38%,90px)}
 .quiz-card-full .option-text{font-size:clamp(15px,4vw,21px);line-height:1.12;-webkit-line-clamp:3}
 .home-voice-status{font-size:14px}
}

.quiz-card-full .question-layout-4 .question-img{height:min(18dvh,210px);max-height:min(18dvh,210px);margin-bottom:clamp(5px,1vh,12px)}
.quiz-card-full .question-layout-4 .question-title{margin-bottom:clamp(5px,1vh,12px)}
.quiz-card-full .question-layout-4 .options{margin-top:clamp(5px,1vh,12px)}
.quiz-card-full .question-layout-4 .option{padding:clamp(8px,1vw,16px)}
.quiz-card-full .question-layout-3 .question-img{height:min(25dvh,270px);max-height:min(25dvh,270px)}
.quiz-card-full .question-layout-3 .option img{height:min(14dvh,150px);max-height:150px}
@media(max-width:700px){
 .quiz-card-full .question-layout-4 .question-img{height:min(17dvh,135px);max-height:min(17dvh,135px)}
 .quiz-card-full .question-layout-3 .question-img{height:min(20dvh,165px);max-height:min(20dvh,165px)}
}


/* Layout refinement: keep answer text fully visible and give images more room. */
@media(min-width:701px){
  .quiz-card-full .question-content.question-has-image{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,34%);
    grid-template-rows:minmax(120px,23dvh) minmax(0,1fr);
    align-items:center;
    column-gap:clamp(20px,3vw,55px);
    width:min(96vw,1740px);
    height:100%;
  }
  .quiz-card-full .question-has-image .question-title{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:none;
    text-align:left;
    align-self:center;
    margin:0;
    font-size:clamp(30px,3.25vw,58px);
  }
  .quiz-card-full .question-has-image .question-img{
    grid-column:2;
    grid-row:1;
    width:100%;
    height:min(20dvh,220px);
    max-width:100%;
    max-height:min(20dvh,220px);
    margin:0;
    justify-self:center;
  }
  .quiz-card-full .question-has-image .options{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
    min-height:0;
  }
  .quiz-card-full .option{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:clamp(14px,1.5vw,28px);
    padding:clamp(14px,1.5vw,26px);
  }
  .quiz-card-full .option .letter{
    flex:0 0 auto;
    width:clamp(38px,4vw,62px);
    text-align:center;
  }
  .quiz-card-full .option .option-text{
    order:2;
    flex:1 1 auto;
    min-width:0;
    max-width:none;
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
  }
  .quiz-card-full .option img{
    order:3;
    flex:0 0 clamp(130px,14vw,240px);
    width:clamp(130px,14vw,240px);
    height:clamp(100px,17dvh,190px);
    max-width:34%;
    max-height:190px;
    min-width:0;
    object-fit:contain;
    margin-left:auto;
  }
  .quiz-card-full .options-count-4 .option{
    height:auto;
  }
  .quiz-card-full .options-count-4 .option img{
    height:clamp(105px,15dvh,170px);
  }
}

@media(max-width:700px){
  .quiz-card-full .question-content.question-has-image{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(90px,30%);
    grid-template-rows:minmax(92px,17dvh) minmax(0,1fr);
    column-gap:10px;
    height:100%;
  }
  .quiz-card-full .question-has-image .question-title{
    grid-column:1;
    grid-row:1;
    text-align:left;
    max-width:none;
    margin:0;
    font-size:clamp(20px,5.6vw,31px);
    align-self:center;
  }
  .quiz-card-full .question-has-image .question-img{
    grid-column:2;
    grid-row:1;
    width:100%;
    height:min(16dvh,125px);
    max-width:100%;
    max-height:min(16dvh,125px);
    margin:0;
  }
  .quiz-card-full .question-has-image .options{
    grid-column:1 / -1;
    grid-row:2;
    margin:0;
    min-height:0;
    height:100%;
  }
  .quiz-card-full .option{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
    gap:8px;
    padding:8px 10px;
  }
  .quiz-card-full .option .letter{flex:0 0 30px;width:30px;text-align:center}
  .quiz-card-full .option .option-text{order:2;flex:1;min-width:0;display:block;overflow:visible;-webkit-line-clamp:unset;max-width:none}
  .quiz-card-full .option img{order:3;width:min(32%,90px);height:min(12dvh,85px);max-width:32%;min-width:42px;margin-left:auto}
}

/* Responsive answer cards v4: image on the LEFT, answer text on the RIGHT.
   The grid changes according to the number of choices and screen size. */
.quiz-card-full .option{
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:clamp(12px,1.6vw,28px);
  overflow:hidden;
}
.quiz-card-full .option img{
  order:1;
  flex:0 0 clamp(90px,14vw,210px);
  width:clamp(90px,14vw,210px);
  height:clamp(85px,17dvh,185px);
  max-width:38%;
  max-height:185px;
  min-width:0;
  object-fit:contain;
  margin:0;
}
.quiz-card-full .option .letter{
  order:2;
  flex:0 0 auto;
  width:clamp(36px,4vw,64px);
  text-align:center;
}
.quiz-card-full .option .option-text{
  order:3;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  line-height:1.08;
  -webkit-line-clamp:unset;
}

/* Desktop/tablet: use the whole available width intelligently. */
@media(min-width:701px){
  .quiz-card-full .options-count-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
  }
  .quiz-card-full .options-count-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
    max-width:1500px;
  }
  .quiz-card-full .options-count-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  .quiz-card-full .options-count-3 .option{height:auto;min-height:0;}
  .quiz-card-full .options-count-2 .option{height:auto;min-height:0;}
  .quiz-card-full .options-count-4 .option{height:auto;min-height:0;}

  .quiz-card-full .options-count-3 .option img{
    width:clamp(105px,13vw,190px);
    height:clamp(90px,18dvh,170px);
    flex-basis:clamp(105px,13vw,190px);
  }
  .quiz-card-full .options-count-2 .option img{
    width:clamp(120px,15vw,230px);
    height:clamp(100px,20dvh,190px);
    flex-basis:clamp(120px,15vw,230px);
  }
  .quiz-card-full .options-count-4 .option img{
    width:clamp(95px,12vw,180px);
    height:clamp(90px,16dvh,160px);
    flex-basis:clamp(95px,12vw,180px);
  }
  .quiz-card-full .options-count-3 .option-text,
  .quiz-card-full .options-count-2 .option-text,
  .quiz-card-full .options-count-4 .option-text{
    font-size:clamp(20px,2.1vw,36px);
  }
}

/* Phone: never force three cards into one cramped row. */
@media(max-width:700px){
  .quiz-card-full .options-count-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  .quiz-card-full .options-count-3{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(3,minmax(0,1fr));
  }
  .quiz-card-full .options-count-2{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
  }
  .quiz-card-full .options-count-1{
    grid-template-columns:minmax(0,1fr);
  }
  .quiz-card-full .options-count-3 .option,
  .quiz-card-full .options-count-2 .option,
  .quiz-card-full .options-count-4 .option{
    height:auto;
    min-height:0;
    padding:8px 10px;
    gap:8px;
  }
  .quiz-card-full .options-count-3 .option img,
  .quiz-card-full .options-count-2 .option img,
  .quiz-card-full .options-count-4 .option img{
    order:1;
    flex:0 0 min(28vw,105px);
    width:min(28vw,105px);
    height:min(15dvh,105px);
    max-width:30%;
    min-width:48px;
    margin:0;
  }
  .quiz-card-full .options-count-3 .letter,
  .quiz-card-full .options-count-2 .letter,
  .quiz-card-full .options-count-4 .letter{
    order:2;
    width:30px;
    flex-basis:30px;
    font-size:clamp(20px,6vw,30px);
  }
  .quiz-card-full .options-count-3 .option-text,
  .quiz-card-full .options-count-2 .option-text,
  .quiz-card-full .options-count-4 .option-text{
    order:3;
    font-size:clamp(15px,4.2vw,23px);
    line-height:1.08;
  }
}

@media(max-width:420px){
  .quiz-card-full .options-count-3 .option img,
  .quiz-card-full .options-count-2 .option img,
  .quiz-card-full .options-count-4 .option img{
    flex-basis:76px;
    width:76px;
    height:72px;
    min-width:50px;
  }
  .quiz-card-full .options-count-3 .letter,
  .quiz-card-full .options-count-2 .letter,
  .quiz-card-full .options-count-4 .letter{width:25px;flex-basis:25px}
  .quiz-card-full .options-count-3 .option-text,
  .quiz-card-full .options-count-2 .option-text,
  .quiz-card-full .options-count-4 .option-text{font-size:15px}
}
.finish-actions{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:4px}.finish-hint{margin:0}.finish-hint-primary{font-size:clamp(17px,1.7vw,27px);font-weight:900}.finish-actions .finish-hint:not(.finish-hint-primary){opacity:.95}


/* Admin question editor: keep the saved-question list visible beside the long form. */
.questions-admin-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:20px;align-items:start}
.questions-admin-editor{min-width:0}
.questions-admin-list{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;margin-top:0!important}
.questions-admin-list .table{min-width:620px}
@media(max-width:1000px){
  .questions-admin-layout{grid-template-columns:minmax(0,1fr)}
  .questions-admin-list{position:static;max-height:none;overflow:visible}
}
@media(max-width:700px){
  .questions-admin-list{overflow-x:auto}
  .questions-admin-list .table{min-width:680px}
}
.questions-list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px}.questions-list-head h2{margin:0 0 4px}.question-filter{margin:0}.question-filter label{display:grid;gap:6px;font-weight:700}.question-filter select{min-width:220px;padding:10px 12px;border:1px solid #dbe1ed;border-radius:12px;font:inherit}.question-options-summary{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.question-options-summary span{background:#f4f6fb;border-radius:10px;padding:5px 8px;font-size:13px}.questions-admin-list .table th:last-child,.questions-admin-list .table td:last-child{width:1%;white-space:nowrap}@media(max-width:700px){.questions-list-head{align-items:stretch;flex-direction:column}.question-filter select{width:100%}}