/* Mobile version: bottom tab bar, compact header, single-column screens, full-screen sheets. */
.mobile-tabs,.mobile-sheet{display:none}

@media(max-width:720px){
  html{-webkit-text-size-adjust:100%}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* the desktop sidebar disappears; the top bar carries logo, page name and coins */
  .app{display:block}
  aside{display:none}
  .topbar{position:sticky;top:0;z-index:15;height:auto;min-height:52px;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:#101112f2;backdrop-filter:blur(8px);gap:8px}
  .topbar .top-logo{display:block;height:24px}
  .topbar>span:first-of-type{display:none}
  .crumb{font-size:12px;letter-spacing:.5px}
  .live{order:5;width:100%;justify-content:flex-start;font-size:10px;margin:0}
  .topbar{flex-wrap:wrap}
  .top-coins{display:block;margin-left:auto}
  .content{padding:14px 12px 24px}

  /* bottom tab bar */
  .mobile-tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:20;left:0;right:0;bottom:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    background:#141516f5;border-top:1px solid #2b2c2e;backdrop-filter:blur(10px)}
  .mobile-tabs button{position:relative;display:grid;justify-items:center;gap:2px;border:0;background:none;color:#8d8e91;font:700 10px 'DM Sans';padding:6px 0;border-radius:8px}
  .mobile-tabs button span{font-size:19px;line-height:1}
  .mobile-tabs button.active{color:#fff;background:#30201f}.mobile-tabs button.active span{color:var(--red)}
  .mobile-tabs .nav-badge{position:absolute;top:2px;right:18%;margin:0}
  .mobile-sheet{position:fixed;inset:0;z-index:25;background:#050607b3;display:flex;align-items:flex-end}
  .mobile-sheet[hidden]{display:none}
  .sheet-panel{width:100%;background:#18191b;border-top:1px solid #49443b;border-radius:16px 16px 0 0;padding:14px 14px calc(78px + env(safe-area-inset-bottom));animation:sheet-up .25s ease-out}
  @keyframes sheet-up{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
  .sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.sheet-head strong{font:900 20px 'Barlow Condensed'}.sheet-head span{color:var(--gold);font-weight:800}
  .sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .sheet-item{position:relative;display:grid;justify-items:center;gap:4px;background:#222325;border:1px solid #393a3c;border-radius:10px;padding:12px 4px;color:#ddd;font:700 11px 'DM Sans'}
  .sheet-item span{font-size:22px}.sheet-item .nav-badge{position:absolute;top:6px;right:8px;margin:0}
  .sheet-actions{display:flex;gap:8px;margin-top:12px}.sheet-actions .secondary{flex:1;padding:12px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}

  /* headlines */
  .headline{display:block;margin-bottom:14px}.headline h1{font-size:30px}.headline p{font-size:11px;margin-top:6px}
  .headline .step{margin:10px 0 0}.headline .go.small{margin-top:10px;width:100%}

  /* live TV */
  .tv-wall{grid-template-columns:1fr;gap:8px}
  .tv-main .tv{height:58vw;min-height:210px}
  .tv-column{grid-template-columns:1fr 1fr;gap:8px}
  .tv-small .tv{height:28vw;min-height:110px}
  .tv-small .tv-hud{padding:5px 6px}.tv-small .tv-label,.tv-small .tv-live{display:none}.tv-small .tv-clock{padding:1px 5px}
  .tv-small .tv-name{font-size:10px}.tv-small .tv-emb{width:14px;height:14px}
  .tv-cta{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr}.tv-cta button{padding:10px 4px;font-size:11px}
  .tv .tv-name{font-size:14px}.tv-clock b{font-size:16px}
  .tv-ticker{margin-top:8px}.tv-ticker-tag{font-size:11px;padding:0 8px}
  .tv-info,.tv-info3{grid-template-columns:1fr;gap:10px;margin-top:10px}
  .tape{grid-template-columns:1fr 1fr;padding:10px}.tape-mid{grid-column:1/-1;grid-row:2}
  .tape-port{width:84px;height:98px}.tape-side strong{font-size:16px}
  .tape-bar{grid-template-columns:1fr 92px 1fr}
  .tv-pbp{max-height:260px}

  /* fight view */
  .fighthead{flex-wrap:wrap;gap:8px}.fighthead h2{font-size:20px}.fighthead .mode-select{margin-left:0;flex:1;padding:7px}
  .fightarena{height:62vw;min-height:240px}
  .fightoverlay{padding:10px}.corner strong{font-size:15px}.corner small{font-size:9px}.clock{font-size:20px;padding:3px 8px}
  .bars{gap:12px;margin-top:8px}.zone-line{display:none}
  .move-caption{transform:scale(.8)}
  .logbox .boxtop{flex-wrap:wrap;height:auto;padding:8px 12px}
  .corner-emblem{width:22px;height:22px;margin:0 4px}
  .winner-banner strong{font-size:34px}

  /* modals become full-screen sheets */
  .creator-backdrop{padding:0;align-items:end}
  .creator-panel{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
  .creator-fields,.creator-stats{grid-template-columns:1fr}
  .creator-actions{position:sticky;bottom:0;background:#1b1c1e;padding-top:10px}
  .creator-actions .go,.creator-actions .secondary{flex:1}
  .ticket-versus{grid-template-columns:1fr auto 1fr}.tv-portrait{height:120px}.tv-side strong{font-size:16px}
  .ticket-bet{grid-template-columns:1fr 1fr}.ticket-picks{grid-column:1/-1}.ticket-bet input{width:100%}
  .pick-grid{grid-template-columns:1fr 1fr}

  /* lists, cards, profile */
  .profile-card{grid-template-columns:1fr;padding:12px}.profile-card .big{height:180px}
  .record{gap:6px}.record span{padding:6px 10px;flex:1}.record b{font-size:20px}
  .fighter-actions{display:grid;grid-template-columns:1fr 1fr}.fighter-actions .go{grid-column:1/-1;width:100%}
  .attr-grid{grid-template-columns:1fr 1fr}
  .academy{grid-template-columns:1fr;padding:12px}.academy .big{height:170px}
  .train-grid{grid-template-columns:1fr 1fr}
  .staff-grid,.cup-grid,.club-grid,.division-grid,.friend-fighters,.cup-entries{grid-template-columns:1fr;padding:10px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:10px 12px}.tabs button{white-space:nowrap}
  .bout{padding:10px}.bout-portrait{width:48px;height:60px}.bout-info strong{font-size:16px}
  .event-betbar{padding:10px 12px}
  .club-hero{padding:12px}.club-title h2{font-size:24px}.emblem-lg{width:84px;height:84px}
  .club-stats span{padding:6px 8px}.club-stats b{font-size:18px}
  .club-level{grid-template-columns:1fr;gap:6px;padding:0 12px 12px}
  .friends-layout{grid-template-columns:1fr}
  .manager-head{flex-wrap:wrap}.manager-actions{margin-left:0}
  .brand-hero,.brand-buy{padding:12px}.brand-hero h2,.brand-buy h2{font-size:24px}
  .injury-card{padding:10px}.inj-head strong{font-size:19px}
  .respec-bar{margin-left:0;width:100%}
  .wallet-grid{grid-template-columns:1fr}
  table.data{font-size:11px}table.data th,table.data td{padding:8px}
  .street-row{grid-template-columns:1fr}.sr-actions{grid-column:1;grid-row:auto}
  .bracket{padding:10px}.bk-round{min-width:190px}
  .vault{grid-template-columns:1fr}
}

/* standalone (installed) app: no browser chrome, keep clear of the notch */
@media(display-mode:standalone){.topbar{padding-top:calc(8px + env(safe-area-inset-top))}}
@media(max-width:720px){.tv-ch,.tv-live{white-space:nowrap}.tv-main .tv-label{display:none}.headline h1{font-size:26px}}