/* English Quiz geometry, with the approved Arabic cream/gold palette. */
.board[data-mode="quiz"] { max-width: none; }
.board[data-mode="quiz"] .quiz-workspace { direction:ltr; grid-template-columns:minmax(0,43fr) minmax(0,57fr); gap:clamp(14px,1.4vw,22px); }
.board[data-mode="quiz"] .quiz-workspace > * { direction:rtl; }
.board[data-mode="quiz"] .quiz-column { grid-template-rows:minmax(0,1fr); }
.board[data-mode="quiz"] .quiz-tray { padding:clamp(12px,1.1vw,18px); border-color:var(--container-line); }
.quiz-tray .letter-tile { cursor:pointer; }
.q-tray-note { margin:0; color:var(--ink-mute); font-size:clamp(.7rem,.85vw,.82rem); line-height:1.7; }
.board[data-mode="quiz"] .quiz-shell {
  display:grid; grid-template-rows:auto auto minmax(min-content,1fr) auto;
  align-content:stretch; min-width:0; min-height:0;
  gap:clamp(10px,1.1vw,16px); padding:clamp(12px,1.3vw,20px);
  border:2px solid var(--container-line); border-radius:var(--r-card);
  background:var(--surface); box-shadow:var(--sh-card);
}
.quiz-shell .q-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; direction:rtl; align-items:center; gap:12px; }
.quiz-shell .q-position { flex:none; direction:rtl; white-space:nowrap; border-color:var(--container-line); }
.quiz-shell .q-dots { display:flex; align-items:center; justify-content:center; flex:1; flex-wrap:wrap; gap:5px; min-width:70px; }
.quiz-shell .q-dot { width:8px; height:8px; border:1px solid var(--container-line); border-radius:50%; background:transparent; flex:none; }
.quiz-shell .q-dot.is-passed { background:#FFF6D1; border-color:var(--gold-deep); }
.quiz-shell .q-dot.is-now { background:var(--gold-deep); border-color:var(--gold-deep); }
.quiz-shell .q-head-tools { display:flex; direction:rtl; align-items:center; gap:10px; flex:none; }
.quiz-shell .q-auto { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 16px; border:1.5px solid var(--container-line); border-radius:999px; color:var(--ink); background:var(--surface); box-shadow:none; font-size:.9rem; font-weight:700; }
.quiz-shell .q-auto[aria-pressed="true"] { background:#FFF6D1; border-color:var(--gold-deep); }
.quiz-shell .q-auto svg { width:19px; height:19px; }
.quiz-shell .q-stars { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:6px 14px; border:1.5px solid var(--container-line); border-radius:999px; color:var(--ink); background:#FFF6D1; font-weight:700; }
.quiz-shell .q-stars svg { width:21px; height:21px; color:var(--gold-deep); }
.quiz-shell .q-prompt-row { display:flex; align-items:center; justify-content:center; gap:12px; width:min(100%,760px); margin:0 auto; padding-top:clamp(2px,.4vw,6px); }
.quiz-shell .q-listen { flex:none; flex-basis:52px; width:52px; min-width:52px; min-height:52px; height:52px; padding:0; justify-content:center; border:1.5px solid var(--container-line); border-radius:50%; color:var(--ink); background:#FFFEF8; box-shadow:none; }
.quiz-shell .q-listen svg { width:21px; height:21px; }
.quiz-shell .q-listen:hover:not(:disabled) { transform:none; filter:none; background:#FFF1CB; }
.quiz-shell .q-listen:active:not(:disabled) { transform:scale(.94); box-shadow:inset 0 2px 5px rgba(23,62,56,.16); }
.quiz-shell .q-listen:disabled { opacity:.38; cursor:default; transform:none; }
.quiz-shell .q-prompt { margin:0; font:700 clamp(1.05rem,1.6vw,1.5rem)/1.7 var(--font-ui); text-align:center; color:var(--ink); }
.quiz-shell .q-prompt strong { font-family:var(--font-teach); font-size:1.2em; white-space:nowrap; }
.quiz-shell .q-prompt-word { color:#a63324; }
.quiz-shell .q-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:minmax(160px,1fr) 128px; align-content:stretch; gap:clamp(10px,1.2vw,16px); width:min(100%,760px); margin:0 auto; min-width:0; min-height:0; }
.quiz-shell .q-slot { display:grid; place-items:center; position:relative; min-width:0; min-height:0; padding:clamp(10px,1.25vw,18px); overflow:hidden; border:1.5px solid var(--container-line); border-radius:18px; background:var(--surface); }
.quiz-shell .q-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8px; }
.quiz-shell .q-slot-quiet { background:linear-gradient(160deg,var(--surface),#FFF9E8); }
.quiz-shell .q-slot .q-decoration { position:absolute; inset:0; opacity:.48; background-repeat:repeat; background-size:280px 210px; background-position:center; pointer-events:none; }
.quiz-shell .q-decoration-look { background-image:url("assets/images/quiz-scenes/doodle-look-compact.svg"); }
.quiz-shell .q-decoration-listen { background-image:url("assets/images/quiz-scenes/doodle-listen-compact.svg"); }
.quiz-shell .q-slot .q-picture { inset:auto; left:0; top:0; object-fit:fill; padding:0; }
.quiz-shell .q-stimulus { position:absolute; left:50%; top:50%; width:max-content; white-space:nowrap; transform:translate(-50%,-50%); font:700 64px/1.7 var(--font-teach); color:var(--ink); }
.quiz-shell .q-baseline { display:inline-block; width:0; height:0; padding:0; vertical-align:baseline; }
.quiz-shell .q-option { position:relative; display:grid; place-items:center; align-content:center; min-width:0; min-height:128px; padding:12px 10px; border:1.5px solid var(--container-line); border-radius:18px; color:var(--ink); background:var(--surface); cursor:pointer; box-shadow:none; transition:background 160ms var(--ease),transform 160ms var(--ease),box-shadow 160ms var(--ease); }
.quiz-shell .q-option:hover:not(:disabled) { background:var(--surface-sunk); }
.quiz-shell .q-option:active:not(:disabled) { transform:scale(.96); box-shadow:inset 0 2px 5px #84641B29; }
.quiz-shell .q-option:disabled { opacity:1; cursor:default; }
.quiz-shell .q-opt-face { font:700 clamp(3rem,5vw,4.4rem)/1.45 var(--font-teach); color:var(--tile-dark,var(--ink)); }
.quiz-shell .q-word-option .q-opt-face { font-size:clamp(1.5rem,2.8vw,2.6rem); line-height:1.8; color:var(--ink); white-space:nowrap; }
.quiz-shell .q-option.is-right { border-color:var(--gold-deep); background:#FFF6D1; box-shadow:0 0 0 3px #E6B84530; }
.quiz-shell .q-option.is-wrong { background:#FFF1F0; border-color:#E6AAA3; }
.quiz-shell .q-option.is-wrong .q-opt-face { color:#9C3931; }
.quiz-shell .q-option.is-speaking,.quiz-shell .q-option.is-speaking:hover { background:#FFF6D1; border-color:var(--gold-deep); }
.quiz-shell .q-letter-option { padding:clamp(10px,1.25vw,18px); }
.quiz-shell .q-letter-option .q-opt-face,.quiz-shell .q-letter-option.is-wrong .q-opt-face { position:absolute; left:50%; top:50%; width:max-content; white-space:nowrap; transform:translate(-50%,-50%); font:700 64px/1.7 var(--font-teach); color:var(--ink); }
.quiz-shell .q-option-check { position:absolute; inset-inline-end:8px; top:8px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface); }
.quiz-shell .q-option-check svg { width:19px; height:19px; }
.quiz-shell .q-feedback-slot { width:min(100%,760px); margin:0 auto; display:grid; }
.quiz-shell .q-feedback { display:grid; grid-template-columns:40px minmax(0,1fr) auto; direction:ltr; align-items:center; gap:14px; min-height:clamp(64px,7vw,80px); padding:10px 16px; border:1.5px solid var(--container-line); border-radius:18px; background:var(--surface); color:var(--ink-soft); transition:background 220ms var(--ease); }
.quiz-shell .q-feedback.is-correct { background:#FFF6D1; border-color:var(--gold-deep); animation:arabicQuizPop 260ms var(--ease); }
.quiz-shell .q-feedback.is-wrong { background:#FFF1F0; border-color:#E6AAA3; animation:arabicQuizPop 260ms var(--ease); }
.quiz-shell .q-feedback-icon { grid-column:1; grid-row:1; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface-sunk); color:var(--gold-deep); }
.quiz-shell .q-feedback-icon svg { width:22px; height:22px; }
.quiz-shell .q-feedback.is-wrong .q-feedback-icon { color:#9C3931; background:#FCE1DC; }
.quiz-shell .q-feedback p { grid-column:2; grid-row:1; direction:rtl; margin:0; min-width:0; font-size:clamp(.85rem,1.05vw,1.02rem); font-weight:600; line-height:1.7; text-align:center; }
.quiz-shell .q-feedback .q-action { grid-column:3; grid-row:1; justify-self:end; }
.quiz-shell .q-action { flex:none; min-height:48px; padding:10px 18px; font-size:1rem; }
.quiz-shell .q-action svg { width:22px; height:22px; }
.quiz-shell .q-action.q-next { min-width:128px; direction:ltr; }
.quiz-shell button:focus-visible { outline:3px solid var(--gold-deep); outline-offset:4px; }
.board[data-mode="quiz"] .quiz-summary-shell { grid-template-rows:minmax(0,1fr); }
.board[data-mode="quiz"] .quiz-summary-shell { position:relative; isolation:isolate; }
.quiz-summary-shell::before { content:""; position:absolute; inset:0; border-radius:inherit; background:url("assets/images/quiz-scenes/doodle-look.svg") repeat; background-size:480px 320px; opacity:.48; pointer-events:none; z-index:-1; }
.quiz-shell .q-summary { display:grid; align-content:center; justify-items:center; gap:clamp(9px,1.2vw,14px); padding:clamp(18px,2.2vw,32px); min-height:0; text-align:center; }
.quiz-shell .q-summary-medal { display:grid; place-items:center; width:92px; height:92px; border:3px solid var(--container-line); border-radius:50%; background:#FFF6D1; color:var(--gold-deep); box-shadow:0 12px 26px -16px #A07A2859; }
.quiz-shell .q-summary-medal svg { width:48px; height:48px; }
.quiz-shell .q-summary h2 { margin:0; font-size:clamp(1.4rem,2.6vw,2.1rem); }
.quiz-shell .q-summary p { margin:0; line-height:1.9; }
.quiz-shell .q-summary-score { font-size:clamp(1rem,1.5vw,1.25rem); }
.quiz-shell .q-summary-score strong,.quiz-shell .q-summary-best { color:var(--gold-deep); }
.quiz-shell .q-summary-stars { display:flex; gap:8px; }
.quiz-shell .q-summary-stars svg { width:38px; height:38px; }
.quiz-shell .q-summary-stars span { color:#E6DDC7; }
.quiz-shell .q-summary-stars .is-filled { color:var(--gold-deep); }
.quiz-shell .q-summary-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
@keyframes arabicQuizPop { from { opacity:.6; transform:scale(.985); } to { opacity:1; transform:scale(1); } }
@media (min-width:1024px) and (min-height:760px) { .board[data-mode="quiz"] { height:100dvh; } }
@media (max-width:1023px) {
  .board[data-mode="quiz"] .quiz-workspace { grid-template-columns:minmax(0,1fr); }
  .board[data-mode="quiz"] .quiz-tray { order:0; }
  .board[data-mode="quiz"] .quiz-column { order:1; }
  .quiz-tray .letter-grid { display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64px; align-content:start; justify-content:start; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-block:5px 10px; flex:none; }
  .quiz-tray .letter-tile { width:64px; max-width:64px; scroll-snap-align:center; }
  .quiz-tray .q-tray-note { display:none; }
  .quiz-shell .q-board { min-height:330px; grid-template-rows:minmax(200px,1fr) 100px; }
  .quiz-shell .q-option { min-height:100px; }
}
@media (max-width:560px) {
  .quiz-shell .q-head { grid-template-columns:minmax(0,1fr) auto; gap:10px 8px; }
  .quiz-shell .q-head-tools { grid-column:1/-1; grid-row:1; justify-self:start; }
  .quiz-shell .q-dots { grid-column:1; grid-row:2; min-width:0; gap:2px; }
  .quiz-shell .q-position { grid-column:2; grid-row:2; }
  .quiz-shell .q-dot { width:5px; height:5px; }
  .quiz-shell .q-prompt-row { gap:8px; }
  .quiz-shell .q-listen { width:44px; min-width:44px; height:44px; min-height:44px; flex-basis:44px; }
  .quiz-shell .q-prompt { font-size:1rem; line-height:1.7; }
  .quiz-shell .q-board { min-height:240px; grid-template-rows:minmax(144px,1fr) 86px; gap:10px; }
  .quiz-shell .q-option { min-height:86px; padding:8px 5px; border-radius:14px; }
  .quiz-shell .q-letter-option { padding:10px; }
  .quiz-shell .q-opt-face { font-size:clamp(2.6rem,10vw,3rem); }
  .quiz-shell .q-word-option .q-opt-face { font-size:clamp(1rem,4.8vw,1.8rem); }
  .quiz-shell .q-feedback { grid-template-columns:40px minmax(0,1fr); min-height:96px; padding:10px; gap:8px; }
  .quiz-shell .q-feedback p { grid-column:2; }
  .quiz-shell .q-feedback-icon { grid-column:1; }
  .quiz-shell .q-feedback .q-action { grid-column:1/-1; grid-row:2; }
  .quiz-shell .q-summary { padding:12px; }
  .quiz-shell .q-summary-actions { flex-direction:column; width:100%; }
}