.landing-view {
  position: relative;
  min-height: min(100%, 720px);
  align-items: center;
  padding: clamp(70px, 14vh, 116px) 0 clamp(18px, 4vh, 34px);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(100%, 560px);
  min-height: clamp(360px, 62dvh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.2vh, 14px);
  text-align: center;
}

.hero-content::before {
  content: "";
  position: absolute;
  inset: auto 4% 0;
  height: clamp(170px, 35dvh, 280px);
  border: 8px solid rgba(91,58,26,.84);
  border-radius: 42% 42% 38% 38%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 24%, transparent 74%, rgba(255,255,255,.05)),
    linear-gradient(145deg, var(--felt-1), var(--felt-2));
  box-shadow: inset 0 0 32px rgba(0,0,0,.44), 0 22px 46px rgba(0,0,0,.35);
  z-index: -1;
}

.hero-logo {
  width: clamp(82px, 26vw, 130px);
  height: clamp(82px, 26vw, 130px);
  position: relative;
  display: grid;
  place-items: center;
}

.hero-logo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.38));
}

.hero-logo span {
  position: absolute;
  right: 0;
  bottom: 4px;
  font-size: clamp(1.8rem, 8vw, 3rem);
}

.hero-kicker,
.state-kicker {
  margin: 0;
  color: var(--fiesta-yellow);
  font-size: clamp(.78rem, 3.3vw, .95rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.hero-title {
  margin: 0;
  max-width: 100%;
  color: var(--cream);
  font-family: var(--font-title);
  font-size: clamp(2.35rem, 13vw, 5rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: 0;
  text-shadow: 0 4px 0 rgba(42,26,18,.82), 0 10px 26px rgba(0,0,0,.34);
}

.hero-subtitle {
  margin: 0;
  color: var(--text-dim);
  font-size: clamp(.78rem, 3.8vw, 1.06rem);
  font-weight: 800;
  letter-spacing: .1em;
}

.play-cta {
  width: min(100%, 270px);
  margin-top: clamp(4px, 2vh, 14px);
  font-size: clamp(1.08rem, 5vw, 1.34rem);
}

.lobby-card,
.state-panel {
  width: min(100%, 500px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 4vw, 18px);
  padding: clamp(16px, 5vw, 24px);
  border: 1px solid rgba(246,239,223,.14);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(246,239,223,.08), rgba(246,239,223,.035)),
    rgba(22,9,15,.86);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
}

.identity-bar {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) var(--touch);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(246,239,223,.12);
  border-radius: 8px;
  background: rgba(246,239,223,.05);
}

.identity-fields {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.name-input {
  height: var(--touch);
  font-weight: 800;
}

.lobby-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-copy span,
.match-copy small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.match-copy small {
  color: rgba(246,239,223,.68);
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

.primary-btn .match-copy small {
  color: rgba(42,26,18,.68);
}

.join-code-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.join-code-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, 92px);
  gap: 8px;
}

.code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 1.05rem;
  font-weight: 800;
}

.join-btn {
  padding-inline: 10px;
}

.state-panel {
  align-items: center;
  text-align: center;
}

.state-panel h2 {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 7vw, 2.5rem);
  line-height: .95;
}

.players-count {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 16vw, 4.6rem);
  font-weight: 800;
  line-height: .9;
}

.waiting-note {
  min-height: 1.3em;
  margin: 0;
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.4;
}

.room-code-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid rgba(242,193,78,.34);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--gold);
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: .08em;
}

.room-settings {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(246,239,223,.14);
  border-radius: 8px;
  background: rgba(246,239,223,.055);
}

.room-settings[hidden] {
  display: none;
}

.room-settings[data-readonly="true"] {
  opacity: .72;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}

.settings-label {
  color: var(--fiesta-yellow);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.segmented {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 6px;
}

.segmented__item {
  min-width: 0;
  min-height: var(--touch);
  border: 1px solid rgba(246,239,223,.16);
  border-radius: 8px;
  padding: 9px 8px;
  color: var(--text-main);
  background: rgba(22,9,15,.7);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
}

.segmented__item.is-active {
  border-color: rgba(242,193,78,.85);
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--fiesta-yellow));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.segmented__item:disabled {
  cursor: default;
}

.segmented__item:focus-visible {
  outline: 2px solid var(--fiesta-teal);
  outline-offset: 2px;
}

.spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid rgba(246,239,223,.16);
  border-top-color: var(--fiesta-teal);
  border-right-color: var(--fiesta-pink);
  animation: spin .8s linear infinite;
}

.mockup-link {
  color: var(--text-main);
}

.toast {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 300;
  width: min(440px, calc(100% - 24px));
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--cream);
  background: rgba(42,26,18,.94);
  border: 1px solid rgba(242,193,78,.34);
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  text-align: center;
  font-weight: 700;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 360px) {
  .identity-bar {
    grid-template-columns: 50px minmax(0, 1fr) var(--touch);
    gap: 9px;
    padding: 10px;
  }

  .join-code-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .landing-view {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .hero-content {
    min-height: 240px;
    gap: 5px;
  }

  .hero-content::before {
    height: 135px;
  }

  .hero-logo {
    display: none;
  }

  .play-cta {
    min-height: 42px;
    margin-top: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}