.game-header {
  width: min(100%, 1320px);
  min-height: 76px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--borda);
}

.game-brand { width: 152px; display: block; }
.game-brand img { width: 100%; display: block; }
.game-header-actions { display: flex; align-items: center; gap: 10px; }
.header-back { min-height: 44px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: var(--texto-suave); border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); font-size: 11px; font-weight: 750; text-decoration: none; }
.header-back:hover { color: var(--texto); border-color: rgb(249 115 22 / 45%); }
.header-back svg { width: 14px; }

.lobby-page {
  width: min(100% - 48px, 1080px);
  margin: 0 auto;
  padding: 70px 0 80px;
}

.lobby-page::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  background:
    linear-gradient(rgb(255 255 255 / 1%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 1%) 1px, transparent 1px),
    radial-gradient(circle at 76% 16%, rgb(249 115 22 / 9%), transparent 28%);
  background-size: 48px 48px, 48px 48px, auto;
  pointer-events: none;
}

.lobby-intro { max-width: 720px; margin-bottom: 34px; }
.lobby-intro h1 { max-width: 680px; margin: 16px 0 14px; font-size: clamp(42px, 6vw, 72px); line-height: .98; letter-spacing: -.055em; text-shadow: 2px 2px 0 rgb(249 115 22 / 35%); }
.lobby-intro p { max-width: 580px; margin: 0; color: var(--texto-suave); font-size: 15px; line-height: 1.7; }

.play-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.play-card { position: relative; min-height: 0; padding: 24px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgb(255 255 255 / 8%); border-radius: 7px; background: rgb(20 18 16 / 82%); box-shadow: 0 18px 55px rgb(0 0 0 / 16%); }
.play-card-featured { grid-column: 1 / -1; min-height: 190px; padding: 28px 30px; display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(250px, 330px); align-items: center; gap: 22px; border-color: rgb(249 115 22 / 48%); background: linear-gradient(135deg, rgb(249 115 22 / 10%), transparent 50%), rgb(25 21 18 / 92%); }
.play-card:nth-child(2), .play-card:nth-child(3) { justify-content: space-between; }
.play-card:nth-child(2) { border-left: 3px solid rgb(249 115 22 / 70%); }
.play-card:nth-child(3) { background: rgb(16 14 12 / 88%); }
.card-number { display: none; }
.card-icon { width: 52px; height: 52px; margin-bottom: 50px; display: grid; place-items: center; color: var(--laranja); border: 1px solid rgb(249 115 22 / 28%); border-radius: 7px; background: rgb(249 115 22 / 7%); }
.play-card-featured .card-icon { margin: 0; }
.play-card:not(.play-card-featured) .card-icon { position: absolute; top: 22px; right: 22px; width: 38px; height: 38px; margin: 0; opacity: .75; }
.card-icon svg { width: 21px; }
.play-card:not(.play-card-featured) .card-icon svg { width: 17px; }
.card-label { color: var(--laranja); font-size: 8px; font-weight: 850; letter-spacing: .18em; }
.play-card h2, .private-room-result h2 { margin: 10px 0 10px; font-size: 24px; letter-spacing: -.035em; }
.play-card-featured h2 { font-size: 32px; }
.play-card p, .private-room-result p { margin: 0; color: var(--texto-suave); font-size: 12px; line-height: 1.65; }
.option-action { width: 100%; min-height: 48px; margin-top: auto; font-size: 12px; }
.play-card-featured .option-action { margin: 0; }
.option-action svg { width: 15px; }
.matchmaking-message { min-height: 16px; margin-top: 9px; display: block; color: var(--texto-suave); font-size: 9px; text-align: center; }
.play-card-featured .matchmaking-message { grid-column: 3; margin-top: -12px; }
.matchmaking-message.error { color: #f87171; }

.time-selector { margin: 42px 0 18px; padding: 12px; display: grid; grid-template-columns: 1fr repeat(2, auto); align-items: center; gap: 7px; border: 1px solid rgb(255 255 255 / 7%); border-radius: 7px; background: rgb(0 0 0 / 13%); }
.time-selector > span, .join-form label { color: #8c837c; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.time-option { min-height: 32px; padding: 0 10px; color: var(--texto-suave); border: 1px solid var(--borda); border-radius: 7px; background: #171411; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.time-option.active { color: var(--laranja-suave); border-color: var(--laranja); background: rgb(249 115 22 / 8%); }

.join-form { margin-top: 18px; }
.join-form label { display: block; margin-bottom: 9px; }
.join-control { display: grid; grid-template-columns: 1fr 45px; }
.join-control input { min-width: 0; min-height: 48px; padding: 0 14px; color: var(--texto); border: 1px solid #463e38; border-right: 0; border-radius: 7px 0 0 7px; outline: 0; background: #151210; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.join-control input:focus { border-color: var(--laranja); box-shadow: 0 0 0 3px rgb(249 115 22 / 10%); }
.join-control button { color: #fff; border: 1px solid var(--laranja); border-radius: 0 7px 7px 0; background: var(--laranja); cursor: pointer; }
.join-control svg { width: 17px; }
.form-message { min-height: 16px; margin-top: 7px; display: block; color: #f87171; font-size: 9px; }

.private-room-result { margin-top: 14px; padding: 22px 24px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 22px; border: 1px solid rgb(249 115 22 / 38%); border-left: 3px solid var(--laranja); border-radius: 7px; background: linear-gradient(135deg, rgb(249 115 22 / 8%), rgb(20 18 16 / 92%) 42%); }
.private-room-result[hidden] { display: none; }
.generated-code { min-width: 210px; padding: 11px 12px 11px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px dashed #5b4b40; border-radius: 7px; background: #151210; }
.generated-code strong { font-size: 20px; letter-spacing: .18em; }
.generated-code button { min-height: 34px; padding: 0 10px; color: var(--laranja-suave); border: 1px solid rgb(249 115 22 / 25%); border-radius: 7px; background: rgb(249 115 22 / 7%); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.generated-code svg { width: 13px; vertical-align: middle; }
.private-room-result > .button { min-height: 46px; font-size: 11px; }

.lobby-note { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #756e68; }
.lobby-note svg { width: 18px; color: var(--laranja); }
.lobby-note p { margin: 0; font-size: 10px; line-height: 1.5; }
.lobby-note strong { color: var(--texto-suave); }

@media (max-width: 900px) {
  .lobby-page { width: min(100% - 36px, 820px); padding: 48px 0 64px; }
  .lobby-intro { margin-bottom: 26px; }
  .lobby-intro h1 { max-width: 560px; font-size: clamp(38px, 8vw, 58px); }
  .play-options { grid-template-columns: 1fr 1fr; }
  .play-card-featured { min-height: 180px; grid-template-columns: 46px minmax(0, 1fr) minmax(210px, 280px); padding: 24px; }
  .play-card { padding: 22px; }
  .private-room-result { grid-template-columns: 1fr; }
  .generated-code { width: 100%; }
  .lobby-note { margin-top: 22px; justify-content: flex-start; }
}

@media (max-width: 620px) {
  .game-header { min-height: 62px; padding: 0 14px; gap: 10px; }
  .game-brand { width: 118px; }
  .game-header-actions { gap: 7px; }
  .shared-account .user-account-nickname { max-width: 95px; }
  .header-back { width: 40px; padding: 0; justify-content: center; font-size: 0; }
  .lobby-page { width: calc(100% - 24px); padding: 34px 0 42px; }
  .lobby-intro { margin-bottom: 20px; }
  .lobby-intro h1 { margin-top: 12px; font-size: 38px; letter-spacing: -.04em; }
  .lobby-intro p { font-size: 12px; line-height: 1.55; }
  .play-options { grid-template-columns: 1fr; }
  .play-card-featured { grid-column: auto; display: flex; align-items: stretch; gap: 0; }
  .play-card-featured .matchmaking-message { margin-top: 9px; }
  .play-card { min-height: 0; padding: 18px; }
  .play-card-featured { min-height: 250px; padding: 22px; }
  .card-icon { width: 42px; height: 42px; margin-bottom: 34px; }
  .card-icon svg { width: 18px; }
  .play-card-featured .card-icon { margin-bottom: 28px; }
  .play-card:not(.play-card-featured) .card-icon { display: none; }
  .play-card h2, .private-room-result h2 { font-size: 20px; }
  .play-card-featured h2 { font-size: 26px; }
  .play-card p, .private-room-result p { font-size: 11px; }
  .time-selector { margin: 28px 0 14px; grid-template-columns: 1fr 1fr 1fr; padding: 10px; }
  .time-selector > span { grid-column: 1 / -1; }
  .option-action { min-height: 44px; }
  .join-control { grid-template-columns: 1fr 42px; }
  .join-control input { min-height: 44px; font-size: 12px; }
  .private-room-result { padding: 18px; gap: 16px; }
  .generated-code { min-width: 0; }
  .generated-code strong { font-size: 17px; }
  .generated-code button { font-size: 0; width: 36px; padding: 0; }
  .lobby-note { align-items: flex-start; }
  .lobby-note p { font-size: 9px; }
}

@media (max-width: 420px) {
  .shared-account .user-account-nickname { display: none; }
  .lobby-intro h1 { font-size: 34px; }
  .play-card-featured { min-height: 244px; }
  .time-option { padding: 0 8px; }
}

/* Lobby simplificado */
.play-options { display: block; }
.primary-play { padding: 32px; overflow: hidden; border: 1px solid rgb(249 115 22 / 48%); border-radius: 7px; background: linear-gradient(145deg, rgb(249 115 22 / 11%), transparent 52%), rgb(25 21 18 / 92%); box-shadow: 0 18px 55px rgb(0 0 0 / 16%); }
.primary-play h2 { max-width: 580px; margin: 12px 0 8px; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.045em; }
.primary-play p, .private-play p { margin: 0; color: var(--texto-suave); font-size: 12px; line-height: 1.65; }
.primary-play .option-action { width: min(100%, 340px); margin-top: 26px; }
.primary-play .matchmaking-message { width: min(100%, 340px); min-height: 16px; margin-top: 8px; display: block; color: var(--texto-suave); font-size: 9px; text-align: center; }
.primary-play .matchmaking-message.error { color: #f87171; }
.private-play { padding-top: 38px; }
.private-play-header { margin-bottom: 20px; }
.private-play-header h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.025em; }
.private-play-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.private-action { min-width: 0; padding: 24px 28px 24px 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; }
.private-action + .private-action { padding-right: 0; padding-left: 28px; border-left: 1px solid var(--borda); }
.private-action h3 { margin: 8px 0 0; font-size: 18px; letter-spacing: -.025em; }
.private-action .option-action { width: auto; min-width: 132px; margin: 0; padding: 0 18px; }
.join-form { margin: 0; }
.join-control { width: min(100%, 210px); grid-template-columns: minmax(0, 1fr) 44px; }
.join-control input { width: 100%; }
.form-message { grid-column: 1 / -1; min-height: 0; margin: 5px 0 -14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.private-room-result { grid-template-columns: minmax(0, 1fr) minmax(210px, auto) auto; }
.private-room-result > .button { min-width: 126px; white-space: nowrap; }

@media (max-width: 900px) {
  .private-room-result { grid-template-columns: 1fr; }
  .private-room-result > .button { width: 100%; }
}

@media (max-width: 720px) {
  .primary-play { padding: 26px; }
  .primary-play h2 { font-size: 32px; }
  .private-play-actions { grid-template-columns: 1fr; }
  .private-action { padding: 22px 0; }
  .private-action + .private-action { padding: 22px 0; border-top: 1px solid var(--borda); border-left: 0; }
}

@media (max-width: 460px) {
  .primary-play .option-action { width: 100%; }
  .private-action { grid-template-columns: 1fr; gap: 16px; }
  .private-action .option-action, .join-control { width: 100%; }
  .private-room-result > .button { width: 100%; }
}