/* PitchPulse V0.5.2 — Mobile Arena Rebuild
   The Arena becomes a true mobile screen instead of a desktop modal squeezed into a phone. */

/* Arena must always sit above the mobile dock and every ordinary page layer. */
#arenaModal{z-index:140}
#arenaModal .v50ArenaModal,#arenaModal .v50ArenaModal *{min-width:0}
#v50ArenaBody{min-width:0;max-width:100%;overflow-x:hidden}
body.v052-arena-open{overflow:hidden!important}
body.v052-arena-open .v50MobileDock{display:none!important}

/* Better tap targets and wrapping everywhere in Arena. */
#arenaModal button,#arenaModal input,#arenaModal select{touch-action:manipulation}
#arenaModal button{max-width:100%}
#arenaModal h1,#arenaModal h2,#arenaModal h3,#arenaModal p,#arenaModal b,#arenaModal small,#arenaModal span{overflow-wrap:anywhere}

@media(max-width:720px){
  /* Full-screen, keyboard-aware Arena shell. */
  #arenaModal{
    inset:auto 0 auto 0;
    top:var(--pp-arena-top,0px);
    width:100%;
    height:var(--pp-arena-vh,100dvh);
    min-height:var(--pp-arena-vh,100dvh);
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    overflow:hidden;
    background:rgba(1,6,4,.96);
  }
  #arenaModal.open{display:flex}
  #arenaModal .v50ArenaModal{
    width:100%!important;
    max-width:none!important;
    height:100%;
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
    padding:max(14px,env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-padding-top:12px;
    scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom));
  }
  #arenaModal .v50ArenaModal:before{width:230px;height:230px;inset:-70px -90px auto auto}

  /* Close stays reachable even after a long scroll. */
  #v50Close{
    position:sticky;
    z-index:12;
    top:4px;
    right:auto;
    float:none;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    margin:0 0 -44px auto;
    border-radius:13px;
    background:rgba(31,49,40,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 8px 22px rgba(0,0,0,.22);
  }

  /* Header is compact and readable, rank becomes a small full-width card. */
  .v50ArenaTop{display:block;padding:5px 54px 0 0}
  .v50ArenaTop .eyebrow{display:block;font-size:.61rem;line-height:1.25;letter-spacing:.12em}
  .v50ArenaTop h2{font-size:clamp(1.45rem,7vw,1.9rem);line-height:1.05;margin:8px 0 8px;letter-spacing:-.025em}
  .v50ArenaTop p{font-size:.82rem;line-height:1.45;margin:0;color:#a7b7ae}
  #v50RankChip{margin:14px -54px 0 0}
  .v50Rank{width:100%;min-width:0;min-height:68px;padding:10px 13px}
  .v50Rank>span{font-size:1.65rem}
  .v50Rank small{font-size:.55rem}.v50Rank b{font-size:.86rem}

  /* No clipped horizontal tab text: 5 tabs become a clean wrapping grid. */
  .v50ArenaNav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin:14px 0 12px;
    padding:6px;
    overflow:visible;
    border-radius:15px;
  }
  .v50ArenaNav button{
    min-height:44px;
    width:100%;
    padding:8px 5px;
    border-radius:10px;
    white-space:normal;
    line-height:1.12;
    text-align:center;
    font-size:clamp(.68rem,3.1vw,.78rem);
  }
  .v50ArenaNav button:nth-child(4){grid-column:1/2}
  .v50ArenaNav button:nth-child(5){grid-column:2/4}

  /* Mode cards and action area. */
  .v50ModeHero{padding:13px;margin-bottom:9px;gap:11px}
  .v50ModeHero h3{font-size:1.05rem}.v50ModeHero p{font-size:.74rem;line-height:1.5}
  .v50ModeHero .primary{width:100%;min-height:48px}
  .v50ModeGrid{grid-template-columns:1fr;gap:8px}
  .v50ModeCard{min-height:142px;padding:13px}
  .v50ModeCard p{font-size:.72rem;line-height:1.45;padding-right:4px}
  .v50ModeCard h3{font-size:.92rem}.v50ModeCard small{font-size:.54rem}
  .v50LaunchBar{grid-template-columns:1fr;gap:8px;padding-bottom:4px}
  .v50LaunchBar>div{grid-column:1;display:grid;grid-template-columns:1fr auto;width:100%;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.025)}
  .v50LaunchBar select{min-height:42px}

  /* Online lobby: Quick Match -> Join Code -> Create Room on phones. */
  .v50OnlineGrid{display:flex;flex-direction:column;gap:9px}
  .v50OnlineGrid .v50LobbyCard:nth-child(1){order:1}
  .v50OnlineGrid .v50LobbyCard:nth-child(3){order:2}
  .v50OnlineGrid .v50LobbyCard:nth-child(2){order:3}
  .v50LobbyCard{min-height:0;padding:14px}
  .v50LobbyCard>span{font-size:1.55rem}
  .v50LobbyCard small{margin-top:7px;font-size:.55rem}
  .v50LobbyCard h3{font-size:.96rem;margin:5px 0}
  .v50LobbyCard p{min-height:0;margin:7px 0 13px;font-size:.73rem;line-height:1.45}
  .v50LobbyCard button{min-height:48px}
  .v50CodeJoin{margin-top:10px;align-items:stretch}
  .v50CodeJoin input{
    min-height:50px;
    font-size:1rem;
    letter-spacing:.08em;
    scroll-margin-bottom:180px;
  }
  .v50CodeJoin button{flex:0 0 auto;min-width:86px}
  .v51OfficialServer{margin:10px 0;padding:11px 12px}
  .v51OfficialServer b{font-size:.72rem}.v51OfficialServer small{font-size:.58rem;line-height:1.35}
  .v50OnlineStatus{padding:11px}.v50OnlineStatus b{font-size:.75rem}.v50OnlineStatus small{font-size:.59rem;line-height:1.4}

  /* Game shell: nothing fixed at the bottom, the whole game scrolls naturally. */
  .v50GameShell{min-height:0;padding-bottom:8px}
  .v50GameHeader{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;margin:2px 0 9px}
  .v50GameHeader>div:nth-child(2){text-align:left}
  .v50GameHeader h3{font-size:.93rem;line-height:1.2;margin:2px 0}
  .v50GameHeader small{font-size:.53rem}
  .v50Back{min-height:42px;padding:8px 10px;white-space:nowrap}
  .v50GameHeader .v50Conn{grid-column:1/-1;min-height:34px;padding:7px 9px;text-align:center;justify-self:stretch;white-space:normal;line-height:1.3}

  .v50Scoreboard{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:5px;padding:9px 7px;border-radius:15px}
  .v50Scoreboard>div,.v50Scoreboard>div.rival{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 6px;align-items:center}
  .v50Scoreboard>div>span{font-size:1.25rem}
  .v50Scoreboard>div>b{font-size:.64rem;line-height:1.2;white-space:normal;text-overflow:ellipsis;overflow:hidden}
  .v50Scoreboard>div>strong,.v50Scoreboard .rival strong{grid-column:1/-1!important;order:5!important;margin:1px 0 0!important;text-align:center;font-size:1.8rem}
  .v50Scoreboard section b{font-size:.9rem}.v50Scoreboard section em{font-size:.44rem;line-height:1.2}
  .v50Scoreboard small{display:none}

  .v50GameStage{min-height:0;margin-top:9px;padding:12px 10px 16px;border-radius:17px;overflow:visible}
  .v50Waiting{min-height:310px;padding:18px 4px;text-align:center}
  .v50Waiting p{font-size:.75rem;line-height:1.45}

  /* Round/timer stays on one compact readable line. */
  .v50RoundMeta{grid-template-columns:auto minmax(70px,1fr) auto;gap:8px;margin:2px 0 12px}
  .v50RoundMeta>span,.v50RoundMeta>b{font-size:.58rem;letter-spacing:.06em;white-space:nowrap}
  .v50Timer{height:8px}

  /* Fastest Player. */
  .v50MysteryCard{grid-template-columns:1fr;gap:10px;margin:0 0 10px;padding:11px;border-radius:17px}
  .v50Silhouette{height:94px;border-radius:14px}
  .v50Silhouette span{width:58px;height:58px;font-size:2rem}
  .v50MysteryCard h3{font-size:1.04rem;margin:4px 0 8px}
  .v50MysteryCard small,.v50ClubQuestion>small{font-size:.56rem}
  .v50Clues{gap:5px}.v50Clues span{padding:8px;font-size:.72rem;line-height:1.3}
  .v50Answers{grid-template-columns:1fr;gap:7px}
  .v50Answers button{min-height:52px;padding:11px 12px;border-radius:12px}
  .v50Answers button b{font-size:.78rem;line-height:1.25}
  .v50RuleLine{font-size:.59rem;line-height:1.45;margin-top:10px;padding:0 5px}
  .v50RoundToast{margin-top:10px;padding:10px;gap:5px}.v50RoundToast b{font-size:.72rem}.v50RoundToast small{font-size:.62rem;line-height:1.35}

  /* Two Clubs remains side-by-side but names can wrap safely. */
  .v50ClubQuestion{margin:2px auto 11px}
  .v50ClubPair{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:6px;margin:9px 0}
  .v50ClubPair>div{flex-direction:column;justify-content:center;gap:7px;min-height:116px;padding:9px 7px;text-align:center}
  .v50ClubPair>div>span{width:46px;height:46px;border-radius:13px;font-size:.62rem}
  .v50ClubPair>div>b{font-size:.74rem;line-height:1.2}
  .v50ClubPair em{font-size:1.05rem}
  .v50ClubQuestion p{font-size:.66rem;line-height:1.4}

  /* Live Draft cards become readable vertical cards instead of squeezed 3-up cards. */
  .v50DraftTop{display:block}.v50DraftTop p{font-size:.68rem;line-height:1.4;margin:5px 0}
  .v50DraftCards{grid-template-columns:1fr;gap:7px;margin:12px 0}
  .v50DraftCards button{grid-template-columns:auto 1fr auto;align-items:center;min-height:86px;padding:11px 12px;border-radius:15px}
  .v50DraftCards button small{grid-column:1;font-size:.55rem}.v50DraftCards button strong{grid-column:3;grid-row:1/3;font-size:1.35rem}
  .v50DraftCards button span{grid-column:1;grid-row:2;margin:0;font-size:1.3rem}.v50DraftCards button b{grid-column:2;grid-row:1/3;font-size:.78rem}
  .v50DraftCards button em{grid-column:1/-1;grid-row:3;font-size:.52rem}
  .v50DraftRosters,.v50DraftFinal{grid-template-columns:1fr;gap:7px}.v50DraftRosters span{font-size:.62rem;line-height:1.4}

  /* Manager & penalty. */
  .v50ManagerFaceoff{grid-template-columns:1fr 38px 1fr;gap:5px;margin:14px auto}
  .v50ManagerFaceoff>div{padding:10px 6px}.v50ManagerFaceoff>div>span{font-size:1.6rem}.v50ManagerFaceoff h3{font-size:.72rem;line-height:1.2}.v50ManagerFaceoff p{font-size:.56rem;line-height:1.35}
  .v50TacticChoices{grid-template-columns:1fr;gap:7px;margin:12px auto}.v50TacticChoices button{min-height:64px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;align-items:center;padding:10px 12px}.v50TacticChoices button span{grid-row:1/3;font-size:1.45rem}.v50TacticChoices button b{margin:0}.v50TacticChoices button small{font-size:.58rem}
  .v50Penalty{margin:12px auto}.v50Goal{min-height:135px}.v50Goal span{font-size:2.6rem}.v50PenaltyZones{gap:6px}.v50PenaltyZones button{padding:13px 6px;font-size:.7rem}

  /* Squad/result/stat pages. */
  .v50BattleHero{padding:18px 5px}.v50BattleHero>span{font-size:2.5rem}.v50BattleHero h3{font-size:.9rem;line-height:1.35}.v50BattleHero p{font-size:.7rem}
  .v50PowerCompare{grid-template-columns:76px minmax(0,1fr) 76px;gap:5px}.v50PowerCompare>div{padding:9px 4px}.v50PowerCompare>div b{font-size:1.35rem}.v50PowerCompare section div{grid-template-columns:48px 1fr;gap:4px}.v50PowerCompare section span{font-size:.45rem}
  .v50BattleDetails{gap:5px;margin:10px 0}.v50BattleDetails span{font-size:.55rem}
  .v50FinishBtn{width:100%;min-height:48px}
  .v50Result{min-height:330px;padding:18px 4px}.v50Result>span{font-size:3rem}.v50Result h2{font-size:1.8rem}.v50FinalScore b{font-size:2rem}.v50Result p{font-size:.72rem;line-height:1.45}.v50ResultActions{width:100%;display:grid;grid-template-columns:1fr}.v50ResultActions button{width:100%;min-height:46px}
  .v50StatsHero{grid-template-columns:1fr;gap:7px}.v50StatsHero>div{min-height:105px}.v50ModeStats{grid-template-columns:1fr}.v50ModeStats article{grid-template-columns:auto minmax(0,1fr) auto}.v50KnowledgeStats span{min-width:100%;font-size:.63rem}
  .v50Rules{grid-template-columns:1fr}.v50Rules p{font-size:.69rem;line-height:1.55}

  /* Global stats stay readable and never force horizontal overflow. */
  .v51GlobalHead{padding:13px}.v51GlobalHead h3{font-size:1.1rem}.v51GlobalHead p{font-size:.68rem}
  .v51TodayGrid{gap:6px}.v51TodayGrid article{min-height:92px;padding:10px}.v51TodayGrid article>span{font-size:1.2rem}.v51TodayGrid b{font-size:1.15rem}.v51TodayGrid em{font-size:.52rem}
  .v51TrendGrid article{padding:10px}.v51TrendGrid header{grid-template-columns:auto minmax(0,1fr) auto}.v51TrendGrid header strong{font-size:.72rem}.v51Spark{gap:3px}.v51AllTime{gap:6px}
}

@media(max-width:420px){
  #arenaModal .v50ArenaModal{padding-left:11px;padding-right:11px}
  .v50ArenaNav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v50ArenaNav button:nth-child(4),.v50ArenaNav button:nth-child(5){grid-column:auto}
  .v50ArenaNav button:last-child{grid-column:1/-1}
  .v50CodeJoin{flex-direction:column}
  .v50CodeJoin button{width:100%}
  .v50Scoreboard{grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr)}
  .v50Scoreboard>div>span{font-size:1.05rem}.v50Scoreboard>div>b{font-size:.58rem}.v50Scoreboard>div>strong,.v50Scoreboard .rival strong{font-size:1.55rem}
  .v50Scoreboard section b{font-size:.78rem}.v50Scoreboard section em{font-size:.4rem}
  .v50RoundMeta{grid-template-columns:auto minmax(54px,1fr) auto;gap:6px}.v50RoundMeta>span,.v50RoundMeta>b{font-size:.52rem}
  .v50ClubPair>div{min-height:108px}.v50ClubPair>div>b{font-size:.69rem}
  .v51TodayGrid,.v51AllTime{grid-template-columns:1fr 1fr}
}

/* Small landscape phones also use the full-screen Arena even when width > 720px. */
@media(max-width:1000px) and (max-height:560px) and (orientation:landscape){
  #arenaModal{z-index:140;padding:0;align-items:stretch;top:var(--pp-arena-top,0px);height:var(--pp-arena-vh,100dvh);bottom:auto}
  #arenaModal .v50ArenaModal{width:100%!important;max-width:none!important;height:100%;max-height:none;border-radius:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.v052-arena-open .v50MobileDock{display:none!important}
}