@font-face {
  font-family: "Barlow Condensed";
  src: url("/arena/assets/fonts/BarlowCondensed-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #eef6ff;
  background: #08111e;
  font-synthesis: none;
  --blue: #52c7ff;
  --orange: #ff8641;
  --muted: #95aabd;
  --line: rgba(176, 209, 240, 0.2);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
  border: 1px solid var(--line);
  background: #142333;
  min-height: 48px;
  padding: 14px 20px;
  text-align: left;
  font-weight: 750;
  letter-spacing: 0.07em;
  transition:
    background 0.15s,
    transform 0.15s,
    border-color 0.15s;
}
button:hover {
  background: #263e52;
  border-color: #86cafa;
  transform: translateX(3px);
}
button:focus-visible {
  outline: 2px solid #ffcc86;
  outline-offset: 4px;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
button.primary {
  background: #e7f4ff;
  color: #0d1d2c;
  border-color: #e7f4ff;
  box-shadow: 0 5px 35px #53baff14;
}
button.primary:hover {
  background: #fff;
}
button span {
  float: right;
}
.hidden {
  display: none !important;
}
#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: 0;
  touch-action: none;
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 180px #02081480;
}
#brand {
  position: fixed;
  left: 3.8vw;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 20;
  pointer-events: none;
}
.brand-mark {
  font-size: 35px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -4px;
}
.brand-mark span {
  color: var(--blue);
}
.brand-sub {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 2px;
  line-height: 1.7;
}
.brand-sub b {
  font-weight: 500;
  letter-spacing: 2.6px;
  color: var(--muted);
  font-size: 8px;
}
.build-tag {
  border: 1px solid var(--line);
  padding: 6px 9px;
  font-size: 8px;
  letter-spacing: 1.5px;
  margin-left: 20px;
  color: #91a5b8;
}
#top-tools {
  position: fixed;
  top: 30px;
  right: 3.5vw;
  z-index: 30;
  display: flex;
  gap: 10px;
}
#top-tools button {
  background: #0a172aa8;
  backdrop-filter: blur(8px);
  min-height: 34px;
  font-size: 9px;
  padding: 9px 12px;
}
#pause-button {
  font-size: 16px !important;
}
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030d2070;
  backdrop-filter: blur(7px);
  padding: 90px 20px 20px;
  overflow: auto;
}
#menu {
  background: linear-gradient(
    90deg,
    #020b1ce8 0%,
    #061225c9 28%,
    #06102135 60%,
    transparent 85%
  );
  padding: 0 5vw;
}
.menu-content {
  position: absolute;
  top: 20%;
  max-width: 500px;
  width: 35vw;
  min-width: 330px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2.3px;
  color: #aec6d9;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.eyebrow i,
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--blue);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--blue);
}
.brand-logo {
  width: 225px;
  max-height: 90px;
  object-fit: contain;
  object-position: left;
  display: none;
}
h1 {
  font-size: clamp(36px, 4.5vw, 68px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -3px;
  font-style: italic;
  margin: 24px 0 22px;
}
h1 em {
  font-style: inherit;
  color: #78d1fa;
}
h2 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 38px;
  letter-spacing: 0.015em;
  margin: 0 0 22px;
  font-style: italic;
  font-weight: 900;
}
.menu-desc {
  font-size: 14px;
  line-height: 1.75;
  color: #a9bdcc;
  margin: 0 0 28px;
}
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 300px;
}
.menu-buttons button {
  border: 0;
  border-bottom: 1px solid #b0d5ef17;
  background: linear-gradient(90deg, #102237c9, #16314b50);
  height: 49px;
  font-size: 12px;
}
.menu-buttons button.primary {
  height: 58px;
  background: #e7f4ff;
  margin-bottom: 4px;
  font-size: 14px;
}
.menu-buttons button span {
  opacity: 0.6;
}
.device-note {
  display: flex;
  gap: 18px;
  font-size: 8px;
  letter-spacing: 1.1px;
  color: #728da5;
  margin-top: 26px;
}
.arena-card {
  position: absolute;
  right: 5vw;
  bottom: 14%;
  width: 246px;
  background: linear-gradient(120deg, #0b2032d9, #0d1c29a3);
  border: 1px solid #96cfe332;
  border-top: 2px solid #7bcced;
  padding: 22px;
  backdrop-filter: blur(12px);
}
.arena-card > div:first-child {
  font-size: 9px;
  letter-spacing: 2px;
  color: #93bed8;
}
.arena-card h2 {
  font-size: 24px;
  margin: 18px 0 8px;
}
.arena-card p {
  font-size: 8px;
  color: #94aab9;
  letter-spacing: 2px;
}
.arena-card-line {
  height: 1px;
  background: var(--line);
  margin: 20px 0 15px;
}
.arena-card > span {
  font-size: 8px;
  letter-spacing: 1px;
  color: #8bcee9;
}
.arena-card b {
  padding: 0 10px;
  color: #80929e;
}
.menu-footer {
  position: absolute;
  bottom: 28px;
  left: 5vw;
  right: 5vw;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #7390a7;
}
.menu-footer b {
  padding: 0 12px;
}
.panel {
  background: linear-gradient(115deg, #102335f7, #081421fa 72%);
  border: 1px solid #9ab9cd20;
  border-top: 0;
  box-shadow:
    -4px 0 0 #72d3f4,
    0 24px 80px #0007;
  padding: 34px;
  width: 520px;
  max-width: 100%;
  max-height: calc(100dvh - 115px);
  overflow: auto;
}
.panel > button:not(.back) {
  display: block;
  width: 100%;
  margin-top: 12px;
}
.panel p {
  color: #9bb1c3;
  font-size: 13px;
  line-height: 1.65;
}
.panel .back {
  padding: 0;
  min-height: 20px;
  border: 0;
  background: none;
  font-size: 9px;
  color: #92a9bd;
  margin-bottom: 28px;
}
.mode-panel {
  width: 800px;
}
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.mode-card {
  padding: 25px;
  position: relative;
  min-height: 200px;
  background: #102231;
  border: 0;
  border-bottom: 2px solid #416175;
  overflow: hidden;
}
.mode-card strong {
  display: block;
  margin-top: 40px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 34px;
  letter-spacing: 0.015em;
  font-weight: 900;
  font-style: italic;
}
.mode-number {
  float: none;
  font-size: 9px;
  color: #8caec7;
  letter-spacing: 1.5px;
}
.mode-card p {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
.card-arrow {
  position: absolute;
  right: 23px;
  top: 24px;
  font-size: 25px;
  color: var(--blue);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 1px;
  margin: 26px 0;
}
.setting-row select,
.controls-reference select {
  color: #dbe9f5;
  background: #071725;
  padding: 12px;
  border: 1px solid var(--line);
  max-width: 100%;
  font-size: 11px;
  min-height: 44px;
  height: 44px;
}
.panel-note {
  font-size: 10px !important;
  line-height: 1.6;
  color: #718ca3 !important;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.coin-panel {
  text-align: center;
  width: 430px;
}
.coin-panel .eyebrow {
  justify-content: center;
}
.coin-panel h2 {
  font-size: 44px;
}
.coin-object {
  height: 130px;
  width: 130px;
  margin: 32px auto 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #fbf4d2, #c1a469 60%, #806334);
  border: 5px double #f0dfaf;
  box-shadow:
    6px 6px 0 #816841,
    0 0 80px #ffca5530;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
}
.coin-object span {
  font-size: 43px;
  letter-spacing: -5px;
  font-weight: 900;
  font-style: italic;
  color: #72572b;
  text-shadow: 1px 1px 0 #fff8;
}
.button-row {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}
.button-row button {
  flex: 1;
  text-align: center;
}
.or {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  color: #8294a2;
  margin: 25px;
}
.join-row {
  display: flex;
  gap: 10px;
}
.join-row input {
  width: 65%;
  background: #07121e;
  border: 1px solid var(--line);
  color: white;
  letter-spacing: 4px;
  padding: 15px;
  text-transform: uppercase;
}
.join-row button {
  flex: 1;
}
#room-status {
  color: #80d2ff;
}
#play-select {
  display: flex;
  align-items: flex-end;
  background: linear-gradient(transparent, #02091485);
  padding: 0 3vw 4vh;
  pointer-events: none;
}
.play-sheet {
  pointer-events: auto;
  width: 100%;
  max-width: 1230px;
  margin: auto auto 0;
  background: linear-gradient(140deg, #0d2237f5, #081424f5);
  border: 1px solid #84b9de40;
  border-top: 2px solid #66caff;
  padding: 27px;
  box-shadow: 0 30px 80px #0009;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
}
.sheet-header .eyebrow {
  margin-bottom: 8px;
}
.sheet-header h2 {
  font-size: 27px;
  margin-bottom: 8px;
}
.sheet-header p {
  font-size: 11px;
  color: #91adbf;
  margin: 0 0 24px;
}
.play-clock {
  text-align: right;
}
.play-clock span {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: #83a3bd;
}
.play-clock strong {
  font-size: 37px;
  font-variant-numeric: tabular-nums;
  font-weight: 300;
}
#play-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.play-card {
  position: relative;
  background: #10283a;
  padding: 17px;
  min-height: 185px;
  border-color: #6b9cc734;
}
.play-card.selected {
  background: #235277;
  border-color: #68ceff;
}
.play-card .play-num {
  font-size: 10px;
  color: #7ca3bd;
}
.play-card .play-type {
  float: right;
  font-size: 8px;
  letter-spacing: 1px;
  color: #ffbf70;
}
.play-card svg {
  width: 100%;
  height: 70px;
  margin: 12px 0;
}
.play-card strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.play-card p {
  font-size: 10px;
  line-height: 1.5;
  color: #92abba;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 0;
}
.sheet-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 9px;
  color: #8babc3;
  letter-spacing: 0.5px;
}
.sheet-footer b {
  padding: 0 8px;
}
#special-teams {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
#special-teams:empty {
  display: none;
}
#special-teams button {
  min-height: 36px;
  font-size: 10px;
  padding: 10px 18px;
}
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.scoreboard {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  filter: drop-shadow(0 5px 15px #0006);
}
.team-score {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #0b2030e8;
  padding: 12px 23px;
  min-width: 182px;
}
.team-score span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
}
.team-score strong {
  font-size: 33px;
  font-weight: 700;
}
.team-score.blue {
  border-top: 3px solid #39bfff;
  border-left: 3px solid #39bfff;
}
.team-score.orange {
  border-top: 3px solid #ff763f;
  border-right: 3px solid #ff763f;
}
.blue strong {
  color: #6cd1ff;
}
.orange strong {
  color: #ff9a5a;
}
.match-clock {
  background: #edf7ff;
  color: #071627;
  text-align: center;
  padding: 8px 19px;
  min-width: 115px;
}
.match-clock strong {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}
.match-clock span {
  display: block;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 2px;
}
.down-strip {
  position: absolute;
  top: 100%;
  background: #0a1a2de8;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  font-size: 8px;
  letter-spacing: 1px;
  white-space: nowrap;
  border-bottom: 1px solid #94bdd943;
}
.down-strip b {
  color: #62cef9;
  margin: 0 10px;
}
/* Plain-words objective under the jargon strip (KEH-10229 / E10). The strip
   above is unchanged — advanced players read it. */
#phase-objective {
  display: block;
  margin: 6px auto 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.35;
  text-align: center;
  color: #d7ecfb;
}
#phase-objective:empty {
  display: none;
}
@media (max-width: 600px) {
  #phase-objective {
    font-size: 9px;
    max-width: 68vw;
    white-space: normal;
  }
}
.live-label {
  position: absolute;
  top: 150px;
  left: 34px;
  font-size: 8px;
  color: #a2bfd3;
  letter-spacing: 1.3px;
}
.live-label i {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #80e2d5;
  margin-right: 7px;
  border-radius: 50%;
}
.live-label #net-status {
  display: block;
  margin: 8px 0 0 12px;
  color: #658498;
  font-size: 7px;
}
#controlled-info {
  position: absolute;
  left: 35px;
  bottom: 37px;
  border-left: 2px solid var(--blue);
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#role-tag {
  font-size: 8px;
  letter-spacing: 2px;
  color: #90b8d0;
}
#player-name {
  font-size: 18px;
  font-style: italic;
  font-weight: 850;
}
#camera-hint {
  font-size: 8px;
  color: #8caabe;
  letter-spacing: 0.6px;
}
#camera-hint b {
  color: #c1dfef;
}
.bottom-controls {
  position: absolute;
  bottom: 31px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #b6cad7;
  background: #081928bf;
  padding: 12px 17px;
  border: 1px solid #8ac7eb23;
}
.bottom-controls > span {
  margin: 0 9px;
  color: #7296ae;
}
kbd {
  font-family: inherit;
  background: #aac9df18;
  padding: 4px 6px;
  border: 1px solid #aac9df42;
  border-bottom: 2px solid #aac9df62;
  border-radius: 3px;
  font-size: 8px;
  margin-right: 4px;
}
#boost {
  position: absolute;
  right: 36px;
  bottom: 30px;
  text-align: center;
}
.boost-ring {
  width: 130px;
  height: 130px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boost-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.boost-ring circle {
  fill: none;
  stroke-width: 4;
}
.boost-track {
  stroke: #e2e6e41c;
  stroke-width: 8 !important;
}
#boost-progress {
  stroke: #ffbb5a;
  stroke-dasharray: 320.44;
  filter: drop-shadow(0 0 6px #ffa90060);
  transition: stroke-dashoffset 0.1s;
}
.boost-ring strong {
  font-size: 43px;
  font-weight: 350;
  font-style: italic;
}
.boost-ring span {
  font-size: 8px;
  letter-spacing: 2px;
  color: #f3c17d;
}
.boost-key {
  font-size: 8px;
  letter-spacing: 1px;
  color: #a6b3b8;
}
#minimap {
  position: absolute;
  right: 35px;
  top: 140px;
  border: 1px solid #bddcea30;
  border-radius: 5px;
  background: #061827c2;
  width: 164px;
  height: 110px;
}
#event {
  position: fixed;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 9;
  pointer-events: none;
  min-width: 350px;
  text-shadow: 0 3px 20px #0009;
}
#event-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #bde9ff;
}
#event-title {
  display: block;
  margin-top: 7px;
  font-size: clamp(32px, 5vw, 66px);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -2px;
}
#event-detail {
  font-size: 12px;
  color: #d4e7f5;
  background: #0b1b2bbf;
  padding: 8px 14px;
  display: inline-block;
  margin-top: 9px;
}
#event.score #event-title {
  color: #ffe0a3;
}
#countdown {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  font-weight: 850;
  font-style: italic;
  text-shadow: 0 0 60px #57beff66;
  z-index: 8;
  pointer-events: none;
}
#charge {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  width: 250px;
}
#charge span {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #f4d4a3;
  letter-spacing: 0.7px;
}
#charge b {
  font-size: 7px;
  color: #abbdc6;
}
/* The meter is shared by passes and kicks, so its label is written from state
   (KEH-10229 / E11) — <i> only to stay off the #charge b / #charge span rules. */
#charge-label {
  font-style: normal;
}
#charge > div {
  height: 5px;
  margin-top: 9px;
  background: #041827;
  border: 1px solid #c7e6f737;
}
#charge-fill {
  display: block;
  background: #ffd484;
  height: 100%;
  width: 50%;
  box-shadow: 0 0 15px #ffc43d55;
}
#reticle {
  position: absolute;
  left: 50%;
  top: 45%;
  font-size: 27px;
  color: #ffdfa4;
  text-shadow: 0 0 10px #000;
}
#final-score {
  font-size: 74px;
  font-weight: 250;
  letter-spacing: 4px;
  padding: 20px 0;
}
.info-panel {
  width: 730px;
}
.info-panel h3 {
  font-size: 12px;
  color: #8cd5fc;
  letter-spacing: 1px;
  margin: 22px 0 10px;
}
.info-panel p,
.info-panel li {
  color: #a7bdce;
  font-size: 13px;
  line-height: 1.7;
}
.control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.control-grid div {
  padding: 10px;
  background: #19354a60;
  font-size: 11px;
  line-height: 1.8;
}
.control-grid b {
  display: block;
  color: #83d4fe;
}
#loading {
  position: fixed;
  inset: 0;
  background: #081422;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.load-mark {
  font-size: 90px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -12px;
  margin-bottom: 40px;
}
.load-mark span {
  color: var(--blue);
}
#loading > span {
  font-size: 10px;
  letter-spacing: 4px;
  color: #9ab9cf;
}
.load-line {
  height: 2px;
  width: 220px;
  background: linear-gradient(90deg, transparent, #6ad5ff, transparent);
  margin: 25px;
  animation: pulse 1s infinite;
}
#load-detail {
  font-size: 11px;
  color: #7995ac;
}
@keyframes pulse {
  50% {
    opacity: 0.3;
    transform: scaleX(0.6);
  }
}
#touch {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
#touch,
#touch * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#joystick {
  position: absolute;
  bottom: 75px;
  left: 25px;
  border: 1px solid #b5e5ff55;
  background: #06162970;
  border-radius: 50%;
  height: 120px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
}
#joystick span {
  width: 46px;
  height: 46px;
  background: #b4e1ff60;
  border: 1px solid #d5f0ff88;
  border-radius: 50%;
}
.touch-actions {
  position: absolute;
  right: 18px;
  bottom: 80px;
  display: grid;
  grid-template-columns: repeat(3, 55px);
  gap: 8px;
  pointer-events: auto;
}
.touch-actions button {
  font-size: 8px;
  min-height: 52px;
  border-radius: 50%;
  padding: 4px;
  text-align: center;
  background: #0d2d438f;
  touch-action: none;
}
.touch-actions button:last-child {
  background: #d681348f;
}
.touch-actions button:active {
  background: #56aedeaa;
}
@media (max-height: 750px) and (min-width: 800px) {
  .menu-content {
    top: 17%;
  }
  h1 {
    font-size: 48px;
    margin: 20px 0;
  }
  .menu-desc {
    margin-bottom: 18px;
  }
  .menu-buttons button {
    height: 41px;
    min-height: 41px;
  }
  .menu-buttons button.primary {
    height: 49px;
  }
  .device-note {
    margin-top: 18px;
  }
}
@media (max-width: 800px) {
  #brand {
    top: 18px;
    left: 20px;
  }
  .brand-sub,
  .build-tag {
    display: none;
  }
  #top-tools {
    top: 18px;
    right: 20px;
  }
  .menu-content {
    top: 19%;
    left: 7vw;
    width: 70vw;
    min-width: 0;
  }
  h1 {
    font-size: 46px;
    letter-spacing: -2px;
  }
  .menu-buttons {
    width: 280px;
    max-width: 100%;
  }
  .arena-card {
    display: none;
  }
  .menu-footer span:last-child {
    display: none;
  }
  .mode-grid {
    grid-template-columns: 1fr 1fr;
  }
  .mode-card {
    padding: 18px;
    min-height: 160px;
  }
  .mode-card strong {
    font-size: 21px;
    margin-top: 25px;
  }
  .panel {
    padding: 23px;
  }
  .setting-row {
    display: block;
  }
  .setting-row select {
    display: block;
    margin-top: 12px;
    width: 100%;
  }
  .team-score {
    min-width: 85px;
    padding: 8px 12px;
    gap: 10px;
  }
  .team-score span {
    font-size: 7px;
    max-width: 42px;
    line-height: 1.5;
  }
  .team-score strong {
    font-size: 26px;
  }
  .match-clock {
    min-width: 80px;
    padding: 8px;
  }
  .match-clock strong {
    font-size: 24px;
  }
  .scoreboard {
    top: 18px;
  }
  #hud .live-label {
    top: 115px;
    left: 15px;
  }
  #minimap {
    top: 108px;
    right: 15px;
    width: 100px;
    height: 67px;
  }
  #boost {
    right: 12px;
    bottom: 15px;
  }
  .boost-ring {
    width: 90px;
    height: 90px;
  }
  .boost-ring strong {
    font-size: 31px;
  }
  .boost-key {
    font-size: 6px;
  }
  #controlled-info {
    left: 17px;
    bottom: 20px;
  }
  #player-name {
    font-size: 13px;
  }
  .bottom-controls {
    display: none;
  }
  .play-sheet {
    padding: 18px;
  }
  #play-cards {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .play-card {
    min-height: 137px;
    padding: 12px;
  }
  .play-card svg {
    height: 40px;
    margin: 6px 0;
  }
  .play-card strong {
    font-size: 11px;
  }
  .play-card p {
    font-size: 9px;
  }
  .sheet-header h2 {
    font-size: 23px;
  }
  .sheet-header p {
    max-width: 265px;
    font-size: 10px;
    margin-bottom: 15px;
  }
  .sheet-footer {
    font-size: 8px;
  }
  .sheet-footer span:last-child {
    display: none;
  }
  .control-grid {
    grid-template-columns: 1fr 1fr;
  }
  #event {
    top: 26%;
    min-width: 280px;
  }
  #event-title {
    font-size: 39px;
  }
  #charge {
    bottom: 160px;
    width: 200px;
  }
  #touch #joystick {
    bottom: 115px;
  }
  .touch-actions {
    bottom: 135px;
  }
  #coin h2 {
    font-size: 34px;
  }
  .coin-object {
    width: 110px;
    height: 110px;
    margin: 20px auto 30px;
  }
}
@media (max-height: 500px) {
  #brand {
    top: 12px;
  }
  .center {
    padding-top: 65px;
  }
  .panel {
    max-height: calc(100dvh - 75px);
  }
  .menu-content {
    top: 16%;
  }
  .menu-desc,
  .device-note {
    display: none;
  }
  h1 {
    font-size: 30px;
    margin: 10px 0 20px;
  }
  .menu-buttons button,
  .menu-buttons button.primary {
    height: 35px;
    min-height: 35px;
    font-size: 10px;
    padding: 9px 15px;
  }
  .eyebrow {
    font-size: 8px;
  }
  .menu-footer {
    bottom: 13px;
  }
  #play-cards {
    grid-template-columns: repeat(4, 1fr);
  }
  .sheet-header p {
    display: none;
  }
  .play-card {
    min-height: 120px;
  }
  .play-card p {
    display: none;
  }
  #play-select {
    padding-bottom: 15px;
  }
  .play-sheet {
    padding: 14px;
  }
  .sheet-footer {
    margin-top: 10px;
  }
  .sheet-header h2 {
    font-size: 20px;
  }
  .scoreboard {
    transform: translateX(-50%) scale(0.8);
    transform-origin: top center;
  }
  #minimap {
    display: none;
  }
  .coin-object {
    width: 80px;
    height: 80px;
    margin: 10px auto;
  }
  .coin-panel p {
    margin: 8px;
  }
  .coin-panel .eyebrow {
    display: none;
  }
  .coin-panel h2 {
    font-size: 25px;
    margin-bottom: 5px;
  }
  #touch #joystick {
    bottom: 55px;
    width: 100px;
    height: 100px;
  }
  .touch-actions {
    bottom: 60px;
  }
}

@media (min-width: 1000px) {
  .menu-content {
    width: 520px;
    max-width: 520px;
  }
  h1 {
    font-size: 60px;
    letter-spacing: -2.5px;
  }
  .menu-buttons {
    width: 320px;
  }
}

@media (max-width: 600px) {
  body.in-match #brand {
    display: none;
  }
  body.in-match #top-tools {
    top: 101px;
    right: 15px;
  }
  body.in-match #top-tools #sound {
    display: none;
  }
  body.in-match #minimap {
    top: 153px;
  }
  body.in-match .scoreboard {
    width: calc(100% - 28px);
    justify-content: center;
  }
  body.in-match .team-score {
    flex: 1;
    justify-content: space-between;
  }
  body.in-match .team-score.orange {
    justify-content: space-between;
  }
  body.in-match .live-label {
    top: 110px;
  }
  body.in-match .boost-key {
    display: none;
  }
}

#event.live-event {
  /* Clears the down strip, which now carries a second plain-words line
     underneath the jargon one (KEH-10229 / E10). */
  top: 146px;
  min-width: 250px;
  background: #0a1c2dc9;
  border-top: 1px solid #8accf467;
  padding: 8px 20px;
}
#event.live-event #event-label {
  display: none;
}
#event.live-event #event-title {
  font-size: 19px;
  letter-spacing: 0.5px;
  margin: 0;
}
#event.live-event #event-detail {
  font-size: 10px;
  margin: 3px 0 0;
  padding: 0;
  background: none;
}
@media (max-width: 600px) {
  #event.live-event {
    top: 148px;
    min-width: 210px;
    padding: 7px 10px;
  }
  #event.live-event #event-title {
    font-size: 15px;
  }
  #event.live-event #event-detail {
    font-size: 8px;
  }
}

/* Vector lettering and the three-lace football stay crisp at every screen size. */
.brand-mark {
  width: 100px;
  height: 40px;
  object-fit: contain;
}
.logo-heading {
  margin: 25px 0 24px;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: min(425px, 100%);
  max-height: none;
}
@media (max-width: 600px) {
  .brand-mark {
    width: 78px;
    height: 32px;
  }
  .brand-logo {
    width: min(310px, 83vw);
  }
}

.menu-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 65%;
  padding-right: 250px;
  justify-content: flex-end;
  line-height: 1.6;
  letter-spacing: 0.4px;
  font-size: 10px;
}
.menu-footer a {
  color: #b6d7e8;
  text-decoration: none;
}
.menu-footer a:hover {
  text-decoration: underline;
}
.menu-footer a:focus-visible {
  outline: 2px solid #7cdafa;
  outline-offset: 4px;
}
.no-script {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #091321;
  color: #eaf4ff;
  padding: 12vh 8vw;
  font: 18px/1.6 Arial;
}
.no-script a {
  color: #8dddff;
}
@media (max-width: 700px) {
  .menu-footer {
    bottom: 60px;
    left: 6vw;
    right: 6vw;
    flex-direction: column;
    gap: 10px;
  }
  .menu-footer > span {
    display: none;
  }
  .menu-footer nav {
    max-width: 100%;
    padding-right: 0;
    justify-content: flex-start;
    gap: 10px;
    font-size: 10px;
  }
  .menu-desc {
    max-width: 320px;
  }
}

@media (min-width: 901px) {
  .menu-footer {
    right: 360px;
    gap: 24px;
  }
  .menu-footer nav {
    max-width: none;
    padding-right: 0;
    font-size: 10px;
    gap: 14px;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  .menu-footer {
    bottom: 66px;
    flex-direction: column;
    gap: 8px;
  }
  .menu-footer nav {
    max-width: 100%;
    padding-right: 0;
    justify-content: flex-start;
  }
  .menu-footer > span {
    display: none;
  }
}
.no-script {
  overflow: auto;
}
@media (max-width: 700px) and (max-height: 740px) {
  .menu-content {
    top: 100px;
    width: 86vw;
    max-height: calc(100svh - 190px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
  .brand-logo {
    width: 230px;
    max-width: 100%;
  }
  .logo-heading {
    margin: 14px 0;
  }
  .menu-desc {
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 14px;
    max-width: 310px;
  }
  .menu-buttons {
    gap: 6px;
    width: 280px;
  }
  .menu-buttons button {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 12px;
  }
  .device-note {
    margin-top: 16px;
  }
}

/* The room roster replaces discovery controls once membership is confirmed. */
.lobby-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #90aabd;
  margin: 24px 0 16px;
}
.lobby-meta strong {
  color: #80d8fa;
  font-size: 18px;
  letter-spacing: 3px;
}
.lobby-roster {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}
.lobby-player {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: linear-gradient(110deg, #12384c99, #08172388);
  border: 1px solid #67cff544;
  border-left: 3px solid #67cff5;
}
.lobby-player.opponent {
  border-left-color: #ff885a;
  background: linear-gradient(110deg, #53302344, #08172388);
}
.lobby-avatar {
  font-size: 28px;
  font-weight: 900;
  font-style: italic;
  color: #6ed4fa;
}
.opponent .lobby-avatar {
  color: #ff885a;
}
.lobby-player div {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.lobby-player strong {
  font-size: 22px;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.lobby-player small,
.lobby-player div > span {
  font-size: 10px;
  letter-spacing: 1.3px;
  color: #9fb6c8;
}
.lobby-invite-label {
  display: block;
  margin: 24px 0 9px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #9fb6c8;
}
#invite-url {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: 0;
  padding: 14px;
  color: #b3d4e7;
}
#begin-match:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (max-width: 600px) {
  .lobby-player {
    padding: 14px;
    gap: 14px;
  }
  .lobby-player strong {
    font-size: 18px;
  }
  .lobby-meta {
    letter-spacing: 0.5px;
    font-size: 9px;
  }
  .lobby-meta strong {
    font-size: 15px;
  }
}

#invite-url {
  background: #071522;
  border: 1px solid #426074;
  color: #d2edff;
}
#begin-match {
  width: 100%;
}

.music-radio {
  position: fixed;
  z-index: 21;
  top: 83px;
  right: 3.5%;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 280px;
  padding: 11px 13px;
  background: #061321da;
  border-left: 2px solid #73d5f5;
  transition: opacity 0.35s;
}
.music-radio[hidden] {
  display: none;
}
.music-radio div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.music-radio small {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: #78c9e8;
}
.music-radio strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radio-artist {
  font-size: 9px;
  color: #9db5c7;
}
.music-radio button {
  padding: 6px;
  min-width: 30px;
  min-height: 30px;
  background: transparent;
  border: 0;
}
.music-radio.radio-idle {
  opacity: 0;
  pointer-events: none;
}
.music-radio.radio-idle:focus-within {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 600px) {
  .music-radio {
    top: 65px;
    right: 20px;
    max-width: 230px;
    padding: 5px 8px;
    gap: 10px;
  }
  .music-radio small,
  .radio-artist {
    display: none;
  }
  .music-radio button {
    min-height: 20px;
    padding: 0;
  }
  .music-radio strong {
    font-size: 10px;
  }
  #online .panel {
    max-height: calc(100dvh - 155px);
    padding-bottom: 30px;
  }
}
@media (max-width: 600px) {
  #online .panel:has(#room-lobby:not(.hidden)) {
    padding: 18px;
  }
  #online:has(#room-lobby:not(.hidden)) .back {
    margin-bottom: 18px;
  }
  #online:has(#room-lobby:not(.hidden)) .eyebrow {
    margin-bottom: 10px;
  }
  #online:has(#room-lobby:not(.hidden)) h2 {
    font-size: 28px;
    margin-bottom: 12px;
  }
  #online:has(#room-lobby:not(.hidden)) .panel-note {
    display: none;
  }
  #online-intro {
    font-size: 12px;
  }
  .lobby-meta {
    margin: 16px 0 12px;
  }
  .lobby-roster {
    gap: 10px;
    margin-bottom: 16px;
  }
  .lobby-player {
    padding: 12px;
  }
  .lobby-invite-label {
    margin: 14px 0 8px;
  }
  #begin-match {
    font-size: 12px;
    min-height: 44px;
  }
  #copy-room {
    font-size: 12px;
    min-height: 44px;
  }
}

.play-card.special-play {
  border-color: #ffbf7099;
  background: linear-gradient(150deg, #302c25, #10283a 70%);
}
.play-card.special-play.selected {
  border-color: #ffcf88;
  background: #30475a;
}

.play-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.play-card .play-type {
  float: none;
}
.formation-name {
  display: block;
  margin-top: 5px;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #9cb8ca;
}
.play-card span {
  float: none;
}
.play-card-meta {
  width: 100%;
}

#controller-status {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  padding: 7px 12px;
  background: #061523ee;
  color: #b9d7e8;
  font-size: 9px;
  text-align: center;
  pointer-events: none;
  max-width: calc(100vw - 160px);
  width: max-content;
}
.controller-navigation .screen :focus,
.controller-navigation #social-chat :focus {
  outline: 3px solid #82dbff;
  outline-offset: 4px;
  box-shadow: 0 0 22px #56c9ff55;
}

.team-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #91b1c7;
}
.team-choice select {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  background: #081827;
  border: 1px solid #71d4f5;
  color: #e8f4ff;
  font: inherit;
  font-weight: 800;
}
.team-choice select:disabled {
  border-color: #2b4354;
  opacity: 0.7;
}
.lobby-player > div {
  min-width: 0;
  flex: 1;
}
#lobby-mode {
  display: block;
  border-left: 2px solid #71d4f5;
  padding-left: 12px;
  line-height: 1.6;
}

#online .panel:has(#room-lobby:not(.hidden)) {
  width: min(900px, calc(100vw - 40px));
  max-width: 900px;
  padding: 24px;
}
#online:has(#room-lobby:not(.hidden)) h2 {
  margin: 12px 0;
}
#online:has(#room-lobby:not(.hidden)) #online-intro {
  margin: 12px 0;
}
#online:has(#room-lobby:not(.hidden)) .back {
  margin-bottom: 14px;
}
#online:has(#room-lobby:not(.hidden)) .lobby-meta {
  margin: 14px 0;
}
#online:has(#room-lobby:not(.hidden)) .lobby-player {
  padding: 10px;
}
#online:has(#room-lobby:not(.hidden)) .lobby-mode {
  margin: 8px 0;
}
.lobby-roster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lobby-player {
  padding: 12px;
  gap: 10px;
}
.lobby-player strong {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.lobby-player.empty-slot {
  opacity: 0.45;
}
@media (max-width: 600px) {
  .lobby-roster {
    grid-template-columns: 1fr;
  }
}

#reconnect-notice {
  position: fixed;
  z-index: 95;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: min(440px, 90vw);
  padding: 24px;
  background: #071524f5;
  border: 2px solid #74d6ff;
  box-shadow: 0 15px 70px #000a;
  text-align: center;
  color: #ecf6ff;
}
#reconnect-clock {
  color: #74d6ff;
  font-size: 22px;
}
#ready-room {
  margin: 12px 0;
}

@media (pointer: coarse) {
  body.in-match #context-controls,
  body.in-match #camera-hint,
  body.in-match #boost,
  body.in-match #brand,
  body.in-match .music-radio {
    display: none;
  }
  body.in-match #controlled-info {
    left: 25px;
    bottom: 12px;
  }
  .touch-actions button[data-touch="boost"]::after {
    content: attr(data-level);
    display: block;
    font-size: 15px;
    margin-top: 3px;
  }
}

/* Selection marks borrow the short hash marks of a football field. */
.mode-card::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -20px;
  width: 130px;
  height: 160px;
  transform: rotate(18deg);
  border-left: 1px solid #9acde31c;
  background: repeating-linear-gradient(
      0deg,
      transparent 0 29px,
      #9acde31c 29px 31px,
      transparent 31px 45px
    )
    left / 22px 100% no-repeat;
  pointer-events: none;
}
.mode-card:hover,
.mode-card:focus-visible {
  background: #193b4e;
  border-bottom-color: #77dbfa;
}
.mode-card .mode-number {
  color: #81cde5;
}
.panel .eyebrow {
  color: #80cbe2;
  letter-spacing: 0.16em;
}
.panel .back {
  min-height: 32px;
  margin-bottom: 20px;
}
.panel-note {
  color: #a0b1bd !important;
}
.menu-buttons button:not(.primary) {
  background: transparent;
  border-bottom-color: #a0c7dd30;
  padding-left: 0;
}
.menu-buttons button:not(.primary):hover {
  background: #74cdef12;
}
.menu-buttons .primary {
  border-left: 5px solid #63ceef;
  box-shadow: none;
}
@media (max-width: 600px) {
  .panel {
    box-shadow:
      -3px 0 0 #72d3f4,
      0 16px 45px #0006;
  }
  .panel h2 {
    font-size: 30px;
  }
  .mode-card strong {
    font-size: 28px;
  }
  .mode-card::before {
    opacity: 0.5;
  }
}
@media (pointer: coarse) and (max-width: 360px) {
  #joystick {
    left: 12px;
    width: 100px;
    height: 100px;
  }
  .touch-actions {
    right: 12px;
    grid-template-columns: repeat(3, 48px);
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
  button:hover {
    transform: none;
  }
}
@media (max-width: 600px) {
  .mode-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mode-card {
    min-height: 0;
    padding: 18px 20px;
  }
  .mode-card strong {
    margin-top: 14px;
  }
  .mode-card p {
    margin-bottom: 0;
  }
  .mode-card .card-arrow {
    top: 15px;
    right: 18px;
  }
  .mode-panel .setting-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
  }
  .mode-panel .setting-row select {
    width: 100%;
  }
}
@media (pointer: coarse) and (max-width: 600px) {
  #top-tools #sound {
    width: 44px;
    padding: 4px;
    font-size: 8px;
    letter-spacing: 0;
    text-align: center;
  }
}
@media (pointer: coarse) and (max-width: 600px) {
  #top-tools button {
    min-height: 44px;
    min-width: 44px;
  }
}
@media (pointer: coarse) and (max-width: 360px) {
  #brand {
    left: 10px;
  }
  #top-tools {
    gap: 6px;
  }
}

#load-recovery:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px;
}
#load-recovery a {
  color: #79d8ff;
}
#load-detail {
  max-width: min(440px, 88vw);
  text-align: center;
}

@media (max-width: 600px) {
  .device-note {
    display: none;
  }
}
/* Studio credit is independent of WebGL startup; CSS also fails open. */
#studio-intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #000;
  color: #f4efe5;
  touch-action: none;
  animation: studio-exit 2.05s linear forwards;
}
#studio-intro[data-managed] {
  animation: none;
}
#studio-intro[data-managed] img {
  animation: none;
  opacity: 0;
}
#studio-intro[data-managed] #studio-intro-skip,
#studio-intro[data-managed] #studio-intro-sound {
  animation: none;
}
#studio-intro[data-phase="fade-out"] #studio-intro-skip,
#studio-intro[data-phase="fade-out"] #studio-intro-sound,
#studio-intro[data-phase="black"] #studio-intro-skip,
#studio-intro[data-phase="black"] #studio-intro-sound {
  visibility: hidden;
}
#studio-intro[hidden] {
  display: none;
}
#studio-intro img {
  width: min(440px, 80vw, 76dvh);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  animation: studio-logo 2.05s ease-out both;
}
#studio-intro {
  overflow: hidden;
  isolation: isolate;
}
#studio-intro img {
  position: relative;
  z-index: 1;
  mix-blend-mode: screen;
}
.studio-ripple {
  position: absolute;
  width: min(440px, 80vw, 76dvh);
  aspect-ratio: 1;
  border: 2px solid #f4efe5;
  border-radius: 50%;
  box-shadow:
    0 0 15px #f4efe533,
    inset 0 0 12px #f4efe51a;
  opacity: 0;
  pointer-events: none;
}
#studio-intro-skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  min-width: 72px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #a8a8ac;
  font:
    600 11px/1.2 Arial,
    sans-serif;
  letter-spacing: 0.17em;
}
#studio-intro-skip:disabled {
  visibility: hidden;
}
#studio-intro-skip:focus-visible {
  outline: 2px solid #eee;
  outline-offset: 2px;
}
#studio-intro-skip span {
  margin-left: 9px;
  font-size: 18px;
}
@keyframes studio-logo {
  0% {
    opacity: 0;
  }
  31.7%,
  78% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes studio-exit {
  0%,
  99.9% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  100% {
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
  }
}
#studio-intro-skip {
  animation: studio-hint 2.05s linear both;
}
#studio-intro-sound {
  position: absolute;
  left: 24px;
  bottom: 20px;
  min-height: 44px;
  padding: 10px 14px;
  appearance: none;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font:
    14px Arial,
    sans-serif;
  letter-spacing: 0.12em;
  color: #aaa;
  animation: studio-hint 2.05s linear both;
}
@keyframes studio-hint {
  0%,
  78% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #studio-intro {
    animation: studio-static-exit 1.4s step-end forwards;
  }
  #studio-intro img {
    animation: none;
  }
}
@keyframes studio-static-exit {
  from {
    visibility: visible;
  }
  to {
    visibility: hidden;
    pointer-events: none;
  }
}

.celebration-browser {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 16px;
}
.celebration-browser .celebration-preview {
  height: 300px;
  margin: 0;
}
.celebration-browser .celebration-choices {
  max-height: 300px;
}
.celebration-preview {
  display: block;
  width: 100%;
  height: 230px;
  border-radius: 3px;
  background: #07121d;
  margin: 16px 0;
}
.celebration-choices {
  display: grid;
  gap: 8px;
  max-height: clamp(170px, 28dvh, 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #79cdec #102235;
}
.celebration-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  min-height: 76px;
  padding: 12px 16px;
  background: #102235;
  border: 1px solid #668ca83d;
}
.celebration-choice[aria-pressed="true"] {
  border-color: #7dd4f4;
  box-shadow: inset 3px 0 #7dd4f4;
  background: #173448;
}
.celebration-number {
  color: #79cdec;
  font:
    italic 28px "Barlow Condensed",
    sans-serif;
}
.celebration-choice strong {
  display: block;
  font-style: italic;
  letter-spacing: 0.03em;
}
.celebration-choice small {
  display: block;
  margin-top: 4px;
  color: #a8bfce;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.celebration-check {
  margin-left: auto;
  color: #7dd4f4;
  visibility: hidden;
}
.celebration-choice[aria-pressed="true"] .celebration-check {
  visibility: visible;
}
@media (max-width: 600px) {
  .celebration-browser {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .celebration-browser .celebration-choices {
    max-height: 170px;
  }
  .celebration-browser .celebration-preview {
    height: 185px;
  }
  .celebration-preview {
    height: 185px;
  }
  .celebration-choice {
    padding: 10px 12px;
  }
}

#event.celebration-event {
  top: max(110px, env(safe-area-inset-top));
  min-width: 0;
  width: calc(100% - 32px);
}
#event.celebration-event #event-label {
  display: none;
}
#event.celebration-event #event-title {
  font-size: clamp(26px, 4vw, 42px);
  margin: 0;
  letter-spacing: -1px;
}
#event.celebration-event #event-detail {
  margin-top: 4px;
  padding: 4px 12px;
}

body.celebrating #minimap,
body.celebrating #boost,
body.celebrating #controlled-info,
body.celebrating #context-controls,
body.celebrating #touch {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 600px) {
  #event.celebration-event {
    top: max(162px, calc(env(safe-area-inset-top) + 140px));
  }
}

/* Venue postcards remain readable on a phone without crowding match choices. */
.arena-change {
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: #83d5fa;
  font-size: 10px;
  letter-spacing: 0.15em;
}
.arena-picker-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  margin: 20px 0 10px;
}
.arena-picker-label span {
  font-weight: 400;
  letter-spacing: 0;
  color: #93aab8;
}
.arena-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.arena-option {
  min-width: 0;
  padding: 0 0 12px;
  text-align: left;
  overflow: hidden;
  border: 1px solid #294050;
  background: #091923;
  position: relative;
}
.arena-option[aria-pressed="true"] {
  border-color: var(--arena-color);
  box-shadow: inset 0 -3px var(--arena-color);
}
.arena-option[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  right: 9px;
  top: 8px;
  color: white;
  font-size: 13px;
}
.arena-option strong,
.arena-option small {
  display: block;
  padding: 0 12px;
}
.arena-option strong {
  font-family: "Barlow Condensed", Arial, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  margin-top: 9px;
}
.arena-option small {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: #9eb7c7;
}
.arena-art {
  width: 100%;
  height: 75px;
  display: block;
  float: none;
  object-fit: cover;
}
@media (max-width: 600px) {
  .arena-picker {
    gap: 6px;
    margin-bottom: 16px;
  }
  .arena-picker-label span {
    display: none;
  }
  .arena-art {
    height: 48px;
  }
  .arena-option strong {
    font-size: 18px;
    padding: 0 7px;
  }
  .arena-option small {
    font-size: 8px;
    padding: 0 7px;
    line-height: 1.4;
  }
}

/* Menu tabs keep unrelated sections out of the reading and focus order. */
.menu-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 0;
  margin-bottom: 16px;
  background: #0c1b2b;
  scrollbar-width: thin;
}
.menu-tabs [role="tab"] {
  flex: 1 0 auto;
  min-height: 46px;
  padding: 12px 14px;
  font-size: 12px;
  letter-spacing: 0.6px;
  border: 1px solid #698698;
}
.menu-tabs [aria-selected="true"] {
  color: #071421;
  background: #8ae3ff;
  border-color: #b5eeff;
}
[role="tabpanel"][hidden] {
  display: none !important;
}
[role="tabpanel"]:focus-visible {
  outline: 2px solid #8ae3ff;
  outline-offset: 3px;
}
.panel .back,
button[data-back],
#info-close {
  min-height: 48px;
  min-width: 108px;
  padding: 12px 18px;
  border: 1px solid #7797b1;
  background: #173249;
  color: #f1faff;
  font-size: 13px;
  margin-bottom: 20px;
}
.panel .back:hover {
  background: #29516e;
}
.info-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.info-panel > .back {
  flex: 0 0 auto;
  align-self: flex-start;
}
#info-body {
  overflow-y: auto;
  min-height: 0;
  padding: 3px 5px 12px;
}
@media (max-width: 600px) {
  .info-panel {
    padding: 16px;
    max-height: calc(100dvh - 86px);
  }
  .menu-tabs {
    gap: 4px;
  }
  .menu-tabs [role="tab"] {
    padding: 12px 9px;
    font-size: 10px;
  }
  .panel .back,
  button[data-back],
  #info-close {
    margin-bottom: 12px;
  }
}
.panel > [data-back],
.panel > #info-close {
  position: sticky;
  top: 0;
  z-index: 3;
}
.menu-tabs [role="tab"][aria-selected="true"],
.controller-navigation
  .screen
  .menu-tabs
  [role="tab"][aria-selected="true"]:focus {
  background: #8ae3ff;
  color: #071421;
}
.menu-tabs [role="tab"]:hover {
  transform: none;
}
.menu-tabs [role="tab"] {
  transition: none;
}

.title-updates {
  position: fixed;
  top: 83px;
  right: 3.5%;
  width: 280px;
  z-index: 21;
}
.title-updates .music-radio {
  position: static;
  width: 100%;
  max-width: none;
  margin-bottom: 12px;
}
.title-news {
  padding: 12px 12px 2px;
  background: linear-gradient(145deg, #102738ed, #07121ef2);
  border-top: 2px solid #70d5f5;
  box-shadow: 0 12px 35px #0003;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.title-news header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: 0.5px;
  color: #c8dce9;
}
.title-news button {
  flex: 0 0 44px;
  background: transparent;
  border: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  font-family: inherit;
}
.title-news small {
  display: block;
  color: #75d4ef;
  letter-spacing: 0.6px;
  font-size: 9px;
  line-height: 12px;
  margin: 0 0 4px;
}
.title-news h2 {
  font-family: inherit;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin: 0 0 5px;
  font-style: normal;
  text-transform: none;
}
.title-news article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 110px;
  padding: 8px 0;
}
.news-thumbnail {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
  background: #183247;
}
.news-copy {
  min-width: 0;
}
.title-news article p {
  color: #bed0de;
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
}
.title-news a {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  color: #dff6ff;
  font-size: 11px;
  text-underline-offset: 4px;
}
.title-news footer {
  display: flex;
  align-items: center;
  border-top: 1px solid #ffffff15;
}
.news-count {
  flex: none;
  font-size: 9px;
  color: #94b1c7;
  letter-spacing: 1px;
}
.title-news button:focus-visible,
.title-news a:focus-visible {
  outline: 2px solid #8adeff;
  outline-offset: -2px;
}
/* Keep title controls and footer in one scroll flow at every viewport size. */
#menu {
  overflow-y: auto;
  padding-top: 20svh;
  padding-bottom: 100px;
}
#menu .menu-content {
  position: relative;
  top: auto;
  --title-copy-inset: min(26.775px, 6.3%);
}
#menu .menu-footer {
  position: static;
  margin-top: 28px;
  max-width: 600px;
  gap: 18px;
  flex-wrap: wrap;
}
#menu .menu-content > :not(.logo-heading) {
  margin-left: var(--title-copy-inset);
  max-width: calc(100% - var(--title-copy-inset));
}
@media (min-width: 701px) and (max-width: 900px) {
  .title-updates {
    position: static;
    width: min(100%, 360px);
    margin-top: 28px;
  }
}
@media (min-width: 701px) and (max-height: 840px) {
  #menu .arena-card {
    display: none;
  }
}
@media (min-width: 701px) and (max-height: 740px) {
  #menu {
    padding-top: 100px;
  }
  #menu .menu-content {
    --title-copy-inset: 18.9px;
  }
  #menu .brand-logo {
    width: 300px;
    max-width: 100%;
  }
  #menu .logo-heading {
    margin: 14px 0;
  }
  #menu .menu-desc {
    margin: 12px 0;
  }
  #menu .device-note {
    display: none;
  }
  .title-updates {
    top: 80px;
  }
}
/* Short landscape screens need the same scroll flow as portrait phones. */
@media (max-width: 700px), (max-height: 520px) {
  #menu {
    overflow-y: auto;
    padding: 100px 6vw 100px;
  }
  #menu .menu-content {
    position: relative;
    top: auto;
    left: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
  }
  .title-updates {
    position: static;
    width: 100%;
    margin-top: 26px;
  }
  .title-updates .music-radio {
    padding: 12px;
  }
  .title-updates .music-radio small,
  .title-updates .radio-artist {
    display: block;
  }
  .title-updates .music-radio strong {
    font-size: 12px;
  }
  #menu .menu-footer {
    position: static;
    margin-top: 28px;
  }
}

@media (max-width: 600px) {
  #menu .menu-content {
    --title-copy-inset: min(19.53px, 5.229vw);
  }
}

/* Chat and menu navigation share the phone viewport without overlapping. */
@media (max-width: 600px) {
  body.chat-open:not(:has(#social-chat.keyboard-visible)) .screen:not(.hidden) {
    bottom: auto;
    height: 50dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.chat-open:not(:has(#social-chat.keyboard-visible))
    .screen.center:not(.hidden) {
    align-items: flex-start;
    padding: 76px 14px 10px;
  }
  body.chat-open:not(:has(#social-chat.keyboard-visible))
    .screen:not(.hidden)
    > .panel {
    max-height: 100%;
    padding: 12px;
  }
  body.chat-open:not(:has(#social-chat.keyboard-visible)) #menu:not(.hidden) {
    padding: 90px 6vw 16px;
  }
}

#coin .button-row[hidden] {
  display: none;
}
#coin .coin-object {
  will-change: transform;
}

.menu-player {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  margin: 14px 0;
  background: #071524e8;
  border: 1px solid #74d6ff55;
  border-left: 3px solid #74d6ff;
  max-width: 600px;
}
.menu-player .menu-player-career {
  display: grid;
  gap: 3px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  min-width: 0;
}
.menu-player-career strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}
.menu-player-label,
[data-player-progress] {
  font-size: 11px;
  color: #a9c3d7;
}
.menu-player-account {
  display: grid;
  gap: 7px;
  min-width: 0;
}
[data-player-status] {
  font-size: 11px;
  color: #b8cbd9;
  max-width: 270px;
  overflow-wrap: anywhere;
}
.menu-player [data-player-action] {
  font-size: 11px;
  padding: 8px 10px;
  min-height: 36px;
}
/* Main-menu layout: navigation owns the left rail; identity has a reserved dock. */
#menu {
  padding: clamp(76px, 10svh, 110px) 5vw 160px;
}
#menu .menu-content {
  width: min(43vw, 530px);
  min-width: 300px;
}
#menu .logo-heading {
  margin: 10px 0 14px;
}
#menu .brand-logo {
  width: clamp(180px, calc(100svh - 480px), 380px);
  max-width: 100%;
}
#menu .eyebrow {
  margin-bottom: 8px;
}
#menu .menu-desc {
  margin: 0 0 10px;
  line-height: 1.4;
  font-size: 13px;
}
#menu .title-online {
  margin: 8px 0 12px;
}
#menu .menu-buttons {
  width: min(320px, 100%);
  gap: 5px;
}
#menu .menu-buttons button {
  height: 44px;
  min-height: 44px;
  padding: 10px 16px;
}
#menu .menu-buttons .primary {
  height: 48px;
  margin: 0;
}
#menu .device-note {
  margin-top: 12px;
}
#menu .menu-footer {
  margin-top: 18px;
  font-size: 10px;
}
#menu-player.menu-player {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 12px));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 180px));
  max-width: none;
  margin: 0;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  background: linear-gradient(
    115deg,
    var(--player-banner, #112b40),
    #071524f5 75%
  );
  border: 1px solid #74d6ff66;
  border-top: 2px solid #74d6ff;
  box-shadow: 0 10px 40px #0008;
}
.player-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid #8fdbff;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #163e58;
  font-size: 22px;
  font-weight: 800;
}
.player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 7px;
}
.player-avatar [hidden] {
  display: none;
}
.player-level {
  position: absolute;
  right: -6px;
  bottom: -5px;
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid #0b2032;
  background: #8adeff;
  color: #061225;
  font-size: 13px;
  border-radius: 6px;
}
.player-identity {
  min-width: 0;
  display: grid;
  gap: 4px;
}
[data-player-name] {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-player-title] {
  font-size: 11px;
  color: #c1d3df;
}
.player-xp {
  height: 5px;
  width: 100%;
  background: #ffffff20;
  border-radius: 4px;
  overflow: hidden;
}
.player-xp i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #67c9ff, #c5f1ff);
}
#menu-player [data-player-progress] {
  font-size: 9px;
  letter-spacing: 0.3px;
}
#menu-player .menu-player-account {
  max-width: 180px;
}
#menu-player [data-player-status] {
  font-size: 10px;
}
#menu-player [data-player-action] {
  min-height: 44px;
  white-space: normal;
}
@media (max-height: 760px) and (min-width: 701px) {
  #menu .menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(440px, 100%);
  }
  #menu .menu-buttons .primary {
    grid-column: 1 / -1;
  }
  #menu .device-note {
    display: none;
  }
  #menu .menu-buttons button {
    font-size: 10px;
  }
}
@media (max-width: 700px) {
  #menu {
    padding: 76px 5vw 170px;
  }
  #menu .menu-content {
    width: 100%;
    min-width: 0;
  }
  #menu .brand-logo {
    width: clamp(150px, 30svh, 260px);
  }
  #menu .menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  #menu .menu-buttons .primary {
    grid-column: 1 / -1;
  }
  #menu .menu-buttons button {
    font-size: 10px;
  }
  #menu .device-note {
    display: none;
  }
  #menu-player.menu-player {
    bottom: max(66px, calc(env(safe-area-inset-bottom) + 60px));
    width: calc(100vw - 24px);
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px;
  }
  .player-avatar {
    width: 42px;
    height: 48px;
    font-size: 17px;
  }
  .player-level {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 11px;
  }
  #menu-player [data-player-name] {
    font-size: 15px;
  }
  #menu-player [data-player-progress] {
    font-size: 8px;
  }
  #menu-player .menu-player-account {
    max-width: 96px;
  }
  #menu-player [data-player-status] {
    font-size: 9px;
  }
  #menu-player [data-player-action] {
    font-size: 9px;
    padding: 6px;
  }
  #controller-status {
    display: none;
  }
}
@media (max-height: 640px) and (max-width: 700px) {
  #menu .brand-logo {
    width: 150px;
  }
  #menu .eyebrow {
    display: none;
  }
  #menu .menu-desc {
    max-height: 1.4em;
    overflow: hidden;
  }
  #menu .logo-heading {
    margin: 2px 0 8px;
  }
}
@media (max-height: 640px) and (min-width: 481px) {
  #menu {
    padding: 72px 4vw 130px;
  }
  #menu .menu-content {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 20px;
    width: 100%;
    min-width: 0;
  }
  #menu .menu-content > :not(.logo-heading) {
    margin-left: 0;
    max-width: 100%;
  }
  #menu .logo-heading {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  #menu .brand-logo {
    width: min(220px, 28vw);
  }
  #menu .menu-desc {
    grid-column: 1;
    grid-row: 2;
    max-height: 1.4em;
    overflow: hidden;
    margin: 6px 0;
  }
  #menu .title-online {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-size: 10px;
  }
  #menu .eyebrow,
  #menu .device-note {
    display: none;
  }
  #menu .menu-buttons {
    grid-column: 2;
    grid-row: 1 / span 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    width: 100%;
  }
  #menu .menu-buttons .primary {
    grid-column: 1 / -1;
  }
  #menu .menu-buttons button {
    font-size: 10px;
  }
  #menu .title-updates {
    grid-column: 1 / -1;
    margin-top: 24px;
  }
  #menu-player.menu-player {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(520px, calc(100vw - 160px));
    padding: 8px 12px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .player-avatar {
    width: 42px;
    height: 48px;
  }
  #controller-status {
    display: none;
  }
}
body.chat-open #menu-player {
  visibility: hidden;
}

@media (max-width: 700px), (max-height: 760px) {
  #menu .menu-buttons:has(#resume-saved-match:not(.hidden)) .primary {
    grid-column: auto;
  }
}
@media (max-height: 360px) and (min-width: 481px) {
  #menu {
    padding-top: 64px;
  }
  body:has(#menu:not(.hidden)) #top-tools {
    top: 10px;
  }
  body:has(#menu:not(.hidden)) #top-tools button {
    height: 36px;
    min-height: 36px;
  }
  body:has(#menu:not(.hidden)) #brand {
    top: 10px;
  }
}

/* Secondary links/news can scroll within the rail, never underneath the dock. */
#menu .menu-content {
  max-height: calc(100svh - clamp(76px, 10svh, 110px) - 146px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-right: 6px;
}
@media (max-width: 700px) {
  #menu .menu-content {
    max-height: calc(100svh - 248px);
  }
}
@media (max-height: 640px) and (min-width: 481px) {
  #menu .menu-content {
    max-height: calc(100svh - 182px);
  }
  #menu .menu-footer {
    grid-column: 1 / -1;
  }
}
@media (max-height: 360px) and (min-width: 481px) {
  #menu .menu-content {
    max-height: calc(100svh - 174px);
  }
}

@media (max-width: 600px) and (min-height: 361px) {
  #menu-player.menu-player {
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }
  #menu .menu-content {
    max-height: calc(100svh - 196px);
  }
}

/* Viewport-sized menu shell: navigation stays in place while content scrolls. */
#info.center {
  padding: 88px 28px 44px;
  overflow: hidden;
}
#info .info-panel {
  width: min(1080px, 100%);
  height: min(720px, 100%);
  max-height: 100%;
  padding: 24px 28px;
  border-top: 1px solid #7bd8ff40;
  border-radius: 3px;
  gap: 0;
}
#info-close {
  margin: 0 0 14px;
  padding: 8px 14px;
  min-height: 44px;
}
#info-body {
  flex: 1;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #53788c #071521;
}
#info-body > .eyebrow {
  font-size: 10px;
  margin: 0 0 6px;
}
#info-body > h2 {
  font-size: clamp(25px, 3vw, 38px);
  margin: 0 0 18px;
  line-height: 1;
}
#info.tabbed-info #info-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#team-tabs,
#settings-tabs {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  min-height: 0;
  flex: 1;
}
#info .menu-tabs {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: auto;
  gap: 6px;
  margin: 0;
  padding: 0 8px 6px 0;
  border-right: 1px solid #a9d9ed20;
}
#info .menu-tabs [role="tab"] {
  flex: 0 0 auto;
  text-align: left;
  min-height: 46px;
  font-size: 11px;
  padding: 12px 14px;
  border-color: transparent;
  background: #112b3d60;
}
#info .menu-tabs [aria-selected="true"] {
  background: #8ae3ff;
  color: #071421;
  box-shadow: inset 3px 0 #fff;
}
#info [role="tabpanel"] {
  overflow: auto;
  min-height: 0;
  padding: 2px 12px 14px 2px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #53788c #071521;
}
#info .career-identity {
  padding: 18px 20px;
  gap: 12px;
}
#info .career-name h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin: 6px 0;
}
#info .career-level-badge strong {
  font-size: 42px;
}
#info .career-stats {
  margin: 14px 0;
  padding: 12px 0;
}
#info .career-metric strong {
  font-size: 28px;
}
#info .career-section {
  margin-top: 16px;
  padding-top: 14px;
}
#info .career h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
#info .career-caption {
  font-size: 12px;
  line-height: 1.5;
}
#info .career-rating {
  padding: 12px 0;
}
#info .career-rank {
  font-size: 24px;
}
#info .career-note {
  font-size: 11px;
}
#info .career-details {
  border-top: 1px solid #aacddd25;
  margin-top: 14px;
}
#info .career-details > summary {
  cursor: pointer;
  min-height: 44px;
  padding: 14px 0;
  font-weight: 700;
  font-size: 12px;
  color: #aee5ff;
}
#info .career-details .career-section {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}
#info .celebration-browser {
  grid-template-columns: minmax(150px, 0.8fr) minmax(200px, 1fr);
}
#info .celebration-preview {
  max-height: 260px;
}
#info .celebration-choices {
  max-height: 280px;
}
#info .account-edit {
  display: block;
  width: fit-content;
  margin: 18px 0;
  text-decoration: none;
}
#menu-player.menu-player {
  border-radius: 10px;
  border-top-color: #83dffc;
  background: linear-gradient(
    110deg,
    var(--player-banner, #112b40),
    #081320 70%
  );
}
#menu-player .menu-player-account {
  grid-template-columns: 28px auto;
  gap: 5px 8px;
  align-items: center;
}
.am-account-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
#menu-player [data-player-action] {
  grid-column: 1/-1;
  border-radius: 4px;
  background: #133248;
}
#menu-player [data-player-status] {
  max-width: 115px;
  letter-spacing: 0.6px;
  font-size: 8px;
}
#menu-player .player-avatar {
  border-radius: 10px;
  box-shadow: 0 0 20px #78dfff18;
}
@media (max-width: 700px) {
  #info.center {
    padding: 76px 12px 16px;
  }
  #info .info-panel {
    height: 100%;
    padding: 14px;
  }
  #info-close {
    margin-bottom: 10px;
  }
  #info-body > h2 {
    font-size: 27px;
    margin-bottom: 12px;
  }
  #team-tabs,
  #settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #info .menu-tabs {
    flex-direction: row;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid #aacddd30;
    padding: 0 0 8px;
    gap: 4px;
  }
  #info .menu-tabs [role="tab"] {
    text-align: center;
    font-size: 10px;
    padding: 10px 12px;
  }
  #info [role="tabpanel"] {
    flex: 1;
    padding-right: 5px;
  }
  #info .career-identity {
    padding: 16px;
  }
  #info .career-name h2 {
    padding-right: 34px;
    font-size: 25px;
  }
  #info .career-level-badge {
    top: 14px;
    right: 14px;
  }
  #info .career-level-badge strong {
    font-size: 25px;
  }
  #info .celebration-browser {
    grid-template-columns: 1fr;
  }
  #info .celebration-preview {
    height: 160px;
  }
  #menu-player .menu-player-account {
    grid-template-columns: 22px auto;
    gap: 3px 5px;
  }
  .am-account-mark {
    width: 22px;
    height: 22px;
  }
}
@media (max-height: 500px) and (min-width: 701px) {
  #info.center {
    padding: 68px 16px 12px;
  }
  #info .info-panel {
    padding: 12px 18px;
  }
  #info-close {
    position: absolute;
    right: 36px;
    top: 78px;
    z-index: 4;
  }
  #info-body > h2 {
    font-size: 25px;
    margin-bottom: 12px;
  }
  #info-body > .eyebrow {
    display: none;
  }
  #team-tabs,
  #settings-tabs {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 14px;
  }
}
@media (max-height: 500px) and (max-width: 700px) {
  #info.center {
    padding: 64px 10px 10px;
  }
  #info .info-panel {
    padding: 10px 14px;
  }
  #info-close {
    position: absolute;
    right: 26px;
    top: 73px;
    z-index: 4;
    min-width: 80px;
  }
  #info-body > .eyebrow {
    display: none;
  }
  #info-body > h2 {
    font-size: 23px;
    min-height: 44px;
    margin-bottom: 4px;
    padding-top: 8px;
  }
  #info .menu-tabs {
    padding-bottom: 4px;
  }
  #team-tabs,
  #settings-tabs {
    gap: 6px;
  }
}
@media (max-height: 500px) and (min-width: 481px) {
  #info .info-panel {
    position: relative;
  }
  #info .info-panel > #info-close {
    position: absolute;
    top: 8px;
    right: 14px;
    margin: 0;
    min-height: 44px;
    padding: 8px 12px;
  }
  #info-body > h2 {
    min-height: 32px;
    padding: 4px 120px 0 0;
    margin: 0 0 10px;
  }
  #team-tabs,
  #settings-tabs {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }
  #info .menu-tabs {
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid #aacddd30;
    padding: 0 6px 0 0;
  }
  #info .menu-tabs [role="tab"] {
    min-height: 40px;
    padding: 10px 7px;
    font-size: 9px;
    text-align: left;
  }
  #info .career-identity {
    padding: 10px 14px;
    gap: 8px;
  }
  #info .career-name h2 {
    font-size: 24px;
  }
}
#info .setting-row {
  min-height: 58px;
  padding: 12px 0;
  border-bottom: 1px solid #a9d9ed18;
}
#info a:not(.career-button) {
  color: #8ae3ff;
  text-underline-offset: 3px;
}
#info input[type="range"] {
  accent-color: #8ae3ff;
  width: clamp(120px, 24vw, 240px);
  cursor: pointer;
}
/* Match selection uses the same compact scale as the account panels. */
#mode.center { padding:82px 18px 28px; }
#mode .mode-panel { padding:20px 24px; max-height:100%; }
#mode .mode-panel > .back:first-child { margin:0 0 12px; }
#mode h2 { font-size:30px; margin:12px 0 18px; }
#mode .arena-picker { margin-bottom:14px; }
#mode .arena-option strong { font-size:20px; }
#mode .mode-card { min-height:128px; padding:16px 20px; }
#mode .mode-card strong { margin-top:16px; font-size:27px; }
#mode .mode-card p { margin:8px 0 0; font-size:11px; }
#mode .setting-row { margin:12px 0; }
#career-connect-status:empty { display:none; }
#mode .panel-note { margin:10px 0 0; }
@media(max-width:600px) {
 #mode.center { padding:72px 12px 12px; }
 #mode .mode-panel { padding:14px; }
 #mode h2 { font-size:25px; margin:8px 0 12px; }
 #mode .mode-grid { grid-template-columns:1fr 1fr; gap:8px; }
 #mode .mode-card { padding:12px; min-height:110px; }
 #mode .mode-card strong { font-size:23px; margin-top:12px; }
 #mode .mode-card p { font-size:10px; }
 #mode .mode-card .card-arrow { display:none; }
 #mode .arena-option strong { font-size:16px; padding:0 5px; }
 #mode .arena-option small { padding:0 5px; font-size:8px; letter-spacing:0; }
 #mode .setting-row { gap:6px; margin:10px 0; }
}
@media(max-height:500px) and (min-width:481px) {
 #mode .mode-panel { position:relative; padding:12px 18px; width:850px; }
 #mode .mode-panel > .back:first-child { position:absolute; right:18px; top:10px; z-index:3; }
 #mode .mode-panel > .eyebrow { display:none; }
 #mode h2 { margin:0 120px 10px 0; font-size:24px; }
 #mode .arena-picker-label { margin:5px 0; }
 #mode .arena-picker { margin-bottom:8px; }
 #mode .arena-option { padding-bottom:6px; }
 #mode .arena-option img { max-height:34px; }
 #mode .mode-card { min-height:80px; padding:10px; }
 #mode .mode-card strong { margin-top:4px; font-size:22px; }
}
@media(max-height:500px) and (min-width:481px) {
 #mode.center { padding:64px 12px 10px; }
 #mode .mode-panel { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
 #mode h2 { grid-column:1/-1; min-height:32px; margin:0; }
 #mode .arena-picker-label { display:none; }
 #mode .arena-picker { grid-column:1; margin:0; gap:5px; }
 #mode .mode-grid { grid-column:2; gap:6px; }
 #mode .mode-card { min-height:85px; padding:10px; }
 #mode .mode-card p { display:none; }
 #mode .mode-card .card-arrow { display:none; }
 #mode .mode-card strong { font-size:20px; margin-top:10px; }
 #mode .arena-option img { height:34px; object-fit:cover; }
 #mode .arena-option strong { font-size:14px; padding:0 4px; margin-top:5px; }
 #mode .arena-option small { display:none; }
 #mode #cpu-mode { grid-column:1; margin:0; min-width:0; min-height:40px; font-size:10px; padding:8px; }
 #mode .setting-row { grid-column:2; margin:0; display:flex; gap:5px; font-size:8px; }
 #mode .setting-row select { width:100%; min-width:0; padding:6px; font-size:10px; }
 #mode .panel-note { display:none; }
 #mode #career-connect-status:not(:empty) { grid-column:1/-1; margin:0; }
}
@media(max-height:500px) and (min-width:481px) {
 #mode .mode-panel > .back:first-child { min-height:44px; padding:8px 12px; }
}

/* Display the original logo symbol without the wordmark, using a CSS sprite. */
.am-account-mark { display:block; overflow:hidden; flex-shrink:0; }
.am-account-mark img { display:block; height:28px; width:auto; max-width:none; }
@media(max-width:700px) { .am-account-mark img { height:22px; } }

/* Feedback shares the existing toolbar; reserve the brand and chat hit areas. */
#top-tools #feedback-button {
  font-size: 18px;
  min-width: 40px;
}
@media (max-width: 600px) {
  body #top-tools {
    gap: 4px;
  }
  body #top-tools button,
  body:has(#menu:not(.hidden)) #top-tools button {
    min-height: 44px;
    min-width: 44px;
    padding: 6px;
    font-size: 9px;
  }
  body #top-tools #sound {
    width: 48px;
    font-size: 8px;
    white-space: normal;
  }
  body #top-tools #camera-button {
    width: 40px;
  }
  body #brand .brand-mark {
    width: 48px;
  }
}
/* One device guide at a time keeps controls readable on small screens. */
.controls-reference > label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-weight:700; }
.control-diagrams figure { margin:16px 0; }
.control-diagrams svg { display:block; width:100%; max-width:620px; fill:#102638; stroke:#72b9d0; stroke-width:2; }
.control-diagrams svg text { fill:#eef7ff; stroke:none; font:600 16px sans-serif; }
.control-diagrams .device-shell { fill:#071522; }
.control-diagrams figcaption { font-weight:800; color:#8bddff; margin-bottom:10px; }
.control-diagrams dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.control-diagrams dt { font-weight:800; color:#8bddff; }
.control-diagrams dd { margin:4px 0 0; }
.controls-reference .ps-controls,.controls-reference .touch-controls,.controls-reference .control-diagrams figure { display:none; }
.controls-reference[data-device=keyboard] .control-diagrams figure:first-child,.controls-reference[data-device=xbox] .control-diagrams figure:last-child,.controls-reference[data-device=playstation] .ps-controls,.controls-reference[data-device=touch] .touch-controls { display:block; }
@media(max-width:480px) { .control-diagrams dl { grid-template-columns:1fr; } }
/* Keep the expanded down/objective strip clear of mobile action buttons. */
@media (max-width: 600px) and (min-height: 501px) {
  body.in-match #top-tools { top: 136px; }
  body.in-match #minimap { top: 188px; }
  body.in-match #hud .live-label { top: 145px; }
}

/* Selection coaching stays within the scrollable play sheet. */
#selection-readiness { color: #d2f2ff; font-size: 14px; line-height: 1.4; }
.selection-tips { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.selection-tips input { width: 20px; height: 20px; }
#strategy-recommendation, .route-key { font-size: 13px; line-height: 1.5; color: #c5dbe8; }
#strategy-recommendation:empty { display: none; }
#play-cards .play-card p { font-size: 13px; color: #c5dbe8; }
#play-cards .play-card svg { height: 88px; }
#play-cards .play-card strong { font-size: 16px; }
#play-cards .play-card .play-type { font-size: 10px; }
#play-cards .play-card:disabled { opacity: 0.85; }
#play-select .play-sheet { max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain; }
#play-cards .play-card p { display: block; }
@media (max-height: 640px) { #play-select .play-sheet { max-height: 92dvh; } }
@media (max-width: 700px) and (orientation: portrait) {
  #play-select .play-sheet { max-height: calc(100dvh - 200px); }
}
@media (max-height: 640px) and (orientation: landscape) {
  #play-select .play-sheet { max-height: calc(100dvh - 95px); }
}
@media (max-height: 640px) and (orientation: landscape) {
  #play-select .sheet-header { padding-left: 48px; }
}

/* Fullscreen stays within scrollable menus, away from HUD overlays. */
.fullscreen-setting { margin-top: 16px; }
.fullscreen-setting button { min-height: 44px; }
.fullscreen-setting p { font-size: 12px; line-height: 1.5; }
#pause .fullscreen-setting { margin-top: 12px; }
#pause .fullscreen-setting p { margin: 8px 0 0; }
:root:fullscreen { background: #050c17; }
:root:-webkit-full-screen { background: #050c17; }
.fullscreen-setting {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Receiver selection is separate from the two-thumb movement/action controls. */
#receiver-targeting {
  position: fixed;
  z-index: 7;
  top: max(110px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(390px, calc(100vw - 24px));
  pointer-events: none;
  font-size: 12px;
  text-align: center;
}
#receiver-targeting[hidden] { display: none; }
.receiver-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.receiver-options button {
  pointer-events: auto;
  min-height: 48px;
  padding: 5px;
  font-size: 12px;
  line-height: 1.2;
  touch-action: manipulation;
  background: #10283eee;
  border: 1px solid #7594a8;
  -webkit-user-select: none;
  user-select: none;
}
.receiver-options button[aria-pressed="true"] { border: 3px solid #73e6ff; background: #18546a; }
.receiver-options button[data-valid="false"] { color: #f3c8a0; }
.receiver-status { padding: 5px; background: #081525e8; line-height: 1.3; }
@media (max-height: 500px) {
  #receiver-targeting { top: 65px; width: min(340px, calc(100vw - 230px)); font-size: 10px; }
  .receiver-options button { font-size: 10px; }
}
#receiver-target-marker {
  position: fixed; z-index: 6; transform: translate(-50%, -100%);
  pointer-events: none; padding: 4px 7px; border: 2px solid #73e6ff;
  border-radius: 6px; background: #082734dd; color: white; font-size: 12px;
}
#receiver-target-marker[hidden] { display: none; }
@media (max-width: 600px) and (min-height: 501px) {
  #receiver-targeting { top: 188px; }
  body.receiver-targeting-active #minimap { display: none; }
}
@media (max-height: 500px) {
  #receiver-targeting { top: 62px; left: 12px; transform: none; width: 184px; }
  .receiver-options { grid-template-columns: repeat(2, 1fr); }
  body.receiver-targeting-active #hud .live-label { display: none; }
  .receiver-status { font-size: 10px; }
}
#cpu-matchup { max-width: 36rem; margin: 0.7rem auto; line-height: 1.5; font-size: clamp(11px, 2vw, 14px); color: #d6e7ef; }
#blue-name, #red-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Single stable coaching surface, including touch. */
body.in-match #context-controls {
  display: block;
  width: min(650px, calc(100vw - 460px));
  white-space: pre-line;
  font: 500 14px/1.5 sans-serif;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
  background: #081928ed;
  border-radius: 8px;
}
body.in-match #context-controls[hidden] { display: none; }
@media (max-width: 900px), (pointer: coarse) {
  body.in-match #context-controls {
    top: 112px; bottom: auto;
    width: min(620px, calc(100vw - 32px));
    padding: 7px 10px; font-size: 13px;
  }
}
@media (max-height: 500px) {
  body.in-match #context-controls {
    top: 80px;
    width: min(500px, calc(100vw - 300px));
    font-size: 12px; line-height: 1.35; padding: 5px 8px;
  }
}
body.celebrating #context-controls { display: none; }
#pick-coaching-rule {
  margin: 8px 0 12px;
  padding: 8px 12px;
  color: #e4f4ff;
  background: #102a3c;
  border-left: 3px solid #67cfff;
  font: 500 14px/1.45 sans-serif;
}
#pick-coaching-rule[hidden] { display: none; }
@media (max-height: 500px) {
  body.in-match.receiver-targeting-active #context-controls {
    width: min(460px, calc(100vw - 430px));
  }
}
/* Short desktop windows keep chat beside receiver selection, not over a chip.
   Touch has its own right-side launcher. Opening chat hides targeting normally. */
@media (max-height: 500px) and (min-width: 601px) and (pointer: fine) {
  body.receiver-targeting-active #social-chat.during-game:not(.expanded) {
    left: max(204px, env(safe-area-inset-left));
    top: 164px;
    right: auto;
    bottom: auto;
  }
}

/* Blog titles remain readable in the compact title-screen rail. */
.title-news .news-headline { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 0; font: inherit; color: inherit; text-decoration: none; }
.title-news .news-headline:hover { color: #8adeff; }
.title-news .news-image { display: block; min-height: 0; }
.title-news article p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title-news article { height: 130px; }

/* Keep live action bindings distinct from explanatory rule text. */
body.in-match #context-controls {
  color: #eaf5ff;
  border: 1px solid #70cdeb80;
  border-left: 3px solid #70d9f5;
  border-radius: 4px;
  box-shadow: 0 3px 14px #0008;
  white-space: normal;
  text-align: left;
}
.coaching-line + .coaching-line { margin-top: 6px; }
#context-controls kbd {
  display: inline-block;
  padding: 2px 7px;
  color: #051923;
  background: #8ae2fa;
  border: 1px solid #c8f3ff;
  border-bottom: 3px solid #3c8fa8;
  border-radius: 4px;
  font: 800 13px/1.35 sans-serif;
  white-space: nowrap;
}
#context-controls strong { color: #8ae2fa; }
@media (max-height:500px) {
  #context-controls kbd { font-size: 12px; padding: 1px 5px; }
  .coaching-line + .coaching-line { margin-top: 3px; }
}
/* Toss: two embossed faces on a thick coin, with a quick vertical flip. */
#coin .coin-panel { width:min(540px, calc(100vw - 24px)); }
#coin h2 { font-size:clamp(24px,4vw,38px); margin:10px 0; }
#coin .coin-stage { position:relative; height:170px; perspective:700px; display:grid; place-items:center; }
#coin .coin-object { position:relative; margin:0; width:112px; height:112px; border:0; background:none; box-shadow:none; transform-style:preserve-3d; }
#coin .coin-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; border:5px double #ffedb0; background:radial-gradient(ellipse at 25% 20%,#fff4bb 0%,#deb451 42%,#9c631d 100%); box-shadow:inset 0 0 0 4px #9e7526,inset 0 0 15px #fff8,0 0 24px #ffd27420; backface-visibility:hidden; font:900 48px/1 sans-serif; font-style:normal; letter-spacing:0; color:#684118; text-shadow:0 1px #fff8; transform:translateZ(5px); }
#coin .coin-face small { font:800 10px/1.5 sans-serif; letter-spacing:2px; margin-top:7px; }
#coin .coin-tails { transform:rotateX(180deg) translateZ(5px); background:radial-gradient(ellipse at 25% 20%,#f6e9c4,#c89a3e 50%,#85521d); }
#coin .coin-object::before { content:"";position:absolute;inset:2px;border-radius:50%;background:repeating-conic-gradient(#ac7829 0deg 5deg,#e5bd67 5deg 10deg);box-shadow:0 0 0 3px #c9953b; }
#coin .coin-shadow { position:absolute;bottom:10px;width:90px;height:12px;border-radius:50%;background:#0008;filter:blur(4px);transform:scale(var(--coin-shadow-scale,1)); }
#coin .button-row { justify-content:center; gap:10px; }
#coin [hidden] { display:none!important; }
#coin #opening-options { margin:16px 0 12px; }
#coin #opening-options button { flex:1; padding:15px 12px; min-height:70px; text-align:center; }
#coin button small { display:block;font:400 12px/1.4 sans-serif;letter-spacing:0;text-transform:none;margin-top:5px;opacity:.8; }
#coin.coin-quick .coin-stage { height:96px; }
#coin.coin-quick .coin-object { width:68px;height:68px; }
#coin.coin-quick .coin-face { font-size:27px; }
#coin.coin-quick .coin-face small { font-size:8px; margin-top:3px; }
#coin.coin-quick [data-coin] { background:#122d3e;color:#e3f2ff;min-height:44px;padding:9px 16px;font-size:13px; }
#coin-choice-timer { font-size:13px; margin:10px 0 0; }
@media(max-width:420px) { #coin #opening-options { flex-direction:column; } #coin #opening-options button { min-height:60px; } }
@media(max-height:500px) { #coin .coin-panel { padding:14px 20px; } #coin .coin-stage { height:105px; } #coin .coin-object {width:76px;height:76px;} #coin .coin-face {font-size:32px;} #coin #opening-options {margin:8px 0;} #coin #opening-options button {min-height:54px;padding:8px;} #coin p {margin:8px 0;} }
@media(max-height:500px) {
  #coin.coin-quick .coin-stage { display:none; }
  #coin h2 { font-size:28px; }
  #coin .coin-stage { height:90px; }
  #coin .coin-object { width:64px; height:64px; margin:0; }
  #coin .coin-face { font-size:26px; }
  #coin .coin-face small { font-size:8px; margin-top:3px; }
}