/* Phone and tablet refinements. Keep zoom available and wide boards scrollable. */
@media (max-width: 1100px), (pointer: coarse) {
  .main-content, .main-content > *, .event-layout > *, .split > *,
  .panel, .studio-panel, .ec-shell, .ec-main { min-width: 0; }
  .page-heading h1, .card-body h3, .ec-room-card h2,
  .desk-event-name h3, .control-heading h1 { overflow-wrap: anywhere; }
  .button, .section-head .button, .page-heading > .button,
  .card-actions > .button, .home-competition .card-actions .button, .filter-bar > .button,
  .studio-toolbar .button, .studio-footer .button,
  .desk-event-action .button, .ec-compose-footer .button {
    min-height: 44px;
    font-size: 13px;
    line-height: 1.45;
    white-space: normal;
  }
  .icon-button, .save-button, .top-tools .avatar,
  .top-tools .icon-button, .home-competition .save-button {
    width: 44px; height: 44px; min-height: 44px; flex-shrink: 0;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  select, textarea, .filter-bar input, .filter-bar select,
  .studio-fields input, .studio-fields select, .studio-fields textarea,
  .studio-fields textarea[name=rules], .experience-panel input,
  .experience-panel select, .experience-panel textarea,
  .ec-composer textarea, .ba-search input, .ba-status select {
    font-size: 16px; min-height: 48px;
  }
  input, select, textarea { scroll-margin-block: 100px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 22px; }
  .check { min-height: 44px; align-items: center; font-size: 14px; }
  label, .studio-fields label { font-size: 14px; }
  .tabs a { min-height: 48px; display: flex; align-items: center; font-size: 14px; }
  .tabs { overflow-x: auto; overscroll-behavior-x: contain; }
  .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .filter-bar summary, .ba-view-switch button, .ba-tool,
  .ba-round-nav button, .ba-lanes button, .ba-zoom button {
    min-height: 44px; font-size: 13px;
  }
  .ba-zoom button, .ba-tool { min-width: 44px; }
  .ba-search { margin-bottom: 0; }
  .ba-match-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .ba-detail-top button, .seed-list button { min-width: 44px; min-height: 44px; }
  .seed-list strong { overflow-wrap: anywhere; min-width: 0; }
  .ec-message p { font-size: 15px; line-height: 1.65; }
  .ec-message-meta strong { font-size: 14px; }
  .ec-message-meta time, .ec-connection, .ec-day { font-size: 11px; }
  .ec-role { font-size: 10px; }
  .ec-message-actions { gap: 6px 12px; }
  .ec-message-actions button, .ec-sidebar button, .ec-history-controls button,
  .ec-composer [data-chat-reply] button {
    min-height: 44px; padding: 8px 4px; font-size: 13px;
  }
  .ec-feed-heading p, .ec-sidebar p, .ec-sidebar a,
  .ec-pins p, .ec-empty p, .ec-room-card p { font-size: 14px; }
  .ec-sidebar small, .ec-compose-footer > small, .ec-composer .field-hint,
  .ec-room-card small, .ec-room-card [data-room-unread],
  .ec-history-controls span { font-size: 12px; }
  .ec-sidebar a { min-height: 44px; align-items: center; }
  .ec-pins summary { min-height: 44px; padding-block: 10px; font-size: 13px; }
  .ec-channels a { min-height: 48px; font-size: 14px; }
  .ec-channels a > span { flex-shrink: 0; }
  .ec-composer > label { font-size: 13px; }
  .ec-composer textarea { min-height: 96px; max-height: 40dvh; line-height: 1.6; }
  .ec-compose-footer { flex-wrap: wrap; }
  .ec-compose-footer > small { max-width: none; }
  .ec-dialog label, .ec-dialog p { font-size: 14px; }
  .ec-dialog { max-height: calc(100dvh - 32px); }
  .auth-hint, .auth-role small, .auth-terms label,
  .auth-switch, .auth-confirm-help { font-size: 13px; }
  .auth-field > label, .auth-roles legend { font-size: 14px; }
  .auth-tabs a, .auth-text-button, .auth-confirm-help summary,
  .auth-back, .auth-footer a { min-height: 44px; }
  .auth-text-button, .auth-confirm-help summary { display: flex; align-items: center; }
  .auth-footer a { display: inline-flex; align-items: center; }
  .auth-terms label { padding-block: 8px; }
  .auth-terms input { flex: 0 0 22px; }
  .auth-shell { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
}

@media (max-width: 960px) {
  :root { --sidebar: 0px; --mobile-header: calc(68px + env(safe-area-inset-top, 0px)); }
  .topbar {
    height: var(--mobile-header); gap: 10px;
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  }
  .topbar .brand { flex: 0 0 auto; gap: 8px; }
  .top-nav, .top-search { display: none; }
  .menu-toggle { display: grid; }
  .top-tools { min-width: 0; gap: 8px; }
  .top-tools .button { min-height: 44px; padding: 10px; gap: 6px; font-size: 12px; }
  .sidebar {
    top: var(--mobile-header); width: min(300px, calc(100vw - 56px));
    transform: translateX(-100%); visibility: hidden; pointer-events: none;
    padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: contain;
  }
  .nav-open .sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav-open .nav-scrim { display: block; position: fixed; inset: var(--mobile-header) 0 0; z-index: 24; border: 0; background: #0009; }
  .side-nav a { min-height: 48px; padding: 12px; gap: 12px; font-size: 15px; }
  .nav-label { font-size: 11px; }
  .side-promo p, .side-promo a, .sidebar-bottom > .side-note { font-size: 13px; }
  .side-promo a { display: flex; align-items: center; min-height: 44px; }
  .main-wrap { margin-left: 0; padding-top: var(--mobile-header); }
  .main-content { padding: 20px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
  .workspace-bar { padding: 8px 16px; gap: 8px; }
  .workspace-bar .breadcrumb { min-width: 0; flex-wrap: wrap; font-size: 12px; gap: 6px; }
  .environment > span { display: none; }
  .environment select { max-width: min(180px, 46vw); font-size: 14px; min-height: 44px; }
  .page-heading { align-items: flex-start; flex-wrap: wrap; }
  .page-heading > div { min-width: 0; }
  .page-heading p, .section-intro, .panel > p, .player-start p,
  .practice-body p, .discovery-host p, .discovery-board > p { font-size: 15px; }
  .hero-copy p, .discovery-hero .hero-copy p { font-size: 15px; max-width: 36ch; }
  .hero-copy .eyebrow, .discovery-hero .hero-copy .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  .hero-copy .button, .discovery-hero .hero-copy .button { min-height: 48px; font-size: 14px; padding: 12px 14px; }
  .discovery-steps strong { font-size: 14px; }
  .discovery-steps small { font-size: 12px; line-height: 1.6; }
  .discovery-games .game-shortcut strong, .game-shortcut strong { font-size: 14px; }
  .section-head > a { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
  .arena-update strong { font-size: 15px; }
  .arena-update small, .arena-update div > span { font-size: 13px; }
  .card-facts, .card-schedule, .card-schedule strong, .card-body > small { font-size: 13px; }
  .tag, .entry-label { font-size: 11px; white-space: normal; }
  .card-actions { flex-wrap: wrap; align-items: center; }
  .card-actions > .button { min-width: 0; }
  .game-tile p, .studio-step-title p, .studio-option p,
  .studio-callout p, .field-hint { font-size: 14px; }
  .studio-option strong, .studio-fields label { font-size: 14px; }
  .studio-option small, .studio-save-state { font-size: 12px; }
  .studio-steps b { font-size: 12px; }
  .studio-toolbar, .studio-toolbar > div, .studio-footer { flex-wrap: wrap; }
  .studio-save-state { max-width: 170px; }
  .footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .footer nav { gap: 4px 16px; }
  .footer a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
  .auth-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  #modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  #modal > p { max-height: 45dvh; }
  #toast { max-width: calc(100vw - 32px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); overflow-wrap: anywhere; }
  .ba-fullscreen { inset: 8px; width: calc(100vw - 16px) !important; height: calc(100dvh - 16px); }
}

@media (max-width: 600px) {
  .form-grid, .account-grid, .cards, .home-competition .cards { grid-template-columns: minmax(0, 1fr); }
  .home-competition .cards .event-card:last-child { display: block; }
  .form-grid { gap: 0; }
  .card-body, .home-competition .card-body { padding: 20px; }
  .card-body h3, .home-competition .card-body h3 { font-size: 21px; min-height: 0; }
  .event-cover, .home-competition .event-cover { height: 175px; }
  .filter-bar { gap: 14px; }
  .filter-bar > label { min-width: 0; flex-basis: 100%; }
  .filter-bar > details { min-width: 0; flex-basis: 100%; }
  .filter-bar details[open] { display: block; }
  .filter-bar > .button { min-width: 110px; }
  .tabs { gap: 20px; }
  .tabs a { flex-shrink: 0; }
  .detail-facts { gap: 16px; }
  .detail-facts > div { min-width: 0; overflow-wrap: anywhere; }
  .event-hero h1, .game-hub-hero h1 { font-size: clamp(30px, 9vw, 44px); overflow-wrap: anywhere; }
  .event-layout.is-bracket > aside > .panel { min-width: 0; flex-basis: 100%; }
  .studio-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-steps button { min-height: 70px; }
  .studio-steps b { min-height: 0; line-height: 1.4; }
  .studio-field-head { flex-wrap: wrap; }
  .game-search { max-width: none; width: 100%; }
  .studio-footer .button { flex: 1; }
  .ec-page-heading h1 { font-size: 30px; overflow-wrap: anywhere; }
  .ec-page-heading > .button-group { gap: 10px; }
  .ec-page-heading > .button-group .button { flex: 1; }
  .ec-channels { flex-wrap: wrap; }
  .ec-channels a { flex: 1 1 130px; gap: 6px; padding: 10px 8px; }
  .ec-feed { height: clamp(160px, 40dvh, 420px); min-height: 160px; }
  .ec-feed-heading { padding: 18px 16px 10px; }
  .ec-composer { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .ec-compose-footer .button { margin-left: auto; min-width: 100px; }
  .ec-composer [data-chat-reply] { align-items: center; flex-wrap: wrap; font-size: 13px; }
  .ec-sidebar { grid-template-columns: minmax(0, 1fr); }
  .ec-sidebar section { padding: 18px; }
  .ec-sidebar h3 { font-size: 17px; }
  .ec-sidebar .eyebrow { font-size: 10px; }
  .ec-member-count span { font-size: 13px; }
  .ec-dialog { padding: 22px 18px; }
  .ba-hero { flex-wrap: wrap; }
  .ba-hero > div { min-width: 0; }
  .ba-hero h2 { max-width: none; overflow-wrap: anywhere; }
  .ba-toolbar { padding: 14px 12px; }
  .ba-search { min-width: 0; flex-basis: 100%; }
  .ba-status { min-width: 0; flex: 1 1 100%; }
  .ba-status select { max-width: none; width: 100%; }
  .bracket-arena[data-view=list] .ba-canvas { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .bracket-arena[data-view=list] .ba-match { height: 136px; }
  .bracket-arena[data-view=list] .ba-match-meta { height: 32px; font-size: 11px; }
  .ba-match-meta > b, .ba-seed { font-size: 11px; }
  .bracket-arena[data-view=list] .ba-entrant { height: 51px; }
  .ba-name { font-size: 14px; }
  .ba-score { font-size: 16px; }
  .ba-pending .ba-name { font-size: 13px; }
  .ba-hint, .ba-legend { font-size: 12px; }
  .seed-list li { flex-wrap: wrap; gap: 8px; }
  .seed-list strong { flex-basis: calc(100% - 46px); }
  .auth-intro > p { font-size: 15px; }
  .auth-role > span { min-height: 124px; }
  .auth-submit.button { min-height: 52px; font-size: 16px; }
}

@media (max-width: 390px) {
  .topbar .brand img { width: 28px; height: 28px; }
  .top-tools .button span { display: none; }
  .workspace-bar .breadcrumb > span { display: none; }
  .discovery-hero .hero-copy { padding: 24px 18px; }
  .discovery-hero .hero-copy h1 { font-size: clamp(39px, 12vw, 48px); }
  .hero-copy .button-group { align-items: stretch; flex-direction: column; }
  .hero-copy .button { width: 100%; }
  .studio-options { grid-template-columns: minmax(0, 1fr); }
  .studio-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-panel { padding-inline: 18px; }
  .auth-header { padding-inline: 16px; }
  .auth-back { font-size: 12px; }
}