@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Teko:wght@500;700&display=swap');

:root {
  --app-vh: 100vh;
  --bg: #04060c;
  --panel: #0d111cd9;
  --panel-solid: #0b1019;
  --line: #2b4577;
  --line-soft: #1c2f54;
  --text: #e7eefc;
  --muted: #8799bd;
  --blue: #4d89f5;
  --orange: #f59a3d;
  --orange-soft: #ffb05e;
  --danger: #ff5151;
  --glow-blue: #5d9cff;
  --glow-cyan: #7ab2ff;
  --player-card-aspect-ratio: 21 / 9;
  --player-card-height: clamp(120px, 16vh, 176px);
  --intro-player-card-scale: 0.8;
  --panel-sheen: linear-gradient(110deg, #ffffff00 24%, #9cbef80e 48%, #ffffff00 72%);
  --controller-primary-icon: url('/Assets/Controls/Xbox/xbox_button_color_a_outline.svg');
  --controller-back-icon: url('/Assets/Controls/Xbox/xbox_button_color_b_outline.svg');
  --controller-secondary-icon: url('/Assets/Controls/Xbox/xbox_button_color_x_outline.svg');
  --controller-tertiary-icon: url('/Assets/Controls/Xbox/xbox_button_color_y_outline.svg');
  --controller-shoulder-left-icon: url('/Assets/Controls/Xbox/xbox_lb_outline.svg');
  --controller-shoulder-right-icon: url('/Assets/Controls/Xbox/xbox_rb_outline.svg');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  min-height: var(--app-vh);
  background:
    radial-gradient(circle at 16% -18%, #1c33625a 0%, #101b3517 36%, transparent 64%),
    radial-gradient(circle at 86% -24%, #c67d2626 0%, #36210d10 42%, transparent 72%),
    radial-gradient(circle at top, #0f172f 0%, var(--bg) 58%);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-vh);
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.homeLink {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 20;
  pointer-events: auto;
  text-decoration: none;
  color: #d4e5ff;
  border: 1px solid #3a5184;
  background: #111b35cf;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px #0006;
}

.homeLink:hover {
  background: #16274f;
}

.rotatePrompt {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: linear-gradient(180deg, #04070ee8, #060b16f0);
  pointer-events: auto;
}

.rotatePromptCard {
  width: min(92vw, 420px);
  border-radius: 16px;
  border: 1px solid #3f62a6;
  background: linear-gradient(180deg, #101b35f2, #0b1329f3);
  box-shadow:
    0 20px 52px #000a,
    inset 0 1px 0 #9bc6ff14;
  padding: 18px 16px;
  text-align: center;
}

.rotatePromptTitle {
  font-size: 1.32rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8f1ff;
  margin: 0;
}

.rotatePromptText {
  margin-top: 8px;
  color: #b3c9ee;
  font-size: 1.02rem;
  line-height: 1.35;
}

body.phone-ui-portrait .rotatePrompt {
  display: flex;
}

input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

[contenteditable='true'] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  caret-color: #e8f0ff;
}

.nameWithRole {
  display: inline-flex;
  align-items: center;
  gap: 0.36em;
  min-width: 0;
  max-width: 100%;
  width: auto;
}

.roleBadgeIcon {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 1px 4px #0009);
}

.roleBadgeIcon[data-role='mytholite'] {
  width: 1.12em;
  height: 1.12em;
  transform: translateY(-0.01em) scale(1.14);
  transform-origin: center;
}

.hudNameWithRole,
.introNameWithRole,
.placementNameWithRole {
  min-width: 0;
}

.hudNameText,
.introLineupItemName,
.placementNameText {
  flex: 1 1 auto;
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.privateMemberNameWithRole {
  min-width: 0;
  max-width: 100%;
}

.privateMemberNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#overlayRoot {
  position: fixed;
  inset: 0;
  min-height: var(--app-vh);
  pointer-events: none;
}

.bootScreen {
  z-index: 120;
  pointer-events: auto !important;
  background:
    radial-gradient(circle at 16% 18%, #3667b21f 0%, transparent 30%),
    radial-gradient(circle at 84% 16%, #d07d2818 0%, transparent 28%),
    linear-gradient(180deg, #05070df4, #070c16fa 52%, #05070df7);
}

.bootPromptStage,
.bootSequenceStage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.bootPromptStage.hidden,
.bootPromptStage[hidden],
.bootSequenceStage.hidden,
.bootSequenceStage[hidden] {
  display: none !important;
}

.bootPromptCard {
  width: min(92vw, 640px);
  padding: 32px 28px;
  border: 1px solid #324e85;
  border-radius: 28px;
  background: linear-gradient(180deg, #0e1730f2, #0a1022f4);
  box-shadow:
    0 28px 80px #000a,
    inset 0 1px 0 #a2c9ff1a,
    0 0 0 1px #4f79bf21;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bootPromptCard::after,
.bootDisclaimerCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 22%, #ffffff10 46%, transparent 70%);
  transform: translateX(-120%);
  animation: bootSheen 3.8s ease-in-out infinite;
  pointer-events: none;
  will-change: transform, opacity;
}

.bootPromptLogo {
  width: min(360px, 70vw);
  height: auto;
  filter: drop-shadow(0 16px 28px #000a);
}

.bootPromptEyebrow,
.bootPaneTag,
.bootDisclaimerEyebrow {
  margin: 0;
  color: #9fb5da;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.92rem;
}

.bootStartBtn {
  min-width: 220px;
  font-size: 1.3rem;
  padding-inline: 22px;
}

.bootSequenceStage {
  position: relative;
  overflow: hidden;
}

.bootSequenceStage::before,
.bootSequenceStage::after {
  content: '';
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0.7;
  will-change: transform, opacity;
}

.bootSequenceStage::before {
  background:
    radial-gradient(circle at 50% 50%, #7fb7ff12 0%, transparent 34%),
    linear-gradient(90deg, transparent 0%, #77a3ff0f 46%, #f5a24d14 54%, transparent 100%);
  animation: bootStageSweep 6.2s ease-in-out infinite;
}

.bootSequenceStage::after {
  background:
    radial-gradient(circle at 20% 35%, #5c90ff14 0%, transparent 24%),
    radial-gradient(circle at 80% 38%, #f5a24d14 0%, transparent 22%);
  animation: bootStagePulse 5.8s ease-in-out infinite;
}

.bootPane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    filter 420ms ease;
  filter: blur(4px);
  will-change: opacity, transform, filter;
}

.bootPane.active {
  opacity: 1;
  transform: scale(1.004);
  filter: blur(0);
}

.bootBrandMark {
  max-width: min(70vw, 720px);
  height: auto;
  filter: drop-shadow(0 18px 34px #000a);
}

.bootBrandMarkStudio {
  width: min(54vw, 520px);
  transform: scale(1.055) translateY(-3px);
  opacity: 1;
  filter: drop-shadow(0 22px 38px #000b);
  will-change: transform, opacity, filter;
}

.bootBrandMarkOnimo {
  width: min(56vw, 580px);
  position: relative;
  z-index: 1;
  will-change: transform, opacity, filter;
}

.bootPane.active .bootBrandMarkStudio {
  animation: bootLogoDriftStudio 2600ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.bootPane.active .bootBrandMarkOnimo {
  animation: bootLogoDriftOnimo 2500ms cubic-bezier(0.18, 0.84, 0.24, 1) both;
}

#bootOnimoPane::before {
  content: '';
  position: absolute;
  width: min(54vw, 520px);
  height: min(54vw, 520px);
  border-radius: 50%;
  background:
    radial-gradient(circle, #7ab2ff2a 0%, #4d89f520 34%, #4d89f50f 54%, transparent 74%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 520ms ease,
    transform 2200ms cubic-bezier(0.18, 0.84, 0.24, 1);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

#bootOnimoPane.active::before {
  opacity: 1;
  transform: scale(1.08);
}

.bootDisclaimerCard {
  position: relative;
  overflow: hidden;
  width: min(92vw, 760px);
  padding: 34px 38px;
  border: 1px solid #324e85;
  border-radius: 24px;
  background: linear-gradient(180deg, #0f1730ef, #0b1123f6);
  box-shadow:
    0 24px 72px #0009,
    inset 0 1px 0 #9dc4ff14;
  text-align: center;
  transform: translateY(18px) scale(0.985);
  opacity: 0;
  filter: blur(4px);
  transition:
    transform 720ms cubic-bezier(0.16, 0.82, 0.22, 1),
    opacity 520ms ease,
    filter 720ms cubic-bezier(0.16, 0.82, 0.22, 1),
    box-shadow 720ms ease;
  will-change: transform, opacity, filter;
}

.bootWarningCard {
  border-color: #9a5d5d;
  box-shadow:
    0 24px 72px #0009,
    inset 0 1px 0 #ffd0d014,
    0 0 0 1px #9a5d5d24;
}

.bootPane.active .bootDisclaimerCard {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
  box-shadow:
    0 28px 78px #000a,
    inset 0 1px 0 #b2d0ff18,
    0 0 0 1px #5d84d426;
}

.bootPane.active .bootWarningCard {
  box-shadow:
    0 28px 78px #000a,
    inset 0 1px 0 #ffd6d618,
    0 0 0 1px #b36b6b30;
}

.bootDisclaimerCard h2 {
  margin: 12px 0 14px;
  font-size: clamp(2rem, 5vw, 3.3rem);
  line-height: 0.92;
}

.bootDisclaimerCard p {
  margin: 0 0 14px;
  color: #dce8fb;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.45;
}

.bootDisclaimerCard p:last-child {
  margin-bottom: 0;
}

.bootDisclaimerCard h2,
.bootDisclaimerCard p,
.bootDisclaimerEyebrow {
  transform: translateY(10px);
  opacity: 0;
  transition:
    transform 560ms cubic-bezier(0.18, 0.84, 0.24, 1),
    opacity 420ms ease;
}

.bootPane.active .bootDisclaimerEyebrow {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 90ms;
}

.bootPane.active .bootDisclaimerCard h2 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 150ms;
}

.bootPane.active .bootDisclaimerCard p {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 220ms;
}

.bootScreen.exiting {
  animation: bootScreenFadeOut 420ms ease forwards;
}

@keyframes bootScreenFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes bootSheen {
  0%,
  12% {
    transform: translateX(-120%);
  }
  28%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes bootStageSweep {
  0%,
  100% {
    transform: translateX(-3%) scale(1);
    opacity: 0.34;
  }
  50% {
    transform: translateX(3%) scale(1.014);
    opacity: 0.56;
  }
}

@keyframes bootStagePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.26;
  }
  50% {
    transform: scale(1.018);
    opacity: 0.42;
  }
}

@keyframes bootLogoDriftStudio {
  0% {
    transform: scale(0.992) translateY(6px);
    opacity: 0.92;
    filter: drop-shadow(0 14px 24px #0008);
  }
  100% {
    transform: scale(1.055) translateY(-3px);
    opacity: 1;
    filter: drop-shadow(0 22px 38px #000b);
  }
}

@keyframes bootLogoDriftOnimo {
  0% {
    transform: scale(0.968) translateY(16px);
    opacity: 0;
    filter: drop-shadow(0 8px 18px #0005);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    filter: drop-shadow(0 16px 30px #0009);
  }
  100% {
    transform: scale(1.05) translateY(-2px);
    opacity: 1;
    filter: drop-shadow(0 22px 40px #000b);
  }
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.screen.active {
  display: flex;
}

#menuScreen {
  align-items: stretch;
  justify-content: stretch;
  overflow: auto;
}

#staffScreen {
  align-items: stretch;
  justify-content: center;
  overflow: auto;
}

.menuFullscreenBtn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 20;
  pointer-events: auto;
  min-width: 112px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid #3a5184;
  color: #d4e5ff;
  background: #111b35cf;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px #0006;
}

.staffPortalBtn {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 20;
  pointer-events: auto;
  min-width: 92px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #7d5d35;
  color: #ffe5bf;
  background:
    linear-gradient(180deg, #231d1adb 0%, #171317e8 100%);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 10px 24px #0008,
    0 0 18px #f59a3d20,
    inset 0 1px 0 #fff1d512;
}

.staffPortalBtn:hover {
  background:
    linear-gradient(180deg, #2c231ecf 0%, #1d1720f2 100%);
  border-color: #b37a34;
  color: #fff2d8;
}

.staffPortalBtn::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffcb7a 0%, #f08f2c 100%);
  box-shadow: 0 0 10px #f5a23d88;
  vertical-align: middle;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.controllerMenuShortcuts {
  position: fixed;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 22;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid #365482;
  background: linear-gradient(180deg, #101b34d9 0%, #0a1328df 100%);
  box-shadow:
    0 12px 28px #0008,
    inset 0 1px 0 #acc7f61f;
}

.controllerShortcut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d6e6ff;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.controllerShortcutIcon {
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}

.controllerShortcutIconStaff {
  background-image: var(--controller-secondary-icon);
}

.controllerShortcutIconBack {
  background-image: var(--controller-back-icon);
}

.controllerShortcutIconFullscreen {
  background-image: var(--controller-tertiary-icon);
}

.controllerShortcutIconReady {
  background-image: var(--controller-tertiary-icon);
}

body.controller-active #menuScreen .menuFullscreenBtn,
body.controller-active #menuScreen .staffPortalBtn {
  display: none;
}

body.controller-active #menuScreen .controllerMenuShortcuts:not(.hidden) {
  display: inline-flex;
}

.menuNowPlayingToasts {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 24;
  width: min(420px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.menuNowPlayingToast {
  border-radius: 12px;
  border: 1px solid #5d7fb9;
  background: linear-gradient(125deg, #17386ee8, #111f3be8 58%, #1e2948e8);
  box-shadow:
    0 14px 34px #0008,
    inset 0 1px 0 #c8deff29;
  color: #eaf4ff;
  padding: 9px 12px;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

.menuNowPlayingToast.show {
  transform: translateY(0);
  opacity: 1;
}

.menuNowPlayingToast.hide {
  transform: translateY(8px);
  opacity: 0;
}

.menuNowPlayingToastTitle {
  display: block;
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #9fc4ff;
}

.menuNowPlayingToastTrack {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 1px;
}

.menuNowPlayingToastArtist {
  display: block;
  font-size: 0.83rem;
  color: #c7ddff;
  margin-top: 1px;
}

.inviteModal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  pointer-events: auto;
  padding: calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  background: #040915b8;
}

.inviteModal.hidden {
  display: none;
}

.inviteModalCard {
  width: min(520px, 100%);
  border: 2px solid #3c70c8;
  border-radius: 0;
  background: linear-gradient(180deg, #132a59 0%, #0b1836 100%);
  box-shadow:
    inset 0 0 0 2px #ffffff12,
    0 18px 42px #00000080;
  padding: 22px;
}

.inviteModalEyebrow {
  margin: 0 0 6px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c9ff;
}

.inviteModalCard h3 {
  margin: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f8ff;
}

.inviteModalBody {
  margin: 12px 0 18px;
  color: #d5e3fa;
  font-size: 1.08rem;
}

.inviteModalActions {
  justify-content: flex-start;
}

.inviteModalActions button {
  min-width: 132px;
}

.controllerStaffShortcuts {
  right: auto;
  top: auto;
}

body.controller-active #staffScreen .staffBackBtn {
  display: none;
}

body.controller-active #staffScreen .controllerStaffShortcuts:not(.hidden) {
  display: inline-flex;
}

.staffBackBtn {
  top: calc(64px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  left: auto;
  min-width: 136px;
  border-radius: 999px;
  border-color: #7d5d35;
  color: #ffe5bf;
  background:
    linear-gradient(180deg, #231d1adb 0%, #171317e8 100%);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    0 10px 24px #0008,
    0 0 18px #f59a3d20,
    inset 0 1px 0 #fff1d512;
}

.staffBackBtn:hover {
  background:
    linear-gradient(180deg, #2c231ecf 0%, #1d1720f2 100%);
  border-color: #b37a34;
  color: #fff2d8;
}

.staffScreenWrap {
  width: min(99vw, 1760px);
  max-width: 1760px;
  height: auto;
  min-height: 100%;
  padding: calc(54px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
}

.staffCard {
  width: 100%;
  min-height: 0;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-color: #6a4a2d;
  box-shadow:
    0 24px 70px #0009,
    inset 0 1px 0 #ffe0bd14,
    0 0 0 1px #b97b3121,
    0 0 40px #f59a3d18;
}

.staffCard::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #6ea8ff 0%, #f59a3d 55%, #ffd7a9 100%);
  opacity: 0.9;
}

.staffHeader {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}

.staffEyebrow {
  color: #f7be7d;
}

.staffRolePills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.staffRolePill {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #72502c;
  background: linear-gradient(180deg, #2c2331, #1e1823);
  color: #ffd8ad;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staffGrid {
  display: none;
}

.staffWorkspace {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(680px, 1.65fr);
  gap: 16px;
  min-height: 0;
  flex: 1;
}

.staffColumn {
  min-height: 0;
  overflow: visible;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.staffColumn::-webkit-scrollbar {
  width: 10px;
}

.staffColumn::-webkit-scrollbar-thumb {
  background: #35548c;
  border-radius: 999px;
}

.staffAdminTabs {
  position: static;
  display: flex;
  gap: 8px;
  padding-bottom: 0;
  background: transparent;
}

.staffAdminTabBtn {
  min-width: 128px;
  border-radius: 12px;
  border-color: #3f68ae;
  background: linear-gradient(180deg, #15264f, #122243);
}

.staffAdminTabBtn.active {
  border-color: #8fbeff;
  background: linear-gradient(180deg, #274079, #1d3364);
  box-shadow:
    inset 0 0 0 1px #b6d6ff73,
    0 0 13px #5a9fff32;
}

.staffPanel {
  min-height: 0;
  border: 1px solid #3b5686;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #12203cdd, #0f1830f0);
  box-shadow: inset 0 1px 0 #d7e5ff12;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.staffPanelAdmin {
  grid-column: auto;
}

.staffPanelFooter {
  margin-top: auto;
}

.staffOpsStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.staffOpsStats > div {
  border: 1px solid #466ba8;
  border-radius: 12px;
  padding: 10px 12px;
  background: #09142a99;
}

.staffOpsStats span,
.staffOpsStats strong {
  display: block;
}

.staffOpsStats span {
  color: #adc6ee;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.staffOpsStats strong {
  margin-top: 4px;
  color: #ffffff;
  font-size: 1.35rem;
}

.staffOpsToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.staffListInputRow,
.staffAddGrid {
  display: grid;
  gap: 10px;
}

.staffListInputRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.staffAddGrid {
  grid-template-columns: minmax(0, 1fr) 220px auto;
}

.staffTitleGrantGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 1fr);
}

.staffSupportIdentityGrid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.staffSupportActionGrid {
  grid-template-columns: minmax(150px, 220px) auto auto;
  align-items: center;
}

.staffSupportHistoryList {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.staffSupportHistoryList::-webkit-scrollbar {
  width: 10px;
}

.staffSupportHistoryList::-webkit-scrollbar-thumb {
  background: #35548c;
  border-radius: 999px;
}

.staffSupportHistoryRow {
  border: 1px solid #35548c;
  border-radius: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #122542c2, #0f1f38de);
  display: grid;
  gap: 4px;
}

.staffSupportHistoryRow strong {
  font-size: 0.9rem;
}

.staffSupportHistoryMeta {
  color: #9db8e4;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.staffDiscordTopGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px 220px;
  gap: 10px;
}

.staffDiscordInviteGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 10px;
  align-items: end;
}

.staffDiscordTopGrid > select,
.staffDiscordInviteGrid > label,
.staffDiscordChannelGrid > select {
  min-width: 0;
}

.staffDiscordChannelGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
}

.staffDiscordBuilderLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
  align-items: start;
}

.staffDiscordBuilderColumn {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.staffDiscordPreviewColumn {
  min-width: 0;
}

.staffDiscordInlineGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staffDiscordInlineGrid > :only-child {
  grid-column: 1 / -1;
}

.staffDiscordInlineGrid > :nth-child(2):last-child {
  grid-column: span 2;
}

.staffDiscordToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #bcd2f4;
}

.staffDiscordToggle input[type='checkbox'] {
  width: 18px;
  height: 18px;
}

.staffDiscordListSection {
  border: 1px solid #33558f;
  border-radius: 10px;
  background: linear-gradient(180deg, #10203acc, #0c1930db);
  padding: 10px;
  display: grid;
  gap: 10px;
}

.staffDiscordListHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.staffDiscordDynamicList {
  display: grid;
  gap: 8px;
}

.staffDiscordDynamicRow {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto auto;
  gap: 8px;
  align-items: center;
}

.staffDiscordDynamicRow[data-kind='link'] {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
}

.staffDiscordDynamicRemoveBtn {
  min-width: 108px;
}

.staffDiscordInlineToggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #c1d6f7;
  font-size: 0.82rem;
}

.staffDiscordInlineToggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
}

.staffDiscordPreviewCard {
  background: linear-gradient(180deg, #111d34f0, #0d1728f2);
  border-color: #3b5f98;
}

.staffDiscordPreviewMessage {
  white-space: pre-wrap;
  line-height: 1.35;
  color: #e8f0ff;
  font-size: 0.94rem;
  border: 1px solid #2e4670;
  border-radius: 8px;
  background: linear-gradient(180deg, #111a2e, #0d1426);
  padding: 10px 12px;
  min-height: 48px;
}

.staffDiscordPreviewMessageInput {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}

.staffDiscordPreviewMessageInput::placeholder {
  color: #8195b8;
}

.staffDiscordEditable:focus {
  outline: none;
  border-color: #6aa2ff;
  box-shadow: 0 0 0 1px #84b4ff55;
}

.staffDiscordEditable:empty::before {
  content: attr(data-placeholder);
  color: #8195b8;
  pointer-events: none;
}

.staffDiscordPreviewEmbedHost {
  display: grid;
  gap: 8px;
}

.staffDiscordEmbedPreview {
  border-left: 4px solid var(--discord-embed-color, #00b3ff);
  border-radius: 8px;
  background: #121721;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.staffDiscordEmbedPreviewTop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.staffDiscordEmbedPreviewAuthor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dce7ff;
  font-size: 0.79rem;
}

.staffDiscordEmbedPreviewAuthor img {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}

.staffDiscordEmbedPreviewTitle {
  margin: 0;
  color: #f4f7ff;
  font-size: 0.98rem;
  line-height: 1.3;
}

.staffDiscordEmbedPreviewDescription {
  margin: 0;
  color: #c6d4f0;
  font-size: 0.9rem;
  line-height: 1.38;
  white-space: pre-wrap;
}

.staffDiscordEmbedPreviewTitle.staffDiscordEditable,
.staffDiscordEmbedPreviewDescription.staffDiscordEditable {
  border: 1px dashed transparent;
  border-radius: 6px;
  padding: 4px 6px;
}

.staffDiscordEmbedPreviewTitle.staffDiscordEditable:focus,
.staffDiscordEmbedPreviewDescription.staffDiscordEditable:focus {
  border-color: #5f86c6;
  background: #182237;
}

.staffDiscordEmbedPreviewTitleInput,
.staffDiscordEmbedPreviewDescriptionInput {
  width: 100%;
  border: 1px dashed transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  padding: 4px 6px;
  outline: none;
}

.staffDiscordEmbedPreviewTitleInput {
  font-weight: 700;
  font-size: 0.98rem;
}

.staffDiscordEmbedPreviewDescriptionInput {
  min-height: 80px;
  resize: vertical;
}

.staffDiscordEmbedPreviewTitleInput:focus,
.staffDiscordEmbedPreviewDescriptionInput:focus {
  border-color: #5f86c6;
  background: #182237;
}

.staffDiscordEmbedPreviewThumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #33527f;
}

.staffDiscordEmbedPreviewImage {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #33527f;
}

.staffDiscordEmbedPreviewFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.staffDiscordEmbedPreviewField {
  border: 1px solid #2f4d79;
  border-radius: 6px;
  padding: 6px 8px;
  background: #0f1621;
  display: grid;
  gap: 4px;
}

.staffDiscordEmbedPreviewField.inlineFalse {
  grid-column: 1 / -1;
}

.staffDiscordEmbedPreviewField strong {
  font-size: 0.8rem;
  line-height: 1.25;
}

.staffDiscordEmbedPreviewField span {
  font-size: 0.78rem;
  color: #cad6eb;
  line-height: 1.3;
  white-space: pre-wrap;
}

.staffDiscordEmbedPreviewFooter {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #a9b7d0;
  font-size: 0.74rem;
}

.staffDiscordEmbedPreviewFooter img {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
}

.staffDiscordPreviewLinksHost {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.staffDiscordPreviewLinkBtn {
  border: 1px solid #4f71b0;
  background: linear-gradient(180deg, #1d3261, #182a50);
  color: #e8f1ff;
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 0.8rem;
  text-decoration: none;
}

.staffTitleGrantMatches {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 4px;
}

.staffTitleGrantMatches::-webkit-scrollbar {
  width: 10px;
}

.staffTitleGrantMatches::-webkit-scrollbar-thumb {
  background: #35548c;
  border-radius: 999px;
}

.staffTitleGrantMatchBtn,
.staffSupportMatchBtn {
  width: 100%;
  display: grid;
  justify-items: start;
  gap: 2px;
  text-align: left;
}

.staffTitleGrantMatchBtn small,
.staffSupportMatchBtn small {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #9db8e4;
}

.staffUserList,
.staffRoleGroups {
  display: grid;
  gap: 10px;
  min-height: 0;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.staffUserList::-webkit-scrollbar,
.staffRoleGroups::-webkit-scrollbar {
  width: 10px;
}

.staffUserList::-webkit-scrollbar-thumb,
.staffRoleGroups::-webkit-scrollbar-thumb {
  background: #35548c;
  border-radius: 999px;
}

.staffCatalogJson {
  width: 100%;
  min-height: 360px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.35;
  border-radius: 12px;
  border: 1px solid #3a5a95;
  background: linear-gradient(180deg, #0f1a33, #0b1328);
  color: #dce8ff;
  padding: 10px 12px;
}

.staffNewsTickerInput {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  font-family: inherit;
  border-radius: 12px;
  border: 1px solid #3a5a95;
  background: linear-gradient(180deg, #0f1a33, #0b1328);
  color: #dce8ff;
  padding: 10px 12px;
  line-height: 1.3;
}

.staffCatalogVisualEditor {
  display: grid;
  gap: 14px;
  min-width: 0;
  overflow-x: clip;
}

.staffCatalogVisualEditor.disabled {
  opacity: 0.6;
}

.staffCatalogSection {
  border: 1px solid #304b7a;
  border-radius: 14px;
  background: linear-gradient(180deg, #152446d8, #101a33ea);
  min-width: 0;
  overflow: hidden;
}

.staffCatalogSection h4,
.staffCatalogSection h5 {
  margin: 0;
}

.staffCatalogSummary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8f1ff;
  background: linear-gradient(180deg, #182a52a3, #13213f70);
  border-bottom: 1px solid #2f4b7d;
}

.staffCatalogSummary::-webkit-details-marker {
  display: none;
}

.staffCatalogSummary::after {
  content: '▾';
  color: #a9c8f4;
  font-size: 0.95rem;
}

.staffCatalogCollapsible:not([open]) .staffCatalogSummary::after {
  content: '▸';
}

.staffCatalogCount,
.staffCatalogSummaryMeta {
  color: #9fc0f0;
  font-weight: 600;
  font-size: 0.9rem;
}

.staffCatalogSummaryMeta strong {
  color: #d7e7ff;
  font-weight: 700;
}

.staffCatalogSectionBody {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.staffCatalogSectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.staffCatalogSectionHead .tag {
  margin: 0;
}

.staffCatalogColorRows,
.staffCatalogPaletteRows,
.staffCatalogCosmeticRows {
  display: grid;
  gap: 8px;
}

.staffCatalogColorRows {
  max-height: none;
  overflow: visible;
  padding-right: 4px;
}

.staffCatalogColorRows::-webkit-scrollbar {
  width: 10px;
}

.staffCatalogColorRows::-webkit-scrollbar-thumb {
  background: #35548c;
  border-radius: 999px;
}

.staffCatalogColorRow {
  border: 1px solid #2f4b7d;
  border-radius: 12px;
  background: linear-gradient(180deg, #182a52, #13213f);
  display: block;
  min-width: 0;
  overflow: hidden;
}

.staffCatalogColorSummary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}

.staffCatalogColorSummary::after {
  content: '▸';
  color: #a9c8f4;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.staffCatalogColorRow[open] > .staffCatalogColorSummary::after {
  content: '▾';
}

.staffCatalogColorSummary::-webkit-details-marker {
  display: none;
}

.staffCatalogColorSummaryMain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.staffCatalogColorSummarySwatch {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid #a7c8ff7d;
  box-shadow: inset 0 0 0 1px #0000004a;
  flex: 0 0 auto;
}

.staffCatalogColorSummaryText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.staffCatalogColorSummaryName {
  color: #eaf3ff;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staffCatalogColorSummaryMeta {
  color: #9cb9eb;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staffCatalogColorSummaryActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.staffCatalogColorEditor {
  padding: 0 10px 10px;
  border-top: 1px solid #2f4b7d;
  display: grid;
  gap: 8px;
}

.staffCatalogColorRowMain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.staffCatalogColorRowMain > * {
  min-width: 0;
}

.staffCatalogColorMeta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
  min-width: 0;
}

.staffCatalogColorMeta > * {
  min-width: 0;
}

.staffCatalogSwatchField input[type='color'] {
  width: 100%;
  min-width: 0;
}

.staffCatalogHexEditor {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.staffCatalogHexEditor input[data-field='hexText'] {
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

.staffCatalogRowActions {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  gap: 8px;
}

.staffCatalogColorRow label span,
.staffCatalogPlayerCardBgRow label span,
.staffCatalogCosmeticRow label span {
  display: block;
  font-size: 0.76rem;
  color: #9cb9eb;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.staffCatalogColorRow .staffCatalogToggle,
.staffCatalogTitleRow .staffCatalogToggle,
.staffCatalogPlayerCardBgRow .staffCatalogToggle,
.staffCatalogCosmeticRow .staffCatalogToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid #355383;
  border-radius: 10px;
  padding: 0 10px;
  background: linear-gradient(180deg, #15254b, #121f3e);
  color: #d8e7ff;
  font-weight: 600;
  font-size: 0.95rem;
  width: 100%;
}

.staffCatalogColorRow .staffCatalogToggle input,
.staffCatalogTitleRow .staffCatalogToggle input,
.staffCatalogPlayerCardBgRow .staffCatalogToggle input,
.staffCatalogCosmeticRow .staffCatalogToggle input {
  margin: 0;
}

.staffCatalogPaletteGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staffCatalogPaletteCard {
  border: 1px solid #2f4b7d;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #182a52, #13213f);
  display: grid;
  gap: 8px;
}

.staffCatalogPaletteRow {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 110px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.staffCatalogPaletteRow input[type='color'] {
  width: 100%;
}

.staffCatalogTitleRows {
  display: grid;
  gap: 8px;
}

.staffCatalogPlayerCardBgRows {
  display: grid;
  gap: 8px;
}

.staffCatalogPlayerCardBgRow,
.staffCatalogCosmeticRow {
  border: 1px solid #2f4b7d;
  border-radius: 12px;
  background: linear-gradient(180deg, #182a52, #13213f);
  display: block;
  min-width: 0;
  overflow: hidden;
}

.staffCatalogPlayerCardBgSummaryPreview {
  display: inline-block;
  width: 62px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #b9d3ff7a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px #0000004a,
    inset 0 -16px 22px #00000047;
  flex: 0 0 auto;
}

.staffCatalogCosmeticSummaryPreview {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #b9d3ff7a;
  background:
    radial-gradient(circle at 50% 58%, #d9e8ff24 0 34%, transparent 35%),
    linear-gradient(180deg, #112140, #0d1830);
  box-shadow:
    inset 0 0 0 1px #0000004a,
    inset 0 -16px 22px #00000036;
  flex: 0 0 auto;
}

.staffCatalogCosmeticSummaryPreview img {
  display: block;
  max-width: 84%;
  max-height: 84%;
  object-fit: contain;
}

.staffCatalogTitleRow {
  border: 1px solid #2f4b7d;
  border-radius: 12px;
  background: linear-gradient(180deg, #182a52, #13213f);
  display: block;
  min-width: 0;
  overflow: hidden;
}

.staffCatalogTitleSummary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
}

.staffCatalogTitleSummary::after {
  content: '▸';
  color: #a9c8f4;
  font-size: 0.9rem;
  flex: 0 0 auto;
}

.staffCatalogTitleRow[open] > .staffCatalogTitleSummary::after {
  content: '▾';
}

.staffCatalogTitleSummary::-webkit-details-marker {
  display: none;
}

.staffCatalogTitleSummaryMain {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.staffCatalogTitleSummaryText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.staffCatalogTitleSummaryName {
  color: #eaf3ff;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staffCatalogTitleSummaryMeta {
  color: #9cb9eb;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staffCatalogTitleEditor {
  padding: 0 10px 10px;
  border-top: 1px solid #2f4b7d;
  display: grid;
  gap: 8px;
}

.staffCatalogTitleRowMain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-items: end;
}

.staffCatalogTitleEditor > * {
  min-width: 0;
}

.staffCatalogTitleRowMain > *,
.staffCatalogTitleRowVisual > *,
.staffCatalogTitleRowFlags > * {
  min-width: 0;
}

.staffCatalogTitleRowVisual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  align-items: end;
}

.staffCatalogTitleRowFlags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  align-items: end;
}

.staffCatalogTitleRow label span {
  display: block;
  font-size: 0.76rem;
  color: #9cb9eb;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.staffCatalogTitlePreview {
  min-height: 38px;
  border: 1px solid #3a5f98;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #152549, #111d3a);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #d6e7ff;
  text-shadow: 0 1px 3px #000b;
  position: relative;
  overflow: hidden;
}

.staffCatalogTitlePreviewText {
  position: relative;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staffCatalogTitlePreview.mode-solid .staffCatalogTitlePreviewText {
  color: var(--title-solid, #d6e7ff);
}

.staffCatalogTitlePreview.mode-gradient .staffCatalogTitlePreviewText {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(
    var(--title-angle, 90deg),
    var(--title-gradient-start, #ffe5a9) 0%,
    var(--title-gradient-end, #ff8a5c) calc(var(--title-gradient-scale, 100) * 1%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(1.2) brightness(1.08) drop-shadow(0 1px 1px #0007);
}

.staffCatalogTitlePreview.effect-shimmer .staffCatalogTitlePreviewText::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 420% 100%;
  background-position: -260% 0;
  background-repeat: no-repeat;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-shadow: none;
  filter: none;
  white-space: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(110deg, #ffffff00 49%, #ffffffde 50%, #ffffff00 51%);
  animation: playerTitleShimmer var(--title-shimmer-duration, 2.4s) linear infinite;
  will-change: background-position;
  mix-blend-mode: screen;
  pointer-events: none;
}

.staffCatalogDragHandle {
  min-width: 44px;
  width: 44px;
  padding: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
  cursor: grab;
}

.staffCatalogDragHandle:active {
  cursor: grabbing;
}

.staffCatalogColorRow.dragging,
.staffCatalogPaletteRow.dragging {
  opacity: 0.66;
  border-style: dashed;
}

.staffCatalogVisualEditor.disabled input,
.staffCatalogVisualEditor.disabled select,
.staffCatalogVisualEditor.disabled button {
  pointer-events: none;
}

.staffCatalogAdvanced {
  border: 1px solid #365688;
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #101a32f4, #0c1327f0);
}

.staffCatalogAdvanced summary {
  cursor: pointer;
  color: #cde2ff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.staffCatalogAdvanced .staffCatalogJson {
  margin-top: 8px;
  min-height: 220px;
}

.staffCatalogEmpty {
  color: #9cb6e2;
  font-size: 0.93rem;
}

.staffArenaTopRow {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.staffArenaEditor {
  display: grid;
  gap: 12px;
}

.staffArenaSection {
  border: 1px solid #304b7a;
  border-radius: 12px;
  background: linear-gradient(180deg, #142345d8, #101a33ef);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.staffArenaSection h4 {
  margin: 0;
}

.staffArenaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.staffArenaSpawnActions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.staffArenaArtActions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.staffArenaPreviewSection {
  border: 1px solid #365688;
  border-radius: 12px;
  background: linear-gradient(180deg, #101a32f4, #0c1327f0);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.staffArenaPreviewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.staffArenaPreviewSection h4 {
  margin: 0;
}

.staffArenaPreviewSection canvas {
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  border: 1px solid #35548c;
  background: linear-gradient(180deg, #0b1224, #121d36);
}

.staffArenaJson {
  min-height: 280px;
}

.staffArenaViewportOverlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: auto;
  background:
    radial-gradient(circle at 16% 18%, #2f4d831f 0%, transparent 32%),
    radial-gradient(circle at 82% 14%, #9363221d 0%, transparent 28%),
    linear-gradient(180deg, #060a14f6, #0a1020fc 56%, #070b15fa);
}

body.staffArenaViewportOpen {
  overflow: hidden;
}

.staffArenaViewportOverlay.hidden {
  display: none;
}

.staffArenaViewportOverlay canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.staffArenaViewportOverlay canvas.dragging {
  cursor: grabbing;
}

.staffArenaViewportOverlay canvas.gizmo-dragging {
  cursor: crosshair;
}

.staffArenaViewportHud {
  position: absolute;
  top: max(14px, calc(8px + env(safe-area-inset-top)));
  left: max(14px, calc(8px + env(safe-area-inset-left)));
  right: max(14px, calc(8px + env(safe-area-inset-right)));
  display: grid;
  gap: 8px;
  max-width: min(960px, 96vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #365688;
  background: linear-gradient(180deg, #111d39eb, #0d1730ef);
  box-shadow: 0 16px 36px #0009;
}

.staffArenaViewportEditor {
  position: absolute;
  top: max(14px, calc(8px + env(safe-area-inset-top)));
  right: max(14px, calc(8px + env(safe-area-inset-right)));
  bottom: max(14px, calc(8px + env(safe-area-inset-bottom)));
  width: min(420px, 40vw);
  border-radius: 12px;
  border: 1px solid #365688;
  background: linear-gradient(180deg, #111d39eb, #0d1730ef);
  box-shadow: 0 16px 36px #0009;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.staffArenaViewportOverlay.controls-collapsed .staffArenaViewportEditor {
  display: none;
}

.staffArenaViewportEditorScroll {
  padding: 10px;
  overflow: auto;
  display: grid;
  gap: 10px;
}

.staffArenaViewportSection {
  border: 1px solid #314f80;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: linear-gradient(180deg, #13264ad9, #101e3be8);
}

.staffArenaViewportSection h4 {
  margin: 0;
}

.staffArenaViewportGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.staffArenaViewportEditorActions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.staffArenaViewportTooltip {
  position: absolute;
  pointer-events: none;
  z-index: 135;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #4e74ad;
  background: linear-gradient(180deg, #172849f0, #0f1d38f0);
  color: #eef5ff;
  font-size: 0.82rem;
  line-height: 1.2;
  box-shadow: 0 10px 20px #0008;
  white-space: nowrap;
}

.staffArenaViewportTooltip.hidden {
  display: none;
}

.staffArenaViewportActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.staffArenaViewportZoomRow {
  display: grid;
  grid-template-columns: auto minmax(180px, 360px) auto auto;
  gap: 8px;
  align-items: center;
}

.staffArenaViewportZoomRow input[type='range'] {
  width: 100%;
}

.staffArenaViewportZoomLabel {
  min-width: 60px;
  text-align: right;
}

@media (max-width: 900px) {
  .staffCatalogColorRowMain,
  .staffCatalogColorMeta,
  .staffCatalogTitleRowMain,
  .staffCatalogTitleRowVisual,
  .staffCatalogTitleRowFlags,
  .staffCatalogPaletteGrid,
  .staffArenaTopRow,
  .staffArenaGrid {
    grid-template-columns: 1fr;
  }

  .staffCatalogColorSummary,
  .staffCatalogTitleSummary {
    align-items: flex-start;
  }

  .staffCatalogPaletteRow {
    grid-template-columns: 1fr;
  }

  .staffCatalogRowActions {
    justify-content: stretch;
  }

  .staffArenaViewportZoomRow {
    grid-template-columns: auto 1fr auto auto;
  }
}

@media (max-width: 1200px) {
  .staffArenaViewportEditor {
    width: min(450px, 46vw);
  }
}

@media (max-width: 980px) {
  .staffArenaViewportHud {
    max-width: min(96vw, 680px);
  }

  .staffArenaViewportEditor {
    left: max(14px, calc(8px + env(safe-area-inset-left)));
    right: max(14px, calc(8px + env(safe-area-inset-right)));
    top: auto;
    bottom: max(10px, calc(8px + env(safe-area-inset-bottom)));
    width: auto;
    max-height: min(54vh, 560px);
  }

  .staffArenaViewportTooltip {
    font-size: 0.78rem;
    max-width: 85vw;
    white-space: normal;
  }
}

.staffUserRow,
.staffRoleGroup {
  border: 1px solid #314d80;
  border-radius: 14px;
  background: linear-gradient(180deg, #18274a, #111c36);
  padding: 12px 14px;
}

.staffUserRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.staffRoleGroup {
  display: grid;
  gap: 10px;
}

.staffRoleGroupTitle {
  color: #f7be7d;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staffRoleGroupUsers {
  display: grid;
  gap: 8px;
}

.staffEmpty {
  color: #8ca7d8;
  font-size: 0.95rem;
}

.staffActions {
  margin-top: 0;
}

.menuFullscreenBtn:hover {
  background: #16274f;
}

#loginScreen {
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0f173000 0%, #060a14aa 100%);
  overflow: auto;
  padding: 18px;
}

.loginScreenLayout {
  width: min(96vw, 940px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.card {
  pointer-events: auto;
  width: min(92vw, 760px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #101b33f2, #0b1224f3);
  box-shadow:
    0 24px 70px #0009,
    inset 0 1px 0 #8ec4ff17,
    0 0 0 1px #4f79bf21;
  padding: 24px;
}

#staffScreen .staffCard {
  width: 100%;
  max-width: none;
  flex: 1;
}

.loginCard {
  width: min(100%, 520px);
  flex: 1 1 520px;
  text-align: center;
  padding: 28px;
  border-color: #3a5184;
  background: linear-gradient(180deg, #101b35f2, #0b1329f2);
}

.loginInfoCard {
  width: min(100%, 300px);
  min-width: 250px;
  flex: 0 0 auto;
  margin-left: 0;
  border-color: #6d4474;
  background: linear-gradient(180deg, #4f1d63f2 0%, #3d124ef4 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px 20px;
}

.loginInfoLogo {
  width: min(220px, 84%);
  height: auto;
  filter: drop-shadow(0 8px 16px #0005);
}

.loginInfoHeadline {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.loginInfoPrompt {
  margin: 8px 0 0;
  color: #f7daf7;
  font-size: 1.05rem;
}

.deviceLoginPanel {
  width: 100%;
  max-width: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.deviceLoginPanel.hidden,
.deviceLoginPanel[hidden] {
  display: none !important;
}

.deviceLoginTitle {
  margin: 0;
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deviceLoginQrFrame {
  width: min(100%, 188px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  background: #ffffff;
  box-shadow: 0 12px 28px #0005;
}

.deviceLoginQr {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.deviceLoginCode {
  min-height: 24px;
  margin: 0;
  color: #101b33;
  background: #ffffff;
  border: 2px solid #ffe7ce;
  padding: 3px 10px 1px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.06em;
}

.deviceLoginStatus {
  min-height: 32px;
  margin: 0;
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.15;
}

.deviceLoginRefreshBtn {
  min-height: 34px;
  padding: 4px 14px;
  border: 2px solid #ffffffb8;
  background: #18295b;
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.deviceLoginRefreshBtn:hover,
.deviceLoginRefreshBtn:focus-visible {
  filter: brightness(1.08);
}

.loginRegisterBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 52px;
  padding: 10px 24px;
  border: 2px solid #ffe7ce;
  background: #ffffff;
  color: #1f1d30;
  text-decoration: none;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    transform 120ms ease,
    filter 120ms ease;
}

.loginRegisterBtn:hover,
.loginRegisterBtn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

#loginFormPanel,
.loginLoadingPanel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#loginFormPanel.hidden,
#loginFormPanel[hidden],
.loginLoadingPanel.hidden,
.loginLoadingPanel[hidden] {
  display: none !important;
}

.loginLoadingPanel {
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.loginLoadingSpinner {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid #29406b;
  border-top-color: #7db1ff;
  box-shadow: 0 0 24px #4f95ff33;
  animation: loginSpinner 0.9s linear infinite;
}

.loginLoadingTitle {
  font-size: 1.1rem;
  color: #dfeaff;
}

@keyframes loginSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes menuTickerMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--menu-ticker-shift, 50%)));
  }
}

.loginLogo {
  width: min(320px, 68vw);
  height: auto;
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 10px 20px #0008);
}

.menuLayout {
  --menu-viewport-height: var(--app-vh);
  --menu-grid-row-gap: 12px;
  --menu-support-row-height: clamp(120px, 16vh, 176px);
  --menu-ticker-height: clamp(52px, 7vh, 72px);
  --menu-utility-gutter: 86px;
  --menu-pad-top: calc(18px + env(safe-area-inset-top));
  --menu-pad-bottom: calc(14px + env(safe-area-inset-bottom));
  --menu-main-card-height: max(
    390px,
    calc(
      var(--menu-viewport-height) - var(--menu-pad-top) - var(--menu-pad-bottom) - var(--menu-support-row-height) -
        var(--menu-ticker-height) - (var(--menu-grid-row-gap) * 2)
    )
  );
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(420px, 1fr);
  grid-template-rows: var(--menu-main-card-height) var(--menu-support-row-height) var(--menu-ticker-height);
  grid-template-areas:
    'rail work'
    'support support'
    'ticker ticker';
  gap: var(--menu-grid-row-gap) 20px;
  align-items: start;
  padding: var(--menu-pad-top) calc(26px + env(safe-area-inset-right) + var(--menu-utility-gutter)) var(--menu-pad-bottom)
    calc(26px + env(safe-area-inset-left));
}

.menuLayout.is-private-tab,
.menuLayout.is-onimo-tab,
.menuLayout.is-store-tab {
  /* Keep unified viewport-fit sizing across tabs. */
}

.menuRail {
  grid-area: rail;
  width: 100%;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  position: relative;
  min-height: var(--menu-main-card-height);
  height: var(--menu-main-card-height);
  max-height: var(--menu-main-card-height);
  overflow-x: hidden;
  overflow-y: auto;
  border-color: #355696;
  box-shadow:
    0 16px 44px #0008,
    inset 0 1px 0 #a6d0ff1a,
    0 0 30px #2d66be2a;
}

.menuRail::before {
  content: '';
  position: absolute;
  inset: -20% -20% auto -20%;
  height: 220px;
  background:
    radial-gradient(circle at 18% 35%, #60a5ff2e 0%, #60a5ff00 70%),
    radial-gradient(circle at 74% 28%, #f59a3d20 0%, #f59a3d00 68%);
  pointer-events: none;
}

.menuWork {
  grid-area: work;
  min-width: 0;
}

.menuSupportRow {
  grid-area: support;
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
  height: var(--menu-support-row-height);
  gap: 14px;
  min-height: 0;
  align-items: stretch;
}

.menuSupportRow .card,
.menuTicker.card {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.menuTicker {
  grid-area: ticker;
}

.menuCard,
.menuFuture,
.menuRail {
  width: 100%;
}

.menuCard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: var(--menu-main-card-height);
  max-height: var(--menu-main-card-height);
  overflow: hidden;
  border-color: #365a9a;
  box-shadow:
    0 18px 46px #0009,
    inset 0 1px 0 #c6deff17,
    0 0 34px #2d6ccd30;
}

.menuCardPhoneBar {
  display: none;
  margin: -2px 0 8px;
  justify-content: flex-start;
}

.menuRailBackBtn {
  display: none;
  min-width: 96px;
}

.onlineAccessNotice {
  margin: 16px 18px 0;
  padding: 14px 16px 13px;
  border: 1px solid #3d65a4;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #132348ee, #0d1834f2),
    linear-gradient(90deg, #4d89f51f, transparent 58%);
  box-shadow:
    inset 0 1px 0 #a8caff1f,
    0 8px 22px #0005,
    0 0 22px #4d89f51a;
  position: relative;
  overflow: hidden;
}

.onlineAccessNotice::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #5d9cff, #f59a3d);
  box-shadow: 0 0 16px #5d9cff88;
}

.onlineAccessNotice.maintenanceNotice {
  border-color: #4c79bf;
  background:
    linear-gradient(180deg, #14295bf0 0%, #0e1b3ef2 72%, #2d2115f0 100%),
    linear-gradient(105deg, #4d89f526 0%, #f59a3d1c 74%, transparent 100%);
  box-shadow:
    inset 0 1px 0 #b7d4ff22,
    0 12px 28px #0006,
    0 0 28px #3470dc2c;
}

.onlineAccessNoticeTitle {
  margin: 0;
  color: #e8f2ff;
  font-size: 1.28rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  line-height: 0.95;
  text-shadow: 0 2px 10px #0009;
}

.maintenanceNotice .onlineAccessNoticeTitle {
  color: #ffffff;
}

.onlineAccessNoticeBody {
  margin: 6px 0 0;
  color: #c9dcfa;
  font-size: 1.18rem;
  line-height: 1.3;
}

.maintenanceNotice .onlineAccessNoticeBody {
  color: #f5dfc4;
}

.menuFuture {
  min-height: 0;
  overflow: hidden;
  border-color: #33528c;
  box-shadow:
    0 10px 30px #0008,
    inset 0 1px 0 #97c0ff17,
    0 0 24px #2a62bf26;
}

.menuCard::before,
.menuFuture::before,
.queueCard::before,
.privateLobbyCard::before,
.settingsShell::before {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #5ea0ff 0%, #6ea8ff 58%, #f59a3d 100%);
  opacity: 0.86;
  pointer-events: none;
}

.menuRail,
.menuCard,
.menuFuture,
.settingsShell,
.privateLobbyCard,
.privateSettingsShell,
.privateEntryCard,
.queueCard {
  position: relative;
}

.menuRail::after,
.menuCard::after,
.menuFuture::after,
.settingsShell::after,
.privateLobbyCard::after,
.privateSettingsShell::after,
.privateEntryCard::after,
.queueCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--panel-sheen);
  transform: translateX(-135%);
  animation: panelSheen 12s ease-in-out infinite;
  pointer-events: none;
}

.menuRail::after,
.menuFuture::after {
  animation-duration: 13.5s;
}

.menuTabRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.menuTabRowIcons {
  grid-template-columns: repeat(2, minmax(52px, 64px));
  justify-content: end;
  margin-top: auto;
}

.menuTab {
  font-size: 1.55rem;
  border-color: #4572be;
  background: linear-gradient(180deg, #15244a, #111d3b);
  text-align: center;
  transition:
    transform 140ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.menuTab.active {
  background: linear-gradient(102deg, #4f93ff 0%, #76b2ff 82%, #f3a453 100%);
  color: #081225;
  box-shadow:
    0 10px 24px #2f67ce6a,
    0 0 18px #6aaeff75,
    0 0 20px #f59a3d2a;
}

.menuTab:hover {
  transform: translateY(-1px);
}

.menuTabIcon {
  min-height: 56px;
  min-width: 56px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menuTabIcon.showControllerActionPrompt {
  padding-left: 10px;
}

.menuTabIcon img {
  width: 26px;
  height: 26px;
  display: block;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.playerCard {
  --player-card-art-height: var(--menu-support-row-height, var(--player-card-height));
  --player-card-art-width: calc(var(--player-card-art-height) * 21 / 9);
  --player-card-bg-image: url('/Assets/PlayerCardBackgrounds/pc_gold.webp');
  --player-card-bg-size: cover;
  --player-card-bg-position: center;
  --player-card-bg-opacity: 1;
  --player-card-overlay-image: linear-gradient(180deg, #0000006b, #00000042 42%, #0000002a);
  --player-card-overlay-opacity: 0.56;
  --player-card-text-shadow: 0 2px 7px #000f, 0 0 10px #0009;
  --player-card-text-glow: 0 0 12px #9ec8ff52;
  border: 1px solid #8db4f0;
  border-radius: 18px;
  background: linear-gradient(90deg, #2a3e76c7, #1a2548c7);
  padding: 12px;
  box-shadow: inset 0 0 0 1px #c9dcff24;
  width: min(100%, var(--player-card-art-width));
  height: auto;
  max-width: 100%;
  aspect-ratio: var(--player-card-aspect-ratio);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  justify-self: start;
  align-self: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.playerCard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--player-card-bg-image);
  background-size: var(--player-card-bg-size);
  background-position: var(--player-card-bg-position);
  background-repeat: no-repeat;
  opacity: var(--player-card-bg-opacity);
  filter: saturate(1.08) brightness(1.06);
  pointer-events: none;
  z-index: 0;
}

.playerCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--player-card-overlay-image);
  opacity: var(--player-card-overlay-opacity);
  pointer-events: none;
  z-index: 1;
}

.playerCard > * {
  position: relative;
  z-index: 2;
}

.playerCardName {
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1;
  color: #e9f1ff;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.playerCardNameWithRole {
  min-width: 0;
  max-width: 100%;
}

.playerCardNameText {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playerCardIdentity {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.playerCardTitle {
  margin: 0;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c9dcff;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.playerCardTitle.mode-solid {
  color: var(--title-solid, #d3e5ff);
}

.playerCardTitle.mode-gradient {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(
    var(--title-angle, 90deg),
    var(--title-gradient-start, #ffe5a9) 0%,
    var(--title-gradient-end, #ff8a5c) calc(var(--title-gradient-scale, 100) * 1%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(1.18) brightness(1.06) drop-shadow(0 1px 1px #0008);
}

.playerCardTitle.effect-shimmer {
  position: relative;
}

.playerCardTitle.effect-shimmer::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 420% 100%;
  background-position: -260% 0;
  background-repeat: no-repeat;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-shadow: none;
  filter: none;
  white-space: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(110deg, #ffffff00 49%, #ffffffea 50%, #ffffff00 51%);
  animation: playerTitleShimmer var(--title-shimmer-duration, 2.4s) linear infinite;
  will-change: background-position;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .playerCardTitle.effect-shimmer::after,
  .onimoTitleSwatchLabel.effect-shimmer::after,
  .staffCatalogTitlePreview.effect-shimmer .staffCatalogTitlePreviewText::after {
    animation: none;
    display: none;
  }
}

.playerCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.playerCardBadges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.playerCardMeta {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  color: #d1e2ff;
  font-size: clamp(0.95rem, 1.2vw, 1.16rem);
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.playerCardOnipassCapsule,
.playerCardCreditsCapsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid #4f78b3;
  background: linear-gradient(180deg, #1b3058, #142549);
  color: #eaf4ff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 #0009;
  box-shadow:
    inset 0 1px 0 #cde1ff21,
    0 8px 16px #0006;
}

.playerCardOnipassCapsule {
  border-color: #7aa8ea;
  background: linear-gradient(180deg, #25477f, #1c3766);
  color: #f2f8ff;
}

.playerCardOnipassIcon,
.playerCardCreditsIcon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.playerCardOnipassIcon {
  background: linear-gradient(180deg, #a8d0ff, #75abff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 9px #6eaaff70);
}

.playerCardCreditsIcon {
  background: linear-gradient(180deg, #9dd8ff, #68b6ff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 8px #5daeff6e);
}

.playerCardOnipassLabel {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.playerCardBar {
  margin-top: 6px;
  height: 8px;
  border-radius: 99px;
  background: #6c7588;
  overflow: hidden;
}

.playerCardBarFill {
  width: 85%;
  height: 100%;
  background: linear-gradient(90deg, #9ec7ff 0%, #6ea8ff 82%, #f59a3d 100%);
  position: relative;
  overflow: hidden;
}

.playerCardBarFill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #ffffff00 28%, #ffffff9c 48%, #ffffff00 68%);
  transform: translateX(-140%);
  animation: xpShimmer 2.6s ease-in-out infinite;
}

.playerCardHint {
  margin-top: auto;
  text-align: right;
  color: #8eb3eb;
  font-size: 0.88rem;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.menuSponsorCard {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 0;
}

.menuSponsorTag {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 2;
  color: #dceaff;
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #476fb1;
  background: linear-gradient(180deg, #112347e6, #0c1831ea);
  box-shadow: 0 6px 16px #0007;
}

.menuSponsorLink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  border: 0;
  background: #071027;
  min-height: 0;
}

.menuSponsorLink.is-disabled {
  pointer-events: none;
}

.menuSponsorMedia,
.menuSponsorVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0a1121;
  display: block;
  transition: opacity 220ms ease;
}

.menuSponsorMedia.hidden,
.menuSponsorVideo.hidden {
  display: none;
}

.menuSponsorMedia.is-fading,
.menuSponsorVideo.is-fading {
  opacity: 0;
}

.menuTicker {
  border-color: #355b97;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  height: var(--menu-ticker-height);
  overflow: hidden;
  padding-top: 8px;
  padding-bottom: 8px;
}

.menuTickerLabel {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  color: #9fc2f6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.9rem;
  white-space: nowrap;
}

.menuNewsTickerViewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  contain: paint;
}

.menuNewsTickerTrack {
  display: inline-flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  min-width: max-content;
  color: #deebff;
  letter-spacing: 0.03em;
  animation: menuTickerMarquee var(--menu-ticker-duration, 28s) linear infinite;
}

.menuNewsTickerTrack span {
  white-space: nowrap;
}

.menuNewsTickerTrack.paused {
  animation-play-state: paused;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0.08em;
  text-shadow:
    0 2px 12px #6aaeff29,
    0 0 16px #f59a3d1f;
}

.brandLogo {
  width: min(255px, 64vw);
  height: auto;
  display: block;
  margin: 0 auto 6px;
  align-self: center;
}

h2 {
  font-size: 2rem;
}

.tag {
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  gap: 12px;
}

.grid > * {
  min-width: 0;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.colors {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  margin-top: 10px;
}

label {
  display: grid;
  gap: 7px;
  font-size: 1.02rem;
}

input,
select,
button {
  font-family: inherit;
  font-size: 1rem;
  border-radius: 12px;
  border: 1px solid #2f4f85;
  background: linear-gradient(180deg, #172442, #131f38);
  color: var(--text);
  padding: 10px 12px;
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid #82b9ff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #78abff33;
}

.gamepadMenuFocus {
  outline: 2px solid #82b9ff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #78abff33;
}

#menuScreen button:hover,
#menuScreen select:hover,
#menuScreen input:hover,
#staffScreen button:hover,
#staffScreen select:hover,
#staffScreen input:hover {
  outline: 2px solid #82b9ff;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #78abff33;
}

.gamepadSelectAdjusting {
  outline-color: #f5b55a;
  box-shadow: 0 0 0 4px #f5b55a2f;
}

.showControllerActionPrompt {
  position: relative;
  padding-right: 34px;
}

.showControllerActionPrompt::before {
  content: '';
  position: absolute;
  right: 9px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  opacity: 0;
  background-image: var(--controller-primary-icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 120ms ease;
  pointer-events: none;
}

body.controller-active .showControllerActionPrompt::before {
  opacity: 0.96;
}

body.controller-active .menuTabIcon.showControllerActionPrompt {
  padding-right: 10px;
}

body.controller-active .menuTabIcon.showControllerActionPrompt::before {
  right: -5px;
  top: -5px;
  transform: none;
}

input[type='color'] {
  height: 38px;
  padding: 2px;
}

button {
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.04em;
}

button.onimoPendingButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button.onimoPendingButton::before {
  content: '';
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: onimoInlineSpinner 700ms linear infinite;
  opacity: 0.92;
  flex: 0 0 auto;
}

button.onimoStoreBtn.onimoPendingButton::before {
  /* Keep store tile iconography and active-plan badge stable while pending. */
  content: none;
  animation: none;
}

@keyframes onimoInlineSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button.primary {
  background: linear-gradient(95deg, var(--blue) 0%, #7db2ff 78%, #f1a452 100%);
  color: #0d1222;
  border: 0;
  box-shadow:
    0 0 24px #4d8dff55,
    0 0 16px #f59a3d2d;
}

button.secondary {
  background: #2a3554;
}

button.danger {
  background: var(--danger);
  color: #fff;
  border: 0;
}

.actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

button:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  filter: saturate(0.75);
}

button.partyLocked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: visible !important;
  position: relative;
}

.partyLockIcon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background: currentColor;
  mask: url('/Assets/Icons/menu/iconLocked.svg') center / contain no-repeat;
  -webkit-mask: url('/Assets/Icons/menu/iconLocked.svg') center / contain no-repeat;
}

button.partyLocked:disabled:hover {
  transform: none;
}

button.partyLocked:disabled {
  opacity: 1;
}

.partyLockTooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 320;
  display: block;
  width: max-content;
  max-width: min(320px, 82vw);
  padding: 8px 10px;
  border: 1px solid #78a9ff;
  background: #071329f2;
  box-shadow: 0 10px 22px #00000075;
  color: #edf5ff;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

button.partyLocked:hover > .partyLockTooltip,
button.partyLocked:focus-visible > .partyLockTooltip,
body.controller-active button.partyLocked.gamepadMenuFocus > .partyLockTooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.inlineInput {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}

.inlineInput input {
  width: 120px;
}

.privateLobbyPanel {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #102043 0%, #0b1630 100%);
  box-shadow:
    inset 0 1px 0 #9fc7ff24,
    0 0 0 1px #2f64bc45;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.privateEntryActions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.privateEntryCard {
  margin-top: 12px;
  border: 1px solid #2f64bc;
  border-radius: 10px;
  padding: 14px;
  background: linear-gradient(180deg, #102043 0%, #0c1732 100%);
  box-shadow:
    inset 0 1px 0 #9fc7ff24,
    0 0 16px #2b5eb438;
}

.privateFieldLabel {
  display: inline-flex;
  align-items: center;
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #d2e3ff;
}

.privateCreateToggleField {
  display: grid;
  gap: 0;
  align-content: start;
  align-self: start;
}

.privateCreateToggleField .privateCreateToggleRow {
  margin-top: 0;
}

.privateCreateToggleRow .choiceBtn {
  min-height: 52px;
}

.privateCreateToggleRow .privateQueueToggleBtn {
  font-size: 1rem;
}

.privateRoleToggleRow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.privateCreateSelectFallback {
  display: none !important;
}

.privateLobbyCodeRow {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}

.privateLobbyHeader {
  display: grid;
  grid-template-columns: minmax(240px, 0.35fr) minmax(0, 0.65fr);
  gap: 12px;
  align-items: stretch;
}

.privateLobbyCodeLabel {
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7cef2;
}

.privateLobbyCodeControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.privateLobbyCodeValue {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #3a67b5;
  background: linear-gradient(90deg, #162d5f 0%, #12244b 100%);
  color: #f4f8ff;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

#privateLobbyCopyCodeBtn {
  min-width: 88px;
}

.privateLobbyGrid {
  align-items: start;
  grid-template-columns: minmax(520px, 1.3fr) minmax(360px, 0.9fr);
}

.privateLobbyCard {
  border: 1px solid #2c3e67;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #0f1930, #0d162b);
  min-height: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 #a2c9ff12;
}

.privateLobbyMembers {
  display: grid;
  gap: 12px;
  max-height: min(58vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
}

.privateRosterBoard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.privateRosterStaffBoard,
.privateRosterStack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.privateRosterStack {
  grid-template-columns: 1fr;
}

.privateRosterZone {
  min-height: 128px;
  border: 1px solid #33558f;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, #112143, #0e1b36);
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.privateRosterZone.team0 {
  border-color: var(--private-team-color, #508be3);
}

.privateRosterZone.team1 {
  border-color: var(--private-team-color, #e88f48);
}

.privateRosterZone.dragOver {
  border-color: #dbeaff;
  box-shadow: inset 0 0 0 2px #dbeaff66, 0 0 16px #5796ff55;
  transform: translateY(-1px);
}

.privateRosterZoneHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.privateRosterZoneHeader h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--private-team-color, #f3f8ff);
}

.privateRosterZoneHeader span {
  color: #b9cef0;
  font-size: 0.9rem;
}

.privateRosterList {
  display: grid;
  gap: 8px;
}

.privateRosterEmpty {
  margin: 0;
  border: 1px dashed color-mix(in srgb, var(--private-team-color, #47699e) 72%, #dbeaff 28%);
  padding: 12px;
  color: #91a6c8;
  text-align: center;
}

.privateMemberRow {
  display: grid;
  gap: 6px;
  border: 1px solid #2f4169;
  border-radius: 10px;
  padding: 8px;
  background: #15203a;
}

.privateRosterPlayer[draggable='true'] {
  cursor: grab;
}

.privateRosterPlayer[draggable='true']:active {
  cursor: grabbing;
}

.privateMemberTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.privateMemberTop > * {
  min-width: 0;
}

.privateMemberName {
  font-weight: 700;
}

.privateMemberBadges {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.8rem;
  border: 1px solid #3f5788;
  background: #192a4e;
  color: #dbe8ff;
}

.pill.host {
  border-color: #f1c06d;
  background: #4a3716;
  color: #ffe7b8;
}

.pill.spectator {
  border-color: #8e9bc0;
  background: #2a3248;
  color: #d6deef;
}

.pill.producer {
  border-color: #9be890;
  background: #244329;
  color: #d9f8d3;
}

.pill.team0 {
  border-color: color-mix(in srgb, var(--private-team-color, #7cb3ff) 78%, #ffffff 22%);
  background: color-mix(in srgb, var(--private-team-color, #1b345f) 34%, #101a31 66%);
}

.pill.team1 {
  border-color: color-mix(in srgb, var(--private-team-color, #ffbb83) 78%, #ffffff 22%);
  background: color-mix(in srgb, var(--private-team-color, #573419) 34%, #101a31 66%);
}

.pill.ready {
  border-color: #8fe6a0;
  background: #214930;
  color: #d8f9e0;
}

.pill.notReady {
  border-color: #b4c1de;
  background: #2a3550;
  color: #dee7ff;
}

.pill.waiting {
  border-color: #b6a2dc;
  background: #332a4a;
  color: #eadfff;
}

.privateMemberControls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.privateMemberControls select {
  min-width: 130px;
}

.privateMemberBotAction {
  min-width: 132px;
}

.privateMoveBtn,
.privateRoleMoveBtn {
  min-width: 92px;
}

#privateTeamVisualsGroup {
  grid-column: 1 / -1;
  border: 1px solid #2c3e67;
  border-radius: 10px;
  padding: 10px;
  background: #121d36;
}

.privateLobbySummaryStrip {
  margin: 8px 0 10px;
  border: 1px solid #385992;
  border-radius: 10px;
  background: linear-gradient(92deg, #1a2c53 0%, #172648 72%, #3a2614 100%);
  color: #d8e7ff;
  padding: 8px 10px;
  font-size: 0.95rem;
}

.privateBotControls {
  margin-top: 10px;
  border: 1px solid #2e4676;
  border-radius: 10px;
  padding: 10px;
  background: linear-gradient(180deg, #13203c, #101a31);
  display: grid;
  gap: 10px;
}

.privateBotControlsCopy {
  display: grid;
  gap: 6px;
}

.privateBotControlsCopy strong {
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: #eef5ff;
}

.privateBotControlsCopy .tag {
  margin: 0;
}

.privateBotPicker {
  display: grid;
  gap: 6px;
}

.privateBotPicker select {
  min-width: 220px;
}

.privateBotActions {
  justify-content: flex-start;
}

.privateSettingsShell {
  border: 1px solid #2d4471;
  border-radius: 12px;
  background: linear-gradient(180deg, #0f1b37, #0c1630);
  padding: 8px;
  max-height: min(52vh, 540px);
  overflow-x: hidden;
  overflow-y: auto;
}

.privateSettingsTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.privateSettingsTabs .settingsTabBtn {
  min-height: 44px;
  transition:
    transform 160ms ease,
    box-shadow 180ms ease;
}

.privateSettingsTabs .settingsTabBtn:hover {
  transform: translateY(-1px);
}

.privateSettingsTabs .settingsTabBtn.active {
  box-shadow:
    0 0 0 1px #9ec6ff88 inset,
    0 0 16px #4f93ff44;
}

.privateSettingsPanel {
  display: none;
  border: 1px solid #294274;
  border-radius: 10px;
  background: linear-gradient(180deg, #132245, #111f3f);
  padding: 10px;
  box-shadow: inset 0 1px 0 #b0d0ff10;
}

.privateSettingsPanel.active {
  display: block;
  animation: privateTabIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.privateStickyActions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 12px;
  padding-top: 10px;
  padding-bottom: 2px;
  background: linear-gradient(180deg, #101a3100 0%, #101a31ea 24%, #101a31 100%);
  border-top: 1px solid #2d4471;
}

@keyframes privateTabIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menuPanel {
  display: none;
  margin-top: 12px;
  min-height: 0;
}

.menuPanel.active {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  animation: panelIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.onlineAccessNotice:not(.hidden) + .menuPanel.active {
  margin-top: 10px;
}

.menuPanel.active > * {
  min-width: 0;
  opacity: 0;
  animation: childIn 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.menuPanel.active > *:nth-child(1) {
  animation-delay: 40ms;
}

.menuPanel.active > *:nth-child(2) {
  animation-delay: 85ms;
}

.menuPanel.active > *:nth-child(3) {
  animation-delay: 130ms;
}

.menuPanel.active > *:nth-child(4) {
  animation-delay: 175ms;
}

.menuPanel.active > *:nth-child(5) {
  animation-delay: 220ms;
}

.menuPanel.active > *:nth-child(6) {
  animation-delay: 265ms;
}

.modeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.modeGrid.modeTabs {
  margin-top: 10px;
}

.menuPanel.active .modeGrid .modeCard,
.menuPanel.active .smallChoiceRow .choiceBtn,
.menuPanel.active .actions > button,
.menuPanel.active .actions > label,
.menuPanel.active .actions > select {
  opacity: 0;
  animation: childIn 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.menuPanel.active .modeGrid .modeCard:nth-child(1),
.menuPanel.active .smallChoiceRow .choiceBtn:nth-child(1) {
  animation-delay: 140ms;
}

.menuPanel.active .modeGrid .modeCard:nth-child(2),
.menuPanel.active .smallChoiceRow .choiceBtn:nth-child(2) {
  animation-delay: 180ms;
}

.menuPanel.active .smallChoiceRow .choiceBtn:nth-child(3),
.menuPanel.active .actions > :nth-child(1) {
  animation-delay: 220ms;
}

.menuPanel.active .smallChoiceRow .choiceBtn:nth-child(4),
.menuPanel.active .actions > :nth-child(2) {
  animation-delay: 250ms;
}

.menuPanel.active .smallChoiceRow .choiceBtn:nth-child(5),
.menuPanel.active .actions > :nth-child(3) {
  animation-delay: 280ms;
}

.menuPanel.active .actions > :nth-child(4) {
  animation-delay: 310ms;
}

.modeCard {
  min-height: 120px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  border-color: #426db4;
  background: linear-gradient(180deg, #162a54, #132245);
  transition:
    transform 160ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.modeCard.active {
  border-color: #8ebdff;
  box-shadow:
    inset 0 0 0 2px #7eb2ff66,
    0 0 18px #4f93ff2f,
    0 0 14px #f59a3d2a;
  background: linear-gradient(180deg, #243c74 0%, #1b2f5d 78%, #352616 100%);
}

.modeCard:hover {
  transform: translateY(-2px);
}

.modeTabBtn {
  min-height: 58px;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: 0.04em;
}

.modeTabs .modeTabBtn {
  min-height: 56px;
}

.controllerTabStrip {
  position: relative;
  padding-inline: 44px;
}

.controllerTabStrip::before,
.controllerTabStrip::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 140ms ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.controllerTabStrip::before {
  left: 10px;
  background-image: var(--controller-shoulder-left-icon);
}

.controllerTabStrip::after {
  right: 10px;
  background-image: var(--controller-shoulder-right-icon);
}

body.controller-active .controllerTabStrip::before,
body.controller-active .controllerTabStrip::after {
  opacity: 0.92;
}

.queueCard {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, #101b36, #0d1730);
  display: none;
  box-shadow:
    inset 0 1px 0 #9bc4ff18,
    0 0 18px #2e67be26;
}

.competitiveRankSummary {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rankChip {
  position: relative;
  border: 1px solid #406bb0;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #132447, #0e1a35);
}

.rankChipTop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rankChipIcon {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 42px;
  flex: 0 0 44px;
}

.rankTierIcon,
.rankSubIcon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.rankTierIcon {
  left: 0;
  width: 34px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: var(--rank-icon);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rank-tint) 62%, transparent));
}

.rankSubIcon {
  right: 0;
  width: 8px;
  height: 32px;
  border: 2px solid #050913;
  border-radius: 999px;
  padding: 2px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rank-tint) 82%, #ffffff 18%), var(--rank-tint));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--rank-tint-bright) 82%, #ffffff 18%),
    0 0 5px color-mix(in srgb, var(--rank-tint) 58%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.rankSubDot {
  width: 5px;
  height: 5px;
  border: 1px solid #050913;
  border-radius: 50%;
  background: #17264a;
}

.rankSubDot.active {
  background:
    radial-gradient(circle at 34% 30%, var(--rank-tint-bright) 0 32%, transparent 33%),
    linear-gradient(180deg, color-mix(in srgb, var(--rank-tint) 76%, #ffffff 24%), var(--rank-tint));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, var(--rank-tint) 55%);
}

.rankChipIcon.noSubRank {
  width: 34px;
  flex-basis: 34px;
}

.rankChipIcon.noSubRank .rankSubIcon {
  display: none;
}

.rankChipLabel {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: #95b6e6;
}

.rankChipValue {
  display: block;
  margin-top: 2px;
  font-size: 1rem;
  color: #e8f2ff;
}

.rankChipHint {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: #9ab7e2;
}

.rankLadderDetails {
  margin-top: 10px;
  border: 1px solid #355d9c;
  border-radius: 10px;
  background: linear-gradient(180deg, #101e3c, #0d1731);
  overflow: hidden;
}

.rankLadderDetails summary {
  cursor: pointer;
  padding: 9px 12px;
  color: #c8dffe;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  list-style: none;
}

.rankLadderDetails summary::-webkit-details-marker {
  display: none;
}

.rankLadderDetails summary::after {
  content: '▾';
  float: right;
  color: #90b8f2;
}

.rankLadderDetails[open] summary::after {
  content: '▴';
}

.rankLadderGrid {
  border-top: 1px solid #2e5189;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  padding: 10px 12px;
}

.rankLadderRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: #dbe9ff;
}

.rankLadderRow .range {
  color: #93b2db;
}

.queueCard.active {
  display: block;
  opacity: 1;
  animation: cardIn 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.partyPanel {
  margin-top: 0;
}

.partyPanel h2 {
  margin-bottom: 4px;
}

.partyJoinRow,
.partyInviteRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.partyCodeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.partyInviteRow {
  margin-top: 10px;
}

.partyPanel .privateLobbyMembers {
  margin-top: 10px;
  max-height: min(32vh, 260px);
}

.teamPanel {
  margin-top: 0;
}

.teamIdleActions {
  gap: 10px;
}

.teamActiveSection {
  --team-shell-border: #2d4d87;
  margin-top: 10px;
  border: 1px solid var(--team-shell-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #0f1b39ee, #0d1732ee);
  box-shadow:
    inset 0 1px 0 #b8d5ff1f,
    0 14px 36px #0007;
  overflow: hidden;
}

.teamDashboardHeader {
  --team-base: #6aa7ff;
  --team-accent: #f59a3d;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #2f4f89;
  border-radius: 0;
  padding: 14px 18px 13px;
  background:
    linear-gradient(96deg, color-mix(in srgb, var(--team-base) 72%, #1d2d53 28%), color-mix(in srgb, var(--team-accent) 62%, #1b2a51 38%)),
    linear-gradient(180deg, #1a2850de, #132046ce);
  box-shadow:
    inset 0 1px 0 #eef5ff40,
    inset 0 -1px 0 #0913295e;
}

.teamDashboardHeader h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.04;
  color: #f6fbff;
  text-shadow:
    0 2px 0 #0a1120,
    0 0 10px #0913275f;
}

.teamHeaderTag {
  margin: 3px 0 0;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e9f3ff;
  text-shadow: 0 1px 0 #0a1120;
}

.teamHeaderMeta {
  margin: 6px 0 0;
  color: #e1ecff;
}

.teamDashboardLayout {
  margin: 0;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(320px, 1.08fr) minmax(0, 1fr);
  gap: 10px;
  min-height: min(52vh, 520px);
}

.teamRosterCard,
.teamManageCard {
  border: 1px solid #2f4a82;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #142247de, #0f1a37e0);
  box-shadow:
    inset 0 1px 0 #aacdff1f,
    inset 0 -1px 0 #0a12302e;
}

.teamRosterCard h3,
.teamManageCard h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.teamManageSection + .teamManageSection {
  margin-top: 11px;
}

.teamManageSection h4 {
  margin: 0 0 6px;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9fbce7;
}

.teamInlineStatus {
  min-height: 1.2em;
  margin: 4px 0 8px;
  color: #9ebbe6;
}

.teamInlineStatus[data-tone='error'] {
  color: #ffb7b7;
}

.teamInlineStatus[data-tone='success'] {
  color: #b8f1c8;
}

.teamJoinRow,
.teamInviteRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.teamCodeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.teamInviteRow,
.teamBrandRow {
  margin-top: 10px;
}

.teamBrandRow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, 0.7fr) 68px 68px auto;
  gap: 8px;
  align-items: center;
}

.teamField,
.teamColorField {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.teamField > span,
.teamColorField > span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #93b3df;
}

.teamColorField input[type='color'] {
  width: 100%;
}

.teamEditHint {
  margin: 10px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #2f4a7a;
  background: linear-gradient(180deg, #132448c7, #101d3cc5);
  color: #95add8;
}

.teamRosterMembers {
  margin-top: 0;
  max-height: min(44vh, 460px);
}

.teamRosterSelect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.teamRosterSelect input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: var(--team-accent);
}

.teamOnlineDot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid #dce9ff99;
  box-shadow: 0 0 0 2px #07122980;
}

.teamOnlineDot.online {
  background: #36d978;
  box-shadow:
    0 0 0 2px #07122980,
    0 0 10px #36d97888;
}

.teamOnlineDot.offline {
  background: #778398;
  box-shadow: 0 0 0 2px #07122980;
}

.teamRosterMember {
  border-color: color-mix(in srgb, var(--team-base) 40%, #293a64);
  background:
    linear-gradient(
      92deg,
      color-mix(in srgb, var(--team-base) 24%, #121f3f),
      color-mix(in srgb, var(--team-accent) 18%, #111a35)
    );
}

.teamRosterMember.role-owner {
  border-color: color-mix(in srgb, #f59a3d 64%, #243b65);
}

.teamRosterMember.role-admin {
  border-color: color-mix(in srgb, #73d9a0 56%, #263d65);
}

.teamRosterPartyActions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #365d9d;
  background: linear-gradient(180deg, #152a59f7, #0f2148f7);
}

.teamRosterPartyActions span {
  color: #cfe1ff;
  font-weight: 700;
}

.teamRosterPartyActions button {
  min-width: 118px;
}

.teamManageCard .actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill.admin {
  border-color: #8fe6a0;
  background: #214930;
  color: #d8f9e0;
}

.partyMiniStrip {
  margin-top: 10px;
  border: 1px solid #2e4d85;
  border-radius: 12px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #122145, #0f1a35);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.partyMiniMembers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.partyMiniMembers .pill {
  font-size: 0.75rem;
}

.partyMiniOpenBtn {
  min-height: 36px;
  padding: 8px 12px;
}

.menuPlaceholderCard {
  min-height: 180px;
}

.queueTitle {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: #dfc09b;
  text-shadow: 0 0 10px #f59a3d26;
}

.smallChoiceRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.choiceBtn {
  min-height: 52px;
  font-size: 1.2rem;
  border-color: #3f67aa;
  background: linear-gradient(180deg, #182c56, #132447);
  transition:
    transform 140ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.choiceBtn.active {
  border-color: #9ec6ff;
  background: linear-gradient(180deg, #2b477f 0%, #203768 82%, #352515 100%);
  box-shadow:
    inset 0 0 0 1px #c2dcff6e,
    0 0 14px #5c9fff30,
    0 0 12px #f59a3d2a;
}

.choiceBtn:hover {
  transform: translateY(-1px);
}

.rankedModeBtn {
  position: relative;
  overflow: visible;
}

.choiceBtn.rankedModeBtn.active {
  overflow: visible;
}

.rankedModeBadge {
  position: absolute;
  right: 10px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px 3px 7px;
  border-radius: 0;
  border: 2px solid #85b5ff;
  background: linear-gradient(180deg, #254381 0%, #1a3367 100%);
  box-shadow:
    0 0 12px #173260ad,
    inset 0 1px 0 #d7e8ff42;
  pointer-events: none;
}

.rankedModeBadgeIcon {
  position: relative;
  display: inline-block;
  width: 29px;
  height: 20px;
  flex: 0 0 29px;
}

.rankedModeBadgeIcon::before,
.rankedModeBadgeIcon::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rankedModeBadgeIcon::before {
  left: 0;
  width: 18px;
  height: 18px;
  background-image: var(--rank-icon, url('/Assets/Icons/Rank/iconRankUnranked.svg'));
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rank-tint, #4f93ff) 62%, transparent));
}

.rankedModeBadgeIcon::after {
  right: 0;
  width: 8px;
  height: 20px;
  background: radial-gradient(circle at 30% 30%, var(--rank-tint-bright, #9fc5ff), var(--rank-tint, #4f93ff));
  -webkit-mask-image: var(--rank-sub-icon, url('/Assets/Icons/Rank/Sub/iconRankOne.svg'));
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--rank-sub-icon, url('/Assets/Icons/Rank/Sub/iconRankOne.svg'));
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  filter: drop-shadow(0 0 4px var(--rank-tint, #4f93ff));
}

.rankedModeBadgeIcon.noSubRank {
  width: 18px;
  flex-basis: 18px;
}

.rankedModeBadgeIcon.noSubRank::after {
  display: none;
}

.rankedModeBadgeText {
  display: inline-block;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  color: #dceaff;
}

.choiceBtn.ghost {
  opacity: 0.45;
  cursor: default;
}

.onimoLayout {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 14px;
  min-height: 0;
}

.onimoConfigColumn,
.onimoPreviewColumn {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onimoColorCard,
.onimoPreviewCard,
.onimoEconomyCard {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #0f1528, #0b1122);
  box-shadow: inset 0 1px 0 #7ba8ff14;
}

.onimoColorCard {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.onimoColorHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2b497e;
}

.onimoColorHead h3 {
  margin: 0;
  letter-spacing: 0.015em;
}

#onimoPartHint {
  margin: 0;
  color: #9bb3d6;
}

.onimoColorHead .tag {
  margin-bottom: 0;
}

.onimoSectionLabel {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #88abd9;
}

.onimoPartTabs {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.onimoPartTab {
  min-height: 44px;
  font-size: 0.94rem;
  letter-spacing: 0.03em;
}

.onimoPartTab:hover:not(:disabled) {
  border-color: #5b84bf;
  color: #e5f1ff;
}

.onimoPartTab.active {
  border-color: #8fbeff;
  background: linear-gradient(180deg, #274079, #1d3364);
  box-shadow:
    inset 0 0 0 1px #b6d6ff73,
    0 0 13px #5a9fff32;
}

.onimoInventoryPanel {
  border: 1px solid #31528a;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #121f3d, #0d172f);
  padding: 9px;
  box-shadow: inset 0 1px 0 #8bb6ff14;
}

.onimoInventoryHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 1px 1px 7px;
}

.onimoInventoryToolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #2c4a80;
  padding-top: 7px;
  margin-bottom: 8px;
}

.onimoFilterLabel {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ea0cf;
}

.onimoCreditsStatus {
  margin: 0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.onimoCreditSymbol {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: inline-block;
  background: linear-gradient(180deg, #a9dcff, #73b8ff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 6px #73b8ff55);
}

.onimoOwnershipFilter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid #2e4f86;
  border-radius: 999px;
  background: linear-gradient(180deg, #172a51, #142447);
}

.onimoOwnershipFilter .onimoFilterBtn {
  min-height: 30px;
  min-width: 84px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  color: #9db8de;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
}

.onimoOwnershipFilter .onimoFilterBtn:hover:not(:disabled) {
  border-color: #4d74b2;
  color: #c8ddff;
}

.onimoOwnershipFilter .onimoFilterBtn.active {
  border-color: #8ebbf8;
  background: linear-gradient(180deg, #2f4f82, #274574);
  color: #f0f7ff;
  box-shadow:
    inset 0 0 0 1px #cbe2ff48,
    0 0 10px #538ddd2b;
}

.onimoSwatchGrid {
  margin-top: 0;
  border: 1px solid #2c4a80;
  border-radius: 10px;
  background: linear-gradient(180deg, #0f1b36, #0c162d);
  padding: 9px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 8px;
  max-height: 248px;
  overflow: auto;
  min-height: 140px;
}

.onimoSwatchGrid.onimoSwatchGridTitles {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.onimoSwatchGrid.onimoSwatchGridCardBackgrounds {
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
}

.onimoSwatchGrid.onimoSwatchGridCosmetics {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}

.onimoSwatch {
  position: relative;
  width: 54px;
  height: 54px;
  justify-self: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #2f4f85;
  background: linear-gradient(180deg, #172442, #131f38);
  display: grid;
  place-items: center;
}

.onimoSwatch:hover:not(:disabled) {
  border-color: #7eaeea;
  box-shadow: 0 0 10px #4f88d744;
}

.onimoSwatchChip {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  border: 2px solid #ffffffba;
  box-shadow: inset 0 0 0 1px #00000052;
}

.onimoSwatch.selected {
  border-color: #9ec6ff;
  box-shadow:
    0 0 0 1px #d4e8ff70,
    0 0 10px #62a1ff58;
}

.onimoSwatch.equipped::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7df0b0;
  border: 2px solid #0f1730;
}

.onimoSwatch.locked .onimoSwatchChip {
  filter: grayscale(0.8) brightness(0.72);
}

.onimoSwatch.locked:hover:not(:disabled) {
  border-color: #83aee6;
  box-shadow:
    0 0 0 1px #c8dcff3b,
    0 0 12px #547ebd4f;
}

.onimoSwatch.locked.onimoTitleSwatch .onimoTitleSwatchLabel {
  filter: grayscale(0.8) brightness(0.74);
}

.onimoSwatch.locked.onimoPlayerCardBackgroundSwatch .onimoPlayerCardBackgroundSwatchPreview {
  filter: grayscale(0.75) brightness(0.72);
}

.onimoSwatch.locked.onimoCosmeticSwatch .onimoCosmeticSwatchPreview {
  filter: grayscale(0.75) brightness(0.72);
}

.onimoSwatchLock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.onimoSwatchLockIcon {
  width: 18px;
  height: 18px;
  background: #d9e8ff;
  filter: drop-shadow(0 1px 4px #000b);
  -webkit-mask: url('/Assets/Icons/menu/iconLocked.svg') no-repeat center / contain;
  mask: url('/Assets/Icons/menu/iconLocked.svg') no-repeat center / contain;
}

.onimoItemTooltip {
  position: fixed;
  z-index: 2100;
  max-width: min(280px, calc(100vw - 16px));
  padding: 7px 10px;
  border: 1px solid #5d85c2;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b2f58, #152646);
  color: #edf5ff;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: center;
  box-shadow:
    0 10px 26px #000b,
    inset 0 1px 0 #bfd9ff33;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
}

.onimoItemTooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.onimoItemTooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  transform: translateX(-50%);
}

.onimoItemTooltip[data-placement='top']::after {
  top: 100%;
  border-top: 6px solid #1a2d52;
}

.onimoItemTooltip[data-placement='bottom']::after {
  bottom: 100%;
  border-bottom: 6px solid #1d325c;
}

.onimoSwatch.onimoTitleSwatch {
  width: min(100%, 168px);
  min-width: 120px;
  height: 54px;
  border-radius: 12px;
  padding: 0 10px;
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.onimoSwatch.onimoPlayerCardBackgroundSwatch {
  width: min(100%, 176px);
  min-width: 140px;
  height: 72px;
  border-radius: 12px;
  padding: 6px;
  justify-self: stretch;
  grid-template-columns: minmax(0, 1fr);
}

.onimoSwatch.onimoCosmeticSwatch {
  width: 66px;
  height: 66px;
  border-radius: 16px;
}

.onimoCosmeticSwatchPreview {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #0009);
}

.onimoCosmeticNonePreview {
  display: grid;
  place-items: center;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  border: 2px dashed #9fbce58f;
  color: #c9dbf6;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.onimoPlayerCardBackgroundSwatchPreview {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #d6e6ff70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px #00000040,
    inset 0 -18px 26px #0000003d;
}

.onimoTitleSwatchLabel {
  display: inline-block;
  max-width: 100%;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #eaf3ff;
  text-shadow: 0 1px 3px #000a;
}

.onimoTitleSwatchLabel.mode-solid {
  color: var(--title-solid, #eaf3ff);
}

.onimoTitleSwatchLabel.mode-gradient {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  background-image: linear-gradient(
    var(--title-angle, 90deg),
    var(--title-gradient-start, #ffe5a9) 0%,
    var(--title-gradient-end, #ff8a5c) calc(var(--title-gradient-scale, 100) * 1%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: saturate(1.18) brightness(1.06) drop-shadow(0 1px 1px #0008);
}

.onimoTitleSwatchLabel.effect-shimmer {
  position: relative;
}

.onimoTitleSwatchLabel.effect-shimmer::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 420% 100%;
  background-position: -260% 0;
  background-repeat: no-repeat;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-shadow: none;
  filter: none;
  white-space: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(110deg, #ffffff00 49%, #ffffffe4 50%, #ffffff00 51%);
  animation: playerTitleShimmer var(--title-shimmer-duration, 2.4s) linear infinite;
  will-change: background-position;
  mix-blend-mode: screen;
  pointer-events: none;
}

.onimoSwatchGrid::-webkit-scrollbar {
  width: 10px;
}

.onimoSwatchGrid::-webkit-scrollbar-thumb {
  background: #365793;
  border-radius: 999px;
}

.onimoHiddenInputs {
  display: none;
}

.onimoCatalogSelectionMeta {
  margin-top: 0;
  border: 1px solid #2f4f86;
  border-radius: 10px;
  background: linear-gradient(180deg, #11203e, #0f1a33);
  padding: 8px 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.onimoCustomiseActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid #2d4c82;
  padding-top: 10px;
}

.onimoCustomiseActions > button {
  flex: 1 1 180px;
  min-height: 48px;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

.onimoCustomiseActions #onimoActionBtn[data-action-mode='unlock']::before {
  content: '';
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 7px;
  vertical-align: -2px;
  background: linear-gradient(180deg, #a9dcff, #73b8ff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 6px #73b8ff55);
}

.onimoPreviewCard {
  padding: 10px;
  margin-top: 0;
}

.onimoEconomyCard {
  margin-top: 0;
  border: 1px solid #375794;
  border-radius: 14px;
  background: linear-gradient(180deg, #101b35, #0c152a);
  padding: 12px;
  box-shadow: inset 0 1px 0 #93bdff16;
}

.onimoDevBillingCard {
  border-color: #3f5d98;
  background: linear-gradient(180deg, #101b35, #0a1327);
}

.onimoDevBillingContent {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onimoStoreLead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
}

.onimoStoreLead > .tag {
  margin: 0;
}

.onimoStoreSummary {
  color: #c5ddff;
}

.onimoStoreSectionsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.onimoStoreSection {
  border: 1px solid #355c9d;
  border-radius: 14px;
  background:
    radial-gradient(90% 70% at 8% 6%, #1a3d6b40, transparent 66%),
    linear-gradient(180deg, #0f1b36, #0b152b);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 #b4d2ff22,
    0 0 0 1px #12284d;
}

.onimoStoreSectionPass {
  border-color: #4a73b8;
}

.onimoStoreSectionCredits {
  border-color: #3d619d;
}

.onimoStoreSectionHead h4 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.onimoStoreSectionHead .tag {
  margin-top: 4px;
  font-size: 0.98rem;
}

.onimoStoreSection .actions {
  margin-top: 10px;
}

.onimoStoreBenefits {
  margin-top: 10px;
  border: 1px solid #345a97;
  border-radius: 12px;
  background:
    radial-gradient(120% 110% at 8% -20%, #5b8dff2b, transparent 66%),
    linear-gradient(180deg, #112244, #0d1a35);
  padding: 10px;
}

.onimoStoreBenefitsTitle {
  margin: 0 0 6px;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d7e9ff;
  font-weight: 800;
}

.onimoStoreBenefitLine {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c8ddff;
  font-size: 0.92rem;
  line-height: 1.35;
}

.onimoStoreBenefitLine + .onimoStoreBenefitLine {
  margin-top: 5px;
}

.onimoStoreBenefitIcon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, #9ed7ff, #70b8ff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 8px #6aa9ff66);
}

.onimoStoreBenefitIconGold {
  background: linear-gradient(180deg, #ffe1a6, #f8bc61);
  filter: drop-shadow(0 0 8px #f3b0585d);
}

.onimoStoreBenefitIconPass {
  background: linear-gradient(180deg, #a7d1ff, #76adff);
  -webkit-mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
  mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
  filter: drop-shadow(0 0 8px #74a9ff66);
}

.onimoStoreManageActions {
  margin-top: 2px;
}

.onimoStorePassActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 190px));
  justify-content: center;
  gap: 10px;
}

.onimoDevPackActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 190px));
  justify-content: center;
  gap: 10px;
}

.onimoDevBillingBtn {
  min-height: 42px;
}

.onimoStoreBtn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 190px;
  min-height: 150px;
  aspect-ratio: 1 / 1;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid #3b5f96;
  background:
    linear-gradient(180deg, #2d3f68, #223257);
  color: #e8f1ff;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
  transition:
    transform 130ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    filter 170ms ease;
  box-shadow:
    inset 0 1px 0 #d1e4ff1f,
    0 10px 20px #0006;
  overflow: hidden;
}

.onimoStoreBtn:hover:not(:disabled) {
  border-color: #72a6ff;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 #d1e4ff30,
    0 0 0 1px #8dbcff44,
    0 14px 24px #0007,
    0 0 22px #4f8eff2b;
}

.onimoStoreBtn:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

.onimoStoreBtn::after {
  /* Disable the global primary-button sheen overlay for store tiles. */
  content: none !important;
  animation: none !important;
}

.onimoStoreBtnLabel {
  display: block;
  font-size: 1.1rem;
  line-height: 1.15;
  text-shadow: 0 1px 0 #0008;
}

.onimoStoreBtnPrice {
  display: block;
  margin-top: -3px;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 700;
  color: #bdd7ff;
  opacity: 0.95;
}

.onimoStoreBtnIcon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #8ec7ff;
  box-shadow:
    0 0 0 1px #c9e2ff32,
    0 0 18px #5b9eff5a;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.onimoStoreBtnIconPass {
  -webkit-mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
  mask-image: url('/Assets/Icons/shop/iconOnipass.svg');
}

.onimoStoreBtnIconCredit {
  -webkit-mask-image: url('/Assets/Icons/shop/iconCredit.svg');
  mask-image: url('/Assets/Icons/shop/iconCredit.svg');
}

#onimoDevSubMonthlyBtn .onimoStoreBtnIconPass {
  background: linear-gradient(180deg, #9ec7ff, #6ba4ff);
  box-shadow:
    0 0 0 1px #d7e8ff4f,
    0 0 18px #6aa4ff7a;
}

#onimoDevSubMonthlyBtn {
  border-color: #7fb0ff;
  background:
    radial-gradient(70% 58% at 50% 0%, #79a9ff5b, transparent 72%),
    linear-gradient(180deg, #27477d, #1d3158);
  color: #f2f7ff;
}

#onimoDevSubMonthlyBtn .onimoStoreBtnLabel,
#onimoDevSubMonthlyBtn .onimoStoreBtnPrice {
  color: #eef6ff;
  text-shadow: 0 1px 0 #00132c99;
}

#onimoDevSubYearlyBtn .onimoStoreBtnIconPass {
  background: linear-gradient(180deg, #ffd89a, #f7ad53);
  box-shadow:
    0 0 0 1px #ffe5c37d,
    0 0 18px #f3b6647a;
}

#onimoDevSubYearlyBtn {
  border-color: #e6b26a;
  background:
    radial-gradient(70% 58% at 50% 0%, #ffc98052, transparent 72%),
    linear-gradient(180deg, #5f3f23, #4a301a);
  color: #fff3dd;
}

#onimoDevPack200Btn .onimoStoreBtnIconCredit {
  background: linear-gradient(180deg, #9dd8ff, #6fb8ff);
}

#onimoDevPack700Btn .onimoStoreBtnIconCredit {
  background: linear-gradient(180deg, #9cf6c3, #55d58c);
}

#onimoDevPack1600Btn .onimoStoreBtnIconCredit {
  background: linear-gradient(180deg, #ffe09c, #f7bf59);
}

#onimoDevPack3500Btn .onimoStoreBtnIconCredit {
  background: linear-gradient(180deg, #ffc59f, #ff9067);
}

.onimoStoreBtnPack {
  border-color: #4e6fa8;
  background:
    radial-gradient(70% 58% at 50% 0%, #84b4ff3e, transparent 72%),
    linear-gradient(180deg, #263d65, #1f2f4f);
}

.onimoStoreBtn.is-active-plan {
  border-color: #8fc4ff;
  box-shadow:
    inset 0 1px 0 #ebf5ff44,
    0 0 0 1px #9bc7ff5e,
    0 16px 26px #0007;
}

.onimoStoreBtn.is-active-plan::before {
  content: 'ACTIVE PLAN';
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  font-weight: 900;
  color: #dff7ff;
  border: 1px solid #7ac0f8;
  background: linear-gradient(180deg, #3678be, #295d97);
  box-shadow: 0 0 10px #5ab3ff52;
  z-index: 2;
}

.onimoStoreBtn.is-active-plan .onimoStoreBtnPrice {
  color: #dbf0ff;
}

.onimoDevBillingBtn:disabled .onimoStoreBtnIcon {
  opacity: 0.55;
  box-shadow: none;
}

.onimoStoreBtn:disabled .onimoStoreBtnPrice {
  opacity: 0.65;
}

@media (max-width: 900px) {
  .onimoStoreSectionsGrid {
    grid-template-columns: 1fr;
  }

  .onimoStorePassActions,
  .onimoDevPackActions {
    grid-template-columns: repeat(2, minmax(120px, 170px));
  }

  .onimoStoreBtn {
    max-width: 170px;
    min-height: 120px;
  }

  .onimoStoreBtnIcon {
    width: 38px;
    height: 38px;
  }

  .onimoStoreBtnPrice {
    font-size: 0.8rem;
  }
}

@media (max-width: 640px) {
  .onimoStorePassActions,
  .onimoDevPackActions {
    grid-template-columns: 1fr;
  }

  .onimoStoreBtn {
    max-width: none;
    width: 100%;
    min-height: 112px;
    aspect-ratio: auto;
  }
}

.onimoEmbeddedCheckoutPanel {
  margin-top: 10px;
  border: 1px solid #355694;
  border-radius: 12px;
  background: linear-gradient(180deg, #0d1730f2, #0a1225f6);
  padding: 10px;
}

.onimoEmbeddedCheckoutHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.onimoEmbeddedCheckoutTitle {
  margin: 0;
}

.onimoEmbeddedCheckoutMount {
  width: 100%;
  min-height: 520px;
  border: 1px solid #2f4b80;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1225;
}

#panelStore.store-checkout-focus > h2,
#panelStore.store-checkout-focus .onimoStoreLead,
#panelStore.store-checkout-focus .onimoStoreBody {
  display: none;
}

#panelStore.store-checkout-focus .onimoDevBillingCard {
  margin-top: 0;
  border-color: #4f73b1;
  background: linear-gradient(180deg, #0b1225, #091022);
  box-shadow:
    0 20px 42px #0008,
    inset 0 1px 0 #b4cdff1f;
}

#panelStore.store-checkout-focus .onimoEmbeddedCheckoutPanel {
  margin-top: 0;
}

#onimoPreviewCanvas {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  border-radius: 10px;
  touch-action: none;
  cursor: grab;
}

.onimoPreviewCardLarge #onimoPreviewCanvas {
  min-height: 260px;
}

#onimoPreviewCanvas:active {
  cursor: grabbing;
}

#gamekeeperStatus.connected {
  color: #8fd4a8;
}

.careerStatsGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.careerStatsCard {
  border: 1px solid #3b65ac;
  border-radius: 14px;
  background: linear-gradient(180deg, #101c38, #0d1730);
  padding: 12px;
  box-shadow: inset 0 1px 0 #abcfff12;
}

.careerStatsCard.wide {
  grid-column: 1 / -1;
}

.careerStatsRows {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.careerStatRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 10px;
  border: 1px solid #2d4f88;
  border-radius: 10px;
  background: linear-gradient(90deg, #112142, #0f1b36);
}

.careerStatRow span {
  color: #a8c2ea;
  font-size: 1rem;
}

.careerStatRow strong {
  color: #e8f2ff;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
}

@media (max-width: 1200px) {
  .careerStatsGrid {
    grid-template-columns: 1fr;
  }

  .careerStatsCard.wide {
    grid-column: auto;
  }
}

.settingsShell {
  margin-top: 10px;
  border: 1px solid #3f68ae;
  border-radius: 16px;
  background: linear-gradient(180deg, #152448, #0f1a33);
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  box-shadow:
    0 14px 38px #0008,
    inset 0 1px 0 #a2ccff12,
    0 0 26px #366fca28;
}

.settingsTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.settingsTabBtn {
  min-width: 112px;
  border-radius: 12px 12px 0 0;
  border-color: #3f68ae;
  background: linear-gradient(180deg, #15264f, #122243);
  font-size: 1.1rem;
  padding: 8px 12px;
}

.settingsTabBtn.active {
  background: linear-gradient(180deg, #274079, #1d3364);
  border-color: #8fbeff;
  box-shadow:
    inset 0 0 0 1px #b6d6ff73,
    0 0 13px #5a9fff32;
}

.menuTab.active,
.settingsTabBtn.active,
.choiceBtn.active,
.modeCard.active,
button.primary {
  position: relative;
  overflow: hidden;
}

.menuTab.active::after,
.settingsTabBtn.active::after,
.choiceBtn.active::after,
.modeCard.active::after,
button.primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #ffffff00 30%, #ffd8ad30 50%, #ffffff00 70%);
  transform: translateX(-140%);
  animation: activeGlowSheen 2.8s ease-in-out infinite;
  pointer-events: none;
}

.settingsSubpanel {
  display: none;
  border: 1px solid #3c64a9;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(180deg, #152344, #111d39);
  box-shadow: inset 0 1px 0 #a7ccff10;
}

.settingsSubpanel.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 6px;
}

.settingsSubpanel.active > .grid,
.settingsSubpanel.active > .actions,
.settingsSubpanel.active > .collisionLegend {
  border: 1px solid #345a96;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #11203f, #0e1a35);
  box-shadow: inset 0 1px 0 #a6c9ff14;
}

.settingsSubpanel.active > .grid > .grid {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.menuRail,
.menuPanel.active,
.settingsSubpanel.active,
.menuFuture {
  scrollbar-width: thin;
  scrollbar-color: #4f73b6 #111a33;
}

.menuRail::-webkit-scrollbar,
.menuPanel.active::-webkit-scrollbar,
.settingsSubpanel.active::-webkit-scrollbar,
.menuFuture::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.menuRail::-webkit-scrollbar-track,
.menuPanel.active::-webkit-scrollbar-track,
.settingsSubpanel.active::-webkit-scrollbar-track,
.menuFuture::-webkit-scrollbar-track {
  background: #111a33;
  border-radius: 999px;
}

.menuRail::-webkit-scrollbar-thumb,
.menuPanel.active::-webkit-scrollbar-thumb,
.settingsSubpanel.active::-webkit-scrollbar-thumb,
.menuFuture::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3b5e9f, #2a4372);
  border: 1px solid #6d92d6;
  border-radius: 999px;
}

.menuRail::-webkit-scrollbar-thumb:hover,
.menuPanel.active::-webkit-scrollbar-thumb:hover,
.settingsSubpanel.active::-webkit-scrollbar-thumb:hover,
.menuFuture::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #537fc9, #35568f);
}

.settingsSaveStatus {
  margin-top: 10px;
  min-height: 1.2em;
}

.settingsSaveStatus.saving {
  color: #ffc785;
}

.settingsSaveStatus.success {
  color: #8de2a5;
}

.settingsSaveStatus.warning {
  color: #ffb29f;
}

#settingsReplaySection .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#settingsReplaySection .actions button {
  min-width: 170px;
}

.toggleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.audioMusicBrowserActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audioMusicBrowserActions button {
  min-width: 160px;
}

.audioMusicTrackList {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
  padding-right: 4px;
}

.audioMusicTrackList::-webkit-scrollbar {
  width: 9px;
}

.audioMusicTrackList::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #4f74b8, #35568f);
}

.audioMusicTrackRow {
  width: 100%;
  border: 1px solid #355b99;
  border-radius: 10px;
  background: linear-gradient(180deg, #142950, #102041);
  color: #e9f3ff;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.audioMusicTrackRow:hover:not(:disabled) {
  border-color: #7097d8;
  background: linear-gradient(180deg, #1b3565, #152a52);
}

.audioMusicTrackRow.active {
  border-color: #9ec6ff;
  background: linear-gradient(180deg, #214482, #193766);
  box-shadow:
    inset 0 0 0 1px #cfe4ff45,
    0 0 14px #5ea1ff2f;
}

.audioMusicTrackMain {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.audioMusicTrackTitle {
  font-size: 0.93rem;
  font-weight: 700;
  color: #f2f7ff;
}

.audioMusicTrackArtist {
  font-size: 0.79rem;
  color: #b5ceef;
}

.audioMusicTrackState {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8db3ea;
  white-space: nowrap;
}

.toggleRow input[type='checkbox'] {
  width: 22px;
  height: 22px;
}

.collisionLegend {
  border: 1px solid #3d629f;
  border-radius: 10px;
  background: linear-gradient(180deg, #111c36, #10192f);
  padding: 10px;
}

.collisionLegendTitle {
  margin: 0 0 8px;
}

.collisionLegendRow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d8e5ff;
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.collisionLegendRow:last-child {
  margin-bottom: 0;
}

.collisionSwatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #ffffff28 inset;
  flex: 0 0 14px;
}

.collisionSwatch.ballWall {
  background: #ffb55c;
}

.collisionSwatch.playerWall {
  background: #72b3ff;
}

.collisionSwatch.ballPlayer {
  background: #ff7676;
}

.collisionNormalIcon {
  width: 24px;
  height: 3px;
  border-radius: 999px;
  background: #ffffffc8;
  box-shadow: 0 0 6px #ffffff70;
  display: inline-block;
  flex: 0 0 24px;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes childIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes xpShimmer {
  0% {
    transform: translateX(-140%);
  }
  55% {
    transform: translateX(145%);
  }
  100% {
    transform: translateX(145%);
  }
}

@keyframes playerTitleShimmer {
  0% {
    background-position: -260% 0;
  }
  100% {
    background-position: 260% 0;
  }
}

@keyframes panelSheen {
  0% {
    transform: translateX(-135%);
    opacity: 0;
  }
  14% {
    opacity: 0.35;
  }
  28% {
    transform: translateX(135%);
    opacity: 0;
  }
  100% {
    transform: translateX(135%);
    opacity: 0;
  }
}

@keyframes activeGlowSheen {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  42% {
    transform: translateX(140%);
    opacity: 0;
  }
  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

@keyframes scoreIntroShell {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
    filter: saturate(0.9) brightness(0.9);
  }
  52% {
    opacity: 1;
    transform: translateY(0) scale(1.006);
    filter: saturate(1.05) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1) brightness(1);
  }
}

@keyframes scoreIntroCaps {
  0% {
    transform: scale(0.9);
    opacity: 0.55;
  }
  58% {
    transform: scale(1.045);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scoreIntroClock {
  0% {
    opacity: 0.6;
    transform: scale(0.94);
    text-shadow: 0 0 0 #0000;
  }
  55% {
    opacity: 1;
    transform: scale(1.04);
    text-shadow: 0 0 14px #ffffff3d;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 3px 10px #000c;
  }
}

@keyframes scoreShimmer {
  from {
    transform: translateX(-130%);
    opacity: 0.2;
  }
  35% {
    opacity: 0.9;
  }
  to {
    transform: translateX(130%);
    opacity: 0;
  }
}

.matchCard {
  text-align: center;
}

#queueStatus {
  margin-top: 6px;
  color: var(--muted);
}

.statsRow {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.statsRow > div {
  background: #11192f;
  border: 1px solid #2a3554;
  border-radius: 14px;
  padding: 10px;
}

.statsRow span {
  display: block;
  color: var(--muted);
  font-size: 0.95rem;
}

.statsRow strong {
  font-size: 1.55rem;
}

.matchmakingDebugPanel {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #365384;
  background: linear-gradient(180deg, #0c1630eb, #0a1123eb);
  text-align: left;
}

.matchmakingDebugPanel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #d8e8ff;
}

#matchmakingDebugText {
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.3;
  color: #b7caef;
}

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.hudTop,
.hudBottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

.hudTop {
  font-size: 1.4rem;
  font-weight: 700;
  text-shadow: 0 2px 10px #000c;
  position: relative;
  min-height: 54px;
}

.hudTop.ffaHudTop {
  align-items: flex-start;
}

#hudMode,
#hudClock,
#hudScore {
  position: relative;
  z-index: 1;
}

#hudMode {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #3b5e96;
  background: #0d1830cc;
  box-shadow: 0 6px 16px #0007;
}

.hudTop.esportsScoreboardHud {
  justify-content: center;
}

.hudTop.esportsScoreboardHud #hudMode {
  position: absolute;
  left: calc(14px + env(safe-area-inset-left));
  top: calc(8px + env(safe-area-inset-top));
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.esportsScoreboard {
  --es-side-width-px: 212px;
  --es-center-min: 24px;
  --es-side-width: clamp(172px, var(--es-side-width-px), 324px);
  width: auto;
  max-width: min(93vw, 760px);
  pointer-events: none;
}

.esportsScoreboard.oniballScoreboard {
  --ob-design-width: 1180px;
  --ob-design-height: 140px;
  --ob-scale: 0.38;
  width: var(--ob-design-width);
  max-width: none;
}

.hudTop.esportsScoreboardHud #hudScore.oniballScoreboard {
  position: absolute;
  left: 50%;
  top: 8px;
  width: var(--ob-design-width);
  transform: translateX(-50%) scale(var(--ob-scale));
  transform-origin: top center;
  margin: 0;
}

.esScoreWrap {
  width: 100%;
  position: relative;
}

.esportsScoreboard.oniballScoreboard .esOniballScoreWrap {
  width: 100%;
}

.esScoreShell {
  position: relative;
  display: grid;
  grid-template-columns: var(--es-side-width) minmax(var(--es-center-min), max-content) var(--es-side-width);
  align-items: stretch;
  min-height: 50px;
  border: 2px solid #273a62;
  background: linear-gradient(180deg, #1b2a4aeb, #202f4ed9);
  box-shadow:
    0 12px 28px #0008,
    inset 0 1px 0 #ffffff1f;
  border-radius: 0;
  overflow: hidden;
}

.esportsScoreboard.oniballScoreboard .esScoreShellOniball {
  grid-template-columns: 2.2fr 1fr 1.85fr 1fr 2.2fr;
  min-height: 100px;
  border: 4px solid #050505;
  background: #050505;
  box-shadow:
    0 14px 30px #0008,
    0 0 0 2px #ffffff16 inset;
  gap: 0;
  overflow: visible;
}

.esOniballBlock {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 4px solid #050505;
}

.esOniballBlock:last-child {
  border-right: 0;
}

.esOniballBlue {
  background: linear-gradient(90deg, var(--team-color-bright, #66c6f2) 0%, var(--team-color, #1998dd) 100%);
}

.esOniballOrange {
  background: linear-gradient(90deg, var(--team-color, #ef6b11) 0%, var(--team-color-bright, #f39b4c) 100%);
}

.esOniballClock {
  background: #050505;
}

.esTeam {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.9rem, 1.2vw, 1.2rem);
  color: #f3f8ff;
  padding: 1px 7px;
}

.esTeamLeft {
  justify-content: flex-start;
}

.esTeamRight {
  justify-content: flex-end;
}

.esTeamRight .esTeamName {
  justify-content: flex-end;
  text-align: right;
}

.esTeamName {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 2px 8px #000b;
}

.esportsScoreboard.oniballScoreboard .esOniballName .esTeamName {
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 3.2rem;
  letter-spacing: 0.03em;
  line-height: 0.86;
  color: #f4f8ff;
  text-shadow:
    -2px 0 #000,
    0 2px #000,
    2px 0 #000,
    0 -2px #000,
    0 2px 6px #0009;
}

.esTeamName .nameWithRole {
  flex: 0 1 auto;
  min-width: 0;
  gap: 0.58em;
  max-width: 100%;
}

.esTeamRight .esTeamName .nameWithRole {
  width: auto;
  justify-content: flex-end;
}

.esTeamLeft .esTeamName .nameWithRole {
  width: auto;
}

.esTeamName .roleBadgeIcon {
  width: 1.22em;
  height: 1.22em;
}

.esTeamName .roleBadgeIcon[data-role='mytholite'] {
  width: 1.34em;
  height: 1.34em;
  transform: translateY(-0.01em) scale(1.08);
}

.ffaHudEntry {
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  min-width: 0;
  padding: 4px 10px 5px;
  border-radius: 999px;
  border: 1px solid var(--ffa-entry-border, #8ecfff88);
  background: linear-gradient(180deg, var(--ffa-entry-bg-top, #9fe5ffcc) 0%, var(--ffa-entry-bg-bottom, #6fd2ffb8) 100%);
  color: var(--ffa-entry-text, #f4f8ff);
  box-shadow:
    0 8px 16px #00000020,
    inset 0 1px 0 #ffffff18;
}

.ffaHudDivider {
  margin: 0 0.55em;
  color: #87a0cb;
}

.ffaHudPoints {
  color: inherit;
  opacity: 0.92;
}

#hudClock.ffaHudLeaderboard {
  display: grid;
  gap: 8px;
  width: clamp(228px, 26vw, 340px);
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid #a9c0e73a;
  background: linear-gradient(180deg, #14253db8 0%, #0c1728a8 100%);
  box-shadow:
    0 12px 24px #00000045,
    inset 0 1px 0 #ffffff1a;
  backdrop-filter: blur(9px);
  text-shadow: 0 1px 8px #000a;
  font-size: clamp(0.82rem, 0.95vw, 0.98rem);
}

.ffaHudLeaderboardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a8bddf;
}

.ffaHudLeaderboardList {
  display: grid;
  gap: 4px;
}

.ffaHudLeaderRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border-top: 1px solid #ffffff14;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--ffa-row-bg-top, #9fe5ff75) 0%, var(--ffa-row-bg-bottom, #6fd2ff5c) 100%);
  border: 1px solid var(--ffa-row-border, #8ecfff55);
  color: var(--ffa-row-text, #f4f8ff);
  box-shadow: inset 0 1px 0 #ffffff16;
}

.ffaHudLeaderRow:first-child {
  border-top: 0;
}

.ffaHudLeaderRow.mine {
  color: #f8fbff;
}

.ffaHudLeaderRow.eliminated {
  opacity: 0.72;
}

.ffaHudLeaderState {
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.68em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.ffaHudLeaderState.alive {
  color: #d9f5df;
  background: #163122b8;
  border-color: #5baa74;
}

.ffaHudLeaderState.out {
  color: #ffe2e2;
  background: #401b1bb8;
  border-color: #c76a6a;
}

.ffaHudLeaderName {
  min-width: 0;
  overflow: hidden;
}

.ffaHudLeaderName .nameWithRole {
  width: 100%;
  min-width: 0;
}

.ffaHudLeaderPoints {
  color: inherit;
  opacity: 0.94;
  font-size: 1.05em;
  justify-self: end;
}

.esScoreCap {
  min-width: clamp(40px, 3.8vw, 52px);
  height: auto;
  min-height: 100%;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1rem, 1.75vw, 1.45rem);
  font-weight: 700;
  color: var(--team-text, #f5f8ff);
  text-shadow:
    0 1px 0 #00000022,
    0 2px 6px #00000052;
  border: 0;
  box-shadow: inset 0 0 0 1px #ffffff33;
}

.esportsScoreboard.oniballScoreboard .esOniballScore {
  background: linear-gradient(90deg, var(--team-color-bright, #66c6f2) 0%, var(--team-color, #1998dd) 100%);
}

.esportsScoreboard.oniballScoreboard .esOniballOrange.esOniballScore {
  background: linear-gradient(90deg, var(--team-color, #ef6b11) 0%, var(--team-color-bright, #f39b4c) 100%);
}

.esportsScoreboard.oniballScoreboard .esScoreCap {
  min-width: 0;
  width: 100%;
  min-height: 100%;
  background: transparent;
  box-shadow: none;
  border: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 5.6rem;
  letter-spacing: 0.02em;
  line-height: 0.78;
  color: #f8fbff;
  text-shadow:
    -2px 0 #000,
    0 2px #000,
    2px 0 #000,
    0 -2px #000,
    0 3px 8px #0009;
}

.esTeamLeft .esScoreCap {
  background: linear-gradient(90deg, var(--team-color-bright, #f9d7ad) 0%, var(--team-color, #f59a3d) 72%);
  clip-path: none;
}

.esTeamRight .esScoreCap {
  background: linear-gradient(90deg, var(--team-color, #6ea8ff) 28%, var(--team-color-bright, #c3dcff) 100%);
  clip-path: none;
}

.esCenterClock {
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-size: clamp(1rem, 1.65vw, 1.35rem);
  line-height: 1;
  color: #f3f7ff;
  letter-spacing: 0.04em;
  padding: 0 6px;
  text-shadow: 0 3px 10px #000c;
}

.esportsScoreboard.oniballScoreboard .esCenterClock {
  width: 100%;
  justify-content: center;
  padding: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 5.2rem;
  letter-spacing: 0.02em;
  line-height: 0.8;
  color: #f8fbff;
  text-shadow:
    -2px 0 #000,
    0 2px #000,
    2px 0 #000,
    0 -2px #000,
    0 3px 8px #0009;
}

.esCenterMeta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.95rem, 1.45vw, 1.2rem);
  line-height: 1;
  color: #e9f2ff;
  letter-spacing: 0.12em;
  padding: 0 5px;
  text-shadow: 0 2px 8px #000c;
}

.esSubStatus {
  position: relative;
  margin: -1px auto 0;
  width: clamp(160px, calc(var(--es-sub-ch, 16) * 1ch + 38px), 340px);
  text-align: center;
  font-size: var(--es-sub-size, clamp(0.7rem, 0.9vw, 0.86rem));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffd8ad;
  border: 1px solid #8f5b2f;
  border-top: 0;
  background: linear-gradient(180deg, #4c3219ec 0%, #2f1f10f0 100%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%);
  padding: 3px 8px 2px;
  box-shadow:
    0 10px 20px #0007,
    0 0 16px #f59a3d2b;
}

.esSubStatus.sudden {
  color: #ffd0d0;
  border-color: #b75b5b;
  background: linear-gradient(90deg, #331515dd, #441d1de3);
  box-shadow:
    0 8px 18px #0007,
    0 0 16px #ff6a6a36;
}

.esSeriesBar {
  position: relative;
  z-index: 2;
  width: min(720px, 92vw);
  min-height: 54px;
  margin: -1px auto 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 22px;
  padding: 13px 44px 15px;
  border: 2px solid #101723;
  border-top: 0;
  background: linear-gradient(180deg, #111927f2 0%, #070b12f4 100%);
  box-shadow:
    0 10px 20px #0008,
    inset 0 1px 0 #ffffff12;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
}

.esSeriesTrack {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.esSeriesTrack.left {
  justify-content: flex-end;
}

.esSeriesTrack.right {
  justify-content: flex-start;
}

.esSeriesTick {
  width: clamp(46px, 5vw, 72px);
  height: 13px;
  display: inline-block;
  background: #1d2737;
  border: 2px solid #ffffff1f;
  box-shadow: inset 0 1px 0 #ffffff12;
}

.esSeriesTrack.left .esSeriesTick.won {
  background: var(--series-left, #6ea8ff);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--series-left, #6ea8ff) 45%, transparent),
    inset 0 1px 0 #ffffff4a;
}

.esSeriesTrack.right .esSeriesTick.won {
  background: var(--series-right, #f59a3d);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--series-right, #f59a3d) 45%, transparent),
    inset 0 1px 0 #ffffff4a;
}

.esSeriesLabel {
  min-width: 230px;
  text-align: center;
  font-size: clamp(1.18rem, 1.45vw, 1.45rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2f6ff;
  text-shadow: 0 2px 8px #000c;
  white-space: nowrap;
}

.esKickoffRibbon {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  min-width: 330px;
  max-width: 410px;
  height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border: 3px solid #050505;
  border-top: 0;
  clip-path: polygon(8% 0, 92% 0, 86% 100%, 14% 100%);
  background: linear-gradient(180deg, #f10010 0%, #d70614 52%, #ff8b73 100%);
  color: #fdfdfd;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 3.1rem;
  letter-spacing: 0.1em;
  line-height: 0.8;
  text-transform: uppercase;
  text-shadow:
    -1px 0 #000,
    0 1px #000,
    1px 0 #000,
    0 -1px #000;
  box-shadow:
    0 10px 22px #0008,
    0 0 16px #ff3b3b40;
}

.esKickoffRibbon.sudden {
  background: linear-gradient(180deg, #7f0f28 0%, #5f1738 48%, #9a3e6d 100%);
  box-shadow:
    0 10px 22px #0008,
    0 0 16px #d682ff3f;
}

.esportsScoreboard.scoreboardPulse .esScoreShell {
  animation: scoreIntroShell 580ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.esportsScoreboard.scoreboardPulse .esScoreCap {
  animation: scoreIntroCaps 620ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.esportsScoreboard.scoreboardPulse .esCenterClock {
  animation: scoreIntroClock 620ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.esportsScoreboard.scoreboardShimmer .esScoreShell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #ffffff00 26%, #ffffff55 48%, #ffffff00 70%);
  transform: translateX(-130%);
  animation: scoreShimmer 520ms ease-out;
  pointer-events: none;
}

.hudBottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.1rem;
  color: #d7e3ff;
}

.hudBottomActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#status {
  visibility: hidden;
  pointer-events: none;
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.feedbackBanner {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 900px);
  min-width: min(320px, 92vw);
  text-align: center;
  font-size: clamp(1.4rem, 3.3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: 14px;
  color: #f7f0e3;
  border: 2px solid #f7f0e3a8;
  background: linear-gradient(90deg, #201734e6, #2f2038e6);
  box-shadow: 0 16px 32px #0008;
}

.replayBadge {
  position: absolute;
  left: calc(14px + env(safe-area-inset-left));
  bottom: calc(62px + env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #ffdfdf;
  border: 1px solid #8d2626;
  border-radius: 999px;
  padding: 16px 34px;
  background: linear-gradient(90deg, #2a1111cc, #4b1717d6);
  box-shadow: 0 8px 20px #0007;
}

.replayViewerHud {
  position: absolute;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(94vw, 1180px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #5f78a8;
  background: linear-gradient(180deg, #111a2ece, #0c1424e6);
  box-shadow:
    0 14px 34px #0009,
    inset 0 1px 0 #d4e2ff1f;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.replayViewerHud.uiHidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.replayViewerHud.uiHidden > * {
  opacity: 0;
  pointer-events: none;
}

.replayViewerSource {
  font-size: 0.92rem;
  color: #d9e6ff;
  letter-spacing: 0.05em;
}

.replayViewerShortcutToast {
  align-self: flex-start;
  max-width: min(94%, 920px);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #88a4d2;
  background: linear-gradient(180deg, #1a2848f2, #13223ff2);
  box-shadow: 0 6px 16px #0007;
  color: #e5efff;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 190ms ease,
    transform 190ms ease;
}

.replayViewerShortcutToast.visible {
  opacity: 1;
  transform: translateY(0);
}

.replayViewerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.replayViewerUiMenu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #5b74a3;
  background: linear-gradient(180deg, #0f182bdd, #0b1323ee);
}

.replayViewerToggleRow {
  min-height: 30px;
  font-size: 0.84rem;
  color: #d5e3ff;
}

.replayViewerShortcutHint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: #a9bddf;
}

.replayViewerTimelinePanel {
  display: grid;
  gap: 6px;
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

.replayViewerHud.timelineHidden .replayViewerTimelinePanel {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.replayViewerLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #d1def8;
}

.replayViewerLabel select {
  min-width: 130px;
  height: 34px;
  border-radius: 8px;
}

.replayViewerTimeline {
  width: 100%;
}

.replayViewerTime {
  font-size: 0.88rem;
  color: #d8e4ff;
  text-align: right;
  letter-spacing: 0.04em;
}

.replayLight {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ff4a4a;
  box-shadow: 0 0 10px #ff4a4a;
  animation: replayBlink 900ms steps(2, start) infinite;
}

@keyframes replayBlink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes endMatchOverlayFade {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes endMatchTitlePop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.88);
    filter: blur(5px);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1.04);
    filter: blur(0);
  }
  42% {
    transform: translateY(0) scale(1);
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1);
  }
}

@keyframes endMatchSubtitlePop {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  20% {
    opacity: 0;
    transform: translateY(10px);
  }
  32% {
    opacity: 1;
    transform: translateY(0);
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes postRailSlideIn {
  0% {
    opacity: 0;
    transform: translateX(18px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes postRecordLeadPop {
  0% {
    transform: scale(0.95);
    filter: saturate(0.9) brightness(0.96);
  }
  45% {
    transform: scale(1.04);
    filter: saturate(1.08) brightness(1.05);
  }
  100% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
  }
}

.introOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  overflow: hidden;
  padding: calc(68px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  background: radial-gradient(circle, #00000055 0%, #00000000 60%);
}

.introLogo {
  width: min(220px, 40vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 18px #000d);
}

.introModeText {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 8px 20px #000d;
}

.introMatchText {
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  color: #d8e3ff;
  text-shadow: 0 4px 12px #000d;
}

.introLineup {
  margin: 4px auto 0;
  width: min(920px, calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  max-height: min(58vh, calc(100dvh - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #6b87b663;
  background: linear-gradient(180deg, #0d1629cc, #0a111fd4);
  box-shadow: 0 12px 34px #0009;
}

.introLineupGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}

.introTeamBlock {
  min-width: 0;
}

.introTeamName {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--team-color, #e6f1ff);
  text-shadow: 0 2px 8px #0009;
}

.introLineupList {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(5px, 1vh, 8px);
  align-items: start;
}

.introLineupItem {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: start;
  min-width: 0;
}

.introLineupListFfa {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.introPlayerCard {
  --player-card-art-height: min(
    calc(var(--player-card-height) * var(--intro-player-card-scale)),
    max(58px, calc((100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 3))
  );
  --player-card-art-width: calc(var(--player-card-art-height) * 21 / 9);
  --player-card-bg-image: url('/Assets/PlayerCardBackgrounds/pc_gold.webp');
  --player-card-bg-size: cover;
  --player-card-bg-position: center;
  --player-card-bg-opacity: 1;
  --player-card-overlay-image: linear-gradient(180deg, #0000006b, #00000042 42%, #0000002a);
  --player-card-overlay-opacity: 0.56;
  --player-card-text-shadow: 0 2px 7px #000f, 0 0 10px #0009;
  --player-card-text-glow: 0 0 12px #9ec8ff52;
  width: min(100%, var(--player-card-art-width));
  max-width: 100%;
  aspect-ratio: var(--player-card-aspect-ratio);
  border: 1px solid #7ca2d95e;
  border-radius: 18px;
  background:
    linear-gradient(180deg, #12254aee, #101f40ea),
    linear-gradient(130deg, #ffffff0e 0%, #ffffff00 58%);
  box-shadow:
    0 10px 24px #0008,
    inset 0 1px 0 #d6e7ff1f;
  padding: clamp(7px, 1.2vh, 12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
}

.introPlayerCard::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--player-card-bg-image);
  background-size: var(--player-card-bg-size);
  background-position: var(--player-card-bg-position);
  background-repeat: no-repeat;
  opacity: var(--player-card-bg-opacity);
  filter: saturate(1.08) brightness(1.06);
  pointer-events: none;
  z-index: 0;
}

.introPlayerCard::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--player-card-overlay-image);
  opacity: var(--player-card-overlay-opacity);
  pointer-events: none;
  z-index: 1;
}

.introPlayerCard > * {
  position: relative;
  z-index: 2;
}

.introPlayerCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.introPlayerCardIdentity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.introPlayerCardNameWithRole {
  font-size: clamp(0.78rem, 1.35vw, 1.06rem);
  color: #eaf3ff;
  letter-spacing: 0.02em;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.introPlayerCardName {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.introPlayerCardTitle {
  margin: 0;
  font-size: clamp(0.56rem, 0.9vw, 0.84rem);
  letter-spacing: 0.085em;
  max-width: 100%;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.introPlayerCardBadges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
}

.introPlayerCardOnipassCapsule {
  transform: scale(0.92);
  transform-origin: top right;
  margin: -1px -3px 0 0;
}

.introPlayerCardMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #d5e4ff;
  font-size: clamp(0.68rem, 1vw, 0.97rem);
  letter-spacing: 0.04em;
  text-shadow: var(--player-card-text-shadow), var(--player-card-text-glow);
}

.introPlayerCardLevel {
  text-transform: uppercase;
  font-weight: 700;
}

.playerCard.card-bg-dark,
.introPlayerCard.card-bg-dark {
  --player-card-overlay-image: linear-gradient(180deg, #ffffff17, #ffffff0d 45%, #0000000f);
  --player-card-overlay-opacity: 0.38;
  --player-card-text-shadow: 0 2px 6px #000d, 0 0 8px #0008;
  --player-card-text-glow: 0 0 16px #a5cfff80;
}

.introLineupFfa.is-dense .introLineupListFfa {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.introLineupFfa.is-dense .introPlayerCardNameWithRole {
  font-size: clamp(0.84rem, 1.2vw, 0.96rem);
}

.introLineupFfa.is-dense .introPlayerCardTitle {
  font-size: clamp(0.6rem, 0.86vw, 0.74rem);
}

.introLineupFfa.is-dense .introPlayerCardMeta {
  font-size: clamp(0.74rem, 0.9vw, 0.86rem);
}

@media (max-width: 1100px) {
  .introLineupFfa.is-dense .introLineupListFfa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.introLineupFfaTitle {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  letter-spacing: 0.06em;
  color: #e9f4ff;
  text-shadow: 0 2px 8px #0009;
}

.introCountdown {
  margin-top: 10px;
  font-size: clamp(2.2rem, 7vw, 6rem);
  font-weight: 700;
  color: #ffdf9a;
  text-shadow: 0 8px 20px #000d;
}

.endMatchOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.2em;
  pointer-events: none;
  background: radial-gradient(circle, #0000008a 0%, #0000001f 48%, #00000000 78%);
  z-index: 8;
}

.endMatchOverlay.active {
  animation: endMatchOverlayFade 3000ms ease-out forwards;
}

.endMatchOverlayTitle {
  font-size: clamp(3.2rem, 11vw, 8.4rem);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #edf5ff;
  text-shadow:
    0 0 28px #9ac3ffb0,
    0 6px 24px #000f;
  transform: translateY(6px) scale(0.92);
  opacity: 0;
}

.endMatchOverlaySubtitle {
  font-size: clamp(1rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  color: #d6e7ff;
  text-shadow: 0 4px 14px #000d;
  transform: translateY(8px);
  opacity: 0;
}

.endMatchOverlay.active .endMatchOverlayTitle {
  animation: endMatchTitlePop 3000ms cubic-bezier(0.2, 0.76, 0.24, 1) forwards;
}

.endMatchOverlay.active .endMatchOverlaySubtitle {
  animation: endMatchSubtitlePop 3000ms cubic-bezier(0.2, 0.76, 0.24, 1) forwards;
}

.endMatchOverlay.victory .endMatchOverlayTitle {
  color: #f8fcff;
  text-shadow:
    0 0 36px #7fc2ffcc,
    0 6px 24px #000f;
}

.endMatchOverlay.defeat .endMatchOverlayTitle {
  color: #ffd8c8;
  text-shadow:
    0 0 34px #ff8f5db8,
    0 6px 24px #000f;
}

.endMatchOverlay.neutral .endMatchOverlayTitle {
  color: #f5edd8;
  text-shadow:
    0 0 30px #f9c9788e,
    0 6px 24px #000f;
}

.hud.endMatchCinematic .hudTop,
.hud.endMatchCinematic .networkAlerts,
.hud.endMatchCinematic .playByPlayToasts,
.hud.endMatchCinematic .feedbackBanner,
.hud.endMatchCinematic .replayBadge,
.hud.endMatchCinematic .hudBottom,
.hud.endMatchCinematic .networkDebugHud,
.hud.endMatchCinematic .oniballKeeperDebugHud,
.hud.endMatchCinematic .gamepadDebugHud,
.hud.endMatchCinematic .introOverlay {
  opacity: 0;
  transition: opacity 220ms ease;
}

.hud .hudTop,
.hud .networkAlerts,
.hud .playByPlayToasts,
.hud .feedbackBanner,
.hud .replayBadge,
.hud .hudBottom,
.hud .networkDebugHud,
.hud .oniballKeeperDebugHud,
.hud .gamepadDebugHud,
.hud .introOverlay {
  transition: opacity 220ms ease;
}

.hud.producer-hide-scoreboard .hudTop,
.hud.producer-hide-play-by-play .playByPlayToasts,
.hud.producer-hide-feedback .feedbackBanner,
.hud.producer-hide-round-overlay .introOverlay,
.hud.producer-hide-end-match-overlay .endMatchOverlay,
.hud.producer-hide-replay-badge .replayBadge {
  display: none !important;
}

.hud button {
  pointer-events: auto;
}

.networkDebugHud {
  position: absolute;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(58px + env(safe-area-inset-bottom));
  min-width: 210px;
  max-width: min(72vw, 330px);
  white-space: pre-line;
  font-size: 0.95rem;
  line-height: 1.25;
  color: #d8ecff;
  border: 1px solid #4a6698;
  border-radius: 10px;
  background: #0b142ac9;
  box-shadow: 0 10px 24px #0008;
  padding: 8px 10px;
  text-align: left;
}

.oniballKeeperDebugHud {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(58px + env(safe-area-inset-bottom));
  min-width: 250px;
  max-width: min(78vw, 520px);
  white-space: pre-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.28;
  color: #e8f1ff;
  border: 1px solid #4f6aa0;
  border-radius: 10px;
  background: #101a31cc;
  box-shadow: 0 10px 24px #0008;
  padding: 8px 10px;
  text-align: left;
}

.gamepadDebugHud {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(58px + env(safe-area-inset-bottom));
  min-width: 280px;
  max-width: min(92vw, 640px);
  white-space: pre-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;
  font-size: 0.84rem;
  line-height: 1.26;
  color: #e6efff;
  border: 1px solid #506ea6;
  border-radius: 10px;
  background: #0d1630d9;
  box-shadow: 0 10px 24px #0008;
  padding: 7px 9px;
  text-align: left;
  pointer-events: none;
}

.networkAlerts {
  position: absolute;
  top: calc(54px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

.networkAlert {
  position: relative;
  font-size: 0.92rem;
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid #3f5f93;
  background: #0f1c35cc;
  color: #cfe1ff;
  box-shadow: 0 8px 20px #0007;
}

.networkAlert.good {
  border-color: #5ea67a;
  background: #173826cf;
  color: #d7ffdf;
}

.networkAlert.warn {
  border-color: #f2b45b;
  background: #4f360ecf;
  color: #ffe2b1;
}

.networkAlert.bad {
  border-color: #ff8d8d;
  background: #5a1c1ccf;
  color: #ffd2d2;
}

.networkAlert.performance {
  border-color: #8f73dc;
  background: #2a1f52cf;
  color: #e4d7ff;
}

.networkAlert.performance.good {
  border-color: #5f95d1;
  background: #16304dcf;
  color: #d7ecff;
}

.networkAlert.performance.warn {
  border-color: #b599ff;
  background: #3b2a75cf;
  color: #e9deff;
}

.networkAlert.performance.bad {
  border-color: #d1c1ff;
  background: #52329acf;
  color: #f3ecff;
}

.playByPlayToasts {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right));
  top: calc(112px + env(safe-area-inset-top));
  width: min(380px, 58vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  pointer-events: none;
}

.playByPlayToast {
  --team-rgb: 106, 167, 255;
  border: 1px solid rgba(var(--team-rgb), 0.68);
  background: linear-gradient(90deg, rgba(var(--team-rgb), 0.26), #0f1732e8);
  color: #ebf3ff;
  border-radius: 11px;
  padding: 8px 10px;
  box-shadow: 0 10px 24px #0008;
  transform: translateX(28px);
  opacity: 0;
  filter: saturate(0.96);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 260ms cubic-bezier(0.2, 0.85, 0.2, 1),
    opacity 260ms ease,
    filter 260ms ease;
}

.playByPlayToast.show {
  transform: translateX(0);
  opacity: 1;
  filter: saturate(1);
}

.playByPlayToast.hide {
  transform: translateX(18px);
  opacity: 0;
  filter: saturate(0.9);
}

.playByPlayTitle {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f3f8ff;
}

.playByPlayText {
  display: block;
  font-size: 0.95rem;
  color: #d6e6ff;
  margin-top: 1px;
}

.playByPlayBody {
  min-width: 0;
  flex: 1;
}

.playByPlayIcon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 7px;
  display: inline-block;
  background: #f4f8ff;
  box-shadow:
    0 0 0 1px rgba(var(--team-rgb), 0.66),
    inset 0 0 0 1px rgba(18, 28, 52, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.26);
  -webkit-mask-image: var(--event-icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--event-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.pause {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01040cab;
}

.pauseCard {
  width: min(420px, 90vw);
  display: grid;
  gap: 10px;
}

.screenTransition {
  --transition-in-ms: 220ms;
  --transition-out-ms: 250ms;
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.screenTransitionShade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform, opacity;
}

.screenTransitionLogo {
  position: relative;
  width: clamp(240px, 36vw, 460px);
  max-width: 78vw;
  height: auto;
  opacity: 0;
  transform: scale(0.84);
  filter: drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 28px #78b7ff00);
  will-change: opacity, transform, filter;
}

.screenTransition::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vw, 860px);
  height: 2px;
  background: linear-gradient(90deg, #ffffff00, #d8ecff, #ffffff00);
  transform: translate(-50%, -50%) scaleX(0.05);
  opacity: 0;
  will-change: transform, opacity;
}

.screenTransition.phase-in .screenTransitionShade {
  animation: screenTransitionWipeIn var(--transition-in-ms) cubic-bezier(0.24, 0.82, 0.23, 1) forwards;
}

.screenTransition.phase-in .screenTransitionLogo {
  animation: screenTransitionLogoIn var(--transition-in-ms) cubic-bezier(0.2, 0.86, 0.22, 1) forwards;
}

.screenTransition.phase-in::after {
  animation: screenTransitionLineIn calc(var(--transition-in-ms) * 0.95) ease-out forwards;
}

.screenTransition.phase-hold .screenTransitionShade {
  opacity: 1;
  transform: scaleX(1);
}

.screenTransition.phase-hold .screenTransitionLogo {
  opacity: 0.98;
  transform: scale(1);
  animation: screenTransitionLogoPulse 560ms ease-in-out infinite alternate;
}

.screenTransition.phase-hold::after {
  opacity: 0.58;
  transform: translate(-50%, -50%) scaleX(1);
}

.screenTransition.phase-out .screenTransitionShade {
  animation: screenTransitionWipeOut var(--transition-out-ms) cubic-bezier(0.3, 0.06, 0.72, 0.99) forwards;
}

.screenTransition.phase-out .screenTransitionLogo {
  animation: screenTransitionLogoOut var(--transition-out-ms) cubic-bezier(0.28, 0.12, 0.72, 1) forwards;
}

.screenTransition.phase-out::after {
  animation: screenTransitionLineOut var(--transition-out-ms) ease-in forwards;
}

.postCard {
  text-align: center;
  position: relative;
}

.postLayout {
  width: min(92vw, 760px);
  display: block;
  pointer-events: none;
}

.postLayout.hasRecords {
  width: min(96vw, 1240px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
}

.postLayout .postCard {
  width: 100%;
}

.postLayout.hasRecords .postCard {
  width: min(92vw, 760px);
}

.postMatchToasts {
  pointer-events: auto;
  width: min(300px, 28vw);
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(78vh, 760px);
  overflow: auto;
  padding-right: 4px;
}

.postMatchToasts:empty {
  display: none;
}

.postLayout.hasRecords .postMatchToasts {
  animation: postRailSlideIn 360ms cubic-bezier(0.22, 0.86, 0.2, 1) both;
}

.postLayout.hasRecords .postMatchToasts .postMatchToast:first-child {
  animation: postRecordLeadPop 420ms cubic-bezier(0.2, 0.82, 0.2, 1) 220ms both;
}

.postMatchToast {
  border: 1px solid #f0a54e;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(90deg, #f19a3fd4, #de600ad9);
  color: #f4f8ff;
  box-shadow: 0 8px 20px #0008;
  text-align: left;
  transform: translateX(0);
  opacity: 1;
}

.postMatchToastTitle {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #ffcf96;
}

.postMatchToastText {
  display: block;
  margin-top: 2px;
  font-size: 0.92rem;
  color: #e3eeff;
}

#postSubtitle {
  color: var(--muted);
  margin-top: 6px;
}

#postScore {
  margin-top: 6px;
  font-size: 2rem;
  font-weight: 700;
}

.postProgressPanel {
  margin-top: 10px;
  border: 1px solid #3a4c77;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #141f3d, #101a33);
}

.postProgressTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  color: #dce9ff;
}

.postProgressBar {
  margin-top: 8px;
  height: 12px;
  border-radius: 999px;
  background: #3b465b;
  overflow: hidden;
}

.postProgressFill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #89bdff, #4c8fff);
  box-shadow: 0 0 14px #5d95ff88;
}

.postLevelUpBadge {
  margin-top: 8px;
  color: #ffe39f;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 0 14px #f6cf6f99;
  animation: levelUpPulse 900ms ease-in-out infinite alternate;
}

.postPlacements {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.placementBadge {
  text-align: left;
  border: 1px solid #36508a;
  border-radius: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #141f3a, #111a31);
  box-shadow: inset 0 0 0 1px #ffffff12;
}

.placementBadge.mine {
  box-shadow:
    inset 0 0 0 1px #ffffff12,
    0 0 0 1px #7db0ff;
}

.placementBadge.first {
  border-color: #f4c46e;
  background: linear-gradient(180deg, #3a2a11, #251b0d);
}

.placementBadge.second {
  border-color: #8bb1e2;
}

.placementBadge.third {
  border-color: #c08e66;
}

.placementPlace {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: #c2d6fd;
}

.placementName {
  display: block;
  margin-top: 1px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #eff5ff;
}

.placementNameWithRole {
  color: inherit;
}

.placementPoints {
  display: block;
  margin-top: 2px;
  font-size: 0.88rem;
  color: #9db9e8;
}

.postTieBreakHint {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #9ab1d8;
  text-align: left;
  border: 1px solid #304467;
  border-radius: 9px;
  padding: 7px 9px;
  background: #101a30;
}

.postRankChangePanel {
  margin-top: 8px;
  border: 1px solid #3f6eaf;
  border-radius: 10px;
  background: linear-gradient(180deg, #122243, #0d1a34);
  padding: 8px 10px;
}

.postRankHeader {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: #96b8e9;
}

.postRankBody {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.postRankIcon {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 44px;
  flex: 0 0 48px;
}

.postRankIcon .rankTierIcon {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rank-tint) 62%, transparent));
}

.postRankIcon .rankSubIcon {
  width: 8px;
  height: 34px;
  border-width: 2px;
  padding: 2px 0;
}

.postRankIcon .rankSubDot {
  width: 5px;
  height: 5px;
  border-width: 1px;
}

.postRankIcon.noSubRank {
  width: 38px;
  flex-basis: 38px;
}

.postRankIcon.noSubRank .rankSubIcon {
  display: none;
}

.postRankArrow {
  color: #b6cff4;
  font-size: 1rem;
  opacity: 0.86;
}

.postRankText {
  color: #eaf3ff;
  font-size: 0.95rem;
}

.postRankText strong {
  color: #ffffff;
}

.postRankTrend {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid #6d8fbe;
  background: #1a2e53;
  color: #d7e9ff;
}

.postRankTrend.up {
  border-color: #e3b45a;
  background: linear-gradient(180deg, #4a3415, #32230d);
  color: #ffdca2;
}

.postRankTrend.down {
  border-color: #c57b7b;
  background: linear-gradient(180deg, #442025, #31161a);
  color: #ffc4c4;
}

.postRankChangePanel.rankUp {
  border-color: #e9bc63;
  box-shadow: 0 0 18px #f59a3d3d;
}

.postRankChangePanel.rankUp .postRankIcon.new {
  animation: postRankPop 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes postRankPop {
  0% {
    transform: scale(0.78);
    opacity: 0.55;
  }
  48% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.postStats {
  margin-top: 14px;
  text-align: left;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: #0f1528;
}

.statRow {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-bottom: 1px solid #25304c;
}

.statRow.cols4 {
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
}

.statRow.cols5 {
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
}

.statRow.cols6 {
  grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr));
}

.statRow:last-child {
  border-bottom: 0;
}

.hidden {
  display: none;
}

@keyframes levelUpPulse {
  from {
    opacity: 0.65;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(-1px) scale(1.03);
  }
}

@keyframes screenTransitionWipeIn {
  0% {
    opacity: 1;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes screenTransitionWipeOut {
  0% {
    opacity: 1;
    transform-origin: right center;
    transform: scaleX(1);
  }
  100% {
    opacity: 1;
    transform-origin: right center;
    transform: scaleX(0);
  }
}

@keyframes screenTransitionLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 26px #8ac0ff00);
  }
  56% {
    opacity: 1;
    transform: scale(1.06);
    filter: drop-shadow(0 0 8px #d5e9ff66) drop-shadow(0 0 26px #8ac0ff99);
  }
  100% {
    opacity: 0.98;
    transform: scale(1);
    filter: drop-shadow(0 0 6px #d5e9ff44) drop-shadow(0 0 24px #8ac0ff88);
  }
}

@keyframes screenTransitionLogoOut {
  0% {
    opacity: 0.98;
    transform: scale(1);
    filter: drop-shadow(0 0 8px #d5e9ff55) drop-shadow(0 0 26px #8ac0ff88);
  }
  100% {
    opacity: 0;
    transform: scale(1.06);
    filter: drop-shadow(0 0 0 #ffffff00) drop-shadow(0 0 16px #8ac0ff00);
  }
}

@keyframes screenTransitionLogoPulse {
  from {
    transform: scale(0.986);
    filter: drop-shadow(0 0 5px #d5e9ff40) drop-shadow(0 0 22px #8ac0ff72);
  }
  to {
    transform: scale(1.02);
    filter: drop-shadow(0 0 10px #ebf4ff72) drop-shadow(0 0 30px #8ac0ffac);
  }
}

@keyframes screenTransitionLineIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.05);
  }
  60% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scaleX(1);
  }
  100% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scaleX(1);
  }
}

@keyframes screenTransitionLineOut {
  0% {
    opacity: 0.52;
    transform: translate(-50%, -50%) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menuPanel.active,
  .queueCard.active,
  .menuPanel.active > *,
  .menuPanel.active .modeGrid .modeCard,
  .menuPanel.active .smallChoiceRow .choiceBtn,
  .menuPanel.active .actions > button,
  .menuPanel.active .actions > label,
  .menuPanel.active .actions > select {
    animation: none;
    opacity: 1;
  }

  .menuTab,
  .modeCard,
  .choiceBtn {
    transition: none;
  }

  .playerCardBarFill::after {
    animation: none;
  }

  .menuRail::after,
  .menuCard::after,
  .menuFuture::after,
  .settingsShell::after,
  .privateLobbyCard::after,
  .privateSettingsShell::after,
  .privateEntryCard::after,
  .queueCard::after {
    animation: none;
    opacity: 0;
  }

  .menuTab.active::after,
  .settingsTabBtn.active::after,
  .choiceBtn.active::after,
  .modeCard.active::after,
  button.primary::after {
    animation: none;
    opacity: 0;
  }

  button.onimoPendingButton::before {
    animation: none;
    border-right-color: currentColor;
  }

  .esportsScoreboard.scoreboardPulse .esScoreShell,
  .esportsScoreboard.scoreboardPulse .esScoreCap,
  .esportsScoreboard.scoreboardPulse .esCenterClock {
    animation: none;
  }

  .esportsScoreboard.scoreboardShimmer .esScoreShell::after {
    animation: none;
    opacity: 0;
  }

  .screenTransition.phase-in .screenTransitionShade,
  .screenTransition.phase-out .screenTransitionShade,
  .screenTransition.phase-in .screenTransitionLogo,
  .screenTransition.phase-out .screenTransitionLogo,
  .screenTransition.phase-in::after,
  .screenTransition.phase-out::after,
  .screenTransition.phase-hold .screenTransitionLogo,
  .endMatchOverlay.active,
  .endMatchOverlay.active .endMatchOverlayTitle,
  .endMatchOverlay.active .endMatchOverlaySubtitle,
  .postLayout.hasRecords .postMatchToasts,
  .postLayout.hasRecords .postMatchToasts .postMatchToast:first-child {
    animation: none;
  }

  .screenTransition.phase-in .screenTransitionShade,
  .screenTransition.phase-hold .screenTransitionShade {
    opacity: 1;
    transform: scaleX(1);
  }

  .screenTransition.phase-out .screenTransitionShade {
    opacity: 0;
    transform: scaleX(0);
    transition: transform 100ms linear, opacity 100ms linear;
  }

  .screenTransition.phase-in .screenTransitionLogo,
  .screenTransition.phase-hold .screenTransitionLogo {
    opacity: 0.95;
    transform: scale(1);
  }

  .screenTransition.phase-out .screenTransitionLogo {
    opacity: 0;
    transform: scale(1);
    transition: opacity 100ms linear;
  }

  .screenTransition.phase-in::after,
  .screenTransition.phase-hold::after,
  .screenTransition.phase-out::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
}

@media (max-width: 1366px) and (min-width: 901px) {
  :root {
    --player-card-height: clamp(108px, 15.5vh, 156px);
  }

  .menuLayout {
    --menu-grid-row-gap: 10px;
    --menu-support-row-height: clamp(108px, 15.5vh, 156px);
    --menu-ticker-height: clamp(48px, 6.5vh, 64px);
    --menu-pad-top: calc(14px + env(safe-area-inset-top));
    --menu-pad-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: var(--menu-grid-row-gap) 16px;
    padding: var(--menu-pad-top) calc(20px + env(safe-area-inset-right) + var(--menu-utility-gutter)) var(--menu-pad-bottom)
      calc(20px + env(safe-area-inset-left));
    grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  }

  .menuSupportRow {
    grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  }

  .menuTab {
    font-size: 1.45rem;
  }

  .playerCardName {
    font-size: 2rem;
  }

  .staffWorkspace {
    grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.32fr);
  }
}

@media (max-width: 900px) {
  .menuLayout {
    --menu-main-card-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'rail'
      'work'
      'support'
      'ticker';
    gap: 14px;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right))
      calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    align-items: start;
  }

  .menuRail {
    align-self: auto;
    max-height: none;
  }

  .menuCard {
    max-height: none;
    overflow: visible;
  }

  .menuSupportRow {
    grid-template-columns: 1fr;
  }

  .playerCard {
    width: 100%;
  }

  .brandLogo {
    width: min(205px, 52vw);
  }

  .menuTab {
    font-size: 1.34rem;
    min-height: 52px;
  }

  .menuTabRow {
    gap: 10px;
  }

  .menuTabRowIcons {
    grid-template-columns: repeat(2, minmax(48px, 58px));
  }

  .menuTabIcon {
    min-height: 52px;
    min-width: 52px;
    padding: 9px;
  }

  .menuTabIcon img {
    width: 24px;
    height: 24px;
  }

  .settingsTabs {
    flex-wrap: wrap;
  }

  .settingsTabBtn {
    min-width: 95px;
    font-size: 1rem;
  }

  .playerCardName {
    font-size: 1.7rem;
  }

  .playerCardMeta {
    font-size: 1.1rem;
  }

  .playerCardOnipassCapsule,
  .playerCardCreditsCapsule {
    font-size: 0.82rem;
    padding: 3px 8px 3px 7px;
    min-height: 24px;
    gap: 5px;
  }

  .playerCardOnipassIcon,
  .playerCardCreditsIcon {
    width: 14px;
    height: 14px;
  }

  .card {
    padding: 16px;
  }

  .loginCard {
    width: min(100%, 520px);
    padding: 20px;
  }

  .loginScreenLayout {
    width: min(96vw, 620px);
    flex-direction: column;
    gap: 12px;
  }

  #loginScreen .loginCard {
    border-right: 2px solid #365db2;
  }

  .loginInfoCard {
    width: 100%;
    min-width: 0;
    padding: 18px 16px 20px;
    margin-left: 0;
  }

  #loginScreen .loginInfoCard {
    margin-left: 0;
    border-left: 2px solid #f06ab9;
  }

  .loginInfoLogo {
    width: min(200px, 58vw);
  }

  .loginInfoHeadline {
    font-size: clamp(1.15rem, 4.8vw, 1.6rem);
  }

  .loginRegisterBtn {
    min-height: 48px;
    min-width: 160px;
    font-size: 1.65rem;
  }

  .loginLogo {
    width: min(270px, 64vw);
  }

  #staffScreen {
    overflow: auto;
  }

  .staffScreenWrap {
    height: auto;
    min-height: 100%;
    padding: calc(70px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  }

  .staffCard {
    height: auto;
    max-height: none;
  }

  .staffWorkspace {
    grid-template-columns: 1fr;
  }

  .staffColumn {
    overflow: visible;
    padding-right: 0;
  }

  .staffAdminTabs {
    position: static;
    background: transparent;
    padding-bottom: 0;
  }

  .staffTitleGrantGrid {
    grid-template-columns: 1fr;
  }

  .staffSupportIdentityGrid,
  .staffSupportActionGrid {
    grid-template-columns: 1fr;
  }

  .staffDiscordInviteGrid,
  .staffDiscordTopGrid,
  .staffDiscordChannelGrid,
  .staffDiscordBuilderLayout,
  .staffDiscordInlineGrid,
  .staffDiscordDynamicRow,
  .staffDiscordDynamicRow[data-kind='link'] {
    grid-template-columns: 1fr;
  }

  .staffDiscordListHeader {
    flex-direction: column;
    align-items: stretch;
  }

  .onimoLayout {
    grid-template-columns: 1fr;
  }

  .onimoPreviewColumn {
    order: initial;
  }

  .onimoPartTabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onimoPartTab {
    min-height: 40px;
    font-size: 0.88rem;
  }

  .onimoInventoryHeader {
    flex-wrap: wrap;
  }

  .onimoInventoryToolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .onimoFilterLabel {
    padding-left: 2px;
  }

  .onimoOwnershipFilter {
    width: 100%;
  }

  .onimoOwnershipFilter .onimoFilterBtn {
    min-width: 0;
    flex: 1 1 0;
  }

  .onimoCustomiseActions > button {
    flex: 1 1 100%;
    min-height: 46px;
  }

  .hudTop {
    font-size: 1.08rem;
  }

  #hudClock.ffaHudLeaderboard {
    width: clamp(172px, 43vw, 236px);
    gap: 5px;
    padding: 8px 9px;
    border-radius: 14px;
    font-size: clamp(0.62rem, 1.8vw, 0.76rem);
  }

  .ffaHudLeaderRow {
    gap: 6px;
    padding: 3px 0;
  }

  .ffaHudLeaderState {
    min-width: 28px;
    padding: 2px 5px;
    font-size: 0.64em;
  }

  .hudTop.esportsScoreboardHud #hudMode {
    top: calc(6px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    font-size: 0.78rem;
    padding: 3px 8px;
  }

  .esportsScoreboard:not(.oniballScoreboard) {
    --es-side-width: clamp(96px, var(--es-side-width-px), 148px);
    max-width: min(92vw, calc(100vw - 4px));
  }

  .esScoreShell {
    min-height: 42px;
    border-width: 1px;
  }

  .esTeam {
    gap: 5px;
    padding: 3px 6px;
  }

  .esScoreCap {
    min-width: clamp(36px, 8vw, 46px);
    height: 24px;
    font-size: clamp(0.84rem, 3vw, 1.05rem);
  }

  .esTeamName {
    font-size: clamp(0.7rem, 2.2vw, 0.86rem);
  }

  .esCenterClock,
  .esCenterMeta {
    padding: 0 5px;
    font-size: clamp(0.82rem, 3vw, 1rem);
  }

  .esSubStatus {
    margin-top: 4px;
    width: clamp(120px, 42%, 180px);
    font-size: clamp(0.58rem, 2vw, 0.68rem);
    padding: 2px 6px 1px;
  }

  .hudBottom {
    font-size: 0.95rem;
  }

  .networkDebugHud {
    bottom: calc(52px + env(safe-area-inset-bottom));
    font-size: 0.84rem;
    min-width: 168px;
    padding: 6px 8px;
  }

  .oniballKeeperDebugHud {
    bottom: calc(52px + env(safe-area-inset-bottom));
    font-size: 0.78rem;
    min-width: 160px;
    max-width: min(76vw, 360px);
    padding: 6px 8px;
  }

  .gamepadDebugHud {
    bottom: calc(52px + env(safe-area-inset-bottom));
    min-width: min(220px, 86vw);
    max-width: min(94vw, 520px);
    font-size: 0.72rem;
    padding: 6px 8px;
  }

  .networkAlerts {
    top: calc(46px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    gap: 6px;
  }

  .playByPlayToasts {
    top: calc(96px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    width: min(340px, 72vw);
    gap: 6px;
  }

  .playByPlayTitle {
    font-size: 0.8rem;
  }

  .playByPlayText {
    font-size: 0.84rem;
  }

  .networkAlert {
    font-size: 0.8rem;
    padding: 4px 8px;
  }

  .feedbackBanner {
    font-size: clamp(1.1rem, 5.2vw, 1.8rem);
    padding: 8px 12px;
  }

  .introLineup {
    width: min(640px, 92vw);
    padding: 12px;
  }

  .introLineupGrid {
    grid-template-columns: 1fr;
  }

  .introLineupListFfa {
    grid-template-columns: 1fr;
  }

  .introPlayerCard {
    padding: 10px;
  }

  .introPlayerCardOnipassCapsule {
    transform: scale(0.88);
  }

  .replayBadge {
    left: calc(10px + env(safe-area-inset-left));
    bottom: calc(54px + env(safe-area-inset-bottom));
    font-size: 2.4rem;
    gap: 8px;
    padding: 12px 22px;
  }

  .postMatchToasts {
    width: 100%;
    max-height: none;
    overflow: visible;
    margin-top: 10px;
    padding-right: 0;
  }

  .postLayout {
    width: min(92vw, 760px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .postLayout .postCard {
    width: 100%;
  }

  .postLayout .postMatchToasts {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .competitiveRankSummary {
    grid-template-columns: 1fr;
  }

  .rankLadderGrid {
    grid-template-columns: 1fr;
  }

  .grid.two,
  .colors,
  .modeGrid,
  .smallChoiceRow,
  .statsRow,
    .statRow {
    grid-template-columns: 1fr;
  }

  .modeGrid.modeTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .partyMiniStrip {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .partyMiniMembers {
    justify-content: flex-start;
  }

  .teamDashboardLayout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .teamJoinRow,
  .teamInviteRow,
  .teamBrandRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .menuLayout {
    grid-template-columns: minmax(220px, 282px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  .menuSupportRow {
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  }

  .menuWork {
    min-width: 0;
    max-width: none;
  }

  .teamDashboardLayout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .teamBrandRow {
    grid-template-columns: 1fr;
  }

  .modeCard {
    min-height: 92px;
    font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  }

  .modeTabBtn {
    min-height: 52px;
    font-size: clamp(0.98rem, 1.8vw, 1.12rem);
  }

  .choiceBtn {
    min-height: 48px;
    font-size: 1.05rem;
  }
}

@media (max-width: 1320px) {
  .privateLobbyGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .menuTab {
    font-size: 1.2rem;
    min-height: 48px;
  }

  .menuTabRow {
    gap: 8px;
  }

  .menuTabRowIcons {
    grid-template-columns: repeat(2, minmax(44px, 52px));
  }

  .menuTabIcon {
    min-height: 48px;
    min-width: 48px;
    padding: 8px;
  }

  .menuTabIcon img {
    width: 22px;
    height: 22px;
  }

  .modeCard {
    min-height: 88px;
    font-size: clamp(1.5rem, 8vw, 2.2rem);
  }

  .modeTabBtn {
    min-height: 48px;
    font-size: 1rem;
  }

  .choiceBtn {
    min-height: 46px;
    font-size: 1rem;
  }

  .playerCard {
    padding: 12px;
  }

  .playerCardHint {
    font-size: 0.85rem;
  }

  .matchCard .statsRow {
    grid-template-columns: 1fr;
  }

  .privateEntryActions,
  .privateLobbyGrid {
    grid-template-columns: 1fr;
  }

  .privateLobbyHeader,
  .privateRosterBoard,
  .privateRosterStaffBoard {
    grid-template-columns: 1fr;
  }

  .privateSettingsTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privateStickyActions {
    position: static;
    border-top: 0;
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
  }

  #postScore {
    font-size: 1.6rem;
  }

  .postPlacements {
    grid-template-columns: 1fr;
  }

  .postStats {
    max-height: 180px;
  }

  .postProgressTop {
    font-size: 0.92rem;
  }
}

@media (max-height: 860px) {
  :root {
    --player-card-height: clamp(98px, 14.5vh, 140px);
    --intro-player-card-scale: 0.72;
  }

  .menuLayout {
    --menu-grid-row-gap: 10px;
    --menu-support-row-height: clamp(98px, 14.5vh, 140px);
    --menu-ticker-height: clamp(42px, 5.8vh, 56px);
    --menu-pad-top: calc(10px + env(safe-area-inset-top));
    --menu-pad-bottom: calc(8px + env(safe-area-inset-bottom));
    align-items: start;
  }

  .staffScreenWrap {
    padding-top: calc(62px + env(safe-area-inset-top));
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --intro-player-card-scale: 0.56;
  }

  .introOverlay {
    gap: 4px;
    padding-top: calc(52px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .introLogo {
    width: min(150px, 28vw);
  }

  .introModeText {
    font-size: clamp(1.45rem, 4.5vw, 3.2rem);
  }

  .introMatchText {
    font-size: clamp(0.84rem, 1.7vw, 1.15rem);
  }

  .introLineup {
    max-height: calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 8px 10px;
    border-radius: 10px;
  }

  .introLineupGrid {
    gap: 8px;
  }

  .introTeamName {
    margin-bottom: 4px;
    font-size: clamp(0.78rem, 1.5vw, 1rem);
  }

  .introPlayerCardOnipassCapsule {
    transform: scale(0.74);
  }
}

@media (max-height: 700px) {
  .loginCard {
    padding: 16px;
  }

  .loginInfoCard {
    padding: 16px 14px 18px;
    gap: 10px;
  }

  .loginInfoLogo {
    width: min(176px, 56vw);
  }

  .loginRegisterBtn {
    min-height: 44px;
    font-size: 1.45rem;
  }

  .loginLogo {
    width: min(220px, 50vw);
    margin-bottom: 8px;
  }

  .tag {
    margin-bottom: 12px;
  }

  .menuTab {
    min-height: 44px;
    font-size: 1.1rem;
  }

  .playerCardName {
    font-size: 1.45rem;
  }

  .playerCardMeta {
    font-size: 0.96rem;
  }

  .playerCardOnipassCapsule,
  .playerCardCreditsCapsule {
    font-size: 0.78rem;
  }

  #staffScreen {
    overflow: auto;
  }

  .staffCard {
    height: auto;
    max-height: none;
  }

  .staffColumn {
    overflow: visible;
  }
}

/* Phone-sized mobile profile with landscape-first layouts. */
body.phone-ui button,
body.phone-ui select,
body.phone-ui input {
  font-size: 0.95rem;
}

body.phone-ui button,
body.phone-ui .menuTab,
body.phone-ui .settingsTabBtn,
body.phone-ui .choiceBtn,
body.phone-ui #pauseBtn,
body.phone-ui #producerPanelBtn {
  min-height: 40px;
}

body.phone-ui-portrait .homeLink,
body.phone-ui-portrait .menuFullscreenBtn,
body.phone-ui-portrait .staffPortalBtn,
body.phone-ui-portrait .staffBackBtn,
body.phone-ui-portrait .controllerMenuShortcuts {
  display: none;
}

body.phone-ui-portrait .menuCardPhoneBar {
  display: flex;
}

body.phone-ui-portrait .menuRailBackBtn {
  display: inline-flex;
}

body.phone-ui-portrait .menuLayout:not(.menu-rail-collapsed) .menuWork,
body.phone-ui-portrait .menuLayout:not(.menu-rail-collapsed) .menuSupportRow,
body.phone-ui-portrait .menuLayout:not(.menu-rail-collapsed) .menuTicker {
  display: none;
}

body.phone-ui-portrait .menuLayout.menu-rail-collapsed .menuRail {
  display: none;
}

body.phone-ui-landscape .homeLink,
body.phone-ui-landscape .menuFullscreenBtn {
  top: calc(8px + env(safe-area-inset-top));
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.82rem;
  min-width: 84px;
}

body.phone-ui-landscape .staffPortalBtn,
body.phone-ui-landscape .staffBackBtn {
  top: calc(46px + env(safe-area-inset-top));
  min-width: 74px;
  padding: 5px 8px;
  font-size: 0.68rem;
}

body.phone-ui-portrait .socialToggleBtn {
  top: calc(8px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: 42px;
  height: 38px;
}

body.phone-ui-portrait .socialPanel {
  top: calc(54px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  right: calc(10px + env(safe-area-inset-right));
  width: auto;
  max-height: calc(var(--app-vh) - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.phone-ui-landscape .socialToggleBtn {
  top: calc(8px + env(safe-area-inset-top));
  right: calc(104px + env(safe-area-inset-right));
  width: 40px;
  height: 34px;
  border-radius: 8px;
}

body.phone-ui-landscape .socialPanel {
  top: calc(46px + env(safe-area-inset-top));
  width: min(390px, calc(100vw - 24px));
  max-height: calc(var(--app-vh) - 58px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

body.phone-ui-landscape #menuScreen {
  overflow: hidden;
}

body.phone-ui-landscape .menuLayout {
  --menu-main-card-height: calc(var(--app-vh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  --menu-viewport-height: var(--menu-main-card-height);
  grid-template-columns: minmax(168px, 212px) minmax(0, 1fr);
  grid-template-rows: var(--menu-main-card-height);
  grid-template-areas: 'rail work';
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
    calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
}

body.phone-ui-landscape .menuLayout.is-private-tab,
body.phone-ui-landscape .menuLayout.is-onimo-tab,
body.phone-ui-landscape .menuLayout.is-store-tab {
  grid-template-columns: minmax(168px, 212px) minmax(0, 1fr);
  gap: 10px;
}

body.phone-ui-landscape .menuSupportRow,
body.phone-ui-landscape .menuTicker {
  display: none;
}

body.phone-ui-landscape .menuRail,
body.phone-ui-landscape .menuCard {
  height: var(--menu-main-card-height);
  max-height: var(--menu-main-card-height);
}

body.phone-ui-landscape .menuRail {
  gap: 8px;
  padding: 10px;
}

body.phone-ui-landscape .menuCard {
  padding: 12px;
}

body.phone-ui-landscape .brandLogo {
  width: min(150px, 42vw);
  margin: 0 auto 2px;
}

body.phone-ui-landscape .menuTab {
  font-size: 0.96rem;
  min-height: 42px;
  letter-spacing: 0.03em;
}

body.phone-ui-landscape .menuTabRow {
  gap: 7px;
}

body.phone-ui-landscape .menuTabRowIcons {
  grid-template-columns: repeat(2, minmax(40px, 46px));
}

body.phone-ui-landscape .menuTabIcon {
  min-height: 42px;
  min-width: 42px;
  padding: 6px;
}

body.phone-ui-landscape .menuTabIcon img {
  width: 18px;
  height: 18px;
}

body.phone-ui-landscape h2 {
  font-size: 1.35rem;
}

body.phone-ui-landscape .tag {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

body.phone-ui-landscape .menuPanel.active {
  margin-top: 8px;
  padding-right: 2px;
}

body.phone-ui-landscape .modeGrid {
  gap: 8px;
}

body.phone-ui-landscape .modeCard {
  min-height: 72px;
  font-size: clamp(1.25rem, 3.8vw, 1.65rem);
}

body.phone-ui-landscape .modeTabBtn {
  min-height: 42px;
  font-size: 0.9rem;
}

body.phone-ui-landscape .queueCard {
  margin-top: 8px;
  padding: 10px;
}

body.phone-ui-landscape .choiceBtn {
  min-height: 42px;
  font-size: 0.92rem;
}

body.phone-ui-landscape .actions {
  margin-top: 10px;
  gap: 8px;
}

body.phone-ui-landscape .onimoLayout,
body.phone-ui-landscape .privateLobbyGrid {
  grid-template-columns: 1fr;
}

body.phone-ui-landscape .onimoPreviewCardLarge #onimoPreviewCanvas {
  min-height: 200px;
}

body.phone-ui-landscape .settingsTabs {
  gap: 6px;
  flex-wrap: wrap;
}

body.phone-ui-landscape .settingsTabBtn {
  min-width: 82px;
  font-size: 0.86rem;
  padding: 6px 8px;
}

body.phone-ui-landscape .privateSettingsTabs .settingsTabBtn {
  min-height: 40px;
}

body.phone-ui-landscape .hudTop {
  min-height: 38px;
  font-size: 0.9rem;
  padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 0
    calc(8px + env(safe-area-inset-left));
}

body.phone-ui-landscape .hudTop.esportsScoreboardHud #hudMode {
  top: calc(4px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  font-size: 0.68rem;
  padding: 2px 6px;
}

body.phone-ui-landscape .esportsScoreboard:not(.oniballScoreboard) {
  --es-side-width: clamp(84px, var(--es-side-width-px), 130px);
  max-width: min(94vw, calc(100vw - 8px));
}

body.phone-ui-landscape .esScoreShell {
  min-height: 34px;
}

body.phone-ui-landscape .esTeam {
  gap: 4px;
  padding: 2px 4px;
}

body.phone-ui-landscape .esTeamName {
  font-size: clamp(0.6rem, 1.8vw, 0.76rem);
}

body.phone-ui-landscape .esScoreCap {
  min-width: 30px;
  height: 20px;
  font-size: 0.78rem;
}

body.phone-ui-landscape .esCenterClock,
body.phone-ui-landscape .esCenterMeta {
  padding: 0 3px;
  font-size: clamp(0.74rem, 2.2vw, 0.9rem);
}

body.phone-ui-landscape .esSubStatus {
  margin-top: 2px;
  width: clamp(110px, 40%, 170px);
  font-size: clamp(0.52rem, 1.8vw, 0.62rem);
  padding: 1px 5px;
}

body.phone-ui-landscape #hudClock.ffaHudLeaderboard {
  width: clamp(152px, 44vw, 220px);
  gap: 4px;
  padding: 6px 7px;
  font-size: clamp(0.56rem, 1.6vw, 0.7rem);
}

body.phone-ui-landscape .ffaHudLeaderRow {
  gap: 4px;
  padding: 3px 4px;
}

body.phone-ui-landscape .networkAlerts {
  top: calc(42px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  max-width: min(34vw, 230px);
  gap: 4px;
  align-items: flex-end;
}

body.phone-ui-landscape .networkAlert {
  max-width: 100%;
  padding: 3px 7px;
  font-size: 0.68rem;
  line-height: 1.08;
  white-space: normal;
  text-align: right;
}

body.phone-ui-landscape .playByPlayToasts {
  top: calc(78px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  width: min(38vw, 260px);
  gap: 5px;
}

body.phone-ui-landscape .playByPlayToast {
  padding: 5px 7px;
  gap: 6px;
  border-radius: 8px;
  box-shadow: 0 8px 18px #0008;
}

body.phone-ui-landscape .playByPlayIcon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-radius: 5px;
}

body.phone-ui-landscape .playByPlayTitle {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

body.phone-ui-landscape .playByPlayText {
  margin-top: 0;
  font-size: 0.7rem;
  line-height: 1.08;
}

body.phone-ui-landscape .feedbackBanner {
  top: 16%;
  font-size: clamp(1rem, 4.5vw, 1.45rem);
  padding: 6px 10px;
}

body.phone-ui-landscape .hudBottom {
  font-size: 0.78rem;
  padding: 0 calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
    calc(8px + env(safe-area-inset-left));
}

body.phone-ui-landscape .replayBadge {
  left: calc(8px + env(safe-area-inset-left));
  bottom: calc(44px + env(safe-area-inset-bottom));
  gap: 6px;
  font-size: 1.5rem;
  padding: 8px 14px;
}

body.phone-ui-landscape .replayViewerHud {
  width: min(98vw, 980px);
  bottom: calc(54px + env(safe-area-inset-bottom));
  padding: 8px 10px;
  gap: 7px;
}

body.phone-ui-landscape .replayViewerControls {
  gap: 6px;
}

body.phone-ui-landscape .replayViewerLabel {
  font-size: 0.72rem;
  gap: 5px;
}

body.phone-ui-landscape .replayViewerLabel select {
  min-width: 104px;
  height: 28px;
}

body.phone-ui-landscape .replayViewerUiMenu {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
}

body.phone-ui-landscape .replayViewerShortcutToast {
  font-size: 0.68rem;
  padding: 4px 7px;
}

body.phone-ui-landscape .replayViewerTime {
  font-size: 0.72rem;
}

body.phone-ui-landscape .replayLight {
  width: 16px;
  height: 16px;
}

body.phone-ui-landscape .networkDebugHud,
body.phone-ui-landscape .oniballKeeperDebugHud,
body.phone-ui-landscape .gamepadDebugHud {
  bottom: calc(44px + env(safe-area-inset-bottom));
  font-size: 0.66rem;
  min-width: 132px;
  padding: 4px 6px;
}

body.phone-ui-landscape #postMatchScreen {
  align-items: stretch;
  justify-content: stretch;
  overflow: auto;
  padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right))
    calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
}

body.phone-ui-landscape #postLayout {
  width: 100%;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.phone-ui-landscape #postLayout.hasRecords {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

body.phone-ui-landscape #postLayout .postCard,
body.phone-ui-landscape #postLayout.hasRecords .postCard {
  width: 100%;
  border-radius: 14px;
  padding: 12px;
}

body.phone-ui-landscape #postLayout .postMatchToasts {
  width: 100%;
  margin-top: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

body.phone-ui-landscape #postTitle {
  font-size: 1.6rem;
}

body.phone-ui-landscape #postSubtitle {
  margin-top: 4px;
  font-size: 0.94rem;
}

body.phone-ui-landscape #postScore {
  margin-top: 4px;
  font-size: 1.48rem;
}

body.phone-ui-landscape .postProgressPanel {
  margin-top: 8px;
  padding: 8px 9px;
}

body.phone-ui-landscape .postProgressTop {
  font-size: 0.96rem;
}

body.phone-ui-landscape .postPlacements {
  margin-top: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.phone-ui-landscape .placementBadge {
  padding: 6px 7px;
}

body.phone-ui-landscape .placementName {
  font-size: 0.95rem;
}

body.phone-ui-landscape #postXpSummary {
  margin-top: 8px;
  margin-bottom: 8px;
  font-size: 0.84rem;
  line-height: 1.25;
}

body.phone-ui-landscape #postStats {
  margin-top: 8px;
  max-height: min(26vh, 150px);
  padding: 6px;
}

body.phone-ui-landscape #postStats .statRow {
  gap: 6px;
  padding: 5px;
  font-size: 0.78rem;
}

body.phone-ui-landscape #rematchVotesText {
  margin: 8px 0 0;
  font-size: 0.86rem;
}

body.phone-ui-landscape #postLayout .actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body.phone-ui-landscape #postLayout .actions button {
  width: 100%;
  min-height: 38px;
  padding: 7px 8px;
  font-size: 0.9rem;
}

/* Full-screen menu language redesign (desktop + mobile parity via uniform scaling). */
body[data-screen='menu'] #game,
body[data-screen='login'] #game,
body[data-screen='staff'] #game,
body[data-screen='matchmaking'] #game,
body[data-screen='postmatch'] #game {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

body[data-screen='game'] #game {
  opacity: 1;
}

body.phone-ui-portrait .rotatePrompt {
  display: flex;
}

#menuScreen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, #4f1f8f66 0%, transparent 30%),
    radial-gradient(circle at 84% 12%, #243b9f4d 0%, transparent 34%),
    linear-gradient(180deg, #16002d 0%, #24004d 62%, #1a0035 100%);
}

#menuScreen::before,
#menuScreen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#menuScreen::before {
  background-image:
    linear-gradient(#ffffff08 1px, transparent 1px),
    linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.35;
}

#menuScreen::after {
  background: linear-gradient(180deg, #00000026 0%, #0000004f 100%);
}

#menuScreen .menuLayout {
  --menu-scale: 1;
  --menu-design-width: 1680px;
  --menu-design-height: 980px;
  --menu-utility-gutter: 86px;
  position: relative;
  top: auto;
  left: auto;
  width: 100% !important;
  min-height: var(--app-vh);
  height: var(--app-vh);
  max-height: var(--app-vh);
  transform: none;
  transform-origin: initial;
  padding: 18px calc(18px + var(--menu-utility-gutter)) 18px 18px;
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 154px 52px;
  grid-template-areas:
    'rail work'
    'support support'
    'ticker ticker';
  gap: 14px;
  align-items: stretch;
  pointer-events: auto;
  z-index: 1;
  overflow: hidden;
}

#menuScreen .menuRail {
  border-radius: 0;
  border: 2px solid #5c2aa8;
  background: linear-gradient(180deg, #250043 0%, #130028 100%);
  box-shadow: none;
  padding: 14px;
  gap: 8px;
  min-height: 0;
  height: auto;
  max-height: none;
}

#menuScreen .menuRail::before,
#menuScreen .menuRail::after {
  display: none;
}

#menuScreen .brandLogo {
  width: min(188px, 100%);
  margin: 0 0 10px;
  filter: drop-shadow(0 6px 14px #0009);
}

#menuScreen .menuTabRow {
  gap: 8px;
}

#menuScreen .menuTabRow:first-of-type {
  grid-template-columns: 1fr;
}

#menuScreen .menuTabRowBottom {
  margin-top: auto;
  grid-template-columns: 1fr;
  gap: 6px;
}

#menuScreen .menuTab {
  min-height: 54px;
  border-radius: 0;
  border: 2px solid #2e3e74;
  background: linear-gradient(180deg, #1f274c 0%, #1a2143 100%);
  color: #f5f8ff;
  font-size: 1.04rem;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  box-shadow: none;
  justify-content: flex-start;
  text-align: left;
  padding-inline: 16px;
  position: relative;
}

#menuScreen .menuTab.active {
  color: #ffffff;
  border-color: #ffffffc7;
  box-shadow: none;
}

#menuScreen #tabCasualBtn,
#menuScreen #tabCompetitiveBtn,
#menuScreen #tabPrivateBtn {
  color: #ffffff;
  border-color: #38538f;
}

#menuScreen #tabCasualBtn {
  background:
    linear-gradient(115deg, #ffffff26 72%, #ffffff00 73%),
    linear-gradient(90deg, #ff6f00 0%, #ff3f39 100%);
}

#menuScreen #tabCompetitiveBtn {
  background:
    linear-gradient(115deg, #ffffff26 72%, #ffffff00 73%),
    linear-gradient(90deg, #a700ff 0%, #ff2f8e 100%);
}

#menuScreen #tabPrivateBtn {
  background:
    linear-gradient(115deg, #ffffff26 72%, #ffffff00 73%),
    linear-gradient(90deg, #00a6d6 0%, #1a64ff 100%);
}

#menuScreen #tabCasualBtn:not(.active),
#menuScreen #tabCompetitiveBtn:not(.active),
#menuScreen #tabPrivateBtn:not(.active) {
  filter: saturate(0.94) brightness(0.9);
}

#menuScreen #tabCasualBtn.active,
#menuScreen #tabCompetitiveBtn.active,
#menuScreen #tabPrivateBtn.active {
  border-color: #ffe8c9;
  box-shadow:
    inset 0 0 0 2px #fff1e0,
    0 0 0 1px #ffffff59;
  filter: none;
}

#menuScreen #tabPrivateBtn.privateLobbyPartyFlash {
  animation: privateLobbyPartyFlash 900ms ease-in-out infinite;
  box-shadow:
    inset 0 0 0 2px #ffffff,
    0 0 18px #5bd7ffcc;
}

@keyframes privateLobbyPartyFlash {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.35);
  }
}

#menuScreen .menuTabRow:first-of-type .menuTab,
#menuScreen #tabPrivateBtn {
  min-height: 52px;
  font-size: 1.12rem;
}

#menuScreen .menuTabRow:nth-of-type(3) .menuTab {
  min-height: 44px;
  font-size: 0.9rem;
  justify-content: center;
  text-align: center;
  padding-inline: 8px;
}

#menuScreen .menuTabRow:nth-of-type(2) .menuTab {
  min-height: 44px;
  font-size: 0.9rem;
  justify-content: center;
  text-align: center;
  padding-inline: 8px;
}

#menuScreen .menuTabRow:nth-of-type(4) .menuTab {
  min-height: 40px;
  font-size: 0.88rem;
  justify-content: center;
  text-align: center;
  padding-inline: 8px;
}

#menuScreen .menuTabRowBottom .menuTab {
  min-height: 42px;
  font-size: 0.96rem;
  justify-content: center;
  text-align: center;
  padding-inline: 8px;
}

#menuScreen .menuTabRow:nth-of-type(2) .menuTab.showControllerActionPrompt,
#menuScreen .menuTabRow:nth-of-type(3) .menuTab.showControllerActionPrompt,
#menuScreen .menuTabRow:nth-of-type(4) .menuTab.showControllerActionPrompt,
#menuScreen .menuTabRowBottom .menuTab.showControllerActionPrompt {
  padding-left: 12px;
  padding-right: 12px;
}

#menuScreen .menuTabRow:nth-of-type(2) .menuTab.showControllerActionPrompt::before,
#menuScreen .menuTabRow:nth-of-type(3) .menuTab.showControllerActionPrompt::before,
#menuScreen .menuTabRow:nth-of-type(4) .menuTab.showControllerActionPrompt::before,
#menuScreen .menuTabRowBottom .menuTab.showControllerActionPrompt::before {
  right: 8px;
}

#menuScreen .menuCard {
  border-radius: 0;
  border: 2px solid #2d4d9c;
  background: linear-gradient(180deg, #273373 0%, #202d67 100%);
  box-shadow: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

#menuScreen .menuWork {
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#menuScreen .menuCard::before,
#menuScreen .menuCard::after {
  display: none;
}

#menuScreen .menuPanel.active {
  margin: 0;
  padding-right: 0;
  animation: none;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

#menuScreen .menuPanel.active > * {
  animation: none;
  opacity: 1;
}

#menuScreen .menuPanel.active .modeGrid .modeCard,
#menuScreen .menuPanel.active .smallChoiceRow .choiceBtn,
#menuScreen .menuPanel.active .actions > button,
#menuScreen .menuPanel.active .actions > label,
#menuScreen .menuPanel.active .actions > select {
  animation: none;
  opacity: 1;
}

#menuScreen .menuPanel h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen .menuPanel .tag {
  margin: 0;
  color: #d2d9ff;
  font-size: 0.98rem;
}

#menuScreen .competitiveRankSummary {
  margin-top: 6px;
  margin-bottom: 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#menuScreen .rankChip {
  min-height: 150px;
  border-radius: 0;
  border: 2px solid #3667bb;
  background: linear-gradient(180deg, #132a5e 0%, #0f224f 100%);
  padding: 28px 112px 24px 26px;
}

#menuScreen .rankChipTop {
  display: block;
}

#menuScreen .rankChipIcon {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 96px;
  height: 108px;
  flex-basis: 96px;
  transform: translateY(-50%);
}

#menuScreen .rankChipIcon.noSubRank {
  width: 82px;
  flex-basis: 82px;
}

#menuScreen .rankTierIcon {
  width: 82px;
  height: 82px;
}

#menuScreen .rankSubIcon {
  width: 18px;
  height: 86px;
  border-width: 4px;
  padding: 4px 0;
  box-shadow:
    inset 0 2px 0 color-mix(in srgb, var(--rank-tint-bright) 82%, #ffffff 18%),
    0 0 10px color-mix(in srgb, var(--rank-tint) 58%, transparent);
}

#menuScreen .rankSubDot {
  width: 12px;
  height: 12px;
  border-width: 3px;
}

#menuScreen .rankChipLabel {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  color: #a6c8ff;
}

#menuScreen .rankChipValue {
  margin-top: 16px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2.7rem;
  letter-spacing: 0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #f4f8ff;
}

#menuScreen .rankChipHint {
  margin-top: 14px;
  font-size: 0.98rem;
  color: #b9cff2;
  letter-spacing: 0.02em;
}

#menuScreen .rankedModeBadge {
  right: 10px;
  top: 8px;
  min-height: 30px;
  padding: 3px 11px 3px 8px;
}

#menuScreen .rankedModeBadgeText {
  font-size: 1.05rem;
}

#menuScreen .rankedModeBadgeIcon {
  width: 31px;
  height: 21px;
  flex: 0 0 31px;
}

#menuScreen .rankedModeBadgeIcon.noSubRank {
  width: 19px;
  flex-basis: 19px;
}

#menuScreen .matchPanel .menuMatchStage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 294px minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}

#menuScreen .matchPanel .menuModeRail,
#menuScreen .matchPanel .menuMatchConfig {
  min-height: 0;
  overflow: auto;
}

#menuScreen .matchPanel .menuMatchConfig {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#menuScreen .matchPanel .modeGrid.modeTabs {
  margin-top: 0;
  grid-template-columns: 1fr;
  gap: 10px;
  padding-inline: 0;
}

#menuScreen .matchPanel .modeCard.modeTabBtn {
  min-height: 130px;
  border-radius: 0;
  border: 2px solid #7c4db8;
  background: linear-gradient(180deg, #5f1289 0%, #4f0f70 100%);
  font-size: 2.2rem;
  line-height: 0.95;
  text-transform: uppercase;
}

#menuScreen .matchPanel .modeCard.modeTabBtn.active {
  border-color: #d7a4ff;
  background: linear-gradient(180deg, #7420a6 0%, #5e1687 100%);
}

#menuScreen .matchPanel .queueCard {
  margin: 0;
  border-radius: 0;
  border: 2px solid #3470dc;
  background: linear-gradient(180deg, #1d2f73 0%, #16295f 100%);
  box-shadow: none;
  padding: 12px;
}

#menuScreen .matchPanel .queueCard::before,
#menuScreen .matchPanel .queueCard::after {
  display: none;
}

#menuScreen .matchPanel .queueTitle {
  margin: 0 0 8px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: none;
}

#menuScreen .matchPanel .smallChoiceRow {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#menuScreen .matchPanel .choiceBtn {
  min-height: 56px;
  border-radius: 0;
  border: 2px solid #2a61b9;
  background: linear-gradient(90deg, #1190c8 0%, #1671df 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen .matchPanel .choiceBtn.active {
  border-color: #ffd6b5;
  background: linear-gradient(90deg, #ff6f00 0%, #ff3f39 100%);
}

#menuScreen .matchPanel .actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

#menuScreen .matchPanel .actions .primary {
  min-width: 180px;
  min-height: 58px;
  border-radius: 0;
  border: 2px solid #ffd3ac;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate {
  gap: 10px;
}

#menuScreen #panelPrivate .privateEntryActions {
  margin-top: 2px;
  gap: 8px;
}

#menuScreen #panelPrivate .privateEntryActions .choiceBtn {
  min-height: 56px;
  border-radius: 0;
  border: 2px solid #2f61b9;
  background: linear-gradient(180deg, #1f366f 0%, #1a2f5d 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate .privateEntryActions .choiceBtn.active {
  border-color: #c5ddff;
  background: linear-gradient(180deg, #35589b 0%, #2d4a82 100%);
}

#menuScreen #panelPrivate .privateEntryCard {
  border-radius: 0;
  border: 2px solid #3466bd;
  background: linear-gradient(180deg, #13265a 0%, #0f1f4d 100%);
  box-shadow: none;
}

#menuScreen #panelPrivate #privateCreateCard > .grid.two {
  align-items: start;
}

#menuScreen #panelPrivate .privateFieldLabel {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c4dbff;
}

#menuScreen #panelPrivate .privateCreateToggleRow {
  margin-top: 0;
  gap: 8px;
}

#menuScreen #panelPrivate .privateCreateToggleRow .choiceBtn {
  min-height: 54px;
  border-radius: 0;
  border: 2px solid #2f61b9;
  background: linear-gradient(90deg, #1190c8 0%, #1671df 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate .privateCreateToggleRow .choiceBtn.active {
  border-color: #ffd6b5;
  background: linear-gradient(90deg, #ff6f00 0%, #ff3f39 100%);
}

#menuScreen #panelPrivate .privateCreateToggleRow .privateQueueToggleBtn {
  min-height: 52px;
  font-size: 1.36rem;
}

#menuScreen #panelPrivate .privateCreateToggleField {
  gap: 6px;
  align-content: start;
  align-self: start;
}

#menuScreen #panelPrivate .privateRoleToggleRow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#menuScreen #panelPrivate .privateRoleToggleRow .privateRoleToggleBtn {
  min-height: 50px;
  font-size: 1.28rem;
}

#menuScreen #panelPrivate #privateCreateRoleSelect,
#menuScreen #panelPrivate #privateRoleSelect,
#menuScreen #panelPrivate #privateCodeInput,
#menuScreen #panelPrivate #privateLobbyModeInput,
#menuScreen #panelPrivate #privateLobbyTeamSizeInput,
#menuScreen #panelPrivate #privateBotSelect,
#menuScreen #panelPrivate #privateLobbyOnimoFirstToInput,
#menuScreen #panelPrivate #privateLobbyOniballMinutesInput,
#menuScreen #panelPrivate #privateLobbySeriesBestOfInput,
#menuScreen #panelPrivate #privateLobbyTeam0NameInput,
#menuScreen #panelPrivate #privateLobbyTeam1NameInput {
  border-radius: 0;
  border: 2px solid #315ca5;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
  color: #eaf3ff;
}

#menuScreen #panelPrivate #createPrivateBtn,
#menuScreen #panelPrivate #joinPrivateBtn,
#menuScreen #panelPrivate #startPrivateMatchBtn,
#menuScreen #panelPrivate #privateForceStartMatchBtn {
  border-radius: 0;
  border: 2px solid #ffd3ac;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate #privateRandomTeamsBtn,
#menuScreen #panelPrivate #leavePrivateBtn,
#menuScreen #panelPrivate #addPrivateBotBtn {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate .privateLobbyPanel,
#menuScreen #panelPrivate .privateLobbyCard,
#menuScreen #panelPrivate .privateSettingsShell,
#menuScreen #panelPrivate .privateSettingsPanel,
#menuScreen #panelPrivate .privateLobbySummaryStrip {
  border-radius: 0;
}

.privateOcsLoading {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 42px 18px;
  border: 2px solid #ffffff55;
  background: linear-gradient(180deg, #102143 0%, #070d1c 100%);
  text-align: center;
}

.privateOcsLoading.hidden {
  display: none;
}

.privateOcsLoading img {
  width: min(240px, 64vw);
  max-height: 92px;
  object-fit: contain;
}

.privateOcsLoading strong {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #f8fbff;
}

.privateOcsLoading span {
  color: #b9c7df;
  font-size: 1.08rem;
}

#menuScreen #panelPrivate #privateLobbyRoom {
  margin-top: 10px;
  padding: 14px;
  border: 2px solid #3567be;
  background: linear-gradient(180deg, #102043 0%, #0b1630 100%);
  box-shadow: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyHeader {
  margin-bottom: 12px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyGrid {
  gap: 12px;
  align-items: start;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyCard {
  border: 2px solid #335ea9;
  background: linear-gradient(180deg, #112756 0%, #0d1f47 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyCard > h3 {
  margin: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f3f8ff;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyCodeLabel {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.28rem;
  letter-spacing: 0.07em;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyCodeControls {
  gap: 10px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyCodeValue {
  min-height: 50px;
  border: 2px solid #3562ad;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.08em;
}

#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyCopyCodeBtn {
  min-height: 50px;
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.18rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate #privateLobbySummary {
  margin: 0 0 2px;
  font-size: 1.1rem;
  color: #d1def8;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbySummaryStrip {
  margin: 0;
  border: 2px solid #3562ad;
  background: linear-gradient(90deg, #182d5d 0%, #16274e 74%, #3b2815 100%);
  color: #dceaff;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsShell {
  border: 2px solid #335da7;
  background: linear-gradient(180deg, #10224a 0%, #0d1b3e 100%);
  padding: 10px;
  box-shadow: none;
  max-height: none;
  overflow: visible;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsTabs {
  gap: 8px;
  margin-bottom: 10px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsTabs .settingsTabBtn {
  min-height: 56px;
  border-radius: 0;
  border: 2px solid #2f61b9;
  background: linear-gradient(180deg, #1f366f 0%, #1a2f5d 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsTabs .settingsTabBtn:hover {
  transform: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsTabs .settingsTabBtn.active {
  border-color: #c4dcff;
  background: linear-gradient(180deg, #365a9d 0%, #2e4c84 100%);
  box-shadow: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsPanel {
  border: 2px solid #315da8;
  background: linear-gradient(180deg, #132855 0%, #0f2249 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsPanel label,
#menuScreen #panelPrivate #privateLobbyRoom .privateBotPicker,
#menuScreen #panelPrivate #privateLobbyRoom .privateBotControlsCopy strong {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.04em;
  color: #d2e3ff;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateSettingsPanel label {
  font-size: 1.35rem;
  text-transform: uppercase;
  gap: 6px;
}

#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyModeInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyTeamSizeInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateBotSelect,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyOnimoFirstToInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyOniballMinutesInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyTeam0NameInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyTeam1NameInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyTeam0ColorInput,
#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyTeam1ColorInput,
#menuScreen #panelPrivate #privateLobbyRoom .privateMemberControls select {
  min-height: 58px;
  border-radius: 0;
  border: 2px solid #3562ad;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
  color: #eef5ff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateBotControls {
  border: 2px solid #315ca8;
  background: linear-gradient(180deg, #132852 0%, #102145 100%);
  padding: 12px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateBotControlsCopy .tag {
  color: #bcd2f4;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

#menuScreen #panelPrivate #privateLobbyRoom #addPrivateBotBtn {
  min-height: 56px;
  font-size: 1.55rem;
}

#menuScreen #panelPrivate #privateLobbyRoom #privateTeamVisualsGroup {
  border: 2px solid #315ca8;
  background: linear-gradient(180deg, #122650 0%, #102145 100%);
  padding: 10px;
}

#menuScreen #panelPrivate #privateLobbyRoom #privateTeamVisualsGroup label {
  font-size: 1.1rem;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateLobbyMembers {
  max-height: min(56vh, 650px);
  padding-right: 2px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterBoard,
#menuScreen #panelPrivate #privateLobbyRoom .privateRosterStaffBoard {
  gap: 12px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterZone {
  border: 2px solid #335fa9;
  border-radius: 0;
  background: linear-gradient(180deg, #102651 0%, #0e2148 100%);
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterZone.team0 {
  border-color: var(--private-team-color, #4c8eef);
  box-shadow: inset 5px 0 0 var(--private-team-color, #4c8eef);
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterZone.team1 {
  border-color: var(--private-team-color, #f09043);
  box-shadow: inset 5px 0 0 var(--private-team-color, #f09043);
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterZoneHeader h3 {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--private-team-color, #f3f8ff);
}

#menuScreen #panelPrivate #privateLobbyRoom .privateRosterZoneHeader span {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  color: #d5e5ff;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateMemberRow {
  border: 2px solid #345fa8;
  background: linear-gradient(180deg, #152b59 0%, #12254e 100%);
  border-radius: 0;
  padding: 10px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateMemberName {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.55rem;
  letter-spacing: 0.03em;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateMemberControls {
  gap: 10px;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateMemberControls .secondary {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelPrivate #privateLobbyRoom #privateLobbySettingsReadonly {
  margin-top: 10px;
  padding: 8px 10px;
  border: 2px solid #315ca8;
  background: linear-gradient(90deg, #14295a 0%, #102146 100%);
  color: #bed4f5;
  font-size: 1rem;
}

#menuScreen #panelPrivate #privateLobbyRoom .privateStickyActions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #315ca8;
  background: linear-gradient(180deg, #0f1e4100 0%, #0f1e41f0 28%, #0f1e41 100%);
}

#menuScreen #panelPrivate #privateLobbyRoom #privateLobbyInfo {
  margin-top: 8px;
  color: #c6d9f7;
  font-size: 1.02rem;
}

#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby {
  border-color: #f4f7ff;
  background:
    linear-gradient(180deg, #08152d 0%, #0b1021 100%);
}

#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby .privateLobbyGrid {
  grid-template-columns: minmax(0, 1fr);
}

#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby .privateLobbyCodeRow,
#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby .privateSettingsTabs,
#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby #privateLobbySummary {
  display: none;
}

#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby .privateLobbyCard {
  border-color: #ffffff44;
  background:
    linear-gradient(180deg, #102143 0%, #090f21 100%);
}

#menuScreen #panelPrivate #privateLobbyRoom.officialOcsLobby .privateLobbySummaryStrip {
  border-color: #ffffff55;
  background:
    linear-gradient(180deg, #142246 0%, #090e1d 100%);
  padding: 18px;
}

.ocsLobbyHero {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.ocsLobbyLogo {
  width: min(280px, 70vw);
  max-height: 96px;
  object-fit: contain;
}

.ocsLobbyMatchTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: 0.92;
  text-transform: uppercase;
  color: #f8fbff;
}

.ocsLobbyMatchTitle strong {
  color: #f6b46f;
  font-size: 0.72em;
}

.ocsLobbyMeta {
  margin: 0;
  color: #b9c7df;
  font-size: 1.05rem;
}

.ocsLobbyStatusLine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.ocsLobbyStatusPill {
  border: 1px solid #ffffff44;
  background: #ffffff12;
  color: #eff6ff;
  padding: 6px 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.ocsLobbyStatusPill.waiting {
  border-color: #f6b46f88;
  color: #ffe0bd;
}

.ocsLobbyBoard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ocsLobbyTeam {
  border: 2px solid #ffffff2f;
  background: #050b19aa;
  padding: 12px;
}

.ocsLobbyTeam h3 {
  margin: 0 0 10px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  text-transform: uppercase;
  color: #ffffff;
}

.ocsLobbyRosterList {
  display: grid;
  gap: 8px;
}

.ocsLobbyPlayerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #ffffff25;
  background: #102145;
  padding: 10px;
}

.ocsLobbyPlayerRow:has(.ocsLobbyReadyBtn) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.ocsLobbyPlayerRow.ready {
  border-color: #54d48a;
}

.ocsLobbyPlayerRow.waiting {
  border-color: #f6b46f66;
}

.ocsLobbyPlayerName {
  min-width: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  color: #f7fbff;
}

.ocsLobbyPlayerStatus {
  color: #c4d2ea;
  font-weight: 800;
  text-transform: uppercase;
}

.ocsLobbyReadyBtn {
  min-height: 42px;
}

.ocsLobbyRosterEmpty,
.ocsLobbyOfficials {
  margin: 0;
  color: #aebbd1;
}

.ocsLobbyOfficials {
  margin-top: 12px;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
}

@media (max-width: 760px) {
  .ocsLobbyBoard {
    grid-template-columns: 1fr;
  }

  .ocsLobbyPlayerRow,
  .ocsLobbyPlayerRow:has(.ocsLobbyReadyBtn) {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

#menuScreen #panelOnimo.active {
  overflow: hidden;
}

#menuScreen #panelOnimo > h2,
#menuScreen #panelOnimo > .tag {
  flex: 0 0 auto;
}

#menuScreen #panelOnimo .onimoScaleViewport {
  --onimo-scale: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-gutter: stable both-edges;
}

#menuScreen #panelOnimo .onimoLayout {
  margin-top: 8px;
  width: 1320px;
  min-width: 1320px;
  min-height: 760px;
  grid-template-columns: minmax(0, 1.02fr) minmax(470px, 0.98fr);
  gap: 12px;
  zoom: var(--onimo-scale);
  transform-origin: top left;
}

@supports not (zoom: 1) {
  #menuScreen #panelOnimo .onimoLayout {
    transform: scale(var(--onimo-scale));
  }
}

#menuScreen #panelOnimo .onimoColorCard,
#menuScreen #panelOnimo .onimoPreviewCard {
  border-radius: 0;
  border: 2px solid #2f62bd;
  background:
    linear-gradient(180deg, #13265a 0%, #0f1f4d 100%);
  box-shadow: none;
}

#menuScreen #panelOnimo .onimoColorHead {
  border-bottom-color: #335ba8;
}

#menuScreen #panelOnimo .onimoPartTabs {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

#menuScreen #panelOnimo .onimoPartTab {
  min-height: 52px;
  border-radius: 0;
  border: 2px solid #3159a2;
  background: linear-gradient(180deg, #2d3d71 0%, #2a3666 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelOnimo .onimoPartTab.active {
  border-color: #beddff;
  background: linear-gradient(180deg, #345795 0%, #2d4d86 100%);
  box-shadow:
    inset 0 0 0 1px #dcebff85,
    0 0 12px #5e9eff45;
}

#menuScreen #panelOnimo .onimoInventoryPanel {
  border-radius: 0;
  border: 2px solid #3461ad;
  background: linear-gradient(180deg, #142a5c 0%, #10224f 100%);
}

#menuScreen #panelOnimo .onimoOwnershipFilter {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #223869 0%, #1b2f5b 100%);
}

#menuScreen #panelOnimo .onimoOwnershipFilter .onimoFilterBtn {
  border-radius: 0;
}

#menuScreen #panelOnimo .onimoSwatchGrid {
  border-radius: 0;
  border: 2px solid #355fa9;
}

#menuScreen #panelOnimo .onimoCatalogSelectionMeta {
  border-radius: 0;
  border: 2px solid #355fa9;
}

#menuScreen #panelOnimo .onimoCustomiseActions {
  border-top-color: #355fa9;
}

#menuScreen #panelOnimo .onimoCustomiseActions > button {
  border-radius: 0;
}

#menuScreen #panelOnimo .onimoPreviewCardLarge #onimoPreviewCanvas {
  min-height: 320px;
  border-radius: 0;
}

#menuScreen #panelOnimo .onimoPreviewCard .tag {
  color: #cad8ff;
}

#menuScreen .teamPanel {
  gap: 10px;
}

#menuScreen .teamPanel #teamInlineStatus {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.96rem;
}

#menuScreen .teamPanel #teamIdleActions {
  margin-top: 4px;
  gap: 10px;
}

#menuScreen .teamPanel #teamIdleActions > label,
#menuScreen .teamPanel #teamIdleActions .teamJoinRow {
  border: 2px solid #315ead;
  border-radius: 0;
  background: linear-gradient(180deg, #142a5c 0%, #10224f 100%);
  padding: 8px;
}

#menuScreen .teamPanel #teamIdleActions > button {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen .teamPanel .teamJoinRow {
  gap: 8px;
  align-items: stretch;
}

#menuScreen .teamPanel .teamJoinRow > button {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.04rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-width: 88px;
}

#menuScreen .teamPanel .teamJoinRow > input,
#menuScreen .teamPanel #teamIdleActions > label > input,
#menuScreen .teamPanel .teamInviteRow input,
#menuScreen .teamPanel .teamBrandRow input {
  border-radius: 0;
  border: 2px solid #3563ae;
  background: linear-gradient(90deg, #142a5a 0%, #112248 100%);
  color: #eaf3ff;
}

#menuScreen .teamPanel .teamJoinRow > input::placeholder,
#menuScreen .teamPanel #teamIdleActions > label > input::placeholder,
#menuScreen .teamPanel .teamInviteRow input::placeholder,
#menuScreen .teamPanel .teamBrandRow input::placeholder {
  color: #9db7dc;
}

#menuScreen .teamPanel .teamActiveSection {
  margin-top: 4px;
  border-radius: 0;
  border: 2px solid #3463b1;
  background: linear-gradient(180deg, #172c61 0%, #12254f 100%);
  box-shadow: none;
}

#menuScreen .teamPanel .teamDashboardHeader {
  border-radius: 0;
  border-bottom: 2px solid #3463b1;
  padding: 12px 16px 11px;
  box-shadow: none;
}

#menuScreen .teamPanel .teamDashboardHeader h3 {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 0.9;
}

#menuScreen .teamPanel .teamHeaderTag {
  margin-top: 2px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#menuScreen .teamPanel .teamHeaderMeta {
  margin-top: 2px;
  font-size: 1.02rem;
  color: #d5e3ff;
}

#menuScreen .teamPanel .teamDashboardLayout {
  gap: 12px;
  padding: 12px;
  min-height: 0;
}

#menuScreen .teamPanel .teamRosterCard,
#menuScreen .teamPanel .teamManageCard {
  border-radius: 0;
  border: 2px solid #355fa8;
  background: linear-gradient(180deg, #122754 0%, #0f2148 100%);
  box-shadow: none;
}

#menuScreen .teamPanel .teamRosterCard h3,
#menuScreen .teamPanel .teamManageCard h3 {
  margin-bottom: 8px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen .teamPanel .teamManageSection h4 {
  margin-bottom: 4px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.18rem;
  letter-spacing: 0.06em;
  color: #a9caf8;
}

#menuScreen .teamPanel .teamCodeRow {
  padding: 7px 8px;
  border: 2px solid #315ca5;
  border-radius: 0;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
}

#menuScreen .teamPanel #teamCodeLabel {
  color: #f4f8ff;
}

#menuScreen .teamPanel .teamCodeRow > button,
#menuScreen .teamPanel .teamInviteRow button,
#menuScreen .teamPanel #teamSaveBrandBtn {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen .teamPanel .teamInviteRow {
  margin-top: 0;
}

#menuScreen .teamPanel .teamBrandRow {
  margin-top: 0;
  gap: 8px;
  align-items: end;
}

#menuScreen .teamPanel .teamField,
#menuScreen .teamPanel .teamColorField {
  gap: 3px;
}

#menuScreen .teamPanel .teamField > span,
#menuScreen .teamPanel .teamColorField > span {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #a9caf8;
}

#menuScreen .teamPanel .teamColorField input[type='color'] {
  border-radius: 0;
  border: 2px solid #3563ae;
  background: #14295a;
  height: 48px;
  padding: 2px;
}

#menuScreen .teamPanel .teamEditHint {
  margin-top: 8px;
  border-radius: 0;
  border: 2px solid #315ca5;
  background: linear-gradient(180deg, #132753 0%, #102249 100%);
  padding: 8px 10px;
  color: #bbd1f2;
}

#menuScreen .teamPanel .teamManageCard .actions {
  margin-top: 10px;
  gap: 8px;
}

#menuScreen .teamPanel .teamManageCard .actions button {
  border-radius: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-height: 58px;
}

#menuScreen .teamPanel .teamManageCard .actions .secondary {
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
}

#menuScreen .teamPanel .teamManageCard .actions .danger {
  border: 2px solid #ffd0ad;
  background: linear-gradient(90deg, #ff6a43 0%, #ff4545 100%);
}

#menuScreen #panelParty {
  gap: 10px;
}

#menuScreen #panelParty #partySummary {
  margin: 0;
  font-size: 1.08rem;
  color: #d9e8ff;
}

#menuScreen #panelParty #partyIdleActions,
#menuScreen #panelParty #partyActiveSection {
  margin-top: 2px;
  border: 2px solid #345fa8;
  border-radius: 0;
  background: linear-gradient(180deg, #122754 0%, #0f2148 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelParty #partyIdleActions {
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

#menuScreen #panelParty #partyIdleActions > button,
#menuScreen #panelParty #partyJoinCodeBtn,
#menuScreen #panelParty #partyInviteBtn,
#menuScreen #panelParty #partyRefreshCodeBtn,
#menuScreen #panelParty #partyLeaveBtn {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelParty #partyCreateBtn,
#menuScreen #panelParty #partyDisbandBtn {
  border-radius: 0;
  border: 2px solid #ffd3ac;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.28rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#menuScreen #panelParty #partyJoinCodeInput,
#menuScreen #panelParty #partyInviteUsernameInput {
  border-radius: 0;
  border: 2px solid #3563ae;
  background: linear-gradient(90deg, #142a5a 0%, #112248 100%);
  color: #eaf3ff;
  min-height: 50px;
}

#menuScreen #panelParty #partyJoinCodeInput::placeholder,
#menuScreen #panelParty #partyInviteUsernameInput::placeholder {
  color: #9db7dc;
}

#menuScreen #panelParty .partyCodeRow {
  margin: 0;
  border: 2px solid #315ca5;
  border-radius: 0;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
  padding: 8px 10px;
}

#menuScreen #panelParty .partyCodeRow span {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.42rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8f2ff;
}

#menuScreen #panelParty #partyActiveSection .partyInviteRow {
  margin-top: 10px;
}

#menuScreen #panelParty .privateLobbyMembers {
  margin-top: 10px;
  max-height: min(40vh, 420px);
  border: 2px solid #315ca5;
  border-radius: 0;
  padding: 8px;
  background: linear-gradient(180deg, #11244e 0%, #0f2148 100%);
}

#menuScreen #panelParty .privateMemberRow {
  border: 2px solid #345fa8;
  border-radius: 0;
  background: linear-gradient(180deg, #152b59 0%, #12254e 100%);
}

#menuScreen #panelParty .privateMemberName {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0.03em;
}

#menuScreen #panelParty #partyActiveSection .actions {
  margin-top: 10px;
  gap: 8px;
}

#menuScreen #panelStore {
  gap: 10px;
}

#menuScreen #panelStore .onimoStoreLead {
  margin: 0;
  border: 2px solid #325ca7;
  border-radius: 0;
  background: linear-gradient(90deg, #172e63 0%, #1a3268 72%, #3a2816 100%);
  padding: 10px 12px;
  align-items: center;
}

#menuScreen #panelStore #onimoDevBillingCard {
  border-radius: 0;
  border: 2px solid #3565bc;
  background: linear-gradient(180deg, #10224a 0%, #0c1837 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelStore .onimoStoreSectionsGrid {
  gap: 12px;
}

#menuScreen #panelStore .onimoStoreSection {
  border: 2px solid #3562ad;
  border-radius: 0;
  background: linear-gradient(180deg, #132855 0%, #0f2148 100%);
  box-shadow: none;
  padding: 12px;
}

#menuScreen #panelStore .onimoStoreSectionHead h4 {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f8ff;
}

#menuScreen #panelStore .onimoStoreSectionHead .tag {
  font-size: 1rem;
  color: #c6d8f6;
}

#menuScreen #panelStore .onimoStoreBtn {
  border-radius: 0;
  border: 2px solid #3a67b5;
  min-height: 196px;
  max-width: 208px;
  box-shadow: none;
}

#menuScreen #panelStore .onimoStoreBtn.is-active-plan {
  border-color: #ffd4a8;
  box-shadow: inset 0 0 0 2px #ffe7cc8a;
}

#menuScreen #panelStore .onimoStoreBenefits {
  border-radius: 0;
  border: 2px solid #315ca5;
  background: linear-gradient(180deg, #122650 0%, #102145 100%);
  padding: 10px;
}

#menuScreen #panelStore .onimoStoreManageActions {
  margin-top: 2px;
}

#menuScreen #panelStore .onimoStoreManageActions .onimoDevBillingBtn,
#menuScreen #panelStore #onimoEmbeddedCheckoutCloseBtn {
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#menuScreen #panelStore .onimoEmbeddedCheckoutPanel,
#menuScreen #panelStore .onimoEmbeddedCheckoutMount {
  border-radius: 0;
  border-width: 2px;
}

#menuScreen #panelSettings {
  gap: 10px;
}

#menuScreen #panelSettings .settingsShell {
  border-radius: 0;
  border: 2px solid #3565bc;
  background: linear-gradient(180deg, #132857 0%, #0f2148 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelSettings .settingsShell::before,
#menuScreen #panelSettings .settingsShell::after {
  display: none;
}

#menuScreen #panelSettings .settingsTabs {
  margin-bottom: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

#menuScreen #panelSettings .settingsTabBtn {
  min-height: 56px;
  border-radius: 0;
  border: 2px solid #2f61b9;
  background: linear-gradient(180deg, #1f366f 0%, #1a2f5d 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
}

#menuScreen #panelSettings .settingsTabBtn.active {
  border-color: #c4dcff;
  background: linear-gradient(180deg, #365a9d 0%, #2e4c84 100%);
  box-shadow: inset 0 0 0 1px #dcebff85;
}

#menuScreen #panelSettings .settingsSubpanel {
  border-radius: 0;
  border: 2px solid #315da8;
  background: linear-gradient(180deg, #132855 0%, #0f2249 100%);
  padding: 12px;
  box-shadow: none;
}

#menuScreen #panelSettings .settingsSubpanel > .grid,
#menuScreen #panelSettings .settingsSubpanel > .actions,
#menuScreen #panelSettings .settingsSubpanel > .collisionLegend {
  border-radius: 0;
  border: 2px solid #315ca8;
  background: linear-gradient(180deg, #122650 0%, #102145 100%);
  box-shadow: none;
  padding: 10px 12px;
}

#menuScreen #panelSettings input:not([type='checkbox']):not([type='range']),
#menuScreen #panelSettings select {
  border-radius: 0;
  border: 2px solid #3562ad;
  background: linear-gradient(90deg, #14295a 0%, #112145 100%);
  color: #eef5ff;
}

#menuScreen #panelSettings .toggleRow {
  min-height: 48px;
}

#menuScreen #panelSettings #saveSettingsBtn,
#menuScreen #panelSettings #resetSettingsBtn {
  border-radius: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#menuScreen #panelSettings #saveSettingsBtn {
  border: 2px solid #ffd3ac;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-size: 1.45rem;
}

#menuScreen #panelSettings #resetSettingsBtn {
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
  font-size: 1.1rem;
}

#menuScreen #panelStats {
  gap: 10px;
}

#menuScreen #panelStats .careerStatsGrid {
  margin-top: 2px;
  gap: 12px;
}

#menuScreen #panelStats .careerStatsCard {
  border: 2px solid #355fa8;
  border-radius: 0;
  background: linear-gradient(180deg, #122754 0%, #0f2148 100%);
  box-shadow: none;
  padding: 12px;
}

#menuScreen #panelStats .careerStatsCard h3 {
  margin: 0 0 10px;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #f3f8ff;
}

#menuScreen #panelStats .careerStatsRows {
  margin-top: 0;
  gap: 8px;
}

#menuScreen #panelStats .careerStatRow {
  min-height: 58px;
  border: 2px solid #345fa8;
  border-radius: 0;
  background: linear-gradient(90deg, #14295a 0%, #102146 100%);
  padding: 8px 12px;
}

#menuScreen #panelStats .careerStatRow span {
  font-size: 1.05rem;
  color: #b4c9eb;
}

#menuScreen #panelStats .careerStatRow strong {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #f0f7ff;
}

#menuScreen .teamPanel .teamRosterMembers {
  margin-top: 0;
  border: 2px solid #315ca5;
  border-radius: 0;
  padding: 8px;
  background: linear-gradient(180deg, #11244e 0%, #0f2148 100%);
}

#menuScreen .teamPanel .teamRosterMember {
  border-radius: 0;
  border-width: 2px;
  min-height: 52px;
}

#menuScreen .menuSupportRow {
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  gap: 14px;
}

#menuScreen .playerCard,
#menuScreen .menuSponsorCard {
  border-radius: 0;
  border: 2px solid #3f5cb0;
  box-shadow: none;
}

#menuScreen .playerCard {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  justify-self: stretch;
  padding: 10px 12px;
  gap: 4px;
}

#menuScreen .playerCardHeader {
  gap: 8px;
}

#menuScreen .playerCardIdentity {
  flex: 1 1 auto;
  min-width: 0;
}

#menuScreen .playerCardName {
  font-size: 1.5rem;
}

#menuScreen .playerCardTitle {
  font-size: 0.72rem;
}

#menuScreen .playerCardBadges {
  gap: 6px;
  max-width: 48%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

#menuScreen .playerCardOnipassCapsule,
#menuScreen .playerCardCreditsCapsule {
  min-height: 24px;
  padding: 3px 8px 3px 7px;
  font-size: 0.78rem;
}

#menuScreen .playerCardOnipassIcon,
#menuScreen .playerCardCreditsIcon {
  width: 13px;
  height: 13px;
}

#menuScreen .playerCardMeta {
  margin-top: 0;
  font-size: 0.92rem;
}

#menuScreen .playerCardBar {
  margin-top: 4px;
  height: 8px;
}

#menuScreen .playerCardBarFill {
  min-width: 2px;
}

#menuScreen .playerCardHint {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.15;
}

#menuScreen .menuSponsorCard {
  background: linear-gradient(180deg, #f2f3f7 0%, #d8dce9 100%);
}

#menuScreen .menuSponsorTag {
  background: #101010;
  color: #ffffff;
  border-radius: 0;
}

#menuScreen .menuTicker {
  border-radius: 0;
  border: 2px solid #20263e;
  background: #0f1118;
  align-self: end;
}

#menuScreen .menuTickerLabel {
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

#menuScreen .menuNewsTickerTrack span {
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.04em;
}

#menuScreen .gamepadMenuFocus {
  outline: 3px solid #ffffff;
  outline-offset: 1px;
}

#menuScreen .modeCard.active::after,
#menuScreen .choiceBtn.active::after,
#menuScreen .menuTab.active::after,
#menuScreen button.primary::after {
  display: none;
}

body.controller-active #menuScreen .controllerTabStrip::before,
body.controller-active #menuScreen .controllerTabStrip::after {
  opacity: 0.82;
}

.ocsJoinBtn {
  top: calc(156px + env(safe-area-inset-top));
  min-width: 128px;
  border-color: #3f8d78;
  color: #d7fff3;
  background: linear-gradient(180deg, #12392fe0 0%, #101d22eb 100%);
}

.discordServerBtn {
  top: calc(110px + env(safe-area-inset-top));
  min-width: 0;
  width: 58px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-color: #5865f2;
  color: #eef1ff;
  background: linear-gradient(180deg, #303b8ee0 0%, #151a38eb 100%);
}

.discordServerBtn::before {
  display: none;
}

.discordServerIcon {
  width: 26px;
  height: 26px;
  display: block;
}

.socialToggleBtn {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(136px + env(safe-area-inset-right));
  z-index: 21;
  pointer-events: auto;
  width: 46px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid #3a67b5;
  color: #eaf3ff;
  background: linear-gradient(180deg, #172b58e6 0%, #101d3ae8 100%);
  box-shadow:
    0 8px 20px #0007,
    inset 0 1px 0 #c9dcff24;
}

.socialToggleBtn:hover {
  transform: translateY(-1px);
  border-color: #76b2ff;
  color: #ffffff;
}

.socialToggleIcon {
  width: 23px;
  height: 23px;
  display: block;
}

.socialToggleBtn.hasBadge::after {
  content: attr(data-count);
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 1px solid #ffd3ac;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, #ff7d00 0%, #ff3f39 100%);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px #0008;
}

.socialPanel {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 22;
  pointer-events: auto;
  width: min(430px, calc(100vw - 24px));
  max-height: min(760px, calc(100vh - 88px - env(safe-area-inset-top)));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  border: 2px solid #3562ad;
  border-radius: 0;
  background: linear-gradient(180deg, #10224a 0%, #0b1732 100%);
  box-shadow:
    0 20px 50px #000b,
    inset 0 1px 0 #c9dcff18;
  padding: 12px;
}

.socialPanel.hidden {
  display: none;
}

.socialPanelHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.socialPanelHeader h2,
.socialSection h3 {
  margin: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f4f8ff;
}

.socialPanelHeader h2 {
  font-size: 2rem;
  line-height: 0.9;
}

.socialEyebrow {
  margin: 0 0 3px;
  color: #91b7f2;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.socialHeaderActions,
.socialInlineActions,
.socialAddRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.socialIconBtn {
  width: 36px;
  height: 34px;
  min-width: 0;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 0;
  border: 2px solid #3a67b5;
  background: linear-gradient(180deg, #2e4275 0%, #283763 100%);
}

.socialIconBtn svg {
  width: 18px;
  height: 18px;
}

.socialAddRow {
  align-items: stretch;
}

.socialAddRow input {
  flex: 1;
  min-width: 0;
  border-radius: 0;
  border: 2px solid #3563ae;
  background: linear-gradient(90deg, #142a5a 0%, #112248 100%);
  color: #eaf3ff;
  min-height: 44px;
}

.socialAddRow button,
.socialRow button {
  border-radius: 0;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.socialStatus {
  margin: 0;
  color: #aecaef;
}

.socialStatus[data-tone='success'] {
  color: #9dffd1;
}

.socialStatus[data-tone='error'] {
  color: #ffb4a6;
}

.socialSections {
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.socialSection {
  display: grid;
  gap: 7px;
  border: 2px solid #315ca5;
  border-radius: 0;
  background: linear-gradient(180deg, #11244e 0%, #0f2148 100%);
  padding: 9px;
}

.socialSection h3 {
  font-size: 1.35rem;
}

.socialList {
  display: grid;
  gap: 7px;
}

.socialRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  border: 2px solid #345fa8;
  border-radius: 0;
  background: linear-gradient(180deg, #152b59 0%, #12254e 100%);
  padding: 8px;
}

.socialRequestRow {
  grid-template-columns: minmax(0, 1fr) auto;
}

.socialIdentity {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.socialName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.28rem;
  letter-spacing: 0.03em;
  color: #f4f8ff;
}

.socialMeta,
.socialPending,
.socialPresence {
  color: #9db7dc;
  font-size: 0.82rem;
}

.socialPresence {
  min-width: 58px;
  text-align: right;
}

.socialPresence.online {
  color: #9dffd1;
}

.socialInlineActions button {
  min-width: 72px;
  padding: 6px 8px;
}

.socialRow .danger {
  border-color: #ffd0ad;
  background: linear-gradient(90deg, #ff6a43 0%, #ff4545 100%);
}

.staffOcsFixtureList {
  display: grid;
  gap: 10px;
  max-height: min(62vh, 620px);
  overflow: auto;
}

.staffOcsFixtureRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #ffffff18;
  background: #0c1220cc;
}

.staffOcsFixtureRow.active {
  border-color: #67d7ff;
  box-shadow: inset 3px 0 0 #67d7ff;
}

.staffOcsFixtureMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #aebbd1;
  font-size: 0.88rem;
}

.staffOcsFixtureTitle {
  font-weight: 800;
  color: #f5f8ff;
}

#menuScreen .matchPanel .controllerTabStrip::before,
#menuScreen .matchPanel .controllerTabStrip::after {
  display: none;
}

#menuScreen .menuFullscreenBtn,
#menuScreen .staffPortalBtn {
  border-radius: 0;
  border: 2px solid #3b5eaa;
  background: #1b2c5a;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#menuScreen .controllerMenuShortcuts {
  border-radius: 0;
}

#menuScreen .menuNowPlayingToast {
  border-radius: 0;
}

body.phone-ui-portrait #menuScreen .menuCardPhoneBar,
body.phone-ui-portrait #menuScreen .menuRailBackBtn {
  display: none !important;
}

body.phone-ui-portrait #menuScreen .menuLayout .menuRail,
body.phone-ui-portrait #menuScreen .menuLayout .menuWork,
body.phone-ui-portrait #menuScreen .menuLayout .menuSupportRow,
body.phone-ui-portrait #menuScreen .menuLayout .menuTicker {
  display: block !important;
}

body.phone-ui-portrait #menuScreen .menuLayout .menuSupportRow {
  display: grid !important;
}

body.phone-ui-landscape #menuScreen #panelOnimo .onimoLayout,
body.phone-ui-portrait #menuScreen #panelOnimo .onimoLayout {
  grid-template-columns: minmax(0, 1.02fr) minmax(470px, 0.98fr) !important;
}

body.phone-ui-landscape #menuScreen #panelOnimo .onimoPartTabs,
body.phone-ui-portrait #menuScreen #panelOnimo .onimoPartTabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.phone-ui-portrait #menuScreen .menuFullscreenBtn,
body.phone-ui-portrait #menuScreen .staffPortalBtn {
  display: inline-flex !important;
}

body.phone-ui-portrait #menuScreen .menuFullscreenBtn.hidden,
body.phone-ui-portrait #menuScreen .staffPortalBtn.hidden {
  display: none !important;
}

@media (max-width: 900px), (max-height: 860px) {
  #menuScreen .menuLayout,
  body.phone-ui-landscape .menuLayout,
  body.phone-ui-portrait .menuLayout {
    grid-template-columns: 272px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 154px 52px !important;
    grid-template-areas:
      'rail work'
      'support support'
      'ticker ticker' !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  #menuScreen .menuSupportRow,
  body.phone-ui-landscape .menuSupportRow {
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
  }

  #menuScreen .menuTicker,
  body.phone-ui-landscape .menuTicker {
    display: block !important;
  }
}

/* Mobile parity mode: keep desktop layout and scale the whole menu uniformly. */
body.phone-ui #menuScreen {
  overflow: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

body.phone-ui #menuScreen .menuLayout {
  --menu-utility-gutter: 112px;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  margin-top: calc(8px + env(safe-area-inset-top)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: var(--menu-design-width) !important;
  min-height: var(--menu-design-height) !important;
  height: var(--menu-design-height) !important;
  max-height: var(--menu-design-height) !important;
  transform: none !important;
  scale: 1 !important;
  zoom: var(--menu-scale);
  transform-origin: top center !important;
  grid-template-columns: 272px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 154px 52px !important;
  grid-template-areas:
    'rail work'
    'support support'
    'ticker ticker' !important;
  gap: 14px !important;
  padding: 18px calc(18px + var(--menu-utility-gutter)) 18px 18px !important;
  overflow: hidden !important;
}

body.phone-ui #menuScreen .menuLayout .menuRail,
body.phone-ui #menuScreen .menuLayout .menuWork {
  display: block !important;
}

body.phone-ui #menuScreen .menuLayout .menuRail {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
}

body.phone-ui #menuScreen .menuLayout .menuTicker {
  display: flex !important;
}

body.phone-ui #menuScreen .menuLayout .menuSupportRow {
  display: grid !important;
  grid-template-columns: 340px minmax(0, 1fr) !important;
}

body.phone-ui #menuScreen .menuSupportRow,
body.phone-ui #menuScreen .menuTicker {
  visibility: visible !important;
}

body.phone-ui #menuScreen .menuLayout .menuTabRow {
  gap: 7px !important;
}

body.phone-ui #menuScreen .menuLayout .menuTabRowBottom {
  gap: 7px !important;
}

body.phone-ui #menuScreen .menuLayout .menuTabRow:first-of-type .menuTab,
body.phone-ui #menuScreen .menuLayout #tabPrivateBtn {
  width: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

body.phone-ui #menuScreen .menuFullscreenBtn,
body.phone-ui #menuScreen .staffPortalBtn {
  display: inline-flex !important;
}

body.phone-ui #menuScreen .menuFullscreenBtn.hidden,
body.phone-ui #menuScreen .staffPortalBtn.hidden {
  display: none !important;
}

body.phone-ui #menuScreen .menuFullscreenBtn,
body.phone-ui #menuScreen .staffPortalBtn {
  right: calc(8px + env(safe-area-inset-right)) !important;
  min-width: 0;
  height: 38px;
  padding: 4px 10px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 0.78rem;
  line-height: 1;
  transform: scale(var(--menu-scale, 1));
  transform-origin: top right;
  z-index: 42;
}

body.phone-ui #menuScreen .menuFullscreenBtn {
  top: calc(8px + env(safe-area-inset-top)) !important;
  min-width: 104px;
}

body.phone-ui #menuScreen #staffPortalBtn {
  top: calc(52px + env(safe-area-inset-top)) !important;
  min-width: 84px;
}

body.phone-ui #menuScreen #discordServerBtn {
  top: calc(96px + env(safe-area-inset-top)) !important;
  width: 54px;
  min-width: 54px;
  padding: 0;
}

body.phone-ui #menuScreen #ocsJoinBtn {
  top: calc(140px + env(safe-area-inset-top)) !important;
  width: auto;
  min-width: 98px;
  max-width: 138px;
  min-height: 38px;
  height: auto;
  white-space: normal;
  text-align: center;
}

/* TV and console browsers often expose a short landscape viewport. Fit the
   complete desktop menu instead of forcing its panels to scroll internally. */
@media (min-width: 701px) and (max-height: 860px) {
  body:not(.phone-ui) #menuScreen {
    overflow: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  body:not(.phone-ui) #menuScreen .menuLayout {
    --menu-utility-gutter: 112px;
    flex: 0 0 auto !important;
    margin: 0 auto !important;
    width: var(--menu-design-width) !important;
    min-width: var(--menu-design-width) !important;
    min-height: var(--menu-design-height) !important;
    height: var(--menu-design-height) !important;
    max-height: var(--menu-design-height) !important;
    zoom: var(--menu-scale);
    transform-origin: top center !important;
    grid-template-columns: 272px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) 154px 52px !important;
    grid-template-areas:
      'rail work'
      'support support'
      'ticker ticker' !important;
    gap: 14px !important;
    padding: 18px calc(18px + var(--menu-utility-gutter)) 18px 18px !important;
    overflow: hidden !important;
  }

  body:not(.phone-ui) #menuScreen .menuFullscreenBtn,
  body:not(.phone-ui) #menuScreen .staffPortalBtn {
    transform: scale(var(--menu-scale, 1));
    transform-origin: top right;
  }
}

#menuScreen .menuUtilityRail {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 48;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 58px;
  padding: 6px;
  border: 2px solid #345fa8;
  border-radius: 0;
  background: linear-gradient(180deg, #122754e8 0%, #0f2148f0 100%);
  box-shadow:
    0 14px 34px #0009,
    inset 0 1px 0 #c9dcff20;
  transform: translateX(calc(100% - 42px));
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

#menuScreen .menuUtilityRail.is-open {
  transform: translateX(0);
  border-color: #6ea8ff;
  box-shadow:
    0 18px 42px #000b,
    0 0 18px #6aaeff35,
    inset 0 1px 0 #c9dcff26;
}

#menuScreen .menuUtilityRailToggle,
#menuScreen .menuUtilityRail .menuUtilityBtn {
  --utility-tooltip: attr(aria-label);
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 2px solid #3b5eaa !important;
  color: #eaf3ff;
  background: linear-gradient(180deg, #213a74 0%, #1a2d5d 100%) !important;
  box-shadow: none !important;
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
  transform: none !important;
}

#menuScreen .menuUtilityRailToggle::before,
#menuScreen .menuUtilityRail .menuUtilityBtn::before {
  content: var(--utility-tooltip);
  position: absolute;
  display: block;
  top: 50%;
  right: calc(100% + 12px);
  z-index: 2;
  width: max-content;
  min-width: max-content;
  max-width: 190px;
  height: auto;
  margin: 0;
  padding: 7px 10px 6px;
  border: 2px solid #4f79d4;
  border-radius: 0;
  background: linear-gradient(180deg, #172d63 0%, #101f45 100%);
  color: #f4f8ff;
  box-shadow:
    0 10px 24px #0009,
    inset 0 1px 0 #c9dcff24;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.04rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, -50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

#menuScreen .menuUtilityRailToggle::after,
#menuScreen .menuUtilityRail .menuUtilityBtn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(100% + 5px);
  z-index: 3;
  width: 10px;
  height: 10px;
  border-top: 2px solid #4f79d4;
  border-right: 2px solid #4f79d4;
  background: #132653;
  pointer-events: none;
  opacity: 0;
  transform: translate(8px, -50%) rotate(45deg);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

#menuScreen .menuUtilityRailToggle:hover::before,
#menuScreen .menuUtilityRailToggle:focus-visible::before,
#menuScreen .menuUtilityRail .menuUtilityBtn:hover::before,
#menuScreen .menuUtilityRail .menuUtilityBtn:focus-visible::before,
#menuScreen .menuUtilityRailToggle:hover::after,
#menuScreen .menuUtilityRailToggle:focus-visible::after,
#menuScreen .menuUtilityRail .menuUtilityBtn:hover::after,
#menuScreen .menuUtilityRail .menuUtilityBtn:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

#menuScreen .menuUtilityRail.is-open .menuUtilityRailToggle::before,
#menuScreen .menuUtilityRail.is-open .menuUtilityRailToggle::after {
  opacity: 0;
}

#menuScreen .menuUtilityRail .menuUtilityBtn.hidden {
  display: none !important;
}

#menuScreen .menuUtilityRail.is-collapsed .menuUtilityBtn {
  display: none !important;
}

#menuScreen .menuUtilityRailToggle {
  color: #ffe3ba;
  border-color: #9f7136 !important;
  background: linear-gradient(180deg, #3a2e31 0%, #222035 100%) !important;
}

#menuScreen .menuUtilityRailToggle::before,
#menuScreen .menuUtilityRailToggle::after {
  display: none;
}

#menuScreen .menuUtilityRailToggle svg,
#menuScreen .menuUtilityIcon,
#menuScreen .discordServerIcon,
#menuScreen .socialToggleIcon {
  width: 23px;
  height: 23px;
  display: block;
}

#menuScreen .menuUtilityRail.is-open .menuUtilityRailToggle svg {
  transform: rotate(180deg);
}

#menuScreen .menuUtilityRail .menuUtilityBtn:hover,
#menuScreen .menuUtilityRail .menuUtilityBtn:focus-visible,
#menuScreen .menuUtilityRailToggle:hover,
#menuScreen .menuUtilityRailToggle:focus-visible {
  border-color: #88bbff !important;
  color: #ffffff;
  filter: brightness(1.08);
}

#menuScreen .menuUtilityRail #staffPortalBtn {
  color: #ffe5bf;
  border-color: #bf7d37 !important;
  background: linear-gradient(180deg, #3a3144 0%, #22233c 100%) !important;
}

#menuScreen .menuUtilityRail #discordServerBtn {
  color: #eef1ff;
  border-color: #5865f2 !important;
  background: linear-gradient(180deg, #303b8e 0%, #151a38 100%) !important;
}

#menuScreen .menuUtilityRail #ocsJoinBtn {
  color: #d7fff3;
  border-color: #3f8d78 !important;
  background: linear-gradient(180deg, #12392f 0%, #101d22 100%) !important;
}

#menuScreen .menuUtilityRail .socialToggleBtn.hasBadge::after {
  top: -8px;
  right: -8px;
}

body.phone-ui #menuScreen .menuUtilityRail {
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  width: 54px;
  gap: 6px;
  padding: 5px;
  transform: translateX(calc(100% - 38px));
}

body.phone-ui #menuScreen .menuUtilityRail.is-open {
  transform: translateX(0);
}

body.phone-ui #menuScreen .menuUtilityRailToggle,
body.phone-ui #menuScreen .menuUtilityRail .menuUtilityBtn {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
}

body.phone-ui #menuScreen .menuUtilityRailToggle svg,
body.phone-ui #menuScreen .menuUtilityIcon {
  width: 21px;
  height: 21px;
}

body.phone-ui #menuScreen .menuUtilityRailToggle::before,
body.phone-ui #menuScreen .menuUtilityRail .menuUtilityBtn::before,
body.phone-ui #menuScreen .menuUtilityRailToggle::after,
body.phone-ui #menuScreen .menuUtilityRail .menuUtilityBtn::after {
  display: none;
}

/* Boot + Login language parity and mobile-safe sizing */
#bootScreen {
  background:
    radial-gradient(circle at 14% 18%, #4f1f8f66 0%, transparent 30%),
    radial-gradient(circle at 84% 12%, #243b9f4d 0%, transparent 34%),
    linear-gradient(180deg, #16002d 0%, #24004d 62%, #1a0035 100%);
}

#bootScreen .bootPromptCard,
#bootScreen .bootDisclaimerCard {
  border-radius: 0;
  border: 2px solid #365db2;
  background: linear-gradient(180deg, #1d2f73f2 0%, #17295cf4 100%);
  box-shadow: none;
}

#bootScreen .bootPromptEyebrow,
#bootScreen .bootDisclaimerEyebrow {
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.09em;
}

#bootScreen .bootStartBtn {
  border-radius: 0;
  border: 2px solid #ffd4ad;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#loginScreen {
  background:
    radial-gradient(circle at 14% 18%, #4f1f8f66 0%, transparent 30%),
    radial-gradient(circle at 84% 12%, #243b9f4d 0%, transparent 34%),
    linear-gradient(180deg, #16002d 0%, #24004d 62%, #1a0035 100%);
}

#loginScreen .loginCard {
  border-radius: 0;
  border: 2px solid #365db2;
  border-right: 0;
  background: linear-gradient(180deg, #25357af2 0%, #1f2f6bf4 100%);
  box-shadow: none;
  width: min(100%, 600px);
  min-height: min(680px, calc(var(--app-vh) - 112px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4.2vh, 46px) 34px;
}

#loginScreen .loginScreenLayout {
  width: min(94vw, 1020px);
  align-items: stretch;
}

#loginScreen .loginInfoCard {
  margin-left: -2px;
  border-radius: 0;
  border: 2px solid #f06ab9;
  background: linear-gradient(180deg, #d553a2 0%, #c10091 100%);
  box-shadow: none;
  width: min(100%, 280px);
  min-width: 270px;
  padding: clamp(22px, 3.8vh, 34px) 22px;
  justify-content: center;
  gap: 14px;
}

#loginScreen .loginInfoHeadline,
#loginScreen .loginInfoPrompt {
  color: #ffffff;
}

#loginScreen .loginInfoLogo {
  width: min(230px, 88%);
}

#loginScreen .loginInfoHeadline {
  max-width: 210px;
  margin: 4px 0 2px;
  font-size: clamp(1.55rem, 2.45vw, 2.1rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

#loginScreen .loginInfoPrompt {
  margin-top: 8px;
  font-weight: 700;
}

#loginScreen #loginFormPanel {
  width: min(100%, 520px);
  align-self: center;
  gap: 18px;
}

#loginScreen #loginFormPanel > .tag:first-child {
  margin: 0 0 8px;
}

#loginScreen #loginFormPanel .grid {
  gap: 14px;
}

#loginScreen #loginFormPanel .actions {
  margin-top: 4px;
}

#loginScreen #loginStatus {
  min-height: 24px;
  margin: 8px 0 0;
}

#loginScreen input {
  min-height: 52px;
  border-radius: 14px;
}

#loginScreen .loginRegisterBtn {
  border-radius: 0;
  border-color: #ffe7ce;
  box-shadow: none;
}

#loginScreen .loginCard .primary {
  border-radius: 0;
  border: 2px solid #ffd4ad;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  font-family: 'Teko', 'Rajdhani', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#loginScreen .loginCard label {
  color: #dbe7ff;
}

#loginScreen .deviceLoginPanel {
  max-width: 220px;
  gap: 9px;
  margin: 2px 0 6px;
}

#loginScreen .deviceLoginTitle {
  font-size: 1.32rem;
}

#loginScreen .deviceLoginQrFrame {
  width: min(100%, 180px);
  border-width: 4px;
  box-shadow: 0 12px 30px #0006;
}

#loginScreen .deviceLoginCode {
  min-height: 32px;
  padding: 4px 12px 1px;
  font-size: 1.55rem;
}

#loginScreen .deviceLoginStatus {
  max-width: 210px;
  min-height: 34px;
  font-size: 0.94rem;
  line-height: 1.12;
}

#loginScreen .deviceLoginRefreshBtn {
  min-height: 38px;
  padding: 5px 16px;
  border-radius: 12px;
  font-size: 1.22rem;
}

body.phone-ui #bootScreen .bootPromptStage,
body.phone-ui #bootScreen .bootSequenceStage {
  padding: 12px;
}

body.phone-ui #bootScreen .bootPromptCard {
  width: min(96vw, 560px);
  padding: 18px 14px;
  gap: 10px;
}

body.phone-ui #bootScreen .bootPromptLogo {
  width: min(280px, 72vw);
}

body.phone-ui #bootScreen .bootPromptEyebrow {
  font-size: clamp(0.74rem, 2.4vw, 0.9rem);
  letter-spacing: 0.08em;
}

body.phone-ui #bootScreen #bootStartHint {
  font-size: clamp(0.76rem, 2.25vw, 0.92rem);
  line-height: 1.35;
  margin-top: 2px;
}

body.phone-ui #bootScreen .bootStartBtn {
  min-width: 172px;
  min-height: 46px;
  font-size: clamp(1rem, 3.2vw, 1.2rem);
}

body.phone-ui #bootScreen .bootPane {
  padding: 12px;
}

body.phone-ui #bootScreen .bootDisclaimerCard {
  width: min(96vw, 720px);
  max-height: calc(var(--app-vh) - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  padding: 18px 14px;
}

body.phone-ui #bootScreen .bootDisclaimerCard h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.45rem, 5.2vw, 2.3rem);
  line-height: 1;
}

body.phone-ui #bootScreen .bootDisclaimerCard p {
  font-size: clamp(0.84rem, 2.9vw, 1.02rem);
  line-height: 1.35;
  margin: 0 0 10px;
}

body.phone-ui #bootScreen .bootDisclaimerEyebrow {
  font-size: clamp(0.7rem, 2.2vw, 0.84rem);
}

body.phone-ui #loginScreen {
  padding: 8px;
}

body.phone-ui #loginScreen .loginScreenLayout {
  max-height: calc(var(--app-vh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  gap: 0;
}

body.phone-ui #loginScreen .loginCard {
  min-height: 0;
  padding: 14px 12px;
}

body.phone-ui #loginScreen .loginInfoCard {
  min-width: 0;
  padding: 12px 10px;
  gap: 8px;
}

body.phone-ui #loginScreen .loginInfoLogo {
  width: min(150px, 44vw);
}

body.phone-ui #loginScreen .loginInfoHeadline {
  max-width: 170px;
  font-size: clamp(0.95rem, 3.3vw, 1.32rem);
}

body.phone-ui #loginScreen .loginInfoPrompt {
  margin-top: 2px;
  font-size: 0.84rem;
}

body.phone-ui #loginScreen .loginRegisterBtn {
  min-height: 36px;
  min-width: 112px;
  padding: 6px 14px;
  font-size: 1.18rem;
}

body.phone-ui #loginScreen .loginLogo {
  width: min(190px, 44vw);
  margin-bottom: 5px;
}

body.phone-ui #loginScreen #loginFormPanel {
  width: 100%;
  gap: 8px;
}

body.phone-ui #loginScreen #loginFormPanel > .tag:first-child {
  margin-bottom: 0;
  font-size: 0.82rem;
}

body.phone-ui #loginScreen .grid label {
  font-size: 0.8rem;
}

body.phone-ui #loginScreen input {
  min-height: 36px;
  font-size: 0.86rem;
  padding: 7px 10px;
  border-radius: 10px;
}

body.phone-ui #loginScreen #loginSubmitBtn {
  min-height: 38px;
  font-size: 1rem;
  padding: 7px 14px;
}

body.phone-ui #loginScreen #loginStatus {
  min-height: 18px;
  margin-top: 2px;
  font-size: 0.8rem;
}

body.phone-ui #loginScreen .deviceLoginPanel {
  max-width: 132px;
  gap: 5px;
  margin: 0;
}

body.phone-ui #loginScreen .deviceLoginTitle {
  font-size: 0.98rem;
}

body.phone-ui #loginScreen .deviceLoginQrFrame {
  width: min(100%, 102px);
  border-width: 3px;
}

body.phone-ui #loginScreen .deviceLoginCode {
  min-height: 22px;
  padding: 2px 8px 0;
  font-size: 1.08rem;
}

body.phone-ui #loginScreen .deviceLoginStatus {
  min-height: 24px;
  max-width: 128px;
  font-size: 0.72rem;
  line-height: 1.08;
}

body.phone-ui #loginScreen .deviceLoginRefreshBtn {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.96rem;
}

body.phone-ui #loginScreen .loginLoadingPanel {
  min-height: 210px;
  gap: 10px;
}

body.phone-ui #loginScreen .loginLoadingTitle,
body.phone-ui #loginScreen #loginLoadingStatus {
  font-size: clamp(0.84rem, 2.7vw, 1rem);
  line-height: 1.3;
}

body.phone-ui-landscape #loginScreen {
  overflow: hidden;
}

body.phone-ui-landscape #loginScreen .loginScreenLayout {
  width: min(98vw, 860px);
  height: min(100%, calc(var(--app-vh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
}

body.phone-ui-landscape #loginScreen .loginCard {
  width: min(66vw, 520px);
  flex: 1 1 auto;
  border-right: 0;
  justify-content: center;
}

body.phone-ui-landscape #loginScreen .loginInfoCard {
  width: min(31vw, 210px);
  flex: 0 0 min(31vw, 210px);
  margin-left: -2px;
  border-left: 2px solid #f06ab9;
}

body.phone-ui-landscape #loginScreen #loginFormPanel .grid {
  gap: 8px;
}

body.phone-ui-landscape #loginScreen #loginFormPanel .actions {
  margin-top: 0;
}

body.phone-ui-portrait #loginScreen {
  overflow: auto;
  padding: 10px;
}

body.phone-ui-portrait #loginScreen .loginScreenLayout {
  width: min(96vw, 430px);
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-height: none;
}

body.phone-ui-portrait #loginScreen .loginCard {
  width: 100%;
  border-right: 2px solid #365db2;
  padding: 14px 12px;
}

body.phone-ui-portrait #loginScreen .loginInfoCard {
  width: 100%;
  margin-left: 0;
  border-left: 2px solid #f06ab9;
  padding: 10px 12px;
}

body.phone-ui-portrait #loginScreen .loginInfoLogo {
  width: min(150px, 42vw);
}

body.phone-ui-portrait #loginScreen .loginInfoHeadline {
  font-size: clamp(0.94rem, 3.7vw, 1.24rem);
}

body.phone-ui-portrait #loginScreen .deviceLoginPanel {
  max-width: 118px;
}

body.phone-ui-portrait #loginScreen .deviceLoginQrFrame {
  width: min(100%, 88px);
}

body.phone-ui-portrait #loginScreen .deviceLoginStatus {
  display: none;
}

body.deviceLoginPage {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, #2b1a73 0%, #140032 48%, #080013 100%),
    #080013;
  color: #eef4ff;
  font-family: 'Rajdhani', system-ui, sans-serif;
}

.deviceLoginShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.deviceLoginCard {
  width: min(100%, 430px);
  border: 3px solid #3f76df;
  background: linear-gradient(180deg, #263881 0%, #16275d 100%);
  box-shadow: 0 24px 70px #0009;
  padding: 24px 20px;
  text-align: center;
}

.deviceLoginBrand {
  width: min(260px, 76%);
  height: auto;
  filter: drop-shadow(0 10px 18px #0008);
}

.deviceLoginEyebrow {
  margin: 18px 0 8px;
  color: #ffffff;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deviceLoginPageCode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0 0 16px;
  padding: 4px 14px 0;
  border: 2px solid #ffe7ce;
  background: #ffffff;
  color: #101827;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.deviceLoginForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.deviceLoginForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #dbe7ff;
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
}

.deviceLoginForm input {
  min-height: 48px;
  border: 2px solid #3a6ac7;
  background: #0c1730;
  color: #f7fbff;
  padding: 9px 12px;
  font: inherit;
}

.deviceLoginForm input:disabled {
  opacity: 0.65;
}

.deviceLoginApproveBtn {
  min-height: 54px;
  border: 2px solid #ffd4ad;
  background: linear-gradient(90deg, #ff7d00 0%, #ff3f39 100%);
  color: #09111f;
  font-family: 'Teko', 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.deviceLoginApproveBtn:disabled {
  cursor: default;
  filter: grayscale(0.55) brightness(0.75);
}

.deviceLoginMessage {
  min-height: 42px;
  margin: 16px 0 0;
  color: #dbe7ff;
  font-weight: 700;
  line-height: 1.25;
}

.deviceLoginMessage[data-tone='error'] {
  color: #ffd4d4;
}

.deviceLoginMessage[data-tone='success'] {
  color: #b8ffd3;
}