/* Shared UI corrections. Card artwork and Card Arena rendering are unaffected. */
.draft-mobile-hint{display:none}
body.approved-site :is(.hub-utility-page,.hub-page-source,.draft-modal-content,.hub-dialog-card){
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
body.approved-site #draftPickingScreen{overflow-anchor:none}
/* Legacy blue-grey secondary copy was designed for a different dark palette. */
html[data-fc-theme=dark][data-fc-theme=dark] body.approved-site :is(
  .profiles-modal,.profile-modal,#leaderboardModal,.guide-container,
  .patchnotes-modal,.db-modal,.activity-widget,.active-users-widget,.chat-widget
) :is(p,small,label,li,td,th,span,.profiles-card-meta,.profiles-head-sub,.profiles-count,
  .profiles-mini-label,.profile-public-meta,.profile-public-stat-label,.profile-meta,
  .profile-row-label,.profile-stat-label,.profile-unranked,.leaderboard-explainer,
  .leaderboard-empty,.leaderboard-footer,.guide-p,.guide-subtitle,.chat-msg-time,
  .chat-char-count,.history-day-counter,.act-time,.active-user-status):not(.approved-card *, .pack-card *, .profiles-avatar *, .profile-public-avatar *, .profiles-online,.profile-public-role,.mode-tag){
  color:var(--hub-muted)!important;text-shadow:none!important;
}
html[data-fc-theme=dark] body.approved-site :is(.activity-widget .act-text,.chat-widget .chat-msg>span:not(.chat-msg-time),.db-modal .db-item){color:var(--hub-text)!important}
html[data-fc-theme=dark] body.approved-site .profiles-mini-stat .profiles-mini-label{color:var(--hub-muted)!important}
html[data-fc-theme=dark][data-fc-theme=dark] body.approved-site .mode-tag.hunter{color:#c5a4ff!important}
html[data-fc-theme=dark][data-fc-theme=dark] body.approved-site #leaderboardModal strong{color:var(--hub-text)!important}
body.approved-site :is(.hub-room-roster,.hub-room-info,.hub-draft-roster,.player-card,.inventory){min-width:0}
body.approved-site :is(.hub-room-roster,.player-card,.inventory) :is(h2,h3,.inv-item){overflow-wrap:anywhere}

/* The racetrack and its labels intentionally stay dark in both themes. */
html[data-fc-theme] body.approved-site :is(.drag-strip,.racer-data-pill,.track-hud-top,.one-v-one-round-progress){
  background:#111820!important;color:#f8f3e9!important;
}
html[data-fc-theme][data-fc-theme] body.approved-site :is(.drag-strip,.racer-data-pill,.track-hud-top,.one-v-one-round-progress) :is(span,b,strong,div,h2,h3){
  color:#f8f3e9!important;text-shadow:none!important;
}
html[data-fc-theme][data-fc-theme] body.approved-site .racer-name-text{color:#fffaf0!important;text-shadow:none!important}
html[data-fc-theme=light] body.approved-site .race-showcase-container{
  background:var(--hub-surface)!important;color:var(--hub-text)!important;
  border-color:var(--hub-line)!important;box-shadow:0 4px 16px #20150920!important;
}
html[data-fc-theme=light] body.approved-site .race-showcase-container :is(.ai-rating-breakdown,.hub-race-score,h3){color:var(--hub-text)!important;text-shadow:none!important}
html[data-fc-theme=light] body.approved-site :is(.race-footer-labels,.track-labels){color:var(--hub-muted)!important}
html[data-fc-theme=light][data-fc-theme=light] body.approved-site #hubPlay .play-title :is(h2,p){color:var(--hub-text)!important;text-shadow:none!important}
html[data-fc-theme][data-fc-theme] body.approved-site #draftOptionsModal .hold-squad-btn{
  color:var(--hub-text)!important;background:var(--hub-panel)!important;border-color:var(--hub-line)!important;text-shadow:none!important;
}
html[data-fc-theme][data-fc-theme] body.approved-site #votingScreen .vote-btn.tie-btn{
  color:var(--hub-text)!important;background:var(--hub-panel)!important;border-color:var(--hub-line)!important;
}
html[data-fc-theme][data-fc-theme] body.approved-site #podiumScreen .tm-team-box{
  background:var(--hub-panel)!important;color:var(--hub-text)!important;
}
html[data-fc-theme][data-fc-theme] body.approved-site #podiumScreen .tm-team-line,
html[data-fc-theme][data-fc-theme] body.approved-site #podiumScreen .tm-team-line :is(span,b,strong){color:var(--hub-text)!important;text-shadow:none!important}
html[data-fc-theme] body.approved-site #hubLaunchWff{background:#825022!important;color:#fffaf0!important}
/* Names belong on the themed profile surface, below the photo/banner gradient. */
html body.approved-site .profile-public-banner{position:relative!important;inset:auto!important;height:160px!important}
html body.approved-site .profile-public-identity{padding:16px 20px 20px!important;align-items:flex-start!important}
html body.approved-site .profile-public-avatar{margin-top:-48px;flex-shrink:0;border-color:var(--hub-panel)!important}
html body.approved-site .profile-public-identity>div:not(.profile-public-avatar){min-width:0;flex:1}
html body.approved-site .profile-public-name{overflow-wrap:anywhere!important;line-height:1.2!important}
html[data-fc-theme] body.approved-site .profiles-toolbar{background:var(--hub-panel)!important;color:var(--hub-text)!important}
html[data-fc-theme=light][data-fc-theme=light] body.approved-site .profiles-online.profiles-offline{background:#453728!important;color:#fffaf3!important}
html[data-fc-theme] body.approved-site :is(button,input,select,textarea):disabled{
  opacity:1!important;color:var(--hub-muted)!important;
  background:var(--hub-panel)!important;cursor:not-allowed;
}

/* Fixed offers must fit between the shell bars, rather than remain 100vh tall. */
html body.approved-site #draftOptionsModal{
  height:auto!important;width:auto!important;
  inset:var(--hub-fit-top,104px) 0 var(--hub-fit-bottom,64px)!important;
  padding:8px!important;box-sizing:border-box;overflow:auto!important;
}
html body.approved-site #draftOptionsModal .draft-modal-content{
  box-sizing:border-box!important;max-height:100%!important;margin:auto!important;
}
html body.approved-site #draftOptionsModal .draft-modal-content.squad-view-open{
  position:relative!important;top:auto!important;left:auto!important;transform:none!important;
  height:100%!important;max-height:100%!important;min-width:0!important;
}
html body.approved-site #hubCommunity .community-panel{box-sizing:border-box!important;width:min(800px,100%)!important;max-width:100%!important;min-width:0!important}
html body.approved-site :is(.active-users-widget,.activity-widget,.chat-widget){box-sizing:border-box;overflow-wrap:anywhere}

@media(max-width:800px){
  html body.approved-site #draftOptionsModal{inset:144px 0 calc(66px + env(safe-area-inset-bottom))!important}
  html body.approved-site #draftOptionsModal .draft-modal-content{max-width:100%!important;width:min(650px,100%)!important}
  html body.approved-site #draftOptionsModal .squad-view-open{display:flex!important;flex-direction:column!important;height:auto!important;max-height:100%!important;overflow-y:auto!important}
  html body.approved-site :is(#matchupResultGrids,#playersContainer){min-width:0!important}
  html body.approved-site .racer-data-pill{max-width:min(150px,40vw);box-sizing:border-box}
  html body.approved-site .racer-name-text{overflow:hidden;text-overflow:ellipsis}
  html body.approved-site :is(.activity-widget,.active-users-widget){left:8px!important;right:8px!important;width:auto!important;max-width:none!important}
  html body.approved-site .activity-widget.online-open{max-height:calc((100dvh - 226px)/2)!important}
  html body.approved-site .active-users-widget.history-open{top:calc(158px + (100dvh - 226px)/2)!important;max-height:calc((100dvh - 226px)/2 - 8px)!important}
  html body.approved-site .chat-widget:not(.minimized){max-height:calc(100dvh - 226px)!important;height:min(430px,calc(100dvh - 226px))!important}
  html body.approved-site .hub-page-source :is(table,pre){display:block;overflow-x:auto}
  html body.approved-site .hub-page-source :is(h1,h2,h3,p){overflow-wrap:anywhere}
  html body.approved-site .profile-public-identity{padding:16px 14px 18px!important;gap:12px!important}
  html body.approved-site :is(.feedback-card,.profile-modal){box-sizing:border-box!important;max-width:100%!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important}
}

/* A short landscape screen needs a compact shell and scrollable dialog content. */
@media(max-width:1000px) and (max-height:500px){
  html body.approved-site:not(.arena-open){padding-top:98px!important;padding-bottom:50px!important}
  html body.approved-site:not(.arena-3d-open) .approved-header{height:94px!important;flex-wrap:wrap!important;padding:4px 10px!important;gap:0!important}
  html body.approved-site:not(.arena-3d-open) .approved-header .logo{height:36px!important;line-height:36px!important;flex:0 0 auto!important}
  html body.approved-site:not(.arena-3d-open) .approved-header .tools{order:1!important;width:calc(100% - 140px)!important;height:36px!important;overflow-x:auto!important;flex:1!important;min-width:0!important;white-space:nowrap}
  html body.approved-site:not(.arena-3d-open) .approved-header .approved-nav{order:2!important;height:48px!important;flex:0 0 100%!important;width:100%!important}
  html body.approved-site:not(.arena-3d-open) .approved-footer{height:42px!important;min-height:42px!important}
  html body.approved-site:not(.arena-3d-open) :is(.hub-dialog,#draftOptionsModal){inset:98px 0 50px!important;height:auto!important}
  html body.approved-site:not(.arena-3d-open) :is(.active-users-widget,.activity-widget,#hostControlsWidget){top:100px!important;max-height:calc(100dvh - 154px)!important}
  html body.approved-site:not(.arena-3d-open) .activity-widget.online-open{left:8px!important;right:auto!important;width:calc(50vw - 12px)!important;max-height:calc(100dvh - 154px)!important}
  html body.approved-site:not(.arena-3d-open) .active-users-widget.history-open{left:auto!important;right:8px!important;width:calc(50vw - 12px)!important;top:100px!important;max-height:calc(100dvh - 154px)!important}
  html body.approved-site:not(.arena-3d-open) #historyResModal{top:100px!important;max-height:calc(100dvh - 154px)!important}
  html body.approved-site:not(.arena-3d-open) .chat-widget:not(.minimized){bottom:50px!important;height:calc(100dvh - 154px)!important;max-height:calc(100dvh - 154px)!important}
  html body.approved-site:not(.arena-3d-open) #hostWrenchBtn{top:100px!important}
  html body.approved-site:not(.arena-3d-open) :is(#soloDraftSetupPanel,#auctionSetupPanel,#draftSetupPanel){max-height:calc(100dvh - 168px)!important;margin:8px auto!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal .draft-modal-content{max-height:100%!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal .draft-modal-content:not(.squad-view-open){padding:8px!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal #packTitle{font-size:20px!important;margin:4px 0 8px!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal .hold-squad-btn{padding:6px 12px!important;margin:0 0 8px!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal #draftOptionsContainer{gap:12px!important;margin:0!important;justify-content:center!important}
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal #draftOptionsContainer .pack-card-container{width:clamp(65px,calc((100dvh - 240px)*.75),110px)!important;flex:0 0 auto!important;height:auto!important;aspect-ratio:3/4!important}
}

/* On phones each manager gets the full width: three cards above three rivals.
   Let the document scroll instead of squeezing both teams into half-width boxes. */
@media(max-width:800px), (max-width:1000px) and (max-height:500px){
  html body.approved-site #votingScreen{
    width:100%!important;max-width:100%!important;height:auto!important;
    min-height:0!important;box-sizing:border-box!important;padding:12px 4px!important;
    margin:8px auto!important;overflow:visible!important;
  }
  html body.approved-site #votingMainArea{display:block!important;min-width:0!important}
  html body.approved-site #votingScreen .vs-matchups-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:none!important;grid-auto-rows:auto!important;gap:16px!important;
    height:auto!important;max-height:none!important;min-height:0!important;margin:0!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel{
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
    width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;
    max-height:none!important;padding:6px!important;box-sizing:border-box!important;
    grid-column:auto!important;grid-row:auto!important;overflow:visible!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-inner-wrap{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    flex:0 0 auto!important;gap:8px!important;width:100%!important;min-width:0!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side{
    order:1;flex:0 0 auto!important;width:100%!important;min-width:0!important;
    padding:2px!important;box-sizing:border-box!important;overflow:visible!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side:last-child{order:3}
  html body.approved-site #votingScreen .hub-own-matchup .vs-side:not(.hub-own-side){order:3!important}
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side.hub-own-side{order:1!important}
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side h2{
    font-size:16px!important;margin:0 0 8px!important;overflow-wrap:anywhere!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side>.inventory{
    display:block!important;flex:none!important;margin:0!important;min-height:0!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-card-row{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:none!important;flex:none!important;container-type:normal;
    width:100%!important;max-width:none!important;gap:4px!important;margin:0!important;
    align-items:start!important;justify-items:center!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-side .vs-card-wrap{
    width:100%!important;max-width:220px!important;height:auto!important;
    max-height:none!important;min-height:0!important;min-width:0!important;
    aspect-ratio:3/4!important;flex:none!important;margin:0!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-card-wrap:hover{transform:none!important}
  html body.approved-site #votingScreen .vs-matchup-panel .vs-mid-wrap{
    order:2;display:flex!important;align-items:center!important;justify-content:center!important;
    align-self:stretch!important;flex:0 0 auto!important;gap:12px!important;
    width:100%!important;min-width:0!important;padding:0!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .vs-text{margin:0!important;font-size:18px!important}
  html body.approved-site #votingScreen .vs-matchup-panel .vote-btn{
    min-height:44px!important;box-sizing:border-box!important;font-size:13px!important;
    padding:10px!important;margin:8px 0 0!important;white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  html body.approved-site #votingScreen .vs-matchup-panel .tie-btn{min-width:90px!important;margin:0!important}

  /* Larger offers are a native swipeable strip; all three remain selectable. */
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal{
    inset:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important;
    padding:8px!important;overflow:auto!important;z-index:100075!important;
    background:rgba(0,0,0,.65)!important;
  }
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal .draft-modal-content{
    display:flex!important;flex-direction:column!important;gap:8px!important;
    width:min(650px,100%)!important;max-width:100%!important;height:auto!important;
    min-height:0!important;max-height:none!important;flex:0 0 auto!important;
    padding:12px 8px!important;overflow:visible!important;scrollbar-gutter:auto;
  }
  html body.approved-site #draftOptionsModal #packTitle{
    order:0;font-size:24px!important;margin:0!important;text-align:left!important;
  }
  html body.approved-site #draftOptionsModal .draft-mobile-hint{
    order:1;display:block;font-size:13px;line-height:1.5;color:var(--hub-muted);
    margin:0;overflow-wrap:anywhere;
  }
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal #draftOptionsContainer{
    order:2;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    flex:0 0 auto!important;justify-content:flex-start!important;align-items:center!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;min-height:0!important;gap:12px!important;
    padding:8px 4px 16px!important;box-sizing:border-box!important;margin:0!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;
    scroll-padding-inline:4px;scrollbar-width:thin;overscroll-behavior-x:contain;
  }
  html body.approved-site:not(.arena-3d-open) #draftOptionsModal .draft-modal-content #draftOptionsContainer .pack-card-container{
    width:clamp(220px,76vw,320px)!important;flex:0 0 clamp(220px,76vw,320px)!important;
    height:auto!important;max-height:none!important;aspect-ratio:3/4!important;
    margin:0!important;scroll-snap-align:center;
  }
  html body.approved-site #draftOptionsContainer .pack-card-container:hover .pack-card.flipped{
    transform:rotateY(180deg)!important;
  }
  html body.approved-site #draftOptionsModal .draft-modal-content>div:not(#draftOptionsContainer){order:3;min-width:0}
  html body.approved-site #draftOptionsModal .hold-squad-btn{min-height:44px!important;margin:0!important}
  html body.approved-site #draftOptionsModal .squad-view-open #holdSquadPanel{
    flex:none!important;max-height:none!important;overflow:visible!important;
  }
  html body.approved-site #draftOptionsModal .squad-view-open #holdSquadGrid{
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none!important;
  }
}
