/* Launch Bay, FrameSelect, and public room screens at phone landscape. */
@font-face {
  font-family: "Chakra Petch";
  src: url("../../unit_asset/fonts/chakra-petch/ChakraPetch-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
#play-home #home-change-frame,
#play-home #home-play-action,
#play-home .home-mobile-action-copy { display: none; }
#gear-selection-menu .frame-select-back-phone { display: none; }
#gear-selection-menu .frame-select-back-desktop { display: inline; }
#play-home #home-customize .home-mobile-action-copy { margin-left: 4px; }

@media (min-width: 1001px), (pointer: fine) {
  #play-home .play-home-actions { gap: 7px; }
  #play-home #home-customize { order: 1; }
  #play-home #home-browse { order: 2; }
  #play-home .quick-play-mode { order: 3; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-width: 1000px) and (max-height: 550px) {
  body,
  button,
  input,
  select,
  body :is(p, h1, h2, h3, h4, h5, h6, span, label, strong, small, em, a, li, summary, dt, dd, legend, output, div) {
    font-family: "Chakra Petch", sans-serif !important;
  }
  button,
  a,
  input,
  select { -webkit-tap-highlight-color: transparent; }

  body[data-app-state="PLAY_HOME"] #play-home .play-home-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-rows: 44px minmax(0, 1fr);
    gap: 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0 10px 8px 10px;
    overflow: hidden;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-header {
    display: flex !important;
    min-height: 44px;
    align-items: center !important;
    justify-content: flex-start;
    padding: 0 0 0 54px;
    border-bottom: 1px solid #12303a;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-title { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-intro { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-workspace {
    display: contents;
  }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-choices { display: contents; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-frame-panel,
  body[data-app-state="PLAY_HOME"] #play-home .play-home-skin-panel,
  body[data-app-state="PLAY_HOME"] #play-home #social-chat { display: none !important; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-preview-panel {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    padding: 0;
    border-radius: 12px;
    background: #07131a;
    box-shadow: none;
  }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-preview-panel::before,
  body[data-app-state="PLAY_HOME"] #play-home .play-home-preview-panel > header { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-content {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0 10px;
    min-height: 0;
    height: 100%;
    padding: 0;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-left {
    display: contents;
  }
  body[data-app-state="PLAY_HOME"] #nav-profile-mark { font-size: 0; }
  body[data-app-state="PLAY_HOME"] #nav-profile-mark::before { content: "👤"; color: #5fe8ff; font: 18px/1 sans-serif; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-preview-panel { position: relative; }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-right { display: none !important; }
  body[data-app-state="PLAY_HOME"] #play-home #home-skill-intro { display: none !important; }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-scene {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 0;
    border: 0;
    border-radius: 11px 11px 0 0;
    background: #07131a;
    box-shadow: none;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-left .flightdeck-preview-scene img {
    width: 90%;
    max-width: 450px;
    height: 160px;
    object-fit: contain;
    transform: scale(1.15);
    filter: drop-shadow(0 0 12px #39e6ff66);
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-ring { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home #home-preview-badge { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-preview-copy {
    z-index: 1;
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 60px;
    padding: 6px 12px;
    border-top: 1px solid #17394a;
    background: #0a1820;
  }
  body[data-app-state="PLAY_HOME"] #play-home .home-preview-career-row { width: 100%; min-width: 0; overflow: hidden; }
  body[data-app-state="PLAY_HOME"] #play-home #home-preview-title { margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="PLAY_HOME"] #play-home #home-account-progression,
  body[data-app-state="PLAY_HOME"] #play-home #home-preview-mastery { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home #home-preview-role {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    font-family: "Chakra Petch", sans-serif;
    margin: 0;
    overflow: hidden;
    color: #9cc3d1;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-app-state="PLAY_HOME"] #play-home #home-change-frame {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    min-width: 162px;
    min-height: 44px;
    border-color: #39e6ff;
    background: #0a1d26;
    color: #5fe8ff;
    font-size: 13px;
    display: inline-flex;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-footer {
    display: contents;
  }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-actions {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0;
  }
  body[data-app-state="PLAY_HOME"] #play-home .flightdeck-loadout { display: none; }
  body[data-app-state="PLAY_HOME"] #play-home .quick-play-mode {
    display: grid;
    gap: 4px;
    margin: 0;
    color: #86adbc;
    font: 11px/1.2 var(--phone-font);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body[data-app-state="PLAY_HOME"] #play-home #online-mode,
  body[data-app-state="PLAY_HOME"] #play-home .play-home-actions > button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    padding: 5px 10px;
    border: 1px solid #2a6274;
    border-radius: 10px;
    background: #0d2733;
    color: #d8f3ff;
    font: 600 13px/1.2 var(--phone-font);
  }
  body[data-app-state="PLAY_HOME"] #play-home #home-play-action {
    display: inline-flex;
    height: 64px;
    min-height: 64px;
    border: 0;
    border-radius: 12px;
    background: #f2a93b;
    color: #1b1005;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .08em;
  }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-actions > #home-browse,
  body[data-app-state="PLAY_HOME"] #play-home .play-home-actions > #home-customize {
    display: block;
  }
  body[data-app-state="PLAY_HOME"] #play-home #home-play-action { display: none !important; }
  body[data-app-state="PLAY_HOME"] #play-home .play-home-actions > #home-quick-play {
    position: static;
    display: inline-flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 64px;
    min-height: 64px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #f2a93b;
    color: #1b1005;
    font: 700 22px/1.2 var(--phone-font);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body[data-app-state="PLAY_HOME"] #play-home .home-mobile-action-copy { display: inline; }
  body[data-app-state="PLAY_HOME"] #play-home #quick-play-feedback:not([hidden]) {
    position: absolute;
    z-index: 6;
    right: 10px;
    bottom: 8px;
    left: 0;
    min-height: 60px;
    padding: 8px;
    background: #07131af2;
  }

  #gear-selection-menu:not([hidden]) {
    position: fixed;
    z-index: 125;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: #050c12;
  }
  #gear-selection-menu .gear-menu-backdrop { display: none; }
  #gear-selection-menu .gear-selection-dialog {
    display: grid;
    grid-template-rows: 52px minmax(0, 1fr);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0 12px 10px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #050c12;
  }
  #gear-selection-menu .gear-selection-dialog > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 52px;
    margin: 0;
    padding: 0 8px;
    border-bottom: 1px solid #12303a;
    background: #050c12;
  }
  #gear-selection-menu .gear-selection-dialog > header > .frame-select-back {
    display: inline-flex;
    width: auto;
    min-width: 72px;
    height: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #2a6274;
    border-radius: 10px;
    background: #0d2733;
    color: #d8f3ff;
    font: 600 13px/1.2 var(--phone-font);
  }
  #gear-selection-menu .gear-selection-dialog > header > div { grid-column: 2; grid-row: 1; }
  #gear-selection-menu .gear-selection-dialog > header > .frame-select-back { grid-column: 1; grid-row: 1; }
  #gear-selection-menu .frame-select-back-phone { display: inline; }
  #gear-selection-menu .frame-select-back-desktop { display: none; }
  #gear-selection-menu .gear-selection-dialog > header > div { min-width: 0; }
  #gear-selection-menu .gear-selection-dialog .screen-eyebrow,
  #gear-selection-menu .gear-selection-subtitle { display: none; }
  #gear-selection-menu .gear-selection-dialog h2 { margin: 0; font-size: 18px; }
  #gear-selection-menu .gear-menu-columns {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 250px;
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    padding: 10px 0 0;
    overflow: hidden;
  }
  #gear-selection-menu .gear-class-panel,
  #gear-selection-menu .gear-skins-panel,
  #gear-selection-menu .gear-preview-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background: transparent;
  }
  #gear-selection-menu .gear-class-panel > header,
  #gear-selection-menu .gear-skins-panel > header,
  #gear-selection-menu .gear-preview-panel > header { display: none; }
  #gear-selection-menu #gearlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
  }
  #gear-selection-menu .gear-equip-card { min-height: 60px; }
  #gear-selection-menu .skin-browser-controls { display: flex; flex-direction: row; gap: 8px; padding: 0 0 8px; }
  #gear-selection-menu .skin-browser-search { display: none; }
  #gear-selection-menu .skin-filter-tabs { display: flex; gap: 6px; }
  #gear-selection-menu .skin-filter-tabs button { min-width: 44px; min-height: 44px; padding: 0 10px; }
  #gear-selection-menu .skin-browser-content { display: block; flex: 1; min-height: 0; padding: 0; overflow: hidden; }
  #gear-selection-menu .skin-family-list,
  #gear-selection-menu .skin-variant-panel > header { display: none; }
  #gear-selection-menu .skin-variant-panel { display: flex; height: 100%; min-height: 0; flex-direction: column; }
  #gear-selection-menu #skin-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(70px, 1fr);
    align-content: start;
    gap: 6px;
    min-height: 0;
    padding: 0 2px 2px 0;
    overflow-y: auto;
  }
  #gear-selection-menu #skin-list > .skin-option { min-height: 70px; padding: 5px; }
  #gear-selection-menu #skin-list > .skin-option img { width: 34px; height: 34px; }
  #gear-selection-menu #skin-list > .skin-option span,
  #gear-selection-menu #skin-list > .skin-option small { font-size: 11px; line-height: 1.1; }
  #gear-selection-menu .gear-preview-panel {
    gap: 6px;
    padding: 8px;
    border: 1px solid #2a6274;
    border-radius: 12px;
    background: #081820;
  }
  #gear-selection-menu .gear-preview-stage { flex: none; min-height: 68px; height: 68px; margin: 0; }
  #gear-selection-menu .gear-preview-stage img { width: 88px; max-width: 88px; height: 68px; object-fit: contain; }
  #gear-selection-menu .gear-preview-identity { max-height: 54px; min-height: 0; padding: 0; overflow: hidden; }
  #gear-selection-menu .gear-preview-identity h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: 12px; line-height: 1.15; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #gear-selection-menu .gear-preview-identity #geardescription { display: none; }
  #gear-selection-menu .gear-preview-stats { display: block; flex: none; min-height: 94px; margin: 0; padding: 0; overflow: hidden; }
  #gear-selection-menu .gear-preview-stats h4 { margin: 0 0 4px; font-size: 11px; }
  #gear-selection-menu #gear-status-bars.gear-status-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  #gear-selection-menu .gear-status-column[data-status-group="per-point"] { display: none; }
  #gear-selection-menu .gear-status-column[data-status-group="vitals"],
  #gear-selection-menu .gear-status-rows { display: contents; }
  #gear-selection-menu .gear-status-column h5 { display: none; }
  #gear-selection-menu .gear-status-row { display: none; }
  #gear-selection-menu .gear-status-row[data-status-key="hp"],
  #gear-selection-menu .gear-status-row[data-status-key="shield"],
  #gear-selection-menu .gear-status-row[data-status-key="speed"],
  #gear-selection-menu .gear-status-row[data-status-key="handling"] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; min-width: 0; align-items: center; line-height: 1.15; }
  #gear-selection-menu .gear-status-row-heading { display: contents; }
  #gear-selection-menu .gear-status-row-heading small,
  #gear-selection-menu .gear-status-row-heading b { min-width: 0; font-size: 11px; }
  #gear-selection-menu .gear-status-row[data-status-group="vitals"] .gear-status-row-heading b { font-size: 11px; letter-spacing: 0; }
  #gear-selection-menu .gear-status-track,
  #gear-selection-menu .gear-status-note { display: none; }
  #gear-selection-menu .gear-preview-actions { display: flex; min-height: 48px; margin-top: auto; padding: 0; border-top: 0; }
  #gear-selection-menu .gear-preview-actions > span { display: none; }
  #gear-selection-menu .skin-equip-preview,
  #gear-selection-menu .skin-purchase-option { box-sizing: border-box; width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: #f2a93b; color: #1b1005; font: 700 16px/1.2 var(--phone-font); }

  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    padding: 0 10px;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-header { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title {
    display: flex;
    flex: none;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0 0 0 4px;
    border-bottom: 1px solid #12303a;
    background: transparent;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-copy { display: flex; align-items: center; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-heading { gap: 8px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-icon { width: 24px; height: 24px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser #room-browser-heading { margin: 0; font-size: 18px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-copy > p,
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready,
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-actions > #rooms-hangar { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 174px;
    gap: 10px;
    min-height: 0;
    height: auto;
    padding: 10px 0 8px;
    overflow: hidden;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory,
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #17394a;
    border-radius: 12px;
    background: #0a1820;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    min-height: 38px;
    align-items: center;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-search { flex: 1 1 120px; min-width: 0; height: 36px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-search input { min-width: 0; font-size: 12px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters { display: flex; flex: 0 0 auto; gap: 3px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters button { min-width: 42px; min-height: 36px; padding: 0 5px; font-size: 10px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory-kind,
  body[data-app-state="ROOM_BROWSER"] #room-browser #refresh-rooms { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser #room-list { display: grid; align-content: start; gap: 6px; min-height: 0; overflow-y: auto; }
  body[data-app-state="ROOM_BROWSER"] #room-browser #room-list > .room-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 48px 74px;
    grid-template-rows: 22px 20px;
    align-items: center;
    gap: 2px 7px;
    min-height: 56px;
    padding: 3px 8px;
    border: 1px solid #17394a;
    border-radius: 10px;
    background: #0a1820;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-art,
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-description { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-copy,
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-details { display: contents; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-copy h3 { grid-column: 1; grid-row: 1; min-width: 0; margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-mode { grid-column: 2; grid-row: 1 / 3; padding: 3px 6px; border-radius: 6px; background: #11313e; color: #9cc3d1; font-size: 10px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-map { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-status { grid-column: 1; grid-row: 2; min-width: 0; overflow: hidden; color: #9cb7c4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-population { grid-column: 3; grid-row: 1 / 3; color: #d8f3ff; font-size: 11px; text-align: center; white-space: nowrap; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-join { box-sizing: border-box; grid-column: 4; grid-row: 1 / 3; width: 74px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 6px; font-size: 11px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-height: 150px;
    padding: 12px;
    border: 1px dashed #2a6274;
    border-radius: 10px;
    background: #07131a;
    text-align: center;
  }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-mark { display: block; color: #5fe8ff; font-size: 28px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty h2 { margin: 0; font-size: 17px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty p { max-width: 40ch; margin: 0; font-size: 12px; line-height: 1.3; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-actions { display: flex; }
  body[data-app-state="ROOM_BROWSER"] #nav-primary #home-quick-play { display: none !important; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel > div:first-child > .room-panel-eyebrow,
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel .create-room-copy,
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-summary,
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-assist { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel h2 { margin: 0; font-size: 15px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel > div:first-child { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-browser #rooms-quick-play { width: 100%; min-height: 64px; height: 64px; padding: 4px; border: 0; border-radius: 12px; background: #f2a93b; color: #1b1005; font: 700 17px/1.2 var(--phone-font); }
  body[data-app-state="ROOM_BROWSER"] #room-browser #open-room-create { width: 100%; min-height: 48px; padding: 5px; font-size: 12px; }
  body[data-app-state="ROOM_BROWSER"] #room-browser #room-join-note { margin: 0; color: #9cb7c4; font-size: 11px; line-height: 1.3; }

  body[data-app-state="ROOM_BROWSER"] #room-create-dialog[open] {
    position: fixed;
    inset: 8px 8px 8px calc(var(--phone-size-rail) + 8px);
    display: grid;
    grid-template-rows: 46px 18px minmax(0, 1fr);
    box-sizing: border-box;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 8px 12px 10px;
    overflow: hidden;
    border: 1px solid #2a6274;
    border-radius: 12px;
    background: #0a1820;
  }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog::backdrop { background: #03060ac0; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog > header { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog > header .room-panel-eyebrow { display: none; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog .room-create-dialog-copy { display: block; margin: 0; overflow: hidden; color: #9bb8c3; font-size: 9px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog > header h2 { margin: 0; font-size: 18px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: 54px 54px 54px 54px 44px;
    grid-template-areas: "name name" "mode map" "duration teams" "ai level" "submit submit";
    align-content: space-between;
    gap: 5px 10px;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create > label { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; margin: 0; font-size: 12px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-name-field { grid-area: name; grid-template-columns: 108px minmax(0, 1fr); }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-mode-field { grid-area: mode; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-map-field { grid-area: map; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-duration-field { grid-area: duration; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-team-balance-field { grid-area: teams; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-ai-fill-field { grid-area: ai; display: flex; flex-direction: row; min-height: 44px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-ai-level-field { grid-area: level; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create input:not([type="checkbox"]),
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create select:not(.room-segment-source) { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; min-height: 44px; padding: 5px 8px; font-size: 12px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-segmented { display: flex; min-width: 0; gap: 3px; overflow: hidden; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-segmented button { flex: 1 1 0; min-width: 0; min-height: 44px; height: 44px; padding: 0 4px; font-size: 11px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create .room-segment-source { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create input[type="checkbox"] { width: 22px; height: 22px; }
  body[data-app-state="ROOM_BROWSER"] #room-create-dialog #room-create > button[type="submit"] { grid-area: submit; min-height: 44px; height: 44px; }

  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas: "head head" "roster side";
    gap: 6px 10px;
    box-sizing: border-box;
    width: 100%;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0;
    padding: 0 12px 8px !important;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #050c12;
  }
  body[data-app-state="ROOM_LOBBY"] #room-lobby { top: 0 !important; bottom: 0; display: block !important; height: 100dvh; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body > header { grid-area: head; display: grid; grid-template-columns: 88px minmax(320px, 1.15fr) minmax(0, 1fr); min-height: 56px; align-items: center; gap: 8px; margin: 0; padding: 0; border-bottom: 1px solid #12303a; background: transparent; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body > header > div { display: contents; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body > header .screen-eyebrow { display: none; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body > header #lobby-room-name { min-width: 0; width: 100%; max-width: 100%; height: auto; max-height: 54px; margin: 0; overflow: visible; font-size: 13px; line-height: 1.15; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #room-leave { box-sizing: border-box; min-width: 70px; min-height: 44px; padding: 0 8px; font: 600 13px/1.2 var(--phone-font); white-space: nowrap; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #room-details { display: block !important; min-width: 0; margin: 0; overflow: hidden; border: 0; background: transparent; color: #9bb8c3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-status { display: none !important; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-last-result,
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-view-results,
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-gears,
  body[data-app-state="ROOM_LOBBY"] #room-lobby #room-team-label { display: none !important; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #room-roster { grid-area: roster; display: flex; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-columns { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 10px; min-height: 0; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 6px; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel h3 { flex: none; margin: 0; font-size: 11px; line-height: 1.2; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel[data-team="PLAYER_TEAM"] h3 { color: #5fe8ff; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel[data-team="ENEMY_TEAM"] h3 { color: #ff6f9c; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 4px; min-height: 0; overflow-y: auto; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-name { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 26px 22px; gap: 5px; min-width: 0; min-height: 44px; align-items: center; padding: 4px 10px; overflow: hidden; border-radius: 8px; background: #0a1820; color: #d8f3ff; font-size: 12px; line-height: 1.2; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-display-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-frame { color: #9cb7c4; font-size: 11px; text-align: center; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-ready { color: #59e2ba; font-size: 15px; text-align: center; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel .ai-slots { flex: none; margin: 0; padding: 6px 10px; border-radius: 8px; background: #07131a; color: #7193a0; font-size: 11px; opacity: .7; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout { grid-area: side; display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 8px; margin: 0; padding: 10px; overflow: hidden; border: 1px solid #17627a; border-radius: 10px; background: #061722ed; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout > span { flex: none; color: #5fe8ff; font-size: 11px; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items { display: flex; flex: none; width: 100%; min-width: 0; min-height: 0; height: auto; max-height: none; flex-direction: column; gap: 8px; overflow: visible; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item { display: none; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-std,
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-adv { box-sizing: border-box; display: block; flex: none; width: 100%; min-width: 0; min-height: 22px; max-height: 34px; height: auto; padding: 0; overflow: hidden; border: 0; background: transparent; color: #d8f3ff; font-size: 11px; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item img { display: none; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-std span::before { content: "STD "; color: #9cb7c4; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-adv span::before { content: "ADV "; color: #9cb7c4; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item span { display: block; max-width: 100%; overflow: hidden; font-size: 11px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout { display: none; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-customize { display: block; box-sizing: border-box; width: 100%; min-height: 44px; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby #room-start { display: block; width: 100%; min-width: 0; min-height: 56px; height: 56px; margin-top: auto; border: 0; border-radius: 12px; background: #f2a93b; color: #1b1005; font-size: 16px; transform: none; }
  body[data-app-state="ROOM_LOBBY"] #room-lobby .lobby-footer { display: none; }
}