.mobile-participant-list { display:none; }

@media (max-width: 820px) {
  body { font-size:14px; }
  .participation-page { padding:14px 10px 36px !important; }
  .signup-wrap { width:100% !important; }
  .signup-head { text-align:left !important; padding:6px 2px 10px !important; }
  .signup-head h1 { font-size:24px !important; margin:6px 0 4px !important; }

  .form-grid, .form-grid.two, .availability-grid, .hero-grid,
  .import-mode-options, .top-grid, .leadgrid {
    grid-template-columns:1fr !important;
  }

  input, select, textarea {
    min-height:46px !important;
    font-size:16px !important;
    padding:11px 12px !important;
  }

  .availability-grid fieldset {
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
    padding:10px !important;
  }
  .availability-grid legend { grid-column:1/-1; }
  .availability-grid .choice {
    margin:0 !important;
    justify-content:center;
    min-height:44px;
    border:1px solid rgba(135,171,207,.16);
    border-radius:7px;
    background:rgba(2,10,18,.20);
  }

  .troop-grid { grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .troop-title { grid-column:1/-1; color:var(--mis-gold2) !important; }

  .hero-toggle {
    display:grid;
    grid-template-columns:1fr 120px;
    align-items:center;
    gap:10px;
  }
  .hero-toggle select { margin:0 !important; }

  .wide-submit {
    min-height:52px;
    position:sticky;
    bottom:8px;
    z-index:5;
  }

  .shell { display:block !important; }
  aside {
    position:relative !important;
    height:auto !important;
    padding:12px !important;
    border-right:0 !important;
    border-bottom:1px solid var(--mis-line) !important;
  }
  aside nav {
    display:flex !important;
    flex-direction:row !important;
    gap:6px !important;
    overflow-x:auto;
  }
  aside nav a { white-space:nowrap; flex:0 0 auto; }
  .side-link, .side-art { display:none !important; }

  .shell > main { padding:14px 10px 42px !important; }
  header h1 { font-size:21px !important; }
  .card { padding:13px !important; }
  .stats { grid-template-columns:1fr 1fr !important; }

  .section-head {
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  .section-actions {
    width:100%;
    display:grid !important;
    grid-template-columns:1fr 1fr;
  }

  .participation-table { display:none !important; }
  .mobile-participant-list { display:grid !important; gap:9px; }

  .mobile-participant-card {
    border:1px solid rgba(135,171,207,.14);
    border-radius:8px;
    padding:12px;
    background:rgba(2,10,18,.22);
  }
  .mobile-participant-head {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
  }
  .mobile-participant-name { font-size:15px; font-weight:800; }
  .mobile-participant-alliance {
    color:var(--mis-gold2);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .mobile-attendance {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
    margin-bottom:9px;
  }
  .mobile-attendance > div {
    border:1px solid rgba(135,171,207,.12);
    border-radius:6px;
    padding:7px 5px;
    text-align:center;
    font-size:10px;
  }
  .mobile-attendance strong { display:block; margin-top:2px; font-size:11px; }
  .mobile-player-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 10px;
    font-size:11px;
    color:var(--mis-muted);
  }
  .mobile-player-grid b { color:var(--mis-text); }
  .mobile-heroes {
    margin-top:9px;
    font-size:11px;
    line-height:1.55;
    color:var(--mis-muted);
  }
  .mobile-card-actions { margin-top:10px; }

  .table-scroll { -webkit-overflow-scrolling:touch; overflow-x:auto !important; }
  .table-scroll table:not(.participation-table) { min-width:720px; }
  .inline-form { grid-template-columns:1fr !important; }
  .import-mode-options { grid-template-columns:1fr !important; }
}