/* Player Lounge: original actions, responsive document flow. */
body:not(.in-match) :is(#camera-button, #pause-button) {
  display: none;
}
#feedback-button {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
}
#feedback-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
#top-tools button {
  min-height: 44px;
  font-size: 12px;
}
body:not(.in-match) #brand {
  top: 24px;
  left: 32px;
}
body:not(.in-match) #top-tools {
  top: 24px;
  right: 32px;
}
#menu.screen {
  padding: 104px 40px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 20px;
  overflow: auto;
  background: linear-gradient(90deg, #06121bd9, #06121b77);
}
#menu .menu-content {
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1/3;
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  align-self: start;
}
#menu .menu-content > * {
  margin-left: 0;
  max-width: none;
}
#menu :is(.logo-heading, .menu-content > .eyebrow, .menu-desc, .device-note) {
  display: none;
}
#menu .title-online {
  order: 2;
  font-size: 13px;
  margin: 12px 0 0;
}
#menu #arrival-status:empty {
  display: none;
}
#menu .menu-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
  margin: 0;
}
#menu .menu-buttons button {
  margin: 0;
  border: 1px solid #355266;
  border-radius: 10px;
  background: #102b3de6;
  padding: 18px 16px;
  min-height: 80px;
  font-size: clamp(14px, 1.5vw, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transform: none;
}
#menu .menu-buttons #play-now {
  grid-column: 1/-1;
  min-height: 300px;
  align-items: end;
  padding: 24px;
  background:
    linear-gradient(0deg, #051522fa, transparent 90%),
    url("/arena/assets/modes/matchmaking.webp") center/cover;
  border-color: #63b9da;
  color: #eef8ff;
}
#menu .play-label {
  text-align: left;
  display: block;
}
#menu .play-label b {
  display: block;
  font-size: 48px;
  line-height: 1.15;
}
#menu .play-label small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin: 5px 0;
}
#menu .play-label small:first-child {
  font-size: 11px;
  letter-spacing: 2px;
  color: #9ae8ff;
}
#menu #resume-saved-match {
  grid-column: 1/-1;
  min-height: 48px;
}
#menu-player.menu-player {
  position: static;
  transform: none;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 14px;
  padding: 20px;
  border: 1px solid #355266;
  border-top: 2px solid #69d8fa;
  border-radius: 10px;
  align-self: start;
  background: #0b1f2ded;
}
#menu-player .player-avatar {
  width: 56px;
  height: 60px;
  min-width: 0;
  font-size: 24px;
}
#menu-player [data-player-name] {
  font-size: 20px;
  overflow-wrap: anywhere;
  white-space: normal;
}
#menu-player [data-player-title] {
  font-size: 13px;
}
#menu-player [data-player-progress] {
  font-size: 12px;
}
#menu-player .menu-player-account {
  grid-column: 1/-1;
  max-width: none;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
}
#menu-player .am-account-mark img {
  width: 24px;
  height: 24px;
}
#menu-player [data-player-status] {
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
#menu-player [data-player-action] {
  grid-column: 1/-1;
  min-height: 44px;
  font-size: 14px;
  padding: 12px;
  border-radius: 7px;
  color: #a6e8fc;
}
#menu .title-updates {
  grid-column: 2;
  grid-row: 2;
  position: static;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  align-self: start;
}
#menu .title-news {
  margin: 0;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #355266;
  background: #0b1f2ded;
  max-height: none;
  height: auto;
}
#menu .title-news header {
  font-size: 11px;
}
#menu .title-news article {
  padding: 12px 0;
  gap: 12px;
}
#menu .title-news h2 {
  font-size: 19px;
  line-height: 1.2;
  margin: 4px 0;
}
#menu .title-news article p {
  font-size: 13px;
  line-height: 1.4;
  display: block;
}
#menu .title-news footer {
  display: flex;
  gap: 6px;
  align-items: center;
}
#menu .title-news footer a {
  font-size: 12px;
  flex: 1;
}
#menu .title-news button {
  min-width: 44px;
  min-height: 44px;
  font-size: 16px;
}
#menu .title-updates .music-radio {
  position: static;
  margin: 0 0 10px;
  width: 100%;
  max-width: none;
}
#menu .lounge-footer {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  border-top: 1px solid #355266;
  padding-top: 10px;
  min-width: 0;
}
#menu .arena-card {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
#menu .arena-card > :not(button) {
  display: none;
}
#menu #change-arena {
  margin: 0;
  min-height: 44px;
  font-size: 12px;
  padding: 10px 0;
}
.lounge-help {
  max-width: 65%;
  text-align: right;
}
.lounge-help summary {
  cursor: pointer;
  min-height: 44px;
  padding: 10px;
  font-size: 13px;
  color: #b9d6e5;
}
#menu .menu-footer {
  position: static;
  margin: 0;
  padding: 10px;
  display: block;
  max-width: none;
  width: auto;
}
#menu .menu-footer > span {
  display: none;
}
#menu .menu-footer nav {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#menu .menu-footer a {
  font-size: 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
#menu :is(button, a, summary):focus-visible {
  outline: 3px solid #ffe09c;
  outline-offset: 3px;
}
.screen .panel {
  border-radius: 12px;
  background: linear-gradient(145deg, #102b3d, #091925);
  border-top-width: 2px;
}
.screen .panel .menu-header {
  background: #0c2030;
}
.screen .panel :is(.mode-card, .arena-choice, .setting-row) {
  border-radius: 10px;
}
@media (max-width: 1000px) {
  #menu.screen {
    padding: 96px 24px 64px;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
    gap: 16px;
  }
  #menu .menu-buttons {
    grid-template-columns: 1fr;
  }
  #menu .menu-buttons button {
    min-height: 52px;
    padding: 12px 16px;
  }
  #menu .menu-buttons #play-now {
    min-height: 245px;
  }
  #menu .play-label b {
    font-size: 38px;
  }
  #menu-player.menu-player {
    padding: 16px;
    grid-template-columns: 44px minmax(0, 1fr);
  }
  #menu-player .player-avatar {
    width: 44px;
    height: 48px;
  }
  #menu-player [data-player-name] {
    font-size: 17px;
  }
}
@media (max-width: 600px) {
  body:not(.in-match) #brand {
    top: 14px;
    left: 16px;
  }
  body:not(.in-match) #brand :is(.brand-sub, .build-tag) {
    display: none;
  }
  body:not(.in-match) #top-tools {
    top: 14px;
    right: 16px;
    gap: 6px;
  }
  #top-tools button {
    padding: 8px;
    font-size: 11px;
  }
  #menu.screen {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 80px 16px 80px;
    gap: 14px;
  }
  #menu-player.menu-player {
    order: 0;
    padding: 12px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
  }
  #menu-player .menu-player-account {
    grid-template-columns: 20px 1fr auto;
  }
  #menu-player [data-player-action] {
    grid-column: auto;
    font-size: 11px;
    max-width: 112px;
    padding: 8px;
  }
  #menu-player [data-player-status] {
    font-size: 10px;
  }
  #menu-player [data-player-progress] {
    font-size: 11px;
  }
  #menu .menu-content {
    order: 1;
  }
  #menu .menu-buttons {
    gap: 8px;
  }
  #menu .menu-buttons #play-now {
    min-height: 200px;
    padding: 18px;
  }
  #menu .menu-buttons button {
    min-height: 48px;
  }
  #menu .title-updates {
    order: 2;
  }
  #menu .lounge-footer {
    order: 3;
    width: 100%;
  }
  #menu .title-news article p {
    font-size: 12px;
  }
  #menu .play-label b {
    font-size: 36px;
  }
  #menu .title-online {
    margin-top: 8px;
  }
}
@media (max-height: 600px) and (min-width: 601px) {
  body:not(.in-match) #brand,
  body:not(.in-match) #top-tools {
    top: 10px;
  }
  #menu.screen {
    padding-top: 70px;
    align-content: start;
    gap: 12px;
  }
  #menu .menu-buttons #play-now {
    min-height: 170px;
  }
  #menu .menu-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #menu .menu-buttons button {
    font-size: 12px;
    padding: 10px;
    min-height: 48px;
  }
  #menu-player.menu-player {
    padding: 12px;
  }
  #menu .title-news {
    padding: 12px;
  }
}
/* Reset the former independently scrolling title rail and fixed dock rules. */
#menu .menu-content {
  max-height: none;
  overflow: visible;
  flex-shrink: 0;
  --title-copy-inset: 0;
}
#menu .menu-content > :not(.logo-heading) {
  margin-left: 0;
  max-width: 100%;
}
#menu .menu-buttons button {
  height: auto;
}
#menu .play-label {
  float: none;
}
#menu .play-label b {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  color: #eef8ff;
}
#menu .play-label small {
  color: #c3dce8;
}
#menu-player [data-player-status] {
  max-width: none;
  letter-spacing: 0;
}
#menu-player .am-account-mark {
  width: 24px;
  height: 24px;
}
#menu-player .am-account-mark img {
  height: 24px;
  width: auto;
  max-width: none;
}
#menu .arena-card {
  display: block;
}
#menu .title-news article {
  height: auto;
  max-height: none;
  overflow: visible;
}
#menu .title-news article p {
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
}
#top-tools #feedback-button {
  font-size: 12px;
  letter-spacing: 0;
}
@media (max-width: 600px) {
  body:not(.in-match) #top-tools {
    right: 76px;
  }
  #menu.screen > * {
    flex-shrink: 0;
  }
  #menu .title-news article {
    min-height: 90px;
  }
  #menu .title-news h2 {
    font-size: 17px;
  }
  #menu .title-news {
    padding: 12px;
  }
  #menu .title-news article p {
    display: none;
  }
  #menu-player.menu-player {
    margin: 0;
  }
  #menu .menu-content {
    width: 100%;
  }
  #top-tools #feedback-button {
    font-size: 11px;
    max-width: 112px;
  }
  #menu .menu-buttons #play-now {
    min-height: 170px;
  }
}

#menu .menu-buttons .play-label {
  opacity: 1;
}
#menu.screen {
  scroll-padding: 90px 16px 72px;
}
#menu :is(button, a, summary) {
  scroll-margin-top: 90px;
  scroll-margin-bottom: 64px;
}
@media (max-height: 600px) and (min-width: 601px) {
  #menu.screen {
    scroll-padding-top: 66px;
  }
  #menu :is(button, a, summary) {
    scroll-margin-top: 66px;
  }
}
/* Match HUD keeps the compact icon target; full label is for menus. */
body.in-match #feedback-button span {
  display: none;
}
#menu .menu-buttons button:not(#play-now) > span {
  flex-shrink: 0;
}
@media (max-height: 600px) and (min-width: 601px) {
  #menu .menu-buttons button:not(#play-now) > span {
    display: none;
  }
}
@media (max-width: 600px) {
  body:not(.in-match) #top-tools #feedback-button {
    font-size: 12px;
    line-height: 1.2;
    max-width: 112px;
    letter-spacing: 0;
  }
  body:not(.in-match) #top-tools #sound {
    font-size: 10px;
  }
  #menu-player [data-player-status] {
    font-size: 11px;
  }
}
@media (min-width: 1001px) {
  #menu.screen {
    grid-template-columns: minmax(0, 760px) minmax(300px, 440px);
    justify-content: center;
  }
}
/* Game title: the live stadium remains visible, with no menu chrome. */
#title-start{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:1fr auto;padding:max(28px,env(safe-area-inset-top)) 24px max(22px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#03111de8,transparent 50%,#03111d66);text-align:center;color:#edf7ff;overflow:auto}
#title-start[hidden]{display:none}
html[data-studio-intro=active] #title-start{visibility:hidden}
html[data-title-start=active] :is(#menu,#brand,#top-tools,#social-chat,#controller-status,.music-radio){visibility:hidden!important;pointer-events:none!important}
html[data-title-start=active] .screen{visibility:hidden!important;pointer-events:none!important}
.title-start-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,6vh,64px);min-height:0;padding:24px 0}
.title-start-logo{width:min(680px,78vw,110vh);height:auto;max-height:48dvh;object-fit:contain;filter:drop-shadow(0 10px 30px #00101dcc)}
#title-start-prompt{background:none;border:0;color:#b4eaff;font-size:clamp(26px,3.6vw,48px);min-height:56px;padding:12px 20px;text-transform:none;letter-spacing:.1em;line-height:1.2;font-weight:800;text-align:center;box-shadow:none;text-shadow:0 0 12px #50ccff99,0 0 28px #50ccff66;min-width:min(800px,90vw);max-width:100%}
#title-start-prompt:disabled{opacity:.8;cursor:wait}
#title-start-prompt:focus-visible{outline:0;text-shadow:0 0 6px #fff,0 0 18px #50ccff,0 0 36px #50ccff}
.title-start-footer{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:720px;justify-self:center;color:#b8cbd8}
.title-start-footer img{width:144px;height:44px;object-fit:contain}
.title-start-footer p{margin:0;font-size:11px;letter-spacing:1.5px}
.title-start-footer small{font-size:11px;line-height:1.5}
@media(max-height:500px){#title-start{padding:12px 20px}.title-start-center{gap:8px;padding:0}.title-start-logo{max-height:43dvh}.title-start-footer{gap:3px}.title-start-footer img{height:30px;width:110px}.title-start-footer p,.title-start-footer small{font-size:10px}#title-start-prompt{padding:8px 12px;font-size:26px}}
@media(max-width:480px){.title-start-logo{width:88vw}.title-start-footer small{max-width:300px}}

.title-start-identity{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
.title-start-tagline{position:relative;isolation:isolate;margin:0;padding:9px 28px 10px;max-width:calc(100vw - 64px);font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(21px,2.7vw,38px);font-style:italic;font-synthesis:style;line-height:1;letter-spacing:.035em;color:#f0f6ff;font-weight:900;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px #57c9ee44}
.title-start-tagline::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-12deg);background:linear-gradient(110deg,#092839f5,#071624f5 65%);border:2px solid #65d5f5;box-shadow:inset 0 0 0 2px #071624,0 0 12px #3bc5f544,0 8px 18px #00101d66}
.title-start-tagline::after{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#e3faff,transparent)}
@media(max-height:500px){.title-start-tagline{font-size:22px;padding:5px 20px 6px}.title-start-identity{gap:4px}}

#sound{display:inline-flex;align-items:center;justify-content:center;gap:8px}#sound svg{flex-shrink:0}

#title-start-prompt:not(:disabled){animation:title-continue-pulse .9s ease-in-out infinite alternate}
@keyframes title-continue-pulse{from{text-shadow:0 0 8px #50ccff77,0 0 20px #50ccff55;color:#a9e7ff}to{text-shadow:0 0 8px #ffffffbb,0 0 22px #50ccff,0 0 44px #50ccffaa;color:#f3fcff}}
@media(prefers-reduced-motion:reduce){#title-start-prompt:not(:disabled){animation:none}}

@media(max-width:480px){.title-start-tagline{font-size:clamp(19px,5.6vw,26px);padding:8px 16px 9px;letter-spacing:.01em}}

.title-start-tagline span{background:linear-gradient(180deg,#f0f6ff 15%,#d8f1ff 45%,#79d3f2 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
@media(forced-colors:active){.title-start-tagline span{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}