/* The start screen is a game console, using the same blue/cyan pixel frame
   and warm yellow actions as the approved B2 board. Existing form controls,
   city carousel, translations and room actions are retained intact. */
body[data-ui] #lobby,
body[data-ui] #room-panel {
  --lobby-navy: #092669;
  --lobby-blue: #188de9;
  --lobby-cyan: #6addff;
  --menu-ink: #092669;
  --menu-muted: #365780;
  background: #1d9cef;
  border: 6px solid var(--lobby-navy);
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #a3ecff, inset 0 0 0 7px #0476d8, 5px 6px 0 #071d52;
  clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 10px calc(100% - 10px), 0 calc(100% - 10px));
  color: var(--lobby-navy);
  scrollbar-color: #d9f6ff #1466b7;
  scrollbar-width: thin;
  backdrop-filter: none;
  padding: 18px;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

body[data-ui] #lobby {
  left: 28px;
  bottom: 26px;
  width: 454px;
  max-height: calc(100dvh - 208px);
}

body[data-ui] #lobby .city-picker { margin: 0 0 10px; }
body[data-ui] #lobby .city-picker-head {
  min-height: 30px;
  padding: 0 2px 8px;
  color: #fff9c7;
  font-size: 17px;
  font-weight: 850;
  text-shadow: 2px 2px #124890;
}
body[data-ui] #lobby .city-picker-head > span { display: flex; align-items: center; gap: 8px; }
body[data-ui] #lobby .city-picker-head > span::before {
  content: '';
  width: 12px;
  height: 14px;
  display: block;
  background: #ffe049;
  border: 2px solid #103273;
  box-shadow: 3px 3px #103273, inset 0 3px #fff7ba;
}
body[data-ui] #lobby .city-picker-head button {
  width: 31px;
  height: 27px;
  background: #d9f7ff;
  border: 2px solid #092669;
  color: #092669;
  box-shadow: inset 0 -3px #82d8fa, 2px 2px #0751a3;
  font-size: 26px;
  line-height: 19px;
  padding: 0;
  border-radius: 0;
}
body[data-ui] #lobby .city-strip { gap: 10px; padding: 3px 12px 5px; scroll-padding: 12px; }
body[data-ui] #lobby .city-slide {
  flex-basis: calc(100% - 26px);
  height: 123px;
  border: 3px solid #0b3274;
  box-shadow: 2px 3px #0d4b94;
  background: #84dff6;
}
body[data-ui] #lobby .city-slide img { image-rendering: auto; }
body[data-ui] #lobby .city-slide[aria-pressed="true"] {
  border: 3px solid #fff3a0;
  box-shadow: 0 0 0 2px #f7b621, 3px 4px #0c3273;
}
body[data-ui] #lobby .city-slide::after {
  height: 32px;
  border-top: 3px solid #0b5cb4;
  background: #dff8ff;
}
body[data-ui] #lobby .city-slide span { bottom: 5px; left: 12px; font-size: 19px; font-weight: 900; }
body[data-ui] #lobby .profile-row { margin: 0 0 8px; gap: 7px; }
body[data-ui] #lobby .profile-row input {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 14px;
  font-weight: 700;
  background: #ecfbff;
  border: 2px solid #0c397c;
  box-shadow: inset 2px 2px #b4e6f7, 2px 2px #0a62b9;
}
body[data-ui] #lobby .profile-row > span:empty { display: none; }
body[data-ui] #lobby .profile-row > span { background: #ffdf48; padding: 5px; color: #092669; font-weight: 800; border: 2px solid #092669; }

body[data-ui] #lobby .character-choice {
  min-height: 75px;
  padding: 4px 12px 4px 8px;
  margin: 0 0 10px;
  gap: 12px;
  border: 3px solid #0a367d;
  background: linear-gradient(90deg, #b7f0ff 0 82px, #edfcff 82px);
  box-shadow: inset 0 3px #fff, inset 0 -4px #79cff4, 3px 3px #0751a3;
}
body[data-ui] #lobby .character-choice img {
  width: 62px;
  height: 65px;
  object-fit: contain;
  background: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 #0c5ca145);
}
body[data-ui] #lobby .character-choice-copy { gap: 4px; }
body[data-ui] #lobby .character-choice-copy small { font-size: 11px; color: #356891; font-weight: 700; }
body[data-ui] #lobby .character-choice-copy strong { font-size: 18px; font-weight: 900; color: #092669; }
body[data-ui] #lobby .character-choice > span:last-child {
  font-size: 12px;
  font-weight: 800;
  color: #08427a;
  padding: 5px 6px;
  background: #b6eafa;
  border: 2px solid #78bddf;
}

body[data-ui] #lobby .tier-list { margin: 0 0 10px; gap: 8px; }
body[data-ui] #lobby .tier {
  --tier-main: #29b97b;
  --tier-pale: #d9ffce;
  --tier-deep: #11704d;
  min-height: 82px;
  gap: 4px;
  padding: 7px 4px 6px;
  border: 3px solid #0b3274;
  border-top: 7px solid var(--tier-main);
  background: var(--tier-pale);
  color: #092669;
  box-shadow: inset 0 3px #ffffffbb, inset 0 -4px color-mix(in srgb, var(--tier-main) 45%, white), 2px 3px #0e54a2;
}
body[data-ui] #lobby .tier[data-tier="standard"] { --tier-main: #9367ec; --tier-pale: #eee1ff; --tier-deep: #6036a8; }
body[data-ui] #lobby .tier[data-tier="expert"] { --tier-main: #ffc229; --tier-pale: #fff1b2; --tier-deep: #93600c; }
body[data-ui] #lobby .tier > span:first-child { font-weight: 900; font-size: 14px; }
body[data-ui] #lobby .tier strong { font-size: 19px; line-height: 1.25; font-weight: 900; color: #092669; }
body[data-ui] #lobby .tier small { font-size: 10px; color: #26466d; }
body[data-ui] #lobby .tier span:last-child { font-size: 10px; color: #294775; line-height: 1.35; }
body[data-ui] #lobby .tier[aria-pressed="true"] {
  border-color: #fff6a8;
  border-top-color: var(--tier-main);
  background: var(--tier-pale);
  box-shadow: 0 0 0 2px #ffc82e, inset 0 -4px color-mix(in srgb, var(--tier-main) 45%, white), 3px 4px #093a80;
}
body[data-ui] #lobby .tier[aria-pressed="true"] > span:first-child { color: var(--tier-deep); }
body[data-ui] #lobby .v25-mode-picker { gap: 8px; margin: 0 0 9px; }
body[data-ui] #lobby .v25-mode-picker button {
  min-height: 39px;
  padding: 6px 8px;
  border: 2px solid #0e3c80;
  background: #d5f0ff;
  box-shadow: inset 0 2px #fff, inset 0 -3px #83c4f2, 2px 2px #0f60b8;
  color: #153568;
}
body[data-ui] #lobby .v25-mode-picker button[aria-pressed="true"] {
  border-color: #0e3c80;
  background: #ffeb90;
  color: #092669;
  box-shadow: inset 0 3px #fff5c0, inset 0 -4px #edb528, 2px 2px #0f60b8;
}
body[data-ui] #lobby .v25-mode-picker button strong { font-size: 12px; font-weight: 900; }
body[data-ui] #lobby .v25-mode-picker button small { font-size: 9px; color: #294d77; }
body[data-ui] #lobby .seed-field { gap: 9px; margin: 0 0 10px; }
body[data-ui] #lobby .seed-field > span { font-size: 11px; font-weight: 750; color: #ecfaff; text-shadow: 1px 1px #125099; }
body[data-ui] #lobby .seed-input {
  min-height: 33px;
  padding: 6px 9px;
  font-size: 12px;
  background: #dff7ff;
  border: 2px solid #0d4082;
  box-shadow: inset 2px 2px #a2d9f0;
}
body[data-ui] #lobby #quick-btn,
body[data-ui] #room-panel .gold-btn {
  min-height: 55px;
  border: 3px solid #102f68;
  border-radius: 0;
  background: #ffda2b;
  box-shadow: inset 0 4px #fff6b5, inset 4px 0 #fff0a1, inset 0 -6px #e9a91b, 3px 4px #0751a3;
  color: #072866;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 1px;
  padding: 8px 12px 11px;
  text-shadow: 1px 1px #fff198;
  font-family: var(--v33-display, inherit);
}
body[data-ui] #lobby #quick-btn:hover:not(:disabled), body[data-ui] #room-panel .gold-btn:hover:not(:disabled) { background: #ffe966; }
body[data-ui] #lobby .lobby-row { gap: 9px; margin: 10px 0 0; }
body[data-ui] #lobby .lobby-row .quiet-btn,
body[data-ui] #lobby #resume-btn,
body[data-ui] #room-panel .quiet-btn {
  min-height: 39px;
  padding: 8px;
  border: 2px solid #103577;
  background: #c5f0ff;
  box-shadow: inset 0 3px #f1fdff, inset 0 -4px #74c7f4, 2px 3px #0751a3;
  color: #092669;
  font-weight: 850;
}
body[data-ui] #lobby #resume-btn { margin-top: 10px; }
body[data-ui] #lobby #connection-status { padding: 6px 8px; background: #fff2bd; color: #8b2431; border: 2px solid #d99b39; }

/* A waiting room keeps the same substantial blue shell and four seat colors. */
body[data-ui] #room-panel {
  top: 192px;
  right: 28px;
  width: 430px;
  max-height: calc(100dvh - 218px);
  padding: 20px;
}
body[data-ui] #room-panel h2 {
  margin: 0 0 9px;
  padding: 10px 13px;
  background: #d6f7ff;
  border: 3px solid #0b3577;
  box-shadow: inset 0 -4px #6fc9f4, 3px 3px #0751a3;
  font-size: 25px;
  font-weight: 900;
}
body[data-ui] #room-panel p.v25-room-mode { margin: 8px 0; color: #fff9c7; font-weight: 800; text-shadow: 1px 1px #0952a7; }
body[data-ui] #room-panel .room-code {
  display: inline-block;
  padding: 7px 12px;
  color: #092669;
  background: #ffdf52;
  border: 3px solid #0c3473;
  box-shadow: inset 0 -3px #eebd2f;
  font-size: 27px;
  font-weight: 900;
}
body[data-ui] #room-panel .match-time { color: #fff3a0; font-weight: 850; text-shadow: 2px 2px #0d438a; }
body[data-ui] #room-panel [data-room-copy] { color: #fff4aa; margin: 0 0 5px 8px; font-weight: 800; text-decoration: underline; }
body[data-ui] #room-panel .seat-row {
  --seat: #2ac17c;
  padding: 6px 10px;
  gap: 12px;
  margin: 10px 0;
  min-height: 67px;
  border: 3px solid #0b367b;
  border-left: 7px solid var(--seat);
  background: #e6f9ff;
  box-shadow: inset 0 3px #fff, inset 0 -4px #b4e2fa, 3px 3px #0751a3;
}
body[data-ui] #room-panel .seat-row:nth-child(2 of .seat-row) { --seat: #f65670; }
body[data-ui] #room-panel .seat-row:nth-child(3 of .seat-row) { --seat: #9160ee; }
body[data-ui] #room-panel .seat-row:nth-child(4 of .seat-row) { --seat: #ffd13e; }
body[data-ui] #room-panel .avatar.character-avatar {
  width: 46px;
  height: 50px;
  border: 2px solid var(--player);
  box-shadow: 2px 2px #89b9df;
  background: #bde9fa;
}
body[data-ui] #room-panel .seat-row > strong { font-size: 17px; font-weight: 900; }
body[data-ui] #room-panel .seat-row > span:last-child { font-size: 12px; font-weight: 750; color: #2a5c89; }
body[data-ui] #room-panel [data-room-leave] { color: #e8faff; font-weight: 800; margin-top: 10px; text-decoration: underline; }

@media (max-height: 850px) and (min-width: 701px) {
  body[data-ui] #lobby { max-height: calc(100dvh - 174px); left: 22px; bottom: 20px; padding: 15px; width: 426px; }
  body[data-ui] #lobby .city-slide { height: 98px; }
  body[data-ui] #lobby .character-choice { min-height: 65px; }
  body[data-ui] #lobby .character-choice img { height: 55px; }
  body[data-ui] #lobby .tier { min-height: 76px; }
  body[data-ui] #room-panel { top: 155px; max-height: calc(100dvh - 174px); }
}

@media (max-width: 700px) {
  body[data-ui] #lobby { left: 10px; right: 10px; bottom: 14px; width: auto; max-height: calc(100dvh - 166px); padding: 14px; border-width: 5px; }
  body[data-ui] #lobby .city-picker { margin-bottom: 8px; }
  body[data-ui] #lobby .city-picker-head { font-size: 15px; padding-bottom: 6px; min-height: 27px; }
  body[data-ui] #lobby .city-slide { height: 102px; }
  body[data-ui] #lobby .city-slide::after { height: 28px; }
  body[data-ui] #lobby .city-slide span { font-size: 17px; bottom: 4px; }
  body[data-ui] #lobby .profile-row input { min-height: 34px; padding: 6px 9px; }
  body[data-ui] #lobby .character-choice { min-height: 67px; padding: 3px 8px; gap: 8px; background: linear-gradient(90deg, #b7f0ff 0 70px, #edfcff 70px); }
  body[data-ui] #lobby .character-choice img { width: 54px; height: 57px; }
  body[data-ui] #lobby .character-choice-copy strong { font-size: 16px; }
  body[data-ui] #lobby .character-choice > span:last-child { font-size: 10px; padding: 4px; }
  body[data-ui] #lobby .tier-list { gap: 7px; }
  body[data-ui] #lobby .tier { min-height: 78px; padding: 5px 2px; }
  body[data-ui] #lobby .tier strong { font-size: 17px; }
  body[data-ui] #lobby .tier > span:first-child { font-size: 13px; }
  body[data-ui] #lobby .tier span:last-child { font-size: 9px; }
  body[data-ui] #lobby .v25-mode-picker button { padding: 6px; }
  body[data-ui] #lobby #quick-btn { min-height: 52px; font-size: 24px; }
  body[data-ui] #lobby .lobby-row .quiet-btn { font-size: 14px; }
  body[data-ui] #room-panel { left: 10px; right: 10px; top: 154px; width: auto; max-height: calc(100dvh - 172px); padding: 16px; border-width: 5px; }
  body[data-ui] #room-panel h2 { font-size: 21px; }
  body[data-ui] #room-panel .seat-row { gap: 8px; }
}

/* A compact landscape start screen uses both columns; every original control
   remains present and the panel itself scrolls on especially short displays. */
@media (max-height: 480px) and (min-width: 480px) {
  body[data-ui] #lobby {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-content: start;
    align-items: start;
    gap: 7px 10px;
    left: 12px;
    right: 12px;
    bottom: 10px;
    width: auto;
    max-height: calc(100dvh - 86px);
    padding: 12px;
  }
  body[data-ui] #lobby > * { min-width: 0; }
  body[data-ui] #lobby .city-picker { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  body[data-ui] #lobby .city-picker-head { min-height: 23px; padding: 0 0 4px; font-size: 12px; }
  body[data-ui] #lobby .city-picker-head button { height: 23px; width: 28px; font-size: 23px; }
  body[data-ui] #lobby .city-slide { height: 104px; flex-basis: calc(100% - 18px); }
  body[data-ui] #lobby .city-slide span { font-size: 15px; }
  body[data-ui] #lobby .city-strip { padding: 2px 8px 5px; }
  body[data-ui] #lobby .profile-row { grid-column: 2; grid-row: 1; margin: 0; }
  body[data-ui] #lobby .profile-row input { min-height: 29px; padding: 4px 8px; font-size: 12px; }
  body[data-ui] #lobby .character-choice { grid-column: 2; grid-row: 2; min-height: 53px; margin: 0; padding: 1px 6px; gap: 7px; background: linear-gradient(90deg, #b7f0ff 0 56px, #edfcff 56px); }
  body[data-ui] #lobby .character-choice img { width: 43px; height: 43px; }
  body[data-ui] #lobby .character-choice-copy { gap: 1px; }
  body[data-ui] #lobby .character-choice-copy small { font-size: 9px; }
  body[data-ui] #lobby .character-choice-copy strong { font-size: 12px; }
  body[data-ui] #lobby .character-choice > span:last-child { font-size: 9px; padding: 2px; }
  body[data-ui] #lobby .v25-mode-picker { grid-column: 2; grid-row: 5; gap: 5px; margin: 0; }
  body[data-ui] #lobby .v25-mode-picker button { min-height: 29px; padding: 4px; gap: 2px; }
  body[data-ui] #lobby .v25-mode-picker button strong { font-size: 10px; }
  body[data-ui] #lobby .v25-mode-picker button small { font-size: 8px; }
  body[data-ui] #lobby .tier-list { grid-column: 1; grid-row: 4 / 6; margin: 0; gap: 6px; align-self: stretch; }
  body[data-ui] #lobby .tier { min-height: 72px; padding: 4px 2px; gap: 3px; }
  body[data-ui] #lobby .tier > span:first-child { font-size: 11px; }
  body[data-ui] #lobby .tier strong { font-size: 14px; }
  body[data-ui] #lobby .tier strong small { font-size: 8px; }
  body[data-ui] #lobby .tier span:last-child { font-size: 8px; }
  body[data-ui] #lobby .seed-field { grid-column: 2; grid-row: 4; margin: 0; gap: 5px; }
  body[data-ui] #lobby .seed-field > span { font-size: 9px; }
  body[data-ui] #lobby .seed-input { min-height: 27px; padding: 4px 6px; font-size: 10px; }
  body[data-ui] #lobby #quick-btn { grid-column: 2; grid-row: 3; min-height: 37px; padding: 4px 8px 7px; font-size: 17px; }
  body[data-ui] #lobby .lobby-row { grid-column: 1 / -1; grid-row: 6; margin: 0; }
  body[data-ui] #lobby .lobby-row .quiet-btn { min-height: 30px; padding: 5px; font-size: 12px; }
  body[data-ui] #lobby #resume-btn, body[data-ui] #lobby #connection-status { grid-column: 1 / -1; margin: 0; }
  body[data-ui] #room-panel { top: 75px; bottom: 10px; right: 12px; left: auto; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 85px); padding: 13px; }
  body[data-ui] #room-panel h2 { font-size: 17px; padding: 6px 8px; }
  body[data-ui] #room-panel .seat-row { min-height: 48px; padding: 3px 6px; margin: 7px 0; }
  body[data-ui] #room-panel .avatar.character-avatar { width: 35px; height: 36px; }
}