/* A compact lobby: both ways to enter stay visible, without clipping the page. */
.lobby-view { display: flex; flex-direction: column; min-height: 100dvh; }
.lobby-view .site-header { width: min(1280px, 100%); min-height: 0; padding: 22px 40px; margin: 0 auto; }
.lobby-view .brand { font-size: 23px; }
.lobby-view .brand-en { font-size: 9px; }
.lobby-view .header-note { font-size: 14px; letter-spacing: 0; }
.lobby-view .lobby-layout { flex: 1; width: min(1200px, calc(100% - 80px)); max-width: none; margin: 0 auto; padding: 16px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lobby-view .welcome-section { min-width: 0; padding: 0; }
.lobby-view .welcome-section h1 { font-size: clamp(40px, 4.1vw, 58px); line-height: 1.18; letter-spacing: -1.5px; }
.lobby-view .hero-description { margin: 14px 0 24px; font-size: 18px; line-height: 1.5; letter-spacing: 0; color: #718278; }
.lobby-view .preview-card { transform: none; padding: 16px; border-radius: 20px; }
.lobby-view .preview-topline { padding: 0 2px 12px; font-size: 15px; }
.lobby-view .local-label { font-size: 13px; }
.lobby-view .preview-stage { aspect-ratio: auto; height: clamp(180px, 29dvh, 310px); border-radius: 12px; }
.lobby-view .preview-avatar { width: 76px; height: 76px; font-size: 30px; }
.lobby-view .preview-placeholder { gap: 20px; }
.lobby-view .preview-placeholder > span { font-size: 16px; letter-spacing: 0; }
.lobby-view .preview-bottom { padding: 12px 2px 0; }
.lobby-view .preview-name { font-size: 14px; }
.lobby-view .preview-caption { display: flex; font-size: 13px; }
.lobby-view .preview-caption svg { width: 14px; height: 14px; }
.lobby-view .entry-card { min-width: 0; padding: 28px; border-radius: 20px; }
.lobby-view .entry-heading { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 20px; }
.lobby-view .entry-icon { position: static; flex-shrink: 0; width: 32px; height: 32px; }
.lobby-view .entry-heading h2 { font-size: 23px; line-height: 1.4; letter-spacing: 0; }
.lobby-view .entry-tag { margin-left: auto; font-size: 13px; color: #788a7d; white-space: nowrap; }
.lobby-view .field { gap: 6px; margin: 0 0 14px; }
.lobby-view .field label { font-size: 15px; line-height: 22px; color: #45614f; }
.lobby-view .optional { font-size: 12px; color: #87968c; }
.lobby-view .field input { height: 46px; padding: 0 12px; font-size: 16px; border-radius: 9px; }
.lobby-view .field input::placeholder { font-size: 16px; color: #97a59b; }
.lobby-view .name-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 16px; }
.lobby-view .prejoin-options { gap: 24px; margin: 0 0 20px; }
.lobby-view .check-label { gap: 7px; font-size: 14px; line-height: 22px; color: #607767; white-space: nowrap; }
.lobby-view .check-label input { height: 16px; width: 16px; flex-shrink: 0; }
.lobby-view .entry-choices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; border-top: 1px solid #e6ede8; padding-top: 18px; }
.lobby-view .entry-form { min-width: 0; }
.lobby-view .join-form { position: relative; }
.lobby-view .join-form::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 1px; background: #e6ede8; }
.lobby-view .section-label { border: 0; padding: 0; margin: 0 0 12px; font-size: 17px; line-height: 24px; }
.lobby-view .join-fields { display: block; }
.lobby-view .code-input { letter-spacing: .5px; }
.lobby-view .button { height: 48px; padding: 0 12px; justify-content: center; font-size: 17px; gap: 7px; border-radius: 9px; white-space: nowrap; }
.lobby-view .button-tail { display: none; }
.lobby-view .inline-status { margin-top: 14px; padding: 0; background: transparent; color: #397453; font-size: 13px; line-height: 20px; }
.lobby-view .entry-footnote { margin-top: 8px; font-size: 13px; line-height: 20px; color: #8a998e; }
.lobby-view .entry-footnote svg { width: 14px; height: 14px; }
.lobby-view .site-footer { flex-shrink: 0; width: min(1200px, calc(100% - 80px)); max-width: none; margin: 0 auto; padding: 14px 0; font-size: 12px; line-height: 18px; letter-spacing: 0; }

@media (max-height: 740px) and (min-width: 701px) {
  .lobby-view .site-header { padding-top: 14px; padding-bottom: 14px; }
  .lobby-view .lobby-layout { padding-top: 8px; padding-bottom: 12px; }
  .lobby-view .entry-card { padding: 22px; }
  .lobby-view .entry-heading { margin-bottom: 14px; }
  .lobby-view .field { margin-bottom: 10px; }
  .lobby-view .field input { height: 42px; }
  .lobby-view .prejoin-options { margin-bottom: 14px; }
  .lobby-view .entry-choices { padding-top: 14px; }
  .lobby-view .section-label { margin-bottom: 8px; }
  .lobby-view .button { height: 44px; }
  .lobby-view .inline-status { margin-top: 10px; }
  .lobby-view .entry-footnote { margin-top: 4px; }
  .lobby-view .site-footer { padding-top: 9px; padding-bottom: 9px; }
  .lobby-view .welcome-section h1 { font-size: 44px; }
  .lobby-view .hero-description { margin: 10px 0 18px; }
}

@media (min-width: 701px) and (max-width: 1050px) {
  .lobby-view .site-header { padding-left: 24px; padding-right: 24px; }
  .lobby-view .lobby-layout { width: calc(100% - 48px); grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px; }
  .lobby-view .entry-card { padding: 20px; }
  .lobby-view .entry-heading h2 { font-size: 21px; }
  .lobby-view .entry-tag { display: none; }
  .lobby-view .prejoin-options { gap: 14px; }
  .lobby-view .check-label { font-size: 13px; }
  .lobby-view .entry-choices { gap: 22px; }
  .lobby-view .join-form::before { left: -11px; }
  .lobby-view .button { font-size: 16px; padding: 0 6px; gap: 5px; }
  .lobby-view .preview-card { padding: 12px; }
  .lobby-view .preview-placeholder > span { font-size: 14px; text-align: center; padding: 0 8px; }
  .lobby-view .preview-caption { display: none; }
  .lobby-view .site-footer { width: calc(100% - 48px); }
}

@media (min-width: 701px) and (max-height: 640px) {
  .lobby-view .site-header { padding-top: 8px; padding-bottom: 8px; }
  .lobby-view .entry-card { padding-top: 18px; padding-bottom: 18px; }
  .lobby-view .field { margin-bottom: 8px; }
  .lobby-view .site-footer { padding-top: 6px; padding-bottom: 6px; }
}

@media (max-width: 700px) {
  .lobby-view .site-header { padding: 14px 18px; }
  .lobby-view .brand { font-size: 21px; }
  .lobby-view .brand-mark { width: 36px; height: 36px; }
  .lobby-view .brand-en { font-size: 8px; margin-top: 4px; }
  .lobby-view .header-note { font-size: 12px; max-width: none; line-height: 1.5; }
  .lobby-view .header-note .status-dot { display: none; }
  .lobby-view .lobby-layout { flex: 0 0 auto; display: flex; flex-direction: column; width: min(520px, calc(100% - 32px)); margin: auto; padding: 0 0 14px; gap: 14px; align-items: stretch; }
  .lobby-view .welcome-section h1, .lobby-view .hero-description { display: none; }
  .lobby-view .preview-card { padding: 12px; border-radius: 16px; }
  .lobby-view .preview-topline { padding-bottom: 8px; font-size: 14px; }
  .lobby-view .local-label { font-size: 12px; }
  .lobby-view .preview-stage { height: clamp(86px, calc(100dvh - 650px), 170px); }
  .lobby-view .preview-placeholder { gap: 12px; flex-direction: row; }
  .lobby-view .preview-avatar { width: 46px; height: 46px; font-size: 22px; border-width: 3px; }
  .lobby-view .preview-placeholder > span { font-size: 14px; }
  .lobby-view .preview-bottom { display: none; }
  .lobby-view .entry-card { padding: 18px; border-radius: 16px; }
  .lobby-view .entry-heading { margin-bottom: 14px; gap: 8px; }
  .lobby-view .entry-heading h2 { font-size: 21px; }
  .lobby-view .entry-icon { width: 28px; height: 28px; }
  .lobby-view .entry-tag { font-size: 12px; }
  .lobby-view .name-field { gap: 10px; margin-bottom: 12px; }
  .lobby-view .field { margin-bottom: 12px; gap: 5px; }
  .lobby-view .field label { font-size: 14px; line-height: 20px; }
  .lobby-view .field input { height: 44px; padding: 0 10px; }
  .lobby-view .prejoin-options { gap: 16px; margin-bottom: 14px; }
  .lobby-view .check-label { font-size: 13px; line-height: 20px; gap: 6px; }
  .lobby-view .entry-choices { gap: 22px; padding-top: 14px; }
  .lobby-view .join-form::before { left: -11px; }
  .lobby-view .section-label { font-size: 16px; line-height: 22px; margin-bottom: 10px; }
  .lobby-view .button { height: 44px; font-size: 15px; padding: 0 6px; gap: 4px; }
  .lobby-view .button svg { width: 16px; height: 16px; }
  .lobby-view .inline-status { font-size: 12px; line-height: 18px; margin-top: 10px; }
  .lobby-view .entry-footnote { font-size: 12px; line-height: 18px; margin-top: 4px; }
  .lobby-view .site-footer { display: none; }
}

@media (max-width: 700px) and (max-height: 740px) {
  .lobby-view .site-header { padding-top: 10px; padding-bottom: 10px; }
  .lobby-view .lobby-layout { margin: 0 auto; gap: 10px; padding-bottom: 10px; }
  .lobby-view .preview-card { padding: 10px; }
  .lobby-view .preview-stage { height: 72px; }
  .lobby-view .entry-card { padding: 16px; }
  .lobby-view .entry-heading { margin-bottom: 12px; }
  .lobby-view .field { margin-bottom: 10px; }
  .lobby-view .prejoin-options { margin-bottom: 12px; }
}

@media (max-width: 700px) and (max-height: 660px) {
  .lobby-view .site-header { padding-top: 8px; padding-bottom: 8px; }
  .lobby-view .preview-stage { height: 58px; }
  .lobby-view .preview-avatar { width: 38px; height: 38px; font-size: 19px; }
  .lobby-view .preview-topline { padding-bottom: 6px; }
  .lobby-view .entry-heading { display: none; }
  .lobby-view .entry-card { padding-top: 12px; padding-bottom: 12px; }
  .lobby-view .field { margin-bottom: 8px; }
  .lobby-view .field input { height: 40px; }
  .lobby-view .prejoin-options { margin-bottom: 10px; }
  .lobby-view .entry-choices { padding-top: 10px; }
  .lobby-view .section-label { margin-bottom: 8px; }
  .lobby-view .inline-status { margin-top: 8px; }
}

/* Short landscape windows keep the full entry form and omit the illustration. */
@media (min-width: 701px) and (max-height: 500px) {
  .lobby-view .site-header { padding: 8px 24px; }
  .lobby-view .brand-mark { width: 32px; height: 32px; }
  .lobby-view .brand-en { display: none; }
  .lobby-view .welcome-section, .lobby-view .site-footer { display: none; }
  .lobby-view .lobby-layout { display: block; flex: 0 0 auto; width: min(920px, calc(100% - 40px)); margin: auto; padding: 0 0 10px; }
  .lobby-view .entry-card { padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; }
  .lobby-view .entry-heading { display: none; }
  .lobby-view .name-field { margin: 0; }
  .lobby-view .prejoin-options { margin: 0; align-items: center; }
  .lobby-view .entry-choices { grid-column: 1 / -1; padding-top: 10px; }
  .lobby-view .entry-form { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 8px 12px; }
  .lobby-view .section-label, .lobby-view .button { grid-column: 1 / -1; margin: 0; }
  .lobby-view .join-fields { display: contents; }
  .lobby-view .field { margin: 0; }
  .lobby-view .inline-status, .lobby-view .entry-footnote { margin: 0; }
}

@media (max-width: 370px) {
  .lobby-view .header-note { display: none; }
  .lobby-view .entry-card { padding-left: 12px; padding-right: 12px; }
  .lobby-view .entry-tag { display: none; }
  .lobby-view .prejoin-options { gap: 10px; }
  .lobby-view .check-label { font-size: 12px; }
  .lobby-view .entry-choices { gap: 18px; }
  .lobby-view .join-form::before { left: -9px; }
  .lobby-view .button svg { display: none; }
}