/* IceBreaker Social */
/* public/styles.css */

/* App title (all screens) */
.app-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}

.app-user-email {
  margin: 0 0 14px;
  text-align: right;
  font-size: 0.85rem;
  opacity: 0.75;
  word-break: break-all;
}

.app-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.app-title-wrap h1 {
  margin: 0;
}

.app-subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.app-title-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

/* Fast tooltips — shared floating tip (~120ms; replaces slow native title) */
.app-fast-tooltip {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  max-width: min(240px, calc(100vw - 16px));
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 148, 154, 0.28);
  background: #2e2836;
  color: #f3ebe6;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.08s ease;
}

.app-fast-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

body.player-app .app-fast-tooltip {
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  .app-fast-tooltip {
    transition: none;
  }
}

@media (max-width: 480px) {
  .app-title-wrap h1 {
    font-size: 1.5rem;
  }
}

/* Base */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  background: #111;
  color: #eee;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 520px;
  margin: 0 auto;
  /* Slightly less top pad — reclaim space above Sexcapades title */
  padding: 14px 24px 24px;
}

/* Cards */
.card {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),
    url("img/panel-gold.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgb(246, 206, 100);
  border-radius: 16px;
  padding: 18px;
  margin: 16px 0;
}

/* Headings */
h1 {
  font-size: 2.1rem;
  margin: 0;
  text-align: center;
}

h2 {
  margin: 0 0 8px;
  font-size: 1.125rem; /* ~10% under 1.25rem */
}

/* Card headings: same gold as status card */
.card h2,
.game-screen__panel-title {
  color: rgb(246, 206, 100);
}

/* Buttons */
button {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 12px;
  background: rgb(246, 206, 100);
  color: #111;
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button variants used by the new player rows */
.btn-primary {
  background: rgb(246, 206, 100);
  color: #111;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgb(246, 206, 100);
  color: #eee;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.btn-ghost:active {
  background: rgb(246, 206, 100);
  color: #111;
}

.btn-ghost.danger {
  border-color: rgba(255, 70, 70, 0.45);
  color: rgba(255, 150, 150, 1);
}

/* Inputs */
input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #eee;
  font-size: 1.05rem;
  margin-top: 10px;
  outline: none;
  box-sizing: border-box;
}

input::placeholder {
  opacity: 0.6;
}

/* Join Room card: center heading and input text */
/* Compact buttons: only as wide as label (Create Room / Join Room) */
.btn-fit {
  width: auto;
  min-width: 0;
  padding: 14px 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.create-room-card h2,
.join-room-card h2 {
  text-align: center;
}

.game-modes-card h2 {
  text-align: center;
}

.game-modes-card .game-mode-btn {
  width: 100%;
  box-sizing: border-box;
}

.game-mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.join-room-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.join-room-card #joinCode,
.quick-join-card #quickJoinCode {
  width: 8ch;
  max-width: 8ch;
  min-width: 8ch;
  margin: 0;
  display: block;
  text-align: center;
  letter-spacing: 0.15em;
  box-sizing: content-box;
  font-size: 0.9em;
}

/* Host setup screen (before lobby) */
.host-setup-setup {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.host-setup-tip {
  opacity: 0.9;
  font-size: 0.95rem;
  margin: 0 0 12px;
}

.host-setup-room {
  margin: 0 0 14px;
  font-size: 0.95rem;
}

.host-setup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.host-setup-actions button {
  margin-top: 0;
}

.host-setup-ready {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.host-setup-ready-msg {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.95;
  background: rgba(0, 255, 140, 0.1);
  border: 1px solid rgba(0, 255, 140, 0.3);
  border-radius: 10px;
}

#btnHostSetupLeave {
  margin-top: 20px;
}

/* Consent checkbox */
.checkline {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  font-size: 0.95rem;
}

.checkline input {
  width: 22px;
  height: 22px;
  accent-color: rgb(246, 206, 100);
  margin-top: 0;
}

/* Action feedback: short status messages (Ready., Finding Action, Turn advanced., errors). setStatus() in app.js. */
.action-feedback {
  font-weight: 500;
  opacity: 0.95;
  color: rgb(246, 206, 100);
}

/* Lobby: inside banner */
.lobby-status-msg.action-feedback {
  margin-top: 6px;
}

/* Game: setStatus() line — sits under Game Panel title inside the card */
.game-action-feedback,
.game-panel-status {
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: 0.85rem;
  color: rgb(246, 206, 100);
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  width: 100%;
}
.game-action-feedback:empty,
.game-panel-status:empty {
  display: none;
}

/* Room code emphasis */
#roomCode,
#lobbyRoomCode {
  display: inline-block;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  margin-top: 6px;
}

/* =========================
   Lobby/Game Banner (mobile-first)
   ========================= */
.lobby-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: 12px 12px;
  margin: 10px 0 12px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;

  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}

.lobby-banner__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lobby-banner__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
}

.lobby-banner__subtitle {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.9;
  margin: 0 0 8px;
}

.lobby-banner__meta {
  font-size: 0.9rem;
  opacity: 0.75;
}

.lobby-banner__meta strong {
  font-weight: 700;
}

/* Lobby: larger H2 to bridge gap with H1 (IceBreaker Social) */
#screenLobby .card h2 {
  font-size: 1.6rem;
  text-align: center;
}

.lobby-status-msg,
.game-status-msg {
  margin: 8px 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
  min-height: 1.2em;
}

/* =========================
   Tone styling via data-tone
   Works for Lobby + Game (any child with data-tone)
   + fallback for older browsers
   ========================= */

.lobby-banner:has([data-tone="info"]) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
}

.lobby-banner:has([data-tone="success"]) {
  border-color: rgba(0, 255, 140, 0.35);
  background: rgba(0, 255, 140, 0.08);
}

.lobby-banner:has([data-tone="warning"]) {
  border-color: rgba(255, 200, 0, 0.40);
  background: rgba(255, 200, 0, 0.08);
}

.lobby-banner:has([data-tone="danger"]) {
  border-color: rgba(255, 70, 70, 0.45);
  background: rgba(255, 70, 70, 0.08);
}

/* Fallback: if :has() unsupported, tint the subtitle text only */
#lobbyInfo[data-tone="success"],
#gameBannerSubtitle[data-tone="success"] { color: rgba(0, 255, 140, 0.95); }

#lobbyInfo[data-tone="warning"],
#gameBannerSubtitle[data-tone="warning"] { color: rgba(255, 200, 0, 0.95); }

#lobbyInfo[data-tone="danger"],
#gameBannerSubtitle[data-tone="danger"]  { color: rgba(255, 120, 120, 0.95); }

/* =========================
   Player list rows + badges
   ========================= */

.pill {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid #2a2a2a;
  background: #141414;
}

.players-list .pill {
  border: 2px solid rgb(246, 206, 100);
}

.player-row {
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease;
}

.player-row.is-ready {
  transform: translateY(-1px);
}

.player-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.player-avatar-wrap {
  flex-shrink: 0;
}

.player-details {
  flex: 1;
  min-width: 0;
}

.player-name-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.player-name {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(246, 206, 100, 0.4);
  background: rgba(246, 206, 100, 0.12);
  flex-shrink: 0;
}

.player-pill--gender {
  border-color: rgba(100, 180, 255, 0.5);
  background: rgba(100, 180, 255, 0.12);
}

.player-pill--sexuality {
  border-color: rgba(180, 100, 255, 0.5);
  background: rgba(180, 100, 255, 0.12);
}

.player-pill--lifestyle {
  border-color: rgba(100, 200, 150, 0.5);
  background: rgba(100, 200, 150, 0.12);
}

.player-valid-opponents {
  font-size: 0.75rem;
  opacity: 0.85;
  margin-top: 4px;
}

.player-badges {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.badge-mine { opacity: 0.9; }

.badge-host {
  border-color: rgba(246, 206, 100, 0.5);
  background: rgba(246, 206, 100, 0.15);
  color: rgb(246, 206, 100);
}

.badge-ready {
  border-color: rgba(0, 255, 140, 0.35);
  background: rgba(0, 255, 140, 0.08);
}

.badge-notready {
  border-color: rgba(255, 200, 0, 0.40);
  background: rgba(255, 200, 0, 0.08);
}

.badge-pending {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

/* Button when player is in ready state (shows "Set Not Ready") */
.btn-ready-state {
  background: #0d5c3d;
  color: #fff;
  border-color: #0d5c3d;
}

.btn-ready-state:hover {
  background: #0f6d48;
  color: #fff;
  border-color: #0f6d48;
}

.player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
}

.player-actions button {
  margin-top: 0;       /* override global button margin */
}

.player-actions__btn,
body.player-app .player-actions__btn.btn-ghost {
  box-sizing: border-box;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 148, 154, 0.35);
  background: rgba(22, 19, 28, 0.35);
  color: var(--color-text, #f3ebe6);
  font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  width: auto;
  min-width: 6.75rem;
  justify-content: center;
}

body.player-app .player-actions__btn.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent, #d4949a);
  color: var(--color-text, #f3ebe6);
}

body.player-app .player-actions__btn.btn-ghost:active:not(:disabled) {
  background: rgba(212, 148, 154, 0.28);
  border-color: var(--color-accent-strong, #e2a8ad);
  color: var(--color-text, #f3ebe6);
}

.player-actions__btn.is-ready,
body.player-app .player-actions__btn.btn-ghost.is-ready {
  background: rgba(90, 154, 150, 0.28);
  border-color: rgba(110, 176, 171, 0.65);
  color: var(--color-accent-teal-strong, #6eb0ab);
}

body.player-app .player-actions__btn.btn-ghost.danger {
  border-color: rgba(224, 138, 138, 0.55);
  color: var(--color-danger, #e08a8a);
}

.player-actions .muted {
  opacity: 0.8;
  font-weight: 600;
}

/* Links (if you add any later) */
a {
  color: rgb(246, 206, 100);
}

/* Toast */
.toast {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}

.toast-inner {
  width: min(520px, 92vw);
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 14px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Home: Admin + Sign out row */
.home-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.home-actions-row .btn-ghost {
  margin-top: 0;
  width: auto;
}

.home-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 14px 16px;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}

.admin-key-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.btn-inline {
  width: auto;
  padding: 6px 12px;
  margin: 0 0 0 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ----- Lobby: room card ----- */
/* Lobby: Start Game / Leave Room (between banner and Game Lobby) */
.lobby-primary-actions-card {
  padding: 12px 18px;
}

.lobby-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* Lobby primary actions: same style as game-nav (icon buttons) */
.lobby-primary-actions.game-nav .game-nav__btn {
  width: auto;
  min-width: 0;
  margin: 0;
}

.lobby-room-card .lobby-room-header {
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lobby-room-card .lobby-room-header h2 {
  width: 100%;
  margin: 0;
}

.lobby-room-code-row {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.lobby-room-code-row .btn-inline {
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 4px 12px;
  font-size: 0.95rem;
  line-height: 1;
  /* Nudge button down to align with room code (browsers often render buttons slightly high) */
  transform: translateY(2px);
}

.lobby-room-code-row strong {
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  line-height: 1;
}

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

.lobby-actions-secondary {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.lobby-actions-secondary button {
  flex: 1;
}

/* ----- Lobby: add players ----- */
.add-players-card__details {
  display: block;
}

.add-players-card__details:not([open]) .add-players-card__summary {
  border-bottom: none;
}

.add-players-card__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
  font-size: inherit;
  font-weight: 600;
}

.add-players-card__summary::-webkit-details-marker {
  display: none;
}

.add-players-card__summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-right: 4px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.add-players-card__details[open] .add-players-card__summary::before {
  transform: rotate(180deg);
}

.add-players-card__body {
  margin-top: var(--card-heading-to-divider-gap, 6px);
  padding-top: 8px;
  border-top: none;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.add-players-card__details[open] .add-players-card__body {
  border-top: 1px solid rgba(246, 206, 100, 0.35);
}

.add-players-card .add-players-tip {
  opacity: 0.85;
  font-size: 0.95rem;
  margin: 0 0 12px;
  text-align: center;
}

.add-player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.add-player-form-row {
  justify-content: center;
}

.add-player-input-wrap {
  min-width: 0;
  flex: 1;
}

.add-player-input-wrap--centered {
  display: flex;
  justify-content: center;
  flex: 1;
}

.add-player-input-wrap input {
  margin-top: 0;
}

/* Player name: trim to maxlength, center field and text (add-player + host-setup only) */
.add-players-card .player-name-input--short,
.host-setup-card .player-name-input--short {
  width: 20ch;
  max-width: 20ch;
  min-width: 10ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.add-players-card .player-name-input--couple,
.host-setup-card .player-name-input--couple {
  width: 20ch;
  max-width: 20ch;
  min-width: 12ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.add-players-card .player-name-input {
  text-align: left;
}

.add-players-card .player-name-input--short,
.add-players-card .player-name-input--couple,
.host-setup-card .player-name-input--short,
.host-setup-card .player-name-input--couple {
  text-align: center;
}

.add-player-input-wrap .player-name-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.add-player-input-wrap--centered .player-name-input--short,
.add-player-input-wrap--centered .player-name-input--couple {
  width: 20ch;
  max-width: 20ch;
}

.add-player-input-wrap--centered .player-name-input--couple {
  width: 20ch;
  max-width: 20ch;
}

.avatar-preview-wrap {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-preview-wrap .avatar-icon {
  font-size: 22px;
  line-height: 1;
}

.avatar-preview-wrap .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 14px;
}

.avatar-picker-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 8px;
}

.avatar-picker-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.avatar-picker-buttons--icons {
  justify-content: center;
  gap: 10px;
}

.btn-avatar-opt {
  width: auto;
  padding: 10px 14px;
  margin: 0;
  font-size: 0.95rem;
}

/* Avatar type: black style + icon-only (add-player forms) */
.btn-avatar-opt--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border: 1px solid rgb(246, 206, 100);
  color: rgb(246, 206, 100);
  border-radius: 10px;
}

.btn-avatar-opt--icon:hover {
  background: #1a1a1a;
  color: rgb(246, 206, 100);
}

.btn-avatar-opt--icon.btn-ghost {
  background: transparent;
  color: #eee;
  border-color: rgba(246, 206, 100, 0.6);
}

.btn-avatar-opt--icon.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.avatar-opt-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.avatar-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0 auto 14px;
  width: 100%;
  max-width: 20rem;
  box-sizing: border-box;
  justify-items: stretch;
}

.avatar-icon-grid button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px;
  font-size: 1.35rem;
  line-height: 1;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid rgb(246, 206, 100);
  border-radius: 10px;
}

.add-player-submit {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.add-player-submit button:first-child {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  padding: 10px 18px;
  font-size: 0.95rem;
}

.add-player-submit .btn-ghost {
  flex: 0 1 auto;
}

/* Dropdowns for Gender / Sexuality / Lifestyle (replacing button rows) */
.add-player-select-wrap {
  margin-bottom: 14px;
}

.add-player-select-wrap__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.add-player-select-wrap__row .add-player-select-label {
  margin-bottom: 0;
  line-height: 1.3;
}

.add-player-select-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 6px;
}

.add-player-select {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  background: #111;
  color: #eee;
  font-size: 1rem;
  cursor: pointer;
  box-sizing: border-box;
}

.add-player-select:focus {
  outline: none;
  border-color: rgb(246, 206, 100);
}

.gender-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.gender-select-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.gender-select-wrap .btn-avatar-opt.selected {
  border-color: rgb(246, 206, 100);
  background: rgba(246, 206, 100, 0.15);
}

.sexuality-select-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}

.sexuality-select-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.sexuality-select-wrap .btn-avatar-opt.selected {
  border-color: rgb(246, 206, 100);
  background: rgba(246, 206, 100, 0.15);
}

.lifestyle-select-wrap {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}

.lifestyle-select-label {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.lifestyle-select-wrap .btn-avatar-opt.selected {
  border-color: rgb(246, 206, 100);
  background: rgba(246, 206, 100, 0.15);
}

.lifestyle-help-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(246, 206, 100, 0.5);
  background: rgba(246, 206, 100, 0.12);
  color: rgb(246, 206, 100);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lifestyle-help-btn:hover {
  background: rgba(246, 206, 100, 0.25);
}

.lifestyle-helper-text {
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 6px 0 0;
  width: 100%;
}

.lifestyle-help-popover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 20px;
}

.lifestyle-help-popover__card {
  position: relative;
  background: #1b1b1b;
  border: 1px solid rgb(246, 206, 100);
  border-radius: 16px;
  padding: 24px;
  max-width: 360px;
  max-height: 90vh;
  overflow-y: auto;
}

.lifestyle-help-popover__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.lifestyle-help-popover__list {
  margin: 0 0 16px;
  padding-left: 20px;
  list-style: disc;
}

.lifestyle-help-popover__list li {
  margin-bottom: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.lifestyle-help-popover__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  border: none;
  background: transparent;
  color: #eee;
  cursor: pointer;
  border-radius: 8px;
}

.lifestyle-help-popover__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.gender-badge {
  font-size: 0.75rem;
  opacity: 0.85;
  margin-left: 6px;
}

.couple-add-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.3);
}

.couple-add-section:last-of-type {
  border-bottom: none;
}

.couple-add-label {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
}

.couple-name-wrap {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.couple-name-wrap .player-name-input--couple {
  display: block;
  width: 20ch;
  max-width: 20ch;
  min-width: 12ch;
  margin-left: auto;
  margin-right: auto;
}

.couple-name-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 6px;
}

.couple-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(246, 206, 100, 0.4);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}

.couple-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.95;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.3);
}

.couple-card .player-row {
  margin-bottom: 6px;
}

.couple-card .player-row:last-child {
  margin-bottom: 0;
}

/* ----- Players list ----- */
.players-list-title {
  margin-bottom: 4px;
}

.players-summary {
  opacity: 0.75;
  font-weight: 600;
  font-size: 0.95rem;
}

.ready-summary {
  margin-top: 6px;
  opacity: 0.85;
  font-weight: 600;
  font-size: 0.9rem;
}

.players-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.players-list-empty {
  opacity: 0.8;
  margin: 0;
}

/* ----- Game screen ----- */
.game-screen {
  padding-bottom: 8px; /* was 24 — less trailing space under game-nav */
  position: relative;
}

.game-paused-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 16px;
}

.game-paused-overlay__text {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  max-width: 320px;
}

.game-screen__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  --card-heading-to-divider-gap: 6px; /* Standard gap between card heading and dividing line below (matches Player Turn) */
}

/* Side menu: mobile hidden; laptop game shows it (see player-app ≥768) */
.game-side-menu {
  display: none;
}

.game-screen__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.game-screen__body > .card:not(.game-side-menu),
.game-screen__main > .card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-top: 8px;
}

/* Game screen card headings: single size and style for ROOM INFORMATION, PROGRESS, PLAYER TURN, RECENT TURNS, HOST SETTINGS */
.game-screen__body .game-screen__panel-title,
.game-screen__body .card .game-screen__panel-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
}

/* Collapsed expandable cards: minimal vertical footprint (align with Recent turns) */
.game-status-card__details:not([open]) .game-status-card__summary,
.intensity-card__details:not([open]) .intensity-card__summary,
.card-history-card__details:not([open]) .card-history-card__summary {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.game-status-card__details[open] .game-status-card__summary,
.intensity-card__details[open] .intensity-card__summary,
.card-history-card__details[open] .card-history-card__summary {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
  margin-bottom: 0;
}

/* Intensity / expandable summaries: one divider only (not also on .game-screen__panel-title) */
.game-screen__body .card.intensity-card .intensity-card__summary.game-screen__panel-title,
.game-screen__body .dare-wheel-game .card.intensity-card .intensity-card__summary.game-screen__panel-title {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.game-screen__body .card.intensity-card .intensity-card__details[open] > .intensity-card__summary.game-screen__panel-title,
.game-screen__body .dare-wheel-game .card.intensity-card .intensity-card__details[open] > .intensity-card__summary.game-screen__panel-title {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
}

/* Game Chat */
.game-chat {
  display: flex;
  flex-direction: column;
  height: 210px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(246, 206, 100, 0.35);
  border-radius: 12px;
  overflow: hidden;
}

/* Input row: input + send + timer; Dare Wheel adds emoji column */
.game-chat__input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid rgba(246, 206, 100, 0.35);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.25);
  order: 3;
  position: relative;
  z-index: 2;
  min-width: 0;
}
/* Laptop/default: tools unwrap so order is input | emoji | send | timer */
.game-chat__composer-tools {
  display: contents;
}
.game-chat__input { order: 1; }
.game-chat__emoji-btn { order: 2; }
.game-chat__send { order: 3; }
.game-chat__timer-btn { order: 4; }
.game-chat__emoji-popover,
.game-chat__timer-popover { order: 5; }
.game-chat--with-emoji .game-chat__input-wrap {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.game-chat__timer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  border: 1px solid rgba(246, 206, 100, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.game-chat__timer-btn:hover,
.game-chat__timer-btn[aria-expanded="true"] {
  background: rgba(246, 206, 100, 0.15);
  border-color: rgba(246, 206, 100, 0.7);
}
.game-chat__timer-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.game-chat__timer-btn.is-running {
  background: rgba(246, 206, 100, 0.22);
  border-color: rgba(246, 206, 100, 0.95);
  color: #f6ce64;
  box-shadow:
    0 0 0 1px rgba(246, 206, 100, 0.35),
    0 0 12px rgba(246, 206, 100, 0.45),
    0 0 22px rgba(246, 206, 100, 0.25);
  animation: chatTimerActiveGlow 1.1s ease-in-out infinite;
}
.game-chat__timer-btn.is-running .game-chat__timer-icon {
  display: none;
}
@keyframes chatTimerActiveGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(246, 206, 100, 0.3),
      0 0 10px rgba(246, 206, 100, 0.35),
      0 0 18px rgba(246, 206, 100, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(246, 206, 100, 0.55),
      0 0 16px rgba(246, 206, 100, 0.6),
      0 0 28px rgba(246, 206, 100, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-chat__timer-btn.is-running {
    animation: none;
  }
}
.game-chat__timer-label[hidden] {
  display: none !important;
}
.game-chat__timer-popover {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 6px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid rgba(246, 206, 100, 0.4);
  background: rgba(20, 16, 12, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  z-index: 5;
  box-sizing: border-box;
}
.game-chat__timer-popover[hidden] {
  display: none !important;
}
.game-chat__timer-option {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
.game-chat__timer-option:hover {
  background: rgba(246, 206, 100, 0.14);
  border: none;
  color: inherit;
}
.game-chat__timer-option--cancel {
  width: auto;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(246, 206, 100, 0.25);
  border-radius: 0 0 6px 6px;
  color: rgba(255, 180, 180, 0.95);
  font-weight: 600;
}

/* Full-screen brief flash when task timer hits zero */
.task-timer-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 240, 235, 0.55), rgba(212, 148, 154, 0.35) 45%, transparent 72%),
    rgba(226, 168, 173, 0.45);
}
.task-timer-flash-overlay.is-active {
  animation: taskTimerFlashBurst 2s ease-out forwards;
}
@keyframes taskTimerFlashBurst {
  0% { opacity: 0; }
  8% { opacity: 1; }
  22% { opacity: 0.35; }
  38% { opacity: 1; }
  55% { opacity: 0.4; }
  72% { opacity: 0.95; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .task-timer-flash-overlay.is-active {
    animation: taskTimerFlashBurstReduced 0.6s ease-out forwards;
  }
  @keyframes taskTimerFlashBurstReduced {
    0% { opacity: 0; }
    30% { opacity: 0.7; }
    100% { opacity: 0; }
  }
}

.game-chat__emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid rgba(246, 206, 100, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.game-chat__emoji-btn:hover,
.game-chat__emoji-btn[aria-expanded="true"] {
  background: rgba(246, 206, 100, 0.15);
  border-color: rgba(246, 206, 100, 0.7);
}

.game-chat__emoji-popover {
  position: absolute;
  right: 12px;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  width: min(280px, calc(100% - 24px));
  max-width: 20rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(246, 206, 100, 0.4);
  background: rgba(18, 14, 10, 0.98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
  justify-items: stretch;
}
/* Escapes chat overflow:clip so the full emoji set (incl. custom icons) is reachable */
.game-chat__emoji-popover--fixed {
  position: fixed;
  z-index: 12000;
}
.game-chat__emoji-popover[hidden] {
  display: none !important;
}
.game-chat__emoji-popover-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  padding: 4px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  box-sizing: border-box;
  box-shadow: none;
  transform: none;
}
.game-chat__emoji-popover-item:hover {
  background: rgba(246, 206, 100, 0.12);
  border-color: rgba(246, 206, 100, 0.35);
}
.game-chat__emoji-popover-item--custom {
  padding: 4px;
}
.game-chat__emoji-popover-item--custom .game-chat__custom-emoji {
  width: 100%;
  height: 100%;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  display: block;
}
.game-chat__custom-emoji {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.25em;
  object-fit: contain;
  display: inline-block;
}
.game-chat__emoji {
  font-size: 1.15em;
  line-height: 1;
}
/* Black whip needs a light edge on dark chat chrome */
.game-chat__custom-emoji--whip {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
}

.game-chat__input {
  min-width: 0;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #eee;
  cursor: text;
  pointer-events: auto;
  touch-action: manipulation;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.game-chat__input::placeholder {
  opacity: 0.6;
}

.game-chat__input:focus {
  outline: 2px solid rgba(246, 206, 100, 0.6);
  outline-offset: 2px;
}

.game-chat__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  font-weight: 600;
  border-radius: 8px;
  flex-shrink: 0;
}

.game-chat__send-icon {
  width: 20px;
  height: 20px;
  opacity: 0.95;
}

.game-chat__cooldown {
  font-size: 0.8rem;
  opacity: 0.75;
  padding: 4px 12px 8px;
  margin: 0;
  order: 2;
}

.game-chat__messages {
  flex: 1 1 auto;
  /* Required so the flex child can shrink and scroll; otherwise new lines are
     clipped by .game-chat { overflow: hidden } until a later reflow. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.28; /* ~12% tighter than 1.45 */
  order: 1;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.game-chat__messages::-webkit-scrollbar {
  width: 8px;
}

.game-chat__messages::-webkit-scrollbar-track {
  background: transparent;
}

.game-chat__messages::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.game-chat__messages::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

/* Send as selector (only when 2+ players on this device) */
.game-chat__send-as {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 8px;
  border-bottom: 1px solid rgba(246, 206, 100, 0.35);
  flex-shrink: 0;
}

.game-chat__send-as-label {
  font-size: 0.8rem;
  opacity: 0.85;
  white-space: nowrap;
}

.game-chat__send-as-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
}

.game-chat__message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px; /* ~12% tighter than 8px */
  word-break: break-word;
}

.game-chat__message--new {
  animation: gameChatMessageNew 1.2s ease-out;
}

.dare-wheel-game__thumb-wrap--pending {
  opacity: 0.72;
}

.game-chat__message--pending {
  opacity: 0.72;
}

@keyframes gameChatMessageNew {
  0% {
    background-color: rgba(246, 206, 100, 0.32);
  }
  100% {
    background-color: transparent;
  }
}

.game-chat__message-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.77rem;
  line-height: 1;
}

.game-chat__message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-chat__message-avatar .avatar-icon,
.game-chat__message-avatar .avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-chat__message-avatar .avatar-icon {
  font-size: 1.1rem;
}

.game-chat__message-avatar .avatar-initials {
  font-size: 0.77rem;
  font-weight: 700;
}

.game-chat__message-body {
  flex: 1;
  min-width: 0;
}

.game-chat__message-time {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-right: 6px;
}

.game-chat__message-name {
  font-weight: 600;
  opacity: 0.95;
}

/* Session journal sheet (below card popup z-index 1300) */
.sheet.sheet--journal {
  z-index: 1200;
}

.game-journal-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.game-journal__hint {
  font-size: 0.8rem;
  opacity: 0.82;
  margin: 0 0 10px;
  line-height: 1.4;
}

.game-journal__entries {
  max-height: min(68vh, 520px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  border: 1px solid rgba(246, 206, 100, 0.28);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.game-journal__entries::-webkit-scrollbar {
  width: 8px;
}

.game-journal__entries::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.28);
  border-radius: 4px;
}

.game-journal__empty {
  margin: 0;
  opacity: 0.85;
  font-size: 0.9rem;
}

.game-journal__entry {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.game-journal__entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.game-journal__entry-type {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  margin-bottom: 4px;
}

.game-journal__entry-body {
  word-break: break-word;
}

.game-journal__muted {
  opacity: 0.7;
  font-style: italic;
}

.game-journal__photo-tag {
  opacity: 0.9;
}

.game-journal__photo-thumb {
  display: block;
  max-width: 100%;
  max-height: 220px;
  margin-top: 8px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(246, 206, 100, 0.35);
}

.game-journal__reaction-line {
  display: inline-block;
  margin-right: 8px;
}

/* Game Status Card: compact layout */
.game-status-card {
  padding: 8px 14px;
  font-size: 0.9rem;
}

.game-status-card__heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(246, 206, 100);
  text-align: center;
  margin: 0;
  padding: 0;
}

.game-status-card__details {
  display: block;
}

.game-status-card__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
}

.game-status-card__summary::-webkit-details-marker {
  display: none;
}

.game-status-card__summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-right: 4px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.game-status-card__details[open] .game-status-card__summary::before {
  transform: rotate(180deg);
}

.game-status-card__details[open] .game-status-card__summary {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Standard: 6px gap between card heading and dividing line (matches .game-screen__panel-title padding-bottom) */
.game-status-card__body {
  margin-top: var(--card-heading-to-divider-gap, 6px);
  padding-top: 8px;
  border-top: none;
}

.game-status-card__details[open] .game-status-card__body {
  border-top: 1px solid rgba(246, 206, 100, 0.35);
}

.game-status-card__body .game-status-card__title {
  margin-top: 0;
}

.game-status-card__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
  text-align: center;
  font-size: 1.08em;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.game-status-card__title-icon {
  line-height: 1;
  vertical-align: middle;
}

.game-status-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: inherit;
  opacity: 0.9;
}

.game-status-card__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.game-status-card__meta-item > span:last-child {
  text-transform: uppercase;
  font-size: 1.08em;
  letter-spacing: 0.04em;
}

.game-status-card__meta--turn {
  flex: 1.4 1 0;
  min-width: 6.5rem;
}

.game-status-card__label {
  font-size: inherit;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(246, 206, 100);
  margin-bottom: 2px;
}

.game-status-card__meta strong {
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.game-status-card .game-status-msg {
  margin: 8px 0 0;
}

/* Action feedback no longer inside card body; see .game-action-feedback */

/* Progress (one row per level, pineapple at end of each row); centered in card and popup */
.game-progress-card .game-progress-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-progress__level-text {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: rgb(246, 206, 100);
  text-transform: uppercase;
}

.game-progress__thermometer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.game-progress__level-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.game-progress__level-label {
  min-width: 4.5em;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(246, 206, 100);
  flex-shrink: 0;
}

.game-progress__step {
  width: 10px;
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.game-progress__step--filled {
  background: rgba(246, 206, 100, 0.6);
  border-color: rgba(246, 206, 100, 0.5);
}

.game-progress__step--flash {
  animation: progress-step-flash 0.4s ease-out 5;
}

@keyframes progress-step-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}

.game-progress__pineapple {
  width: 20px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 2px;
  transform: translateY(-10%);
}

/* Progress popup (after post-turn countdown): no dimming — game stays visible; only the card receives taps */
.progress-popup {
  pointer-events: none;
}

.progress-popup .card-popup__backdrop {
  background: transparent;
  pointer-events: none;
}

/* Progress popup (between turns): center title, level text, and thermometer */
.progress-popup .card-popup__content {
  pointer-events: auto;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.progress-popup .game-progress__level-text {
  margin-bottom: 8px;
}

.progress-popup .game-progress__thermometer {
  margin-top: 0;
}

/* Intensity / Host Settings (host only): harmonised small minimalist panel */
.intensity-card {
  padding: 8px 14px;
  font-size: 0.85rem;
  color: rgba(246, 206, 100, 0.9);
}

.intensity-card .game-screen__panel-title {
  font-size: 0.85rem;
  margin: 0 0 10px;
  padding-bottom: 6px;
}

.intensity-card__details {
  display: block;
}

.intensity-card__details:not([open]) .intensity-card__summary {
  border-bottom: none;
}

.intensity-card__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
}

.intensity-card__summary::-webkit-details-marker {
  display: none;
}

.intensity-card__summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-right: 4px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.intensity-card__details[open] .intensity-card__summary::before {
  transform: rotate(180deg);
}

.intensity-card__body {
  margin-top: var(--card-heading-to-divider-gap, 6px);
  padding-top: 8px;
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.intensity-card__details[open] .intensity-card__body {
  border-top: none; /* single underline lives on the summary only */
}

.intensity-card .intensity-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.intensity-card .intensity-row:last-child {
  margin-bottom: 0;
}

.intensity-card .intensity-row__label,
.intensity-card .intensity-desc {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  opacity: 0.95;
}

.intensity-card .intensity-row__label--override {
  color: inherit;
  opacity: 0.95;
}

.intensity-card .intensity-value {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 2.5ch;
  text-align: center;
  color: inherit;
}

.intensity-card .intensity-btn {
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  padding: 0;
  margin: 0;
}

.intensity-card .checkline {
  margin-top: 0;
  font-size: inherit;
  font-weight: 500;
  opacity: 0.95;
}

.intensity-card .checkline input {
  width: 18px;
  height: 18px;
}

.intensity-card .add-player-select {
  font-size: 0.85rem;
  padding: 6px 10px;
  max-width: 14rem;
}

.intensity-card .intensity-row--reset {
  grid-template-columns: 1fr;
  margin-top: 6px;
}

.intensity-card .intensity-row--reset {
  display: flex;
  justify-content: flex-start;
}

.intensity-card .intensity-row--reset .game-nav__btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  font-size: 0;
  line-height: 0;
}

.intensity-card .intensity-row__controls {
  justify-content: center;
  margin: 0;
}

.progress-settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
}

.progress-settings .intensity-row {
  margin-bottom: 0;
}

.progress-settings .intensity-row:last-child {
  margin-bottom: 0;
}

.progress-settings .intensity-desc {
  margin-bottom: 0;
}

.progress-settings .intensity-controls {
  margin-bottom: 0;
}

.progress-settings .intensity-controls:last-of-type {
  margin-bottom: 0;
}

.intensity-desc {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0 0 10px;
}

.intensity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.intensity-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgb(246, 206, 100);
  background: rgba(255, 255, 255, 0.1);
  color: #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  touch-action: manipulation;
}

.intensity-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
}

.intensity-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.intensity-value {
  font-size: 0.9rem;
  font-weight: 700;
  min-width: 2.5ch;
  text-align: center;
}

/* Action mode selector */
.action-mode-selector {
  margin-top: 12px;
  margin-bottom: 12px;
}

.action-mode-selector__label {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 10px;
  opacity: 0.9;
}

.action-mode-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.action-mode-buttons .btn-mode {
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  width: auto;
}

/* Action mode spinner (wheel) */
.action-mode-spinner {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}

.mode-wheel-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-wheel {
  width: 100%;
  max-width: 322px; /* ~15% larger than 280px for better segment visibility */
  height: auto;
  aspect-ratio: 1;
  display: block;
}

/* Segments are static; arrow rotates and is the spin trigger (Spin2Win-style) */
.mode-wheel #modeWheelArrow,
.mode-wheel #dareWheelArrow {
  transition: transform 3.5s cubic-bezier(0.3, 0, 0.4, 1);
  cursor: pointer;
}
.mode-wheel #modeWheelArrow.mode-wheel-arrow--disabled,
.mode-wheel #dareWheelArrow.mode-wheel-arrow--disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.mode-wheel-arrow-hit {
  cursor: pointer;
}
.mode-wheel #modeWheelArrow:focus,
.mode-wheel #dareWheelArrow:focus {
  outline: none;
}
.mode-wheel #modeWheelArrow:focus-visible .mode-wheel-arrow-hit,
.mode-wheel #dareWheelArrow:focus-visible .mode-wheel-arrow-hit {
  outline: 2px solid rgb(246, 206, 100);
  outline-offset: 2px;
}

/* Game Players List */
.game-players-list {
  margin: 0;
  padding: 0;
}

.game-players-list__title {
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-players-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.game-players-list__couple {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(246, 206, 100, 0.25);
}

.game-players-list__couple-name {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 2px;
}

.game-players-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 2px solid rgb(246, 206, 100);
  transition: all 0.2s ease;
}

.game-players-list__item.is-current-turn {
  background: rgba(0, 255, 140, 0.15);
  border-color: rgba(0, 255, 140, 0.4);
  box-shadow: 0 0 8px rgba(0, 255, 140, 0.2);
}

.game-players-list__item.is-mine {
  border-color: rgba(255, 255, 255, 0.25);
}

.game-players-list__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgb(246, 206, 100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-players-list__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-players-list__avatar .avatar-icon,
.game-players-list__avatar .avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 0.875rem;
}

.game-players-list__avatar .avatar-icon {
  font-size: 0.875rem;
}

.game-players-list__avatar .avatar-initials {
  font-size: 0.7rem;
}

.game-players-list__info {
  flex: 1;
  min-width: 0;
}

.game-players-list__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.game-players-list__name {
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0.9;
}

.game-players-list__item.is-current-turn .game-players-list__name {
  opacity: 1;
  font-weight: 700;
}

.game-players-list__meta {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 2px;
}

.game-players-list__badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(0, 255, 140, 0.25);
  color: rgba(0, 255, 140, 1);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.game-turn-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px; /* consistent section spacing inside Player Turn */
}

/* Mobile: game panel claims ~2% more width; pull avatars closer to card edges */
@media (max-width: 767px) {
  body.player-app #screenGame #gameTurnCard.game-turn-card {
    width: calc(100% + 2vw);
    max-width: none;
    box-sizing: border-box;
    margin-left: -1vw;
    margin-right: -1vw;
    /* Was 18px (--space-card) — tighter to the border around corner/side avatars */
    padding-left: 8px;
    padding-right: 8px;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game__players-card {
    padding: 4px 4px 8px;
  }

  body.player-app #screenGame #gameTurnCard .dare-wheel-game__spin-row {
    column-gap: 6px;
    grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
    row-gap: 8px;
  }

  body.player-app #screenGame #gameTurnCard .dare-panel-header {
    column-gap: 4px;
    grid-template-columns: minmax(56px, 80px) 1fr minmax(56px, 80px);
  }
}

/* Dare Wheel: tighter header → wheel spacing */
.game-turn-card.game-turn-card--dare {
  gap: 8px;
}

/* Title uses its own divider spacing; flex gap handles the rest */
.game-turn-card > .game-screen__panel-title {
  margin-bottom: 0;
}

.game-turn-card.game-turn-card--dare > .dare-panel-header {
  margin: 0;
}

/* Direct children: spacing comes from .game-turn-card gap only */
.game-turn-card > .game-turn-bar,
.game-turn-card > .dare-panel-header,
.game-turn-card > .game-panel-status,
.game-turn-card > .dare-wheel-game,
.game-turn-card > .action-mode-selector,
.game-turn-card > .game-board-section,
.game-turn-card > .turn-countdown,
.game-turn-card > .turn-actions {
  margin-top: 0;
  margin-bottom: 0;
}

/* Status sits tight under the Game Panel title / dare header */
.game-turn-card > .game-panel-status {
  margin-top: -4px;
}

/* Dare Wheel player corners: Bull left, partner right, title center */
.dare-panel-header {
  display: grid;
  grid-template-columns: minmax(64px, 88px) 1fr minmax(64px, 88px);
  align-items: start;
  column-gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.dare-panel-header__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 4px;
}
.dare-panel-header__title {
  margin: 0 !important;
  padding-bottom: 4px;
  width: 100%;
}
.dare-role-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.dare-role-slot--mid {
  margin-top: 0;
}
.dare-role-slot__avatar {
  width: 52px !important;
  height: 52px !important;
  border-width: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.dare-role-slot__avatar .avatar-icon {
  font-size: 26px !important;
}
.dare-role-slot__avatar .avatar-initials {
  font-size: 16px !important;
}
.dare-role-slot__name {
  display: block;
  width: 100%;
  max-width: 88px;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dare-role-slot__name.is-current-turn {
  color: rgba(0, 255, 140, 0.95);
}

/* Game Board section: 3 collapsible sections */
.game-board-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* Collapsible section pattern (matches intensity-card) */
.game-board-section__details {
  display: block;
}

.game-board-section__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  margin: 0;
  border: none;
  font-size: 0.95rem;
}

.game-board-section__summary::-webkit-details-marker {
  display: none;
}

.game-board-section__summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-right: 4px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.game-board-section__details[open] .game-board-section__summary::before {
  transform: rotate(180deg);
}

.game-board-section__body {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(246, 206, 100, 0.35);
  background: rgba(255, 255, 255, 0.04);
}

.game-board-section__details[open] .game-board-section__body {
  border-top: 1px solid rgba(246, 206, 100, 0.25);
}

/* Response body: side-by-side on laptop, stacked on mobile when both text and image */
.game-board-response-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Laptop: side-by-side when both text and image */
@media (min-width: 768px) {
  .game-board-response-body.game-board-response-body--both {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .game-board-response-body.game-board-response-body--both .game-board__image {
    flex: 0 0 auto;
    width: min(220px, 45%);
    min-height: 180px;
  }
  .game-board-response-body.game-board-response-body--both .game-board__text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Image: shadow, photo badge feel */
.game-board__image {
  flex: 0 0 auto;
  width: min(280px, 100%);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 200px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.game-board__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Text: message-bubble style, full text visible */
.game-board__text {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.45;
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(246, 206, 100, 0.25);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.game-board__status {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
  line-height: 1.35;
}

.game-board-reactions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0;
}

.game-board-reactions-list__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.game-board-reactions-list__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.game-board-reactions-list__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-board-reactions-list__avatar .avatar-initials,
.game-board-reactions-list__avatar .avatar-icon {
  font-size: 11px;
  font-weight: 700;
}

.game-board-reactions-list__name {
  opacity: 0.95;
}

.game-board-reactions-list__emoji {
  font-size: 1rem;
}

/* Feedback row inside Reactions section body */
.game-board-section__body .game-board-feedback {
  flex-shrink: 0;
  margin-top: 12px;
  margin-bottom: 0;
}

.game-board-feedback {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 8px 0 10px;
  position: relative;
}

.game-board-feedback__trigger {
  padding: 4px 8px;
  border: 1px solid rgba(246, 206, 100, 0.4);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  line-height: 1.2;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease;
  color: inherit;
}

.game-board-feedback__trigger:hover {
  background: rgba(255, 255, 255, 0.15);
}

.game-board-feedback__trigger:active,
.game-board-feedback__trigger.has-reaction {
  background: rgba(246, 206, 100, 0.25);
  border-color: rgba(246, 206, 100, 0.6);
}

/* Popovers */
.feedback-popover {
  position: fixed;
  z-index: 1000;
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(246, 206, 100, 0.4);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  max-height: min(280px, 50vh);
  overflow-y: auto;
}

.feedback-popover__title {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.9);
}

.feedback-popover--choose-player {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}

.feedback-popover--choose-player .feedback-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 8px 12px;
}

.feedback-popover__choose-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.feedback-popover__choose-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feedback-popover__choose-player-avatar .avatar-initials,
.feedback-popover__choose-player-avatar .avatar-icon {
  font-size: 14px;
  font-weight: 700;
}

.feedback-popover__choose-player-name {
  flex: 1;
  font-size: 0.95rem;
}

.feedback-popover__choose-player-status {
  font-size: 1.1rem;
  opacity: 0.9;
  min-width: 1.2em;
  text-align: right;
}

.feedback-popover--emoji {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.feedback-popover--message {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feedback-popover__item {
  padding: 10px 14px;
  border: 1px solid rgba(246, 206, 100, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease;
  color: inherit;
  text-align: center;
}

.feedback-popover--emoji .feedback-popover__item {
  font-size: 1.4rem;
  padding: 8px;
}

.feedback-popover__item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.feedback-popover__item:active {
  background: rgba(246, 206, 100, 0.25);
}

.card-popup__feedback.game-board-feedback {
  margin-top: 12px;
  margin-bottom: 4px;
}

/* Card popup is only shown to the current player; hide feedback (for non–current players) */
.card-popup .card-popup__feedback {
  display: none;
}

/* Compact who's-turn bar: label + avatar (centered) + name */
.game-turn-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  padding: 0;
}

.game-turn-bar__left {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.game-turn-bar__right {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
}

.game-turn-bar__label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.game-turn-bar .current-turn-avatar-wrap {
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-turn-bar .current-turn-avatar {
  width: 72px;
  height: 72px;
  border-width: 2px;
}

.game-turn-bar .current-turn-avatar .avatar-icon {
  font-size: 36px;
}

.game-turn-bar .current-turn-avatar .avatar-initials {
  font-size: 22px;
}

.game-turn-bar__name {
  font-size: 0.95rem;
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Player name matches label color when it's your turn */
.game-turn-bar.is-your-turn .game-turn-bar__name {
  color: rgba(0, 255, 140, 0.95);
}

.turn-countdown {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(246, 206, 100);
}

.turn-countdown--below-board {
  margin: 12px 0 8px;
  padding: 0;
  text-align: center;
}

.turn-bar__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
  color: rgb(246, 206, 100);
}

.turn-bar__typing .typing-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.game-turn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 0 6px;
  text-align: left;
}

.game-turn-row .current-action-label {
  flex: 1;
  margin: 0;
  text-align: right;
  font-size: 1.35rem;
  font-weight: 800;
  color: inherit;
}

.game-turn-row .current-turn-avatar-wrap {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 14px;
}

.game-turn-row .game-turn-name {
  flex: 1;
  margin: 0;
  text-align: left;
}

.game-turn-name {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 6px 0 4px;
}

.current-action-label {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
  margin: 0 0 8px;
}

.current-action-label.is-your-turn {
  color: rgba(0, 255, 140, 0.95);
}

.game-turn-row .current-action-label.is-your-turn {
  color: inherit;
}

.current-action-label.is-waiting {
  color: rgba(255, 200, 0, 0.9);
}

.game-turn-row .current-action-label.is-waiting {
  color: inherit;
}

.game-info-text {
  opacity: 0.85;
  font-size: 0.95rem;
  margin: 0 0 12px;
}

.turn-waiting {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.08);
  border: 1px solid rgba(255, 200, 0, 0.25);
  margin-bottom: 12px;
}

.turn-waiting__title {
  font-weight: 700;
}

.turn-waiting__subtitle {
  font-size: 0.95rem;
  opacity: 0.9;
}

.turn-actions {
  margin-top: 8px;
}

.turn-actions.is-waiting .turn-actions-buttons,
.turn-actions.is-waiting .card-history {
  display: none;
}

.game-card-display {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(246, 206, 100, 0.35);
  border-radius: 14px;
  padding: 18px 16px;
  margin: 12px 0 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card action text only in popup; hide main-screen duplicate */
#gameCardDisplay {
  display: none;
}

.game-card-text {
  font-size: 1.2rem;
  line-height: 1.45;
  margin: 0;
  text-align: center;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.game-card-text.card-highlight {
  animation: cardHighlight 0.9s ease;
}

.game-card-repeat-msg {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 8px 0 0;
  font-style: italic;
  text-align: center;
}

@keyframes cardHighlight {
  0%, 100% { background: transparent; box-shadow: none; }
  30% { background: rgba(246, 206, 100, 0.12); box-shadow: 0 0 0 2px rgba(246, 206, 100, 0.3); border-radius: 8px; }
}

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

.btn-draw {
  font-size: 1.15rem;
  padding: 16px;
}

.turn-actions-done {
  display: flex;
  gap: 10px;
}

.turn-actions-done button {
  flex: 1;
}

.card-history {
  margin-top: 14px;
}

/* Recent turns card (own card below nav, expandable, default collapsed) */
.card-history-card {
  margin-top: 16px;
  padding: 8px 14px;
  font-size: 0.85rem;
}

.card-history-card__details {
  display: block;
}

/* Recent turns heading: match ROOM INFORMATION / HOST SETTINGS (section titles, not body labels) */
.card-history-card .card-history-card__summary.game-screen__panel-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(246, 206, 100);
  text-align: center;
}

.card-history-card__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: none;
}

.card-history-card__summary::-webkit-details-marker {
  display: none;
}

.card-history-card__summary::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  margin-right: 4px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.card-history-card__details[open] .card-history-card__summary::before {
  transform: rotate(180deg);
}

.card-history-card__body {
  margin-top: var(--card-heading-to-divider-gap, 6px);
  padding-top: 8px;
  border-top: none;
}

.card-history-card__details[open] .card-history-card__body {
  border-top: 1px solid rgba(246, 206, 100, 0.35);
}

.card-history-card .card-history__list {
  margin-top: 0;
  font-size: 0.85rem;
  color: #fff;
  text-align: left;
}

.card-history__list {
  margin-top: 8px;
  font-size: 0.95rem;
  opacity: 0.9;
  text-align: left;
}

.card-history__item {
  text-align: left;
}

/* Per-turn “heading” (player name): same styling as host settings labels */
.card-history-card .card-history__player {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.95;
  color: gold;
}

.game-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
  padding-top: 0;
  justify-content: center;
}

.game-nav button,
.game-nav .game-nav__btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 14px;
  font-size: 0;
  line-height: 0;
}

.game-nav__icon {
  width: 22px;
  height: 22px;
  display: block;
}

.game-nav__btn--chat {
  position: relative;
}

.game-nav__badge {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c94c4c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

/* ----- Avatar editor overlay (lobby or mid-game) ----- */
.avatar-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1450; /* Above profile card; below take-photo (1500) */
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.avatar-editor-inner {
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 20px 16px 16px;
  width: min(360px, 100%);
  position: relative;
  box-sizing: border-box;
}

.avatar-editor-inner h2 {
  margin: 0 28px 12px 0;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
}

.avatar-editor-preview {
  width: 80px;
  height: 80px;
  margin: 4px auto 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-editor-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-editor-preview .avatar-icon {
  font-size: 22px;
  line-height: 1;
}

.avatar-editor-preview .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 14px;
}

.avatar-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.avatar-editor-actions .btn-avatar-opt {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

.avatar-editor-icon-grid {
  margin: 0 auto 14px;
}

.avatar-editor-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.avatar-editor-buttons button {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

.avatar-editor-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: 1px solid rgb(246, 206, 100);
  box-shadow: none;
  transform: none;
  cursor: pointer;
}

.avatar-editor-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Webcam capture modal (must sit above card popup when opened from game action) */
.webcam-modal {
  position: fixed;
  inset: 0;
  z-index: 1500; /* Top: take-photo UI */
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.webcam-modal-inner {
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 20px 16px 16px;
  width: min(360px, 100%);
  box-sizing: border-box;
}

.webcam-modal-title {
  margin: 0 0 14px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

.webcam-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 280px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(246, 206, 100, 0.35);
  margin-bottom: 14px;
  box-sizing: border-box;
}

.webcam-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.webcam-video--mirror {
  transform: scaleX(-1);
}

.webcam-flip-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.webcam-flip-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.webcam-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.webcam-modal-actions button {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

/* Photo preview modal (Share / Retake after capture) */
.photo-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.photo-preview-modal-inner {
  background: #1b1b1b;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 20px 16px 16px;
  width: min(360px, 100%);
  box-sizing: border-box;
}

.photo-preview-modal__title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(246, 206, 100);
  text-align: center;
  line-height: 1.3;
}

.photo-preview-modal__hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  opacity: 0.8;
  text-align: center;
}

.photo-preview-modal__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(70vw, 320px);
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(246, 206, 100, 0.35);
  margin-bottom: 12px;
  touch-action: none;
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
}

.photo-preview-modal__zoom {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.photo-preview-modal__zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgb(246, 206, 100);
  background: transparent;
  color: rgb(246, 206, 100);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.photo-preview-modal__zoom-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

.photo-preview-modal__zoom-btn:active {
  background: rgb(246, 206, 100);
  color: #111;
}

.photo-preview-modal__zoom-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.photo-preview-modal__image-wrap.is-dragging {
  cursor: grabbing;
}

.photo-preview-modal__image-wrap--static {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview-modal__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.photo-preview-modal__img--pan {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: unset;
  will-change: transform;
}

.photo-preview-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.photo-preview-modal__actions button {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

/* Avatar lightbox → Player profile card (enlarged avatar + name in a card) */
.avatar-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400; /* Middle: player card popup (below take-photo, above card popup) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.avatar-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.avatar-lightbox__content.profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: min(calc(100vw - 32px), 420px);
  padding: 20px 16px 20px;
  border-radius: 16px;
  border: 1px solid rgb(246, 206, 100);
  background: #1b1b1b;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.profile-card__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.profile-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  /* Keep name / fields clear of the absolute close control */
  padding-top: 28px;
  padding-right: 28px;
}

.profile-card__name {
  margin: 0;
  padding: 0;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  font-weight: 800;
  color: #fff;
  text-align: left;
  line-height: 1.3;
}

.profile-card__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.profile-card__role {
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #d4949a;
  text-align: left;
}

.profile-card__role[hidden] {
  display: none !important;
}

.profile-card__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.profile-card__field-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgb(246, 206, 100);
  line-height: 1.2;
}

.profile-card__field-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.profile-card__edit-avatar {
  align-self: flex-start;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 4px 0 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 8px;
}

.profile-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  padding: 0;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 8px;
  border: 1px solid rgb(246, 206, 100);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.profile-card__close:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(246, 206, 100, 0.85);
}

.profile-card__avatar-wrap {
  width: min(200px, 42vw);
  height: min(200px, 42vw);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 3px solid rgb(246, 206, 100);
  flex-shrink: 0;
}

.profile-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-card__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 70px;
  line-height: 1;
}

.profile-card__avatar .avatar-icon {
  font-size: 70px;
  line-height: 1;
}

.profile-card__avatar .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 45px;
}

.avatar-enlargeable,
[data-avatar-for],
[data-player-id].profile-avatar-clickable {
  cursor: pointer;
}

/* Card popup (game card + Done/Skip when current player has drawn) */
.card-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  inset: 0;
  z-index: 1300; /* Bottom of overlay stack: current turn action (below player card & take-photo) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: default;
}

.card-popup__content {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 16px 24px 24px;
  border-radius: 16px;
  border: 1px solid rgb(246, 206, 100);
  /* Default popup background (JS may set --popup-bg-image). */
  background-color: #1b1b1b;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6)),
    var(--popup-bg-image, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Action type: H1, top of card, centered */
.card-popup__action-type {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: rgb(246, 206, 100);
}

.card-popup__player {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

.card-popup__player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.card-popup__player-name,
.card-popup .card-popup__intensity {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  opacity: 0.95;
}

.card-popup .card-popup__intensity {
  font-weight: 600;
}

/* 20% larger than game screen current turn avatar (84px → 101px) */
.card-popup__avatar {
  width: 101px;
  height: 101px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.card-popup__avatar.is-current {
  border-color: rgba(255, 200, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

.card-popup__avatar.is-mine {
  border-color: rgba(0, 255, 140, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 255, 140, 0.12);
}

.card-popup__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Larger emoji in popup avatar so it fills the circle */
.card-popup__avatar .avatar-icon {
  font-size: 58px;
  line-height: 1;
}

/* Larger initials in popup avatar so they fill the circle */
.card-popup__avatar .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 34px;
}

.card-popup__player-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

/* Action text: ~15% larger than base game-card-text (1.2rem → 1.38rem) */
.card-popup__text {
  margin: 0;
  padding: 10px 0;
  min-height: 2.5em;
  font-size: 1.38rem;
  line-height: 1.45;
  color: rgb(246, 206, 100);
}

/* Dev override: prefix when host forced action type */
.card-override-prefix {
  color: #f44;
}

.card-popup__response {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(246, 206, 100, 0.25);
}

/* Current player: after text is sent, match viewer layout — message left, photo buttons right */
.card-popup__response--actor-split {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.card-popup__actor-sent-panel {
  flex: 1;
  min-width: min(100%, 10rem);
}

.card-popup__response-photo-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.card-popup__response:not(.card-popup__response--actor-split) .card-popup__response-photo-column {
  width: 100%;
  align-items: flex-start;
}

.card-popup__response--actor-split .card-popup__response-photo-column {
  align-items: flex-end;
}

.card-popup__response--actor-split .card-popup__response-photo-column__status {
  text-align: right;
  max-width: 12rem;
}

.card-popup__actor-photo-status {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 520px) {
  .card-popup__response--actor-split {
    flex-direction: column;
  }

  .card-popup__response--actor-split .card-popup__response-photo-column {
    align-self: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }
}

.card-popup__response-label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.85);
}

.card-popup__response-input-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: flex-end;
  min-width: 0;
}

.card-popup__response-input-wrap .card-popup__response-text {
  margin-bottom: 0;
  min-width: 0;
}

.card-popup__response-text {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(246, 206, 100, 0.4);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: #eee;
  font: inherit;
  resize: vertical;
  min-height: 56px;
}

.card-popup__response-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 44px;
  height: 44px;
  margin: 0 0 10px 0;
  padding: 0 12px;
  font-weight: 600;
  border-radius: 8px;
  flex-shrink: 0;
}

.card-popup__response-send-icon {
  width: 20px;
  height: 20px;
  opacity: 0.95;
}

.card-popup__response-send-label {
  font-size: 0.95rem;
  font-weight: 600;
}

.card-popup__response-charcount {
  font-size: 0.8rem;
  opacity: 0.8;
  margin: 4px 0 10px;
  color: rgba(255, 255, 255, 0.7);
}

.card-popup__response-photo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card-popup__phase-1,
.card-popup__phase-2 {
  margin-top: 12px;
}

.card-popup__phase-2 .card-popup__response {
  margin-top: 0;
}

.card-popup__response-status {
  margin: 6px 0 0;
  font-size: 0.85rem;
  opacity: 0.9;
  text-align: center;
}

.card-popup__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 206, 100, 0.35);
}

.card-popup__actions button {
  flex: 1;
  margin-top: 0;
  touch-action: manipulation;
}

.card-popup__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 206, 100, 0.35);
}

.card-popup__option-btn {
  width: 100%;
  margin: 0;
  touch-action: manipulation;
  white-space: normal;
  text-align: center;
  min-height: 2.5em;
}

.card-popup__actions--skip {
  margin-top: 10px;
  padding-top: 0;
  border-top: none;
}

/* Viewer mode: hide current-player controls (Accept, Skip, response inputs, Finish) */
.card-popup[data-viewer-mode="1"] .card-popup__actor-only {
  display: none !important;
}

.card-popup[data-viewer-mode="1"] .card-popup__backdrop {
  cursor: pointer;
}

.card-popup__viewer-observe {
  margin-top: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(246, 206, 100, 0.25);
}

.card-popup__viewer-wait-msg {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.card-popup__viewer-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 206, 100, 0.3);
}

.card-popup__viewer-readonly {
  margin-top: 8px;
}

.card-popup__viewer-readonly-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.card-popup__viewer-readonly-text {
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.4;
  word-break: break-word;
}

.card-popup__viewer-readonly-img-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(246, 206, 100, 0.3);
  max-height: 220px;
}

.card-popup__viewer-readonly-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hide duplicate card block in the main column when the popup is the primary surface */
.game-card-display.game-card-display--suppressed {
  display: none !important;
}

/* Game complete popup: large message + OK */
.game-complete-popup .card-popup__content {
  text-align: center;
}

.game-complete-popup__title {
  margin: 0 0 24px;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgb(246, 206, 100);
  text-align: center;
  line-height: 1.2;
}

.game-complete-popup__actions {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.game-complete-popup__actions .btn-primary {
  min-width: 120px;
  touch-action: manipulation;
}

/* Game menu drawer (Option B: panel info – Room info, Recent turns, Host settings) */
.game-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.game-menu-drawer.game-menu-drawer--open {
  pointer-events: auto;
  visibility: visible;
}

.game-menu-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.game-menu-drawer.game-menu-drawer--open .game-menu-drawer__backdrop {
  opacity: 1;
}

.game-menu-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: #1b1b1b;
  border-right: 1px solid rgb(246, 206, 100);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.game-menu-drawer.game-menu-drawer--open .game-menu-drawer__panel {
  transform: translateX(0);
}

.game-menu-drawer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid rgb(246, 206, 100);
  background: rgba(0, 0, 0, 0.5);
  color: #eee;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.game-menu-drawer__close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.game-menu-drawer__title {
  margin: 0;
  padding: 16px 56px 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgb(246, 206, 100);
  border-bottom: 1px solid rgba(246, 206, 100, 0.25);
  flex-shrink: 0;
}

.game-menu-drawer__content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-menu-drawer__content .card {
  margin: 0;
}

/* Host side menu: one heading style for ROOM INFORMATION, RECENT TURNS, HOST SETTINGS */
body.player-app .game-menu-drawer__content .intensity-card .game-screen__panel-title {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Bottom sheets (undo: remove this block) */
.sheet {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sheet.sheet--open {
  pointer-events: auto;
  visibility: visible;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sheet.sheet--open .sheet__backdrop {
  opacity: 1;
}

.sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  background: #1b1b1b;
  border: 1px solid rgb(246, 206, 100);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
  transition: transform 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* When closed: fully hidden on Chrome (opacity + visibility + off-screen) */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.sheet.sheet--open .sheet__panel {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  -webkit-transition: -webkit-transform 0.3s ease, opacity 0.25s ease;
  transition: transform 0.3s ease, opacity 0.25s ease;
}

.sheet__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid rgb(246, 206, 100);
  background: rgba(0, 0, 0, 0.5);
  color: #eee;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sheet__close:hover {
  background: rgba(0, 0, 0, 0.75);
}

.sheet .card {
  margin: 16px;
  margin-top: 48px;
}

/* Game actions sheet: action buttons list */
.game-actions-sheet__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.game-actions-sheet__btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid rgb(246, 206, 100);
  background: rgba(246, 206, 100, 0.1);
  color: rgb(246, 206, 100);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.game-actions-sheet__icon {
  display: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.game-actions-sheet__label {
  display: inline;
}

.game-actions-sheet__btn:hover {
  background: rgba(246, 206, 100, 0.2);
}

/* Mobile tweaks */
@media (max-width: 420px) {
  .wrap {
    padding: 18px;
  }

  h1 {
    font-size: 1.9rem;
  }

  #roomCode,
  #lobbyRoomCode,
  .lobby-room-code-row strong {
    font-size: 1.5rem;
  }

  .player-actions {
    flex-direction: column;
  }

  .add-player-row {
    flex-direction: column;
    align-items: center;
  }

  .avatar-icon-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
  }
}


/* =========================
   Avatars (shared sizing)
   ========================= */
.avatar-circle,
.current-turn-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgb(246, 206, 100);
  box-sizing: border-box;
}

.avatar-circle img,
.current-turn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-circle .avatar-icon {
  font-size: 22px;
  line-height: 1;
}

/* Larger emoji in 84px current-turn avatar so it fills the circle */
.current-turn-avatar .avatar-icon {
  font-size: 48px;
  line-height: 1;
}

.avatar-circle .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 14px;
}

/* Larger initials in 84px current-turn avatar so they fill the circle */
.current-turn-avatar .avatar-initials {
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 28px;
}

/* Current turn avatar (bigger + in row) */
.current-turn-avatar-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}

.current-turn-avatar {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.20);
  background: rgba(255,255,255,0.06);
}

.current-turn-avatar.is-current {
  border-color: rgba(255, 200, 0, 0.55);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

.current-turn-avatar.is-mine {
  border-color: rgba(0, 255, 140, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 255, 140, 0.12);
}

/* -------------------- Dare Wheel -------------------- */
.dare-wheel-set-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.dare-wheel-set-card {
  border-radius: 14px;
  border: 1px solid rgba(212, 148, 154, 0.22);
  padding: 12px 14px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dare-wheel-set-card--rose {
  background: linear-gradient(160deg, rgba(212, 148, 154, 0.18), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card--plum {
  background: linear-gradient(160deg, rgba(156, 128, 168, 0.2), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card--teal {
  background: linear-gradient(160deg, rgba(90, 154, 150, 0.2), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card--amber {
  background: linear-gradient(160deg, rgba(196, 154, 110, 0.2), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card--mauve {
  background: linear-gradient(160deg, rgba(176, 132, 158, 0.2), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card--sage {
  background: linear-gradient(160deg, rgba(122, 148, 128, 0.2), rgba(46, 40, 54, 0.72));
}
.dare-wheel-set-card.is-selected {
  border-color: rgba(226, 168, 173, 0.55);
  box-shadow: inset 0 0 0 1px rgba(226, 168, 173, 0.22);
}
.dare-wheel-set-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
}
.dare-wheel-set-card__heading {
  min-width: 0;
  flex: 1 1 8rem;
  text-align: center;
}
.dare-wheel-set-card__title {
  margin: 0;
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text, #f3ebe6);
  text-align: center;
}
.dare-wheel-set-card__meta {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted, rgba(243, 235, 230, 0.72));
  text-align: center;
}
.dare-wheel-set-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dare-wheel-set-card__btn,
body.player-app .dare-wheel-set-card__btn.btn-ghost {
  box-sizing: border-box;
  min-height: 36px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 148, 154, 0.35);
  background: rgba(22, 19, 28, 0.35);
  color: var(--color-text, #f3ebe6);
  font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  width: auto;
  min-width: 6.75rem;
  justify-content: center;
}
body.player-app .dare-wheel-set-card__btn.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent, #d4949a);
  color: var(--color-text, #f3ebe6);
}
body.player-app .dare-wheel-set-card__btn.btn-ghost:active:not(:disabled) {
  background: rgba(212, 148, 154, 0.28);
  border-color: var(--color-accent-strong, #e2a8ad);
  color: var(--color-text, #f3ebe6);
}
.dare-wheel-set-card__btn.is-selected,
body.player-app .dare-wheel-set-card__btn.btn-ghost.is-selected {
  background: rgba(212, 148, 154, 0.28);
  border-color: var(--color-accent-strong, #e2a8ad);
  color: var(--color-accent-strong, #e2a8ad);
}
.dare-wheel-set-card__btn:disabled,
body.player-app .dare-wheel-set-card__btn.btn-ghost:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dare-wheel-set-card__tasks {
  list-style: none;
  margin: 12px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(243, 235, 230, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dare-wheel-set-card__task {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(22, 19, 28, 0.35);
  border: 1px solid rgba(243, 235, 230, 0.06);
  text-align: center;
}
.dare-wheel-set-card__task strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-accent-strong, #e2a8ad);
  text-align: center;
}
.dare-wheel-set-card__task span {
  font-size: 0.78rem;
  color: var(--color-text-muted, rgba(243, 235, 230, 0.72));
  line-height: 1.35;
  text-align: center;
}
.dare-wheel-set-card__task--empty,
.dare-wheel-set-card__tasks-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(243, 235, 230, 0.1);
  font-size: 0.88rem;
  color: var(--color-text-muted, rgba(243, 235, 230, 0.72));
  text-align: center;
}
.dare-wheel-editor__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dare-wheel-editor__preset {
  margin-bottom: 12px;
}
.dare-wheel-editor__agree {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}
.dare-wheel-editor__agree-status {
  margin: 0;
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-text-muted, rgba(243, 235, 230, 0.72));
}
body.player-app .dare-wheel-editor__agree-status {
  color: var(--color-text-muted);
}
.dare-wheel-editor__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  text-align: center;
}
.dare-wheel-editor__item-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  width: 100%;
  text-align: center;
}
.dare-wheel-editor__item-main strong {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent-strong, #e2a8ad);
  text-align: center;
}
.dare-wheel-editor__item-main span,
.dare-wheel-editor__item-main .muted {
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
}
.dare-wheel-editor__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.dare-wheel-editor__desc {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  font: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25);
  color: inherit;
}
.dare-wheel-editor__count {
  margin: 0 0 8px;
  font-weight: 600;
}
.dare-wheel-editor__hint {
  margin: 10px 0 0;
  font-size: 0.9em;
}
.dare-wheel-ingame-editor {
  margin: 0; /* parent .dare-wheel-game gap handles spacing */
}

/* Mid-game edit: only the editor card — hide spin/players/chat/media wall */
.dare-wheel-game.dare-wheel-game--editing > :not(.dare-wheel-ingame-editor) {
  display: none !important;
}
.dare-wheel-game.dare-wheel-game--editing > .dare-wheel-ingame-editor {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.dare-wheel-ingame-editor__done {
  margin-top: 16px;
  width: 100%;
}

/* Compact delete on wheel item rows (avoid full-width default button) */
body.player-app .dare-wheel-editor__item button.dare-wheel-editor__delete.btn-ghost,
body.player-app .dare-wheel-editor__item button.dare-wheel-editor__delete.btn-ghost:hover:not(:disabled),
body.player-app .dare-wheel-editor__item button.dare-wheel-editor__delete.btn-ghost:active:not(:disabled) {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 6px 12px;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid rgba(212, 148, 154, 0.35);
  background: rgba(22, 19, 28, 0.35);
  color: var(--color-text);
  transform: none;
}

body.player-app .dare-wheel-editor__item button.dare-wheel-editor__delete.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.player-pill--role {
  background: rgba(249, 121, 3, 0.25);
  border-color: rgba(249, 121, 3, 0.45);
}
.dare-wheel-game {
  display: flex;
  flex-direction: column;
  gap: 12px; /* tighter than IceBreaker turn card — wheel sits closer under roster */
  margin: 0;
  min-width: 0;
}
.dare-wheel-game > * {
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
}
.dare-wheel-game > .dare-wheel-game__spin-row,
.dare-wheel-game > .card,
.dare-wheel-game > .dare-wheel-game__task,
.dare-wheel-game > .dare-wheel-game__actions,
.dare-wheel-game > .dare-wheel-game__chat {
  margin: 0; /* spacing via parent gap only */
}
.dare-wheel-game > .dare-wheel-game__chat:empty {
  display: none; /* no empty gap before chat mounts */
}
/* Left Players card + spinner */
.dare-wheel-game__spin-row {
  display: grid;
  grid-template-columns: minmax(88px, 110px) minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.dare-wheel-game__players-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 6px 8px 10px;
  box-sizing: border-box;
  align-self: center;
}
.dare-wheel-game__players-card > .game-screen__panel-title {
  margin: 0 0 4px;
  font-size: 0.675rem; /* ~10% under 0.75rem */
  padding-bottom: 6px;
}
.dare-wheel-game__side-roster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.dare-side-roster__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.dare-side-roster__role {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: rgb(246, 206, 100);
}
/* Side roster shares dare-role-slot__avatar + current-turn-avatar; dual-class
   beats the 52px role-slot size. Laptop bump is scoped under players-card. */
.dare-side-roster__avatar.dare-role-slot__avatar {
  width: 48px !important;
  height: 48px !important;
}
.dare-side-roster__avatar.dare-role-slot__avatar .avatar-icon {
  font-size: 26px !important;
}
.dare-side-roster__avatar.dare-role-slot__avatar .avatar-initials {
  font-size: 16px !important;
}

/* Laptop: Players-card avatars ~50% larger (ID selector beats competing !important sizes) */
@media (min-width: 768px) {
  #dareWheelSideRoster .dare-side-roster__avatar {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
  }

  #dareWheelSideRoster .dare-side-roster__avatar .avatar-icon {
    font-size: 36px !important;
  }

  #dareWheelSideRoster .dare-side-roster__avatar .avatar-initials {
    font-size: 22px !important;
  }

  body.player-app .dare-wheel-game__players-card {
    max-width: 180px;
  }

  body.player-app .dare-side-roster__name {
    max-width: 100px;
    font-size: 0.8rem;
  }
}
.dare-side-roster__name {
  display: block;
  width: 100%;
  max-width: 88px;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dare-side-roster__name.is-current-turn {
  color: rgba(0, 255, 140, 0.95);
}
.dare-wheel-game__spin-row .dare-wheel-game__spinner {
  margin: 0;
  min-width: 0;
  justify-content: center;
}
.dare-wheel-game__spin-row .mode-wheel {
  max-width: min(322px, 100%);
}

/* Glowing spin-status pills (labels, not buttons) — right of wheel / under on mobile */
.dare-wheel-game__spin-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 11.5rem;
  pointer-events: none;
  user-select: none;
}
.dare-wheel-game__spin-cue[hidden] {
  display: none !important;
}
.dare-spin-cue__arrow {
  display: none;
  flex: 0 0 auto;
  color: var(--color-accent-strong, #e2a8ad);
  animation: dareSpinCueArrowGlowLeft 1.15s ease-in-out infinite;
}
.dare-spin-cue__arrow svg {
  display: block;
}
.dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
  display: block;
}
.dare-spin-cue__pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(226, 168, 173, 0.55);
  background:
    linear-gradient(165deg, rgba(226, 168, 173, 0.28), rgba(46, 40, 54, 0.82));
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.12),
    0 0 14px rgba(212, 148, 154, 0.35);
  color: var(--color-text, #f3ebe6);
  font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
  animation: dareSpinCuePillGlow 1.15s ease-in-out infinite;
}
@keyframes dareSpinCuePillGlow {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.12),
      0 0 10px rgba(212, 148, 154, 0.28);
  }
  50% {
    filter: brightness(1.12);
    box-shadow:
      0 0 0 1px rgba(226, 168, 173, 0.28),
      0 0 18px rgba(226, 168, 173, 0.55);
  }
}
@keyframes dareSpinCueArrowGlowLeft {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(226, 168, 173, 0.45));
    opacity: 0.85;
    transform: translateX(0);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(226, 168, 173, 0.85));
    opacity: 1;
    transform: translateX(-3px);
  }
}
@keyframes dareSpinCueArrowGlowUp {
  0%,
  100% {
    filter: drop-shadow(0 0 4px rgba(226, 168, 173, 0.45));
    opacity: 0.85;
    /* ← rotated +90° CW → ↑ */
    transform: rotate(90deg) translateX(0);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(226, 168, 173, 0.85));
    opacity: 1;
    /* translate then rotate: nudge toward the wheel above */
    transform: rotate(90deg) translateX(-3px);
  }
}
/* Mobile + tablet portrait: cue under the wheel column (not full card width) */
@media (max-width: 1023px) {
  .dare-wheel-game__spin-cue {
    /* Same column as the spinner so it sits at the bottom-center of the wheel */
    grid-column: 2;
    justify-self: center;
    justify-content: center;
    width: auto;
    max-width: min(18rem, 100%);
    margin-top: 2px;
  }
  /* Hit-spin: stack arrow above pill; point up at the hub */
  .dare-wheel-game__spin-cue.dare-spin-cue--hit {
    flex-direction: column;
    gap: 4px;
  }
  .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
    animation: dareSpinCueArrowGlowUp 1.15s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dare-spin-cue__pill,
  .dare-spin-cue__arrow {
    animation: none;
    transform: none;
  }
  .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
    transform: rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .dare-wheel-game__spin-cue.dare-spin-cue--hit .dare-spin-cue__arrow {
    transform: none;
  }
}
.dare-wheel-game__spinner .mode-wheel-container,
.action-mode-spinner .mode-wheel-container {
  border-radius: 50%;
}
.dare-wheel-game__spinner .mode-wheel-container::after,
.action-mode-spinner .mode-wheel-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(246, 206, 100, 0.65);
  box-shadow:
    0 0 0 1px rgba(246, 206, 100, 0.2),
    0 0 14px rgba(246, 206, 100, 0.22),
    0 0 24px rgba(249, 121, 3, 0.12),
    inset 0 0 16px rgba(246, 206, 100, 0.05);
}
.dare-wheel-game__spinner--ready .mode-wheel-container::after,
.action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-container::after {
  border-width: 3px;
  animation: dareWheelReadyGlow 1.05s ease-in-out infinite;
}

/* Hub spin-button glow ring (synced with outer ready glow) */
.mode-wheel-hub-glow__ring {
  stroke: transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dare-wheel-game__spinner--ready .mode-wheel-hub-glow__ring,
.action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-hub-glow__ring {
  opacity: 1;
  animation: dareHubReadyGlow 1.05s ease-in-out infinite;
}
@keyframes dareHubReadyGlow {
  0%, 100% {
    stroke: rgba(0, 255, 140, 0.45);
    filter: drop-shadow(0 0 2px rgba(0, 255, 140, 0.35));
  }
  50% {
    stroke: rgba(0, 255, 140, 0.95);
    filter: drop-shadow(0 0 4px rgba(0, 255, 140, 0.55));
  }
}
@keyframes dareWheelReadyGlow {
  0%, 100% {
    border-color: rgba(0, 255, 140, 0.45);
    box-shadow:
      0 0 0 1px rgba(0, 255, 140, 0.2),
      0 0 12px rgba(0, 255, 140, 0.28),
      0 0 22px rgba(0, 180, 100, 0.18),
      inset 0 0 18px rgba(0, 255, 140, 0.08);
  }
  50% {
    border-color: rgba(0, 255, 140, 0.95);
    box-shadow:
      0 0 0 2px rgba(0, 255, 140, 0.45),
      0 0 28px rgba(0, 255, 140, 0.65),
      0 0 48px rgba(0, 180, 100, 0.4),
      inset 0 0 28px rgba(0, 255, 140, 0.2);
  }
}
.dare-wheel-game__task {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(246, 206, 100, 0.55);
  background:
    linear-gradient(135deg, rgba(0, 255, 140, 0.22), rgba(0, 180, 100, 0.14) 55%, rgba(0, 255, 140, 0.1));
  box-shadow:
    0 0 0 1px rgba(246, 206, 100, 0.2),
    0 0 18px rgba(246, 206, 100, 0.28),
    inset 0 0 24px rgba(246, 206, 100, 0.06);
  animation: dareTaskGlow 2.8s ease-in-out infinite;
}
.dare-wheel-game__task-label {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  animation: dareTaskLabelPulse 2.8s ease-in-out infinite;
}
.dare-wheel-game__task-desc {
  margin: 0;
  opacity: 0.95;
  white-space: pre-wrap;
  color: rgba(255, 245, 220, 0.92);
}
@keyframes dareTaskGlow {
  0%, 100% {
    border-color: rgba(246, 206, 100, 0.5);
    box-shadow:
      0 0 0 1px rgba(246, 206, 100, 0.18),
      0 0 14px rgba(246, 206, 100, 0.22),
      inset 0 0 20px rgba(246, 206, 100, 0.04);
  }
  50% {
    border-color: rgba(249, 121, 3, 0.7);
    box-shadow:
      0 0 0 1px rgba(249, 121, 3, 0.28),
      0 0 26px rgba(246, 206, 100, 0.45),
      0 0 40px rgba(249, 121, 3, 0.18),
      inset 0 0 28px rgba(246, 206, 100, 0.1);
  }
}
@keyframes dareTaskLabelPulse {
  0%, 100% { color: #f6ce64; }
  50% { color: #ffb347; }
}
.dare-wheel-game__feed {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Extra bottom padding: scrollbar + role labels under thumbs */
  padding: 8px 2px 4px;
  max-width: 100%;
}
.dare-wheel-game__media-wall {
  margin: 0;
  padding: 8px 14px 12px;
  text-align: left;
}
/* Tighter stack: photo strip → Clear chat / Remove all photos */
.dare-wheel-game__media-wall .intensity-card__body {
  gap: 6px;
}
.dare-wheel-game__media-wall-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
}
.dare-wheel-game__clear-all {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
}
.dare-wheel-game__feed-entries {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
  min-height: 92px;
  align-items: flex-start;
  padding: 0 2px;
}
.dare-wheel-game__feed-empty {
  margin: 0;
  opacity: 0.7;
  width: 100%;
}
.dare-wheel-game__thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 72px;
  height: auto;
  /* Room for host delete control above the thumb without clipping */
  margin-top: 4px;
}
.dare-wheel-game__thumb-label {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.dare-wheel-game__thumb-label--bull {
  color: #8b1520;
}
.dare-wheel-game__thumb-label--cuck {
  color: rgba(246, 206, 100, 0.85);
}
.dare-wheel-game__thumb {
  border: 1px solid rgba(246, 206, 100, 0.75);
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  flex: 0 0 72px;
  display: block;
  box-sizing: border-box;
  line-height: 0;
}
.dare-wheel-game__thumb--bull {
  border-color: #8b1520;
  box-shadow: 0 0 0 1px rgba(139, 21, 32, 0.55);
}
.dare-wheel-game__thumb-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(246, 206, 100, 0.55);
  background: rgba(20, 12, 8, 0.92);
  color: #f6ce64;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dare-wheel-game__thumb-delete:hover {
  background: rgba(202, 34, 49, 0.9);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.dare-wheel-game__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dare-wheel-game__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
}
.dare-wheel-game__actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.dare-wheel-game__photo-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}
.dare-wheel-game__actions-sep {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.22);
  flex-shrink: 0;
}
.dare-wheel-game__icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
}
.dare-wheel-game__icon-btn .avatar-opt-icon {
  width: 20px;
  height: 20px;
}
.dare-wheel-game__icon-btn--bull.btn-avatar-opt--icon {
  border-color: #ca2231;
  color: #ca2231;
}
.dare-wheel-game__icon-btn--bull.btn-avatar-opt--icon:hover {
  border-color: #e03a48;
  color: #e03a48;
}
.dare-wheel-game__end-turn {
  width: auto;
  margin: 0;
  padding: 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
  line-height: 1;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-sizing: border-box;
}
.dare-wheel-game__chat {
  margin: 0;
  text-align: left;
}
.dare-wheel-game__chat .game-chat-card {
  margin: 0;
}
.dare-wheel-game__chat .intensity-card__body {
  gap: 0; /* chat box is self-contained */
}
.dare-wheel-game__chat .game-chat-card,
.dare-wheel-game__chat .game-chat,
.dare-wheel-game__chat .game-chat__messages,
.dare-wheel-game__chat .game-chat__message,
.dare-wheel-game__chat .game-chat__message-body {
  text-align: left;
}
.dare-wheel-game__chat .game-chat__messages {
  max-height: 128px; /* ~20% under prior 160px */
}

/* Mobile Dare Wheel chat: wider input; emoji + timer centered on card; history height.
   Important: two-row composer is ~110px. Do NOT also cap messages with max-height or the
   latest lines sit under the input (z-index:2) / get clipped by overflow:hidden.
   Messages flex into leftover space and scroll so new chats stay visible above the composer. */
@media (max-width: 767px) {
  body.player-app .dare-wheel-game__chat .game-chat {
    height: 272px; /* ~20% under prior 340px */
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.player-app .dare-wheel-game__chat .game-chat__messages {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none; /* take remaining space above composer; scroll inside */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__cooldown,
  body.player-app .dare-wheel-game__chat .game-chat__send-as {
    flex-shrink: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__input-wrap,
  body.player-app .dare-wheel-game__chat .game-chat--with-emoji .game-chat__input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 6px;
    row-gap: 8px;
    align-items: center;
    justify-items: stretch;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  body.player-app .dare-wheel-game__chat .game-chat__input {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    width: 100%;
    min-width: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__send {
    grid-column: 2;
    grid-row: 1;
    order: 2;
  }

  /* Full-width tools row, centered to the card */
  body.player-app .dare-wheel-game__chat .game-chat__composer-tools {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    order: 3;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  body.player-app .dare-wheel-game__chat .game-chat__emoji-btn,
  body.player-app .dare-wheel-game__chat .game-chat__timer-btn {
    order: unset;
    margin: 0;
  }

  body.player-app .dare-wheel-game__chat .game-chat__emoji-popover,
  body.player-app .dare-wheel-game__chat .game-chat__timer-popover {
    order: 4;
  }
}

/* Match chat emoji/send/timer to photo upload / take photo / edit wheel icon buttons.
   Must beat body.player-app button padding (grows on laptop via --btn-pad-*). */
body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn.btn-avatar-opt--icon,
body.player-app .dare-wheel-game__chat .game-chat__emoji-btn,
body.player-app .dare-wheel-game__chat .game-chat__send,
body.player-app .dare-wheel-game__chat .game-chat__timer-btn:not(.is-running) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running,
body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running:hover:not(:disabled),
body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running[aria-expanded="true"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 40px;
  min-width: 52px;
  max-width: none;
  min-height: 40px;
  margin: 0;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--color-accent-strong);
  background: rgba(212, 148, 154, 0.28);
  color: var(--color-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.4),
    0 0 12px rgba(212, 148, 154, 0.5),
    0 0 22px rgba(212, 148, 154, 0.28);
  transform: none;
  animation: chatTimerActiveGlowLounge 1.1s ease-in-out infinite;
}

@keyframes chatTimerActiveGlowLounge {
  0%, 100% {
    border-color: rgba(212, 148, 154, 0.7);
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.35),
      0 0 10px rgba(212, 148, 154, 0.4),
      0 0 18px rgba(212, 148, 154, 0.22);
  }
  50% {
    border-color: rgba(226, 168, 173, 0.95);
    box-shadow:
      0 0 0 2px rgba(212, 148, 154, 0.55),
      0 0 16px rgba(212, 148, 154, 0.65),
      0 0 28px rgba(212, 148, 154, 0.38);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running,
  body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running:hover:not(:disabled),
  body.player-app .dare-wheel-game__chat .game-chat__timer-btn.is-running[aria-expanded="true"] {
    animation: none;
  }
}

/* Same hover / open highlight for emoji, send, and idle timer */
body.player-app .dare-wheel-game__chat .game-chat__emoji-btn:hover:not(:disabled),
body.player-app .dare-wheel-game__chat .game-chat__send:hover:not(:disabled),
body.player-app .dare-wheel-game__chat .game-chat__timer-btn:not(.is-running):hover:not(:disabled),
body.player-app .dare-wheel-game__chat .game-chat__emoji-btn[aria-expanded="true"],
body.player-app .dare-wheel-game__chat .game-chat__timer-btn:not(.is-running)[aria-expanded="true"] {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

/* Photo upload / take photo / edit wheel — same hover as chat emoji/send/timer */
body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn.btn-avatar-opt--icon:hover:not(:disabled),
body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn.btn-avatar-opt--icon:active:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border: 1px solid var(--color-accent);
  color: var(--color-accent-strong);
  box-shadow: none;
  transform: none;
}

/* Bull photo tools: same hover pattern, keep bull red accent */
body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn--bull.btn-avatar-opt--icon:hover:not(:disabled),
body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn--bull.btn-avatar-opt--icon:active:not(:disabled) {
  background: rgba(139, 21, 32, 0.14);
  border: 1px solid #8b1520;
  color: #e03a48;
}

/* End Turn: keep pink primary, match photo-button height (40px) */
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-primary,
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-primary:hover:not(:disabled),
body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-primary:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  box-sizing: border-box;
}

body.player-app .dare-wheel-game__actions button.dare-wheel-game__end-turn.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

body.player-app .dare-wheel-game__chat .game-chat__timer-popover {
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
  padding: 4px;
  border-radius: 8px;
}

/* Beat body.player-app button (1.1rem + large padding) — keep menu compact */
body.player-app .dare-wheel-game__chat .game-chat__timer-option,
body.player-app .dare-wheel-game__chat .game-chat__timer-option:hover:not(:disabled),
body.player-app .dare-wheel-game__chat .game-chat__timer-option:active:not(:disabled) {
  display: block;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  box-shadow: none;
  transform: none;
}

body.player-app .dare-wheel-game__chat .game-chat__timer-option:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.14);
  color: var(--color-text);
}

body.player-app .dare-wheel-game__chat .game-chat__timer-option--cancel,
body.player-app .dare-wheel-game__chat .game-chat__timer-option--cancel:hover:not(:disabled) {
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 6px 6px;
  color: var(--color-danger);
  background: transparent;
}

body.player-app .dare-wheel-game__chat .game-chat__timer-option--cancel:hover:not(:disabled) {
  background: rgba(224, 138, 138, 0.12);
}

body.player-app .dare-wheel-game__chat .game-chat__send-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}
body.player-app .dare-wheel-game__chat .game-chat__timer-icon {
  width: 18px;
  height: 18px;
  color: inherit;
}
.game-chat__message--dare-land .game-chat__dare-task {
  font-weight: 700;
  font-style: normal;
  color: #f6ce64;
}
.game-chat__message--photo .game-chat__message-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.game-chat__photo-thumb {
  display: inline-flex;
  border: 1px solid rgba(246, 206, 100, 0.75);
  padding: 0;
  margin: 3px 0 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  width: 64px;
  height: 64px;
  vertical-align: middle;
  box-sizing: border-box;
}
.game-chat__photo-thumb--bull {
  border-color: #8b1520;
  box-shadow: 0 0 0 1px rgba(139, 21, 32, 0.55);
}
.game-chat__photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.game-chat__message--system .game-chat__message-body {
  opacity: 0.95;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}
.image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(22, 19, 28, 0.85);
  color: #f3ebe6;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-lightbox__img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 900px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-form__label {
  font-size: 0.9rem;
  font-weight: 600;
}
.auth-form__input {
  width: 100%;
  max-width: 20em;
}
.auth-form__error {
  margin: 0;
  color: #ff6b6b;
  font-size: 0.9rem;
}
.auth-form__secondary {
  margin-top: 4px;
}
.auth-form__status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}
.auth-verify-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-verify-banner {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 200, 80, 0.15);
  border: 1px solid rgba(255, 200, 80, 0.35);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* =============================================================================
   Sexcapades player/admin skin (Phase 0) — soft lounge
   Scoped to body.player-app (player app + admin.html).
   ============================================================================= */

body.player-app {
  /* Soft lounge tokens */
  --color-bg: #1c1822;
  --color-bg-mid: #241f2c;
  --color-bg-elevated: #2e2836;
  --color-bg-input: #16131c;
  --color-text: #f3ebe6;
  --color-text-muted: rgba(243, 235, 230, 0.72);
  --color-border: rgba(212, 148, 154, 0.28);
  --color-accent: #d4949a;
  --color-accent-strong: #e2a8ad;
  --color-accent-ink: #2a1f24;
  --color-accent-teal: #5a9a96;
  --color-accent-teal-strong: #6eb0ab;
  --color-success: #6fbf9a;
  --color-warning: #e0b35a;
  --color-danger: #e08a8a;
  --color-info: #8eb4c4;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --radius-card: 18px;
  --radius-control: 14px;
  --space-card: 18px;
  --wrap-max: 520px;
  --wrap-pad-x: 24px;
  --wrap-pad-y: 14px; /* was 24 — less space above Sexcapades title */
  --wrap-pad-y-bottom: 16px;
  --btn-font-size: 1.1rem;
  --btn-pad-y: 14px;
  --btn-pad-x: 18px;
  --title-size: 2.1rem;
  --card-heading-size: 1.125rem; /* ~10% under 1.25rem */
  --card-heading-to-divider-gap: 6px;

  font-family: var(--font-body);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(212, 148, 154, 0.16), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(90, 154, 150, 0.12), transparent 50%),
    var(--color-bg);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* Laptop: wider shell, larger type/controls */
@media (min-width: 768px) {
  body.player-app {
    --wrap-max: 1000px;
    --wrap-pad-x: 40px;
    --wrap-pad-y: 18px; /* was 32 */
    --wrap-pad-y-bottom: 20px;
    --space-card: 28px;
    --btn-font-size: 1.2rem;
    --btn-pad-y: 16px;
    --btn-pad-x: 28px;
    --title-size: 2.5rem;
    --card-heading-size: 1.215rem; /* ~10% under 1.35rem */
    --radius-card: 20px;
  }
}

body.player-app .wrap {
  max-width: var(--wrap-max);
  padding: var(--wrap-pad-y) var(--wrap-pad-x) var(--wrap-pad-y-bottom, var(--wrap-pad-y));
}

/* Game screen: trim leftover space under room-info / view-players nav */
body.player-app[data-player-screen="game"] .wrap {
  padding-bottom: 8px;
}
body.player-app[data-player-screen="game"] .game-screen {
  padding-bottom: 4px;
}
body.player-app[data-player-screen="game"] .game-nav {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Laptop game: side menu rail + main column (replaces bottom game-nav) */
@media (min-width: 768px) {
  body.player-app[data-player-screen="game"] {
    --game-side-menu-w: 74px; /* ~7.5% under prior 80px — less blank beside 46px buttons */
    --game-side-menu-gap: 12px;
    --game-side-rail: calc(var(--game-side-menu-w) + var(--game-side-menu-gap));
  }

  body.player-app[data-player-screen="game"] .game-screen__body {
    display: grid;
    grid-template-columns: var(--game-side-menu-w) minmax(0, 1fr);
    column-gap: var(--game-side-menu-gap);
    row-gap: 12px;
    align-items: start;
  }

  /* Title + email center on the main game card, not the full wrap (side rail offset) */
  body.player-app[data-player-screen="game"] .app-title-wrap,
  body.player-app[data-player-screen="game"] .app-user-email {
    margin-left: var(--game-side-rail);
    width: calc(100% - var(--game-side-rail));
    max-width: none;
    box-sizing: border-box;
  }

  body.player-app[data-player-screen="game"] .game-side-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
    width: var(--game-side-menu-w);
    max-width: var(--game-side-menu-w);
    margin: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    position: sticky;
    top: 12px;
    align-self: start;
    overflow: visible;
    z-index: 30; /* above main column so side-menu tooltips aren’t covered */
  }

  body.player-app[data-player-screen="game"] .game-side-menu__nav,
  body.player-app[data-player-screen="game"] .game-side-menu__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  body.player-app[data-player-screen="game"] .game-side-menu__actions:not(:empty) {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
  }

  body.player-app[data-player-screen="game"] .game-side-menu .game-nav__btn,
  body.player-app[data-player-screen="game"] .game-side-menu .game-actions-sheet__btn {
    width: 46px; /* ~18% under prior 56px */
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--color-border);
    background: rgba(22, 19, 28, 0.7);
    color: var(--color-accent-strong);
    border-radius: var(--radius-control);
    font-size: 0;
    line-height: 0;
  }

  body.player-app[data-player-screen="game"] .game-side-menu button.game-nav__btn:hover:not(:disabled),
  body.player-app[data-player-screen="game"] .game-side-menu button.game-actions-sheet__btn:hover:not(:disabled),
  body.player-app[data-player-screen="game"] .game-side-menu button.game-nav__btn:focus-visible:not(:disabled),
  body.player-app[data-player-screen="game"] .game-side-menu button.game-actions-sheet__btn:focus-visible:not(:disabled) {
    background: rgba(212, 148, 154, 0.14);
    border-color: var(--color-accent);
    /* Keep rose icons; global `button:hover` uses accent-ink and washes them out on non-ghost btns */
    color: var(--color-accent-strong);
  }

  body.player-app[data-player-screen="game"] .game-side-menu .game-nav__icon,
  body.player-app[data-player-screen="game"] .game-side-menu .game-actions-sheet__icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  body.player-app[data-player-screen="game"] .game-side-menu .game-actions-sheet__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.player-app[data-player-screen="game"] .game-screen__main {
    grid-column: 2;
    gap: 12px;
  }

  /* Bottom nav emptied after JS moves buttons into the side rail */
  body.player-app[data-player-screen="game"] .game-screen__main > .game-nav {
    display: none;
  }
}

body.player-app .app-title-wrap h1,
body.player-app h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--title-size);
  letter-spacing: 0.01em;
  color: var(--color-text);
}

body.player-app .app-subtitle {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent);
  opacity: 1;
}

body.player-app .app-title-icon[hidden] {
  display: none;
}

body.player-app .app-user-email {
  color: var(--color-text-muted);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
  box-sizing: border-box;
}

/* Match email column to the card/column width used on each screen */
body.player-app[data-player-screen="welcome"] .app-user-email {
  max-width: 520px;
}

body.player-app[data-player-screen="gameModes"] .app-user-email {
  max-width: 640px;
}

body.player-app[data-player-screen="hostSetup"] .app-user-email {
  max-width: 560px;
}

body.player-app[data-player-screen="home"] .app-user-email,
body.player-app[data-player-screen="lobby"] .app-user-email,
body.player-app[data-player-screen="game"] .app-user-email {
  max-width: var(--wrap-max);
}

body.player-app .card {
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.92), rgba(28, 24, 34, 0.96));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  /* Tighter top than sides/bottom — less empty space above titles */
  padding: 8px var(--space-card) var(--space-card);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}

body.player-app .card h2,
body.player-app .game-screen__panel-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-accent-strong);
}

body.player-app button {
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: 700;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-control);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
}

/* Primary fill hover — exclude ghosts (their hover sets pink text; pink-on-pink hid labels) */
body.player-app button:hover:not(:disabled):not(.btn-ghost) {
  background: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

body.player-app .btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

body.player-app .btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

/* Hover only on real pointers — touch otherwise keeps :hover “stuck” after tap */
@media (hover: hover) and (pointer: fine) {
  body.player-app .btn-ghost:hover:not(:disabled) {
    background: rgba(243, 235, 230, 0.1);
    border-color: var(--color-accent);
    color: var(--color-text);
  }
}

@media (hover: hover) and (pointer: fine) {
  body.player-app .btn-ghost:active:not(:disabled) {
    background: var(--color-accent);
    color: var(--color-accent-ink);
  }
}

/* Touch: don’t leave ghost buttons looking pressed after tap */
@media (hover: none), (pointer: coarse) {
  body.player-app .btn-ghost:hover:not(:disabled),
  body.player-app .btn-ghost:focus:not(:focus-visible):not(:disabled) {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  body.player-app .btn-ghost:active:not(:disabled) {
    background: rgba(243, 235, 230, 0.12);
    border-color: var(--color-accent);
    color: var(--color-text);
  }
}

body.player-app .btn-ghost.danger {
  border-color: rgba(224, 138, 138, 0.55);
  color: var(--color-danger);
}

body.player-app button:disabled,
body.player-app button:disabled:hover,
body.player-app button:disabled:active {
  background: rgba(22, 19, 28, 0.55);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

body.player-app button.btn-ghost:disabled,
body.player-app button.btn-ghost:disabled:hover,
body.player-app button.btn-ghost:disabled:active {
  background: rgba(22, 19, 28, 0.4);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

body.player-app .btn-fit {
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) + 4px);
}

body.player-app input,
body.player-app select,
body.player-app textarea {
  font-family: var(--font-body);
  background: var(--color-bg-input);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

body.player-app input:focus,
body.player-app select:focus,
body.player-app textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 148, 154, 0.18);
  outline: none;
}

body.player-app a {
  color: var(--color-accent-teal-strong);
}

body.player-app .checkline {
  color: var(--color-text);
}

body.player-app .auth-verify-banner {
  background: rgba(224, 179, 90, 0.12);
  border-color: rgba(224, 179, 90, 0.4);
}

body.player-app .auth-form__error {
  color: var(--color-danger);
}

/* Status tones (lobby / game banners) */
body.player-app .lobby-banner:has([data-tone="info"]) {
  border-color: rgba(142, 180, 196, 0.45);
  background: rgba(142, 180, 196, 0.08);
}

body.player-app .lobby-banner:has([data-tone="success"]) {
  border-color: rgba(111, 191, 154, 0.45);
  background: rgba(111, 191, 154, 0.08);
}

body.player-app .lobby-banner:has([data-tone="warning"]) {
  border-color: rgba(224, 179, 90, 0.45);
  background: rgba(224, 179, 90, 0.08);
}

body.player-app .lobby-banner:has([data-tone="danger"]) {
  border-color: rgba(224, 138, 138, 0.5);
  background: rgba(224, 138, 138, 0.08);
}

body.player-app #lobbyInfo[data-tone="success"],
body.player-app #gameBannerSubtitle[data-tone="success"] {
  color: var(--color-success);
}

body.player-app #lobbyInfo[data-tone="warning"],
body.player-app #gameBannerSubtitle[data-tone="warning"] {
  color: var(--color-warning);
}

body.player-app #lobbyInfo[data-tone="danger"],
body.player-app #gameBannerSubtitle[data-tone="danger"] {
  color: var(--color-danger);
}

body.player-app #lobbyInfo[data-tone="info"],
body.player-app #gameBannerSubtitle[data-tone="info"] {
  color: var(--color-info);
}

/* Toast + sheets: lounge surfaces */
body.player-app .toast {
  background: rgba(28, 24, 34, 0.55);
}

body.player-app .toast-inner {
  width: min(var(--wrap-max), 92vw);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

body.player-app .sheet__panel {
  background: var(--color-bg-mid);
  border-color: var(--color-border);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

body.player-app .sheet .card {
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.92), rgba(28, 24, 34, 0.96));
}

body.player-app .sheet__backdrop {
  background: rgba(28, 24, 34, 0.55);
}

/* =============================================================================
   Phase 1 — Pre-game surfaces (welcome → game select → home → host → lobby)
   ============================================================================= */

body.player-app .checkline input {
  accent-color: var(--color-accent);
}

body.player-app .action-feedback {
  color: var(--color-accent-strong);
}

body.player-app .pregame-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.player-app .pregame-screen > .card,
body.player-app .pregame-screen .home-cta-group {
  margin-top: 0;
  margin-bottom: 0;
}

/* Nested cards in pre-game grids/stacks: spacing comes from gap, not .card margins */
body.player-app .pregame-screen .card {
  margin-top: 0;
  margin-bottom: 0;
}

/* ----- Public home ----- */
body.player-app .public-home-screen {
  gap: 52px;
  padding: 18px 0 28px;
}

body.player-app .public-home-hero {
  display: grid;
  gap: 38px;
  align-items: center;
}

body.player-app .public-home-hero__copy {
  text-align: center;
}

body.player-app .public-home-eyebrow {
  margin: 0 0 10px;
  color: var(--color-accent-teal-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body.player-app .public-home-hero h2,
body.player-app .public-home-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.05;
}

body.player-app .public-home-hero h2 {
  font-size: clamp(2.35rem, 12vw, 4.5rem);
  letter-spacing: -0.035em;
}

body.player-app .public-home-intro {
  max-width: 36rem;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

body.player-app .public-home-login {
  min-width: min(100%, 18rem);
  margin-top: 24px;
}

body.player-app .public-home-assurance {
  margin: 12px 0 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.025em;
}

body.player-app .public-home-cards {
  position: relative;
  min-height: 260px;
  margin: 0 auto;
  width: min(100%, 390px);
}

body.player-app .public-home-card {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 142px;
  aspect-ratio: 2 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(243, 235, 230, 0.16);
  border-radius: 17px;
  background: var(--color-bg-elevated);
  box-shadow: 0 22px 38px rgba(0, 0, 0, 0.38);
}

body.player-app .public-home-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.player-app .public-home-card figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  min-height: 38%;
  padding: 18px 13px 14px;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(transparent, rgba(8, 7, 12, 0.94));
}

body.player-app .public-home-card figcaption span {
  color: rgba(243, 235, 230, 0.7);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.player-app .public-home-card figcaption strong {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 1rem;
}

body.player-app .public-home-card--left {
  z-index: 1;
  transform: translateX(-112%) rotate(-9deg);
}

body.player-app .public-home-card--center {
  z-index: 3;
  top: 0;
  transform: translateX(-50%);
}

body.player-app .public-home-card--right {
  z-index: 2;
  transform: translateX(12%) rotate(9deg);
}

body.player-app .public-home-games {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.player-app .public-home-section-heading {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

body.player-app .public-home-section-heading h2 {
  font-size: clamp(1.85rem, 8vw, 2.8rem);
}

body.player-app .public-home-section-heading > p:last-child {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

body.player-app .public-home-game-grid {
  display: grid;
  gap: 12px;
}

body.player-app .public-home-game {
  position: relative;
  min-height: 155px;
  padding-top: 54px;
  overflow: hidden;
}

body.player-app .public-home-game::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  right: -65px;
  bottom: -70px;
  border-radius: 50%;
  background: rgba(212, 148, 154, 0.12);
}

body.player-app .public-home-game:nth-child(2)::after {
  background: rgba(90, 154, 150, 0.14);
}

body.player-app .public-home-game__number {
  position: absolute;
  top: 18px;
  left: 18px;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

body.player-app .public-home-game h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
}

body.player-app .public-home-game p {
  position: relative;
  z-index: 1;
  margin: 9px 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

body.player-app .public-home-game--soon {
  border-style: dashed;
  background: rgba(46, 40, 54, 0.42);
}

body.player-app .public-home-bottom-cta {
  padding: 26px 18px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

body.player-app .public-home-bottom-cta p {
  margin: 0 0 15px;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

body.player-app .public-home-bottom-cta button {
  width: 100%;
}

@media (min-width: 768px) {
  body.player-app .public-home-screen {
    gap: 74px;
    padding-top: 34px;
  }

  body.player-app .public-home-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 56px;
    min-height: 430px;
  }

  body.player-app .public-home-hero__copy {
    text-align: left;
  }

  body.player-app .public-home-hero h2 {
    font-size: clamp(3.25rem, 6vw, 4.6rem);
  }

  body.player-app .public-home-intro {
    margin-left: 0;
  }

  body.player-app .public-home-assurance {
    font-size: 0.84rem;
  }

  body.player-app .public-home-cards {
    min-height: 350px;
    width: 100%;
  }

  body.player-app .public-home-card {
    width: 174px;
  }

  body.player-app .public-home-game-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  body.player-app .public-home-game {
    min-height: 190px;
  }

  body.player-app .public-home-bottom-cta {
    display: flex;
    padding: 24px 28px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  body.player-app .public-home-bottom-cta p {
    margin: 0;
    font-size: 1.4rem;
  }

  body.player-app .public-home-bottom-cta button {
    width: auto;
  }
}

/* ----- Welcome ----- */
body.player-app .welcome-screen {
  gap: 16px;
}

body.player-app .welcome-consent-card {
  box-shadow: none;
  background: rgba(46, 40, 54, 0.45);
  border-color: rgba(212, 148, 154, 0.18);
  padding: 16px 18px;
}

body.player-app .welcome-consent-card h2 {
  font-size: 1.15rem;
  text-align: left;
  margin-bottom: 6px;
}

body.player-app .welcome-consent-copy {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

body.player-app .welcome-consent-note {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

body.player-app .welcome-consent-visual {
  margin: 16px auto 0;
  padding: 0;
  width: min(100%, 200px);
  text-align: center;
}

body.player-app .welcome-consent-visual[hidden] {
  display: none;
}

body.player-app .welcome-consent-card--compact {
  padding-bottom: 14px;
}

body.player-app .welcome-consent-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(243, 235, 230, 0.16);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

body.player-app .welcome-auth-card {
  padding: calc(var(--space-card) + 4px);
}

body.player-app .welcome-auth-title {
  text-align: left;
  margin-bottom: 12px;
  font-size: 1.35rem;
}

body.player-app .welcome-auth-card .auth-form {
  align-items: stretch;
}

body.player-app .welcome-auth-card .auth-form__input {
  max-width: none;
}

body.player-app .welcome-auth-card .btn-fit,
body.player-app .welcome-status-card .btn-fit {
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

body.player-app .welcome-status-card h2 {
  text-align: left;
}

@media (min-width: 768px) {
  body.player-app .welcome-screen {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  body.player-app .welcome-auth-card .btn-fit,
  body.player-app .welcome-status-card .btn-fit {
    max-width: none;
  }
}

/* ----- Game select ----- */
body.player-app .game-select-step-label {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-teal-strong);
}

body.player-app .game-modes-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: calc(var(--space-card) + 2px);
}

body.player-app .game-modes-card h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  text-align: center;
}

/* Compact centered choice buttons (not full-card width) */
body.player-app .game-modes-card .game-mode-btn,
body.player-app .game-modes-card .game-mode-btn.btn-ghost {
  width: auto;
  max-width: 100%;
  min-width: 12rem;
  margin: 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  box-shadow: none;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-control);
}

body.player-app .game-modes-card .game-mode-btn:hover:not(:disabled),
body.player-app .game-modes-card .game-mode-btn.btn-ghost:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.16);
  border-color: var(--color-accent-strong);
  color: var(--color-text);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

body.player-app .game-modes-card .game-mode-btn:active:not(:disabled),
body.player-app .game-modes-card .game-mode-btn.btn-ghost:active:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

body.player-app .game-modes-card .game-mode-btn:disabled,
body.player-app .game-modes-card .game-mode-btn.btn-ghost:disabled,
body.player-app .game-modes-card .game-mode-btn:disabled:hover,
body.player-app .game-modes-card .game-mode-btn.btn-ghost:disabled:hover,
body.player-app .game-modes-card .game-mode-btn:disabled:active,
body.player-app .game-modes-card .game-mode-btn.btn-ghost:disabled:active {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.55;
  box-shadow: none;
  cursor: not-allowed;
}

/* Coming-soon / disabled options still show a light hover cue */
body.player-app .game-modes-card .game-mode-btn:disabled:hover,
body.player-app .game-modes-card .game-mode-btn.btn-ghost:disabled:hover {
  border-color: rgba(212, 148, 154, 0.55);
  background: rgba(212, 148, 154, 0.1);
  color: var(--color-text-muted);
  opacity: 0.72;
}

body.player-app .game-modes-card > .btn-ghost:not(.game-mode-btn) {
  margin-top: 6px;
  width: auto;
  align-self: center;
  min-width: 8rem;
}

body.player-app #screenGameModes > .home-actions-row {
  justify-content: center;
  padding: 14px 16px;
}

@media (min-width: 768px) {
  body.player-app .game-select-screen {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
  }

  body.player-app .game-modes-card {
    padding: 28px 26px;
    height: auto;
    align-self: stretch;
    gap: 12px;
  }

  body.player-app .game-modes-card h2 {
    margin: 0 0 2px;
  }

  body.player-app .game-modes-card .game-mode-btn {
    font-size: 1.05rem;
    padding: 14px 28px;
    min-width: 14rem;
  }
}

/* ----- Home ----- */
body.player-app .home-screen {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

body.player-app .home-cta-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-height: 0;
  overflow: visible;
  position: relative;
  z-index: 0;
}

/* No legacy .card vertical margins inside the CTA group (they caused overlap). */
body.player-app .home-cta-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  overflow: visible;
}

body.player-app .quick-join-card {
  margin: 14px 0 0;
}

body.player-app .home-cta-card h2 {
  text-align: center;
  margin: 0 0 2px;
}

body.player-app .home-cta-copy {
  margin: 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* My rooms — admin-style table/row list */
body.player-app .my-rooms.home-cta-card h2 {
  text-align: left;
}
body.player-app .my-rooms__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
body.player-app .my-rooms__header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
body.player-app .my-rooms__header h2 {
  margin: 0;
  text-align: left;
  line-height: 1.2;
}
body.player-app .my-rooms__active-count {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body.player-app .my-rooms__intro {
  margin: 0;
  text-align: left;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
/* Shared compact ghost CTA (New game / Create Room / Join Room) */
body.player-app .home-cta-action,
body.player-app .home-cta-card .home-cta-action.btn-ghost {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.player-app .create-room-card .home-cta-action {
  margin: 4px auto 0;
  align-self: center;
}
body.player-app .join-room-row .home-cta-action {
  margin: 0;
  flex: 0 0 auto;
}
body.player-app .my-rooms__new-btn {
  margin: 0;
  align-self: center;
}
body.player-app .my-rooms__empty,
body.player-app .my-rooms__loading {
  margin: 0;
  padding: 16px 14px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
body.player-app .my-rooms-table-wrap {
  overflow-x: visible;
  margin-top: 4px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: var(--color-bg-mid);
}
body.player-app .my-rooms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  table-layout: fixed;
  color: var(--color-text);
}
body.player-app .my-rooms-table th,
body.player-app .my-rooms-table td {
  padding: 7px 6px;
  text-align: left;
  border-bottom: 1px solid rgba(212, 148, 154, 0.18);
  vertical-align: middle;
}
body.player-app .my-rooms-table th {
  background: rgba(46, 40, 54, 0.95);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--color-accent-strong);
}
body.player-app .my-rooms-table col.my-rooms-col--game { width: 20%; }
body.player-app .my-rooms-table col.my-rooms-col--code { width: 10%; }
body.player-app .my-rooms-table col.my-rooms-col--status { width: 11%; }
body.player-app .my-rooms-table col.my-rooms-col--role { width: 8%; }
body.player-app .my-rooms-table col.my-rooms-col--created { width: 13%; }
body.player-app .my-rooms-table col.my-rooms-col--expires { width: 10%; }
body.player-app .my-rooms-table col.my-rooms-col--actions { width: 28%; }
body.player-app .my-rooms-table tr:last-child td {
  border-bottom: none;
}
body.player-app .my-rooms-table tbody tr.my-rooms-table__row:nth-child(odd) td {
  background: rgba(22, 19, 28, 0.35);
}
body.player-app .my-rooms-table tbody tr.my-rooms-table__row:nth-child(even) td {
  background: rgba(46, 40, 54, 0.42);
}
body.player-app .my-rooms-table tbody tr.my-rooms-table__row:hover td {
  background: rgba(212, 148, 154, 0.14);
}
body.player-app .my-rooms-table__group td {
  background: rgba(46, 40, 54, 0.95) !important;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-top: 7px;
  padding-bottom: 7px;
}
body.player-app .my-rooms-table__group--past td {
  padding: 0;
}
body.player-app .my-rooms-table__past-toggle,
body.player-app button.my-rooms-table__past-toggle {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transform: none;
}
body.player-app .my-rooms-table__past-toggle:hover:not(:disabled),
body.player-app button.my-rooms-table__past-toggle:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.1);
  color: var(--color-accent-strong);
}
body.player-app .my-rooms-table__past-toggle-label {
  flex: 0 0 auto;
}
body.player-app .my-rooms-table__past-toggle-meta {
  flex: 1 1 auto;
  text-align: right;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-accent-strong);
  opacity: 0.9;
}
body.player-app .my-rooms-table__row--past-extra[hidden] {
  display: none !important;
}
body.player-app .my-rooms-table__game {
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
}
body.player-app .my-rooms-table__code {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
  white-space: nowrap;
}
body.player-app .my-rooms-table__actions {
  white-space: normal;
}
body.player-app .my-rooms-table__actions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
body.player-app .my-rooms-table__btn {
  padding: 4px 7px;
  font-size: 0.72rem;
  margin: 0;
  width: auto;
  min-width: 0;
  line-height: 1.2;
}
body.player-app .my-rooms__badge {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
body.player-app .my-rooms__badge--waiting { color: var(--color-info); }
body.player-app .my-rooms__badge--playing { color: var(--color-success); }
body.player-app .my-rooms__badge--completed { color: var(--color-accent-teal-strong); }
body.player-app .my-rooms__badge--ended,
body.player-app .my-rooms__badge--expired { color: var(--color-text-muted); }
body.player-app .my-rooms-table__row--ended,
body.player-app .my-rooms-table__row--expired,
body.player-app .my-rooms-table__row--completed {
  opacity: 0.9;
}

/* Mobile: stacked room cards (more vertical space; laptop table unchanged) */
@media (max-width: 767px) {
  body.player-app .my-rooms-table-wrap {
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  body.player-app .my-rooms-table,
  body.player-app .my-rooms-table tbody {
    display: block;
    width: 100%;
  }

  body.player-app .my-rooms-table colgroup,
  body.player-app .my-rooms-table thead {
    display: none;
  }

  body.player-app .my-rooms-table__group {
    display: block;
    margin: 2px 0 6px;
  }

  body.player-app .my-rooms-table__group td {
    display: block;
    padding: 8px 2px 4px;
    border: none;
    background: transparent !important;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
  }

  body.player-app .my-rooms-table__group--past td {
    padding: 0;
  }

  body.player-app .my-rooms-table__past-toggle,
  body.player-app button.my-rooms-table__past-toggle {
    padding: 10px 4px;
    font-size: 0.82rem;
    border-radius: 8px;
  }

  body.player-app .my-rooms-table__past-toggle-meta {
    font-size: 0.75rem;
  }

  body.player-app .my-rooms-table__row {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 10px;
    padding: 11px 12px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: rgba(46, 40, 54, 0.55);
  }

  body.player-app .my-rooms-table tbody tr.my-rooms-table__row:nth-child(odd) td,
  body.player-app .my-rooms-table tbody tr.my-rooms-table__row:nth-child(even) td,
  body.player-app .my-rooms-table tbody tr.my-rooms-table__row:hover td {
    background: transparent;
  }

  body.player-app .my-rooms-table__row td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 0;
    border-bottom: 1px solid rgba(212, 148, 154, 0.14);
    font-size: 0.95rem;
    line-height: 1.25;
    text-align: right;
  }

  body.player-app .my-rooms-table__row td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-align: left;
  }

  body.player-app .my-rooms-table__row td.my-rooms-table__game {
    padding-top: 0;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    border-bottom-color: rgba(212, 148, 154, 0.22);
  }

  body.player-app .my-rooms-table__row td.my-rooms-table__game::before {
    flex-shrink: 0;
  }

  body.player-app .my-rooms-table__row .my-rooms-table__game-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }

  body.player-app .my-rooms-table__row td.my-rooms-table__code {
    font-size: 1.05rem;
    letter-spacing: 0.08em;
  }

  body.player-app .my-rooms-table__row .my-rooms__badge {
    font-size: 0.72rem;
    padding: 2px 7px;
  }

  body.player-app .my-rooms-table__row td.my-rooms-table__actions {
    display: block;
    padding-top: 9px;
    padding-bottom: 0;
    border-bottom: none;
    text-align: center;
  }

  body.player-app .my-rooms-table__row td.my-rooms-table__actions::before {
    display: block;
    margin-bottom: 6px;
    text-align: center;
  }

  body.player-app .my-rooms-table__actions-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  body.player-app .my-rooms-table__btn,
  body.player-app button.my-rooms-table__btn.btn-ghost {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Mobile My rooms: clear sticky pressed/hover after tap */
  body.player-app button.my-rooms-table__btn.btn-ghost:hover:not(:disabled),
  body.player-app button.my-rooms-table__btn.btn-ghost:focus:not(:disabled),
  body.player-app button.my-rooms-table__btn.btn-ghost:focus-visible:not(:disabled) {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
  }

  body.player-app button.my-rooms-table__btn.btn-ghost:active:not(:disabled) {
    background: rgba(243, 235, 230, 0.12);
    border-color: var(--color-accent);
    color: var(--color-text);
  }
}

body.player-app .lobby-game-age {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

body.player-app .home-cta-card .btn-fit {
  margin-top: 4px;
  margin-bottom: 0;
}

body.player-app .home-cta-card input {
  margin-top: 0;
}

body.player-app .home-room-code {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

body.player-app .home-room-code__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.player-app .home-room-code__value {
  margin: 6px 0 12px;
}

body.player-app #screenHome #roomCode,
body.player-app #screenLobby #lobbyRoomCode {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent-strong);
}

body.player-app #screenHome .home-actions-row {
  justify-content: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 8px 0 0;
  flex: 0 0 auto;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
}

/* Keep Game Select / Admin / Sign out the same control height (Admin is an <a>) */
body.player-app .home-actions-row > .btn-ghost,
body.player-app .home-actions-row > .home-admin-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  height: 48px;
  padding: 0 20px;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-control);
}

body.player-app .home-actions-row .admin-key-icon {
  width: 16px;
  height: 16px;
}

@media (min-width: 768px) {
  body.player-app .home-screen {
    gap: 28px;
  }

  body.player-app .home-cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Equal card heights: stretch into the row (sized by content). Avoid height:100%. */
    align-items: stretch;
  }

  body.player-app .home-cta-card {
    padding: 28px 26px;
    height: auto;
    align-self: stretch;
  }

  body.player-app .home-cta-card .btn-fit {
    width: 100%;
    max-width: none;
  }

  body.player-app .home-cta-card .home-cta-action {
    width: auto;
    max-width: none;
  }

  body.player-app .join-room-card #joinCode,
  body.player-app .quick-join-card #quickJoinCode {
    width: 9.5ch;
    max-width: 9.5ch;
    min-width: 9.5ch;
    font-size: 1rem;
    padding: 12px 14px;
  }

  /* Pin CTAs to the bottom of equal-height cards without growing the grid row */
  body.player-app .home-cta-group .join-room-row {
    margin-top: auto;
  }

  body.player-app .home-cta-group .create-room-card > .home-cta-action {
    margin-top: auto;
  }

  body.player-app #screenHome #roomCode {
    font-size: 2.4rem;
  }
}

/* ----- Home side menu (laptop only) ----- */
/* Mobile: side menu hidden; screen body is a plain flex column */
body.player-app .home-side-menu {
  display: none;
}

body.player-app .home-screen__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Laptop: two-column grid with sticky side rail */
@media (min-width: 768px) {
  body.player-app[data-player-screen="home"] {
    --home-side-menu-w: 74px;
    --home-side-menu-gap: 12px;
    --home-side-rail: calc(var(--home-side-menu-w) + var(--home-side-menu-gap));
  }

  body.player-app[data-player-screen="home"] .home-screen {
    /* Override the flex-column from .home-screen — use a 2-col grid instead */
    display: grid;
    grid-template-columns: var(--home-side-menu-w) minmax(0, 1fr);
    column-gap: var(--home-side-menu-gap);
    row-gap: 0;
    align-items: start;
  }

  /* Title and user email offset to align with main content column */
  body.player-app[data-player-screen="home"] .app-title-wrap,
  body.player-app[data-player-screen="home"] .app-user-email {
    margin-left: var(--home-side-rail);
    width: calc(100% - var(--home-side-rail));
    max-width: none;
    box-sizing: border-box;
  }

  body.player-app[data-player-screen="home"] .home-side-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
    width: var(--home-side-menu-w);
    max-width: var(--home-side-menu-w);
    margin: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    position: sticky;
    top: 12px;
    align-self: start;
    overflow: visible;
    z-index: 30;
  }

  /* Main content occupies column 2; the .home-screen__body is the single grid child in col 2 */
  body.player-app[data-player-screen="home"] .home-screen__body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }

  body.player-app[data-player-screen="home"] .home-side-menu__nav,
  body.player-app[data-player-screen="home"] .home-side-menu__system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  body.player-app[data-player-screen="home"] .home-side-menu__system:not(:empty) {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
  }

  /* Icon buttons — same style as game side menu */
  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--color-border);
    background: rgba(22, 19, 28, 0.7);
    color: var(--color-accent-strong);
    border-radius: var(--radius-control);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    transition: background 0.12s, border-color 0.12s;
  }

  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn:hover:not(:disabled),
  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn:focus-visible:not(:disabled) {
    background: rgba(212, 148, 154, 0.14);
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
  }

  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

  body.player-app[data-player-screen="home"] .home-side-menu .home-side-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Hide the bottom actions row (sign out / admin) on laptop — moved to side menu */
  body.player-app[data-player-screen="home"] #screenHome .home-actions-row {
    display: none;
  }
}

/* ── Shared pregame side menu (gameModes / hostSetup / lobby) ──────────── */
/* Mobile: hidden */
body.player-app .pregame-side-menu {
  display: none;
}

body.player-app .game-select-screen__body,
body.player-app .host-setup-screen__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Shared laptop rail styles, activated per-screen via data-player-screen */
@media (min-width: 768px) {
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
    width: var(--pregame-side-menu-w, 74px);
    max-width: var(--pregame-side-menu-w, 74px);
    margin: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    position: sticky;
    top: 12px;
    align-self: start;
    overflow: visible;
    z-index: 30;
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu__nav,
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu__system,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu__nav,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu__system,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu__nav,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu__system {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu__system:not(:empty),
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu__system:not(:empty),
  body.player-app[data-player-screen="lobby"] .pregame-side-menu__system:not(:empty) {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
  }

  /* Shared icon button style — matches game side menu */
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--color-border);
    background: rgba(22, 19, 28, 0.7);
    color: var(--color-accent-strong);
    border-radius: var(--radius-control);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    transition: background 0.12s, border-color 0.12s;
    text-decoration: none;
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn:hover:not(:disabled),
  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn:focus-visible:not(:disabled),
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn:hover:not(:disabled),
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn:focus-visible:not(:disabled),
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn:hover:not(:disabled),
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn:focus-visible:not(:disabled) {
    background: rgba(212, 148, 154, 0.14);
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn:disabled,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn:disabled,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn:disabled {
    opacity: 0.4;
    cursor: default;
  }

  body.player-app[data-player-screen="gameModes"] .pregame-side-menu .pregame-side-btn svg,
  body.player-app[data-player-screen="hostSetup"] .pregame-side-menu .pregame-side-btn svg,
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .pregame-side-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Also style game-nav__btn when placed inside lobby side menu */
  body.player-app[data-player-screen="lobby"] .pregame-side-menu .game-nav__btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    max-width: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    background: rgba(22, 19, 28, 0.7);
    color: var(--color-accent-strong);
    border-radius: var(--radius-control);
    font-size: 0;
    line-height: 0;
  }

  body.player-app[data-player-screen="lobby"] .pregame-side-menu button.game-nav__btn:hover:not(:disabled),
  body.player-app[data-player-screen="lobby"] .pregame-side-menu button.game-nav__btn:focus-visible:not(:disabled) {
    background: rgba(212, 148, 154, 0.14);
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
  }

  body.player-app[data-player-screen="lobby"] .pregame-side-menu .game-nav__icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  /* ── gameModes: side rail + centered content column ── */
  body.player-app[data-player-screen="gameModes"] {
    --pregame-side-menu-w: 74px;
    --pregame-side-menu-gap: 12px;
    --pregame-side-rail: calc(var(--pregame-side-menu-w) + var(--pregame-side-menu-gap));
  }

  body.player-app[data-player-screen="gameModes"] .game-select-screen {
    display: grid;
    grid-template-columns: var(--pregame-side-menu-w) minmax(0, 1fr);
    column-gap: var(--pregame-side-menu-gap);
    row-gap: 0;
    align-items: start;
    /* Remove centering — side menu takes over */
    max-width: none;
    margin: 0;
  }

  body.player-app[data-player-screen="gameModes"] .game-select-screen__body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  body.player-app[data-player-screen="gameModes"] .app-title-wrap,
  body.player-app[data-player-screen="gameModes"] .app-user-email {
    margin-left: var(--pregame-side-rail);
    width: calc(100% - var(--pregame-side-rail));
    max-width: none;
    box-sizing: border-box;
  }

  /* Hide bottom actions row on laptop */
  body.player-app[data-player-screen="gameModes"] .game-select-screen__body .home-actions-row {
    display: none;
  }

  /* ── hostSetup: side rail + centered content column ── */
  body.player-app[data-player-screen="hostSetup"] {
    --pregame-side-menu-w: 74px;
    --pregame-side-menu-gap: 12px;
    --pregame-side-rail: calc(var(--pregame-side-menu-w) + var(--pregame-side-menu-gap));
  }

  body.player-app[data-player-screen="hostSetup"] .host-setup-screen {
    display: grid;
    grid-template-columns: var(--pregame-side-menu-w) minmax(0, 1fr);
    column-gap: var(--pregame-side-menu-gap);
    row-gap: 0;
    align-items: start;
  }

  body.player-app[data-player-screen="hostSetup"] .host-setup-screen__body {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  /* Keep the host-setup card centered within its column */
  body.player-app[data-player-screen="hostSetup"] .host-setup-screen__body .host-setup-card {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 28px 26px;
  }

  body.player-app[data-player-screen="hostSetup"] .app-title-wrap,
  body.player-app[data-player-screen="hostSetup"] .app-user-email {
    margin-left: var(--pregame-side-rail);
    width: calc(100% - var(--pregame-side-rail));
    max-width: none;
    box-sizing: border-box;
  }

  /* ── lobby: side rail + full-width content ── */
  body.player-app[data-player-screen="lobby"] {
    --pregame-side-menu-w: 74px;
    --pregame-side-menu-gap: 12px;
    --pregame-side-rail: calc(var(--pregame-side-menu-w) + var(--pregame-side-menu-gap));
  }

  /* Override existing lobby 2-col grid to add a side rail column */
  body.player-app[data-player-screen="lobby"] .lobby-screen {
    grid-template-columns: var(--pregame-side-menu-w) 1fr 1fr;
    column-gap: var(--pregame-side-menu-gap);
  }

  /* Side menu sits in col 1, all lobby cards span cols 2-3 */
  body.player-app[data-player-screen="lobby"] .lobby-screen > .pregame-side-menu {
    grid-column: 1;
    grid-row: 1;
  }

  body.player-app[data-player-screen="lobby"] .lobby-screen > .lobby-banner,
  body.player-app[data-player-screen="lobby"] .lobby-screen > .lobby-primary-actions-card,
  body.player-app[data-player-screen="lobby"] .lobby-screen > .intensity-card,
  body.player-app[data-player-screen="lobby"] .lobby-screen > .add-players-card,
  body.player-app[data-player-screen="lobby"] .lobby-screen > .lobby-room-card,
  body.player-app[data-player-screen="lobby"] .lobby-screen > .players-list-card {
    grid-column: 2 / -1;
  }

  body.player-app[data-player-screen="lobby"] .app-title-wrap,
  body.player-app[data-player-screen="lobby"] .app-user-email {
    margin-left: var(--pregame-side-rail);
    width: calc(100% - var(--pregame-side-rail));
    max-width: none;
    box-sizing: border-box;
  }

  /* Hide the lobby primary actions card on laptop — buttons moved to side menu */
  body.player-app[data-player-screen="lobby"] .lobby-screen > .lobby-primary-actions-card {
    display: none;
  }
}

/* ----- Host setup ----- */
body.player-app .host-setup-screen .host-setup-card {
  padding: calc(var(--space-card) + 4px);
}

body.player-app .host-setup-setup,
body.player-app .add-players-card .add-players-single {
  max-width: 420px;
  width: 100%;
}

body.player-app .host-setup-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

body.player-app .host-setup-header-text {
  flex: 1;
  min-width: 0;
}

body.player-app .host-setup-header-text h2 {
  text-align: left;
  margin: 0 0 6px;
}

body.player-app .host-setup-tip {
  margin: 0;
}

body.player-app .host-setup-avatar-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 11.5rem;
}

body.player-app .host-setup-avatar-top .avatar-picker-label {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
}

body.player-app .host-setup-avatar-top .avatar-picker-buttons {
  justify-content: center;
  margin-bottom: 0;
  gap: 6px;
}

body.player-app .host-setup-avatar-top .btn-avatar-opt--icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

body.player-app .host-setup-avatar-top .avatar-opt-icon {
  width: 18px;
  height: 18px;
}

body.player-app .host-setup-card .couple-name-wrap {
  align-items: stretch;
  width: 100%;
  margin-bottom: 14px;
}

body.player-app .host-setup-card .couple-name-label {
  text-align: left;
  width: 100%;
}

body.player-app .host-setup-card .host-setup-text-input,
body.player-app .host-setup-card .player-name-input--short,
body.player-app .host-setup-card .player-name-input--couple,
body.player-app .host-setup-card .couple-name-wrap .player-name-input--couple,
body.player-app .add-players-card .host-setup-text-input,
body.player-app .add-players-card .player-name-input--short {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  text-align: left;
  /* Match .add-player-select height/chrome */
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.25;
  box-sizing: border-box;
  min-height: 42px;
}

body.player-app .host-setup-card .add-player-select,
body.player-app .add-players-card .add-player-select {
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
}

body.player-app .add-players-card .host-setup-field,
body.player-app .add-players-card .add-player-select-wrap {
  width: 100%;
  align-items: stretch;
}

body.player-app .add-players-card .add-player-select-label {
  text-align: left;
}

body.player-app .add-players-card .host-setup-actions {
  margin-top: 16px;
}

body.player-app .add-players-card .host-setup-actions.add-player-submit {
  justify-content: stretch;
}

body.player-app .add-players-card .host-setup-actions #btnAddPlayer {
  width: 100%;
  margin: 0;
}

body.player-app .host-setup-tip,
body.player-app .lifestyle-helper-text,
body.player-app .add-players-tip {
  color: var(--color-text-muted);
}

body.player-app .host-setup-ready-msg {
  background: rgba(111, 191, 154, 0.12);
  border-color: rgba(111, 191, 154, 0.4);
  color: var(--color-text);
  border-radius: var(--radius-control);
}

body.player-app .add-player-select-label,
body.player-app .avatar-picker-label,
body.player-app .couple-name-label {
  color: var(--color-text-muted);
  font-weight: 700;
}

body.player-app .btn-avatar-opt--icon,
body.player-app .avatar-icon-grid button {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-accent-strong);
}

body.player-app .avatar-preview-wrap,
body.player-app .avatar-editor-preview {
  border: 1px solid var(--color-border);
  background: var(--color-bg-input);
}

body.player-app .avatar-icon-grid {
  max-width: 18.5rem;
}

body.player-app .avatar-icon-grid button {
  padding: 3px;
  font-size: 1.4rem;
  border-radius: var(--radius-control, 14px);
}

body.player-app .btn-avatar-opt--icon:hover,
body.player-app .avatar-icon-grid button:hover {
  background: rgba(212, 148, 154, 0.12);
  border: 1px solid var(--color-border);
  color: var(--color-accent-strong);
}

body.player-app .btn-avatar-opt--icon.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

body.player-app .btn-avatar-opt--icon.btn-ghost:hover {
  background: rgba(212, 148, 154, 0.12);
  border: 1px solid var(--color-border);
  color: var(--color-accent-strong);
}

body.player-app .lifestyle-help-btn {
  border-color: var(--color-border);
  background: rgba(212, 148, 154, 0.12);
  color: var(--color-accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  margin-top: 0;
}

body.player-app .lifestyle-help-popover__card {
  background: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}

body.player-app #btnHostSetupLeave {
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media (max-width: 420px) {
  body.player-app .host-setup-header-row {
    flex-direction: column;
  }

  body.player-app .host-setup-avatar-top {
    align-self: flex-end;
    max-width: none;
  }
}

@media (min-width: 768px) {
  body.player-app .avatar-icon-grid {
    max-width: 22rem;
    gap: 5px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.player-app .avatar-icon-grid button {
    padding: 2px;
    font-size: 1.65rem;
  }

  body.player-app .host-setup-screen .host-setup-card {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 32px;
  }

  body.player-app .host-setup-setup,
  body.player-app .add-players-card .add-players-single {
    max-width: 480px;
  }

  body.player-app .host-setup-actions button,
  body.player-app #btnHostSetupOpenLobby {
    font-size: 1.2rem;
    min-height: 52px;
  }
}

/* ----- Lobby ----- */
body.player-app .lobby-banner {
  margin: 0 0 4px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  background: rgba(46, 40, 54, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

body.player-app .lobby-banner__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-text);
}

body.player-app .lobby-banner__subtitle {
  margin-bottom: 0;
}

body.player-app .lobby-banner__meta {
  color: var(--color-text-muted);
}

body.player-app .lobby-banner__meta strong {
  color: var(--color-accent-strong);
}

body.player-app .lobby-primary-actions-card {
  padding: 14px 18px;
}

body.player-app .lobby-primary-actions.game-nav {
  gap: 12px;
}

body.player-app .lobby-primary-actions.game-nav .game-nav__btn {
  min-width: 52px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: rgba(22, 19, 28, 0.65);
  color: var(--color-accent-strong);
  border-radius: var(--radius-control);
}

body.player-app .lobby-primary-actions.game-nav .game-nav__btn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.14);
  border-color: var(--color-accent);
}

body.player-app .lobby-primary-actions.game-nav .game-nav__btn:disabled {
  opacity: 0.4;
}

/* Card heading standard (match Game Lobby): sentence case, Fraunces, 1.25rem / 1.35rem laptop */
body.player-app .card h2,
body.player-app .game-screen__panel-title,
body.player-app .players-list-title,
body.player-app .intensity-card .game-screen__panel-title,
body.player-app .intensity-card__summary.game-screen__panel-title,
body.player-app .add-players-card__summary.game-screen__panel-title,
body.player-app .dare-panel-header__title,
body.player-app .card-history-card__summary.game-screen__panel-title,
body.player-app .game-screen__body .game-screen__panel-title,
body.player-app .game-screen__body .card .game-screen__panel-title,
body.player-app .dare-wheel-game .game-screen__panel-title {
  font-family: var(--font-display);
  font-size: var(--card-heading-size, 1.125rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-accent-strong);
}

body.player-app .lobby-room-card .lobby-room-header h2,
body.player-app #screenLobby .card h2,
body.player-app #screenLobby .players-list-title,
body.player-app #screenLobby .intensity-card .intensity-card__summary.game-screen__panel-title,
body.player-app #screenLobby .add-players-card__summary.game-screen__panel-title {
  font-family: var(--font-display);
  font-size: var(--card-heading-size, 1.125rem);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-accent-strong);
}

body.player-app .lobby-room-code-row .btn-inline {
  border: 1px solid var(--color-border);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.95rem;
}

body.player-app .players-list .pill {
  border-color: var(--color-border);
  background: rgba(22, 19, 28, 0.7);
}

body.player-app .player-pill {
  border-color: var(--color-border);
  background: rgba(212, 148, 154, 0.12);
  color: var(--color-text);
}

body.player-app .badge-host {
  border-color: rgba(212, 148, 154, 0.5);
  background: rgba(212, 148, 154, 0.16);
  color: var(--color-accent-strong);
}

body.player-app .badge-ready {
  border-color: rgba(111, 191, 154, 0.45);
  background: rgba(111, 191, 154, 0.12);
  color: var(--color-success);
}

body.player-app .badge-notready {
  border-color: rgba(224, 179, 90, 0.45);
  background: rgba(224, 179, 90, 0.12);
  color: var(--color-warning);
}

body.player-app .couple-card,
body.player-app .couple-add-section {
  border-color: var(--color-border);
  background: rgba(22, 19, 28, 0.35);
}

body.player-app .add-players-card__details[open] .add-players-card__body {
  border-top-color: var(--color-border);
}

body.player-app .add-players-card__summary,
body.player-app .intensity-card__summary {
  color: var(--color-accent-strong);
}

body.player-app .intensity-card {
  color: var(--color-text-muted);
}

body.player-app .intensity-card .game-screen__panel-title,
body.player-app .intensity-card .intensity-value {
  color: var(--color-accent-strong);
}

body.player-app .intensity-card .intensity-btn {
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 10px;
}

body.player-app .intensity-card .intensity-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .players-list-empty,
body.player-app .ready-summary,
body.player-app .players-summary {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  body.player-app .lobby-screen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    align-items: start;
  }

  body.player-app .lobby-screen > .lobby-banner,
  body.player-app .lobby-screen > .lobby-primary-actions-card,
  body.player-app .lobby-screen > .intensity-card,
  body.player-app .lobby-screen > .add-players-card,
  body.player-app .lobby-screen > .lobby-room-card,
  body.player-app .lobby-screen > .players-list-card {
    grid-column: 1 / -1;
  }

  body.player-app .lobby-banner {
    padding: 18px 22px;
  }

  body.player-app .lobby-banner__title {
    font-size: 1.35rem;
  }

  body.player-app .lobby-primary-actions.game-nav .game-nav__btn {
    min-width: 60px;
    min-height: 60px;
  }

  body.player-app .lobby-primary-actions.game-nav .game-nav__icon {
    width: 26px;
    height: 26px;
  }

  body.player-app #screenLobby #lobbyRoomCode {
    font-size: 2.6rem;
  }

  body.player-app .lobby-room-card,
  body.player-app .players-list-card {
    align-self: start;
    min-height: 0;
  }

  /* Two player cards per row on laptop */
  body.player-app .players-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }

  body.player-app .players-list > .pill {
    min-width: 0;
    height: 100%;
  }

  body.player-app .players-list > .couple-card,
  body.player-app .players-list > .players-list-empty {
    grid-column: 1 / -1;
  }

  body.player-app .card h2,
  body.player-app .game-screen__panel-title,
  body.player-app .players-list-title,
  body.player-app .intensity-card .game-screen__panel-title,
  body.player-app .intensity-card__summary.game-screen__panel-title,
  body.player-app .add-players-card__summary.game-screen__panel-title,
  body.player-app .dare-panel-header__title,
  body.player-app .card-history-card__summary.game-screen__panel-title,
  body.player-app .game-screen__body .game-screen__panel-title,
  body.player-app .game-screen__body .card .game-screen__panel-title,
  body.player-app .dare-wheel-game .game-screen__panel-title,
  body.player-app #screenLobby .card h2,
  body.player-app #screenLobby .players-list-title,
  body.player-app #screenLobby .intensity-card .intensity-card__summary.game-screen__panel-title,
  body.player-app #screenLobby .add-players-card__summary.game-screen__panel-title {
    font-size: var(--card-heading-size, 1.215rem);
  }

  body.player-app .dare-wheel-game__players-card > .game-screen__panel-title {
    font-size: 0.765rem; /* ~10% under 0.85rem */
  }
}

/* =============================================================================
   Phase 3 — Polish: motion, in-game chrome remap, laptop/mobile pass
   (Phase 2 skipped; high-visibility in-game gold remapped here.)
   ============================================================================= */

@keyframes player-screen-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes player-popup-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.player-app .player-screen--enter {
  animation: player-screen-enter 0.38s ease-out;
}

body.player-app .card-popup__content.player-popup--enter {
  animation: player-popup-enter 0.34s ease-out;
}

body.player-app button,
body.player-app .game-nav__btn,
body.player-app .game-mode-btn,
body.player-app .btn-inline {
  transition:
    transform 0.14s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

body.player-app button:active:not(:disabled),
body.player-app .game-nav__btn:active:not(:disabled) {
  transform: scale(0.97);
}

body.player-app .card {
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .player-screen--enter,
  body.player-app .card-popup__content.player-popup--enter {
    animation: none;
  }

  body.player-app button,
  body.player-app .game-nav__btn,
  body.player-app .game-mode-btn,
  body.player-app .btn-inline,
  body.player-app .card {
    transition: none;
  }

  body.player-app button:active:not(:disabled),
  body.player-app .game-nav__btn:active:not(:disabled) {
    transform: none;
  }
}

/* Media Wall thumbs + photo lightbox: reset global button chrome */
body.player-app .dare-wheel-game__thumb,
body.player-app .dare-wheel-game__thumb:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb:active:not(:disabled),
body.player-app .game-chat__photo-thumb,
body.player-app .game-chat__photo-thumb:hover:not(:disabled),
body.player-app .game-chat__photo-thumb:active:not(:disabled) {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid rgba(212, 148, 154, 0.85);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(212, 148, 154, 0.35);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
  transform: none;
  overflow: hidden;
}

body.player-app .game-chat__photo-thumb,
body.player-app .game-chat__photo-thumb:hover:not(:disabled),
body.player-app .game-chat__photo-thumb:active:not(:disabled) {
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
}

body.player-app .dare-wheel-game__thumb img,
body.player-app .game-chat__photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Cuck (non-bull): always-visible rose surround — not the faint --color-border */
body.player-app .dare-wheel-game__thumb:not(.dare-wheel-game__thumb--bull),
body.player-app .dare-wheel-game__thumb:not(.dare-wheel-game__thumb--bull):hover:not(:disabled),
body.player-app .dare-wheel-game__thumb:not(.dare-wheel-game__thumb--bull):active:not(:disabled),
body.player-app .game-chat__photo-thumb:not(.game-chat__photo-thumb--bull),
body.player-app .game-chat__photo-thumb:not(.game-chat__photo-thumb--bull):hover:not(:disabled),
body.player-app .game-chat__photo-thumb:not(.game-chat__photo-thumb--bull):active:not(:disabled) {
  border: 1px solid rgba(212, 148, 154, 0.85);
  box-shadow: 0 0 0 1px rgba(212, 148, 154, 0.35);
  background: transparent;
}

body.player-app .dare-wheel-game__thumb--bull,
body.player-app .dare-wheel-game__thumb--bull:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb--bull:active:not(:disabled),
body.player-app .game-chat__photo-thumb--bull,
body.player-app .game-chat__photo-thumb--bull:hover:not(:disabled),
body.player-app .game-chat__photo-thumb--bull:active:not(:disabled) {
  border-color: #8b1520;
  box-shadow: 0 0 0 1px rgba(139, 21, 32, 0.55);
}

body.player-app .dare-wheel-game__thumb-label--bull {
  color: #8b1520;
}

body.player-app .dare-wheel-game__thumb-label--cuck {
  color: var(--color-accent-strong);
}

/* Compact host tools under Media Wall (beat body.player-app button size) */
body.player-app .dare-wheel-game__media-wall-tools {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  width: 100%;
}

body.player-app .dare-wheel-game__media-wall button.dare-wheel-game__clear-all.btn-ghost,
body.player-app .dare-wheel-game__media-wall button.dare-wheel-game__clear-all.btn-ghost:hover:not(:disabled),
body.player-app .dare-wheel-game__media-wall button.dare-wheel-game__clear-all.btn-ghost:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  box-shadow: none;
  transform: none;
  flex: 0 0 auto;
}

body.player-app .dare-wheel-game__media-wall button.dare-wheel-game__clear-all.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body.player-app .dare-wheel-game__media-wall button.dare-wheel-game__clear-all.btn-ghost:active:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Edit Dare Wheel — Done CTA: same ghost language as Select / Clear chat */
body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost,
body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:hover:not(:disabled),
body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 10px 16px;
  border: 1px solid rgba(212, 148, 154, 0.35);
  border-radius: 10px;
  background: rgba(22, 19, 28, 0.35);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
  box-shadow: none;
  transform: none;
}

body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:active:not(:disabled) {
  background: rgba(212, 148, 154, 0.28);
  border-color: var(--color-accent-strong);
  color: var(--color-text);
}

body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:disabled,
body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:disabled:hover,
body.player-app #dareInGameEditorCard button#btnDareInGameDone.dare-wheel-ingame-editor__done.btn-ghost:disabled:active {
  background: rgba(22, 19, 28, 0.4);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

body.player-app .dare-wheel-game__thumb-delete,
body.player-app .dare-wheel-game__thumb-delete:hover:not(:disabled),
body.player-app .dare-wheel-game__thumb-delete:active:not(:disabled) {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(22, 19, 28, 0.92);
  color: var(--color-accent-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transform: none;
}

body.player-app .dare-wheel-game__thumb-delete:hover:not(:disabled) {
  background: rgba(224, 138, 138, 0.9);
  color: #fff;
}

body.player-app .image-lightbox__close,
body.player-app .image-lightbox__close:hover:not(:disabled),
body.player-app .image-lightbox__close:active:not(:disabled) {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(22, 19, 28, 0.9);
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  transform: none;
}

/* Profile / Avatar card: compact close + Edit Avatar (beat body.player-app button) */
body.player-app .avatar-lightbox__content.profile-card {
  border-color: var(--color-border);
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.96), rgba(28, 24, 34, 0.98));
  border-radius: var(--radius-card);
}

body.player-app .profile-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
}

body.player-app .profile-card__role {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent-strong);
}

body.player-app .profile-card__field-label {
  color: var(--color-accent-strong);
}

body.player-app .profile-card__field-value {
  color: var(--color-text);
}

body.player-app .profile-card button.profile-card__close,
body.player-app .profile-card button.profile-card__close:hover:not(:disabled),
body.player-app .profile-card button.profile-card__close:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

body.player-app .profile-card button.profile-card__close:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .profile-card button.profile-card__edit-avatar.btn-ghost,
body.player-app .profile-card button.profile-card__edit-avatar.btn-ghost:hover:not(:disabled),
body.player-app .profile-card button.profile-card__edit-avatar.btn-ghost:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 4px 0 0;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
  flex: 0 0 auto;
}

body.player-app .profile-card button.profile-card__edit-avatar.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body.player-app .profile-card button.profile-card__edit-avatar.btn-ghost:active:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Edit Avatar overlay — match profile card lounge chrome + compact controls */
body.player-app .avatar-editor-overlay {
  background: rgba(28, 24, 34, 0.72);
}

body.player-app .avatar-editor-inner {
  border: 1px solid var(--color-border);
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.96), rgba(28, 24, 34, 0.98));
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  max-width: min(calc(100vw - 32px), 420px);
  width: 100%;
}

body.player-app .avatar-editor-inner h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  text-align: center;
  margin: 0 28px 14px;
}

body.player-app .avatar-editor-preview {
  border: 1px solid var(--color-border);
  background: var(--color-bg-input);
}

body.player-app .avatar-editor-overlay button.avatar-editor-close,
body.player-app .avatar-editor-overlay button.avatar-editor-close:hover:not(:disabled),
body.player-app .avatar-editor-overlay button.avatar-editor-close:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

body.player-app .avatar-editor-overlay button.avatar-editor-close:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .avatar-editor-overlay button.btn-avatar-opt.btn-ghost,
body.player-app .avatar-editor-overlay button.btn-avatar-opt.btn-ghost:hover:not(:disabled),
body.player-app .avatar-editor-overlay button.btn-avatar-opt.btn-ghost:active:not(:disabled),
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-ghost,
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-ghost:hover:not(:disabled),
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-ghost:active:not(:disabled),
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-primary,
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-primary:hover:not(:disabled),
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-primary:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
  flex: 0 0 auto;
}

body.player-app .avatar-editor-overlay button.btn-avatar-opt.btn-ghost,
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-ghost {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

body.player-app .avatar-editor-overlay button.btn-avatar-opt.btn-ghost:hover:not(:disabled),
body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-primary {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

body.player-app .avatar-editor-overlay .avatar-editor-buttons button.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

/* Take photo + Adjust photo modals — match avatar editor lounge chrome */
body.player-app .webcam-modal,
body.player-app .photo-preview-modal {
  background: rgba(28, 24, 34, 0.78);
}

body.player-app .webcam-modal-inner,
body.player-app .photo-preview-modal-inner {
  border: 1px solid var(--color-border);
  background:
    linear-gradient(165deg, rgba(46, 40, 54, 0.96), rgba(28, 24, 34, 0.98));
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  max-width: min(calc(100vw - 32px), 420px);
  width: 100%;
}

body.player-app .webcam-modal-title,
body.player-app .photo-preview-modal__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-accent-strong);
  text-align: center;
}

body.player-app .photo-preview-modal__hint {
  color: var(--color-text-muted);
  opacity: 1;
}

body.player-app .webcam-video-wrap,
body.player-app .photo-preview-modal__image-wrap {
  border-color: var(--color-border);
}

body.player-app .webcam-modal button.webcam-flip-btn,
body.player-app .webcam-modal button.webcam-flip-btn:hover:not(:disabled),
body.player-app .webcam-modal button.webcam-flip-btn:active:not(:disabled) {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: rgba(22, 19, 28, 0.85);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
}

body.player-app .webcam-modal button.webcam-flip-btn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.16);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .webcam-modal .webcam-modal-actions button.btn-ghost,
body.player-app .webcam-modal .webcam-modal-actions button.btn-ghost:hover:not(:disabled),
body.player-app .webcam-modal .webcam-modal-actions button.btn-ghost:active:not(:disabled),
body.player-app .webcam-modal .webcam-modal-actions button.btn-primary,
body.player-app .webcam-modal .webcam-modal-actions button.btn-primary:hover:not(:disabled),
body.player-app .webcam-modal .webcam-modal-actions button.btn-primary:active:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-ghost,
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-ghost:hover:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-ghost:active:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-primary,
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-primary:hover:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-primary:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transform: none;
  flex: 0 0 auto;
}

body.player-app .webcam-modal .webcam-modal-actions button.btn-ghost,
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-ghost {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
}

body.player-app .webcam-modal .webcam-modal-actions button.btn-ghost:hover:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-ghost:hover:not(:disabled) {
  background: rgba(243, 235, 230, 0.1);
  border-color: var(--color-accent);
  color: var(--color-text);
}

body.player-app .webcam-modal .webcam-modal-actions button.btn-primary,
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-primary {
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

body.player-app .webcam-modal .webcam-modal-actions button.btn-primary:hover:not(:disabled),
body.player-app .photo-preview-modal .photo-preview-modal__actions button.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-accent-ink);
}

body.player-app .photo-preview-modal button.photo-preview-modal__zoom-btn,
body.player-app .photo-preview-modal button.photo-preview-modal__zoom-btn:hover:not(:disabled),
body.player-app .photo-preview-modal button.photo-preview-modal__zoom-btn:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

body.player-app .photo-preview-modal button.photo-preview-modal__zoom-btn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
}

body.player-app .photo-preview-modal button.photo-preview-modal__zoom-btn:active:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

body.player-app .image-lightbox__img {
  width: auto;
  height: auto;
  max-width: min(92vw, 900px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

/* ----- In-game / overlay gold → lounge tokens ----- */
body.player-app .game-action-feedback,
body.player-app .game-panel-status,
body.player-app .game-status-card__heading,
body.player-app .card-history-card .card-history__player,
body.player-app .card-popup__action-type,
body.player-app .card-popup__text {
  color: var(--color-accent-strong);
}

body.player-app .game-players-list__item,
body.player-app .game-players-list__avatar,
body.player-app .mode-wheel #modeWheelArrow:focus-visible .mode-wheel-arrow-hit,
body.player-app .mode-wheel #dareWheelArrow:focus-visible .mode-wheel-arrow-hit {
  border-color: var(--color-border);
}

body.player-app .game-players-list__item {
  border-color: var(--color-accent);
  background: rgba(22, 19, 28, 0.55);
}

body.player-app .game-players-list__avatar {
  border-color: var(--color-accent);
}

body.player-app .mode-wheel #modeWheelArrow:focus-visible .mode-wheel-arrow-hit,
body.player-app .mode-wheel #dareWheelArrow:focus-visible .mode-wheel-arrow-hit {
  outline-color: var(--color-accent);
}

/* Dare / action wheel segment borders → lounge rose */
body.player-app .dare-wheel-segment {
  stroke: var(--color-accent);
}

/* Landed segment: pulse for all players until End Turn */
@keyframes dareSegmentWinnerPulse {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 0 rgba(226, 168, 173, 0));
    stroke-width: 2.25;
  }
  50% {
    filter: brightness(1.28) drop-shadow(0 0 6px rgba(226, 168, 173, 0.65));
    stroke-width: 3.75;
  }
}
body.player-app .dare-wheel-segment.dare-wheel-segment--winner {
  stroke: var(--color-accent-strong, #e2a8ad);
  animation: dareSegmentWinnerPulse 1.05s ease-in-out infinite;
}
body.player-app .dare-wheel-segment-label.dare-wheel-segment-label--winner {
  font-weight: 700;
}

body.player-app .intensity-btn {
  border-color: var(--color-border);
  background: var(--color-bg-input);
  color: var(--color-text);
}

body.player-app .add-player-select:focus,
body.player-app .player-name-input:focus {
  border-color: var(--color-accent);
}

body.player-app .card-popup__content,
body.player-app .sheet__panel,
body.player-app .game-menu-drawer,
body.player-app .game-menu-drawer__panel {
  border-color: var(--color-border);
}

body.player-app .card-popup__backdrop {
  background: rgba(28, 24, 34, 0.72);
}

body.player-app .card-popup__content {
  max-width: min(420px, 100%);
  background-color: var(--color-bg-elevated);
  background-image:
    linear-gradient(165deg, rgba(46, 40, 54, 0.82), rgba(28, 24, 34, 0.9)),
    var(--popup-bg-image, none);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  border-radius: var(--radius-card);
  font-family: var(--font-body);
}

body.player-app .card-popup__action-type {
  font-family: var(--font-display);
}

body.player-app .game-nav .game-nav__btn {
  border: 1px solid var(--color-border);
  background: rgba(22, 19, 28, 0.7);
  color: var(--color-accent-strong);
  border-radius: var(--radius-control);
  min-width: 48px;
  min-height: 48px;
}

body.player-app .game-nav .game-nav__btn:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.14);
  border-color: var(--color-accent);
}

body.player-app .game-actions-sheet__btn {
  border-color: var(--color-border);
  background: rgba(212, 148, 154, 0.1);
  color: var(--color-accent-strong);
}

body.player-app .game-actions-sheet__btn:hover {
  background: rgba(212, 148, 154, 0.2);
}

body.player-app .game-paused-overlay {
  background: rgba(28, 24, 34, 0.78);
}

body.player-app .game-paused-overlay__text {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
}

body.player-app .dare-side-roster__role {
  color: var(--color-accent-strong);
  font-family: var(--font-body);
}

body.player-app .dare-wheel-game__players-card > .game-screen__panel-title {
  border-bottom-color: var(--color-border);
  color: var(--color-accent-strong);
}

/* Game / Dare Wheel cards: keep title closer to the top edge */
body.player-app .game-screen__body .card,
body.player-app .dare-wheel-game > .card,
body.player-app .dare-wheel-game__media-wall,
body.player-app .dare-wheel-game__players-card {
  padding-top: 8px;
}

/* Collapsed Game Activity / Media Wall: match top padding below title (vertically center title) */
body.player-app .dare-wheel-game__chat .card.intensity-card:has(> .intensity-card__details:not([open])),
body.player-app .dare-wheel-game .card.game-chat-card:has(> .intensity-card__details:not([open])),
body.player-app .dare-wheel-game__media-wall:has(> .intensity-card__details:not([open])) {
  padding-top: 8px;
  padding-bottom: 8px;
}

body.player-app .dare-wheel-game__chat .card.intensity-card:has(> .intensity-card__details:not([open])) .intensity-card__summary,
body.player-app .dare-wheel-game .card.game-chat-card:has(> .intensity-card__details:not([open])) .intensity-card__summary,
body.player-app .dare-wheel-game__media-wall:has(> .intensity-card__details:not([open])) .intensity-card__summary {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Progress / thermometer + turn accents */
body.player-app .game-progress__level-text,
body.player-app .game-status-card__meta--turn,
body.player-app .turn-countdown {
  color: var(--color-accent-strong);
}

body.player-app .game-progress__step--filled {
  background: rgba(212, 148, 154, 0.55);
  border-color: rgba(212, 148, 154, 0.5);
}

/* Dare task card: same lounge accents as the rest of the app */
body.player-app .dare-wheel-game__task {
  border-color: rgba(212, 148, 154, 0.5);
  background:
    linear-gradient(135deg, rgba(212, 148, 154, 0.2), rgba(90, 154, 150, 0.12) 55%, rgba(212, 148, 154, 0.08));
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.18),
    0 0 18px rgba(212, 148, 154, 0.2),
    inset 0 0 24px rgba(212, 148, 154, 0.05);
  animation: none;
}

body.player-app .dare-wheel-game__task-label {
  color: var(--color-accent-strong);
  animation: none;
}

/* Card title underlines (Game Activity, Media Wall, etc.) */
body.player-app .game-screen__body .game-screen__panel-title,
body.player-app .game-screen__body .card .game-screen__panel-title,
body.player-app .game-status-card__details[open] .game-status-card__summary,
body.player-app .intensity-card__details[open] .intensity-card__summary,
body.player-app .card-history-card__details[open] .card-history-card__summary,
body.player-app .game-screen__body .card.intensity-card .intensity-card__details[open] > .intensity-card__summary.game-screen__panel-title,
body.player-app .game-screen__body .dare-wheel-game .card.intensity-card .intensity-card__details[open] > .intensity-card__summary.game-screen__panel-title {
  border-bottom-color: var(--color-border);
}

body.player-app .game-status-card__details[open] .game-status-card__body {
  border-top-color: var(--color-border);
}

/* Game Activity / chat chrome */
body.player-app .game-chat {
  border-color: var(--color-border);
  background: rgba(22, 19, 28, 0.55);
}

body.player-app .game-chat__input-wrap {
  border-top-color: var(--color-border);
  background: rgba(22, 19, 28, 0.72);
}

body.player-app .game-chat__emoji-btn {
  border-color: var(--color-border);
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
}

body.player-app .game-chat__emoji-btn:hover,
body.player-app .game-chat__emoji-btn[aria-expanded="true"] {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-accent);
}

body.player-app .game-chat__emoji-popover {
  border-color: var(--color-border);
  background: var(--color-bg-elevated);
  width: min(280px, calc(100vw - 32px));
  max-width: 18.5rem;
  gap: 6px;
  padding: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Match add-player avatar emoji grid cell sizing (beat body.player-app button) */
body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item,
body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item:hover:not(:disabled),
body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item:active:not(:disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control, 14px);
  background: var(--color-bg-input);
  color: var(--color-accent-strong);
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  transform: none;
}

body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item:hover:not(:disabled) {
  background: rgba(212, 148, 154, 0.12);
  border-color: var(--color-border);
  color: var(--color-accent-strong);
}

body.player-app .game-chat__emoji-popover-item--custom .game-chat__custom-emoji {
  max-width: 26px;
  max-height: 26px;
}

@media (min-width: 768px) {
  body.player-app .game-chat__emoji-popover {
    max-width: 22rem;
    width: min(352px, calc(100vw - 48px));
    gap: 5px;
  }

  body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item,
  body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item:hover:not(:disabled),
  body.player-app .game-chat__emoji-popover button.game-chat__emoji-popover-item:active:not(:disabled) {
    padding: 2px;
    font-size: 1.65rem;
  }

  body.player-app .game-chat__emoji-popover-item--custom .game-chat__custom-emoji {
    max-width: 30px;
    max-height: 30px;
  }

  /* Chat message emojis clearly larger on laptop (~25–30% vs body text) */
  body.player-app .game-chat__messages .game-chat__emoji {
    font-size: 1.45em;
    line-height: 1;
  }

  body.player-app .game-chat__messages .game-chat__custom-emoji {
    width: 1.85em;
    height: 1.85em;
    vertical-align: -0.4em;
  }

  /* Dare Wheel / Game Activity chat ~20% shorter than prior laptop height */
  body.player-app .dare-wheel-game__chat .game-chat,
  body.player-app .game-screen__chat .game-chat {
    height: 202px; /* ~20% under prior 252px */
  }

  body.player-app .dare-wheel-game__chat .game-chat__messages,
  body.player-app .game-screen__chat .game-chat__messages {
    max-height: 154px; /* ~20% under prior 192px; keeps latest above composer */
  }
}

body.player-app .game-chat__input:focus {
  outline-color: var(--color-accent);
}

body.player-app .game-chat__send-as {
  border-bottom-color: var(--color-border);
}

body.player-app .game-chat__message--new {
  background-color: rgba(212, 148, 154, 0.18);
}

body.player-app .game-chat__message--dare-land .game-chat__dare-task {
  color: var(--color-accent-strong);
}

body.player-app .game-chat__photo-thumb:not(.game-chat__photo-thumb--bull) {
  border-color: rgba(212, 148, 154, 0.85);
  box-shadow: 0 0 0 1px rgba(212, 148, 154, 0.35);
}

/* Wheel ring + spin-ready glow → lounge rose (not gold) */
body.player-app .dare-wheel-game__spinner .mode-wheel-container::after,
body.player-app .action-mode-spinner .mode-wheel-container::after {
  border-color: rgba(212, 148, 154, 0.55);
  box-shadow:
    0 0 0 1px rgba(212, 148, 154, 0.2),
    0 0 14px rgba(212, 148, 154, 0.22),
    0 0 24px rgba(212, 148, 154, 0.12),
    inset 0 0 16px rgba(212, 148, 154, 0.05);
}

body.player-app .dare-wheel-game__spinner--ready .mode-wheel-container::after,
body.player-app .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-container::after {
  animation: dareWheelReadyGlowLounge 1.05s ease-in-out infinite;
}

body.player-app .dare-wheel-game__spinner--ready .mode-wheel-hub-glow__ring,
body.player-app .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-hub-glow__ring {
  animation: dareHubReadyGlowLounge 1.05s ease-in-out infinite;
}

@keyframes dareWheelReadyGlowLounge {
  0%, 100% {
    border-color: rgba(212, 148, 154, 0.45);
    box-shadow:
      0 0 0 1px rgba(212, 148, 154, 0.2),
      0 0 12px rgba(212, 148, 154, 0.28),
      0 0 22px rgba(212, 148, 154, 0.16),
      inset 0 0 18px rgba(212, 148, 154, 0.08);
  }
  50% {
    border-color: rgba(226, 168, 173, 0.95);
    box-shadow:
      0 0 0 2px rgba(212, 148, 154, 0.45),
      0 0 28px rgba(212, 148, 154, 0.55),
      0 0 48px rgba(212, 148, 154, 0.32),
      inset 0 0 28px rgba(212, 148, 154, 0.16);
  }
}

@keyframes dareHubReadyGlowLounge {
  0%, 100% {
    stroke: rgba(212, 148, 154, 0.45);
    filter: drop-shadow(0 0 2px rgba(212, 148, 154, 0.4));
  }
  50% {
    stroke: rgba(226, 168, 173, 0.95);
    filter: drop-shadow(0 0 4px rgba(212, 148, 154, 0.6));
  }
}

@media (prefers-reduced-motion: reduce) {
  body.player-app .dare-wheel-game__spinner--ready .mode-wheel-hub-glow__ring,
  body.player-app .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-hub-glow__ring,
  .dare-wheel-game__spinner--ready .mode-wheel-hub-glow__ring,
  .action-mode-spinner.mode-wheel-spinner--ready .mode-wheel-hub-glow__ring {
    animation: none;
    stroke: rgba(212, 148, 154, 0.75);
    filter: drop-shadow(0 0 3px rgba(212, 148, 154, 0.4));
    opacity: 1;
  }
}

/* ----- Laptop / mobile polish ----- */
@media (max-width: 420px) {
  body.player-app .card-popup__content {
    padding: 14px 16px 18px;
    border-radius: 16px;
  }

  body.player-app .card-popup__action-type {
    font-size: 1.25rem;
  }

  body.player-app .game-nav .game-nav__btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 12px;
  }
}

@media (min-width: 768px) {
  /* Dare Wheel: true-center the wheel; float players into the left margin (no dead gap). */
  body.player-app .dare-wheel-game__spin-row {
    position: relative;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
    row-gap: 10px;
    /* Room for overlaid players without crowding the wheel edge */
    min-height: 0;
  }

  body.player-app .dare-wheel-game__players-card {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    grid-column: auto;
    justify-self: start;
    max-width: 160px;
    width: max-content;
    padding: 8px 8px 10px;
    margin: 0;
  }

  /* Grow into side gutters — stays centered; fills blank space both sides */
  body.player-app .dare-wheel-game__spin-row .mode-wheel {
    max-width: min(400px, 100%);
  }

  body.player-app .dare-wheel-game__spin-row .dare-wheel-game__spinner {
    grid-column: 2;
    justify-self: center;
  }

  body.player-app #screenGame #gameTurnCard.game-turn-card--dare .dare-wheel-game {
    gap: 8px;
  }

  /* Keep dare photo + chat icon controls equal on laptop (beat --btn-pad growth) */
  body.player-app .dare-wheel-game__photo-btns .dare-wheel-game__icon-btn.btn-avatar-opt--icon,
  body.player-app .dare-wheel-game__chat .game-chat__emoji-btn,
  body.player-app .dare-wheel-game__chat .game-chat__send,
  body.player-app .dare-wheel-game__chat .game-chat__timer-btn:not(.is-running) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body.player-app .game-screen__body > .card:not(.game-side-menu),
  body.player-app .game-screen__main > .card {
    padding: 10px 26px 20px;
  }

  /* Dare turn card: less side chrome so the centered wheel can breathe */
  body.player-app #screenGame #gameTurnCard.game-turn-card--dare {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 12px;
  }

  body.player-app .card-popup__content {
    max-width: 520px;
    padding: 22px 28px 28px;
  }

  body.player-app .card-popup__action-type {
    font-size: 1.75rem;
  }

  body.player-app .game-nav .game-nav__btn {
    min-width: 56px;
    min-height: 56px;
  }

  body.player-app .game-nav__icon {
    width: 24px;
    height: 24px;
  }

  body.player-app .mode-wheel-container {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  body.player-app .toast-inner {
    padding: 18px 20px;
    font-size: 1.05rem;
  }
}

/* Laptop width only: cue to the right of the wheel */
@media (min-width: 1024px) {
  body.player-app .dare-wheel-game__spin-cue {
    grid-column: 3;
    justify-self: start;
    align-self: center;
    max-width: 12.5rem;
    width: auto;
    margin-top: 0;
    margin-left: 14px; /* clear wheel edge — host “waiting to spin” pill */
  }
}