/* Tournament, private room and live-match lobby share the deck editor's brass/ink finish. */
:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) {
  --lobby-gold: #d6a545;
  --lobby-bright: #f3d889;
  --lobby-pale: #fff0bd;
  --lobby-line: rgba(207, 157, 62, .48);
  --lobby-line-soft: rgba(226, 187, 105, .18);
  box-sizing: border-box;
  color: #f7ecd1;
  border: 1px solid rgba(194, 143, 48, .48);
  border-radius: 6px;
  background:
    radial-gradient(circle at 15% 0%, rgba(219, 168, 64, .12), transparent 32%),
    repeating-linear-gradient(115deg, rgba(255, 238, 195, .016) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(13, 17, 18, .97), rgba(4, 7, 8, .97));
  box-shadow: inset 0 0 0 1px rgba(255, 226, 153, .05), inset 0 0 48px rgba(0, 0, 0, .34), 0 24px 70px rgba(0, 0, 0, .46);
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) *,
:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) *::before,
:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) *::after {
  box-sizing: border-box;
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) :is(h2, h3, h4) {
  color: var(--lobby-bright);
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .025em;
  text-shadow: 0 2px 2px #000, 0 0 18px rgba(215, 163, 58, .18);
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) :is(.eyebrow, .tournament-explainer article strong) {
  color: var(--lobby-gold);
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) :is(p, .small, .code-section-desc, .tournament-explainer article span) {
  color: rgba(246, 233, 203, .74);
}

#tournamentLobbyPanel .tournament-page-head,
#codeRoomPanel .code-room-head,
#spectatorLobbyPanel .spectator-lobby-head {
  position: relative;
  min-width: 0;
  padding: 12px 16px 18px;
  border: 1px solid var(--lobby-line);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(214, 165, 70, .1), transparent 34%), linear-gradient(180deg, rgba(25, 25, 20, .96), rgba(8, 11, 12, .96));
  box-shadow: inset 0 0 0 3px rgba(3, 5, 5, .48), inset 0 0 0 4px rgba(238, 193, 101, .09);
}

:is(#tournamentLobbyPanel .tournament-page-head, #codeRoomPanel .code-room-head, #spectatorLobbyPanel .spectator-lobby-head)::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(239, 201, 119, .1);
  pointer-events: none;
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) :is(button:not(.back-nav-btn), input, select, textarea) {
  font: inherit;
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) button:not(.back-nav-btn) {
  min-height: 42px;
  border-radius: 4px;
  border: 1px solid rgba(211, 165, 76, .53);
  color: #f5ddb0;
  background: linear-gradient(180deg, rgba(48, 45, 35, .98), rgba(14, 16, 16, .98));
  box-shadow: inset 0 1px rgba(255, 228, 158, .1), 0 4px 12px rgba(0, 0, 0, .25);
  cursor: pointer;
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) button.primary-action:not(.back-nav-btn),
#spectatorLobbyPanel .spectator-watch-btn {
  border-color: #e3ba64 !important;
  color: #160f07 !important;
  -webkit-text-fill-color: #160f07 !important;
  background: linear-gradient(180deg, #f6dfa0, #d4a34a 60%, #9b681e) !important;
  box-shadow: inset 0 1px rgba(255, 243, 196, .65), 0 8px 20px rgba(0, 0, 0, .3) !important;
  font-weight: 800;
  text-shadow: 0 1px rgba(255, 242, 189, .35);
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) button:not(.back-nav-btn):hover:not(:disabled) {
  border-color: #f1d180;
  filter: brightness(1.12);
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--lobby-bright);
  outline-offset: 2px;
}

:is(#tournamentLobbyPanel, #codeRoomPanel, #spectatorLobbyPanel) button:disabled {
  opacity: .52;
  cursor: not-allowed;
}

/* Tournament: the same inset plaques used by the deck collection. */
body.tournament-page-view > #tournamentLobbyPanel.tournament-lobby-panel {
  border-radius: 6px !important;
}

#tournamentLobbyPanel .tournament-page-head {
  margin-bottom: 18px;
}

#tournamentLobbyPanel .tournament-explainer {
  gap: 12px;
  margin: 0 0 24px;
}

#tournamentLobbyPanel :is(.tournament-explainer article, .tournament-admin-panel, .tournament-card, .tournament-duration-section, .tournament-community-card, .tournament-details-grid > div, .tournament-reward-editor) {
  min-width: 0;
  border: 1px solid var(--lobby-line-soft);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(225, 177, 81, .07), transparent 40%), linear-gradient(160deg, rgba(18, 20, 19, .96), rgba(5, 8, 9, .96));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), inset 0 0 0 4px rgba(231, 187, 94, .05), 0 10px 24px rgba(0, 0, 0, .2);
}

#tournamentLobbyPanel .tournament-explainer article {
  border-top-color: rgba(226, 187, 105, .53);
}

#tournamentLobbyPanel .tournament-explainer article strong {
  font-family: "Cinzel", Georgia, serif;
  font-size: .9rem;
}

#tournamentLobbyPanel .tournament-section-title {
  min-width: 0;
  margin-bottom: 8px;
}

#tournamentLobbyPanel .tournament-section-title h3,
#tournamentLobbyPanel .tournament-card-head h3 {
  overflow-wrap: anywhere;
}

#tournamentLobbyPanel .tournament-official-chip,
#tournamentLobbyPanel .tournament-joined-chip,
#tournamentLobbyPanel .tournament-status {
  border-radius: 3px;
  border-color: rgba(213, 165, 71, .45);
  background: rgba(78, 53, 17, .44);
}

#tournamentLobbyPanel .tournament-admin-form > label,
#tournamentLobbyPanel .tournament-sponsor-fields {
  min-width: 0;
  color: #f0dca9;
}

#tournamentLobbyPanel :is(.tournament-admin-form, .tournament-reward-editor) :is(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(211, 165, 76, .33);
  border-radius: 4px;
  color: #f8edd2;
  background: rgba(4, 7, 8, .92);
  color-scheme: dark;
}

#tournamentLobbyPanel :is(input, textarea)::placeholder {
  color: rgba(235, 219, 183, .5);
}

#tournamentLobbyPanel .tournament-sponsor-fields {
  border: 1px solid var(--lobby-line-soft);
  border-radius: 4px;
}

#tournamentLobbyPanel :is(.tournament-empty, .tournament-prize-table, .tournament-duration-table, .tournament-reward-tier, .tournament-reward-distribution, .tournament-bracket-match, .tournament-sponsors > div) {
  border-color: var(--lobby-line-soft);
  border-radius: 4px;
  background: rgba(5, 8, 9, .68);
}

#tournamentLobbyPanel .tournament-duration-table .head {
  background: rgba(115, 79, 22, .22);
}

#tournamentLobbyPanel .tournament-bracket-player {
  border-radius: 3px;
  background: rgba(255, 227, 163, .055);
}

#tournamentLobbyPanel .tournament-bracket-shell {
  margin-inline: 0;
}

/* Private match: compact, readable in portrait and short landscape viewports. */
#homeScreen #codeRoomPanel.code-room-panel {
  border-color: var(--lobby-line);
  border-radius: 6px;
  background: radial-gradient(circle at 15% 0%, rgba(219, 168, 64, .12), transparent 32%), linear-gradient(155deg, rgba(13, 17, 18, .97), rgba(4, 7, 8, .97));
  box-shadow: inset 0 0 0 1px rgba(255, 226, 153, .05), 0 24px 70px rgba(0, 0, 0, .46);
}

#codeRoomPanel .code-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

#codeRoomPanel .code-room-head h3 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

#codeRoomPanel .code-section {
  border: 1px solid var(--lobby-line-soft);
  border-top-color: rgba(226, 187, 105, .52);
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(225, 177, 81, .07), transparent 42%), linear-gradient(160deg, rgba(18, 20, 19, .96), rgba(5, 8, 9, .96));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .24), inset 0 0 0 4px rgba(231, 187, 94, .05);
}

#codeRoomPanel :is(.join-box input, .invite-link) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(211, 165, 76, .35);
  border-radius: 4px;
  color: #f8edd2;
  background: rgba(4, 7, 8, .92);
}

#codeRoomPanel :is(.room-code-display, .room-invite-section, .waiting-info) {
  border-color: var(--lobby-line-soft);
  border-radius: 4px;
  background: rgba(5, 8, 9, .56);
}

#codeRoomPanel #generatedRoomCode {
  color: var(--lobby-bright);
  letter-spacing: .16em;
}

#codeRoomPanel .invite-link-box { display: flex; gap: 8px; }
#codeRoomPanel .invite-link-box input { flex: 1 1 auto; }
#codeRoomPanel :is(.copy-btn, #cancelCreateBtn) { flex: 0 0 auto; }

/* Live matches: table on wide screens, separate match plaques on phones. */
#spectatorLobbyPanel.spectator-lobby-panel {
  width: min(100%, 1040px);
}

#spectatorLobbyPanel .spectator-lobby-head {
  margin-bottom: 16px;
}

#spectatorLobbyPanel .spectator-lobby-head > div { min-width: 0; }
#spectatorLobbyPanel .spectator-lobby-head .eyebrow { color: var(--lobby-gold); }

#spectatorLobbyPanel .spectator-table-wrap {
  border: 1px solid var(--lobby-line-soft);
  border-radius: 5px;
  background: rgba(4, 7, 8, .75);
}

#spectatorLobbyPanel .spectator-table-head {
  color: #e7ce90;
  background: linear-gradient(180deg, rgba(115, 79, 22, .23), rgba(24, 22, 17, .66));
}

#spectatorLobbyPanel .spectator-match-row {
  min-width: 0;
  border-top-color: var(--lobby-line-soft);
  background: rgba(9, 13, 13, .84);
}

#spectatorLobbyPanel .spectator-match-row:nth-child(even) {
  background: rgba(34, 29, 20, .62);
}

#spectatorLobbyPanel .spectator-duelists strong { color: #fff0bd; }
#spectatorLobbyPanel .spectator-duelists small { color: rgba(246, 233, 203, .64); }
#spectatorLobbyPanel .spectator-cell { color: #eaddbb; }
#spectatorLobbyPanel .spectator-empty { color: rgba(246, 233, 203, .65); }
#spectatorLobbyPanel .spectator-empty strong { color: var(--lobby-bright); }
#spectatorLobbyPanel .spectator-page-btn.active { border-color: #e3ba64; color: #160f07; background: #e3ba64; }

@media (max-width: 760px) {
  body.tournament-page-view > #tournamentLobbyPanel.tournament-lobby-panel {
    border-width: 0;
    border-radius: 0 !important;
  }

  #tournamentLobbyPanel :is(.tournament-page-head, .tournament-admin-panel, .tournament-duration-section, .tournament-community-card) {
    padding: 12px;
  }

  #tournamentLobbyPanel .tournament-explainer {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0 20px;
  }

  #tournamentLobbyPanel .tournament-admin-form,
  #tournamentLobbyPanel .tournament-sponsor-input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #tournamentLobbyPanel .tournament-admin-form .wide { grid-column: 1; }
  #tournamentLobbyPanel .tournament-card-head { flex-wrap: wrap; }
  #tournamentLobbyPanel .tournament-capacity { margin-left: auto; }
  #tournamentLobbyPanel .tournament-official-chip { max-width: 100%; white-space: normal; }
}

@media (max-width: 900px) {
  #spectatorLobbyPanel .spectator-table-head { display: none; }
  #spectatorLobbyPanel .spectator-table-wrap { border: 0; overflow: visible; background: none; }
  #spectatorLobbyPanel .spectator-matches-list { display: grid; gap: 10px; }
  #spectatorLobbyPanel .spectator-match-row,
  #spectatorLobbyPanel .spectator-match-row:nth-child(even) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    border: 1px solid var(--lobby-line-soft);
    border-top-color: rgba(226, 187, 105, .52);
    border-radius: 5px;
    background: linear-gradient(145deg, rgba(36, 31, 21, .86), rgba(5, 8, 9, .94));
  }

  #spectatorLobbyPanel .spectator-duelists,
  #spectatorLobbyPanel .spectator-watch-btn { grid-column: 1 / -1; }
  #spectatorLobbyPanel .spectator-cell::before {
    content: attr(data-label) ": ";
    color: #bd9d59;
    font-size: .66rem;
    text-transform: uppercase;
  }

  #spectatorLobbyPanel .spectator-watch-btn { width: 100%; min-height: 44px; }
}

@media (max-width: 700px) {
  #spectatorLobbyPanel.spectator-lobby-panel {
    width: 100%;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  #spectatorLobbyPanel .spectator-lobby-head { gap: 8px; padding: 12px; }
}

@media (max-width: 620px) {
  #homeScreen #codeRoomPanel.code-room-panel { border-radius: 5px; }
  #codeRoomPanel .code-room-head { padding: 10px 12px; }
  #codeRoomPanel :is(#createRoomBtn, #joinRoomBtn, #cancelCreateBtn, #roomCodeInput) { min-height: 44px; }
  #codeRoomPanel .invite-link-box { flex-wrap: wrap; }
  #codeRoomPanel .invite-link-box .copy-btn { min-height: 44px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  #homeScreen #codeRoomPanel.code-room-panel { width: min(680px, 100%); max-width: 680px; }
  #codeRoomPanel .code-room-head { padding: 8px 12px; }
  #codeRoomPanel .code-section { padding: 9px 12px; }
  #codeRoomPanel :is(#createRoomBtn, #joinRoomBtn, #cancelCreateBtn, #roomCodeInput) { min-height: 40px; }
  #spectatorLobbyPanel.spectator-lobby-panel { max-width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); }
}