/* In-room chrome (split from styles.css 2026-06-29 by UI area).
   House controls, player card, in-room game chrome, macro-board, dark fixups.
   Linked AFTER styles-roster.css to preserve the original cascade order. */

.house-controls,
.house-panel {
  display: grid;
  gap: 8px;
}

.house-controls.hidden {
  display: none;
}

.house-buttons {
  display: flex;
  gap: 8px;
}

.house-buttons button {
  width: auto;
  flex: 1;
}

.house-options {
  display: grid;
  gap: 6px;
}

.house-name-field {
  display: grid;
  gap: 4px;
}

.house-current,
.house-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

.house-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-weight: 700;
}

.house-row-count {
  color: var(--accent-strong);
  font-weight: 700;
}

.house-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.house-picker-header .house-back {
  width: auto;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
}

.house-picker-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 6px 10px;
  overflow: hidden;
}

.player-card > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
}

.player-actions.hidden {
  display: none;
}

.player-actions button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.88rem;
}

.delete-player {
  color: var(--danger-ink);
}

button.danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.player-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ring);
}

.avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
}

.color-palette {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.choice {
  width: 42px;
  min-height: 42px;
  padding: 0;
}

.choice.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ring);
}

.swatch {
  border-radius: 6px;
  width: 100%;
  min-height: 28px;
}

.room-host-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 48px;
  font-weight: 800;
}

.room-host-summary .label {
  grid-column: 1 / -1;
  font-weight: 700;
}

.room-host-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-action {
  display: flex;
  justify-content: flex-end;
}

.section-action button {
  width: auto;
  min-width: 132px;
}

.room-slots {
  display: grid;
  gap: 12px;
}

.room-slot {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  font-weight: 800;
}

.room-slot strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-slot > button {
  grid-column: 1 / -1;
  width: 100%;
}

.room-slot.status-only {
  display: flex;
  justify-content: center;
  text-align: center;
}

.invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.player-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.player-switch-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  cursor: default;
  user-select: none;
}

button.player-switch-button {
  cursor: pointer;
}

.player-switch-button .avatar {
  width: 30px;
  height: 30px;
}

.player-switch-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-switch-button.current-turn {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--ring);
}

.player-switch-button em {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 20px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--on-pill);
  font-style: normal;
  font-size: 12px;
  line-height: 1;
}

.turn-status {
  min-height: 42px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.player-switch + .turn-status { margin-top: 8px; }
.turn-status.hidden { display: none; }   /* .hidden alone loses the cascade to .turn-status */

.turn-status.your-turn {
  border-color: var(--turn-color, var(--accent));
  background: var(--turn-soft, #e8f3ef);
  color: var(--turn-text, var(--accent-strong));
}

.turn-status.waiting {
  border-color: var(--turn-color, var(--accent));
  background: var(--turn-soft, #e8f3ef);
  color: var(--turn-text, var(--accent-strong));
  animation: waiting-pulse 1.4s ease-in-out infinite;
}

.macro-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 95%;
  aspect-ratio: 1;
  align-self: center;
}

.macro-board.your-turn {
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--turn-glow, rgba(31, 122, 95, 0.18));
}

.macro-board.waiting {
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--turn-glow, rgba(31, 122, 95, 0.35));
  animation: waiting-pulse 1.4s ease-in-out infinite;
}

.macro-board.boxes-room-board {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.macro-board.battleship-room-board {
  display: block;
  width: 100%;
  aspect-ratio: auto;
  padding: 10px;
  border: 3px solid var(--turn-color, var(--line));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--turn-glow, rgba(31, 122, 95, 0.16));
}


/* Dark-mode fixups for the few translucent/special surfaces kept as light
   literals above (tokenizing them would have shifted the light look). */
:root[data-theme="dark"] .sound-toggle {
  border-color: var(--line);
  background: var(--surface);
}
:root[data-theme="dark"] .sound-toggle.muted {
  background: var(--surface-sunken);
}
:root[data-theme="dark"] .game-card:disabled {
  border-color: var(--line);
}

/* Opening screen (#intro): deepen the brand hero into the page dark base; keep
   the primary button's label dark-red; admin action → danger tokens. */
:root[data-theme="dark"] #intro {
  background: linear-gradient(160deg, #b3151b 0%, #6d0e12 45%, #0e1117 100%);
}
:root[data-theme="dark"] #intro .primary {
  color: #8f1116;
}
:root[data-theme="dark"] #intro .intro-admin-action {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-ink);
}

/* Game-screen styles live in styles-games.css, linked right after this file. */