/* Mobile-first refinement layer */
:root { --tap-size: 46px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, .btn, .top-btn, .start-btn, .btn-start, .btn-next, .btn-leave, .level-tab { touch-action: manipulation; }
input, select, textarea, button { font-size: 16px !important; }
img { max-width: 100%; }

@media (max-width: 780px) {
  body { min-width: 0 !important; }
  .container, .shell, .glass-card, .panel, .card, .hero, .header, main { max-width: 100% !important; }
  .container { width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
  .glass-card { padding: 28px 20px !important; border-radius: 24px !important; }
  .app-logo, .logo, .hero-logo, .result-logo { width: 68px !important; height: 68px !important; }
  h1 { font-size: clamp(1.55rem, 8vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.75rem) !important; }
  .header { padding: 22px 14px 24px !important; border-radius: 0 0 24px 24px !important; margin-bottom: 22px !important; }
  .header-actions, .nav-actions { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: 1fr 1fr; width: 100% !important; gap: 9px !important; margin-bottom: 16px !important; }
  .header-actions .top-btn, .nav-actions .btn, .nav-actions a { min-height: var(--tap-size) !important; justify-content: center !important; text-align: center !important; display: inline-flex !important; align-items: center !important; }
  .exam-grid, .stats, .grid-2, .form-grid, .level-selector, .answers-grid { grid-template-columns: 1fr !important; }
  .exam-card, .card, .panel, .summary-card, .details-card { padding: 18px !important; border-radius: 22px !important; }
  .exam-card:hover, .btn:hover, button:hover, .level-tab:hover { transform: none !important; }
  .exam-meta { align-items: flex-start !important; line-height: 1.45 !important; }
  .start-btn, button, .btn { min-height: var(--tap-size) !important; padding: 13px 16px !important; }
  .table-wrap { border-radius: 16px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  table { min-width: 680px !important; font-size: 0.88rem !important; }
  th, td { padding: 11px 10px !important; }
  input, select, textarea { width: 100% !important; min-height: var(--tap-size) !important; }
  textarea { min-height: 130px !important; }
  .hero { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .details-head, .q-top, .answer-line { gap: 10px !important; }
  .actions { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; }
  .actions .btn { width: 100% !important; }
  .level-tab { min-height: 68px !important; text-align: center !important; }
  .leader-row, .rank-card { gap: 10px !important; }
}

@media (max-width: 520px) {
  body { padding-left: 0 !important; padding-right: 0 !important; }
  .lang-switch { position: static !important; width: calc(100% - 28px) !important; margin: 14px auto 10px !important; text-align: center !important; }
  .glass-card { width: calc(100% - 28px) !important; margin: 0 auto !important; }
  .header-actions { grid-template-columns: 1fr !important; }
  .section-title { font-size: 1.25rem !important; }
  .score-circle { width: 138px !important; height: 138px !important; }
  .score-inner { width: 108px !important; height: 108px !important; }
  .score-val { font-size: 2rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .answers-grid { gap: 10px !important; }
}

/* Dedicated exam-phone layout */
@media (max-width: 780px) {
  .header-bar { padding: 14px 12px !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .header-left, .header-right { width: 100% !important; justify-content: center !important; gap: 8px !important; }
  .exam-logo { width: 36px !important; height: 36px !important; }
  .btn-leave { order: 9; width: 100% !important; min-height: 42px !important; }
  #question-counter, .timer { font-size: 0.92rem !important; }
  .flash-legend { font-size: 0.72rem !important; padding: 4px 8px !important; border-radius: 999px !important; background: rgba(255,255,255,.05) !important; }
  .display-area { min-height: 42vh !important; padding: 10px !important; }
  #flash-display { font-size: clamp(4.5rem, 28vw, 9rem) !important; line-height: 1 !important; }
  .controls { padding: 18px 12px calc(18px + env(safe-area-inset-bottom)) !important; min-height: 108px !important; }
  .btn-start { width: 100% !important; max-width: 360px !important; font-size: 1.2rem !important; }
  #input-area { max-width: 100% !important; gap: 8px !important; }
  #input-area input[type="number"] { font-size: 1.35rem !important; border-radius: 14px !important; padding: 13px !important; }
  .btn-next { min-width: 64px !important; padding: 0 18px !important; border-radius: 14px !important; }
}