/* ===== وضع العرض (جهاز العرض) ===== */
body.present { --cut: 28px; }
body.present .stage-pattern, body.present #dust { display: none; }
body.present .stage-beams i { animation: none; opacity: .3; }
body.present .g-brand small, body.present .kbd-note, body.present .g-score, body.present .q-meta .chip:not(.chip-gold):not(.chip-pts) { display: none; }
body.present .g-tools .icon-btn, body.present #g-fs { display: none; }
body.present .q-text { font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
body.present .ans-t { font-size: clamp(1.4rem, 2.5vw, 2.5rem); }
body.present .ans { --fill: #0C1630; --edge: rgba(255, 231, 166, .6); min-height: clamp(76px, 12vh, 130px); }
body.present .g-body { grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 360px); }
body.present .rung { font-size: 1.15rem; }
body.present .fb-msg { font-size: 1.5rem; }
body.present .fb-exp { font-size: 1.25rem; }

/* ===== شاشات متوسطة (جهاز عرض 1024 / لوحي) ===== */
@media (max-width: 1100px) {
  html { font-size: 16px; }
  .g-body { grid-template-columns: minmax(0, 1fr) 200px; gap: 1rem; }
  .g-top { gap: .8rem; }
  .g-brand small { display: none; }
}

/* ===== لوحي صغير ===== */
@media (max-width: 860px) {
  .g-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .ladder-wrap { order: -1; flex-direction: row; align-items: center; padding: .3rem .5rem; gap: .6rem; }
  .ladder-h { display: none; }
  .ladder { flex-direction: row-reverse; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 4px; padding-block: 2px; }
  .rung { flex: none; min-height: 34px; min-width: 38px; padding: 0 .5rem; justify-content: center; border-inline-start: 0; border-bottom: 3px solid transparent; }
  .rung .r-d, .rung .r-p { display: none; }
  .rung.active { border-bottom-color: var(--gold); }
  .g-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .g-tools { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .g-brand b { font-size: .95rem; }
  .mini-grid { grid-template-columns: 1fr; }
  .kbd-note { display: none; }
}

/* ===== هاتف ===== */
@media (max-width: 640px) {
  :root { --cut: 12px; }
  html { font-size: 15px; }
  .answers { grid-template-columns: 1fr; gap: .6rem; }
  .ans { min-height: 60px; padding-inline: calc(var(--cut) + .6rem); }
  .qcard { clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); padding-inline: 1.2rem; }
  .qcard::before, .qcard::after { display: none; }
  .setup-head { grid-template-columns: auto 1fr; }
  .setup-spacer { display: none; }
  .steps { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .sp-t { display: none; }
  .step-pill.is-current .sp-t { display: inline; }
  .unit { grid-template-columns: auto 1fr; }
  .unit-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .setup-foot { flex-direction: column; align-items: stretch; }
  .foot-btns { justify-content: space-between; }
  .foot-btns .btn-primary { flex: 1 1 100%; order: -1; }
  .g-foot { padding-block: .4rem; }
  .joker { padding-inline: .8rem; font-size: .9rem; }
  .field-l { min-width: 100%; }
  .seg { width: 100%; }
  .seg-opt { flex: 1; padding-inline: .6rem; }
  .btn-xl { padding-inline: 2.2rem; }
}

/* ارتفاع منخفض (جهاز عرض 1024×768 أو هاتف أفقي) */
@media (max-height: 760px) and (min-width: 861px) {
  .g-top { padding-block: .4rem; }
  .arena { gap: .8rem; }
  .qcard { padding-block: .9rem; }
  .ans { min-height: 58px; }
}