:root {
  --menu-width: clamp(184px, 15vw, 232px);
  --ui-gap: 20px;
  --ui-edge: 20px;
  --panel-edge: #b9a4db57;
  color-scheme: dark;
}
#lobby {
  display: grid;
  grid-template-columns: var(--menu-width) minmax(0, 1fr);
  grid-template-rows: 84px minmax(0, 1fr) 34px;
  gap: 12px var(--ui-gap);
  padding: 0 var(--ui-edge);
  overflow: hidden;
}
#lobby::after { display: none; }
#lobby > .topbar {
  grid-area: 1 / 1 / 2 / -1;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-width: 0;
  padding: 0 4px;
  gap: 16px;
  flex-wrap: nowrap;
  z-index: 12;
}
.topbar .brand { min-width: 0; }
.topbar .version { white-space: nowrap; font-size: 12px; }
.topbar .account { margin-left: auto; flex-shrink: 0; }
#lobby > .nav {
  grid-area: 2 / 1;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  min-width: 0;
  margin: 0;
  padding: 12px 10px 16px 3px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px !important;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  border: 0;
  transform: none;
  scrollbar-width: thin;
  scrollbar-color: #897596 transparent;
  z-index: 5;
}
#lobby > .nav button {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 52px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  flex: 0 0 auto;
  padding: 12px 10px;
  gap: 10px;
  font: 400 clamp(21px, 1.8vw, 28px)/1.2 var(--display) !important;
  letter-spacing: .3px;
  text-align: left;
  border: 1px solid #ab95c349;
  border-left: 3px solid #b3a1cd;
  border-radius: 8px;
  background: linear-gradient(110deg, #39313ff5, #221e2af2);
  box-shadow: 4px 4px 0 #0e0b14, inset 0 1px #ffffff14;
  transform: perspective(850px) rotateY(9deg);
  transform-origin: left center;
  transition: background .16s, border-color .16s;
}
#lobby > .nav button span {
  min-width: 0;
  font-size: 1em;
  white-space: normal;
  overflow-wrap: anywhere;
}
#lobby > .nav button small { flex: 0 0 18px; font-size: 12px; }
#lobby > .nav button:hover {
  transform: perspective(850px) rotateY(9deg);
  background: #51425e;
  border-color: #d0b9ed;
}
#lobby > .nav button.active {
  transform: perspective(850px) rotateY(9deg);
  background: linear-gradient(110deg, #d8c7ff, #bca0f5);
  border-color: #f0e6ff;
  color: #21182e;
  text-shadow: none;
  box-shadow: 4px 4px 0 #0e0b14, inset 0 1px #ffffff80;
}
#lobby > .nav button::after { display: none; }
#homePanel, #lobby > .screen-panel {
  grid-area: 2 / 2;
  position: relative;
  inset: auto !important;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
#homePanel {
  display: grid;
  grid-template-columns: minmax(270px, min(36%, 380px)) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px 24px;
  padding: 8px 8px 0 0;
  overflow: hidden;
}
#homePanel .lobby-desk {
  grid-area: 1 / 1;
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 4px 16px 12px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
#homePanel .hero {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  padding: 0 0 16px;
  transform: none;
}
#homePanel .hero h1 { font-size: clamp(40px, 4vw, 62px); line-height: 1; margin: 12px 0; }
#homePanel .hero .tagline { max-width: none; margin: 0 0 16px; font-size: 14px; }
#homePanel .player-input { display: flex; min-width: 0; transform: none; }
.inputwrap { min-width: 0; }
.inputwrap input { width: 100%; min-width: 0; }
.name-hint { display: block; line-height: 1.5; }
#homePanel .match-sidebar { position: static; inset: auto; width: 100%; display: grid; gap: 14px; padding: 0; overflow: visible; }
#homePanel .map-card, #homePanel .mode-card, #homePanel .session-card {
  display: block;
  margin: 0;
  transform: perspective(1200px) rotateY(5deg);
  transform-origin: left center;
  border-radius: 8px;
  border-color: var(--panel-edge);
  box-shadow: 4px 4px #100b18, inset 0 1px #ffffff12;
}
#homePanel .map-image { height: 120px; }
#homePanel .map-info { padding: 12px; }
#homePanel .map-card .map-select { height: 38px; }
#homePanel .lobby-badges {
  grid-area: 1 / 2;
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  max-width: 230px;
  min-width: 0;
  padding: 8px 8px 12px;
}
#homePanel .operator-label, #homePanel .daily-shortcut {
  display: block;
  position: relative;
  inset: auto;
  margin: 0;
  width: 100%;
  max-width: none;
  transform: perspective(1100px) rotateY(-9deg);
  transform-origin: right center;
  overflow-wrap: anywhere;
}
#homePanel .operator-label { order: 0; }
#homePanel .daily-shortcut { order: 1; }
#homePanel .home-sticker, #lobbyBoards { display: none; }
#homePanel .deploy-area {
  grid-area: 2 / 1 / 3 / -1;
  position: relative;
  inset: auto;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 10px 14px;
  padding: 8px 4px 0;
  transform: none;
}
#homePanel .death-banner {
  position: static;
  inset: auto;
  grid-area: 1 / 1 / 2 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
}
#homePanel .deploy-area .loadout-four { grid-area: 2 / 1 / 3 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
#homePanel .loadout-slot {
  height: auto;
  min-height: 78px;
  padding: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(40px, .7fr);
  transform: perspective(1200px) rotateX(5deg);
  transform-origin: center bottom;
}
#homePanel .loadout-slot:hover { transform: perspective(1200px) rotateX(5deg); }
#homePanel .loadout-slot b { font-size: 17px; line-height: 1.3; }
#homePanel .loadout-slot span { font-size: 12px; }
#homePanel #quickBtn:not([hidden]), #homePanel .deploy-button {
  grid-row: 3;
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: 12px 16px;
  transform: none;
  font-size: 25px !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
#homePanel .deploy-button b { height: auto; min-height: 0; font-size: 25px !important; }
#homePanel .deploy-hint { display: block; position: static; inset: auto; grid-area: 4 / 1 / 5 / -1; width: auto; margin: 0; line-height: 1.5; white-space: normal; }
#homePanel .click-note { position: static; inset: auto; grid-area: 3 / 1 / 4 / -1; margin: 0; text-align: right; font-size: 12px; line-height: 1.5; }
#lobby > .footer { grid-area: 3 / 1 / 4 / -1; position: relative; inset: auto; height: auto; min-width: 0; padding: 0 4px; gap: 16px; font-size: 12px; }
#lobby > .footer > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#lobby > .footer > span:last-child { display: none; }
#lobby > .screen-panel {
  padding: 24px !important;
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: linear-gradient(110deg, #32283cec, #211c2af5) !important;
  box-shadow: inset 2px 0 #d2baff26, 6px 6px 0 #0b0913;
  scrollbar-gutter: stable;
}
.panel-heading, .workshop-heading { min-width: 0; }
.panel-heading h2, .workshop-heading h2 { overflow-wrap: anywhere; line-height: 1.13 !important; }
.panel-heading > div:last-child:not(:first-child) { display: block; }
.collection-tools, .filter-pair, .collection-progress, .cosmetic-toolbar { min-width: 0; }
.arsenal-tabs { flex-wrap: wrap; overflow: visible; min-width: 0; }
.arsenal-tabs button { white-space: normal; }
.weapon-grid, .map-grid { gap: 24px; padding: 10px 8px 18px; }
.weapon-card, .weapon-card:nth-child(even), .map-tile, .map-tile:nth-child(even), .skin-card, .skin-card:nth-child(even), .daily-card, .daily-card:nth-child(even), .supply-tab, .supply-tab:nth-child(2) { transform: none; min-width: 0; }
.weapon-card:hover, .map-tile:hover, .skin-card:hover, .supply-tab:hover { transform: none; }
.weapon-card .model { position: static; display: block; margin: 6px 0; overflow-wrap: anywhere; }
.weapon-card h3 { overflow-wrap: anywhere; }
.weapon-card .weapon-desc { height: auto; min-height: 0; }
.weapon-card .gun-art { min-height: 95px; }
.skin-card .helmet-icon { position: static; inset: auto; display: block; width: 100%; max-width: 120px; height: 96px; margin: 0 auto 12px; }
.skin-card .small-label { display: block; max-width: none; }
.skin-card h3 { overflow-wrap: anywhere; }
#operatorsPanel { display: flex; flex-direction: column; }
#operatorsPanel .operator-layout { flex: 1 0 auto; width: 100%; height: auto; min-height: 440px; grid-template-columns: minmax(250px, 1fr) minmax(300px, 1.25fr); gap: 24px; }
#operatorsPanel .operator-grid { width: 100%; max-width: none; max-height: 620px; min-height: 0; overflow-y: auto; }
.operator-stage { min-width: 0; height: 540px; min-height: 0; max-height: 680px; grid-template-rows: minmax(160px, 1fr) auto auto; transform: perspective(1600px) rotateY(-3deg); transform-origin: right center; }
.operator-stage .operator-bio { transform: none; }
#wrapsPanel .workshop-heading { flex: 0 0 auto; height: auto; min-height: 0; margin-bottom: 22px; align-items: center; gap: 16px; }
#wrapsPanel .workshop-layout { flex: 1 0 auto; height: auto; min-height: 540px; grid-template-columns: minmax(280px, 1fr) minmax(310px, 1.35fr); gap: 24px; }
#wrapsPanel .workshop-stage {
  min-width: 0;
  height: 600px;
  min-height: 0;
  max-height: 760px;
  grid-template-rows: auto minmax(170px, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 14px 12px;
  transform: perspective(1600px) rotateY(-3deg);
  transform-origin: right center;
}
.workshop-stage canvas { display: block; }
.workshop-stage .workshop-top { min-width: 0; align-items: center; flex-wrap: wrap; }
.workshop-stage .workshop-label { min-width: 0; }
.workshop-stage .workshop-label h2 { overflow-wrap: anywhere; }
.workshop-stage .preview-actions { min-width: 0; }
.workshop-stage .preview-actions button { white-space: normal; overflow-wrap: anywhere; min-height: 44px; }
#wrapsPanel .workshop-options { min-width: 0; height: auto; max-height: 700px; overflow: hidden; }
#wrapsPanel .workshop-options #wrapGrid { min-height: 180px; overflow-y: auto !important; }
.supply-layout { grid-template-columns: minmax(280px, 1fr) minmax(250px, 1fr); gap: 24px; }
.supply-layout > *, .supply-tabs > *, .pool-item > *, .drop-odds { min-width: 0; }
.supply-tab { display: flex; flex-direction: column; justify-content: center; }
.supply-tab b { overflow-wrap: anywhere; }
.batch-picker { min-width: 0; }
.batch-picker #supplyBatchOptions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.reward-actions, .career-line, .contracts-heading { flex-wrap: wrap; }
.setting-row { flex-wrap: wrap; }
.setting-row > label { flex: 1 1 180px; }
.setting-row input[type=range], .setting-row select { max-width: 100%; }
.modal-backdrop { overflow-y: auto; padding: 24px; }
.modal-backdrop > .modal { max-width: 100%; max-height: calc(100dvh - 48px); min-height: 0; margin: auto; }
.modal .modal-head { align-items: start; gap: 16px; }
.modal-head .closebtn { flex: 0 0 36px; }
.supply-reveal .modal { position: relative; }
.supply-reveal .closebtn { top: 14px; right: 14px; }
.supply-reveal #supplyRevealStatus { display: block; padding-right: 46px; }
.reel-window { min-width: 0; }
#welcomeModal {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 22% 38%, #58427638, transparent 55%), #15111ded;
  padding: 24px;
  overflow: auto;
}
.welcome-shell {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(360px, 1.15fr);
  width: min(880px, 100%);
  max-height: calc(100dvh - 48px);
  min-width: 0;
  margin: auto;
  overflow: auto;
  border: 1px solid #b39bd455;
  border-radius: 18px;
  box-shadow: 0 24px 80px #0006, 0 0 0 7px #c6afff06;
  background: #27202f;
  scrollbar-width: thin;
  scrollbar-color: #8c74a0 #27202f;
}
#welcomeModal .welcome-art {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  position: relative;
  width: auto;
  height: auto;
  max-height: none;
  min-width: 0;
  padding: 32px;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid #ad93cb40;
  color: #f4edff;
  background: linear-gradient(160deg, #6f539155, #22182dcc), conic-gradient(#ffffff05 25%, transparent 0 50%, #ffffff05 0 75%, transparent 0) 0 0 / 56px 56px, #41304f;
}
.welcome-brand { display: flex; align-items: center; gap: 12px; font: 400 25px/1.15 var(--display); letter-spacing: 1px; }
#welcomeModal .welcome-art .riftmark { display: block; width: 25px; height: 33px; background: var(--lime); flex-shrink: 0; }
.welcome-intro { transform: perspective(1000px) rotateY(7deg); transform-origin: left center; }
#welcomeModal .welcome-art .small-label { color: #d7c4f3; font: 700 12px/1.5 var(--mono); }
#welcomeModal .welcome-art h1 {
  margin: 18px 0;
  font: 400 clamp(42px, 5vw, 64px)/1.03 var(--display);
  font-style: italic;
  letter-spacing: .1px;
  transform: none;
  color: #fff9ff;
  text-shadow: 3px 4px 0 #22152e;
  overflow-wrap: anywhere;
}
#welcomeModal .welcome-art h1 em { color: var(--lime); font-style: inherit; }
#welcomeModal .welcome-art p { margin: 0; color: #e3d6ef; font: 400 16px/1.6 var(--body); }
.welcome-foot > span { font: 700 12px/1.6 var(--mono); color: #d1bde7; }
#welcomeModal .welcome-foot p { margin-top: 8px; font-size: 13px; color: #bdaecb; }
#welcomeModal .welcome-form {
  position: relative;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-width: 0;
  padding: 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #27202f;
}
#welcomeModal .welcome-form > .small-label { font: 700 12px/1.5 var(--mono); color: #c9b5e5; }
#welcomeModal .welcome-form h2 { margin: 8px 0 22px; font-size: 38px; line-height: 1.1; color: #fff; letter-spacing: .3px; }
#welcomeModal .welcome-form label { margin: 0 0 7px; color: #d9cbe7; font: 700 12px/1.4 var(--mono); letter-spacing: 1px; }
#welcomeModal .welcome-form .textinput { width: 100%; height: 44px; border: 1px solid #7d678e80; border-radius: 7px; color: #fff; background: #19141f; font: 400 16px/1.4 var(--body); }
#welcomeModal .textinput::placeholder { color: #a799b5; opacity: 1; }
#welcomeModal .textinput:focus-visible { border-color: #d6bfff; outline: 2px solid #c5a9fb55; outline-offset: 2px; }
#welcomeModal .account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 18px 0; background: #19141f; border: 1px solid #a084ba30; border-radius: 8px; }
#welcomeModal .account-tabs button { margin: 0; min-width: 0; min-height: 39px; padding: 9px 8px; border: 0; border-radius: 5px; font: 700 13px/1.3 var(--body); color: #c3b4d2; background: transparent; box-shadow: none; white-space: normal; }
#welcomeModal .account-tabs button.active { background: #645079; color: #fff; }
#welcomeModal #accountForm { display: grid; gap: 14px; }
#welcomeModal #accountSubmit { width: 100%; min-height: 47px; margin: 2px 0 0; padding: 12px; font: 750 14px/1.4 var(--body); border-radius: 7px; box-shadow: 0 3px 0 #111619; }
#welcomeModal #welcomeMessage { font-size: 14px; line-height: 1.5; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #d7ef9a44; border-radius: 6px; overflow-wrap: anywhere; }
#welcomeModal #welcomeMessage:empty { display: none; }
#welcomeModal .or { margin: 20px 0 14px; font: 700 12px/1.4 var(--mono); color: #b4a1c5; letter-spacing: .5px; }
.welcome-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#welcomeModal .welcome-shortcuts button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-width: 0; min-height: 66px; padding: 12px 8px; margin: 0; border: 1px solid #9178a766; border-radius: 7px; font: 750 13px/1.3 var(--body); letter-spacing: 0; background: #34293f; color: #f0e7fa; white-space: normal; }
#welcomeModal .welcome-shortcuts button:hover { background: #493655; border-color: #c5a7e5; }
.welcome-shortcuts button span { font: 400 12px/1.4 var(--body); color: #bdafca; }
#welcomeModal .welcome-form .muted-note { margin: 16px 0 0; color: #bcaecc !important; font: 400 13px/1.5 var(--body) !important; }
:focus-visible { outline: 2px solid #deccff; outline-offset: 3px; }
@media (min-width: 1400px) {
  .weapon-card, .map-tile { transform: perspective(1600px) rotateY(2deg); transform-origin: left center; }
  .weapon-card:hover, .map-tile:hover { transform: perspective(1600px) rotateY(2deg); }
}
@media (max-width: 1150px) {
  :root { --menu-width: 178px; --ui-gap: 14px; --ui-edge: 14px; }
  #lobby > .nav button { font-size: 22px !important; padding: 10px 8px; gap: 7px; }
  #lobby > .screen-panel { padding: 20px !important; }
  #homePanel { grid-template-columns: minmax(270px, 42%) minmax(0, 1fr); gap: 12px; }
  #homePanel .lobby-badges { max-width: 195px; }
  #homePanel .loadout-slot { grid-template-columns: minmax(0, 1fr) 42px; }
  #homePanel .loadout-slot b { font-size: 16px; }
  #homePanel .loadout-slot span { font-size: 12px; }
  #homePanel .operator-label b { font-size: 27px; }
  #wrapsPanel .workshop-layout, #operatorsPanel .operator-layout { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
  #wrapsPanel .workshop-stage, #operatorsPanel .operator-stage { order: 0; flex: 0 0 auto; width: 100%; height: 480px; max-height: none; }
  #wrapsPanel .workshop-options { order: 1; max-height: none; overflow: visible; }
  #wrapsPanel .workshop-options #wrapGrid { overflow: visible !important; min-height: 0; flex: 0 0 auto; }
  #operatorsPanel .operator-grid { order: 1; max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .supply-layout { display: flex; flex-direction: column; }
  .supply-details { width: 100%; }
}
@media (max-height: 740px) and (min-width: 901px) {
  #lobby { grid-template-rows: 68px minmax(0, 1fr) 30px; row-gap: 8px; }
  #lobby > .nav { gap: 8px !important; padding-top: 5px; }
  #lobby > .nav button { min-height: 43px; padding-block: 8px; font-size: 22px !important; }
  #homePanel .hero h1 { font-size: 43px; }
  #homePanel .loadout-slot { min-height: 68px; padding: 8px; }
  #homePanel #quickBtn:not([hidden]), #homePanel .deploy-button { min-height: 46px; font-size: 22px !important; }
  #homePanel .deploy-button b { font-size: 22px !important; }
  #homePanel .lobby-badges { gap: 12px; }
  #homePanel .operator-label, #homePanel .daily-shortcut { padding: 10px 12px; }
}
@media (max-width: 900px) {
  #lobby { grid-template-columns: minmax(0, 1fr); grid-template-rows: 68px auto minmax(0, 1fr) 30px; gap: 10px; padding: 0 12px; }
  #lobby > .topbar { grid-area: 1 / 1; }
  #lobby > .nav { grid-area: 2 / 1; flex-direction: row; height: auto; min-height: 58px; padding: 6px 4px 10px; gap: 8px !important; overflow-x: auto; overflow-y: hidden; }
  #lobby > .nav button { width: auto; min-width: max-content; min-height: 42px; padding: 8px 13px; transform: none; flex: 0 0 auto; font-size: 22px !important; }
  #lobby > .nav button:hover, #lobby > .nav button.active { transform: none; }
  #lobby > .nav button small { display: none; }
  #homePanel, #lobby > .screen-panel { grid-area: 3 / 1; }
  #lobby > .footer { grid-area: 4 / 1; }
  #lobby > .footer .footer-controls { display: none; }
  #homePanel { grid-template-columns: minmax(260px, 44%) minmax(0, 1fr); }
  #homePanel .lobby-desk { padding-right: 12px; }
  #homePanel .hero h1 { font-size: 46px; }
  #welcomeModal { padding: 18px; }
  .welcome-shell { grid-template-columns: minmax(210px, .75fr) minmax(330px, 1.25fr); max-height: calc(100dvh - 36px); }
  #welcomeModal .welcome-art { padding: 24px; }
  #welcomeModal .welcome-art h1 { font-size: 45px; }
  #welcomeModal .welcome-form { padding: 24px; }
}
@media (max-width: 700px) {
  #lobby { grid-template-rows: 64px auto minmax(0, 1fr) 28px; gap: 8px; padding: 0 10px; }
  #lobby > .topbar { padding: 0; gap: 8px; }
  #lobby > .nav { min-height: 54px; }
  #lobby > .nav button { font-size: 21px !important; }
  #lobby > .footer { font-size: 12px; }
  #homePanel { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding: 6px 8px 18px 2px; }
  #homePanel .lobby-desk { display: contents; }
  #homePanel .hero { order: 0; padding: 0; }
  #homePanel .hero h1 { font-size: 45px; margin: 12px 0; }
  #homePanel .hero h1 br { display: none; }
  #homePanel .deploy-area { order: 1; flex-shrink: 0; padding: 0; }
  #homePanel .deploy-area .loadout-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #homePanel .loadout-slot { min-height: 82px; }
  #homePanel #quickBtn:not([hidden]), #homePanel .deploy-button { padding: 12px 10px; min-height: 56px; font-size: 22px !important; }
  #homePanel .deploy-button b { font-size: 22px !important; }
  #homePanel .deploy-hint { font-size: 12px; }
  #homePanel .match-sidebar { order: 2; }
  #homePanel .lobby-badges { order: 3; display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; padding: 0; gap: 14px; }
  #homePanel .lobby-badges .operator-label { display: none; }
  #homePanel .click-note { order: 4; text-align: center; font-size: 13px; }
  #lobby > .screen-panel { padding: 18px !important; }
  #wrapsPanel .workshop-heading { align-items: stretch; }
  #wrapsPanel .workshop-heading select { width: 100%; }
  #wrapsPanel .workshop-stage, #operatorsPanel .operator-stage { height: 445px; transform: none; }
  .workshop-stage .workshop-top span:first-child { font-size: 24px; }
  .workshop-stage .workshop-label h2 { font-size: 30px; }
  .weapon-grid, .map-grid { padding: 4px 3px 12px; gap: 20px; }
  .supply-tab { display: flex; }
  .modal-backdrop { padding: 14px; }
  .modal-backdrop > .modal { width: min(510px, 100%); max-height: calc(100dvh - 28px); }
  #welcomeModal { padding: 14px; }
  .welcome-shell { display: block; width: min(470px, 100%); max-height: calc(100dvh - 28px); border-radius: 13px; }
  #welcomeModal .welcome-art { display: flex; padding: 18px 22px; border: 0; border-bottom: 1px solid #ad93cb40; }
  .welcome-intro, .welcome-foot { display: none; }
  .welcome-brand { font-size: 25px; }
  #welcomeModal .welcome-form { padding: 22px; }
  #welcomeModal .welcome-form h2 { font-size: 34px; margin-bottom: 20px; }
  #homePanel .map-card, #homePanel .mode-card, #homePanel .session-card, #homePanel .operator-label, #homePanel .daily-shortcut, #homePanel .loadout-slot, #homePanel .loadout-slot:hover { transform: none; }
}
@media (max-width: 370px) {
  #lobby > .topbar .account { gap: 5px; }
  #lobby > .topbar .brand { gap: 4px; }
  .topbar .brand-name { font-size: 27px; }
  #welcomeModal .welcome-form { padding: 18px; }
  #welcomeModal .welcome-form h2 { font-size: 31px; }
  #welcomeModal .welcome-shortcuts button { font-size: 12px; }
  .supply-hero { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #lobby > .nav button, #lobby > .nav button:hover, #lobby > .nav button.active,
  #homePanel .map-card, #homePanel .mode-card, #homePanel .session-card,
  #homePanel .operator-label, #homePanel .daily-shortcut, #homePanel .loadout-slot,
  #homePanel .loadout-slot:hover, .weapon-card, .weapon-card:hover, .map-tile,
  .map-tile:hover, .operator-stage, #wrapsPanel .workshop-stage, .welcome-intro { transform: none; }
}
.reduce-motion #lobby > .nav button, .reduce-motion #homePanel .map-card,
.reduce-motion #homePanel .mode-card, .reduce-motion #homePanel .session-card,
.reduce-motion #homePanel .operator-label, .reduce-motion #homePanel .daily-shortcut,
.reduce-motion #homePanel .loadout-slot, .reduce-motion .weapon-card,
.reduce-motion .map-tile, .reduce-motion .operator-stage,
.reduce-motion #wrapsPanel .workshop-stage, .reduce-motion .welcome-intro { transform: none; }
[hidden] { display: none !important; }

.wrapped-art {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
}
.wrapped-art > .weapon-thumb {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 12px;
  object-fit: contain;
  object-position: center;
}
.pool-item .wrapped-art > .weapon-thumb { padding: 2px; }
#supplyRewardArt {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 160px;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}
#supplyRewardArt > .wrapped-art { flex: 1 1 0; align-self: stretch; }
#supplyRewardArt > svg {
  display: block;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
#supplyRewardName { overflow-wrap: anywhere; line-height: 1.15; }
.reel-swatch {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}
.reel-swatch.pattern-0 { background-color: var(--a); }
.reel-swatch > svg {
  display: block;
  position: static;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.batch-rewards .batch-art {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  flex-shrink: 0;
  overflow: hidden;
}
.batch-art .reel-swatch { height: 100%; }
@media (max-width: 700px), (max-height: 650px) {
  #supplyRewardArt { height: 125px; }
}

.leaderboard-section { width: 100%; min-width: 0; margin-top: 26px; }
.leaderboard-section .panel-heading { margin: 0 0 18px; align-items: center; }
#leaderboardStatus { margin: 10px 0 0; font: 400 14px/1.5 var(--body); color: #c8b8d8; }
#leaderboardConnect { flex-shrink: 0; white-space: normal; min-height: 44px; padding: 12px 16px; }
#leaderboardTabs {
  position: static;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  gap: 9px;
  transform: none;
}
#leaderboardTabs button { flex: 0 1 auto; min-width: 0; min-height: 43px; margin: 0; padding: 10px 14px; font-size: 21px; white-space: normal; }
#fullLeaderboard { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 10px 18px; }
#fullLeaderboard .leader-v4 { display: grid; grid-template-columns: 48px minmax(0, 1fr) 80px minmax(90px, 150px); align-items: center; gap: 16px; min-width: 0; padding: 16px 2px; }
#fullLeaderboard .leader-v4:last-child { border-bottom: 0; }
#fullLeaderboard .leaderboard-columns { padding-block: 12px; color: #b9a7cb; font: 700 12px/1.4 var(--mono); }
.leaderboard-columns span:nth-last-child(-n+2) { text-align: right; }
.leaderboard-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.leaderboard-you { display: inline-block; margin-left: 9px; padding: 2px 5px; font: 700 11px/1.3 var(--mono); color: #d5f39a; border: 1px solid #cfff7545; border-radius: 4px; vertical-align: middle; }
.leaderboard-empty { padding: 28px 8px; }
.leaderboard-empty > b { font: 400 25px/1.3 var(--display); color: #e5d5f4; }
.leaderboard-empty > p { margin: 10px 0 0; max-width: 640px; font: 400 15px/1.6 var(--body); color: #c1afcf; }
@media (max-width: 700px) {
  .leaderboard-section { margin-top: 20px; }
  #leaderboardTabs { gap: 8px; }
  #leaderboardTabs button { flex: 1 1 130px; font-size: 19px; padding: 9px; }
  #leaderboardConnect { width: 100%; }
  #fullLeaderboard { padding: 8px 10px; }
  #fullLeaderboard .leader-v4 { grid-template-columns: 29px minmax(0, 1fr) 45px 65px; gap: 8px; font-size: 14px; }
  #fullLeaderboard .leaderboard-columns { font-size: 12px; }
  .leaderboard-you { display: block; width: max-content; margin: 4px 0 0; }
  .leaderboard-empty { padding: 20px 2px; }
}

.control-settings .setting-row { flex-wrap: wrap; gap: 12px; }
.control-settings .select { min-width: 0; max-width: 100%; flex: 0 1 210px; }
.control-settings .muted-note { line-height: 1.7; overflow-wrap: anywhere; }
#helpModal .controls-grid .key { min-width: 48px; width: auto; flex-shrink: 0; }