/* Shared accessibility + mobile polish for interactive tool pages */

:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(224, 112, 144, 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(224, 112, 144, 0.2);
}

@media (max-width: 820px) {
  .back-link {
    top: 14px !important;
    left: 14px !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  .shell,
  .quiz-shell,
  .game-shell,
  .wrapper,
  .game-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .panel,
  .card {
    padding: 18px !important;
  }
}

@media (max-width: 640px) {
  .actions,
  .meta-row,
  .controls,
  .stats {
    width: 100%;
  }

  .input-row {
    grid-template-columns: 1fr !important;
  }

  .btn,
  .btn-main,
  .btn-hud {
    min-height: 44px;
  }
}