/* PANDA MEME BOMBERMAN — LOBBY, ROOM & AVATAR SELECTION — owned file; see DESIGN.md
   Every rule is scoped under #lobby-container so legacy rules cannot override it. */

body #lobby-container {
  --lobby-pad-top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px));
  --lobby-pad-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --lobby-pad-x: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --lobby-trim: rgba(45, 212, 191, 0.55);
  --lobby-ink: #fff9eb;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: radial-gradient(ellipse at 50% 35%, #1d6459 0%, #0b332d 58%, #041512 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 40;
  padding: var(--lobby-pad-top) var(--lobby-pad-x) var(--lobby-pad-bottom);
  overflow-x: hidden;
  overflow-y: auto;
}

#lobby-container .lobby-layout {
  position: relative;
  width: min(1280px, 95vw);
  max-height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#lobby-container .lobby-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  max-height: calc(100dvh - var(--lobby-pad-top) - var(--lobby-pad-bottom));
  margin: 0 auto;
  padding: clamp(8px, 1.4vw, 18px);
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-slate-600) transparent;
}

/* ==========================================================================
   DECORATIVE GAME SCENE BACKGROUND (.home-scene-bg)
   Uses existing arena tiles, bushes, blocks, crates, portals, and Pandas.
   ========================================================================== */
#lobby-container .home-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}

#lobby-container .home-bg-terrain {
  position: absolute;
  inset: 0;
  background-color: #164e35;
  background-image: url('/art/05_arena_tiles_and_items/tile_grass.png');
  background-repeat: repeat;
  background-size: 96px 96px;
  opacity: 0.42;
  filter: saturate(0.95) brightness(0.82);
}

#lobby-container .home-bg-arena-floor {
  position: absolute;
  inset: 9% 6%;
  border-radius: 36px;
  background-image: url('/art/05_arena_tiles_and_items/tile_stone.png');
  background-repeat: repeat;
  background-size: 88px 88px;
  opacity: 0.24;
  border: 3px solid rgba(45, 212, 191, 0.22);
  box-shadow: inset 0 0 80px rgba(4, 21, 18, 0.85);
}

#lobby-container .home-bg-decor {
  position: absolute;
  inset: 0;
}

#lobby-container .bg-sprite {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55));
}

/* Desktop Background Composition: Distributed across wide viewport, center-right calm */
#lobby-container .bg-bush-tl {
  top: -28px;
  left: -24px;
  width: clamp(180px, 16vw, 260px);
}
#lobby-container .bg-block-tl {
  top: 78px;
  left: clamp(120px, 11vw, 190px);
  width: clamp(64px, 5.5vw, 88px);
}
#lobby-container .bg-crate-tl {
  top: 142px;
  left: clamp(42px, 4.5vw, 86px);
  width: clamp(58px, 5vw, 80px);
}
#lobby-container .bg-panda-tl {
  top: 96px;
  left: clamp(200px, 17vw, 290px);
  width: clamp(72px, 6.2vw, 98px);
  transform: rotate(-6deg);
}

#lobby-container .bg-bush-tr {
  top: -32px;
  right: -24px;
  width: clamp(170px, 15vw, 240px);
}
#lobby-container .bg-portal-tr {
  top: 84px;
  right: clamp(48px, 5vw, 96px);
  width: clamp(82px, 7vw, 114px);
  opacity: 0.78;
}
#lobby-container .bg-block-tr {
  top: 164px;
  right: clamp(24px, 3vw, 60px);
  width: clamp(60px, 5vw, 82px);
}

#lobby-container .bg-portal-bl {
  bottom: 92px;
  left: clamp(36px, 4vw, 82px);
  width: clamp(88px, 7.5vw, 122px);
  opacity: 0.85;
}
#lobby-container .bg-bush-bl {
  bottom: -36px;
  left: -24px;
  width: clamp(190px, 17vw, 270px);
}
#lobby-container .bg-crate-bl {
  bottom: 54px;
  left: clamp(160px, 14vw, 240px);
  width: clamp(62px, 5.2vw, 84px);
}
#lobby-container .bg-panda-bl {
  bottom: 112px;
  left: clamp(135px, 12vw, 210px);
  width: clamp(74px, 6.4vw, 102px);
  transform: rotate(5deg);
}
#lobby-container .bg-item-banana {
  bottom: 64px;
  left: clamp(255px, 21vw, 350px);
  width: clamp(44px, 3.8vw, 60px);
}

#lobby-container .bg-bush-br {
  bottom: -36px;
  right: -28px;
  width: clamp(190px, 16vw, 260px);
}
#lobby-container .bg-crate-br {
  bottom: 82px;
  right: clamp(130px, 11vw, 195px);
  width: clamp(60px, 5vw, 82px);
}
#lobby-container .bg-block-br {
  bottom: 130px;
  right: clamp(44px, 4vw, 84px);
  width: clamp(62px, 5.2vw, 84px);
}
#lobby-container .bg-panda-br {
  bottom: 156px;
  right: clamp(92px, 8vw, 148px);
  width: clamp(70px, 6vw, 94px);
  opacity: 0.82;
}
#lobby-container .bg-item-boost {
  bottom: 42px;
  right: clamp(220px, 18vw, 310px);
  width: clamp(50px, 4.2vw, 68px);
}

#lobby-container .home-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 68% 52%, rgba(4, 21, 18, 0.58) 0%, rgba(4, 21, 18, 0.28) 42%, rgba(4, 21, 18, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 16, 14, 0.65) 0%, rgba(3, 16, 14, 0.18) 35%, rgba(3, 16, 14, 0.25) 70%, rgba(3, 16, 14, 0.75) 100%);
}

/* Dim decorative scene slightly on Setup & Room Lobby screens so form/slots pop */
#lobby-container[data-screen="setup"] .home-bg-decor,
#lobby-container[data-screen="lobby"] .home-bg-decor {
  opacity: 0.35;
  filter: blur(1px);
}

/* ==========================================================================
   SCREEN 01: HOME SCREEN (TRANG CHỦ)
   ========================================================================== */
#lobby-container #home-section:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: clamp(14px, 2.2vh, 26px);
  width: 100%;
}

#lobby-container .home-top-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

#lobby-container .home-brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 2px 14px;
}

#lobby-container .logo-3d-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.96;
}

#lobby-container .logo-line-bottom {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 55%, #ea580c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  filter: drop-shadow(0 4px 0 #291402) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.75));
}

#lobby-container .logo-bomb-badge {
  position: relative;
  font-size: clamp(2.1rem, 1.4rem + 2vw, 3.3rem);
  line-height: 1;
  transform: rotate(14deg) translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75));
}

#lobby-container .home-brand-subtitle {
  margin: 0;
  padding: 5px 16px;
  border-radius: 999px;
  background: rgba(4, 22, 19, 0.82);
  border: 1.5px solid rgba(45, 212, 191, 0.42);
  color: #ccfbf1;
  font: 800 clamp(12.5px, 1.05vw, 15px)/1.2 var(--font-body);
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Desktop Main Stage: Left Hero Showcase (~58%) + Right Action Group (~42%) */
#lobby-container .home-main-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(300px, 0.88fr);
  gap: clamp(22px, 3vw, 44px);
  width: 100%;
  align-items: center;
}

#lobby-container .home-hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.8vh, 20px);
  min-width: 0;
}

/* Main Panda Character Diorama Stage */
#lobby-container .home-hero-diorama {
  position: relative;
  width: 100%;
  max-width: 580px;
  height: clamp(220px, 30vh, 290px);
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(45, 212, 191, 0.24) 0%, rgba(11, 51, 45, 0.72) 58%, rgba(4, 21, 18, 0.88) 100%),
    url('/art/05_arena_tiles_and_items/tile_grass.png') center / 84px 84px repeat;
  border: 2.5px solid rgba(45, 212, 191, 0.65);
  box-shadow: 0 0 0 3px #031512, 0 18px 38px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

#lobby-container .diorama-ground-ring {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 74%;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.32) 0%, rgba(15, 118, 110, 0.16) 65%, transparent 100%);
  border: 2px solid rgba(34, 211, 238, 0.45);
}

#lobby-container .home-hero-diorama img {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.65));
}

#lobby-container .diorama-portal {
  left: 16px;
  top: 18px;
  width: clamp(68px, 7vw, 92px);
  opacity: 0.9;
}

#lobby-container .diorama-bush-left {
  left: -10px;
  bottom: -8px;
  width: clamp(92px, 9.5vw, 128px);
}

#lobby-container .diorama-block-left {
  left: 72px;
  bottom: 18px;
  width: clamp(52px, 5vw, 68px);
}

#lobby-container .diorama-crate-right {
  right: 68px;
  top: 26px;
  width: clamp(54px, 5.2vw, 70px);
}

#lobby-container .diorama-bush-right {
  right: -6px;
  bottom: -6px;
  width: clamp(86px, 8.8vw, 118px);
}

#lobby-container .diorama-boots {
  left: 24%;
  bottom: 18px;
  width: clamp(42px, 4.2vw, 54px);
  transform: rotate(-10deg);
}

#lobby-container .diorama-panda-runner {
  right: 17%;
  bottom: 24px;
  width: clamp(96px, 10vw, 134px);
  transform: rotate(6deg);
  z-index: 2;
}

#lobby-container .diorama-panda-main {
  left: 33%;
  bottom: 16px;
  width: clamp(128px, 13.5vw, 178px);
  z-index: 3;
}

#lobby-container .diorama-bomb-badge {
  left: 48%;
  top: 16px;
  width: clamp(56px, 5.8vw, 76px);
  z-index: 4;
  transform: rotate(-8deg);
}

#lobby-container .diorama-boom-vfx {
  right: 10%;
  top: 14px;
  width: clamp(64px, 6.5vw, 86px);
  z-index: 3;
}

/* Compact 3-Step Gameplay Illustration Strip */
#lobby-container .home-steps-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.9vw, 12px);
  width: 100%;
  max-width: 580px;
  padding: clamp(8px, 1.1vh, 12px) clamp(12px, 1.4vw, 18px);
  background: rgba(5, 24, 21, 0.9);
  border: 2px solid rgba(45, 212, 191, 0.45);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

#lobby-container .home-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

#lobby-container .home-step-icon {
  width: clamp(32px, 3vw, 42px);
  height: clamp(32px, 3vw, 42px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}

#lobby-container .home-step-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

#lobby-container .home-step-copy strong {
  color: #fde047;
  font: 900 clamp(11.5px, 0.95vw, 13.5px)/1.15 var(--font-display);
  white-space: normal;
}

#lobby-container .home-step-copy span {
  color: #cbd5e1;
  font: 700 clamp(10.5px, 0.82vw, 12px)/1.25 var(--font-body);
  white-space: normal;
}

#lobby-container .home-step-arrow {
  color: #2dd4bf;
  font-weight: 900;
  font-size: 14px;
  flex-shrink: 0;
}

/* Right Column: Main Action Group on Home Screen */
#lobby-container .home-action-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#lobby-container .home-action-stack {
  width: 100%;
  max-width: 390px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 16px);
  padding: clamp(18px, 2.2vw, 26px);
  background: linear-gradient(180deg, rgba(10, 45, 39, 0.9) 0%, rgba(5, 23, 20, 0.94) 100%);
  border: 2.5px solid #2dd4bf;
  border-radius: 24px;
  box-shadow: 0 0 0 3px #031512, 0 18px 40px rgba(0, 0, 0, 0.68), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#lobby-container .home-action-btn {
  width: 100%;
  justify-content: center;
}

#lobby-container .home-join-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 0;
}

#lobby-container .home-room-code {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}

#lobby-container .home-room-code::placeholder {
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
}

#lobby-container .home-room-code.has-error {
  border-color: #f87171;
}

#lobby-container .home-join-row .home-join-btn {
  flex: 0 0 auto;
  width: auto; /* beats the later .btn-create-teal width: 100% */
  min-height: 52px;
  padding: 0 22px;
  gap: 6px;
}

#lobby-container .home-join-error {
  min-height: 1.2em;
  margin: -4px 0 0;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

#lobby-container .home-join-error:empty {
  display: none;
}

/* Live counters: icon + number only, labels live in title/aria-label. */
#lobby-container .home-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  color: #99f6e4;
  font: 800 15px/1 var(--font-body);
}

#lobby-container .home-stats[hidden] {
  display: none;
}

#lobby-container .home-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#lobby-container .home-stat .icon {
  width: 18px;
  height: 18px;
}

#lobby-container .home-stat b {
  color: #fff;
  font-weight: 800;
}

#lobby-container .home-stat-dot {
  width: 8px;
  height: 8px;
  margin-right: -1px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: home-stat-pulse 2s ease-out infinite;
}

@keyframes home-stat-pulse {
  70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #lobby-container .home-stat-dot { animation: none; }
}

#lobby-container .home-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

#lobby-container .home-btn-text small {
  font-family: var(--font-body, inherit);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.85;
}

#lobby-container .home-btn-primary {
  min-height: clamp(54px, 6.2vh, 64px);
  font-size: clamp(17px, 1.45vw, 21px);
}

#lobby-container .home-btn-secondary {
  min-height: clamp(52px, 5.8vh, 60px);
  font-size: clamp(16px, 1.35vw, 19px);
}

#lobby-container .home-btn-tertiary {
  min-height: 48px;
  background: rgba(15, 61, 54, 0.78);
  border: 1.5px solid rgba(94, 234, 212, 0.45);
  border-radius: 13px;
  color: #e2e8f0;
  font: 800 clamp(13.5px, 1.1vw, 15.5px)/1 var(--font-display);
}

#lobby-container .home-btn-tertiary:hover {
  background: rgba(20, 83, 75, 0.92);
  border-color: #2dd4bf;
}

/* Setup and waiting room share a cohesive arcade menu surface. */
#lobby-container[data-screen="setup"] .lobby-layout,
#lobby-container[data-screen="lobby"] .lobby-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
}
#lobby-container[data-screen="setup"] .lobby-card,
#lobby-container[data-screen="lobby"] .lobby-card {
  width: 100%;
  max-width: 1040px;
  height: 100%;
  min-height: 0;
  padding: 6px 8px;
  overflow: hidden;
}
#lobby-container #setup-section:not([style*="display: none"]):not([style*="display:none"]),
#lobby-container #room-waiting-section:not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  margin: auto;
}
#lobby-container #setup-section { max-width: 900px; }
#lobby-container .setup-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: rgba(6, 28, 24, 0.92);
  border: 2px solid rgba(45, 212, 191, 0.55);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
  flex-shrink: 0;
}
#lobby-container .setup-header-title-wrap { min-width: 0; }
#lobby-container .setup-screen-title {
  margin: 0;
  color: var(--color-gold);
  font: 900 clamp(18px, 2.2vw, 24px)/1.15 var(--font-display);
  letter-spacing: 0.02em;
}
#lobby-container .setup-header-spacer { display: none; }
#lobby-container .setup-back-btn,
#lobby-container .room-back-btn {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  padding: 8px 14px;
  color: #ccfbf1;
  background: rgba(15, 61, 54, 0.85);
  border: 1.5px solid rgba(94, 234, 212, 0.48);
  border-radius: 11px;
  box-shadow: none;
  flex-shrink: 0;
}
#lobby-container .setup-back-btn:hover,
#lobby-container .room-back-btn:hover {
  background: rgba(20, 83, 75, 0.95);
  border-color: #2dd4bf;
}
#lobby-container .setup-cards-row.setup-two-col-body {
  display: grid;
  grid-template-columns: minmax(200px, 0.68fr) minmax(0, 1.32fr);
  gap: 24px;
  min-height: 0;
  padding: 22px;
  background: linear-gradient(180deg, rgba(10, 45, 39, 0.94) 0%, rgba(5, 23, 20, 0.97) 100%);
  border: 2.5px solid rgba(45, 212, 191, 0.65);
  border-radius: 22px;
  box-shadow: 0 0 0 3px #031512, 0 16px 36px rgba(0, 0, 0, 0.65);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#lobby-container .teal-panel-card { min-width: 0; }
#lobby-container .setup-col-left,
#lobby-container .profile-preview-subcol,
#lobby-container .character-preview-stage,
#lobby-container .preview-character-meta {
  display: flex;
  align-items: center;
  justify-content: center;
}
#lobby-container .setup-col-left {
  background: radial-gradient(ellipse at 50% 62%, rgba(45, 212, 191, 0.2) 0%, rgba(4, 21, 18, 0.78) 72%);
  border: 1.5px solid rgba(45, 212, 191, 0.28);
  border-radius: 16px;
  padding: 16px;
}
#lobby-container .profile-preview-subcol,
#lobby-container .preview-character-meta {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
#lobby-container #preview-canvas {
  width: 190px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 200 / 205;
}
#lobby-container .preview-name-pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-gold);
  font: 800 18px/1.25 var(--font-display);
}
#lobby-container .preview-expression-pill {
  color: #99f6e4;
  font: 700 13px/1.35 var(--font-body);
}
#lobby-container .setup-col-right,
#lobby-container .profile-field-block,
#lobby-container .setup-avatar-group,
#lobby-container .setup-code-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}
#lobby-container .setup-col-right { gap: 16px; justify-content: center; }
#lobby-container .setup-field-label {
  color: #ccfbf1;
  font: 700 13.5px/1.25 var(--font-body);
}
#lobby-container .greeting-name-box,
#lobby-container .room-code-input-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 2px 4px 2px 14px;
  background: rgba(3, 17, 15, 0.9);
  border: 2px solid rgba(45, 212, 191, 0.38);
  border-radius: 12px;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
#lobby-container .greeting-name-box:focus-within,
#lobby-container .room-code-input-wrap:focus-within {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.25);
  outline: none;
}
#lobby-container .greeting-name-input,
#lobby-container .room-code-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: var(--touch-target);
  padding: 0;
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--text-primary);
  font: 700 16px/1.3 var(--font-body);
}
#lobby-container .room-code-input {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-gold);
}
#lobby-container .arcade-btn-dice,
#lobby-container .room-code-copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  min-width: var(--touch-target);
  height: var(--touch-target);
  padding: 8px;
  color: #ccfbf1;
  background: rgba(15, 61, 54, 0.9);
  border: 1.5px solid rgba(94, 234, 212, 0.4);
  border-radius: 9px;
  box-shadow: none;
  cursor: pointer;
}
#lobby-container .arcade-btn-dice:hover,
#lobby-container .room-code-copy-icon:hover {
  background: rgba(20, 83, 75, 0.98);
  border-color: #2dd4bf;
}
#lobby-container .arcade-btn-dice .icon { width: 20px; height: 20px; }
#lobby-container .avatar-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
#lobby-container .avatar-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 54px;
  padding: 4px;
  background: rgba(3, 17, 15, 0.82);
  border: 2px solid rgba(45, 212, 191, 0.32);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
#lobby-container .avatar-option:hover {
  border-color: rgba(94, 234, 212, 0.75);
  background: rgba(13, 52, 46, 0.85);
}
#lobby-container .avatar-option img {
  display: block;
  width: min(42px, 100%);
  height: 42px;
  object-fit: contain;
  pointer-events: none;
}
#lobby-container .avatar-option.active {
  background: rgba(250, 204, 21, 0.16);
  border-color: var(--color-gold);
  box-shadow: 0 3px 0 #291402;
}
#lobby-container .setup-cta-group { display: flex; width: 100%; margin-top: 2px; }
#lobby-container :is(button, select):focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
#lobby-container .arcade-btn:hover { transform: none; }
#lobby-container button:disabled { cursor: not-allowed; opacity: 0.55; }
#lobby-container input:focus,
#lobby-container input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#lobby-container input::placeholder { color: rgba(153, 246, 228, 0.48); }
#lobby-container input { caret-color: var(--color-gold); }
#lobby-container ::selection { background: var(--color-gold); color: var(--bg-app); }

/* Primary Gold Button */
#lobby-container .btn-join-gold {
  width: 100%;
  min-height: clamp(48px, 5.6vh, 56px);
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #3b1804;
  border: 2.5px solid #291402;
  border-radius: 14px;
  font: 900 clamp(16px, 1.35vw, 19px)/1 var(--font-display);
  letter-spacing: 0.6px;
  box-shadow: 0 4px 0 #291402, inset 0 2px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.1s ease;
}

#lobby-container .btn-join-gold:hover {
  filter: brightness(1.06);
}

/* Secondary Dark Teal-Blue Button */
#lobby-container .btn-create-teal {
  width: 100%;
  min-height: clamp(46px, 5.2vh, 56px);
  background: linear-gradient(180deg, #155e75 0%, #0e3a4c 100%);
  color: #f8fafc;
  border: 2px solid #38bdf8;
  border-radius: 14px;
  font: 900 clamp(15px, 1.25vw, 18px)/1 var(--font-display);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 0 #041512, inset 0 1px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
}

#lobby-container .btn-create-teal:hover {
  filter: brightness(1.1);
}

/* Waiting room: sharing header bar, arcade roster card, and unified action footer. */
#lobby-container .room-header-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(6, 28, 24, 0.92);
  border: 2px solid rgba(45, 212, 191, 0.55);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.48);
  flex-shrink: 0;
}
#lobby-container .room-header-title-bar { display: none; }
#lobby-container .room-header-left,
#lobby-container .room-header-right,
#lobby-container .room-header-center,
#lobby-container .roster-count-pill,
#lobby-container .capacity-control-box {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#lobby-container .room-header-left { flex-wrap: wrap; }
#lobby-container .room-code-title,
#lobby-container .roster-count-label,
#lobby-container .capacity-pill-label {
  color: #99f6e4;
  font: 700 13.5px/1.25 var(--font-body);
}
#lobby-container .room-code-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Small muted eyebrow so the gold code stays the focal point */
#lobby-container .room-code-banner .room-code-title {
  color: rgba(153, 246, 228, 0.6);
  font: 700 11px/1 var(--font-body);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
#lobby-container .room-code-val {
  color: var(--text-gold);
  font: 900 clamp(20px, 2.2vw, 25px)/1 var(--font-display);
  letter-spacing: 0.1em;
  user-select: all;
}
#lobby-container .room-header-right { position: relative; }
#lobby-container .btn-invite-purple {
  min-height: var(--touch-target);
  padding: 8px 16px;
  border: 2px solid #38bdf8;
  border-radius: 11px;
  background: linear-gradient(180deg, #155e75 0%, #0e3a4c 100%);
  color: #f8fafc;
  box-shadow: 0 3px 0 #041512;
  font: 800 13.5px/1.2 var(--font-display);
}
#lobby-container #btn-show-qr {
  min-height: var(--touch-target);
  padding: 8px 14px;
  border: 1.5px solid rgba(94, 234, 212, 0.48);
  border-radius: 11px;
  background: rgba(15, 61, 54, 0.88);
  color: #ccfbf1;
  box-shadow: none;
  font: 800 13.5px/1.2 var(--font-display);
}
#lobby-container .copy-confirmed-pill {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  padding: 6px 10px;
  white-space: nowrap;
  background: #041512;
  border: 1.5px solid #2dd4bf;
  border-radius: 8px;
  color: #ccfbf1;
  font-size: 12px;
}
#lobby-container .host-controls,
#lobby-container #host-controls-panel,
#lobby-container #btn-add-bot,
#lobby-container #btn-remove-bot { display: none !important; }
#lobby-container .roster-block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(10, 45, 39, 0.94) 0%, rgba(5, 23, 20, 0.97) 100%);
  border: 2.5px solid rgba(45, 212, 191, 0.65);
  border-radius: 20px;
  box-shadow: 0 0 0 3px #031512, 0 16px 36px rgba(0, 0, 0, 0.65);
  overflow: hidden;
}
#lobby-container .roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
#lobby-container .roster-heading {
  margin: 0;
  color: var(--color-gold);
  font: 900 19px/1.2 var(--font-display);
  letter-spacing: 0.02em;
}
#lobby-container .room-header-center { flex-wrap: wrap; gap: 8px 16px; }
#lobby-container .roster-count-pill {
  padding: 6px 12px;
  background: rgba(3, 17, 15, 0.78);
  border: 1.5px solid rgba(45, 212, 191, 0.35);
  border-radius: 10px;
}
#lobby-container .roster-count {
  color: var(--text-gold);
  font: 800 15px/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
#lobby-container .room-capacity-pill {
  min-height: var(--touch-target);
  padding: 6px 10px;
  border: 1.5px solid rgba(45, 212, 191, 0.45);
  border-radius: 10px;
  background: rgba(3, 17, 15, 0.88);
  color: var(--text-gold);
  color-scheme: dark;
  font: 700 13.5px/1.2 var(--font-body);
  cursor: pointer;
}
#lobby-container .roster-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2dd4bf rgba(3, 17, 15, 0.8);
}
#lobby-container .roster-grid[data-capacity="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#lobby-container .roster-grid[data-capacity="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#lobby-container .roster-grid[data-capacity="6"],
#lobby-container .roster-grid[data-capacity="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#lobby-container .roster-grid[data-capacity="12"],
#lobby-container .roster-grid[data-capacity="16"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#lobby-container .roster-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 112px;
  gap: 6px;
  padding: 12px 10px 10px;
  background: rgba(13, 56, 49, 0.82);
  border: 2px solid rgba(45, 212, 191, 0.38);
  border-radius: 14px;
}
#lobby-container .roster-item.is-host-slot {
  background: linear-gradient(180deg, rgba(20, 78, 68, 0.92) 0%, rgba(10, 42, 36, 0.95) 100%);
  border-color: var(--color-gold);
  box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.25);
}
#lobby-container .roster-item.is-empty-slot {
  background: rgba(3, 17, 15, 0.65);
  border: 1.5px dashed rgba(45, 212, 191, 0.3);
}
#lobby-container .roster-slot-top {
  position: absolute;
  inset: 6px 8px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
#lobby-container .roster-slot-num {
  color: #99f6e4;
  font: 700 11.5px/1 var(--font-body);
  opacity: 0.78;
}
#lobby-container .roster-crown-icon { color: var(--color-gold); }
#lobby-container .roster-crown-icon .icon { width: 17px; height: 17px; }
#lobby-container .roster-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
#lobby-container .human-avatar-wrap .roster-avatar {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  object-fit: contain;
  transform: translateY(-4px);
}
#lobby-container .roster-shirt-torso {
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 15px;
  border: 2px solid #041512;
  border-radius: 5px;
}
#lobby-container .bot-avatar-wrap .icon,
#lobby-container .empty-avatar-wrap .icon { width: 28px; height: 28px; color: rgba(94, 234, 212, 0.45); }
#lobby-container .roster-player-meta { width: 100%; min-width: 0; text-align: center; }
#lobby-container .player-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font: 800 13.5px/1.25 var(--font-display);
}
#lobby-container .player-name.host-gold-name { color: var(--text-gold); }
#lobby-container .player-name.empty-pill-label { color: rgba(153, 246, 228, 0.55); font: 600 11.5px/1.3 var(--font-body); }
#lobby-container .room-footer-region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 16px;
  background: rgba(6, 28, 24, 0.92);
  border: 2px solid rgba(45, 212, 191, 0.5);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}
#lobby-container .room-bot-hint {
  margin: 0;
  color: #99f6e4;
  font: 600 13px/1.35 var(--font-body);
}
#lobby-container .waiting-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-gold);
  font: 700 13.5px/1.3 var(--font-body);
}
#lobby-container .waiting-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
#lobby-container .btn-start-gold {
  order: 2;
  min-width: 210px;
  min-height: 48px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #fde047 0%, #f59e0b 100%);
  color: #3b1804;
  border: 2.5px solid #291402;
  border-radius: 13px;
  box-shadow: 0 4px 0 #291402, inset 0 2px 0 rgba(255, 255, 255, 0.55);
  font: 900 17px/1 var(--font-display);
}
#lobby-container .btn-leave-crimson {
  min-height: 48px;
  padding: 8px 16px;
  background: rgba(15, 61, 54, 0.85);
  border: 1.5px solid rgba(94, 234, 212, 0.45);
  border-radius: 12px;
  box-shadow: none;
  color: #ccfbf1;
  font: 800 14px/1 var(--font-display);
}
#lobby-container .btn-leave-crimson:hover {
  background: rgba(185, 28, 28, 0.85);
  border-color: #fca5a5;
  color: #fff;
}
/* ==========================================================================
   LARGE DESKTOP VIEWPORTS (1440x900, 1920x1080)
   ========================================================================== */
@media (min-width: 1200px) and (min-height: 760px) {
  #lobby-container .lobby-layout {
    width: min(1360px, 92vw);
  }
  #lobby-container .lobby-card {
    max-width: 1340px;
    padding: clamp(14px, 1.8vw, 24px);
  }
  #lobby-container .home-hero-diorama {
    max-width: 660px;
    height: clamp(260px, 32vh, 330px);
  }
  #lobby-container .home-steps-strip {
    max-width: 660px;
  }
  #lobby-container .home-action-stack {
    max-width: 420px;
    padding: clamp(22px, 2.4vw, 32px);
  }

}

/* ==========================================================================
   MOBILE LANDSCAPE VIEWPORTS (844x390, 915x412, 667x375)
   ========================================================================== */
@media (max-height: 540px) and (orientation: landscape) {
  body #lobby-container {
    --lobby-pad-top: max(6px, env(safe-area-inset-top, 0px));
    --lobby-pad-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    --lobby-pad-x: max(12px, env(safe-area-inset-left, 0px));
  }

  #lobby-container .lobby-layout {
    width: min(920px, 96vw);
  }

  #lobby-container .lobby-card {
    max-width: 900px;
    width: 100%;
    max-height: calc(100dvh - var(--lobby-pad-top) - var(--lobby-pad-bottom));
    padding: 4px 8px;
  }

  /* Landscape Background: Keep characters/props on left and outer edges, right side clear */
  #lobby-container .bg-panda-br {
    display: none;
  }
  #lobby-container .bg-bush-tl,
  #lobby-container .bg-bush-bl,
  #lobby-container .bg-bush-tr,
  #lobby-container .bg-bush-br {
    width: 130px;
  }
  #lobby-container .bg-panda-tl {
    top: 36px;
    left: 88px;
    width: 58px;
  }
  #lobby-container .bg-panda-bl {
    bottom: 42px;
    left: 76px;
    width: 60px;
  }
  #lobby-container .bg-portal-bl {
    bottom: 34px;
    left: 18px;
    width: 64px;
  }

  /* SCREEN 01 (HOME) — Mobile Landscape: Left (~57%) Logo + Panda + Steps | Right (~43%) 3 Actions */
  #lobby-container #home-section:not([style*="display: none"]):not([style*="display:none"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 0.57fr) minmax(240px, 0.43fr);
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    row-gap: 6px;
    align-items: center;
    padding-top: 2px;
  }

  #lobby-container .home-top-area {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }

  #lobby-container .home-brand-logo {
    padding: 0;
    gap: 8px;
  }

  #lobby-container .logo-line-bottom {
    font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  }

  #lobby-container .logo-bomb-badge {
    font-size: clamp(1.45rem, 3vw, 1.8rem);
  }

  #lobby-container .home-brand-subtitle {
    font-size: 11px;
    padding: 2px 10px;
  }

  #lobby-container .home-main-stage {
    display: contents;
  }

  #lobby-container .home-hero-showcase {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    gap: 6px;
    width: 100%;
  }

  #lobby-container .home-hero-diorama {
    height: clamp(138px, 38vh, 172px);
    border-radius: 18px;
  }

  #lobby-container .diorama-panda-main {
    width: clamp(84px, 13vw, 108px);
    bottom: 8px;
  }

  #lobby-container .diorama-panda-runner {
    width: clamp(68px, 10vw, 86px);
    bottom: 12px;
  }

  #lobby-container .diorama-bomb-badge {
    width: 42px;
    top: 8px;
  }

  #lobby-container .diorama-boom-vfx {
    width: 46px;
    top: 8px;
  }

  #lobby-container .diorama-portal {
    width: 48px;
    top: 10px;
  }

  #lobby-container .home-steps-strip {
    padding: 5px 10px;
    border-radius: 12px;
    gap: 4px;
  }

  #lobby-container .home-step-icon {
    width: 24px;
    height: 24px;
  }

  #lobby-container .home-step-item { flex-direction: column; text-align: center; gap: 4px; }
  #lobby-container .home-step-copy strong { font-size: 12px; }
  #lobby-container .home-step-copy span { font-size: 12px; }

  #lobby-container .home-action-column {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    padding-top: 24px;
  }

  #lobby-container .home-action-stack {
    padding: 12px 14px;
    gap: 8px;
    border-radius: 18px;
  }

  #lobby-container .home-btn-primary {
    min-height: 44px;
    font-size: 15px;
  }

  #lobby-container .home-btn-secondary {
    min-height: 42px;
    font-size: 14.5px;
  }

  #lobby-container .home-btn-tertiary {
    min-height: 48px;
    font-size: 12.5px;
  }

}

/* ==========================================================================
   MOBILE PORTRAIT VIEWPORTS (390x844, 360x800)
   ========================================================================== */
@media (max-width: 680px) and (orientation: portrait) {
  body #lobby-container {
    --lobby-pad-top: max(66px, env(safe-area-inset-top, 0px));
    --lobby-pad-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    --lobby-pad-x: max(10px, env(safe-area-inset-left, 0px));
    align-items: flex-start;
  }

  #lobby-container .lobby-layout {
    width: 100%;
    min-height: 100%;
    align-items: stretch;
  }

  #lobby-container .lobby-card {
    padding: 4px 2px;
    justify-content: flex-start;
  }

  /* Portrait Background Composition: Frame upper-middle Panda, keep logo & buttons calm */
  #lobby-container .home-bg-arena-floor {
    inset: 6% 4%;
    border-radius: 24px;
  }
  #lobby-container .bg-bush-tl,
  #lobby-container .bg-bush-tr {
    width: 120px;
  }
  #lobby-container .bg-bush-bl,
  #lobby-container .bg-bush-br {
    width: 130px;
  }
  #lobby-container .bg-panda-tl,
  #lobby-container .bg-panda-br,
  #lobby-container .bg-block-tl,
  #lobby-container .bg-crate-tl {
    display: none;
  }
  #lobby-container .bg-portal-tr {
    top: 68px;
    right: 12px;
    width: 58px;
  }
  #lobby-container .bg-portal-bl {
    bottom: 68px;
    left: 12px;
    width: 58px;
  }
  #lobby-container .bg-panda-bl {
    bottom: 36px;
    left: 56px;
    width: 56px;
    opacity: 0.55;
  }

  /* SCREEN 01 (HOME) — Mobile Portrait:
     1. Minimal utility controls
     2. Game logo (.home-top-area)
     3. Main Panda illustration (.home-hero-diorama)
     4. Main actions: Tạo phòng -> Tham gia phòng -> Cách chơi (.home-action-column)
     5. Compact gameplay illustration (.home-steps-strip) */
  #lobby-container #home-section:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  #lobby-container .home-top-area {
    order: 1;
    gap: 4px;
  }

  #lobby-container .logo-line-bottom {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }

  #lobby-container .logo-bomb-badge {
    font-size: clamp(1.85rem, 7.5vw, 2.2rem);
  }

  #lobby-container .home-brand-subtitle {
    font-size: 11.5px;
    padding: 4px 12px;
  }

  #lobby-container .home-main-stage,
  #lobby-container .home-hero-showcase {
    display: contents;
  }

  #lobby-container .home-hero-diorama {
    order: 2;
    width: 100%;
    height: clamp(176px, 24vh, 215px);
    border-radius: 20px;
  }

  #lobby-container .diorama-panda-main {
    left: 26%;
    bottom: 12px;
    width: clamp(104px, 28vw, 128px);
  }

  #lobby-container .diorama-panda-runner {
    right: 12%;
    bottom: 16px;
    width: clamp(82px, 22vw, 102px);
  }

  #lobby-container .diorama-bomb-badge {
    left: 45%;
    top: 10px;
    width: 48px;
  }

  #lobby-container .diorama-boom-vfx {
    right: 8%;
    top: 10px;
    width: 52px;
  }

  #lobby-container .home-action-column {
    order: 3;
    width: 100%;
  }

  #lobby-container .home-action-stack {
    max-width: 100%;
    padding: 14px;
    gap: 10px;
    border-radius: 20px;
  }

  #lobby-container .home-btn-primary {
    min-height: 50px;
    font-size: 16.5px;
  }

  #lobby-container .home-btn-secondary {
    min-height: 48px;
    font-size: 15.5px;
  }

  #lobby-container .home-btn-tertiary {
    min-height: 48px;
    font-size: 13.5px;
  }

  #lobby-container .home-steps-strip {
    order: 4;
    width: 100%;
    padding: 8px 10px;
    border-radius: 16px;
    gap: 4px;
  }

  #lobby-container .home-step-item {
    flex-direction: column;
    text-align: center;
    gap: 3px;
  }

  #lobby-container .home-step-icon {
    width: 28px;
    height: 28px;
  }

  #lobby-container .home-step-copy {
    align-items: center;
    width: 100%;
  }

  #lobby-container .home-step-copy strong {
    font-size: 12px;
  }

  #lobby-container .home-step-copy span {
    font-size: 12px;
    white-space: normal;
    line-height: 1.25;
  }

}

/* Tablet and narrow windows need their own composition, not desktop shrinkage. */
@media (min-width: 601px) and (max-width: 900px) and (min-height: 541px) {
  #lobby-container .home-main-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #lobby-container .home-hero-showcase { width: 100%; max-width: 660px; margin: auto; }
  #lobby-container .home-hero-diorama { height: 240px; }
}
@media (max-width: 900px) and (min-height: 541px) {
  #lobby-container .setup-cards-row.setup-two-col-body {
    grid-template-columns: minmax(175px, 0.62fr) minmax(0, 1.38fr);
    gap: 18px;
    padding: 18px;
  }
  #lobby-container .roster-block { padding: 14px 16px; }
  #lobby-container .roster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  #lobby-container .roster-item { min-height: 100px; padding: 10px 6px 8px; }
}
@media (max-width: 600px) {
  #lobby-container #setup-section:not([style*="display: none"]):not([style*="display:none"]),
  #lobby-container #room-waiting-section:not([style*="display: none"]):not([style*="display:none"]) {
    gap: 8px;
  }
  #lobby-container .setup-header-bar { gap: 10px; padding: 6px 12px; }
  #lobby-container .setup-screen-title { font-size: 18px; }
  #lobby-container .setup-cards-row.setup-two-col-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  #lobby-container .setup-col-left { padding: 8px 12px; }
  #lobby-container .profile-preview-subcol { flex-direction: row; gap: 14px; justify-content: flex-start; }
  #lobby-container #preview-canvas { width: 72px; }
  #lobby-container .preview-character-meta { align-items: flex-start; width: auto; gap: 2px; }
  #lobby-container .preview-name-pill { font-size: 16px; }
  #lobby-container .setup-col-right { gap: 10px; }
  #lobby-container .avatar-picker-grid { gap: 6px; }
  #lobby-container .avatar-option { min-height: 46px; }
  #lobby-container .avatar-option img { width: min(34px, 100%); height: 34px; }
  #lobby-container .room-header-box { gap: 8px; padding: 8px 10px; }
  #lobby-container .room-header-left { flex: 1 1 100%; }
  #lobby-container .room-code-copy-icon { margin-left: auto; }
  #lobby-container .room-header-right { width: 100%; }
  #lobby-container .btn-invite-purple { flex: 1; }
  #lobby-container .roster-block { padding: 10px 12px; }
  #lobby-container .roster-header { margin-bottom: 8px; gap: 6px 10px; }
  #lobby-container .roster-heading { font-size: 17px; }
  #lobby-container .room-header-center { width: 100%; justify-content: space-between; gap: 6px; }
  #lobby-container .roster-count-label,
  #lobby-container .capacity-pill-label { font-size: 12px; }
  #lobby-container .roster-grid,
  #lobby-container .roster-grid[data-capacity] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #lobby-container .roster-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    padding: 6px 8px;
    gap: 8px;
  }
  #lobby-container .roster-slot-top {
    position: static;
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    gap: 4px;
  }
  #lobby-container .roster-avatar-wrap { width: 34px; height: 34px; }
  #lobby-container .human-avatar-wrap .roster-avatar { width: 28px; height: 28px; transform: translateY(-3px); }
  #lobby-container .roster-shirt-torso { width: 20px; height: 10px; }
  #lobby-container .bot-avatar-wrap .icon,
  #lobby-container .empty-avatar-wrap .icon { width: 22px; height: 22px; }
  #lobby-container .roster-player-meta { flex: 1; min-width: 0; text-align: left; }
  #lobby-container .player-name { font-size: 12.5px; }
  #lobby-container .room-footer-region {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 10px;
  }
  #lobby-container .room-bot-hint { font-size: 11.5px; text-align: center; }
  #lobby-container .waiting-bottom-bar {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 0.58fr);
    gap: 8px;
    width: 100%;
    margin-left: 0;
  }
  #lobby-container .btn-start-gold { min-width: 0; width: 100%; font-size: 15px; padding: 8px 12px; }
  #lobby-container .btn-leave-crimson { width: 100%; font-size: 13px; padding: 8px 10px; }
}
@media (max-width: 359px) {
  #lobby-container .avatar-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Short landscape: keep top bar left of #top-controls, keep Panda preview visible, fit 10 slots cleanly. */
@media (max-height: 540px) and (orientation: landscape) {
  body #lobby-container[data-screen="setup"],
  body #lobby-container[data-screen="lobby"] {
    --lobby-pad-top: max(6px, env(safe-area-inset-top, 0px));
    --lobby-pad-bottom: max(6px, env(safe-area-inset-bottom, 0px));
  }
  #lobby-container #setup-section:not([style*="display: none"]):not([style*="display:none"]),
  #lobby-container #room-waiting-section:not([style*="display: none"]):not([style*="display:none"]) {
    gap: 6px;
  }
  #lobby-container .setup-header-bar {
    width: calc(100% - 256px);
    gap: 10px;
    padding: 4px 10px;
  }
  #lobby-container .setup-screen-title { font-size: 17px; }
  #lobby-container .setup-back-btn { min-height: 44px; padding: 6px 10px; }
  #lobby-container .setup-cards-row.setup-two-col-body {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 12px;
    align-items: stretch;
  }
  #lobby-container .setup-col-left {
    display: flex;
    padding: 6px;
  }
  #lobby-container #preview-canvas { width: 82px; }
  #lobby-container .preview-name-pill { font-size: 13px; }
  #lobby-container .preview-expression-pill { font-size: 11px; }
  #lobby-container .setup-col-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    gap: 6px 12px;
    align-items: start;
  }
  #lobby-container .setup-name-block { grid-column: 1; grid-row: 1; }
  #lobby-container .setup-code-group { grid-column: 1; grid-row: 2; }
  #lobby-container .setup-avatar-group { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  #lobby-container .setup-cta-group { grid-column: 1; grid-row: 3; margin-top: 2px; }
  #lobby-container .setup-field-label { font-size: 11.5px; }
  #lobby-container .avatar-picker-grid { gap: 6px; }
  #lobby-container .avatar-option { min-height: 44px; padding: 3px; }
  #lobby-container .avatar-option img { width: min(30px, 100%); height: 30px; }
  #lobby-container .btn-join-gold { min-height: 44px; font-size: 15px; }
  #lobby-container .room-header-box {
    width: calc(100% - 256px);
    padding: 4px 10px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  #lobby-container .room-code-val { font-size: 18px; }
  #lobby-container .btn-invite-purple,
  #lobby-container #btn-show-qr { padding: 6px 10px; font-size: 12.5px; }
  #lobby-container .roster-block { padding: 8px 12px; }
  #lobby-container .roster-header { margin-bottom: 6px; gap: 6px 12px; }
  #lobby-container .roster-heading { font-size: 16px; }
  #lobby-container .roster-grid { gap: 6px; }
  #lobby-container .roster-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    padding: 6px 8px;
    gap: 6px;
  }
  #lobby-container .roster-slot-top {
    position: static;
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    gap: 3px;
  }
  #lobby-container .roster-avatar-wrap { width: 30px; height: 30px; }
  #lobby-container .human-avatar-wrap .roster-avatar { width: 26px; height: 26px; transform: translateY(-2px); }
  #lobby-container .roster-shirt-torso { width: 18px; height: 9px; }
  #lobby-container .bot-avatar-wrap .icon,
  #lobby-container .empty-avatar-wrap .icon { width: 20px; height: 20px; }
  #lobby-container .roster-player-meta { flex: 1; min-width: 0; text-align: left; }
  #lobby-container .player-name { font-size: 11.5px; }
  #lobby-container .room-footer-region { padding: 6px 12px; gap: 8px; }
  #lobby-container .room-bot-hint { font-size: 12px; }
  #lobby-container .btn-start-gold,
  #lobby-container .btn-leave-crimson { min-height: 44px; padding: 6px 14px; font-size: 14px; }
}