/* Lobby mobile: paisagem = duas colunas organizadas; retrato = aviso para girar */

#bm-rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(165deg, #0a0b0d 0%, #121316 45%, #0d0e10 100%);
  color: #f5f3ea;
  padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#bm-rotate-hint.on {
  display: flex;
}
#bm-rotate-hint .bm-rotate-icon {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  border: 2px solid #ecd68055;
  background: #ecd68012;
  display: grid;
  place-items: center;
  animation: bm-rotate-pulse 2.2s ease-in-out infinite;
}
#bm-rotate-hint .bm-rotate-icon svg {
  width: 52px;
  height: 52px;
  color: #ecd680;
  animation: bm-rotate-turn 2.4s ease-in-out infinite;
}
@keyframes bm-rotate-turn {
  0%,
  40% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes bm-rotate-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 #ecd68022;
  }
  50% {
    box-shadow: 0 0 0 12px #ecd68000;
  }
}
#bm-rotate-hint h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
#bm-rotate-hint p {
  margin: 0;
  max-width: 280px;
  font-size: 14px;
  line-height: 1.5;
  color: #a8aaa6;
}

body.bm-lobby-portrait:not(.playing) #welcome,
body.bm-lobby-portrait:not(.playing) .topbar,
body.bm-lobby-portrait:not(.playing) .welcome-shade {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (pointer: coarse) and (orientation: landscape) {
  body:not(.playing) {
    overflow: hidden;
  }

  body:not(.playing) .topbar {
    height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: linear-gradient(180deg, #0a0b0df2, #0a0b0d00) !important;
  }
  body:not(.playing) .topbar .brand-logo {
    height: 30px !important;
  }
  body:not(.playing) .top-actions {
    transform: scale(0.92);
    transform-origin: top right;
  }
  body:not(.playing) .top-actions .telao-top {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 8 !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  body:not(.playing) #welcome {
    display: grid !important;
    flex-direction: unset !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(248px, 0.92fr) !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: 46px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)) !important;
    gap: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body:not(.playing) #welcome .avatar-stage {
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    border-radius: 14px;
    border: 1px solid #ffffff10;
    background: #0c0d0ef5;
    overflow: hidden !important;
  }

  body:not(.playing) #welcome .stage-preview {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }

  body:not(.playing) #welcome #character-preview {
    height: clamp(100px, 34dvh, 220px) !important;
    min-height: 100px !important;
    max-height: 34dvh !important;
  }

  body:not(.playing) #welcome .preview-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 4px 8px !important;
    padding: 4px !important;
  }
  body:not(.playing) #welcome .preview-tools button {
    min-width: 44px !important;
    min-height: 36px !important;
    font-size: 10px !important;
    flex: 1 1 auto;
    max-width: 72px;
  }

  body:not(.playing) #welcome .look-editor--stage {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    border-top: 1px solid #ffffff12;
  }

  body:not(.playing) #welcome .look-editor--stage > h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 6px;
    background: linear-gradient(180deg, #101111 80%, #10111100);
  }

  body:not(.playing) #welcome .look-editor--stage .look-row {
    margin-bottom: 6px !important;
    padding: 0 !important;
    border: 1px solid #ffffff0c;
    overflow: hidden;
  }
  body:not(.playing) #welcome .look-editor--stage .look-row legend {
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 9px !important;
    cursor: pointer;
    user-select: none;
    background: #ffffff06;
    border-bottom: 1px solid transparent;
  }
  body:not(.playing) #welcome .look-editor--stage .look-row:not(.bm-open) .look-options {
    display: none !important;
  }
  body:not(.playing) #welcome .look-editor--stage .look-row.bm-open legend {
    border-bottom-color: #ffffff0f;
    color: #ecd680 !important;
  }
  body:not(.playing) #welcome .look-editor--stage .look-row.bm-open .look-options {
    display: flex !important;
    padding: 8px 10px 10px !important;
  }

  body:not(.playing) #welcome .entry-card {
    min-height: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 12px 0 !important;
    border-radius: 14px;
    border: 1px solid #ffffff10;
    background: #121313f5;
    overflow: hidden !important;
  }
  body:not(.playing) #welcome .entry-card .card-heading {
    margin-bottom: 6px !important;
  }
  body:not(.playing) #welcome .entry-card h2 {
    font-size: 1.05rem !important;
  }
  body:not(.playing) #welcome .entry-card .muted {
    display: none !important;
  }
  body:not(.playing) #welcome .entry-card > .muted,
  body:not(.playing) #welcome .entry-card > p.muted {
    display: none !important;
  }

  body:not(.playing) #welcome .entry-card-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  body:not(.playing) #welcome .characters {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  body:not(.playing) #welcome .character-image {
    height: 56px !important;
  }
  body:not(.playing) #welcome .character-name {
    font-size: 9px !important;
  }

  body:not(.playing) #welcome .entry-actions {
    flex-shrink: 0;
    margin-top: auto !important;
    padding: 10px 12px !important;
  }
  body:not(.playing) #welcome .entry-actions .primary {
    min-height: 44px !important;
    font-size: 14px !important;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 420px) {
  body:not(.playing) #welcome #character-preview {
    height: 90px !important;
    max-height: 90px !important;
  }
  body:not(.playing) #welcome .character-image {
    height: 48px !important;
  }
}