/* Room browser, setup dialog, and lobby share the neon room-directory language. */
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;
 align-items:center;
 justify-content:space-between;
 gap:24px;
 margin-top:74px;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-copy {
 min-width:0;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-actions {
 display:flex;
 flex:none;
 align-items:center;
 gap:12px;
}
body[data-app-state="ROOM_BROWSER"] #room-browser #rooms-hangar {
 min-height:44px;
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-sm);
 background:var(--nd-surface-1);
 color:var(--nd-text-1);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-heading {
 display:flex;
 align-items:center;
 gap:14px;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-icon {
 width:42px;
 height:42px;
 object-fit:contain;
 filter:drop-shadow(0 0 12px #3ff3ff66);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title h1 {
 color:var(--nd-text-1);
 font-family:var(--nd-font-display);
 text-shadow:0 0 20px #3ff3ff35;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title p {
 color:var(--nd-text-2);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory,
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel {
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-md);
 background:linear-gradient(145deg,#0d2029f5,#07131bf7 76%);
 box-shadow:inset 0 1px #3ff3ff14,0 12px 32px #0008;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory-toolbar {
 border-color:#285462;
 background:linear-gradient(90deg,#0b2029,#08151d);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-search,
body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters {
 border-color:#285462;
 border-radius:var(--nd-radius-sm);
 background:var(--nd-surface-0);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters button {
 color:var(--nd-text-2);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters button[aria-pressed="true"] {
 background:#0c333b;
 color:var(--nd-accent);
 box-shadow:inset 0 -2px var(--nd-accent),0 0 14px #3ff3ff25;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-refresh {
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-sm);
 color:var(--nd-accent);
}
body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {
 border-color:#285462;
 border-radius:var(--nd-radius-md);
 background:linear-gradient(110deg,#10232d,#08151d 72%);
 box-shadow:inset 3px 0 var(--nd-accent),0 8px 20px #0005;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-copy h3 {
 color:var(--nd-text-1);
 font-family:var(--nd-font-heading);
 text-transform:none;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-mode,
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-map {
 min-height:24px;
 border-color:#3ff3ff66;
 border-radius:999px;
 background:#062029;
 color:var(--nd-accent);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-status {
 border-color:#3bdcab66;
 border-radius:999px;
 background:#082b2c;
 color:#79f0c1;
}
body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item img {
 box-sizing:content-box;
 width:24px;
 height:24px;
 min-width:24px;
 min-height:24px;
 object-fit:contain;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-status-in_progress {
 border-color:#ffb34777;
 background:#392718;
 color:#ffd28a;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-status-finished {
 border-color:#718f99;
 background:#18252c;
 color:var(--nd-text-2);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-join,
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-cta,
body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"] {
 min-height:48px;
 border:1px solid var(--nd-primary);
 border-radius:var(--nd-radius-sm);
 background:linear-gradient(180deg,#50351a,#2a1d12);
 color:#ffe0a8;
 font-weight:800;
 letter-spacing:.04em;
 text-shadow:none;
 box-shadow:0 0 14px #ffb34733;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-join:hover:not(:disabled),
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-cta:hover,
body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"]:hover {
 border-color:var(--nd-accent);
 box-shadow:var(--nd-glow);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-join:disabled {
 border-color:#3b5058;
 background:#17242a;
 color:var(--nd-text-3);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel {
 gap:18px;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .room-panel-eyebrow {
 color:var(--nd-accent);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel h2,
body[data-app-state="ROOM_BROWSER"] #room-create-dialog h2 {
 color:var(--nd-text-1);
 font-family:var(--nd-font-heading);
 text-transform:none;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-copy,
body[data-app-state="ROOM_BROWSER"] #room-create-dialog .room-create-dialog-copy {
 color:var(--nd-text-2);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-summary {
 margin-top:4px;
 border-color:#285462;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-mode-card {
 border-color:#285462;
 border-radius:var(--nd-radius-md);
 background:linear-gradient(155deg,#10232d,#08151d);
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-mode-card[aria-pressed="true"],
body[data-app-state="ROOM_BROWSER"] #room-browser .create-mode-card.is-recommended {
 border-color:var(--nd-accent);
 box-shadow:inset 0 0 22px #3ff3ff1c,0 0 14px #3ff3ff25;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-assist {
 border-color:#285462;
 border-radius:var(--nd-radius-sm);
 background:#08171f;
}
body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-cta {
 width:100%;
 min-height:56px;
 margin-top:auto;
 color:#ffe0a8;
 text-transform:none;
}
body[data-app-state="ROOM_BROWSER"] #room-create-dialog {
 max-height:calc(100dvh - 40px);
 overflow-y:auto;
 border-color:var(--nd-accent);
 border-radius:var(--nd-radius-md);
 background:linear-gradient(145deg,#10232d,#08151d 76%);
 color:var(--nd-text-1);
}
body[data-app-state="ROOM_BROWSER"] #room-create-dialog>header {
 border-color:var(--nd-border);
}
body[data-app-state="ROOM_BROWSER"] #room-create-close {
 flex:none;
 border-radius:var(--nd-radius-sm);
}
body[data-app-state="ROOM_BROWSER"] #room-create label {
 color:var(--nd-text-2);
}
body[data-app-state="ROOM_BROWSER"] #room-create input:not([type="checkbox"]),
body[data-app-state="ROOM_BROWSER"] #room-create select {
 min-width:0;
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-sm);
 background:var(--nd-surface-0);
 color:var(--nd-text-1);
}
body[data-app-state="ROOM_BROWSER"] #room-create .room-name-field,
body[data-app-state="ROOM_BROWSER"] #room-create .room-name-field input {
 position:relative;
 z-index:1;
}
body[data-app-state="ROOM_BROWSER"] #room-create .room-name-field input {
 width:100%;
}
body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"] {
 width:100%;
 min-height:50px;
 margin-top:0;
}

body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body {
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-lg);
 background:linear-gradient(145deg,#10232df7,#08151df7 72%);
 box-shadow:inset 0 1px #3ff3ff14,0 18px 40px #0009;
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header {
 align-items:flex-start;
 gap:18px;
 border-color:var(--nd-border);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header>div {
 flex:1 1 auto;
 min-width:0;
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header h1 {
 max-width:100%;
 overflow:visible;
 color:var(--nd-text-1);
 font-family:var(--nd-font-display);
 line-height:1.12;
 letter-spacing:.04em;
 text-overflow:clip;
 white-space:normal;
 overflow-wrap:anywhere;
}
body[data-app-state="ROOM_LOBBY"] #room-lobby #room-leave {
 flex:none;
 min-width:120px;
 min-height:48px;
 border:1px solid var(--nd-border);
 border-radius:var(--nd-radius-sm);
 background:var(--nd-surface-1);
 color:var(--nd-text-1);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-status {
 display:inline-flex;
 width:max-content;
 max-width:100%;
 align-items:center;
 margin:12px 0 4px;
 padding:4px 10px;
 border:1px solid #3bdcab66;
 border-radius:999px;
 background:#082b2c;
 color:#79f0c1;
 font:700 12px/1.3 var(--nd-font-label);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby #room-details.nd-chip {
 display:inline-flex;
 width:fit-content;
 max-width:100%;
 min-height:30px;
 margin:2px 0 10px;
 padding:5px 10px;
 border-radius:var(--nd-radius-sm);
 color:var(--nd-text-2);
 white-space:normal;
 overflow-wrap:anywhere;
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel {
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-md);
 background:linear-gradient(145deg,#10232d,#08151d);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel h3 {
 color:var(--nd-accent);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .team-player-name {
 border:1px solid #285462;
 border-radius:var(--nd-radius-sm);
 background:#07131b;
 color:var(--nd-text-1);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout {
 border-color:var(--nd-border);
 border-radius:var(--nd-radius-md);
 background:linear-gradient(90deg,#10232d,#08151d 70%);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby .lobby-footer {
 border-color:var(--nd-border);
}
body[data-app-state="ROOM_LOBBY"] #room-lobby #room-start,
body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-customize {
 min-height:48px;
 border-color:var(--nd-primary);
 border-radius:var(--nd-radius-sm);
 background:linear-gradient(180deg,#50351a,#2a1d12);
 color:#ffe0a8;
 box-shadow:0 0 14px #ffb34733;
}

@media (max-width:900px) and (orientation:landscape) {
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-shell {
  height:calc(100dvh - 116px);
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser #rooms-hangar {
  min-height:44px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-header {
  display:none;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-breadcrumb img {width:36px;height:32px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #rooms-hangar {min-height:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  position:static;
  width:auto;
  height:auto;
  margin:38px 0 0;
  padding:4px 3px 6px;
  overflow:visible;
  clip-path:none;
  white-space:normal;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-actions {gap:6px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready {min-width:0;gap:5px;padding:3px 6px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready img {width:36px;height:32px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready b {font-size:11px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready small {font-size: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-title p {font-size:12px;line-height:1.25}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:5px;
  overflow:hidden;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory {flex:1 1 auto;min-height:0;overflow:hidden}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list {min-height:0;overflow-y:auto;overscroll-behavior:contain}
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel {display:flex;flex:none;min-height:0;justify-content:flex-end;padding:0;border:0;background:none;box-shadow:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel>div {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-cta {width:100%;min-height:44px;margin:0;padding:0 8px;font-size:11px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list>.room-card {
  grid-template-columns:minmax(70px,24%) minmax(0,1fr) 72px;
  gap:5px;
  min-height:45px;
  height:45px;
  max-height:45px;
  padding:3px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-art {height:40px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-copy {gap:3px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-copy h3 {font-size:12px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-details {gap:3px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-mode,
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-map {min-height:19px;padding-inline:5px;font-size:9px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-status {min-height:18px;padding-inline:5px;font-size:8px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-card-join {min-height:44px;padding-inline:4px;font-size:9px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory {padding:0}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory-toolbar {min-height:42px;padding:2px 4px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-search,
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters {height:44px;min-height:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-mode-filters button {height:44px;min-height:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-refresh {width:44px;height:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list {gap:2px;padding:3px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-mark {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty p {font-size:10px;line-height:1.2}
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel {
  display:flex;
  min-height:0;
  justify-content:flex-end;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
 }
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-panel>div {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .create-room-cta {margin-top:auto;padding-inline:8px;font-size:11px}
 body[data-app-state="ROOM_BROWSER"] #room-create-dialog {
  width:calc(100vw - 24px);
  max-height:calc(100dvh - 12px);
  padding:10px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create-dialog>header {
  min-height:42px;
  padding-bottom:6px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"name name" "mode map" "duration ai" "difficulty balance" "submit submit";
  gap:6px 10px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create label {
  gap:3px;
  font-size:11px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create input:not([type="checkbox"]),
 body[data-app-state="ROOM_BROWSER"] #room-create select {
  height:40px;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create .room-ai-fill-field {
  min-height:40px;
  padding-top:0;
 }
 body[data-app-state="ROOM_BROWSER"] #room-create button[type="submit"] {
  height:44px;
  min-height:44px;
 }
}

/* Public rooms: compact but readable phone landscape presentation. */
@media (max-width:1000px) and (max-height:550px) and (orientation:landscape) and (pointer:coarse) {
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title {margin-top:0;padding:0 3px 3px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title p {margin:2px 0 0;font-size:12px;line-height:1.2}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-heading {gap:6px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-icon {width:22px;height:22px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title h1 {font-size:16px;line-height:1.1}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-columns:has(.room-empty) .create-room-panel {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-directory {display:flex;flex-direction:column}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-list:has(.room-empty) {display:flex;flex:1 1 auto;align-items:stretch;overflow:auto;padding:6px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty {display:grid;flex:1 1 auto;place-content:center;justify-items:center;gap:6px;min-height:0;padding:12px;border:1px solid #216079;border-radius:10px;background:linear-gradient(145deg,#102b38,#071721);box-shadow:inset 0 1px #3ff3ff14,0 8px 20px #0005;text-align:center}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-mark {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty h2 {margin:0;color:#f0f8fc;font-size:18px;line-height:1.2}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty p {max-width:44ch;margin:0;color:#b8d0d9;font-size:12px;line-height:1.35}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(100%,460px);margin-top:3px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-actions button {box-sizing:border-box;flex:1 1 180px;min-width:0;min-height:48px;padding:8px 12px;border:1px solid #d2a849;border-radius:6px;background:linear-gradient(140deg,#59441d,#2d2515);color:#ffe29a;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-empty-actions .room-empty-create-room {border-color:#21b8d2;background:linear-gradient(140deg,#0d4251,#092331);color:#d7f8ff}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create-dialog {box-sizing:border-box;width:min(680px,calc(100vw - 24px));max-width:680px;max-height:calc(100dvh - 12px);padding:10px 12px;overflow:auto;overscroll-behavior:contain}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create-dialog>header {min-height:34px;padding-bottom:5px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create-dialog>header .room-panel-eyebrow {display:none}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-create-dialog-copy {display:block;margin:4px 0 6px;font-size:11px;line-height:1.25}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"name name" "mode duration" "map difficulty" "ai balance" "submit submit";align-content:start;gap:4px 8px;padding:6px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create label {display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;color:#c3d8e0;font-size:12px;line-height:1.2}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create input:not([type="checkbox"]),
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create select {box-sizing:border-box;width:100%;min-width:0;height:36px;min-height:36px;padding:4px 8px;font-size:14px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-map-field {grid-area:map}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-ai-fill-field {display:flex;flex-direction:row;align-items:center;gap:8px;min-height:36px;font-size:12px}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-ai-fill-field input {width:22px;height:22px;margin:0}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-segmented {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-width:0}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-segment-source {position:absolute;width:1px;height:1px;min-height:1px;padding:0;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-segmented button {grid-column:auto;box-sizing:border-box;min-width:0;min-height:44px;padding:5px 3px;border:1px solid #285462;border-radius:5px;background:#071b27;color:#d7e8ed;font-size:13px;font-weight:800;line-height:1.1;white-space:nowrap}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create .room-segmented button[aria-pressed="true"] {border-color:#3ff3ff;background:#0c333b;color:#8af4ff;box-shadow:inset 0 0 14px #3ff3ff20}
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create button[type="submit"] {position:sticky;bottom:0;z-index:2;grid-area:submit;box-sizing:border-box;width:100%;min-height:48px;margin:0;border-radius:6px;font-size:15px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby {bottom:0}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body {height:100dvh;max-height:100dvh;padding:8px 10px;grid-template-columns:minmax(0,1fr);grid-template-rows:40px auto minmax(40px,1fr) 62px 44px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header {display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"leave title";align-items:center;gap:8px;min-height:40px;padding:0 0 5px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header>div {grid-area:title;min-width:0}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header .screen-eyebrow {font-size:11px;line-height:1.1}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header h1 {width:100%;max-width:none;height:auto;max-height:none;overflow:visible;font-size:18px;line-height:1.15;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;word-break:break-all}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #room-leave {grid-area:leave;box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;font-size:23px;line-height:1}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout {transform:none;grid-template-columns:minmax(0,1fr);grid-template-rows:14px 40px;align-items:center;gap:2px;min-height:0;padding:4px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout>span {font-size:11px;line-height:1.1}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items {grid-column:1;grid-row:2;width:100%;height:40px;min-height:40px;overflow-x:auto}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item {box-sizing:border-box;flex:0 0 54px;grid-template-rows:36px 10px;gap:1px;min-width:54px;height:40px;min-height:40px;padding:1px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item img {box-sizing:border-box;width:36px;height:36px;min-width:36px;min-height:36px;object-fit:contain}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item span {font-size:9px;line-height:1.05}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-customize,
 body[data-app-state="ROOM_LOBBY"] #room-lobby #room-start {box-sizing:border-box;min-width:120px;min-height:44px;height:44px;padding:6px 10px;font-size:12px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-customize {border-color:#1a839e;background:#092432;color:#a8eff8;box-shadow:none}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .lobby-footer {min-height:44px;padding:0;gap:8px}
}

@media (max-width:400px) and (orientation:portrait) {
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-breadcrumb b {
  display:none;
 }
}

@media (max-width:760px) and (orientation:portrait) {
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create button[type="submit"] {
  box-sizing:border-box;
  height:44px;
  min-height:44px;
 }
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item img {
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
 }
}

@media (max-width:1000px) and (max-height:550px) and (orientation:landscape) and (pointer:coarse) {
 body[data-app-state="ROOM_BROWSER"] #room-browser #room-create>button[type="submit"] {box-sizing:border-box;min-height:44px}
}

body[data-app-state="ROOM_BROWSER"] #room-browser #room-create-dialog #room-mode,
body[data-app-state="ROOM_BROWSER"] #room-browser #room-create-dialog #room-map {
 height:44px;
 min-height:44px;
}

@media (max-width:900px) and (orientation:portrait) {
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title {display:flex;align-items:stretch;flex-direction:column;gap:8px;margin-top:44px}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-title-actions {justify-content:space-between}
 body[data-app-state="ROOM_BROWSER"] #room-browser .room-browser-ready {min-width:0;flex:1}
 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:32px;height:32px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body>header h1 {font-size:clamp(20px,5vw,28px)}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #room-leave {min-width:92px;min-height:44px}
}

@media (max-width:900px) and (orientation:landscape) {
 body[data-app-state="ROOM_LOBBY"] #room-lobby {
  bottom:60px;
 }
 body[data-app-state="ROOM_LOBBY"] #room-lobby .screen-body {
  height:calc(100dvh - 70px);
  max-height:calc(100dvh - 70px);
  grid-template-rows:36px auto minmax(40px,1fr) 86px 42px;
 }
 body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel h3 {margin:0 0 4px;font-size:11px;line-height:1.15}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .team-panel .ai-slots {box-sizing:border-box;margin:2px 0 0;padding:4px;font-size:11px;line-height:1.2}
 body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout {
  transform:none;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:14px 40px;
  align-items:center;
  gap:2px;
  padding:4px;
 }
 body[data-app-state="ROOM_LOBBY"] #room-lobby .saved-loadout>span {grid-column:1;grid-row:1;font-size:11px;line-height:1.1}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items {box-sizing:border-box;grid-column:1;grid-row:2;width:100%;max-width:100%;height:40px;min-height:40px;overflow-x:auto;}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item {grid-template-rows:36px;gap:0;height:40px;min-height:40px}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-loadout-items .saved-loadout-item span {display:none}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-ready-status {display:none}
 body[data-app-state="ROOM_LOBBY"] #room-lobby #lobby-hangar {
  box-sizing:border-box;
  grid-column:1;
  grid-row:3;
  justify-self:start;
  min-width:160px;
  width:max-content;
  min-height:44px;
  height:44px;
  margin:0;
  padding-inline:8px;
  position:relative;
  z-index:1;
 }
}