/* Arena mobile system v1
 * Loaded last so the phone layout has one predictable source of truth.
 */

@media (max-width: 760px) {
  :root {
    --mobile-page-gap: 10px;
    --mobile-card-pad: 18px;
    --mobile-radius: 19px;
  }

  html {
    overflow-x: clip;
    scroll-padding-top: 82px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .main {
    min-width: 0;
    padding-block: 30px 52px !important;
  }

  .container,
  html[data-arena-design] .container,
  html[data-arena-design] .main > .container {
    width: calc(100% - (var(--mobile-page-gap) * 2)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .main > .container > *,
  .card,
  .form-card,
  .table-wrap,
  .studio-nav,
  .copy-field {
    max-width: 100%;
    min-width: 0;
  }

  .main h1,
  html[data-arena-design] .main h1 {
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 48px) !important;
    line-height: .98 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .main h2,
  html[data-arena-design] .main h2 {
    max-width: 100%;
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .main h3 {
    max-width: 100%;
    font-size: clamp(19px, 5.5vw, 24px);
    overflow-wrap: anywhere;
  }

  p,
  li,
  dd,
  td,
  th,
  code,
  pre {
    overflow-wrap: anywhere;
  }

  img,
  video,
  canvas,
  iframe,
  svg {
    max-width: 100%;
  }

  .card,
  html[data-arena-design] .card {
    padding: var(--mobile-card-pad) !important;
    border-radius: var(--mobile-radius) !important;
  }

  .grid,
  .grid-2,
  .grid-3,
  .form-grid,
  .studio-two-columns,
  .detail-grid,
  .detail-grid.compact,
  .launch-checks,
  .exam-detail-grid,
  .pricing-grid,
  .dashboard-grid,
  .progress-grid,
  .support-grid,
  .billing-grid,
  .profile-fields,
  .entrance-benefits,
  .entrance-benefits ul {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .section-title,
  .section-title.compact,
  .page-head,
  .studio-head {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
    padding-bottom: 18px !important;
  }

  .section-title > *,
  .section-title > .inline,
  .page-head > *,
  .studio-head > * {
    max-width: 100%;
    min-width: 0;
  }

  .inline,
  .form-actions,
  .studio-list-actions,
  .answer-actions,
  .exam-start-card__actions,
  .composer-row {
    width: 100%;
    flex-wrap: wrap;
    gap: 9px !important;
  }

  .section-title .button,
  .section-title .btn,
  .form-actions .button,
  .form-actions .btn,
  .exam-start-card__actions .button,
  .exam-start-card__actions .btn,
  .composer-row .button {
    width: 100% !important;
    flex: 1 1 100%;
  }

  .button,
  .btn,
  button,
  [role="button"] {
    max-width: 100%;
    min-height: 46px;
    touch-action: manipulation;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  input[type="file"] {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .score-row,
  .question-head,
  .notification-item,
  .studio-list-item {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .score-row > *,
  .question-head > *,
  .notification-item > *,
  .studio-list-item > * {
    max-width: 100%;
    min-width: 0;
  }

  .table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .studio-nav {
    overflow: visible;
  }

  .table,
  .studio-table,
  .data-table {
    min-width: 620px;
  }

  .copy-field {
    align-items: stretch;
    flex-direction: column;
  }

  .copy-field button {
    width: 100%;
  }

  .empty-state {
    padding: 28px 18px !important;
  }

  .empty-state h1 {
    font-size: clamp(54px, 22vw, 82px) !important;
  }

  .legal-document {
    padding: 20px 17px !important;
  }

  .legal-document h1 {
    font-size: clamp(31px, 9vw, 42px) !important;
    letter-spacing: -.045em !important;
    word-break: normal;
  }

  .legal-document h2 {
    margin-top: 28px;
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  .footer {
    padding-block: 34px calc(34px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 25px !important;
  }

  .footer-grid > :first-child {
    grid-column: auto !important;
  }

  .studio-nav {
    margin-inline: 0;
    scroll-snap-type: inline proximity;
  }

  .studio-nav a {
    scroll-snap-align: start;
  }

  .studio-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .studio-metrics .card {
    padding: 14px !important;
  }

  .studio-metrics .metric {
    font-size: clamp(25px, 9vw, 34px) !important;
  }

  .filter-fields,
  .studio-filter {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .filter-fields > *,
  .studio-filter > * {
    width: 100% !important;
    flex-basis: auto !important;
  }

  .sticky-save {
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: auto;
    width: 100% !important;
    max-width: 100%;
  }

  .sticky-save > * {
    min-width: 0;
    flex: 1 1 0;
  }

  /* Homepage cabinet preview: a concise mobile card, not a squeezed desktop. */
  .home-product-wrap {
    width: 100% !important;
    margin: 52px 0 0 !important;
    padding: 0 !important;
  }

  .home-cabinet-shell {
    border-radius: 21px !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .16) !important;
  }

  .home-cabinet-browserbar {
    display: none !important;
  }

  .home-cabinet-viewport {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .home-cabinet-viewport::after {
    display: none !important;
  }

  .home-cabinet-canvas {
    width: 100% !important;
    padding: 10px !important;
  }

  .home-cabinet-rating,
  .home-cabinet-results {
    margin-top: 0 !important;
    padding: 16px 14px !important;
    border-radius: 17px !important;
  }

  .home-cabinet-results {
    margin-top: 10px !important;
  }

  .home-cabinet-rating-top > div:first-child > strong {
    font-size: 36px !important;
  }

  .home-cabinet-elite {
    min-height: 72px !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 10px !important;
  }

  .home-cabinet-crown-stage {
    width: 54px !important;
    height: 54px !important;
    flex-basis: 54px !important;
    transform: none !important;
  }

  .home-cabinet-crown-orbit {
    animation: none !important;
  }

  .home-cabinet-elite > div:last-child > strong {
    font-size: 16px !important;
  }

  .home-cabinet-elite small,
  .home-cabinet-rating-meta span:nth-child(n + 3) {
    display: none !important;
  }

  .home-cabinet-rating-meta {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px !important;
    font-size: 7px !important;
  }

  .home-cabinet-results-head h2 {
    font-size: 25px !important;
  }

  .home-cabinet-current strong {
    font-size: 38px !important;
  }

  .home-cabinet-score-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 13px !important;
  }

  .home-cabinet-score-summary > div {
    min-height: 58px !important;
    padding: 10px 7px !important;
  }

  .home-cabinet-score-summary span {
    font-size: 7px !important;
  }

  .home-cabinet-score-summary b {
    font-size: 9px !important;
  }

  .home-cabinet-chart {
    height: 180px !important;
    margin-top: 11px !important;
    padding: 0 !important;
  }

  .home-cabinet-chart svg {
    inset: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }

  .home-cabinet-xaxis,
  .home-cabinet-yaxis,
  .home-product-wrap.is-compact-chart .home-cabinet-chart-tooltip {
    display: none !important;
  }

  .home-cabinet-chart-points circle {
    r: 3px;
  }

  /* Real cabinet: fewer moving parts, readable stats and a touch-friendly chart. */
  .dashboard-heading {
    margin-bottom: 18px !important;
  }

  .dashboard-profile-card {
    gap: 16px !important;
    padding: 22px 16px 16px !important;
    border-radius: 21px !important;
  }

  .dashboard-profile-avatar {
    width: 104px !important;
    height: 104px !important;
  }

  .dashboard-profile-copy h1 {
    font-size: clamp(30px, 8.5vw, 42px) !important;
    white-space: normal;
  }

  .profile-identity {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .profile-identity h1 {
    font-size: clamp(30px, 8.5vw, 42px) !important;
  }

  .profile-heading {
    align-items: center !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .arena-rating-dashboard-card,
  .arena-rating-result-card,
  .arena-rating-progress-card,
  .dashboard-ege-card {
    padding: 17px 14px !important;
    border-radius: 19px !important;
  }

  .arena-rating-dashboard-top {
    gap: 12px !important;
  }

  .arena-rating-dashboard-value {
    font-size: clamp(44px, 14vw, 62px) !important;
  }

  .arena-crown-hero {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    min-height: 104px !important;
    padding: 8px 10px !important;
  }

  .arena-crown-stage {
    width: 82px !important;
    height: 82px !important;
    transform: none !important;
  }

  .arena-crown-orbit {
    animation: none !important;
  }

  .arena-crown-copy strong {
    font-size: 17px !important;
  }

  .dashboard-ege-header {
    gap: 16px !important;
  }

  .dashboard-current-score {
    min-width: 0 !important;
  }

  .dashboard-current-score strong {
    font-size: clamp(54px, 18vw, 72px) !important;
  }

  .dashboard-score-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    margin-top: 20px !important;
  }

  .dashboard-score-summary > div,
  .dashboard-score-summary > div:last-child {
    min-height: 72px !important;
    padding: 11px 8px !important;
    border-right: 1px solid rgba(255, 255, 255, .08) !important;
    border-bottom: 0 !important;
  }

  .dashboard-score-summary > div:last-child {
    border-right: 0 !important;
  }

  .dashboard-score-summary span {
    font-size: 10px !important;
  }

  .dashboard-score-summary b {
    font-size: 14px !important;
  }

  .dashboard-chart-wrap {
    margin: 14px 0 0 !important;
    border-radius: 16px !important;
  }

  .dashboard-score-chart {
    min-height: 0 !important;
    aspect-ratio: 820 / 330;
  }

  .dashboard-chart-tooltip {
    width: min(250px, calc(100% - 18px));
    padding: 11px !important;
  }

  .dashboard-chart-tooltip-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .dashboard-chart-tooltip-grid span:last-child {
    grid-column: 1 / -1;
  }

  .dashboard-motion-scene *,
  .dashboard-motion-scene *::before,
  .dashboard-motion-scene *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .dashboard-intro {
    display: none !important;
  }

  /* Long exam and support pages must use the viewport, not force it wider. */
  .question,
  .question-answer-panel,
  .review-section-v2,
  .self-review-panel,
  .support-shell,
  .chat-shell,
  .live-chat-shell {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .question {
    scroll-margin-top: 82px;
  }

  .timer,
  .exam-mobile-time {
    max-width: 100%;
  }

  .bubble,
  .support-message,
  .chat-message {
    max-width: 88% !important;
    overflow-wrap: anywhere;
  }

  .image-lightbox img {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 80px) !important;
  }

  .telegram-detail-head--compact > .inline {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .telegram-detail-head--compact > .inline > .btn {
    width: auto !important;
    min-width: 0;
    padding-inline: 10px;
  }
}

@media (max-width: 360px) {
  :root {
    --mobile-page-gap: 8px;
    --mobile-card-pad: 15px;
    --mobile-radius: 17px;
  }

  .main h1,
  html[data-arena-design] .main h1 {
    font-size: clamp(31px, 10.5vw, 38px) !important;
  }

  .studio-metrics,
  .dashboard-score-summary,
  .home-cabinet-score-summary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dashboard-score-summary > div,
  .dashboard-score-summary > div:last-child,
  .home-cabinet-score-summary > div,
  .home-cabinet-score-summary > div:last-child {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  }

  .dashboard-score-summary > div:last-child,
  .home-cabinet-score-summary > div:last-child {
    border-bottom: 0 !important;
  }

  .home-cabinet-elite {
    align-items: flex-start !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}